/* PS-HOME-STORY-001 — three-scene homepage (2026-07-16).
   Every rule is scoped under .home-v3 (the .ps-home namespace belongs to the
   previous homepage). Tokens follow the approved foundation: Product Indigo
   #4F5BD5, Connection Azure #4EA3FF, AI Cyan #2EC8D3, Evidence Amber #D7A33E,
   Midnight Ink #0A1B36, Cloud White #F6F8FC. Fonts are the site's existing
   Inter + Newsreader — no new font requests. No JavaScript. */

.home-v3 {
    /* Deep Navy Gold (2026-07-17): Home shares the navy accent + marigold
       highlight with the rest of the site. The trio maps to the shared
       --ps-* tokens; decorative scene accents (azure/cyan/green) stay to
       give the destination icons a little life. */
    --hv-indigo: var(--ps-primary, #203767);
    --hv-indigo-strong: var(--ps-primary-strong, #132447);
    --hv-indigo-soft: var(--ps-primary-soft, #E7ECF4);
    --hv-azure: #4EA3FF;
    --hv-cyan: #2EC8D3;
    --hv-amber: #B87900;
    --hv-ink: #0A1B36;
    --hv-text: #22334E;
    --hv-muted: #66778F;
    --hv-line: var(--ps-border, #DDE2EB);
    --hv-surface: #FFFFFF;
    --hv-cloud: var(--ps-canvas, #F6F7FA);
    --hv-green: #2B9B6D;
    --hv-violet: #203767;
    --hv-shadow-soft: 0 14px 40px rgb(21 41 84 / 8%);
    --hv-shadow-lift: 0 24px 60px rgb(17 31 68 / 12%);
    --hv-radius-lg: 1.5rem;
    --hv-radius-md: 1rem;
    --hv-serif: "Newsreader", Georgia, serif;

    font-family: Inter, Arial, sans-serif;
    color: var(--hv-text);
    background:
        radial-gradient(90rem 44rem at 78% -6rem, rgb(32 55 103 / 7%), transparent 62%),
        radial-gradient(70rem 40rem at -12% 30rem, rgb(184 121 0 / 5%), transparent 60%),
        linear-gradient(180deg, #F6F7FA 0%, #FDFDFE 46%, #F2F4F8 100%);
    overflow-x: clip;
}

.home-v3 .site-container {
    /* Wider stage on desktop (Pete, 2026-07-17). */
    width: min(100% - 3rem, 90rem);
    margin-inline: auto;
}

/* ---------- shared pieces ---------- */

.home-v3 .hv-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgb(32 55 103 / 8%);
    color: var(--hv-indigo-strong);
    font-size: 0.85rem;
    font-weight: 650;
}

.home-v3 .hv-scene-title {
    margin: 0 0 1.2rem;
    font-family: var(--hv-serif);
    font-weight: 700;
    font-size: clamp(2.4rem, 4.2vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--hv-ink);
}

.home-v3 .hv-scene-title em {
    display: block;
    font-style: italic;
    color: var(--hv-indigo);
}

.home-v3 .hv-scene-lede {
    margin: 0 0 1.8rem;
    max-width: 33rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--hv-muted);
}

.home-v3 .hv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin: 0 0 1.4rem;
}

.home-v3 .hv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0 1.5rem;
    border-radius: 0.95rem;
    font-size: 0.98rem;
    font-weight: 650;
    text-decoration: none;
    transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-v3 .hv-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v3 .hv-btn--primary {
    background: var(--hv-indigo);
    color: #fff;
    box-shadow: 0 12px 26px rgb(32 55 103 / 24%);
}

.home-v3 .hv-btn--primary:hover { background: var(--hv-indigo-strong); }

.home-v3 .hv-btn--ghost {
    background: var(--hv-surface);
    color: #45566F;
    border: 1px solid var(--hv-line);
}

.home-v3 .hv-btn--ghost:hover { background: #F5F7FC; }

.home-v3 .hv-trust,
.home-v3 .hv-audience {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.88rem;
    color: var(--hv-muted);
}

.home-v3 .hv-audience { margin-top: 0.55rem; }

.home-v3 .hv-trust svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v3 .hv-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--hv-indigo);
    font-weight: 650;
    font-size: 0.95rem;
    text-decoration: none;
}

.home-v3 .hv-inline-link:hover { color: var(--hv-indigo-strong); text-decoration: underline; }

.home-v3 .hv-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: #EEF1F8;
    color: #5B6B82;
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

.home-v3 .hv-chip--amber { background: #FBF3E1; color: #8A6A1E; }
.home-v3 .hv-chip--cyan { background: #E4F8FA; color: #14727C; }

.home-v3 a:focus-visible,
.home-v3 button:focus-visible {
    outline: 2px solid var(--hv-indigo);
    outline-offset: 3px;
    border-radius: 0.6rem;
}

/* ---------- scene 1: voice hero ---------- */

.home-v3 .hv-hero { padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 4vw, 4rem); }

.home-v3 .hv-hero__inner {
    display: grid;
    /* Rebalanced with the wider container: the capture stage carries the
       center, the destination rail breathes a little more. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.24fr) minmax(0, 0.92fr);
    grid-template-areas:
        "copy stage dest"
        "week week dest";
    gap: clamp(1.5rem, 3.2vw, 3.5rem);
    align-items: start;
}

.home-v3 .hv-hero__copy { grid-area: copy; padding-top: 1.2rem; }

.home-v3 .hv-hero__title {
    margin: 0 0 1.3rem;
    font-family: var(--hv-serif);
    font-weight: 700;
    font-size: clamp(2.5rem, 4.4vw, 3.7rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--hv-ink);
}

.home-v3 .hv-hero__title em {
    display: block;
    font-style: italic;
    color: var(--hv-indigo);
}

.home-v3 .hv-hero__lede {
    margin: 0 0 1.8rem;
    max-width: 27rem;
    font-size: 1.08rem;
    line-height: 1.65;
    color: var(--hv-muted);
}

/* mic stage */

.home-v3 .hv-hero__stage {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.3rem;
}

.home-v3 .hv-mic {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 24rem);
    aspect-ratio: 1;
    text-decoration: none;
    color: inherit;
    border-radius: 50%;
}

.home-v3 .hv-mic__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgb(255 255 255 / 0%) 74%, rgb(78 163 255 / 14%) 84%, rgb(78 163 255 / 4%) 92%, transparent 100%);
}

.home-v3 .hv-mic__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 88%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, #FFFFFF 58%, #F3F7FE 82%, #EAF2FD 100%);
    border: 1px solid rgb(148 176 216 / 35%);
    box-shadow: var(--hv-shadow-lift), inset 0 0 0 0.6rem rgb(255 255 255 / 65%);
    padding: 1.4rem;
    text-align: center;
    transition: box-shadow 180ms ease, transform 180ms ease;
}

.home-v3 .hv-mic:hover .hv-mic__inner,
.home-v3 .hv-mic:focus-visible .hv-mic__inner {
    box-shadow: 0 28px 70px rgb(17 31 68 / 16%), inset 0 0 0 0.6rem rgb(255 255 255 / 65%);
    transform: translateY(-2px);
}

.home-v3 .hv-mic__wave {
    width: 72%;
    height: 2.6rem;
    fill: var(--hv-indigo);
    opacity: 0.7;
}

.home-v3 .hv-mic__prompt {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--hv-ink);
}

.home-v3 .hv-mic__timer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--hv-muted);
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}

.home-v3 .hv-mic__timer svg,
.home-v3 .hv-mic__key svg,
.home-v3 .hv-mic__btn svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v3 .hv-mic__controls {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.2rem;
}

.home-v3 .hv-mic__key,
.home-v3 .hv-mic__btn {
    display: grid;
    place-items: center;
    border-radius: 999px;
}

.home-v3 .hv-mic__key {
    width: 2.6rem;
    height: 2.6rem;
    background: #fff;
    border: 1px solid var(--hv-line);
    color: #66778F;
}

.home-v3 .hv-mic__btn {
    width: 3.4rem;
    height: 3.4rem;
    background: var(--hv-indigo);
    color: #fff;
    box-shadow: 0 12px 26px rgb(32 55 103 / 30%);
}

.home-v3 .hv-mic__btn svg { width: 1.25rem; height: 1.25rem; }

.home-v3 .hv-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-chips li {
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 75%);
    border: 1px solid var(--hv-line);
    color: #56677F;
    font-size: 0.8rem;
    font-weight: 600;
}

/* destination cards */

