/* ============================================================================
 * Landing redesign (#3200): Section 1 five-state hero + Section 2 cinematic demo.
 *
 * Ported from the approved prototype `docs/design/consumer-landing-redesign/
 * turboev-landing.html` (Victor / Doubao). The LAYOUT, SPACING AND MOTION ARE
 * THE PROTOTYPE'S, unchanged, so the built page matches what the Commander
 * approved. Three things are deliberately NOT the prototype's, because the
 * design system is canonical (`docs/PROJECT_CONTEXT/design-system-v2.md`) and
 * `docs/design/consumer-landing-redesign/README.md` says fonts and stylesheets
 * are wiring decisions rather than design intent:
 *
 *   1. THE PAGE IS DARK. The prototype is a white page (`body{background:#fff}`)
 *      and the site has been true black since 2026-07-17 (`CLAUDE.md` section 6).
 *      The prototype's light token names are kept and re-pointed at their dark
 *      equivalents below, so no rule had to be rewritten and the two versions
 *      cannot drift apart structurally.
 *   2. INTER, NOT POPPINS. The prototype pulls Poppins from `miaoda.feishu.cn`,
 *      a third-party host that would see every visitor's IP. Inter is self-hosted
 *      and is the site's typeface.
 *   3. ACCENT GREEN IS LIMITED. One highlight ("every rebate"), the sample link
 *      and the primary CTA carry it; the prototype leaned on it more.
 * ========================================================================== */

