/* Funnel module CSS (extracted from landing.html 2026-08-06 lean pass).
 *
 * This was a ~40KB inline <style> re-sent inside every HTML response and
 * invisible to the static-file cache. As a hashed static it is
 * immutable-cached; the HTML shrinks accordingly. Scoped to #gr-funnel /
 * .gr-* so it never collides with the design CSS (original scoping note
 * preserved below).
 */
  /* Scoped to #gr-funnel so it never collides with the design CSS. */
  /* Iter 2: the module is the full focus - fills the first viewport so the
     hero below is pushed down. */
  /* Full first viewport (2026-07-07): 80vh left a ~60px sliver of the hero's
     ThesisAI card peeking bottom-right on load. 100svh = only the centric
     URL-paste module above the fold (svh tracks mobile browser chrome).
     isolation + contain give the loader's animated blur/transform layers a
     self-contained compositing boundary so the example <video>s below stop
     flickering during generation (GPU layer thrash fix). */
  /* Optical centering v2 (2026-07-12 pm, Felix): the top-anchored iteration
     overshot ("I don't need it on top of the screen"). Back to flex-center,
     with a slightly heavier bottom pad so the block sits a touch ABOVE the
     geometric center - where a centered layout reads as centered - keeping
     more air below the URL input than above the headline. The 100svh - 69px
     pin is untouched: header + funnel still fill exactly one viewport and the
     hero's ThesisAI card never peeks on load. Same behavior on mobile (vh). */
  #gr-funnel { position: relative; overflow: hidden; display: flex; align-items: center;
    min-height: calc(100vh - 69px); min-height: calc(100svh - 69px);
    isolation: isolate; contain: paint;
    padding: clamp(2rem, 5vh, 3.5rem) 1rem clamp(3rem, 9vh, 5.5rem); }
  .gr-funnel__bg { position: absolute; inset: 0; pointer-events: none; }
  .gr-funnel__bg svg { width: 100%; height: 100%; }
  /* orange focal glow centered behind the URL input (tracks the optically
     centered content, 2026-07-12 pm) */
  .gr-funnel__bg::after { content: ""; position: absolute; left: 50%; top: 44%;
    transform: translate(-50%, -50%); width: min(760px, 92vw); height: 440px; border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255,90,31,.30), rgba(255,90,31,.07) 45%, transparent 70%);
    filter: blur(10px); }
  .gr-funnel__inner { position: relative; max-width: 780px; width: 100%; margin: 0 auto; text-align: center; }
  .gr-funnel__headline { font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.12; margin: 0 0 .8rem; font-weight: 700; }
  .gr-funnel__pct { color: #FF5A1F; }
  .gr-funnel__sub { font-size: clamp(1rem, 2vw, 1.25rem); opacity: .85; margin: 0 0 2rem; }
  .gr-funnel__form { display: flex; gap: .6rem; max-width: 600px; margin: 0 auto; }
  #gr-funnel-url {
    flex: 1; padding: 1rem 1.1rem; border-radius: 12px;
    border: 1px solid rgba(255,90,31,.35); background: rgba(11,42,61,.72);
    color: inherit; font-size: 1rem;
    /* Centered text (2026-07-11, Felix): the module is centric, so the URL
       placeholder/text reads centered too instead of hugging the left edge. */
    text-align: center;
    box-shadow: 0 0 0 4px rgba(255,90,31,.06), 0 10px 34px rgba(5,28,44,.45);
  }
  #gr-funnel-url:focus { outline: none; border-color: rgba(255,90,31,.85); box-shadow: 0 0 0 4px rgba(255,90,31,.18); }
  #gr-funnel-go { padding-inline: 1.5rem; }
  /* Muted while the URL has not yet parsed as a site (validate-as-you-type). */
  #gr-funnel-go:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
  /* ---- generation stage: progress ring + preview (directly below input) ----
     3rem gap (2026-07-11, Felix): more air between the URL input's bottom and
     the top of the teaser frame. */
  .gr-funnel__stage { margin: 3rem auto 0; max-width: 600px; }
  .gr-funnel__stage[hidden] { display: none; }
  .gr-funnel__videowrap { position: relative; width: 270px; max-width: 80vw; margin: 0 auto; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: #000; }
  .gr-funnel__video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gr-funnel__video[hidden] { display: none; }
  /* The @remotion/player mounts here, filling the 9:16 frame like the video. */
  .gr-funnel__player { position: absolute; inset: 0; width: 100%; height: 100%; }
  .gr-funnel__player[hidden] { display: none; }
  /* Presenter avatar: a background-free cutout docked bottom-RIGHT at the same
     proportion as the post-paywall render (avatar-first hero, height ~48% of
     the frame, flush to the corner; landing-player/src/teaser.tsx PRESENTER_DOCK
     right 3% / bottom 0 / height 48% - keep these in lockstep). No frame: it
     reads as the real UGC avatar. A soft glow pulses while a voice preview plays. */
  .gr-funnel__presenter { position: absolute; right: 3%; bottom: 0;
    height: 56%; max-width: 52%; pointer-events: none; }
  .gr-funnel__presenter[hidden] { display: none; }
  /* max-width pairs with the wrapper cap (teaser.tsx DOCK_MAX_WIDTH_FRAC=0.52,
     test_dock_lockstep.py pins the two): an over-wide cutout shrinks
     aspect-preserving, feet planted, flush right - never over the text. */
  .gr-presenter__img { display: block; height: 100%; width: auto;
    max-width: 100%; object-fit: contain; object-position: bottom right;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
  /* Talking illusion (2026-07-07): while the cached preset MP3 plays, the
     cutout "speaks" - a subtle jaw-like bob (transform-origin bottom keeps the
     feet planted, so the head does the moving) + the brand glow + animated
     voice bars beside the head. Pure CSS, zero added COGS (presets only; the
     TTS endpoint refuses free text by design). */
  .gr-funnel__presenter.is-speaking .gr-presenter__img {
    animation: gr-presenter-talk 0.34s ease-in-out infinite,
               gr-presenter-pulse 1.1s ease-in-out infinite; }
  @keyframes gr-presenter-talk {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(1px) scaleY(0.988); } }
  .gr-presenter__img { transform-origin: bottom center; }
  @keyframes gr-presenter-pulse {
    0%, 100% { filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
    50% { filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,90,31,.75)); } }
  /* Voice bars: 4 equalizer stripes floating beside the speaking head. */
  .gr-presenter__bars { position: absolute; left: -26px; top: 12%;
    display: none; align-items: flex-end; gap: 3px; height: 18px; }
  .gr-funnel__presenter.is-speaking .gr-presenter__bars { display: flex; }
  .gr-presenter__bars span { width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #FF5A1F, rgba(255,90,31,.45));
    animation: gr-voicebar 0.7s ease-in-out infinite; }
  .gr-presenter__bars span:nth-child(1) { height: 8px; animation-delay: 0s; }
  .gr-presenter__bars span:nth-child(2) { height: 15px; animation-delay: .12s; }
  .gr-presenter__bars span:nth-child(3) { height: 11px; animation-delay: .24s; }
  .gr-presenter__bars span:nth-child(4) { height: 16px; animation-delay: .36s; }
  @keyframes gr-voicebar {
    0%, 100% { transform: scaleY(.45); }
    50% { transform: scaleY(1); } }
  @media (prefers-reduced-motion: reduce) {
    .gr-funnel__presenter.is-speaking .gr-presenter__img { animation: gr-presenter-pulse 1.1s ease-in-out infinite; }
    .gr-presenter__bars span { animation: none; } }