.home-v3 .hv-destinations {
    grid-area: dest;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.home-v3 .hv-dest {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.9rem;
    padding: 0.7rem 0.95rem;
    border-radius: var(--hv-radius-md);
    background: var(--hv-surface);
    border: 1px solid rgb(221 228 240 / 90%);
    box-shadow: var(--hv-shadow-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-v3 .hv-dest:hover {
    transform: translateY(-2px);
    box-shadow: var(--hv-shadow-lift);
}

.home-v3 .hv-dest__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    flex: 0 0 auto;
}

.home-v3 .hv-dest__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v3 .hv-dest__icon--indigo { background: var(--hv-indigo-soft); color: var(--hv-indigo-strong); }
.home-v3 .hv-dest__icon--green { background: #E4F5EC; color: #1F7A52; }
.home-v3 .hv-dest__icon--amber { background: #FBF3E1; color: #8A6A1E; }
.home-v3 .hv-dest__icon--violet { background: #F0EAFB; color: #6A44B8; }
.home-v3 .hv-dest__icon--cyan { background: #E4F8FA; color: #14727C; }

.home-v3 .hv-dest__copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.home-v3 .hv-dest__copy strong { font-size: 0.92rem; color: var(--hv-ink); }
.home-v3 .hv-dest__copy span { font-size: 0.78rem; color: var(--hv-muted); }

.home-v3 .hv-dest__arrow {
    margin-left: auto;
    color: #9AA8BC;
    font-size: 1.3rem;
    line-height: 1;
}

/* week strip */

.home-v3 .hv-week {
    grid-area: week;
    display: grid;
    grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.6fr) minmax(10rem, 0.8fr);
    gap: clamp(1rem, 2.4vw, 2.2rem);
    align-items: center;
    margin-top: 0.6rem;
    padding: 1.4rem 1.6rem;
    border-radius: var(--hv-radius-lg);
    background: rgb(255 255 255 / 72%);
    border: 1px solid rgb(221 228 240 / 90%);
    box-shadow: var(--hv-shadow-soft);
}

.home-v3 .hv-week__title {
    margin: 0 0 0.3rem;
    font-family: var(--hv-serif);
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--hv-ink);
}

.home-v3 .hv-week__copy p {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--hv-muted);
}

.home-v3 .hv-week__timeline {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.home-v3 .hv-week__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    position: relative;
}

.home-v3 .hv-week__day::before {
    content: "";
    position: absolute;
    top: 1.72rem;
    left: -50%;
    width: 100%;
    height: 1px;
    background: var(--hv-line);
}

.home-v3 .hv-week__day:first-child::before { display: none; }

.home-v3 .hv-week__label { font-size: 0.72rem; font-weight: 650; color: var(--hv-muted); }

.home-v3 .hv-week__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }

.home-v3 .hv-week__dot--indigo { background: var(--hv-indigo); }
.home-v3 .hv-week__dot--green { background: var(--hv-green); }
.home-v3 .hv-week__dot--amber { background: var(--hv-amber); }
.home-v3 .hv-week__dot--violet { background: var(--hv-violet); }
.home-v3 .hv-week__dot--cyan { background: var(--hv-cyan); }

.home-v3 .hv-week__icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
}

.home-v3 .hv-week__icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-v3 .hv-week__icon--indigo { background: var(--hv-indigo-soft); color: var(--hv-indigo-strong); }
.home-v3 .hv-week__icon--green { background: #E4F5EC; color: #1F7A52; }
.home-v3 .hv-week__icon--amber { background: #FBF3E1; color: #8A6A1E; }
.home-v3 .hv-week__icon--violet { background: #F0EAFB; color: #6A44B8; }
.home-v3 .hv-week__icon--cyan { background: #E4F8FA; color: #14727C; }

.home-v3 .hv-week__summary {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--hv-radius-md);
    background: #fff;
    border: 1px solid var(--hv-line);
    font-size: 0.8rem;
    color: #4A5B73;
}

.home-v3 .hv-week__summary strong { color: var(--hv-ink); font-size: 0.82rem; }

.home-v3 .hv-week__summary span { display: inline-flex; align-items: center; gap: 0.45rem; }

.home-v3 .hv-week__mark { width: 0.5rem; height: 0.5rem; border-radius: 50%; display: inline-block; }
.home-v3 .hv-week__mark--green { background: var(--hv-green); }
.home-v3 .hv-week__mark--amber { background: var(--hv-amber); }
.home-v3 .hv-week__mark--azure { background: var(--hv-azure); }
.home-v3 .hv-week__mark--indigo { background: var(--hv-indigo); }
.home-v3 .hv-week__mark--cyan { background: var(--hv-cyan); }

/* ---------- scene 2: living résumé ---------- */

.home-v3 .hv-resume { padding: clamp(3rem, 6vw, 5.5rem) 0; }

.home-v3 .hv-resume__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(1.8rem, 3.4vw, 3.4rem);
    align-items: start;
}

.home-v3 .hv-resume__copy { position: sticky; top: 7.5rem; padding-top: 1.6rem; }

.home-v3 .hv-resume__card {
    background: var(--hv-surface);
    border: 1px solid rgb(221 228 240 / 90%);
    border-radius: 1.6rem;
    box-shadow: var(--hv-shadow-lift);
    padding: clamp(1.3rem, 2.4vw, 2.1rem);
}

.home-v3 .hv-rc__head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid #E8EDF5;
    margin-bottom: 1.3rem;
}

.home-v3 .hv-rc__avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #fff, 0 6px 16px rgb(17 31 68 / 14%);
}

.home-v3 .hv-rc__name {
    margin: 0;
    font-family: var(--hv-serif);
    font-size: 1.35rem;
    color: var(--hv-ink);
}

.home-v3 .hv-rc__role { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--hv-muted); }

.home-v3 .hv-rc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.1rem, 2vw, 1.8rem);
}

.home-v3 .hv-rc__col { min-width: 0; }

.home-v3 .hv-rc__kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hv-indigo-strong);
}

.home-v3 .hv-rc__headline {
    margin: 0 0 1rem;
    font-family: var(--hv-serif);
    font-size: 1.45rem;
    line-height: 1.2;
    color: var(--hv-ink);
}

.home-v3 .hv-rc__headline em { font-style: italic; }

.home-v3 .hv-rc__metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-rc__metrics li {
    padding: 0.85rem 0.95rem;
    border-radius: var(--hv-radius-md);
    background: #F7F9FD;
    border: 1px solid #E8EDF5;
}

.home-v3 .hv-rc__metrics strong {
    display: block;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    color: var(--hv-indigo-strong);
    font-variant-numeric: tabular-nums;
}

.home-v3 .hv-rc__metrics span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--hv-muted);
}

.home-v3 .hv-rc__metrics-note {
    display: flex;
    align-items: center;
    background: #FFFDF6;
    border-color: #F2E5C4;
}

.home-v3 .hv-rc__panel {
    padding: 1rem 1.05rem;
    border-radius: var(--hv-radius-md);
    border: 1px solid #E8EDF5;
    background: #fff;
}

.home-v3 .hv-rc__panel + .hv-rc__panel { margin-top: 0.9rem; }

.home-v3 .hv-rc__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.home-v3 .hv-rc__panel-head h4,
.home-v3 .hv-rc__panel-title {
    margin: 0;
    font-size: 0.95rem;
    color: var(--hv-ink);
}

.home-v3 .hv-rc__panel-title { margin-bottom: 0.75rem; font-family: var(--hv-serif); font-size: 1.15rem; }

.home-v3 .hv-rc__panel-note { font-size: 0.7rem; color: var(--hv-muted); }

.home-v3 .hv-rc__skills,
.home-v3 .hv-rc__creds {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-rc__skills li,
.home-v3 .hv-rc__creds li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.2rem;
}

.home-v3 .hv-rc__skills li + li,
.home-v3 .hv-rc__creds li + li { border-top: 1px solid #EEF2F8; }

.home-v3 .hv-rc__skill-mark,
.home-v3 .hv-rc__cred-mark {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: var(--hv-indigo-soft);
    color: var(--hv-indigo-strong);
    font-size: 0.85rem;
    font-weight: 750;
    flex: 0 0 auto;
}

.home-v3 .hv-rc__skill-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.home-v3 .hv-rc__skill-copy strong { font-size: 0.9rem; color: var(--hv-ink); }
.home-v3 .hv-rc__skill-copy > span { font-size: 0.76rem; color: var(--hv-muted); }

.home-v3 .hv-rc__roles {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-rc__roles li { display: flex; gap: 0.7rem; }

.home-v3 .hv-rc__role-dot {
    width: 0.65rem;
    height: 1.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--hv-indigo), var(--hv-azure));
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

.home-v3 .hv-rc__roles li:nth-child(2) .hv-rc__role-dot { background: linear-gradient(180deg, var(--hv-azure), var(--hv-cyan)); }
.home-v3 .hv-rc__roles li:nth-child(3) .hv-rc__role-dot { background: linear-gradient(180deg, var(--hv-cyan), #7FD8DF); }

.home-v3 .hv-rc__role-copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.home-v3 .hv-rc__role-copy strong { font-size: 0.92rem; color: var(--hv-ink); }
.home-v3 .hv-rc__role-copy > span { font-size: 0.76rem; color: var(--hv-muted); }

.home-v3 .hv-rc__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
}

.home-v3 .hv-rc__panel--proof { background: #FBFCFF; }

.home-v3 .hv-rc__proof-text {
    margin: 0 0 0.6rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #46566D;
}

.home-v3 .hv-rc__steps {
    margin-top: 1.4rem;
    padding: 1.1rem 1.2rem;
    border-radius: var(--hv-radius-md);
    border: 1px solid #E8EDF5;
    background: #F8FAFD;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.home-v3 .hv-rc__steps-title {
    margin: 0;
    font-family: var(--hv-serif);
    font-size: 1.05rem;
    color: var(--hv-ink);
    flex: 1 1 14rem;
}

.home-v3 .hv-rc__steps-title em { font-style: italic; color: var(--hv-indigo); }

.home-v3 .hv-rc__steps-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-rc__steps-list a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: inherit;
    padding: 0.35rem 0.45rem;
    border-radius: 0.7rem;
}

.home-v3 .hv-rc__steps-list a:hover { background: #EEF1FA; }

.home-v3 .hv-rc__step-num {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.6rem;
    background: var(--hv-indigo-soft);
    color: var(--hv-indigo-strong);
    font-weight: 750;
    font-size: 0.85rem;
}

.home-v3 .hv-rc__steps-list strong { display: block; font-size: 0.82rem; color: var(--hv-ink); }
.home-v3 .hv-rc__steps-list a > span:last-child span { display: block; font-size: 0.7rem; color: var(--hv-muted); }

/* ---------- scene 3: my story + future ---------- */

.home-v3 .hv-story { padding: clamp(3rem, 6vw, 5.5rem) 0; }

.home-v3 .hv-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.56fr) auto minmax(0, 1.44fr);
    grid-template-areas: "copy acts stage";
    gap: clamp(1.4rem, 2.6vw, 2.6rem);
    align-items: start;
}

.home-v3 .hv-story__copy { grid-area: copy; position: sticky; top: 7.5rem; padding-top: 1.2rem; }

/* act index — museum chapter guide */

.home-v3 .hv-acts {
    grid-area: acts;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 1.6rem 0 0;
    padding: 0 0 0 1.1rem;
    list-style: none;
    border-left: 1px solid var(--hv-line);
    max-width: 11rem;
}

.home-v3 .hv-acts__item { display: flex; gap: 0.6rem; align-items: flex-start; position: relative; }

.home-v3 .hv-acts__item::before {
    content: "";
    position: absolute;
    left: -1.1rem;
    top: 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #C4CEDF;
    transform: translateX(-50%);
    transition: background 160ms ease;
}

.home-v3 .hv-acts__item--current::before { background: var(--hv-indigo); }

.home-v3 .hv-acts__num {
    font-family: var(--hv-serif);
    font-size: 0.95rem;
    color: #9AA8BC;
    padding-top: 0.05rem;
}

.home-v3 .hv-acts__copy { display: flex; flex-direction: column; gap: 0.1rem; }

.home-v3 .hv-acts__eyebrow {
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hv-muted);
}