:root{
  /* The prototype's token names, re-pointed at the live dark palette. */
  --ink:#FFFFFF;                      /* primary text */
  --muted:rgba(255,255,255,.75);      /* secondary text (CLAUDE.md section 6) */
  --faint:rgba(255,255,255,.55);
  --hair:rgba(255,255,255,.14);
  --hair2:rgba(255,255,255,.08);
  --green:#A8FF35; --green-deep:#8FE020; --green-glow:rgba(168,255,53,.4);
  --on-green:#161510;                 /* green blocks carry DARK text, every theme */
  /* Embedded dark product surfaces (unchanged from the prototype). */
  --card-bg:#101010; --card-line:rgba(255,255,255,.10); --card-line-2:rgba(255,255,255,.16);
  --card-surface:rgba(255,255,255,.04); --card-text:#fff; --card-text-2:rgba(255,255,255,.88);
  --card-muted:rgba(255,255,255,.72); --card-dimmed:rgba(255,255,255,.64);
  --f-mono:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-num:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

.landing-redesign{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color:var(--ink)}

  .hero{max-width:1600px;margin:0 auto;padding:130px 28px 120px}
  .hero-inner{display:grid;grid-template-columns:1fr;gap:56px}
  .hero-inner>.hero-left,.hero-inner>.hero-right{min-width:0}
  @media(min-width:960px){.hero-inner{grid-template-columns:1.12fr 1fr;gap:72px;align-items:center}}

  .hero-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);margin-bottom:24px}
  .hero h1{font-size:clamp(30px,9vw,46px);font-weight:800;line-height:1.05;letter-spacing:-.03em}
  .hero h1 .h-find{display:block}
  .hero h1 .g{display:block;color:var(--ink);font-weight:400;font-style:italic;background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.04em .16em .05em;border-radius:.08em;white-space:nowrap;width:fit-content}
  .hero-line2{display:block}
  @media(min-width:960px){.hero h1{font-size:clamp(46px,6.6vw,96px);line-height:1.05}}
  .hero-sub{margin-top:24px;font-size:18px;line-height:1.6;color:var(--muted);max-width:32em}
  .hero-sub b{color:var(--ink);font-weight:600;position:relative;white-space:nowrap}
  .hero-sub b .scribble{position:absolute;left:-2%;bottom:-.42em;width:104%;height:.55em;overflow:visible;pointer-events:none}
  .hero-sub b .scribble path{fill:none;stroke:#8FE020;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240}
  .hero-sub b.draw .scribble path{animation:scribbleIn .6s cubic-bezier(.6,.1,.4,1) .3s forwards}
  @keyframes scribbleIn{to{stroke-dashoffset:0}}

  .command{display:flex;align-items:center;margin-top:34px;max-width:520px;background:var(--card-bg);border:1px solid var(--hair);border-radius:16px;padding:8px 8px 8px 18px;transition:border-color .2s,box-shadow .2s}
  .command:hover:not(:focus-within){border-color:rgba(78,154,13,.45)}
  .command:focus-within{border-color:var(--green-deep);box-shadow:0 0 0 4px rgba(168,255,53,.18)}
  .command .prompt{font-size:16px;color:var(--green-deep);display:inline-flex;align-items:center;margin-right:9px}
  .command .prompt .cursor{animation:blink 1.1s steps(1) infinite;margin-left:2px}
  @keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
  .command input{flex:1;border:0;outline:0;font-family:inherit;font-size:17px;color:var(--ink);background:transparent;min-width:0}
  .command input::placeholder{color:var(--faint)}
  .command kbd{font-size:11px;color:var(--muted);border:1px solid var(--hair);border-radius:6px;padding:3px 7px;margin-left:10px}
  .command button{margin-left:8px;background:linear-gradient(180deg,#B9FF61 0%,#A8FF35 48%,#93EC17 100%);color:var(--on-green);font-weight:700;font-size:15px;border:0;border-radius:11px;padding:13px 20px;cursor:pointer;display:flex;align-items:center;gap:8px;white-space:nowrap;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 16px -6px rgba(168,255,53,.5),0 2px 5px -1px rgba(16,18,20,.16);transition:transform .15s}
  .command button:hover{transform:translateY(-1px)}
  .command button .arr{font-size:15px}
  .command-note{font-size:13px;color:var(--faint);margin-top:12px}
  .sample-link{display:inline-block;margin-top:18px;color:var(--green-deep);text-decoration:none;font-size:15px;font-weight:600}
  .sample-link:hover{text-decoration:underline}
  .sample-link .arr{margin-left:4px;display:inline-block;transition:transform .18s}
  .sample-link:hover .arr{transform:translateX(3px)}

  /* ===== lifted scan card: dark tool embedded in the light page ===== */
  .agent{position:relative;border-radius:34px;overflow:hidden;min-width:0;max-width:100%;
    background:
      radial-gradient(85% 55% at 50% 118%, rgba(168,255,53,.09) 0%, rgba(168,255,53,.028) 34%, rgba(168,255,53,0) 62%),
      linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 16%, rgba(255,255,255,0) 34%),
      radial-gradient(140% 120% at 50% -25%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.022) 32%, rgba(255,255,255,0) 66%),
      #0c0c0c;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.015), 0 40px 90px -40px rgba(0,0,0,.55);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
  .agent:hover{transform:translateY(-5px);border-color:rgba(168,255,53,.5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 -80px 120px -60px rgba(168,255,53,.18), 0 54px 108px -38px rgba(0,0,0,.6), 0 24px 64px -22px rgba(168,255,53,.22)}
  .agent-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--card-line)}
  .agent-id{flex:1;min-width:0}
  .agent-name{font-size:14px;font-weight:600;color:var(--card-text);display:flex;align-items:center;gap:8px}
  .agent-name .role{font-size:10px;font-weight:400;color:var(--card-muted);letter-spacing:.04em;display:inline-flex;align-items:center;gap:7px}
  .agent-name .role .rdot{width:5px;height:5px;border-radius:50%;background:var(--green)}
  .agent-status{font-size:10px;color:var(--green);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
  .agent-status .live{width:5px;height:5px;border-radius:50%;background:var(--green);animation:breath 1.8s ease-out infinite}
  @keyframes breath{0%{box-shadow:0 0 0 0 var(--green-glow)}70%{box-shadow:0 0 0 7px rgba(168,255,53,0)}100%{box-shadow:0 0 0 0 rgba(168,255,53,0)}}
  .agent-body{padding:20px;display:flex;flex-direction:column;gap:10px}

  /* added car banner */
  .car-banner{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1320/600;height:auto;margin-bottom:4px}
  .car-banner img{width:100%;height:100%;object-fit:cover;object-position:center}
  .car-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,12,0) 52%,rgba(12,12,12,.74) 100%)}
  .car-banner .cb-locpill{position:absolute;left:12px;top:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(16,16,16,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:11.5px;font-weight:600;border:1px solid rgba(255,255,255,.16);white-space:nowrap}
  .car-banner .cb-locpill svg{width:12px;height:12px;display:block;color:var(--green);flex:none}
  .car-banner .cb-l{position:absolute;left:14px;bottom:11px;z-index:2;color:#fff}
  .car-banner .cb-name{font-size:14px;font-weight:600}
  .car-banner .cb-ver{position:absolute;right:13px;bottom:12px;z-index:2;font-size:10.5px;font-weight:600;color:var(--green);display:flex;gap:5px;align-items:center}
  .car-banner .cb-ver .d{width:6px;height:6px;border-radius:50%;background:var(--green)}

  .log{font-size:11px;color:var(--card-text-2);display:flex;align-items:center;gap:8px;letter-spacing:.02em;opacity:0}
  .log.go{animation:logIn .5s var(--ease) both}
  .log .ind{flex-shrink:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--green)}
  .log.done{color:var(--card-muted)}
  /* The right-hand slot states WHAT HAPPENED, not how fast (Commander, 2026-10-27).
     It used to read "120ms" / "230ms", which is a fact about our server and says nothing
     to the customer. It is now Matched / Eligible / Found. */
  .log .badge{flex:0 0 auto;margin-left:auto;font-size:9.5px;font-weight:500;line-height:1;
    letter-spacing:.04em;color:var(--card-muted);white-space:nowrap}

  /* Circle then check, as the live workspace's own scan log does (#3200): the row shows a
     spinning half-circle while the step is being worked, then the circle becomes a tick.
     Two absolutely-positioned glyphs in one fixed-size box, so neither shifts the label. */
  .log .ind{position:relative;width:12px;height:12px;font-size:11px;line-height:1}
  .log .ind .ring,.log .ind .tick{position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;color:var(--green)}
  .log .ind .ring{opacity:0}
  .log .ind .tick{opacity:0}
  .log.go .ind .ring{opacity:1;animation:heroSpin 1.1s linear infinite,heroRingOut .22s ease-out .4s forwards}
  .log.go .ind .tick{animation:heroTickIn .3s cubic-bezier(.2,.7,.2,1) .4s forwards}
  @keyframes heroSpin{to{transform:rotate(360deg)}}
  @keyframes heroRingOut{to{opacity:0}}
  @keyframes heroTickIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
  @keyframes logIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
  .scan-hr{height:1px;background:var(--card-line);margin:4px 0}
  .found-head{font-size:10px;color:var(--card-muted);letter-spacing:.08em;text-transform:uppercase}
  .fcard{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:13px 14px;background:var(--card-surface);border:1px solid var(--card-line);border-radius:12px;position:relative;overflow:hidden;opacity:0}
  .fcard.go{animation:foundIn .55s var(--ease) both}
  .fcard::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--green)}
  .fcard .fc-l{flex:1;min-width:0}
  .fcard .fc-name{font-size:13px;font-weight:600;color:var(--card-text);margin-bottom:3px}
  .fcard .fc-sub{font-size:10px;color:var(--card-muted);letter-spacing:.02em}
  .fcard .fc-amt{font-family:var(--f-num);font-size:14px;font-weight:600;color:var(--green);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;text-align:right}
  .fcard .fc-amt.yr{font-size:13px;color:var(--card-muted);font-weight:500}
  @keyframes foundIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  .agent-summary{margin-top:4px;padding:15px 16px;background:rgba(168,255,53,.08);border:1px solid rgba(168,255,53,.26);border-radius:12px;opacity:0}
  .agent-summary.go{animation:foundIn .6s var(--ease) both}
  .agent-summary .as-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#bff06f;margin-bottom:12px}
  .agent-summary .as-grid{display:flex;gap:14px}
  .agent-summary .as-cell{flex:1;min-width:0}
  .agent-summary .as-cell + .as-cell{padding-left:14px;border-left:1px solid rgba(168,255,53,.22)}
  .agent-summary .as-amt{font-family:var(--f-num);font-weight:800;font-size:25px;color:var(--green);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em;line-height:1.1}
  .agent-summary .as-cap{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--card-muted);margin-top:4px}
  .agent-prompt{margin-top:6px;padding-top:13px;border-top:1px dashed var(--card-line-2);font-size:11px;color:var(--card-muted);opacity:0}
  .agent-prompt.go{animation:logIn .5s var(--ease) both}
  .agent-prompt b{color:var(--card-text);font-weight:500}

  /* ===== fit beat: chargers + installers matched to the rebate ===== */
  .fit-beat{margin-top:2px;padding:13px 14px 11px;background:var(--card-surface);border:1px solid var(--card-line);border-radius:12px;opacity:0;display:flex;flex-direction:column;gap:10px}
  .fit-beat.go{animation:foundIn .55s var(--ease) both}
  .fit-beat .fb-head{font-size:10px;color:var(--card-muted);letter-spacing:.08em;text-transform:uppercase}
  .fit-beat .fb-row{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border-radius:9px;padding:3px 4px;margin:-3px -4px;transition:background .18s}
  .fit-beat .fb-row:hover{background:rgba(255,255,255,.04)}
  .fit-beat .fb-row:hover .fb-name{color:#fff}
  .fit-beat .fb-row:hover .fb-ic{border-color:rgba(168,255,53,.45);color:var(--green)}
  .fit-beat .fb-ic{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid var(--card-line);display:flex;align-items:center;justify-content:center;color:var(--card-text);flex:none}
  .fit-beat .fb-ic svg{width:15px;height:15px;display:block}
  .fit-beat .fb-name{flex:1;min-width:0;font-size:12.5px;font-weight:500;color:var(--card-text)}
  .fit-beat .fb-tag{font-size:10px;font-weight:600;color:var(--card-text);border:1px solid var(--card-line-2);border-radius:999px;padding:4px 9px;white-space:nowrap}
  .fit-beat .fb-tag.local{color:var(--green);border-color:rgba(168,255,53,.35)}

  /* ===== silent multi-state cycling ===== */
  /* THE CARD GROWS (Commander, 2026-10-27; refined from 2026-10-20). This used to
     reserve min-height:820px, so every item faded in over a board of empty space and
     the card was the same height whether it held one program or eight. Each item below
     the car is now COLLAPSED until its own turn and the slide is exactly as tall as
     what is currently visible, so the border expands as the scan finds things.
     `min-height:0` is the whole change; without it the collapse below changes nothing. */
  .slide{display:none;flex-direction:column;gap:10px;min-height:0}
  .slide.active{display:flex}
  .log,.scan-hr,.found-head,.fcard,.agent-summary,.fit-beat,.agent-prompt{
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .5s var(--ease),opacity .4s var(--ease),
               margin .5s var(--ease),padding .5s var(--ease),border-width .5s var(--ease)}
  .log.go{max-height:40px;opacity:1}
  .scan-hr.go{max-height:9px;opacity:1}
  .found-head.go{max-height:20px;opacity:1}
  .fcard.go{max-height:90px;opacity:1}
  .agent-summary.go{max-height:120px;opacity:1}
  .fit-beat.go{max-height:260px;opacity:1}
  .agent-prompt.go{max-height:60px;opacity:1}

  @media (prefers-reduced-motion:reduce){
    .agent:hover{transform:none}
    .log.go,.fcard.go,.agent-summary.go,.fit-beat.go,.agent-prompt.go{animation:none;opacity:1}
    /* No spinning ring: the check is simply there, and nothing is collapsed, so a reader
       with reduced motion sees the finished card rather than an empty growing box. */
    .log .ind .ring{display:none}
    .log.go .ind .tick{opacity:1;animation:none}
    .log,.scan-hr,.found-head,.fcard,.agent-summary,.fit-beat,.agent-prompt{
      max-height:none;opacity:1;overflow:visible;transition:none}
    .hero-sub b.draw .scribble path{animation:none;stroke-dashoffset:0}
  }
  @media (max-width:560px){
    .page{padding:0 20px}
    .brand .stack{width:19px;height:25px}.brand .word{font-size:20px}.nav-cta{padding:10px 16px;font-size:13.5px}
    .hero{padding:80px 20px 90px}
    .hero-sub b{white-space:nowrap;font-size:17px}.hero-sub b .scribble{display:block}
    .command{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"p i" "b b";gap:9px 8px;border-radius:18px;padding:12px 14px}
    .command kbd{display:none}
    .command .prompt{grid-area:p;margin-right:0}
    .command input{grid-area:i;width:100%;padding:6px 0}
    .command button{grid-area:b;width:100%;justify-content:center;margin-left:0}
    .agent-summary .as-grid{gap:10px}
    .agent-summary .as-cell + .as-cell{padding-left:10px}
    .agent-summary .as-amt{font-size:20px}
    .agent-summary .as-label{font-size:11px;margin-bottom:9px}
    .car-banner{height:auto}
  }

  /* ============================================================
     SECTION 2 — CINEMATIC PRODUCT ANIMATION (Watch Roxy)
     ============================================================ */
  .watch{max-width:1600px;margin:0 auto;padding:40px 28px 120px}
  .watch-head{text-align:center;max-width:760px;margin:0 auto 64px}
  .watch-eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);margin-bottom:20px}
  .watch-h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink)}
  .watch-sub{margin-top:22px;font-size:18px;line-height:1.6;color:var(--muted)}

  .win-frame{width:100%;max-width:1180px;margin:0 auto;border-radius:22px;overflow:hidden;position:relative;
    box-shadow:0 50px 120px -50px rgba(0,0,0,.55),0 24px 60px -30px rgba(0,0,0,.35);
    border:1px solid var(--hair)}
  .win{width:1180px;height:736px;transform-origin:top left;background:#000;
    display:flex;flex-direction:column;position:relative}
  /* app title bar (no browser chrome / traffic lights) */
  .win-bar{height:52px;flex:none;display:flex;align-items:center;gap:12px;padding:0 18px;
    background:linear-gradient(180deg,#141414,#0c0c0c);border-bottom:1px solid rgba(255,255,255,.08)}
  .win-bar .wmark{width:15px;height:20px;flex:none}
  .win-title{font-size:13px;font-weight:600;color:#fff;letter-spacing:.01em}
  .win-route{font-size:11px;color:rgba(255,255,255,.42);margin-left:2px}
  .win-bar .sp{flex:1}
  .win-state{display:inline-flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--green);font-weight:600}
  .win-state .sd{width:6px;height:6px;border-radius:50%;background:var(--green);animation:breath 1.8s ease-out infinite}
  .win-stage{flex:1;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:0}
  .win-stage::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(255,255,255,.08);z-index:5}

  /* left chat pane */
  .wchat{display:flex;flex-direction:column;min-height:0;background:#050505}
  .wconvo{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px 24px;scroll-behavior:smooth}
  .wconvo::-webkit-scrollbar{width:0}
  .wdock{flex:none;border-top:1px solid rgba(255,255,255,.07);background:#0a0a0a;padding:14px 18px;min-height:84px;
    display:flex;flex-direction:column;justify-content:center}
  .wdock .hint{font-size:10px;color:rgba(255,255,255,.38);margin-top:8px;letter-spacing:.02em}

  /* right workspace pane */
  .wright{min-height:0;overflow-y:auto;background:#080808;padding:22px 24px;scroll-behavior:smooth}
  .wright::-webkit-scrollbar{width:0}

  /* bubbles */
  .wb{font-size:14px;line-height:1.6;max-width:92%;padding:12px 16px;border-radius:16px;opacity:0}
  .wb.in{animation:bubbleIn .5s var(--ease) both}
  .wb.roxy{align-self:flex-start;background:
      radial-gradient(120% 100% at 50% -20%,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 50%),
      rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.78);
      border-bottom-left-radius:6px;font-weight:400}
  .wb.roxy b{color:#fff;font-weight:600}
  .wb.roxy .lead{font-size:16px;font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.3}
  .wb.user{align-self:flex-end;background:var(--green);color:#161510;font-weight:600;max-width:78%;
      border-bottom-right-radius:6px;box-shadow:0 4px 16px -4px rgba(168,255,53,.35);white-space:pre-line;text-align:left}
  @keyframes bubbleIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .wtyping{align-self:flex-start;display:flex;gap:5px;padding:6px 2px}
  .wtyping span{width:6px;height:6px;border-radius:50%;background:var(--green);animation:td 1.3s infinite}
  .wtyping span:nth-child(2){animation-delay:.16s}
  .wtyping span:nth-child(3){animation-delay:.32s}
  @keyframes td{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-5px);opacity:.85}}

  /* dock controls */
  .wzip{display:flex;gap:8px;align-items:center;background:#0c0c0c;border:1px solid rgba(255,255,255,.10);
    border-radius:12px;padding:6px;transition:border-color .25s,box-shadow .25s}
  .wzip.focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(168,255,53,.12)}
  .wzip input{flex:1;background:transparent;border:0;outline:0;font-family:inherit;font-size:14px;font-weight:600;
    color:#fff;padding:10px 12px;min-width:0}
  .wzip input::placeholder{color:rgba(255,255,255,.4)}
  .wchoices{display:flex;flex-wrap:wrap;gap:8px}
  .wbtn{background:var(--green);color:#161510;border:0;border-radius:10px;padding:0 18px;height:42px;font-weight:700;
    font-size:13.5px;font-family:inherit;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
    box-shadow:0 4px 14px -4px rgba(168,255,53,.3);transition:transform .14s,background .2s,box-shadow .2s}
  .wbtn.hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(168,255,53,.4)}
  .wbtn.ghost{background:transparent;color:var(--green);border:1px solid var(--green);box-shadow:none}
  .wbtn.ghost.hover{background:rgba(168,255,53,.08)}
  .wsel{display:flex;align-items:center;gap:8px;background:#0c0c0c;border:1px solid rgba(255,255,255,.10);
    border-radius:12px;padding:6px 6px 6px 14px;color:rgba(255,255,255,.55);font-size:13.5px;font-weight:600}
  .wsel .chev{margin-left:auto;color:rgba(255,255,255,.4);padding:0 8px}

  /* right engine panel */
  .epanel{border-radius:16px;border:1px solid rgba(255,255,255,.07);padding:20px;
    background:radial-gradient(120% 60% at 50% 0%,rgba(255,255,255,.04) 0%,transparent 50%),rgba(255,255,255,.015);
    opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
  .epanel.in{opacity:1;transform:none}
  .ep-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
  .ep-head .rd{width:7px;height:7px;border-radius:50%;background:var(--green)}
  .ep-head .nm{font-size:14px;font-weight:600;color:#fff}
  .ep-head .rl{font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.04em}
  .ep-head .sp{flex:1}
  .ep-head .run{display:inline-flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--green);font-weight:600}
  .ep-head .run .ld{width:6px;height:6px;border-radius:50%;background:var(--green);animation:breath 1.8s ease-out infinite}
  .epz{margin-top:18px}
  .epz-l{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:rgba(255,255,255,.5);margin-bottom:12px}
  .epd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.05);opacity:0}
  .epd.in{animation:fadeRowIn .4s ease both}
  @keyframes fadeRowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .epd .k{font-size:10.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.04em;font-weight:600;flex:none}
  .epd .v{font-size:12.5px;color:#fff;font-weight:500;text-align:right}
  .eprow{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:11px 0;
    border-bottom:1px solid rgba(255,255,255,.05);opacity:0}
  .eprow.in{animation:fadeRowIn .45s ease both}
  .eprow .pn{font-size:12.5px;font-weight:600;color:#fff;line-height:1.3}
  .eprow .ps{font-size:11px;color:var(--green);font-weight:600;margin-top:2px}
  .eprow .ps.mute{color:rgba(255,255,255,.45);font-weight:500}
  .eprow .pa{font-size:13px;font-weight:700;color:var(--green);white-space:nowrap;padding-top:1px}
  .eprow .pa.dim{color:rgba(255,255,255,.5);font-weight:500;font-size:12px}
  .eptotal{display:flex;align-items:baseline;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
  .eptotal .tl{font-size:10.5px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .eptotal .ta{font-size:20px;font-weight:700;color:var(--green);letter-spacing:-.02em}
  .eprec{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.7);margin-top:7px}
  .eprec b{color:var(--green-deep);font-weight:700}

  /* scanning think lines */
  .wthink{display:flex;flex-direction:column;gap:7px;padding:4px 0}
  .wthink .tl{font-size:11px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:8px;
    opacity:0;animation:tlineIn .35s ease forwards}
  .wthink .tl::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.6}
  @keyframes tlineIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}

  /* reveal */
  .rkv{opacity:0}
  .rkv.in{animation:bubbleIn .5s var(--ease) both}
  .rkv .kick{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green);
    display:flex;align-items:center;gap:8px;margin-bottom:10px}
  .rkv .kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
  .rkv .h1{font-size:26px;font-weight:700;letter-spacing:-.025em;color:#fff;line-height:1.15;margin-bottom:6px}
  .rkv .for{font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:18px}
  .rkv .tl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:rgba(255,255,255,.5);margin-bottom:4px}
  .rkv .ta{font-size:46px;font-weight:700;letter-spacing:-.03em;color:var(--green);line-height:1;margin-bottom:8px}
  .rkv .rec{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.72)}
  .rkv .rec b{color:var(--green-deep);font-weight:700}

  /* checkout / build card */
  .co{margin-top:18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);padding:18px;background:#0c0c0c;
    opacity:0;transition:opacity .4s ease,transform .4s ease}
  .co.in{animation:bubbleIn .5s var(--ease) both}
  .co.out{opacity:0;transform:translateY(-12px)}
  .co .ct{font-size:13px;font-weight:700;color:#fff;margin-bottom:6px}
  .co .cs{font-size:12px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:14px}
  .co .crow{display:flex;align-items:center;gap:10px}
  .co .price{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em}
  .co .price span{font-size:12px;color:rgba(255,255,255,.5);font-weight:500}

  /* ===== FULL-VIEW REBATE HUB — the separate /hub/{token} page, represented in-frame ===== */
  #hubFull{position:absolute;inset:0;background:#000;display:flex;flex-direction:column;
    opacity:0;pointer-events:none;z-index:40;transition:opacity .55s ease;}
  #hubFull.show{opacity:1;pointer-events:auto;}

  /* Hub's own top navigation (mirrors rebate-hub.html .nav + .nav-inner) */
  .hfn{flex:none;padding:16px 28px;background:#000;border-bottom:1px solid rgba(255,255,255,.09);}
  .hfn-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 28px;height:38px;}
  .hfn .hwm{display:flex;align-items:center;gap:10px;min-width:0;}
  .hfn .hwm svg{width:18px;height:28px;flex:none;}
  .hfn .hwm .hwm-t{font-family:"TurboEV",Inter,sans-serif;font-size:25px;color:#fff;line-height:1;}
  .hfn .hfn-r{display:flex;align-items:center;gap:18px;flex:none;}
  .hfn .hclose{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap;}
  .hfn .hclose b{color:#fff;font-weight:700;}
  .hfn .hclose .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;animation:breath 2.4s ease-out infinite;}
  .hfn .hexp{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.12);color:#fff;font-size:12px;font-weight:600;
    padding:9px 14px;border-radius:9px;font-family:inherit;cursor:pointer;}
  .hfn .hexp svg{width:13px;height:13px;}

  /* Hub scroll body (mirrors main.page padding) */
  .hfs{flex:1;min-height:0;overflow-y:auto;padding:40px 28px 52px;scroll-behavior:smooth;}
  .hfs::-webkit-scrollbar{width:0;}

  /* HERO — port of the real .pa-hero gradient card */
  .pa-hero{position:relative;margin-bottom:24px;border:1px solid rgba(255,255,255,.09);border-radius:24px;overflow:hidden;
    background:
      radial-gradient(120% 140% at 12% -20%, rgba(168,255,53,0.13) 0%, rgba(168,255,53,0.03) 34%, rgba(168,255,53,0) 64%),
      linear-gradient(180deg, #161A13 0%, #101210 58%, #0D0F0C 100%);}
  .pa-hero::after{content:"";position:absolute;inset:0 0 auto;height:1px;
    background:linear-gradient(90deg, transparent, rgba(168,255,53,0.5) 22%, rgba(168,255,53,0.14) 60%, transparent);}
  .pa-hero-inner{padding:44px 44px 38px;}
  .pa-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.55);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
  .pa-eyebrow .pa-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;animation:breath 2.4s ease-out infinite;}
  .pa-greet{font-size:28px;font-weight:600;color:#fff;margin:0 0 8px;line-height:1.3;letter-spacing:-.01em;}
  .pa-values{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:30px;margin:20px 0 10px;}
  .pa-value{min-width:0;}
  .pa-value + .pa-value{border-left:1px solid rgba(255,255,255,.09);padding-left:30px;}
  .pa-value-l{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px;}
  .pa-value-l svg{width:15px;height:15px;color:var(--green);flex-shrink:0;}
  /* Kept in step with hub-layout.css (2026-10-21): both render the same Hub hero, and the
     figure was the same oversized value in both files. Two copies of one type size in two
     stylesheets is how they drift apart. */
  .pa-figure{font-size:clamp(38px,4.4vw,62px);font-weight:700;line-height:1.05;letter-spacing:-.035em;
    color:var(--green);margin:0;}
  .pa-figure .pa-rng{white-space:nowrap;}
  .pa-value-s{font-size:14px;color:rgba(255,255,255,.72);margin-top:12px;line-height:1.45;}
  .pa-sub{font-size:15px;color:rgba(255,255,255,.75);line-height:1.55;margin:8px 0 16px;max-width:560px;}
  .pa-vehicle{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;
    color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.1);border-radius:999px;
    padding:6px 14px;background:rgba(255,255,255,.03);}
  .pa-facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.09);}
  .pa-fact{padding:20px 24px;border-right:1px solid rgba(255,255,255,.09);}
  .pa-fact:last-child{border-right:none;}
  .pa-fact-l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:rgba(255,255,255,.55);margin-bottom:6px;}
  .pa-fact-v{font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2;margin-bottom:4px;}
  .pa-fact-v.warn{color:#ffce6b;}
  .pa-fact-s{font-size:12px;color:rgba(255,255,255,.5);line-height:1.4;}
  .pa-act{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    padding:18px 24px;border-top:1px solid rgba(255,255,255,.09);background:rgba(168,255,53,.04);}
  .pa-act-t{font-size:14px;color:rgba(255,255,255,.72);line-height:1.5;margin:0;flex:1;min-width:220px;}
  .pa-act-t b{color:#fff;font-weight:600;}
  .pa-cta{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:var(--on-green);
    font-size:14px;font-weight:600;padding:12px 22px;border-radius:12px;white-space:nowrap;cursor:pointer;
    font-family:inherit;border:0;}

  /* snapshot note (between hero and tabs) */
  .snapshot-info{display:flex;align-items:center;justify-content:center;padding:12px 20px;
    border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.035);margin-bottom:36px;}
  .snapshot-info-text{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;text-align:center;}
  .snapshot-info-text strong{color:rgba(255,255,255,.78);font-weight:600;}
  /* tabs spread across full width (port of real .hub-tabs) */
  .hub-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    border-bottom:1px solid rgba(255,255,255,.09);margin-bottom:0;}
  .hub-tab{font-family:inherit;font-size:14px;font-weight:600;color:rgba(255,255,255,.55);
    padding:12px 20px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;
    margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap;text-align:center;}
  .hub-tab:hover{color:rgba(255,255,255,.8);}
  .hub-tab.active{color:var(--green);border-bottom-color:var(--green);}
  .hub-page{display:none;padding-top:28px;}
  .hub-page.active{display:block;animation:bubbleIn .4s var(--ease) both;}
  .ph-head{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;}
  .ph-head h2{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.015em;line-height:1.15;}
  .ph-head .meta{margin-left:auto;font-size:12px;color:rgba(255,255,255,.5);white-space:nowrap;}
  /* overview */
  .pcard{border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;background:#0c0c0c;margin-bottom:16px;}
  .psec{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);
    padding:16px 20px 0;display:flex;align-items:center;gap:7px;}
  .prow{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid rgba(255,255,255,.05);}
  .prow .pn{font-size:14px;font-weight:600;color:#fff;}
  .prow .pb{font-size:10px;font-weight:700;letter-spacing:.05em;color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:3px 7px;white-space:nowrap}
  .prow .pa{margin-left:auto;font-size:14px;font-weight:700;color:var(--green);white-space:nowrap}
  .prow.total{background:rgba(168,255,53,.06)}
  .prow.total .pn{color:var(--green);font-weight:700}
  .pfoot{font-size:11.5px;color:rgba(255,255,255,.45);padding:4px 2px}
  /* roadmap */
  .rm-intro{border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:18px 20px;background:#0c0c0c;margin-bottom:18px}
  .rm-intro h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:8px}
  .rm-intro p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55}
  .rm-h{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
  .rm-h h2{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.015em}
  .rm-h .meta{margin-left:auto;font-size:11.5px;color:rgba(255,255,255,.5);text-align:right}
  .rm-group{font-size:15px;font-weight:700;color:#fff;margin:8px 0 8px}
  .rm-group-sub{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:14px;line-height:1.5}
  .rm-step{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:15px 16px 14px;margin-bottom:12px;background:#0c0c0c}
  .rm-step.critical{border-color:rgba(255,255,180,.28)}
  .rm-step .st-top{display:flex;align-items:center;gap:11px;margin-bottom:7px}
  .rm-step .sn{width:24px;height:24px;border-radius:50%;background:rgba(168,255,53,.14);color:var(--green);
    font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
  .rm-step .stt{font-size:14px;font-weight:700;color:#fff}
  .rm-step .std{font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.55;margin-bottom:10px}
  .rm-step .prot{font-size:11px;color:rgba(255,255,255,.6);margin-bottom:9px}
  .rm-step .prot b{color:var(--green);font-weight:700}
  .rm-step .chk{display:flex;align-items:center;gap:9px;font-size:11.5px;color:rgba(255,255,255,.65);margin-bottom:6px}
  .rm-step .chk::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8FF35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
  .rm-step .warn{display:flex;gap:9px;margin-top:11px;border-radius:10px;background:rgba(255,190,60,.09);
    border:1px solid rgba(255,190,60,.22);padding:11px 13px;font-size:11px;color:rgba(255,255,255,.72);line-height:1.5}
  .rm-step .warn .wi{flex:none;margin-top:1px}
  .rm-step .warn b{color:#ffce6b;font-weight:700}
  .rm-step .lnk{margin-top:11px;font-size:11.5px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
  /* dealers */
  .dl-group{border:1px solid rgba(255,255,255,.1);border-radius:14px;background:#0c0c0c;margin-bottom:14px;overflow:hidden}
  .dl-group.part{border-left:3px solid var(--green)}
  .dl-group.other{border-left:3px solid #ffb340}
  .dl-gh{display:flex;align-items:center;gap:10px;padding:15px 18px 0}
  .dl-gh .gi{flex:none}
  .dl-gh .gt{font-size:13px;font-weight:700;color:#fff}
  .dl-gh .gc{margin-left:auto;font-size:11px;font-weight:700;color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.16);border-radius:999px;width:23px;height:23px;display:flex;align-items:center;justify-content:center}
  .dl-gs{padding:8px 18px 14px;font-size:11px;color:rgba(255,255,255,.5);line-height:1.5}
  .dl-card{border-top:1px solid rgba(255,255,255,.07)}
  .dl-card .dl-row{width:100%;display:flex;align-items:center;gap:10px;padding:14px 18px;background:transparent;cursor:pointer;text-align:left}
  .dl-card .dl-name{font-size:13px;font-weight:700;color:#fff}
  .dl-card .dl-chev{margin-left:auto;width:9px;height:9px;border-right:2px solid rgba(255,255,255,.45);
    border-bottom:2px solid rgba(255,255,255,.45);transform:rotate(45deg);transition:transform .25s}
  .dl-card.is-open .dl-chev{transform:rotate(-135deg)}
  .dl-detail{display:none;padding:0 18px 16px;font-size:11.5px;color:rgba(255,255,255,.6);line-height:1.55}
  .dl-card.is-open .dl-detail{display:block;animation:bubbleIn .35s var(--ease) both}
  .dl-detail .daddr{margin-bottom:6px}
  .dl-detail .dph{color:var(--green);font-weight:700;margin-bottom:8px}
  .dl-detail .dprog{margin-bottom:9px}
  .dl-detail .dprog b{color:var(--green);font-weight:600}
  .dl-detail .ddir{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.75);font-size:11.5px;margin-bottom:7px}
  .dl-detail .dsrc{color:rgba(255,255,255,.5);font-size:11px;text-decoration:underline}
  .dl-detail .dchk{color:rgba(255,255,255,.4);font-size:10.5px;margin-left:8px}
  /* documents */
  .doc-row{display:flex;gap:12px;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.07)}
  .doc-row .cb{width:17px;height:17px;border:1.5px solid rgba(255,255,255,.3);border-radius:5px;flex:none;margin-top:2px}
  .doc-row .dn{font-size:13px;font-weight:700;color:#fff;margin-bottom:4px}
  .doc-row .dneed{font-size:10.5px;color:rgba(255,255,255,.5);margin-bottom:3px}
  .doc-row .ddesc{font-size:11px;color:rgba(255,255,255,.6);line-height:1.5}
  /* charging */
  .ch-sec{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:6px 0 10px}
  .ch-card{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:15px 16px;background:#0c0c0c;margin-bottom:12px}
  .ch-card .ctop{display:flex;align-items:center;gap:10px}
  .ch-card .cn{font-size:14px;font-weight:700;color:#fff}
  .ch-card .cbad{font-size:9px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:3px 7px}
  .ch-card .ccta{margin-left:auto;font-size:11px;font-weight:700;border-radius:9px;padding:9px 15px;white-space:nowrap;display:flex;align-items:center;gap:7px}
  .ch-card .ccta.primary{background:var(--green);color:#161510}
  .ch-card .ccta.ghost{color:#fff;border:1px solid rgba(255,255,255,.22)}
  .ch-card .csp{font-size:11px;color:rgba(255,255,255,.6);margin:11px 0 11px}
  .ch-card .why{border:1px solid rgba(255,255,255,.1);border-radius:11px;padding:12px 14px}
  .ch-card .why .wl{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px}
  .ch-card .why .wt{font-size:11px;color:rgba(255,255,255,.65);line-height:1.55}
  .ch-disclose{font-size:10px;color:rgba(255,255,255,.4);line-height:1.5;margin:2px 0 18px}

  /* ===== full-view type scale (these shared page cards render larger in the full Hub) ===== */
  #hubFull .rm-step{border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:17px 18px 15px;margin-bottom:14px;}
  #hubFull .rm-step.critical{border-color:rgba(255,180,180,.28);}
  #hubFull .rm-step .st-top{gap:12px;margin-bottom:9px;}
  #hubFull .rm-step .sn{width:27px;height:27px;font-size:13px;}
  #hubFull .rm-step .stt{font-size:15px;}
  #hubFull .rm-step .std{font-size:13px;margin-bottom:11px;}
  #hubFull .rm-step .prot{font-size:12px;margin-bottom:10px;}
  #hubFull .rm-step .chk{font-size:12.5px;gap:10px;margin-bottom:7px;}
  #hubFull .rm-step .chk::before{width:15px;height:15px;}
  #hubFull .rm-step .warn{font-size:12px;padding:12px 14px;gap:10px;margin-top:12px;border-radius:11px;}
  #hubFull .rm-step .lnk{font-size:12.5px;margin-top:12px;}
  #hubFull .dl-group{border-radius:16px;margin-bottom:16px;}
  #hubFull .dl-gh{padding:17px 20px 0;gap:11px;}
  #hubFull .dl-gh .gt{font-size:14px;}
  #hubFull .dl-gh .gc{width:25px;height:25px;font-size:12px;}
  #hubFull .dl-gs{padding:9px 20px 15px;font-size:12px;}
  #hubFull .dl-card .dl-row{padding:16px 20px;gap:11px;}
  #hubFull .dl-card .dl-name{font-size:14px;}
  #hubFull .dl-detail{padding:0 20px 17px;font-size:12.5px;}
  #hubFull .dl-detail .ddir{font-size:12.5px;margin-bottom:8px;}
  #hubFull .dl-detail .dsrc{font-size:12px;}
  #hubFull .dl-detail .dchk{font-size:11.5px;}
  #hubFull .doc-row{padding:17px 2px;gap:13px;}
  #hubFull .doc-row .cb{width:18px;height:18px;}
  #hubFull .doc-row .dn{font-size:14px;margin-bottom:5px;}
  #hubFull .doc-row .dneed{font-size:11.5px;margin-bottom:4px;}
  #hubFull .doc-row .ddesc{font-size:12px;}
  #hubFull .ch-sec{font-size:11.5px;margin:8px 0 12px;}
  #hubFull .ch-card{border-radius:16px;padding:17px 18px;margin-bottom:14px;}
  #hubFull .ch-card .cn{font-size:15px;}
  #hubFull .ch-card .cbad{font-size:10px;padding:4px 8px;}
  #hubFull .ch-card .ccta{font-size:12px;padding:10px 16px;border-radius:10px;}
  #hubFull .ch-card .csp{font-size:12px;margin:12px 0;}
  #hubFull .ch-card .why{border-radius:12px;padding:13px 15px;}
  #hubFull .ch-card .why .wl{font-size:10px;margin-bottom:7px;}
  #hubFull .ch-card .why .wt{font-size:12px;}
  #hubFull .ch-disclose{font-size:11px;margin:4px 0 20px;}

  /* playback controls */
  .watch-ctrl{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:34px}
  .replay{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--hair);
    border-radius:999px;padding:11px 22px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);
    cursor:pointer;transition:border-color .2s,background .2s}
  .replay:hover{border-color:var(--green-deep);background:rgba(168,255,53,.06)}
  .replay svg{width:15px;height:15px}
  .prog{flex:0 1 320px;height:4px;border-radius:4px;background:var(--hair);overflow:hidden}
  .prog .pf{height:100%;width:0;background:var(--green-deep);border-radius:4px}
  .watch-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#B9FF61 0%,#A8FF35 48%,#93EC17 100%);
    color:#161510;font-weight:700;font-size:15px;border:0;border-radius:999px;padding:14px 28px;cursor:pointer;
    text-decoration:none;box-shadow:0 8px 22px -8px rgba(168,255,53,.6)}
  .watch-cta:hover{transform:translateY(-1px)}

  /* cursor */
  #wcur{position:absolute;z-index:60;width:22px;height:22px;pointer-events:none;left:0;top:0;
    transition:opacity .2s;will-change:transform}
  #wcur svg{width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

  @media (prefers-reduced-motion:reduce){
    #wcur{display:none}
  }


/* ---------------------------------------------------------------------------
 * #3200: two helpers that replaced inline `style` attributes, because the
 * landing is a React route under the STRICT CSP (`style-src 'self'`, middleware
 * `REACT_STYLE`) and an inline style attribute in server-rendered markup or in
 * an injected HTML string is refused outright.
 * ------------------------------------------------------------------------- */
.agent-prompt .ap-arrow{color:var(--green)}
.tl-1{animation-delay:0s}
.tl-2{animation-delay:.3s}
.tl-3{animation-delay:.6s}
.tl-4{animation-delay:.9s}
.crow .sp{flex:1}
.fit-beat div.fb-row{cursor:default}