/* 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(16px, 2.6vh, 26px) 0 0;
    max-width: 34rem;
    font-size: clamp(.98rem, 1.15vw, 1.12rem);
    line-height: 1.6;
    color: #475569;
}
.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; }
}