.home-v3 .hv-acts__label {
    font-family: var(--hv-serif);
    font-size: 0.98rem;
    line-height: 1.25;
    color: var(--hv-ink);
}

.home-v3 .hv-acts__item--current .hv-acts__num,
.home-v3 .hv-acts__item--current .hv-acts__eyebrow,
.home-v3 .hv-acts__item--current .hv-acts__label { color: var(--hv-indigo-strong); }

/* stage */

.home-v3 .hv-story__stage {
    grid-area: stage;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    grid-template-areas:
        "maui now"
        "chapters future"
        "polaroids future";
    gap: 1.3rem;
    align-items: stretch;
}

.home-v3 .hv-maui {
    grid-area: maui;
    position: relative;
    margin: 0;
    border-radius: var(--hv-radius-lg);
    overflow: hidden;
    box-shadow: var(--hv-shadow-lift);
    min-height: 22rem;
}

.home-v3 .hv-maui img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-v3 .hv-maui__caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3.4rem 1.4rem 1.3rem;
    background: linear-gradient(180deg, rgb(6 17 36 / 0%), rgb(6 17 36 / 66%) 78%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.home-v3 .hv-maui__badge {
    align-self: flex-start;
    margin-bottom: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 88%);
    color: #30415B;
    font-size: 0.72rem;
    font-weight: 750;
}

.home-v3 .hv-maui__kicker {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.home-v3 .hv-maui__title {
    font-family: var(--hv-serif);
    font-size: clamp(1.35rem, 1.9vw, 1.75rem);
    line-height: 1.15;
}

.home-v3 .hv-now,
.home-v3 .hv-chapters,
.home-v3 .hv-future {
    background: var(--hv-surface);
    border: 1px solid rgb(221 228 240 / 90%);
    border-radius: var(--hv-radius-lg);
    box-shadow: var(--hv-shadow-soft);
    padding: 1.4rem 1.5rem;
    min-width: 0;
}

.home-v3 .hv-now { grid-area: now; }

.home-v3 .hv-now__title {
    margin: 0 0 0.6rem;
    font-family: var(--hv-serif);
    font-size: clamp(1.35rem, 1.8vw, 1.6rem);
    line-height: 1.18;
    color: var(--hv-ink);
}

.home-v3 .hv-now__lede { margin: 0 0 0.9rem; font-size: 0.86rem; line-height: 1.55; color: var(--hv-muted); }

.home-v3 .hv-now__panel {
    border: 1px solid #E8EDF5;
    border-radius: var(--hv-radius-md);
    padding: 0.85rem 1rem;
    background: #FBFCFF;
}

.home-v3 .hv-now__panel-title { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--hv-ink); }

.home-v3 .hv-now__list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    line-height: 1.45;
    color: #4A5B73;
}

.home-v3 .hv-now__list strong { color: var(--hv-indigo-strong); }

.home-v3 .hv-now__quote {
    margin: 0.9rem 0 0;
    padding: 0 0 0 0.85rem;
    border-left: 2px solid var(--hv-cyan);
    font-family: var(--hv-serif);
    font-style: italic;
    font-size: 0.98rem;
    color: #33445F;
}

.home-v3 .hv-now__turning {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid #EEF2F8;
    font-size: 0.92rem;
    color: var(--hv-ink);
}

.home-v3 .hv-now__ghost {
    font-family: var(--hv-serif);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--hv-indigo);
    opacity: 0.85;
    line-height: 1;
}

/* act two — chapters */

.home-v3 .hv-chapters { grid-area: chapters; padding-bottom: 4.6rem; }

.home-v3 .hv-chapters__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.home-v3 .hv-chapters__title {
    margin: 0;
    font-family: var(--hv-serif);
    font-size: clamp(1.3rem, 1.8vw, 1.55rem);
    color: var(--hv-ink);
}

.home-v3 .hv-chapters__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-chapter {
    position: relative;
    padding: 0.9rem 1rem;
    border: 1px solid #E8EDF5;
    border-radius: var(--hv-radius-md);
    background: #FBFCFE;
    min-width: 0;
}

.home-v3 .hv-chapter__era {
    display: block;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hv-muted);
    margin-bottom: 0.35rem;
    padding-right: 2.2rem;
}

.home-v3 .hv-chapter__num {
    position: absolute;
    top: 0.55rem;
    right: 0.85rem;
    font-family: var(--hv-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: #E1E7F2;
}

.home-v3 .hv-chapter__title {
    margin: 0 0 0.3rem;
    font-family: var(--hv-serif);
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--hv-ink);
}

.home-v3 .hv-chapter__line { margin: 0; font-size: 0.76rem; line-height: 1.45; color: var(--hv-muted); }

/* act three — polaroids */

.home-v3 .hv-polaroids {
    grid-area: polaroids;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: -4.2rem;
    padding: 0 0.5rem;
    position: relative;
    z-index: 2;
}

.home-v3 .hv-polaroid {
    margin: 0;
    background: #FFFEFB;
    border: 1px solid #E7E4DA;
    border-radius: 0.25rem;
    padding: 0.55rem 0.55rem 0.8rem;
    box-shadow: 0 14px 30px rgb(31 41 66 / 16%);
    width: min(36%, 15rem);
    flex: 0 1 auto;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.home-v3 .hv-polaroid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3.4;
    object-fit: cover;
    border-radius: 0.15rem;
}

.home-v3 .hv-polaroid figcaption {
    padding: 0.55rem 0.2rem 0;
    text-align: center;
}

.home-v3 .hv-polaroid figcaption strong {
    display: block;
    font-family: var(--hv-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 0.85rem;
    color: #33445F;
}

.home-v3 .hv-polaroid figcaption span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: var(--hv-muted);
}

.home-v3 .hv-polaroid--1 { transform: rotate(-3deg); z-index: 1; }
.home-v3 .hv-polaroid--2 { transform: rotate(1.5deg) translateY(0.6rem); margin-inline: -0.9rem; z-index: 2; }
.home-v3 .hv-polaroid--3 { transform: rotate(-1deg); z-index: 1; }

.home-v3 .hv-polaroid:hover,
.home-v3 .hv-polaroid:focus-within {
    transform: rotate(0deg) translateY(-0.2rem);
    box-shadow: 0 20px 40px rgb(31 41 66 / 20%);
    z-index: 3;
}

/* act four — future */

.home-v3 .hv-future { grid-area: future; display: flex; flex-direction: column; }

.home-v3 .hv-future__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.home-v3 .hv-future__head .hv-rc__kicker { margin: 0; }

.home-v3 .hv-future__title {
    margin: 0 0 0.4rem;
    font-family: var(--hv-serif);
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    color: var(--hv-ink);
}

.home-v3 .hv-future__lede { margin: 0 0 1rem; font-size: 0.85rem; color: var(--hv-muted); }

.home-v3 .hv-future__list {
    display: flex;
    flex-direction: column;
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-future__list li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.2rem;
}

