/* Echo hero: 3D figure with a CRT TV head and a live voice conversation.
   Ported from the standalone prototype; scoped to .fh. */
    .fh {
        --accent: #1a1714;           /* buttons */
        --highlight: #5f6670;        /* the italic word */
        --ink: #18191b;
        --muted: #686c72;
        --bg: #f8fafc;               /* page colour; keep in sync with BG_HEX in echo-hero.js */
        --bg-deep: #a9aaab;
        --stage:#9b9da0;            /* the arch behind the figure */
        --stage-deep: #73767a;
        --font: 'Inter', system-ui, -apple-system, sans-serif;
    }
    .fh, .fh * { box-sizing: border-box; }
    /* wrappers used by the phone scroll story; on wide screens they just fill the section */
    .fh-scroll, .fh-stage { position: relative; height: 100%; }

    /* ══════════════════════
       FIGURE HERO
       An animated 3D character, framed from the hips up, playing her idle
       animation and turning toward the pointer. The model is compressed and
       inlined so the file also opens straight from disk.
    ══════════════════════ */
    .fh {
        position: relative;
        height: 100vh;
        height: 100svh;
        min-height: 600px;
        overflow: hidden;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        background: #f8fafc;
    }

    /* film grain and vignette come from the 3D effects pass */

    /* ── Figure ── */
    .fh-figure {
        position: relative;
        z-index: 1;
        height: 100%;
        align-self: stretch;
    }
    .fh-canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        opacity: 0;
        transition: opacity 1.2s ease;
    }
    .fh.is-ready .fh-canvas { opacity: 1; }
    .fh-loading {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        font-size: 0.85rem;
        color: var(--muted);
        transition: opacity .4s ease;
    }
    .fh.is-ready .fh-loading { opacity: 0; }

    /* text rises in after the figure */
    .fh-copy > * { opacity: 0; translate: 0 16px; transition: opacity .8s ease, translate .8s cubic-bezier(.16,1,.3,1); }
    .fh.is-ready .fh-copy > * { opacity: 1; translate: 0 0; }
    .fh.is-ready .fh-copy > :nth-child(1) { transition-delay: .5s; }
    .fh.is-ready .fh-copy > :nth-child(2) { transition-delay: .65s; }
    .fh.is-ready .fh-copy > :nth-child(3) { transition-delay: .8s; }
    .fh.is-ready .fh-copy > :nth-child(4) { transition-delay: .95s; }

    @media (prefers-reduced-motion: reduce) {
        .fh-canvas, .fh-copy > * { transition: none; }
    }

    /* ── Live conversation panel (left) ── */
    .fh-copy {
        position: absolute;
        z-index: 3;
        left: 0; top: 0; bottom: 0;
        width: min(560px, 44vw);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 0 0 clamp(24px, 4.5vw, 72px);
        pointer-events: none;
    }
    .fh-copy > * { pointer-events: auto; }
    .fh-copy { transition: opacity .7s ease .25s, visibility 0s linear 0s; }
    .fh[data-started="0"] .fh-copy { opacity: 0; visibility: hidden; transition: none; }
    .fh[data-started="0"] { cursor: pointer; }
    .fh-status {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: clamp(14px, 2.4vh, 22px);
        font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
        color: var(--muted);
    }
    .fh-status i {
        width: 8px; height: 8px; border-radius: 50%;
        background: #9aa0a8; transition: background .3s, box-shadow .3s;
    }
    .fh[data-state="listening"] .fh-status i { background: #2f9e6b; box-shadow: 0 0 0 5px rgba(47,158,107,.18); }
    .fh[data-state="thinking"] .fh-status i { background: #d79a2b; animation: fh-pulse 1s ease-in-out infinite; }
    .fh[data-state="speaking"] .fh-status i { background: #3d7bff; box-shadow: 0 0 0 5px rgba(61,123,255,.18); }
    .fh[data-state="connecting"] .fh-status i { animation: fh-pulse 1s ease-in-out infinite; }
    @keyframes fh-pulse { 50% { opacity: .35; } }

    .fh-transcript {
        display: flex; flex-direction: column; justify-content: flex-end;
        gap: .7rem;
        min-height: 9rem; max-height: 46vh;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
                mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    }
    .fh-msg {
        font-size: clamp(1.25rem, 2vw, 1.85rem);
        line-height: 1.18; letter-spacing: -.025em; font-weight: 500;
        text-wrap: pretty;
        max-height: 2.4em;              /* two lines at a time */
        overflow: hidden;
        scroll-behavior: smooth;
        transition: opacity .5s ease, filter .5s ease, font-size .4s ease;
        animation: fh-in .5s cubic-bezier(.16,1,.3,1);
    }
    @keyframes fh-in { from { opacity: 0; translate: 0 10px; } }
    .fh-msg--user { color: var(--muted); font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 400; }
    .fh-msg--user::before { content: "You  "; font-size: .7em; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
    .fh-msg.is-old   { opacity: .38; filter: blur(2.5px); font-size: clamp(1rem, 1.4vw, 1.25rem); }
    .fh-msg.is-older { opacity: .16; filter: blur(5px);  font-size: clamp(1rem, 1.4vw, 1.25rem); }
    .fh-msg.is-live:not(.fh-msg--user)::after {
        content: ""; display: inline-block; width: .5em; height: .95em; margin-left: .25em;
        vertical-align: -.1em; background: var(--ink); animation: fh-blink 1s steps(1) infinite;
    }
    @keyframes fh-blink { 50% { opacity: 0; } }

    .fh-controls { display: flex; align-items: center; gap: 12px; margin-top: clamp(16px, 2.6vh, 24px); }
    .fh-talk {
        font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
        display: inline-flex; align-items: center; gap: 10px;
        padding: .85rem 1.5rem; border-radius: 999px; border: 0;
        background: var(--accent); color: #fff;
        box-shadow: 0 14px 28px -14px rgba(24,25,27,.7);
        transition: transform .15s ease, background .2s ease;
    }
    .fh-talk:hover { transform: translateY(-2px); }
    .fh-talk:focus-visible { outline: 3px solid rgba(95,102,112,.45); outline-offset: 3px; }
    .fh-talk svg { width: 16px; height: 16px; }
    .fh[data-live="1"] .fh-talk { background: #b3362f; }
    .fh-hint { font-size: .8rem; color: var(--muted); }

    @media (max-width: 860px) {
        .fh-copy {
            top: auto; width: 100%; padding: 60px 20px 20px; justify-content: flex-end;
            background: linear-gradient(to top, rgba(248,250,252,.96) 40%, transparent);
        }
        .fh-transcript { max-height: 30vh; min-height: 5rem; }
    }
.fh { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
.fh button { font-family: inherit; }
.fh:focus-visible { outline: 3px solid rgba(95,102,112,.45); outline-offset: -6px; }

/* generic section rules may add padding:8vh 8vw and flex centering to every
   section; the hero must span edge to edge, so reset it here. */
.fh {
    padding: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

/* The hero is full-bleed from the very top of the page. The site header is
   sticky (in flow), which pushes the hero down by its height, so on this page
   it floats over the hero instead. Same look, just out of the flow. */
body:has(.fh) .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

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

/* "Run everything on autopilot" closing CTA: one full screen. The photo wall
   hangs from the top and the copy is centred in the space beneath it. This was
   the page-opening hero, so its -5.5rem header tuck no longer applies. */
.ed-cta-screen .ed-hero--wall {
    margin-top: 0;
    min-height: 100vh;
    min-height: 100svh;
}
.ed-cta-screen .ed-panel { flex: 1 1 auto; }
.ed-cta-screen .ed-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.ed-cta-screen .ed-copy {
    flex: 1 1 auto;
    justify-content: center;
}

/* ── Hero copy (left). Shown before the conversation starts; the live transcript (.fh-copy)
      takes the same spot afterwards. The figure sits on the right, as it does during a call. ── */
.fh-intro {
    position: absolute; z-index: 3;
    left: 0; top: 0; bottom: 0;
    width: min(660px, 46vw);
    display: flex; flex-direction: column; justify-content: center;
    padding: 90px 0 0 clamp(24px, 4.5vw, 72px);
    pointer-events: none;
    transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1), visibility 0s linear 0s;
}
.fh-intro > * { pointer-events: auto; }
.fh[data-started="1"] .fh-intro { opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .5s ease, transform .6s ease, visibility 0s linear .5s; pointer-events: none; }
.fh-h1 {
    margin: 0;
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(2.1rem, 3.9vw, 4.1rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: #0f172a;
    text-wrap: balance;
}
.fh-h1 span { color: #64748b; }
.fh-lede {
    margin: clamp(12px, 2vh, 18px) 0 0;
    max-width: 34rem;
    font-size: clamp(.98rem, 1.15vw, 1.12rem);
    line-height: 1.6;
    color: #475569;
}
/* teal line under the headline */
.fh-br { display: none; }
@media (min-width: 861px) { .fh-br { display: inline; } }   /* three set lines on desktop; phones wrap naturally */
.fh-tag {
    margin: clamp(20px, 3vh, 30px) 0 0;
    font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 600; letter-spacing: -0.01em;
    color: #00A896;
}
.fh-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 32px); }
.fh-start, .fh-demo {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: .95rem 1.6rem; border-radius: 8px;            /* same rectangle as the other hero buttons */
    font: inherit; font-size: .98rem; font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.fh-start { background: #0b1020; color: #fff; box-shadow: 0 8px 24px rgba(11, 16, 32, .18); }
.fh-start:hover { transform: translateY(-2px); background: #1e293b; box-shadow: 0 12px 30px rgba(11, 16, 32, .25); }
.fh-start svg { width: 16px; height: 16px; }
.fh-demo { background: #fff; color: #0b1020; border-color: rgba(15, 23, 42, .12); }
.fh-demo:hover { transform: translateY(-2px); background: #f1f5f9; }
.fh-start:focus-visible, .fh-demo:focus-visible { outline: 3px solid #00A896; outline-offset: 3px; }

/* tablet / phone: copy at the top, figure below it */
@media (max-width: 860px) {
    /* Phones and small tablets: the hero is a 160vh scroll story. The screen-high stage is
       sticky; the copy starts on top with the figure small beneath it, and as you scroll the
       copy slides up and away while the figure grows to full size (driven by --fh-p, 0..1,
       set by echo-hero.js from the scroll position). */
    .fh { display: block; height: auto; min-height: 0; overflow: visible; --fh-p: 0; }   /* no clipping, or sticky can't stick */
    .fh-scroll { height: 160svh; }
    .fh-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
    .fh-intro {
        position: absolute; inset: 0 auto auto 0; width: 100%; z-index: 3;
        padding: 88px 20px 0; justify-content: flex-start;
        opacity: calc(1 - var(--fh-p) * 1.6);
        transform: translateY(calc(var(--fh-p) * -40vh));
        pointer-events: none;
    }
    .fh-intro > * { pointer-events: auto; }
    .fh[data-started="0"] .fh-intro { visibility: visible; }
    .fh-figure {
        position: absolute; inset: 0; height: 100%;
        /* the canvas is framed for the full stage; when the copy is up, shrink it from the bottom
           edge so she stays planted at the foot of the screen, just smaller, never floating */
        transform-origin: 50% 100%;
        transform: scale(var(--fh-s, 1));
    }
    .fh[data-started="1"] .fh-figure { transform: none; translate: none; }
    .fh[data-started="1"] .fh-intro { opacity: 0; visibility: hidden; }
    .fh-h1 { font-size: clamp(1.7rem, 7.4vw, 2.6rem); }
    .fh-lede { font-size: .92rem; margin-top: 12px; }
    .fh-actions { margin-top: 16px; gap: 10px; }
    .fh-start, .fh-demo { padding: .8rem 1.2rem; font-size: .92rem; flex: 1 1 auto; }
    .fh-copy { top: auto; }
}
@media (max-width: 860px) and (max-height: 560px) { .fh-lede { display: none; } }
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    .fh-scroll { height: auto; }
    .fh-stage { position: relative; height: auto; }
    .fh-intro { position: relative; transform: none; opacity: 1; }
    .fh-figure { position: relative; height: 70vh; transform: none; translate: none; }
}
@media (min-width: 861px) and (max-width: 1180px) {
    .fh-intro { width: 44vw; }
    .fh-h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
    .fh-lede { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .fh-intro, .fh[data-started="1"] .fh-intro { transition: none; } }

/* ── Lead pop-up (after the first hero call, and as a gate before later ones) ── */
.fh-pop {
    position: fixed; inset: 0; z-index: 2147483610;   /* above the floating Echo orb */
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(11, 16, 32, 0.55);
    backdrop-filter: blur(6px);
    font-family: 'Inter', system-ui, sans-serif;
}
.fh-pop[hidden] { display: none; }
.fh-pop-card {
    position: relative;
    width: 100%; max-width: 460px;
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 30px 24px;
    box-shadow: 0 30px 80px rgba(2, 8, 23, 0.35);
    animation: fh-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fh-pop-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.fh-pop-close {
    position: absolute; top: 12px; right: 14px;
    width: 32px; height: 32px; border: 0; border-radius: 8px;
    background: #f1f5f9; color: #64748b; font-size: 20px; line-height: 1; cursor: pointer;
}
.fh-pop-close:hover { background: #e2e8f0; color: #0f172a; }
.fh-pop-tag {
    display: inline-block; margin-bottom: 12px;
    border: 1px solid rgba(0,168,150,0.4); color: #00A896; background: rgba(0,168,150,0.06);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 999px;
}
.fh-pop-title { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: #0f172a; margin: 6px 36px 8px 0; }
.fh-pop-sub { font-size: 0.93rem; line-height: 1.55; color: #64748b; margin: 0 0 16px; }
.fh-pop-rate { display: flex; gap: 8px; margin-bottom: 16px; }
.fh-pop-rate[hidden] { display: none; }
.fh-pop-thumb {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 12px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid #e2e8f0; background: #fff; color: #334155;
    font: 600 0.88rem 'Inter', system-ui, sans-serif;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.fh-pop-thumb svg { width: 18px; height: 18px; }
.fh-pop-thumb:hover { border-color: #94a3b8; }
.fh-pop-thumb.is-on { border-color: #00A896; background: rgba(0,168,150,0.08); color: #0f5f55; }
.fh-pop-form { display: flex; flex-direction: column; gap: 12px; }
.fh-pop-field { display: flex; flex-direction: column; gap: 6px; }
.fh-pop-field span { font-size: 0.78rem; font-weight: 700; color: #334155; letter-spacing: 0.02em; }
.fh-pop-field input {
    width: 100%; padding: 12px 14px; border-radius: 8px;
    border: 1.5px solid #e2e8f0; background: #f8fafc; color: #0f172a;
    font: 400 0.95rem 'Inter', system-ui, sans-serif; outline: none;
    transition: border-color 0.15s, background 0.15s;
}
.fh-pop-field input:focus { border-color: #00A896; background: #fff; }
.fh-pop-field input.is-bad { border-color: #ef4444; }
.fh-pop-error { min-height: 1.1em; margin: -4px 0 0; font-size: 0.82rem; color: #dc2626; }
.fh-pop-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.fh-pop-submit {
    flex: 1; padding: 13px 18px; border: 0; border-radius: 8px; cursor: pointer;
    background: #0b1020; color: #fff;
    font: 600 0.95rem 'Inter', system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(11, 16, 32, 0.18);
    transition: transform 0.15s, box-shadow 0.2s, background 0.15s, opacity 0.15s;
}
.fh-pop-submit:hover { transform: translateY(-1px); background: #1e293b; box-shadow: 0 12px 30px rgba(11, 16, 32, 0.25); }
.fh-pop-submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.fh-pop-skip { padding: 13px 14px; border: 0; background: none; color: #64748b; font: 600 0.9rem 'Inter', system-ui, sans-serif; cursor: pointer; }
.fh-pop-skip:hover { color: #0f172a; }
.fh-pop-note { margin: 4px 0 0; font-size: 0.74rem; color: #94a3b8; text-align: center; }
@media (max-width: 480px) {
    .fh-pop-card { padding: 24px 20px 18px; border-radius: 12px; }
    .fh-pop-title { font-size: 1.25rem; }
}

/* ── Floating call bar: keeps a hero call in reach when the hero is off screen ── */
.fh-callbar {
    position: fixed; right: 24px; bottom: 24px; z-index: 2147483500;   /* above Echo Navigator's page */
    display: flex; align-items: center; gap: 6px;
    padding: 6px; border-radius: 14px;
    background: #0b1020; color: #fff;
    box-shadow: 0 18px 40px -12px rgba(11, 16, 32, .55), 0 0 0 1px rgba(255, 255, 255, .06);
    font-family: 'Inter', system-ui, sans-serif;
    animation: fh-callbar-in .25s ease-out;
}
.fh-callbar[hidden] { display: none; }
@keyframes fh-callbar-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fh-callbar button { font: inherit; border: 0; cursor: pointer; }
.fh-callbar-back {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 12px 6px 8px; border-radius: 10px;
    background: transparent; color: inherit; text-align: left;
}
.fh-callbar-back:hover { background: rgba(255, 255, 255, .06); }
.fh-callbar-dot {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; gap: 3px;
    background: rgba(0, 168, 150, .18);
}
.fh-callbar-dot i { width: 3px; height: 8px; border-radius: 2px; background: #2dd4bf; transition: height .2s; }
.fh-callbar[data-state="speaking"] .fh-callbar-dot i { animation: fh-callbar-wave .9s ease-in-out infinite; }
.fh-callbar[data-state="speaking"] .fh-callbar-dot i:nth-child(2) { animation-delay: .15s; }
.fh-callbar[data-state="speaking"] .fh-callbar-dot i:nth-child(3) { animation-delay: .3s; }
.fh-callbar[data-state="listening"] .fh-callbar-dot i { animation: fh-callbar-idle 2.2s ease-in-out infinite; }
@keyframes fh-callbar-wave { 0%, 100% { height: 6px; } 50% { height: 18px; } }
@keyframes fh-callbar-idle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.fh-callbar-text { display: flex; flex-direction: column; line-height: 1.2; }
.fh-callbar-text b { font-size: .88rem; font-weight: 600; }
.fh-callbar-text small { font-size: .74rem; color: #94a3b8; }
.fh-callbar-time { font-size: .82rem; font-variant-numeric: tabular-nums; color: #cbd5e1; margin-left: 4px; }
.fh-callbar-end {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 10px;
    background: #dc2626; color: #fff; font-size: .85rem; font-weight: 600;
    transition: background .15s;
}
.fh-callbar-end:hover { background: #b91c1c; }
.fh-callbar-end svg { width: 18px; height: 18px; }
.fh-callbar button:focus-visible { outline: 2px solid #2dd4bf; outline-offset: 2px; }
@media (max-width: 520px) {
    .fh-callbar { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .fh-callbar, .fh-callbar-dot i { animation: none !important; }
}

/* ── /guide: the character's own page. The back link sits above the headline. ── */
.fh-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-bottom: clamp(14px, 2.4vh, 22px);
    font-size: .86rem; font-weight: 600; color: #64748b; text-decoration: none;
}
.fh-back:hover { color: #0f172a; }
/* The guide page is a focused screen: no announcement, header or footer (guide.html drops the
   footer); the back link is the only way out besides the browser. */
body:has(.fh--guide) .zn-announce,
body:has(.fh--guide) .site-header { display: none; }
body:has(.fh--guide) main { padding-top: 0; }
.fh--guide .fh-intro { padding-top: 0; }

@media (max-width: 860px) {
    /* One screen, no scrolling: Echo full size in the middle, a back link top-left and a single
       "Talk to Echo" button pinned to the bottom. The headline and lede stay for screen readers
       only; once a call starts the intro gives way to the transcript panel, as everywhere else. */
    body:has(.fh--guide) { overflow: hidden; }
    .fh--guide { height: 100svh; min-height: 0; overflow: hidden; }
    .fh--guide .fh-scroll, .fh--guide .fh-stage { height: 100svh; }
    .fh--guide .fh-figure { transform: none; }
    .fh--guide .fh-intro {
        inset: auto 0 0 0; width: 100%;
        padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px));
        opacity: 1; transform: none;
        background: linear-gradient(to top, rgba(248,250,252,.96) 55%, transparent);
        padding-top: 48px;
    }
    .fh--guide .fh-h1, .fh--guide .fh-lede {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .fh--guide .fh-actions { margin: 0; }
    .fh--guide .fh-start { flex: 1 1 100%; padding: 1rem 1.2rem; font-size: 1.02rem; border-radius: 999px; }
    .fh--guide .fh-back {
        position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; z-index: 5;
        margin: 0; padding: 8px 14px; border-radius: 999px;
        background: rgba(255,255,255,.85); border: 1px solid rgba(15,23,42,.1); backdrop-filter: blur(8px);
        color: #0f172a; font-size: .84rem;
    }
    .fh--guide .fh-copy { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Home hero on phones: copy only. The figure, the conversation panel and the scroll story
      are off, and "Talk to our guide" opens /guide instead (echo-hero-voice.js). ── */
@media (max-width: 860px) {
    /* the copy takes at least 80% of the screen, centred in the space under the header */
    .fh[data-guide-href] { min-height: 80svh; cursor: auto; display: flex; flex-direction: column; }
    .fh[data-guide-href] .fh-figure,
    .fh[data-guide-href] .fh-copy { display: none; }
    .fh[data-guide-href] .fh-scroll { height: auto; flex: 1 1 auto; display: flex; flex-direction: column; }
    .fh[data-guide-href] .fh-stage { position: static; height: auto; overflow: visible; flex: 1 1 auto; display: flex; flex-direction: column; }
    .fh[data-guide-href] .fh-intro {
        position: relative; inset: auto; width: 100%; flex: 1 1 auto;
        justify-content: center;
        padding: 104px 22px 40px;
        opacity: 1; transform: none;
    }
    /* type: a bigger, tighter headline whose second sentence balances over two lines instead of
       stranding one word; a slightly larger, tighter lede; a touch more air before the buttons */
    .fh[data-guide-href] .fh-h1 { font-size: clamp(2.05rem, 8.8vw, 2.7rem); line-height: 1.06; letter-spacing: -0.03em; }
    .fh[data-guide-href] .fh-h1 br { display: none; }   /* the span is a block now, so the break would add an empty line */
    .fh[data-guide-href] .fh-h1 span { display: block; margin-top: .18em; text-wrap: balance; }
    .fh[data-guide-href] .fh-lede { margin-top: 18px; max-width: 30rem; font-size: 1rem; line-height: 1.5; color: #475569; }
    .fh[data-guide-href] .fh-tag { margin-top: 14px; font-size: 1rem; }
    .fh[data-guide-href] .fh-actions { margin-top: 26px; gap: 10px; }
    .fh[data-guide-href] .fh-start,
    .fh[data-guide-href] .fh-demo { padding: .9rem 1.1rem; font-size: .95rem; }
}