/* ===== Rocket launch loader v3 (Claude Design, 2026-07-05) ==============
     Pure function of --p (0..1) on .gr-funnel__progress + .is-launch at 100%.
     Launch prep is behind a --p-driven blur that sharpens over the 3-2-1-Go
     Rocket countdown (each digit on its own scrim so it stays legible). At
     100% the nose cone separates; ~2s later a Reveal button fades in and the
     host reveals the teaser on click. grl- namespaced, no assets. */
  @property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

  .gr-funnel__progress *{ box-sizing:border-box; }

  .gr-funnel__progress{ position:absolute; inset:0; --p:0; --grl-k:1;
    display:flex; flex-direction:column; align-items:center;
    padding:30px 20px 26px; overflow:hidden; color:#f2f5fb;
    background:linear-gradient(180deg,#0d1322 0%,#0a1120 100%);
    border-radius:inherit; transition:--p .16s linear;
    font-family:'Instrument Sans',system-ui,sans-serif; }
  .gr-funnel__progress[hidden]{ display:none; }
  .grl-amb{position:absolute;top:-10%;left:50%;transform:translateX(-50%);
    width:78%;height:46%;background:radial-gradient(60% 60% at 50% 40%,rgba(255,90,31,.10),transparent 70%);pointer-events:none;}

  /* ---- circle assembly ----
     The whole 216px pixel world (ring dasharray, sphere map, capsule) is
     designed at one scale; mobile shrinks it UNIFORMLY via --grl-k (transform
     scale + negative margin reclaiming the layout delta) so none of the
     pixel-tuned maps change. */
  .grl-circle{position:relative;width:216px;height:216px;flex:none;margin-top:6px;
    transform:scale(var(--grl-k));transform-origin:top center;
    margin-bottom:calc(-216px * (1 - var(--grl-k)));}
  .grl-ring{position:absolute;inset:0;transform:rotate(-90deg);filter:drop-shadow(0 0 5px rgba(255,90,31,.5));}
  .grl-ring .track{stroke:rgba(255,255,255,.07);}
  .grl-ring .fill{stroke:url(#grring);stroke-dasharray:647.2;stroke-dashoffset:calc(647.2px * (1 - var(--p)));}
  .grl-scene{position:absolute;inset:11px;border-radius:50%;overflow:hidden;background:#05080f;}

  /* ---- focus layer: blurred during prep, sharpens as --p to 0.25 ---- */
  .grl-focus{position:absolute;inset:0;z-index:0;filter:blur(max(0px, calc((0.25 - var(--p)) * 34px)));}

  /* ---- Earth's-spheres world (scrolls DOWN as --p climbs) ----
     v3 pacing (Claude Design, 2026-07-07): pad + 3-2-1 countdown 0..0.25, then
     a NEAR-LINEAR 480px climb across 0.25..0.70 of --p so every sphere gets an
     EQUAL share of the journey (the old map blasted 480px in 0.33..0.52 and
     crawled after - the "too fast at the beginning" complaint), then a gentle
     33px orbit settle 0.95..1. The host drives --p at constant speed. */
  .grl-world{position:absolute;left:0;top:0;width:194px;height:760px;will-change:transform;
    transform:translateY(calc(
      -553px
      + 40px  * clamp(0, calc( var(--p)          / 0.25), 1)
      + 480px * clamp(0, calc((var(--p) - 0.25)   / 0.70), 1)
      + 33px  * clamp(0, calc((var(--p) - 0.95)   / 0.05), 1)
    ));}
  .grl-band{position:absolute;left:0;width:194px;}
  .grl-star{position:absolute;border-radius:50%;background:#e6f6ff;animation:grl-twinkle 2.6s ease-in-out infinite;}
  .grl-cloud{position:absolute;border-radius:26px;background:#fff;filter:blur(3px);animation:grl-cloud 8s ease-in-out infinite;}

  /* ---- blue motion streaks (ascent; fade before orbit) ---- */
  .grl-streaks{position:absolute;inset:0;pointer-events:none;
    opacity:calc(min((var(--p) - 0.30) * 20, (0.95 - var(--p)) * 10));}
  .grl-streaks span{position:absolute;top:0;border-radius:2px;
    background:linear-gradient(180deg,transparent,#00D4FF,transparent);animation:grl-streak 1s linear infinite;}

  /* ---- capsule cruise trail (screensaver): stripes stream leftward FOREVER
          behind the centered capsule so it reads as cruising right with the
          camera locked on it (is-launch only) ---- */
  .grl-trail{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .7s ease .3s;z-index:1;}
  .grl-trail span{position:absolute;border-radius:2px;animation:grl-trailflow 1.6s linear infinite;}

  /* ---- cruise starfield (screensaver): a wide star track that pans left
          forever once in orbit (is-launch only) ---- */
  .grl-cruise-sky{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease .4s;pointer-events:none;overflow:hidden;}
  .grl-cruise-track{position:absolute;left:0;top:0;width:388px;height:100%;will-change:transform;}
  .grl-cruise-track span{position:absolute;border-radius:50%;}

  /* ---- countdown (sharp overlay above the blurred focus layer) ---- */
  .grl-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;pointer-events:none;
    font-family:'Space Grotesk',sans-serif;font-weight:700;}
  .grl-count .plate{position:absolute;left:50%;top:50%;width:190px;height:130px;transform:translate(-50%,-50%);border-radius:50%;
    background:radial-gradient(closest-side, rgba(4,7,14,.94), rgba(4,7,14,.62) 52%, rgba(4,7,14,0) 100%);
    opacity:clamp(0, calc((0.25 - var(--p)) / 0.03), 1);}
  .grl-count .d{position:absolute;font-size:78px;color:#f6f9ff;text-shadow:0 3px 12px rgba(0,0,0,.9),0 0 24px rgba(0,212,255,.55);}
  .grl-count .d3{opacity:clamp(0, calc((0.0625 - var(--p)) / 0.02), 1);}
  .grl-count .d2{opacity:calc(min((var(--p) - 0.0625) / 0.02, (0.125 - var(--p)) / 0.02));}
  .grl-count .d1{opacity:calc(min((var(--p) - 0.125) / 0.02, (0.1875 - var(--p)) / 0.02));}
  .grl-count .go{position:absolute;white-space:nowrap;font-size:28px;letter-spacing:.01em;color:#ff5a1f;
    text-shadow:0 2px 10px rgba(0,0,0,.85),0 0 26px rgba(255,90,31,.85);
    opacity:calc(min((var(--p) - 0.1875) / 0.015, (0.25 - var(--p)) / 0.012));}

  /* ---- rocket (fixed focal point) ---- */
  .grl-rocket{position:absolute;left:50%;top:40px;width:60px;height:100px;transform:translateX(-50%);}
  .grl-bob{animation:grl-bob 4s ease-in-out infinite;}
  .grl-shake{animation:grl-shake .12s linear infinite;}
  .grl-eglow{position:absolute;left:50%;top:96px;width:74px;height:74px;transform:translate(-50%,-50%);
    background:radial-gradient(50% 50% at 50% 50%,rgba(255,90,31,.9),rgba(255,90,31,0) 70%);
    opacity:calc((var(--p) - 0.15) * 6);animation:grl-glow 1.1s ease-in-out infinite;pointer-events:none;}

  /* flame: ignites through the GO beat, full plume by ~0.30, fades near orbit */
  .grl-flame{position:absolute;left:50%;top:92px;transform:translateX(-50%);width:26px;transform-origin:top center;
    opacity:calc(min((var(--p) - 0.17) * 12, (1.02 - var(--p)) / 0.1));}
  .grl-flame .len{transform:scaleY(calc(0.35 + 2.3 * clamp(0, calc((var(--p) - 0.15) / 0.15), 1)));transform-origin:top center;}
  .grl-flame .flick{animation:grl-flick .09s linear infinite;transform-origin:top center;position:relative;}
  .grl-flame .streak{position:absolute;left:50%;top:0;transform:translateX(-50%);width:5px;height:60px;
    background:linear-gradient(180deg,#bff3ff,#00D4FF 38%,rgba(0,212,255,0) 100%);border-radius:0 0 40% 40%/0 0 100% 100%;}
  .grl-flame .plume{position:relative;width:26px;height:44px;margin:0 auto;border-radius:0 0 50% 50%/0 0 100% 100%;
    background:radial-gradient(52% 60% at 50% 6%,#ff9d4a,#ff5a1f 52%,rgba(207,61,9,0) 100%);}
  .grl-flame .mid{position:relative;width:15px;height:30px;margin:-40px auto 0;border-radius:0 0 50% 50%/0 0 100% 100%;
    background:radial-gradient(52% 60% at 50% 6%,#ffe89a,#ffb43a 58%,rgba(255,90,31,0) 100%);}
  .grl-flame .core{position:relative;width:8px;height:20px;margin:-28px auto 0;border-radius:0 0 50% 50%/0 0 100% 100%;
    background:radial-gradient(60% 70% at 50% 10%,#fff,#fff1c0 55%,rgba(255,224,138,0) 100%);}

  .grl-smoke{position:absolute;left:50%;top:96px;transform:translateX(-50%);width:130px;height:56px;pointer-events:none;
    opacity:calc(min((var(--p) - 0.18) * 12, (0.45 - var(--p)) * 12));}
  .grl-smoke span{position:absolute;border-radius:50%;
    background:radial-gradient(50% 50% at 50% 50%,rgba(215,228,248,.5),rgba(154,166,191,0) 70%);animation:grl-smoke 1.7s ease-out infinite;}

  /* Capsule stack (v3): bob wrapper (endless cruise-bob at 100%) > capsule
     (1.1s glide transform) > nose svg (90deg rotation, own transition). */
  .grl-capsule-bob{position:absolute;left:50%;top:0;z-index:2;}
  .grl-capsule{transform:translateX(-50%);transition:transform 1.1s cubic-bezier(.2,.75,.2,1);}
  .grl-nose{display:block;transform-origin:50% 50%;transition:transform 1.1s cubic-bezier(.2,.75,.2,1);}
  .grl-body{position:absolute;left:50%;top:26px;transform:translateX(-50%);z-index:1;display:block;}
  .grl-seppuff{position:absolute;left:50%;top:28px;width:40px;height:24px;transform:translate(-50%,-50%);opacity:0;transition:opacity .5s;
    background:radial-gradient(50% 50% at 50% 50%,rgba(255,180,90,.85),rgba(255,90,31,0) 72%);pointer-events:none;}

  /* Steady orbit glow (no pulse): a calm, constant radiance once in orbit. */
  .grl-success{position:absolute;left:50%;top:50%;width:200px;height:200px;transform:translate(-50%,-50%);
    opacity:0;transition:opacity .6s;pointer-events:none;z-index:4;
    background:radial-gradient(50% 50% at 50% 50%,rgba(255,90,31,.22),rgba(0,212,255,.08) 45%,transparent 70%);}
  .grl-vignette{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:6;
    box-shadow:inset 0 0 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,212,255,.06);}

  /* ---- copy block ---- */
  .grl-copy{position:relative;width:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6px 10px;}
  .grl-pct{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:#ff5a1f;letter-spacing:.02em;margin-bottom:10px;}
  .grl-pct::after{counter-reset:grpct calc(var(--p) * 100);content:counter(grpct) "%";}
  .grl-titles{position:relative;height:48px;width:100%;}
  .grl-titles > div{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;line-height:1.2;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:17px;color:#f2f5fb;}
  /* Gate 2 (2026-08-21): ONE rotating waiting line (JS-fed, Felix's 38
     space lines) replaced the 3 fixed CSS-band titles. Crossfade in place -
     nothing moves horizontally (anti-slop visual rule). */
  .grl-line{opacity:1;transition:opacity .22s ease;}
  .grl-line.is-swapping{opacity:0;}
  .grl-tsucc{opacity:0;font-weight:700!important;color:#ff5a1f!important;transition:opacity .4s;}
  .grl-sub{margin-top:8px;font-size:13px;line-height:1.4;color:#9aa6bf;max-width:210px;}

  /* ---- reveal button (hidden until 2s after launch) ----
     2026-07-18: a static flex child (was absolute bottom:20px, which painted
     OVER the copy block on short mobile frames). margin-top:auto keeps it at
     the column's foot; the fade/rise reveal stays. */
  .grl-reveal{margin:0 auto;flex:none;align-self:center;transform:translateY(8px) scale(.96);opacity:0;pointer-events:none;
    transition:opacity .5s ease,transform .5s ease;
    font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;letter-spacing:.01em;color:#070a12;
    background:#ff5a1f;border:none;border-radius:999px;padding:11px 26px;cursor:pointer;
    box-shadow:0 8px 22px rgba(255,90,31,.45),0 0 0 1px rgba(255,140,90,.4) inset;}

  /* ===== SUCCESS STATE (v3, 2026-07-07): capsule SCREENSAVER =====
     The booster detaches and falls away; the capsule rotates nose-right,
     glides to the CENTER of the frame and holds there FOREVER with a gentle
     bob, while the trail stripes stream leftward and the cruise starfield
     pans left - camera locked on the capsule, cruising right endlessly.
     Reveal button after ~2s. */
  .gr-funnel__progress.is-launch .grl-shake{animation:none;}
  .gr-funnel__progress.is-launch .grl-bob{animation:none;}
  .gr-funnel__progress.is-launch .grl-flame,
  .gr-funnel__progress.is-launch .grl-smoke,
  .gr-funnel__progress.is-launch .grl-eglow{opacity:0!important;transition:opacity .45s ease;}
  .gr-funnel__progress.is-launch .grl-seppuff{animation:grl-seppuff-fade 1s .12s ease forwards;}
  .gr-funnel__progress.is-launch .grl-body{animation:grl-bodyfall 2.4s .12s cubic-bezier(.55,.06,.9,.3) forwards;}
  .gr-funnel__progress.is-launch .grl-capsule{transform:translate(-50%,42px);}
  .gr-funnel__progress.is-launch .grl-nose{transform:rotate(90deg);}
  .gr-funnel__progress.is-launch .grl-capsule-bob{animation:grl-cruise-bob 3.6s ease-in-out 1.1s infinite;}
  .gr-funnel__progress.is-launch .grl-trail{opacity:1;}
  .gr-funnel__progress.is-launch .grl-cruise-sky{opacity:1;}
  .gr-funnel__progress.is-launch .grl-cruise-track{animation:grl-skyscroll 30s linear infinite;}
  .gr-funnel__progress.is-launch .grl-line{opacity:0;}
  .gr-funnel__progress.is-launch .grl-tsucc{opacity:1;}
  .gr-funnel__progress.is-launch .grl-success{opacity:1;}
  .gr-funnel__progress.is-launch .grl-reveal{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;transition-delay:2s;}
  @keyframes grl-bodyfall{
    0%{transform:translateX(-50%) translateY(0) rotate(0);opacity:1;}
    16%{transform:translateX(-50%) translateY(8px) rotate(3deg);opacity:1;}
    100%{transform:translateX(-50%) translateY(250px) rotate(24deg);opacity:0;}}
  @keyframes grl-seppuff-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}30%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9);}}
  @keyframes grl-cruise-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
  @keyframes grl-trailflow{0%{transform:translateX(46px);opacity:0}18%{opacity:var(--o,.7)}100%{transform:translateX(-152px);opacity:0}}
  @keyframes grl-skyscroll{0%{transform:translateX(0)}100%{transform:translateX(-194px)}}
  @media (prefers-reduced-motion: reduce){
    .gr-funnel__progress.is-launch .grl-body{animation:none;opacity:0;}
    .gr-funnel__progress.is-launch .grl-capsule{transition:none;transform:translate(-50%,42px);}
    .gr-funnel__progress.is-launch .grl-nose{transition:none;transform:rotate(90deg);}
    .gr-funnel__progress.is-launch .grl-capsule-bob{animation:none;}
    .gr-funnel__progress.is-launch .grl-cruise-track{animation:none;}
    .gr-funnel__progress.is-launch .grl-trail{opacity:0!important;}
    .gr-funnel__progress.is-launch .grl-reveal{transition-delay:.2s;}}

  /* ===== continuous micro-animations (independent of --p) ===== */
  @keyframes grl-glow{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.18)}}
  @keyframes grl-flick{0%,100%{transform:scaleY(1) scaleX(1)}20%{transform:scaleY(1.12) scaleX(.9)}45%{transform:scaleY(.86) scaleX(1.08)}70%{transform:scaleY(1.1) scaleX(.94)}}
  @keyframes grl-shake{0%,100%{transform:translate(0,0) rotate(0)}20%{transform:translate(-.5px,.4px) rotate(-.5deg)}40%{transform:translate(.5px,-.3px) rotate(.5deg)}60%{transform:translate(-.4px,.3px) rotate(-.4deg)}80%{transform:translate(.4px,-.4px) rotate(.4deg)}}
  @keyframes grl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes grl-smoke{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:.55}100%{opacity:0;transform:translate(var(--dx,0),26px) scale(2.1)}}
  @keyframes grl-streak{0%{transform:translateY(-70px);opacity:0}12%{opacity:.9}100%{transform:translateY(250px);opacity:0}}
  @keyframes grl-twinkle{0%,100%{opacity:.2}50%{opacity:.95}}
  @keyframes grl-cloud{0%{transform:translateX(0)}50%{transform:translateX(10px)}100%{transform:translateX(0)}}
  @media (prefers-reduced-motion: reduce){
    .grl-ring,.grl-eglow,.grl-flame .flick,.grl-shake,.grl-bob,.grl-smoke span,.grl-streaks span,.grl-star,.grl-success,.grl-cloud,.grl-trail span,.grl-capsule-bob,.grl-cruise-track{animation:none!important;}
  }
  /* Example ad shown below the loader while the preview builds. The only
     motion is the video itself (approved exception class, like the hero demo). */
  .gr-funnel__example { margin: 1.1rem auto 0; width: 270px; max-width: 80vw; }
  .gr-funnel__example[hidden] { display: none; }
  .gr-funnel__example-label { font-size: .8rem; color: #9aa6bf; text-align: center;
    margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; }
  .gr-funnel__example-frame { position: relative; aspect-ratio: 9 / 16;
    border-radius: 14px; overflow: hidden; background: #000; }
  .gr-funnel__example-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .gr-funnel__replay { margin-top: .7rem; }
  .gr-funnel__replay[hidden] { display: none; }
  /* Subtle, unlabeled replay (the per-session cap is a silent backend limit). */
  .gr-replay-btn { width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06);
    color: inherit; font-size: 1.2rem; line-height: 1; }
  .gr-replay-btn:hover { background: rgba(255,90,31,.18); border-color: rgba(255,90,31,.6); }
  .gr-funnel__status { min-height: 1.2em; font-size: .9rem; opacity: .8; margin-top: .6rem; }
  .gr-funnel__status:empty { display: none; }
  /* L-5: the human fallback shown only when the preview throttle hits. */
  .gr-funnel__b2b { font-size: .88rem; opacity: .85; margin-top: .3rem; }
  .gr-funnel__b2b[hidden] { display: none; }
  .gr-funnel__b2b a { color: #FF5A1F; font-weight: 600; text-decoration: underline; }

  /* ---- primary CTA: headline + direct-to-Stripe button, then the
         "A look inside Mission Control" showcase (revealed after render) ---- */
  .gr-funnel__proposals { max-width: 600px; margin: 1.6rem auto 0; }
  .gr-funnel__proposals[hidden] { display: none; }
  .gr-funnel__cta-btn { display: block; margin: 0 auto .6rem; min-width: 220px;
    font-size: 1.05rem; padding: .85rem 2rem; }
  .gr-funnel__cta-single { display: block; margin: 0 auto .5rem; background: none;
    border: none; color: inherit; opacity: .85; font-size: .92rem; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; }
  .gr-funnel__cta-single:hover { opacity: 1; }
  .gr-funnel__facts { list-style: none; padding: 0; max-width: 480px;
    margin-left: auto; margin-right: auto; display: flex; flex-direction: column;
    gap: .3rem; }
  /* Logical properties (2026-08-03): the funnel serves RTL locales too. */
  .gr-funnel__facts li { position: relative; padding-inline-start: 1.15rem; text-align: start; }
  .gr-funnel__facts li::before { content: "\2713"; position: absolute; inset-inline-start: 0;
    color: #ffb199; font-weight: 700; }
  .gr-funnel__assure { font-size: .8rem; opacity: .6; text-align: center;
    margin: 0 0 1.4rem; }
  .gr-funnel__mission-label { font-size: 1rem; font-weight: 600; opacity: .9;
    margin: 0 0 .8rem; text-align: center; }
  .gr-funnel__opts-status { min-height: 1.1em; font-size: .85rem; opacity: .7; margin: 0 0 .4rem; }
  .gr-funnel__opts-status:empty { display: none; }
  .gr-funnel__primary { display: flex; flex-direction: column; gap: 1rem; }
  .gr-cat { text-align: start; }
  .gr-cat__label { font-size: .9rem; font-weight: 600; margin: 0 0 .45rem; opacity: .92; }
  /* 2.6 merged "message" step: the audio/text groups keep their own quiet
     sublabels inside the one step body. */
  .gr-cat__sublabel { font-size: .82rem; font-weight: 600; opacity: .75;
    margin: .9rem 0 .4rem; }
  .gr-cstep__body [data-cat]:first-child .gr-cat__sublabel { margin-top: 0; }

  /* ---- 6.6 progressive disclosure (Claude Design "Go Rocket Funnel Stepper")
     One focused choice at a time. Active = expanded, done = collapsed tappable
     summary with Edit, locked = dimmed and non-interactive. Orange owns the
     active badge, the done check and the Next button. */
  .gr-stepper__head { display: flex; align-items: baseline; justify-content: space-between;
    gap: .8rem; margin: .2rem 0 .8rem; }
  .gr-stepper__title { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
  .gr-stepper__count { font-size: .82rem; opacity: .62; white-space: nowrap; }
  .gr-cstep { border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
    background: rgba(11,42,61,.55); padding: .85rem .95rem;
    transition: border-color .25s ease, opacity .25s ease, background .25s ease; }
  .gr-cstep__head { display: flex; align-items: center; gap: .7rem; width: 100%;
    background: none; border: 0; padding: 0; color: inherit; text-align: start;
    font: inherit; cursor: default; }
  .gr-cstep__num { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; font-size: .78rem; font-weight: 700;
    background: rgba(255,255,255,.10); color: rgba(255,255,255,.75); }
  .gr-cstep__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  .gr-cstep__text .gr-cat__label { margin: 0; }
  .gr-cstep__summary { font-size: .84rem; color: #FF5A1F; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gr-cstep__summary[hidden] { display: none; }
  .gr-cstep__edit { flex: 0 0 auto; font-size: .8rem; font-weight: 600; opacity: .75;
    border-bottom: 1px solid rgba(255,255,255,.35); }
  .gr-cstep__edit[hidden] { display: none; }
  .gr-cstep__body { margin-top: .8rem; }
  /* Look picker = static swatch grid (2026-07-29, replaced the degraded
     5-card carousel). One selection signal: aria-checked. */
  .gr-look-grid { display: grid; grid-template-columns: repeat(5, 1fr);
    gap: .6rem; }
  .gr-look-grid__card { position: relative; padding: 0; border: 2px solid
    rgba(255,255,255,.14); border-radius: 12px; background: none;
    cursor: pointer; overflow: hidden; }
  .gr-look-grid__card:hover { border-color: rgba(255,255,255,.35); }
  .gr-look-grid__card[aria-checked="true"] { border-color: #FF5A1F;
    box-shadow: 0 0 14px rgba(255,90,31,.35); }
  .gr-look-grid__card[aria-checked="true"] .gr-char__check { display: grid; }
  .gr-look-grid__card .gr-char__name { display: block; font-size: .68rem;
    padding: .25rem .1rem .35rem; text-align: center; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 600px) {
    .gr-look-grid { grid-template-columns: repeat(3, 1fr); }
  }
  .gr-cstep__next { display: block; margin: .9rem 0 0; padding: .6rem 1.4rem;
    border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700;
    background: #FF5A1F; color: #051C2C; }
  .gr-cstep__next:hover { background: #ff6d38; }
  /* Active: expanded, orange badge, brighter border. */
  .gr-cstep.is-active { border-color: rgba(255,90,31,.55); background: rgba(11,42,61,.85); }
  .gr-cstep.is-active > .gr-cstep__head .gr-cstep__num { background: #FF5A1F; color: #051C2C; }

  /* Done: collapsed to the summary line, tappable to reopen. */
  .gr-cstep.is-done > .gr-cstep__body { display: none; }
  .gr-cstep.is-done > .gr-cstep__head { cursor: pointer; }
  .gr-cstep.is-done > .gr-cstep__head .gr-cstep__num { background: rgba(255,90,31,.22); color: #FF5A1F; }
  .gr-cstep.is-done > .gr-cstep__head .gr-cstep__num::after { content: "✓"; }
  .gr-cstep.is-done > .gr-cstep__head .gr-cstep__num { font-size: .72rem; }

  /* Locked: visible but dimmed and inert until reached. */
  .gr-cstep.is-locked { opacity: .42; }
  .gr-cstep.is-locked > .gr-cstep__body { display: none; }
  .gr-cstep.is-locked > .gr-cstep__head { cursor: not-allowed; }
  @media (prefers-reduced-motion: reduce) {
    .gr-cstep { transition: none; }
  }
  .gr-cat__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .gr-chip {
    padding: .55rem .95rem; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: inherit; font-size: .9rem;
  }
  .gr-chip[aria-pressed="true"] { background: rgba(255,90,31,.2); border-color: rgba(255,90,31,.65); }
  .gr-chip__custom { border-style: dashed; }
  /* option CARD (6.1 GlassCard, Claude Design "Go Rocket Glass Card", gated +
     ported 2026-07-25): glass surface (blur + solid #0b2a3d-tint fallback),
     hairline border, soft inner shadow, faint orbit-ring signature; selected =
     ORANGE glow ring + round check badge. The right padding reserves the badge
     gutter so idle vs selected never shifts (ring is box-shadow, border stays
     1px in both states). */
  .gr-card { display: block; width: 100%; text-align: left; border-radius: 14px;
    position: relative; overflow: hidden; padding: .8rem 2.35rem .8rem 1rem;
    background: rgba(11,42,61,.92);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    transition: border-color .15s, box-shadow .15s, background .15s; }
  @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
    .gr-card { background: rgba(11,42,61,.55);
      -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
  .gr-card:hover { border-color: rgba(255,255,255,.28); }
  .gr-card::before { content: ""; position: absolute; right: -34px; bottom: -34px;
    width: 96px; height: 96px; border: 1px solid rgba(255,255,255,.07);
    border-radius: 50%; pointer-events: none; }
  .gr-card[aria-pressed="true"] { background: rgba(255,90,31,.10);
    border-color: rgba(255,90,31,.85);
    box-shadow: 0 0 0 2px rgba(255,90,31,.45), 0 10px 30px rgba(255,90,31,.16),
      inset 0 1px 0 rgba(255,255,255,.06); }
  .gr-card::after { content: "\2713"; position: absolute; top: .55rem; right: .55rem;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: #FF5A1F; color: #fff; font-size: .74rem; font-weight: 700;
    opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
  .gr-card[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
  @media (prefers-reduced-motion: reduce) {
    .gr-card, .gr-card::after { transition: none; }
  }
  /* Hear-the-I-statement affordance (§N.4): now a real 44px pill, orange-filled
     while playing, always legible on the glass. */
  .gr-card__play { display: inline-flex; align-items: center; gap: .4rem;
    margin-top: .55rem; padding: .55rem .95rem; min-height: 44px;
    box-sizing: border-box; border: 1px solid rgba(255,90,31,.55);
    border-radius: 999px; font-size: .74rem; font-weight: 700; color: #ffb199;
    background: rgba(255,90,31,.08); cursor: pointer;
    transition: background .15s, border-color .15s, color .15s; }
  .gr-card__play:hover { background: rgba(255,90,31,.18);
    border-color: rgba(255,90,31,.85); color: #fff; }
  /* 2026-08-21 (Gate 1 audio fix): the old is-loading (opacity + cursor)
     was invisible on touch - 3.2 s of measured cold synthesis read as a
     dead chip. A gentle in-place pulse is unmistakable on mobile and stays
     inside the anti-slop rules (no moving lines, nothing travels). */
  .gr-card__play.is-loading { cursor: progress;
    animation: gr-play-pulse 0.9s ease-in-out infinite; }
  @keyframes gr-play-pulse {
    0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  .gr-card__play.is-failed { border-color: #ff4d4d; color: #ff9c9c;
    background: rgba(255,77,77,.10); }
  @media (prefers-reduced-motion: reduce) {
    .gr-card__play.is-loading { animation: none; opacity: .55; } }
  /* 2026-08-20: the three named voice buttons under the one proposed line */
  .gr-card__voices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .55rem; }
  .gr-card__play.is-playing { background: #FF5A1F; border-color: #FF5A1F; color: #fff; }
  .gr-card__title { display: block; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-bottom: .2rem; }
  .gr-card__body { display: block; font-size: .92rem; line-height: 1.35; }
  .gr-cat__custom { display: block; width: 100%; margin-top: .6rem; padding: .7rem .9rem;
    border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05);
    color: inherit; font: inherit; resize: vertical; }
  .gr-cat__custom[hidden], .gr-cat__file[hidden] { display: none; }

  /* presenter cards + the endless CENTER-SNAP carousel (v2.32: centered =
     PREVIEW spotlight, checked = SELECTION badge - two separate signals). */
  .gr-avsearch { position: relative; max-width: 340px; margin: 0 auto .8rem; }
  #gr-avatar-search { width: 100%; padding: .55rem .9rem; border-radius: 999px;
    border: 1px solid rgba(148,163,196,.3); background: rgba(11,42,61,.5);
    color: inherit; font-size: .9rem; text-align: center; }
  #gr-avatar-search:focus { outline: none; border-color: rgba(255,90,31,.6); }
  .gr-avsearch__list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    background: #0b2a3d; border: 1px solid rgba(148,163,196,.25); border-radius: 12px;
    overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.5); }
  .gr-avsearch__list[hidden] { display: none; }
  .gr-avsearch__item { display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .5rem .8rem; background: none; border: none; color: inherit; font: inherit;
    font-size: .88rem; cursor: pointer; text-align: left; }
  .gr-avsearch__item:hover { background: rgba(255,90,31,.14); }
  .gr-avsearch__item img { width: 26px; height: 32px; border-radius: 6px; object-fit: cover; }
  .gr-avsearch__item small { opacity: .6; margin-inline-start: auto; }
  /* Carousel + card skin: shared with the create page via
     static/css/gorocket-avatar-carousel.css (one unified interaction pre
     and post paywall). Only the funnel-specific search styles stay here. */
  /* 2.6 (2026-08-03): the L-2 inline email capture left the funnel - the
     exit-intent boarding pass owns lead capture; one primary CTA remains. */
  /* Country-flag strip removed 2026-08-08 (show-dont-explain arc). */


  /* ---- fullscreen extended cut (v2.27): overlay div, iOS-safe ---- */
  .gr-funnel__fullbtn { margin: .8rem auto 0; text-align: center; }
  .gr-funnel__fullbtn[hidden] { display: none; }
  .gr-fullcut { position: fixed; inset: 0; z-index: 1000; background: rgba(4,8,16,.96);
    display: flex; align-items: center; justify-content: center; }
  .gr-fullcut[hidden] { display: none; }
  /* 9:16 frame filling the viewport height; dvh tracks the iOS URL bar
     (pre-15.4 falls back to the vh line). Desktop caps at 92dvh + radius. */
  .gr-fullcut__frame { position: relative; aspect-ratio: 9/16;
    height: min(100vh, calc(100vw * 16 / 9));
    height: min(100dvh, calc(100vw * 16 / 9));
    overflow: hidden; background: #000; }
  @media (min-width: 700px) {
    .gr-fullcut__frame { height: min(92vh, calc(100vw * 16 / 9)); height: min(92dvh, calc(100vw * 16 / 9)); border-radius: 14px; } }
  .gr-fullcut__player { position: absolute; inset: 0; width: 100%; height: 100%; }
  /* Close X: FIXED to the viewport (never scrolls away), safe-area padded. */
  .gr-fullcut__close { position: fixed; top: calc(.8rem + env(safe-area-inset-top));
    right: calc(.8rem + env(safe-area-inset-right)); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: rgba(11,42,61,.85); color: #fff; font-size: 1.5rem; line-height: 1;
    display: grid; place-items: center; }
  .gr-fullcut__close:hover { background: rgba(255,90,31,.85); }
  /* Presenter dock mirrors .gr-funnel__presenter (teaser.tsx PRESENTER_DOCK). */
  .gr-fullcut__presenter { position: absolute; right: 3%; bottom: 0;
    height: 56%; max-width: 52%; pointer-events: none; }
  .gr-fullcut__presenter[hidden] { display: none; }
  .gr-fullcut__presenter .gr-presenter__img { display: block; height: 100%;
    width: auto; max-width: 100%; object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
  .gr-fullcut__replay { position: absolute; left: 50%; transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 2; }
  .gr-fullcut__replay[hidden] { display: none; }

  /* ---- mobile: single column, nothing cramped or overflowing ---- */
  @media (max-width: 600px) {
    .gr-funnel__form { flex-direction: column; }
    #gr-funnel-go { width: 100%; }
    .gr-funnel__videowrap { width: 220px; }
    .gr-funnel__example { width: 200px; }
    /* carousel mobile rules live in gorocket-avatar-carousel.css */
    /* Loader: the 216px ring world scales down uniformly so ring + copy +
       reveal button all fit the 220px frame (2026-07-18 overlap fix). */
    .gr-funnel__progress { --grl-k: .72; padding: 18px 12px 16px; }
    .grl-pct { font-size: 13px; margin-bottom: 6px; }
    .grl-titles { height: 40px; }
    .grl-titles > div { font-size: 14px; }
    .grl-sub { font-size: 12px; max-width: 180px; margin-top: 5px; }
    /* Paywall section: air between the blocks - one thought at a time
       (2026-07-18 "too much text at once on mobile"). */
    .gr-funnel__proposals { margin-top: 2.4rem; padding: 0 .4rem; }
      .gr-funnel__cta-btn { width: 100%; }
    .gr-funnel__assure { margin-bottom: 1.8rem; }
    .gr-funnel__mission-label { margin: .4rem 0 1.1rem; }
    .gr-funnel__primary { gap: 1.8rem; }
    .gr-cat__label { margin-bottom: .7rem; }
    .gr-card { padding: .8rem 1rem; }
  }

/* Gate 2 (2026-08-21): the sample-link chip under the funnel input. */
.gr-funnel__sample { margin: 8px 0 0; text-align: center; }
.gr-sample-btn { background: none; border: none; cursor: pointer;
  font-size: .82rem; color: #9aa6bf; text-decoration: underline;
  text-underline-offset: 3px; padding: 6px 10px; font-family: inherit; }
.gr-sample-btn:hover { color: #f2f5fb; }

/* Gate 2 (2026-08-21, 4e): post-aha focus. Once the visitor's own preview
   is revealed, the generic pitch sections below it (hero, the 40x pitch,
   the example reel, the duplicate final CTA) hide - their ad is the page
   now. Pricing, FAQ, the authority marquee and the footer stay. */
body.gr-funnel-revealed .gr-hide-on-reveal { display: none; }