.home-v3 .hv-future__list li + li { border-top: 1px solid #EEF2F8; }

.home-v3 .hv-future__mark {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: #E4F8FA;
    color: #14727C;
    font-weight: 750;
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.home-v3 .hv-future__phd {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.05rem;
    border-radius: var(--hv-radius-md);
    background: linear-gradient(120deg, #101F3E, #1B2C55);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 30px rgb(10 27 54 / 30%);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.home-v3 .hv-future__phd:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgb(10 27 54 / 36%); }

.home-v3 .hv-future__phd .hv-rc__skill-copy strong { color: #fff; font-size: 0.95rem; }
.home-v3 .hv-future__phd .hv-rc__skill-copy > span { color: rgb(255 255 255 / 72%); }

.home-v3 .hv-future__phd-mark {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.7rem;
    background: rgb(255 255 255 / 14%);
    color: #B8C6FF;
    font-size: 1rem;
    flex: 0 0 auto;
}

.home-v3 .hv-future__phd .hv-dest__arrow { color: rgb(255 255 255 / 65%); }

/* ---------- scene 4: invitation band ---------- */

.home-v3 .hv-invite {
    border-top: 1px solid rgb(221 228 240 / 80%);
    background: linear-gradient(180deg, rgb(238 240 255 / 45%), rgb(246 248 252 / 90%));
    padding: 2.2rem 0;
    margin-top: 1rem;
}

.home-v3 .hv-invite__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    flex-wrap: wrap;
}

.home-v3 .hv-invite__line {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0;
    font-family: var(--hv-serif);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    color: var(--hv-ink);
}

.home-v3 .hv-invite__spark { color: var(--hv-indigo); }

.home-v3 .hv-invite__link { font-size: 1rem; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .home-v3 *,
    .home-v3 *::before,
    .home-v3 *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
    }

    .home-v3 .hv-polaroid:hover,
    .home-v3 .hv-polaroid:focus-within { transform: none; }

    .home-v3 .hv-polaroid--1 { transform: rotate(-3deg); }
    .home-v3 .hv-polaroid--2 { transform: rotate(1.5deg) translateY(0.6rem); }
    .home-v3 .hv-polaroid--3 { transform: rotate(-1deg); }

    .home-v3 .hv-dest:hover,
    .home-v3 .hv-future__phd:hover,
    .home-v3 .hv-mic:hover .hv-mic__inner { transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
    .home-v3 .hv-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        grid-template-areas:
            "copy stage"
            "dest dest"
            "week week";
    }

    .home-v3 .hv-destinations {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }

    .home-v3 .hv-resume__inner { grid-template-columns: 1fr; }
    .home-v3 .hv-resume__copy { position: static; padding-top: 0; }

    .home-v3 .hv-story__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "acts"
            "stage";
    }

    .home-v3 .hv-story__copy { position: static; padding-top: 0; }

    /* tablet: compact horizontal chapter strip */
    .home-v3 .hv-acts {
        flex-direction: row;
        gap: 0.8rem;
        border-left: 0;
        padding: 0.9rem 1rem;
        margin: 0;
        max-width: none;
        border: 1px solid var(--hv-line);
        border-radius: var(--hv-radius-md);
        background: rgb(255 255 255 / 70%);
        overflow-x: auto;
    }

    .home-v3 .hv-acts__item { flex: 1 0 10rem; }
    .home-v3 .hv-acts__item::before { display: none; }
}

@media (max-width: 860px) {
    .home-v3 .hv-hero__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "copy"
            "stage"
            "dest"
            "week";
    }

    .home-v3 .hv-week { grid-template-columns: 1fr; }
    .home-v3 .hv-week__summary { flex-direction: row; flex-wrap: wrap; gap: 0.6rem 1rem; }

    .home-v3 .hv-rc__grid { grid-template-columns: 1fr; }

    .home-v3 .hv-story__stage {
        grid-template-columns: 1fr;
        grid-template-areas:
            "maui"
            "now"
            "chapters"
            "polaroids"
            "future";
    }

    .home-v3 .hv-chapters { padding-bottom: 1.4rem; }

    /* remove the overlap on narrow screens per the brief */
    .home-v3 .hv-polaroids {
        margin-top: 0;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
    }

    .home-v3 .hv-polaroid,
    .home-v3 .hv-polaroid--2 {
        width: min(46%, 13.5rem);
        margin-inline: 0;
    }
}

@media (max-width: 560px) {
    .home-v3 .site-container { width: min(100% - 2rem, 82.5rem); }

    .home-v3 .hv-actions .hv-btn { flex: 1 1 100%; }

    .home-v3 .hv-chapters__grid { grid-template-columns: 1fr; }

    .home-v3 .hv-polaroid,
    .home-v3 .hv-polaroid--2 { width: min(100%, 15rem); }

    .home-v3 .hv-polaroid--1,
    .home-v3 .hv-polaroid--2,
    .home-v3 .hv-polaroid--3 { transform: rotate(-1deg); }

    .home-v3 .hv-rc__metrics { grid-template-columns: 1fr 1fr; }

    .home-v3 .hv-rc__steps { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   MONOCHROME & SIGNAL GOLD (PS-THEME-001, 2026-07-16)
   body[data-theme="dark"]: cinematic near-black voice hero with a single
   gold action, then paper-white story bands, closed by the ink footer —
   the alternating light/dark choreography from the reference poster.
   Light theme above is untouched.
   ===================================================================== */
body[data-theme="dark"] .home-v3 {
    --hv-indigo: #d8a928;
    --hv-indigo-strong: #e3b83a;
    --hv-indigo-soft: rgb(216 169 40 / 16%);
    --hv-azure: #d8a928;
    --hv-cyan: #d8a928;
    --hv-amber: #d8a928;
    --hv-ink: #f7f9fc;
    --hv-text: #e2e7f0;
    --hv-muted: #afb9cb;
    --hv-line: #34497b;
    --hv-surface: #182c52;
    --hv-cloud: #0a1730;
    --hv-green: #69ae92;
    --hv-violet: #d8a928;
    --hv-shadow-soft: 0 14px 40px rgb(0 0 0 / 40%);
    --hv-shadow-lift: 0 24px 60px rgb(0 0 0 / 50%);
    color: var(--hv-text);
    background:
        radial-gradient(90rem 44rem at 78% -6rem, rgb(216 169 40 / 7%), transparent 62%),
        linear-gradient(180deg, #0a1730 0%, #122242 60%, #0a1730 100%);
}

/* Hero internals: graphite capture stage, gold signals. */
body[data-theme="dark"] .home-v3 .hv-eyebrow {
    background: rgb(216 169 40 / 14%);
    color: #e3b83a;
}

body[data-theme="dark"] .home-v3 .hv-btn--ghost {
    color: #e2e7f0;
    border-color: #3b527f;
}

body[data-theme="dark"] .home-v3 .hv-btn--ghost:hover { background: rgb(255 255 255 / 8%); }

body[data-theme="dark"] .home-v3 .hv-btn--primary {
    background: #d8a928;
    color: #0a1730;
    box-shadow: 0 12px 26px rgb(216 169 40 / 22%);
}

body[data-theme="dark"] .home-v3 .hv-btn--primary:hover { background: #e3b83a; }

body[data-theme="dark"] .home-v3 .hv-mic__ring {
    background:
        radial-gradient(closest-side, rgb(216 169 40 / 0%) 74%, rgb(216 169 40 / 18%) 84%, rgb(216 169 40 / 5%) 92%, transparent 100%);
}

body[data-theme="dark"] .home-v3 .hv-mic__inner {
    background: radial-gradient(circle at 50% 32%, #253a61 42%, #182c52 78%, #122242 100%);
    border: 1px solid #3b527f;
    box-shadow: var(--hv-shadow-lift), inset 0 0 0 0.6rem rgb(255 255 255 / 4%);
}

body[data-theme="dark"] .home-v3 .hv-mic:hover .hv-mic__inner,
body[data-theme="dark"] .home-v3 .hv-mic:focus-visible .hv-mic__inner {
    box-shadow: 0 28px 70px rgb(0 0 0 / 55%), inset 0 0 0 0.6rem rgb(216 169 40 / 10%);
}

body[data-theme="dark"] .home-v3 .hv-mic__key {
    background: rgb(255 255 255 / 8%);
    border-color: #3b527f;
    color: #afb9cb;
}

body[data-theme="dark"] .home-v3 .hv-mic__btn {
    background: #d8a928;
    color: #0a1730;
    box-shadow: 0 12px 26px rgb(216 169 40 / 26%);
}

body[data-theme="dark"] .home-v3 .hv-chips li {
    background: rgb(255 255 255 / 7%);
    border-color: #34497b;
    color: #cbd3e0;
}

body[data-theme="dark"] .home-v3 .hv-chip {
    background: rgb(255 255 255 / 8%);
    color: #cbd3e0;
}

body[data-theme="dark"] .home-v3 .hv-chip--amber,
body[data-theme="dark"] .home-v3 .hv-chip--cyan {
    background: rgb(216 169 40 / 16%);
    color: #e3b83a;
}

body[data-theme="dark"] .home-v3 .hv-dest {
    border-color: #253c66;
}

body[data-theme="dark"] .home-v3 .hv-dest__icon--indigo,
body[data-theme="dark"] .home-v3 .hv-dest__icon--amber,
body[data-theme="dark"] .home-v3 .hv-dest__icon--violet,
body[data-theme="dark"] .home-v3 .hv-dest__icon--cyan {
    background: rgb(216 169 40 / 14%);
    color: #e3b83a;
}

body[data-theme="dark"] .home-v3 .hv-dest__icon--green {
    background: rgb(105 174 146 / 16%);
    color: #69ae92;
}

body[data-theme="dark"] .home-v3 .hv-dest__arrow { color: #66645f; }

body[data-theme="dark"] .home-v3 .hv-week {
    background: rgb(255 255 255 / 5%);
    border: 1px solid #253c66;
}

body[data-theme="dark"] .home-v3 .hv-week__icon--green { background: rgb(105 174 146 / 16%); color: #69ae92; }
body[data-theme="dark"] .home-v3 .hv-week__icon--amber,
body[data-theme="dark"] .home-v3 .hv-week__icon--violet,
body[data-theme="dark"] .home-v3 .hv-week__icon--cyan {
    background: rgb(216 169 40 / 14%);
    color: #e3b83a;
}

body[data-theme="dark"] .home-v3 a:focus-visible,
body[data-theme="dark"] .home-v3 button:focus-visible {
    outline: 2px solid #d8a928;
}

/* ---------- paper bands: Living Résumé + Story/Future scenes ----------
   The mock-UI showcases inside these scenes are built light; the mono
   composition keeps them as the light stages between dark hero and dark
   footer, so their internals stay legible and the page alternates. */
body[data-theme="dark"] .home-v3 .hv-resume,
body[data-theme="dark"] .home-v3 .hv-story {
    --hv-indigo: #8a6500;
    --hv-indigo-strong: #6f5100;
    --hv-indigo-soft: rgb(216 169 40 / 16%);
    --hv-azure: #bf8f17;
    --hv-cyan: #bf8f17;
    --hv-amber: #d8a928;
    --hv-ink: #0a1730;
    --hv-text: #3a3d42;
    --hv-muted: #66645f;
    --hv-line: #ddd9d0;
    --hv-surface: #ffffff;
    --hv-cloud: #faf9f5;
    --hv-green: #2f7a62;
    --hv-violet: #8a6500;
    --hv-shadow-soft: 0 14px 40px rgb(11 12 14 / 7%);
    --hv-shadow-lift: 0 24px 60px rgb(11 12 14 / 11%);
    background: #faf9f5;
    color: var(--hv-text);
}

/* Paper-band buttons flip back to gold-on-light rules. */
body[data-theme="dark"] .home-v3 .hv-resume .hv-btn--primary,
body[data-theme="dark"] .home-v3 .hv-story .hv-btn--primary {
    background: #d8a928;
    color: #0a1730;
    box-shadow: 0 12px 26px rgb(216 169 40 / 26%);
}

body[data-theme="dark"] .home-v3 .hv-resume .hv-btn--ghost,
body[data-theme="dark"] .home-v3 .hv-story .hv-btn--ghost {
    color: #0a1730;
    border-color: #cfc9bd;
}

body[data-theme="dark"] .home-v3 .hv-resume .hv-btn--ghost:hover,
body[data-theme="dark"] .home-v3 .hv-story .hv-btn--ghost:hover { background: #f1efea; }

body[data-theme="dark"] .home-v3 .hv-resume .hv-eyebrow,
body[data-theme="dark"] .home-v3 .hv-story .hv-eyebrow {
    background: rgb(216 169 40 / 15%);
    color: #6f5100;
}

/* PhD future card: ink panel with gold mark (was navy gradient). */
body[data-theme="dark"] .home-v3 .hv-future__phd {
    background: linear-gradient(120deg, #0a1730, #253a61);
}

/* Role dots in the mock résumé ledger: gold family instead of the
   indigo→azure→cyan spectrum. */
body[data-theme="dark"] .home-v3 .hv-rc__role-dot,
body[data-theme="dark"] .home-v3 .hv-rc__roles li:nth-child(2) .hv-rc__role-dot,
body[data-theme="dark"] .home-v3 .hv-rc__roles li:nth-child(3) .hv-rc__role-dot {
    background: linear-gradient(180deg, #d8a928, #8a6500);
}

/* Week summary card: graphite slab in the dark hero (was white). */
body[data-theme="dark"] .home-v3 .hv-week__summary {
    background: rgb(255 255 255 / 7%);
    border-color: #34497b;
    color: #cbd3e0;
}

/* Chips inside the paper bands go back to warm light pills (the graphite
   chip style above is for the dark hero only). */
body[data-theme="dark"] .home-v3 .hv-resume .hv-chip,
body[data-theme="dark"] .home-v3 .hv-story .hv-chip {
    background: #f1efea;
    color: #55534e;
}

body[data-theme="dark"] .home-v3 .hv-resume .hv-chip--amber,
body[data-theme="dark"] .home-v3 .hv-story .hv-chip--amber,
body[data-theme="dark"] .home-v3 .hv-resume .hv-chip--cyan,
body[data-theme="dark"] .home-v3 .hv-story .hv-chip--cyan,
body[data-theme="dark"] .home-v3 .hv-resume .hv-chip--green,
body[data-theme="dark"] .home-v3 .hv-story .hv-chip--green {
    background: rgb(216 169 40 / 16%);
    color: #6f5100;
}

/* Acts timeline dots on paper. */
body[data-theme="dark"] .home-v3 .hv-acts__item::before { background: #cfc9bd; }
body[data-theme="dark"] .home-v3 .hv-acts__item--current::before { background: #d8a928; }

/* Invitation band: ink closing statement (was a pale silver gradient
   that read as a metallic strip between the paper band and ink footer). */
body[data-theme="dark"] .home-v3 .hv-invite {
    border-top: 1px solid #253c66;
    background: #0a1730;
    color: #f7f9fc;
}

body[data-theme="dark"] .home-v3 .hv-invite__line { color: #f7f9fc; }

body[data-theme="dark"] .home-v3 .hv-future__phd-mark { color: #e3b83a; }

/* New chip variant used only by the Interview walkthrough's "Retry
   strengthened" chip; paired with the existing amber/cyan modifiers above
   so it themes the same way in the dark-hero and paper-band contexts. */
.home-v3 .hv-chip--green { background: #E4F5EC; color: #1F7A52; }
body[data-theme="dark"] .home-v3 .hv-chip--green { background: rgb(105 174 146 / 16%); color: #69ae92; }

/* =====================================================================
   PS-HOME-INTERVIEW-DEMO-001 — Interview Studio illustrative walkthrough
   Scene 3 of 4 (between Living Résumé and My Story/Future).
   Interaction revised 2026-07-19 (owner direction): an on-page POSTER whose
   "Walk me through it" button pops out a MODAL that steps through the four
   fixed states — the same guided pattern as the Voice hero's capture
   overlay, for continuity. Scoped under .home-v3 .hv-interview; class prefix
   hv-int- for pieces internal to this scene. Fixed fictional content only;
   the four steps are server-rendered inside the modal and JS toggles which
   one shows. Controls are hidden entirely without JS via the .hv-int--js
   gate, so the poster (question + truth bar) plus a normal Studio link are
   the only surface in that scenario. No fixed viewport-height squeeze on the
   scene; the modal alone caps its height to the viewport and scrolls
   internally (standard dialog behavior).
   ===================================================================== */

.home-v3 .hv-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.home-v3 .hv-interview {
    --hvi-canvas: #fbf8f2;
    --hvi-canvas-2: #fffdfa;
    --hvi-surface: #fffefa;
    --hvi-surface-2: #f7f1e7;
    --hvi-ink: #0c2345;
    --hvi-text: #283b58;
    --hvi-muted: #60708a;
    --hvi-gold-text: #8A5A00;
    --hvi-gold: #B87900;
    --hvi-gold-bright: #d2a24b;
    --hvi-gold-soft: #f6e9c9;
    --hvi-line: #d9d1c4;
    --hvi-line-strong: #c9bca9;
    --hvi-action: #0d356d;
    --hvi-action-strong: #092954;
    --hvi-action-text: #ffffff;
    --hvi-focus: #0b2f62;
    --hvi-success: #1E725F;
    --hvi-success-soft: #e4f1ed;
    --hvi-overlay: rgb(10 27 54 / 30%);
    --hvi-shadow: 0 16px 45px rgb(31 45 66 / 10%), 0 2px 8px rgb(31 45 66 / 6%);
    padding: clamp(3rem, 6vw, 5.5rem) 0;
}

body[data-theme="dark"] .home-v3 .hv-interview {
    /* D1: the walkthrough scene sits between the existing paper bands, so
       retain that light band while the product object itself uses the
       released Cinematic Studio tokens below. */
    --hv-indigo: #8a6500;
    --hv-indigo-strong: #6f5100;
    --hv-indigo-soft: rgb(216 169 40 / 16%);
    --hv-amber: #d8a928;
    --hv-ink: #0a1730;
    --hv-text: #3a3d42;
    --hv-muted: #66645f;
    --hv-line: #ddd9d0;
    --hv-surface: #ffffff;
    --hv-cloud: #faf9f5;
    --hv-green: #2f7a62;
    background: #faf9f5;
    color: var(--hv-text);

    --hvi-canvas: #03101d;
    --hvi-canvas-2: #071a2b;
    --hvi-surface: #091827;
    --hvi-surface-2: #0c2235;
    --hvi-ink: #f4efe6;
    --hvi-text: #d7dde6;
    --hvi-muted: #9facbd;
    --hvi-gold-text: #d99a2b;
    --hvi-gold: #d99a2b;
    --hvi-gold-bright: #f1bd5c;
    --hvi-gold-soft: rgb(217 154 43 / 12%);
    --hvi-line: rgb(207 159 70 / 26%);
    --hvi-line-strong: rgb(207 159 70 / 42%);
    --hvi-action: #f4bd58;
    --hvi-action-strong: #d79220;
    --hvi-action-text: #101722;
    --hvi-focus: #f1bd5c;
    --hvi-success: #54b696;
    --hvi-success-soft: rgb(44 139 112 / 16%);
    --hvi-overlay: rgb(0 0 0 / 55%);
    --hvi-shadow: 0 24px 64px rgb(0 0 0 / 35%), inset 0 1px rgb(255 255 255 / 2%);
}

.home-v3 .hv-interview__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
    gap: clamp(1.8rem, 3.4vw, 3.4rem);
    align-items: center;
}

.home-v3 .hv-interview__copy { padding-top: 0.4rem; }

.home-v3 .hv-int-badge { display: inline-flex; margin-bottom: 1.2rem; }

.home-v3 .hv-int-truthlist {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0 0 1.3rem;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-int-truthlist li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--hv-text);
}

.home-v3 .hv-int-truthlist svg {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin-top: 0.15rem;
    fill: none;
    stroke: var(--hv-green);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- shared bits used by both the poster and the modal steps ---- */

.home-v3 .hv-int-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hv-indigo-strong);
}

.home-v3 .hv-int-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-v3 .hv-int-meta { font-size: 0.82rem; color: var(--hv-muted); white-space: nowrap; }

.home-v3 .hv-int-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}

.home-v3 .hv-int-listen {
    margin: 0;
    padding: 0.15rem 0 0.15rem 0.9rem;
    border-left: 3px solid var(--hv-amber);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--hv-text);
}

.home-v3 .hv-int-listen strong { color: var(--hv-ink); }

/* ---- poster (on-page card that invites the walkthrough) ---- */

.home-v3 .hv-int-poster {
    background: var(--hv-surface);
    border: 1px solid rgb(221 228 240 / 90%);
    border-radius: var(--hv-radius-lg);
    box-shadow: var(--hv-shadow-lift);
    padding: clamp(1.4rem, 2.6vw, 2.2rem);
}

.home-v3 .hv-int-poster__head { margin-bottom: 1.2rem; }

.home-v3 .hv-int-poster__title {
    margin: 0;
    font-family: var(--hv-serif);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    line-height: 1.15;
    color: var(--hv-ink);
}

.home-v3 .hv-int-poster__question {
    padding: 1.2rem 1.3rem;
    border-radius: var(--hv-radius-md);
    background: #F7F9FD;
    border: 1px solid #E8EDF5;
}

.home-v3 .hv-int-poster__q {
    margin: 0.8rem 0 1rem;
    font-family: var(--hv-serif);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.3;
    color: var(--hv-ink);
}

.home-v3 .hv-int-poster__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    margin: 1.3rem 0;
}

.home-v3 .hv-int-poster__actions .hv-btn svg { width: 1.05rem; height: 1.05rem; }
.home-v3 .hv-int-poster__actions .hv-btn--primary svg { fill: currentColor; stroke: none; }

/* ---- truth bar (persistent on the poster and echoed in the modal foot) ---- */

.home-v3 .hv-int-truthbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1.4rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--hv-radius-md);
    background: var(--hv-ink);
}

.home-v3 .hv-int-truthbar span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 650;
    color: #fff;
    white-space: nowrap;
}

.home-v3 .hv-int-truthbar svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: #d8a928;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- JS gate ----
   Without JS: hide the "Walk me through it" button (it can't open a modal),
   keep the poster's Studio link. With JS: show the button, hide the link
   (the modal's last step carries the Studio link). */
.home-v3 .hv-interview:not(.hv-int--js) .hv-int-controls { display: none; }
.home-v3 .hv-interview.hv-int--js .hv-int-nojs { display: none; }

/* =====================================================================
   Pop-out modal — matches the Voice hero overlay's visual language
   (dimmed, blurred backdrop; centered white card; sits above the sticky
   global header at z-index 1200).
   ===================================================================== */

.home-v3 .hv-int-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgb(8 18 37 / 42%);
    backdrop-filter: blur(8px);
}

/* The display:grid above is more specific than the UA [hidden] rule, so it
   must be restated or the modal would show through its hidden attribute. */
.home-v3 .hv-int-overlay[hidden] { display: none; }

.home-v3 .hv-int-modal {
    width: min(760px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--hv-surface);
    border-radius: 28px;
    box-shadow: var(--hv-shadow-lift);
    color: var(--hv-text);
}

.home-v3 .hv-int-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.4rem 1.6rem 1.1rem;
    border-bottom: 1px solid #EEF2F8;
}

.home-v3 .hv-int-modal__head > div { flex: 1 1 auto; min-width: 0; }

.home-v3 .hv-int-modal__title {
    margin: 0;
    font-family: var(--hv-serif);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    line-height: 1.2;
    color: var(--hv-ink);
}

.home-v3 .hv-int-count {
    align-self: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hv-muted);
    white-space: nowrap;
}

.home-v3 .hv-int-close {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    border: 1px solid var(--hv-line);
    background: var(--hv-surface);
    color: #75839A;
    cursor: pointer;
}

.home-v3 .hv-int-close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.home-v3 .hv-int-close:hover { background: #F5F7FC; color: var(--hv-ink); }

/* step rail inside the modal */

.home-v3 .hv-int-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0;
    padding: 1rem 1.6rem;
    border-bottom: 1px solid #EEF2F8;
    list-style: none;
}

.home-v3 .hv-int-step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.3rem 0.9rem 0.3rem 0.3rem;
    border-radius: 999px;
    border: 1px solid var(--hv-line);
    background: var(--hv-surface);
    color: var(--hv-muted);
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
}

.home-v3 .hv-int-step__num {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--hv-cloud);
    color: var(--hv-muted);
    font-size: 0.78rem;
    font-weight: 750;
    flex: 0 0 auto;
}

.home-v3 .hv-int-step[aria-current="step"] { border-color: var(--hv-indigo-strong); color: var(--hv-ink); }
.home-v3 .hv-int-step[aria-current="step"] .hv-int-step__num { background: var(--hv-indigo); color: #fff; }
.home-v3 .hv-int-step[data-done="true"]:not([aria-current="step"]) { color: var(--hv-text); }
.home-v3 .hv-int-step[data-done="true"] .hv-int-step__num { background: var(--hv-green); color: #fff; }

/* modal body + step content */

.home-v3 .hv-int-modal__body { padding: 1.5rem 1.6rem; }

.home-v3 .hv-int-state__title {
    margin: 0 0 0.9rem;
    font-family: var(--hv-serif);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    line-height: 1.25;
    color: var(--hv-ink);
}

.home-v3 .hv-int-state__title:focus-visible {
    outline: 2px solid var(--hv-indigo);
    outline-offset: 4px;
    border-radius: 0.3rem;
}

.home-v3 .hv-int-listen + .hv-int-method { margin-top: 1.1rem; }

.home-v3 .hv-int-method {
    display: inline-flex;
    padding: 0.3rem;
    margin-bottom: 1rem;
    border-radius: 0.9rem;
    background: var(--hv-cloud);
    border: 1px solid var(--hv-line);
}

.home-v3 .hv-int-method__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border-radius: 0.7rem;
    background: transparent;
    color: var(--hv-muted);
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
}

.home-v3 .hv-int-method__btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-v3 .hv-int-method__btn[aria-pressed="true"] { background: var(--hv-indigo); color: #fff; box-shadow: 0 8px 18px rgb(32 55 103 / 22%); }

.home-v3 .hv-int-method__default {
    margin-left: 0.15rem;
    padding: 0.15rem 0.4rem;
    border-radius: 0.4rem;
    background: rgb(255 255 255 / 24%);
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-v3 .hv-int-method__btn[aria-pressed="false"] .hv-int-method__default { display: none; }

.home-v3 .hv-int-explain {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border-radius: var(--hv-radius-md);
    background: #F7F9FD;
    border: 1px solid #E8EDF5;
}

/* display:flex above outranks UA [hidden]; restate so the inactive panel hides. */
.home-v3 .hv-int-explain[hidden] { display: none; }

.home-v3 .hv-int-explain__icon {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--hv-indigo);
    color: #fff;
}

.home-v3 .hv-int-explain__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-v3 .hv-int-explain strong { display: block; margin-bottom: 0.25rem; font-size: 0.95rem; color: var(--hv-ink); }
.home-v3 .hv-int-explain p { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--hv-muted); }

.home-v3 .hv-int-inline-note { margin: 1rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--hv-muted); }
.home-v3 .hv-int-inline-note strong { color: var(--hv-indigo-strong); }

/* step 2 — transcript card */

.home-v3 .hv-int-transcript-card {
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem;
    border-radius: var(--hv-radius-md);
    background: #F7F9FD;
    border: 1px solid #E8EDF5;
}

.home-v3 .hv-int-transcript-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 6.5rem;
    flex: 0 0 auto;
    padding: 0.9rem 0.5rem;
    border-radius: var(--hv-radius-md);
    background: var(--hv-indigo);
    color: #fff;
}

.home-v3 .hv-int-transcript-badge svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.home-v3 .hv-int-wave { display: flex; align-items: flex-end; gap: 0.15rem; height: 1.8rem; }
.home-v3 .hv-int-wave i { display: block; width: 0.2rem; border-radius: 0.15rem; background: rgb(255 255 255 / 75%); }

.home-v3 .hv-int-transcript-label {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hv-indigo-strong);
}

.home-v3 .hv-int-transcript-text { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--hv-text); overflow-wrap: anywhere; }

/* step 3 — bottom line + review + STAR */

.home-v3 .hv-int-bottomline { padding: 0.2rem 0 0.2rem 1.1rem; margin-bottom: 1.2rem; border-left: 4px solid var(--hv-indigo); }

.home-v3 .hv-int-bottomline-label {
    margin: 0 0 0.3rem;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--hv-indigo-strong);
}

.home-v3 .hv-int-bottomline p { margin: 0.6rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--hv-muted); }

.home-v3 .hv-int-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }

.home-v3 .hv-int-review-col { padding: 0.9rem 1rem; border-radius: var(--hv-radius-md); border: 1px solid #E8EDF5; background: #FBFCFF; }
.home-v3 .hv-int-review-col h4 { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--hv-ink); }
.home-v3 .hv-int-review-col ul { margin: 0; padding: 0 0 0 1.1rem; font-size: 0.85rem; line-height: 1.6; color: var(--hv-text); }

.home-v3 .hv-int-star { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }

.home-v3 .hv-int-star__tile { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.8rem 0.5rem; border-radius: var(--hv-radius-md); text-align: center; }
.home-v3 .hv-int-star__tile strong { font-family: var(--hv-serif); font-size: 1.3rem; }
.home-v3 .hv-int-star__tile span { font-size: 0.72rem; line-height: 1.3; color: var(--hv-muted); }
.home-v3 .hv-int-star__tile--complete { background: #E4F5EC; }
.home-v3 .hv-int-star__tile--complete strong { color: #1F7A52; }
.home-v3 .hv-int-star__tile--target { background: #FBF3E1; }
.home-v3 .hv-int-star__tile--target strong { color: #8A6A1E; }

/* step 4 — retry comparison */

.home-v3 .hv-int-retry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }

.home-v3 .hv-int-retry-panel { padding: 1rem 1.1rem; border-radius: var(--hv-radius-md); border: 1px solid #E8EDF5; background: #FBFCFF; }
.home-v3 .hv-int-retry-panel h4 { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hv-muted); }
.home-v3 .hv-int-retry-panel p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--hv-text); overflow-wrap: anywhere; }
.home-v3 .hv-int-retry-panel--improved { background: #fff; border-color: rgb(31 122 82 / 25%); }
.home-v3 .hv-int-retry-panel--improved h4 { color: #1F7A52; }
.home-v3 .hv-int-retry-panel mark { background: var(--hv-indigo-soft); color: var(--hv-ink); padding: 0.05rem 0.15rem; border-radius: 0.2rem; }

.home-v3 .hv-int-changes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 0; padding: 0; list-style: none; }
.home-v3 .hv-int-changes li { padding: 0.75rem 0.85rem; border-radius: var(--hv-radius-md); background: #F7F9FD; border: 1px solid #E8EDF5; }
.home-v3 .hv-int-changes strong { display: block; font-size: 0.85rem; color: var(--hv-ink); }
.home-v3 .hv-int-changes span { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.4; color: var(--hv-muted); }

/* modal footer — persistent truth strip + Back / Next / Finish */

.home-v3 .hv-int-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.6rem 1.3rem;
    border-top: 1px solid #EEF2F8;
    position: sticky;
    bottom: 0;
    background: var(--hv-surface);
}

.home-v3 .hv-int-modal__truth { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.home-v3 .hv-int-modal__truth span { font-size: 0.72rem; font-weight: 650; color: var(--hv-muted); }
.home-v3 .hv-int-modal__truth span::before { content: "\25C6"; margin-right: 0.35rem; color: var(--hv-amber); }

.home-v3 .hv-int-modal__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.home-v3 .hv-int-modal__actions .hv-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The Back/Next/Finish controls carry the shared .hv-btn class (display:
   inline-flex, 0-2-0), which outranks the UA [hidden] rule (0-1-0) — so the
   `hidden` attribute JS toggles on them would be ignored without this guard.
   (Same specificity trap as .hv-int-explain / .hv-int-overlay above.) */
.home-v3 .hv-int-back[hidden],
.home-v3 .hv-int-next[hidden],
.home-v3 .hv-int-finish[hidden] { display: none; }

/* ---- motion: fade the backdrop and rise the card, only when motion is OK.
   The sitewide prefers-reduced-motion:reduce block (earlier in this file)
   already zeroes these; gating on no-preference is belt-and-braces. ---- */
@media (prefers-reduced-motion: no-preference) {
    .home-v3 .hv-int-overlay { animation: hv-int-overlay-in 0.22s ease; }
    .home-v3 .hv-int-overlay.is-open .hv-int-modal { animation: hv-int-modal-in 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
}

@keyframes hv-int-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hv-int-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- responsive ---- */

@media (max-width: 1180px) {
    .home-v3 .hv-interview__inner { grid-template-columns: 1fr; align-items: start; }
    .home-v3 .hv-interview__copy { padding-top: 0; }
}

@media (max-width: 860px) {
    .home-v3 .hv-int-review-grid,
    .home-v3 .hv-int-retry-grid { grid-template-columns: 1fr; }
    .home-v3 .hv-int-star { grid-template-columns: 1fr 1fr; }
    .home-v3 .hv-int-changes { grid-template-columns: 1fr; }
    .home-v3 .hv-int-transcript-card { flex-direction: column; }
    .home-v3 .hv-int-transcript-badge { flex-direction: row; width: auto; }
}

@media (max-width: 560px) {
    /* Modal docks to the bottom as a sheet, like the Voice overlay. */
    .home-v3 .hv-int-overlay { padding: 0; place-items: end stretch; }
    .home-v3 .hv-int-modal { width: 100%; max-width: none; max-height: 92vh; border-radius: 25px 25px 0 0; }
    .home-v3 .hv-int-modal__head,
    .home-v3 .hv-int-steps,
    .home-v3 .hv-int-modal__body,
    .home-v3 .hv-int-modal__foot { padding-left: 1.1rem; padding-right: 1.1rem; }
    .home-v3 .hv-int-method { width: 100%; }
    .home-v3 .hv-int-method__btn { flex: 1 1 0; justify-content: center; }
    .home-v3 .hv-int-modal__foot { flex-direction: column-reverse; align-items: stretch; }
    .home-v3 .hv-int-modal__actions .hv-btn { width: 100%; justify-content: center; }
    .home-v3 .hv-int-poster__actions .hv-btn { width: 100%; justify-content: center; }

    @media (prefers-reduced-motion: no-preference) {
        .home-v3 .hv-int-overlay.is-open .hv-int-modal { animation-name: hv-int-sheet-in; }
    }
}

@keyframes hv-int-sheet-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* =====================================================================
   PS-HOME-INTERVIEW-PARITY-001 — released Studio projection layer.
   The poster and portaled modal share the exact 5A-light/5C-dark semantic
   values without importing the Studio stylesheet or changing global tokens.
   ===================================================================== */
.hv-int-portal {
    --hvi-canvas: #fbf8f2;
    --hvi-canvas-2: #fffdfa;
    --hvi-surface: #fffefa;
    --hvi-surface-2: #f7f1e7;
    --hvi-ink: #0c2345;
    --hvi-text: #283b58;
    --hvi-muted: #60708a;
    --hvi-gold-text: #8A5A00;
    --hvi-gold: #B87900;
    --hvi-gold-bright: #d2a24b;
    --hvi-gold-soft: #f6e9c9;
    --hvi-line: #d9d1c4;
    --hvi-line-strong: #c9bca9;
    --hvi-action: #0d356d;
    --hvi-action-strong: #092954;
    --hvi-action-text: #ffffff;
    --hvi-focus: #0b2f62;
    --hvi-success: #1E725F;
    --hvi-success-soft: #e4f1ed;
    --hvi-overlay: rgb(10 27 54 / 30%);
    --hvi-shadow: 0 16px 45px rgb(31 45 66 / 10%), 0 2px 8px rgb(31 45 66 / 6%);
    --hv-radius-lg: 1.5rem;
    --hv-radius-md: 1rem;
    --hv-serif: "Newsreader", Georgia, serif;
    background: none;
}

body[data-theme="dark"] .hv-int-portal {
    --hvi-canvas: #03101d;
    --hvi-canvas-2: #071a2b;
    --hvi-surface: #091827;
    --hvi-surface-2: #0c2235;
    --hvi-ink: #f4efe6;
    --hvi-text: #d7dde6;
    --hvi-muted: #9facbd;
    --hvi-gold-text: #d99a2b;
    --hvi-gold: #d99a2b;
    --hvi-gold-bright: #f1bd5c;
    --hvi-gold-soft: rgb(217 154 43 / 12%);
    --hvi-line: rgb(207 159 70 / 26%);
    --hvi-line-strong: rgb(207 159 70 / 42%);
    --hvi-action: #f4bd58;
    --hvi-action-strong: #d79220;
    --hvi-action-text: #101722;
    --hvi-focus: #f1bd5c;
    --hvi-success: #54b696;
    --hvi-success-soft: rgb(44 139 112 / 16%);
    --hvi-overlay: rgb(0 0 0 / 55%);
    --hvi-shadow: 0 24px 64px rgb(0 0 0 / 35%), inset 0 1px rgb(255 255 255 / 2%);
}

/* The product object owns the Studio palette; the surrounding editorial
   column continues to use the homepage paper-band variables. */
.home-v3 .hv-int-poster,
.home-v3 .hv-int-modal {
    color: var(--hvi-text);
    background: var(--hvi-canvas);
    border: 1px solid var(--hvi-line);
    box-shadow: var(--hvi-shadow);
}

.home-v3 .hv-int-poster__question,
.home-v3 .hv-int-composer,
.home-v3 .hv-int-preserved,
.home-v3 .hv-int-status,
.home-v3 .hv-int-review-col,
.home-v3 .hv-int-retry-panel,
.home-v3 .hv-int-changes li {
    color: var(--hvi-text);
    background: var(--hvi-surface);
    border-color: var(--hvi-line);
}

.home-v3 .hv-int-poster__title,
.home-v3 .hv-int-poster__q,
.home-v3 .hv-int-modal__title,
.home-v3 .hv-int-state__title,
.home-v3 .hv-int-question,
.home-v3 .hv-int-bottomline h4,
.home-v3 .hv-int-review-col h4,
.home-v3 .hv-int-retry-panel p,
.home-v3 .hv-int-changes strong { color: var(--hvi-ink); }

.home-v3 .hv-int-kicker,
.home-v3 .hv-int-bottomline-label,
.home-v3 .hv-int-section-label { color: var(--hvi-gold-text); }

.home-v3 .hv-int-meta,
.home-v3 .hv-int-listen,
.home-v3 .hv-int-browser-note,
.home-v3 .hv-int-inline-note,
.home-v3 .hv-int-state__sub,
.home-v3 .hv-int-review-col ul,
.home-v3 .hv-int-retry-panel h4,
.home-v3 .hv-int-changes span { color: var(--hvi-muted); }

.home-v3 .hv-int-listen strong,
.home-v3 .hv-int-inline-note strong,
.home-v3 .hv-int-aid strong { color: var(--hvi-ink); }

.home-v3 .hv-int-browser-note,
.home-v3 .hv-int-state__sub {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.home-v3 .hv-int-question {
    margin: 0 0 0.9rem;
    font-family: var(--hv-serif);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    font-weight: 600;
    line-height: 1.3;
}

.home-v3 .hv-int-composer,
.home-v3 .hv-int-preserved,
.home-v3 .hv-int-status {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--hvi-line);
    border-radius: var(--hv-radius-md);
}

.home-v3 .hv-int-composer { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hvi-gold) 22%, transparent); }
.home-v3 .hv-int-composer__label { display: flex; justify-content: space-between; gap: 1rem; color: var(--hvi-gold-text); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; }
.home-v3 .hv-int-composer p,
.home-v3 .hv-int-preserved > p:last-child { margin: 0.8rem 0 0; color: var(--hvi-text); font-size: 0.9rem; line-height: 1.6; }

.home-v3 .hv-int-transmit,
.home-v3 .hv-int-aid {
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.9rem;
    color: var(--hvi-text);
    background: var(--hvi-gold-soft);
    border: 1px solid var(--hvi-line);
    border-radius: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

.home-v3 .hv-int-aid { background: var(--hvi-surface-2); }
.home-v3 .hv-int-section-label { margin: 0; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }

.home-v3 .hv-int-status { padding-block: 0.2rem; }
.home-v3 .hv-int-status-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--hvi-line); }
.home-v3 .hv-int-status-row:last-child { border-bottom: 0; }
.home-v3 .hv-int-status-dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; color: var(--hvi-muted); border: 1px solid var(--hvi-line-strong); border-radius: 50%; font-size: 0.72rem; font-weight: 800; }
.home-v3 .hv-int-status-row.is-done .hv-int-status-dot { color: #fff; background: #1E725F; border-color: var(--hvi-success); }
.home-v3 .hv-int-status-row.is-current .hv-int-status-dot { color: var(--hvi-action-text); background: var(--hvi-action); border-color: var(--hvi-action); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hvi-gold) 14%, transparent); }
.home-v3 .hv-int-status-row strong { color: var(--hvi-ink); font-size: 0.84rem; }
.home-v3 .hv-int-status-row p { margin: 0.2rem 0 0; color: var(--hvi-muted); font-size: 0.76rem; line-height: 1.45; }

.home-v3 .hv-int-bottomline { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--hvi-line); border-left: 4px solid var(--hvi-gold); border-radius: var(--hv-radius-md); background: var(--hvi-surface); }
.home-v3 .hv-int-bottomline h4 { margin: 0; font-family: var(--hv-serif); font-size: 1.15rem; line-height: 1.25; }
.home-v3 .hv-int-score-wrap { display: grid; justify-items: center; gap: 0.45rem; }
.home-v3 .hv-int-score { --hvi-score: 72%; display: grid; grid-template-columns: auto auto; place-content: center; width: 5.2rem; height: 5.2rem; color: var(--hvi-ink); background: radial-gradient(circle at center, var(--hvi-surface) 64%, transparent 66%), conic-gradient(var(--hvi-gold-bright) var(--hvi-score), var(--hvi-line) 0); border-radius: 50%; }
.home-v3 .hv-int-score strong { font-family: var(--hv-serif); font-size: 1.7rem; line-height: 1; }
.home-v3 .hv-int-score span { align-self: end; margin-bottom: 0.15rem; color: var(--hvi-muted); font-size: 0.62rem; }
.home-v3 .hv-int-ring-caption { max-width: 7.5rem; color: var(--hvi-muted); font-size: 0.62rem; line-height: 1.35; text-align: center; }

.home-v3 .hv-int-review-col,
.home-v3 .hv-int-retry-panel,
.home-v3 .hv-int-changes li { border: 1px solid var(--hvi-line); }
.home-v3 .hv-int-retry-panel--improved { background: var(--hvi-success-soft); border-color: color-mix(in srgb, var(--hvi-success) 45%, var(--hvi-line)); }
.home-v3 .hv-int-retry-panel--improved h4 { color: var(--hvi-success); }
.home-v3 .hv-int-retry-panel mark { color: var(--hvi-ink); background: var(--hvi-gold-soft); }
.home-v3 .hv-int-star { margin-top: 0.65rem; }
.home-v3 .hv-int-star__tile { border: 1px solid var(--hvi-line); background: var(--hvi-surface-2); }
.home-v3 .hv-int-star__tile span { color: var(--hvi-muted); }
.home-v3 .hv-int-star__tile--complete strong { color: var(--hvi-success); }
.home-v3 .hv-int-star__tile--target strong { color: var(--hvi-gold-text); }

.home-v3 .hv-int-overlay { background: var(--hvi-overlay); }
.home-v3 .hv-int-modal__head,
.home-v3 .hv-int-steps,
.home-v3 .hv-int-modal__foot { border-color: var(--hvi-line); }
.home-v3 .hv-int-modal__foot { background: var(--hvi-canvas); }
.home-v3 .hv-int-count,
.home-v3 .hv-int-modal__truth span { color: var(--hvi-muted); }
.home-v3 .hv-int-close,
.home-v3 .hv-int-step { color: var(--hvi-muted); background: var(--hvi-surface); border-color: var(--hvi-line); }
.home-v3 .hv-int-close:hover { color: var(--hvi-ink); background: var(--hvi-surface-2); }
.home-v3 .hv-int-step__num { color: var(--hvi-muted); background: var(--hvi-surface-2); }
.home-v3 .hv-int-step[aria-current="step"] { color: var(--hvi-ink); border-color: var(--hvi-gold-bright); }
.home-v3 .hv-int-step[aria-current="step"] .hv-int-step__num { color: var(--hvi-action-text); background: var(--hvi-action); }
.home-v3 .hv-int-step[data-done="true"] .hv-int-step__num { color: #fff; background: #1E725F; border: 1px solid var(--hvi-success); }
.home-v3 .hv-int-state__title:focus-visible { outline: 3px solid var(--hvi-focus); }

.home-v3 .hv-int-theme { min-height: 2.75rem; padding: 0.45rem 0.55rem; color: var(--hvi-muted); border: 1px solid var(--hvi-line); border-radius: 999px; }
.home-v3 .hv-int-theme-label { color: var(--hvi-ink); font-size: 0.68rem; font-weight: 700; }

.home-v3 .hv-int-poster .hv-chip,
.hv-int-portal .hv-chip { color: var(--hvi-muted); background: var(--hvi-surface-2); border-color: var(--hvi-line); }
.home-v3 .hv-int-poster .hv-chip--amber,
.hv-int-portal .hv-chip--amber { color: var(--hvi-gold-text); background: var(--hvi-gold-soft); }
.home-v3 .hv-int-poster .hv-chip--green,
.hv-int-portal .hv-chip--green { color: var(--hvi-success); background: var(--hvi-success-soft); }

.home-v3 .hv-int-poster .hv-btn--primary,
.hv-int-portal .hv-btn--primary { color: var(--hvi-action-text); background: var(--hvi-action); box-shadow: 0 9px 24px color-mix(in srgb, var(--hvi-action) 24%, transparent); }
.home-v3 .hv-int-poster .hv-btn--primary:hover,
.hv-int-portal .hv-btn--primary:hover { background: var(--hvi-action-strong); }
.home-v3 .hv-int-poster .hv-btn--ghost,
.hv-int-portal .hv-btn--ghost { color: var(--hvi-text); border-color: var(--hvi-line); }

.home-v3 .hv-int-truthbar { background: var(--hvi-ink); }
.home-v3 .hv-int-truthbar span { color: var(--hvi-canvas-2); }
.home-v3 .hv-int-truthbar svg { stroke: var(--hvi-gold-bright); }

@media (max-width: 640px) {
    .home-v3 .hv-int-modal__head { align-items: center; flex-wrap: wrap; }
    .home-v3 .hv-int-modal__head > div { flex-basis: calc(100% - 3.5rem); }
    .home-v3 .hv-int-count { order: 4; }
    .home-v3 .hv-int-theme { margin-left: auto; }
    .home-v3 .hv-int-bottomline { grid-template-columns: 1fr; }
}