:root {
      --paper: #f6f3eb;
      --surface: #fffdf8;
      --ink: #101114;
      --muted: #67665f;
      --line: rgba(16, 17, 20, .14);
      --blue: #0a43d7;
      --blue-dark: #062c91;
      --blue-soft: #dfe8ff;
      --yellow: #ffd84d;
      --pink: #f34ed5;
      --green: #66d5a4;
      --radius-sm: 16px;
      --radius: 28px;
      --radius-lg: 44px;
      --shadow: 0 24px 70px rgba(16, 17, 20, .1);
      --shadow-sm: 0 10px 30px rgba(16, 17, 20, .07);
      --max: 1200px;
      --ease: cubic-bezier(.22, .61, .36, 1);
      /* motion scale — every transition below resolves to one of these */
      --ease-out: cubic-bezier(.16, 1, .3, 1);
      --dur-1: .14s;
      --dur-2: .26s;
      --dur-3: .42s;
      --dur-4: .62s;
      --bar-h: 42px;
      --sand: #e9e3d5;
    }

    * { box-sizing: border-box; }
    /* class-based display rules would otherwise beat the UA [hidden] rule */
    [hidden] { display: none !important; }
    html { scroll-behavior: smooth; }
    /* fixed bar + nav must not cover the top of a jumped-to section */
    :target, [id] { scroll-margin-top: calc(104px + var(--bar-h)); }
    main { padding-top: var(--bar-h); }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      background:
        radial-gradient(circle at 7% 7%, rgba(255, 216, 77, .22), transparent 24rem),
        radial-gradient(circle at 92% 32%, rgba(10, 67, 215, .1), transparent 28rem);
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { color: inherit; }
    h1, h2, h3, h4, h5, p { margin-top: 0; }
    h1, h2, h3, h4, h5 {
      font-family: "Archivo Black", Archivo, sans-serif;
      letter-spacing: -.055em;
      line-height: .95;
      text-wrap: balance;
    }
    p { color: var(--muted); line-height: 1.65; text-wrap: pretty; }

    /* keyboard focus — visible on both light and dark panels */
    :focus-visible {
      outline: 3px solid var(--blue);
      outline-offset: 3px;
      border-radius: 4px;
    }
    .hero :focus-visible, .channels :focus-visible,
    .journey :focus-visible, .bacard.after :focus-visible,
    .site-footer :focus-visible, .plan.is-featured :focus-visible { outline-color: var(--yellow); }

    .skip-link {
      position: absolute;
      top: -60px;
      left: 16px;
      z-index: 200;
      padding: 12px 18px;
      border-radius: 0 0 12px 12px;
      background: var(--ink);
      color: #fff;
      font-size: .85rem;
      font-weight: 800;
      transition: top var(--dur-2) var(--ease);
    }
    .skip-link:focus { top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    .wrap { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
    .section { padding: 112px 0; }
    .center { text-align: center; }
    .section-head { max-width: 920px; margin: 0 auto 58px; }
    .section-head h2 { margin-bottom: 20px; font-size: clamp(2.1rem, 4.5vw, 4.4rem); }
    .section-head p { max-width: 640px; margin-inline: auto; font-size: 1.1rem; text-wrap: balance; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      padding: 9px 14px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .68);
      font: 700 .7rem/1 "Space Mono", monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
      box-shadow: 0 8px 30px rgba(16, 17, 20, .05);
    }
    .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
    .btn {
      display: inline-flex;
      min-height: 52px;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 0 24px;
      border: 1px solid var(--ink);
      border-radius: 999px;
      background: transparent;
      font-size: .9rem;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
      transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
    /* press reads as pressed-in, and resolves faster than the hover it interrupts */
    .btn:active { transform: translateY(1px) scale(.985); box-shadow: none; transition-duration: var(--dur-1); }
    .btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); }
    .btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 12px 26px rgba(10, 67, 215, .3); }
    .btn-dark { background: var(--ink); color: #fff; }
    .btn-dark:hover { box-shadow: 0 12px 26px rgba(16, 17, 20, .3); }
    .btn-yellow { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
    .btn-yellow:hover { background: #ffe173; border-color: #ffe173; box-shadow: 0 12px 28px rgba(255, 216, 77, .38); }
    .btn-lg { min-height: 60px; padding-inline: 30px; }

    /* The entrance runs as an animation, not a transition, on purpose.
       Cards like .channel-card / .setup-card / .price-card declare their own
       `transition` for hover; because `transition` is a shorthand and those rules
       come later with equal specificity, they used to wipe out the reveal's
       opacity transition entirely — so those cards snapped in instead of fading.
       Animation and transition are separate property groups, so entrance and
       hover no longer compete. No fill-mode: once the entrance ends, transform
       reverts to the element's own value and hover transforms work normally. */
    @keyframes reveal-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
    [data-reveal] { opacity: 0; }
    /* `backwards` holds the from-state through the stagger delay (otherwise a
       delayed card would flash in at full opacity before dropping to 0), while
       still releasing transform back to the element once the entrance finishes. */
    [data-reveal].is-visible { opacity: 1; animation: reveal-rise var(--dur-4) var(--ease-out) backwards; }

    /* Grids cascade instead of landing as one block. Only the three grids whose
       children already carry [data-reveal] individually; everything else keeps
       the single entrance so the page never feels uniformly animated. */
    .channel-grid > [data-reveal]:nth-child(2),
    .setup-grid   > [data-reveal]:nth-child(2),
    .journey-rail > [data-reveal]:nth-child(2) { animation-delay: .07s; }
    .channel-grid > [data-reveal]:nth-child(3),
    .setup-grid   > [data-reveal]:nth-child(3),
    .journey-rail > [data-reveal]:nth-child(3) { animation-delay: .14s; }
    .channel-grid > [data-reveal]:nth-child(4),
    .journey-rail > [data-reveal]:nth-child(4) { animation-delay: .21s; }
    .journey-rail > [data-reveal]:nth-child(5) { animation-delay: .28s; }
    .journey-rail > [data-reveal]:nth-child(6) { animation-delay: .35s; }
    .journey-rail > [data-reveal]:nth-child(7) { animation-delay: .42s; }

    /* pre-launch announcement bar — fixed above the nav */
    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 130;
      display: flex;
      height: var(--bar-h);
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 0 16px;
      background: var(--ink);
      color: #fff;
      font: 700 .66rem/1 "Space Mono", monospace;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .top-bar-label { display: inline-flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .8); }
    .top-bar-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: pulse 2.2s ease-in-out infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
    .top-bar a { display: inline-flex; align-items: center; gap: 7px; color: var(--yellow); border-bottom: 1px solid transparent; transition: border-color var(--dur-2) var(--ease); }
    .top-bar a:hover { border-bottom-color: var(--yellow); }

    /* navigation */
    .site-nav {
      position: fixed;
      top: var(--bar-h);
      left: 0;
      right: 0;
      z-index: 100;
      padding: 18px 0;
      pointer-events: none;
      transition: padding var(--dur-2) var(--ease);
    }
    .nav-shell {
      display: flex;
      min-height: 66px;
      align-items: center;
      gap: 30px;
      padding: 8px 10px 8px 18px;
      border: 1px solid transparent;
      border-radius: 20px;
      background: transparent;
      color: #fff;
      box-shadow: none;
      backdrop-filter: blur(0);
      pointer-events: auto;
      transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), backdrop-filter var(--dur-2) var(--ease);
    }
    .site-nav .nav-shell, .hero-grid { width: calc(100% - clamp(48px, 6vw, 96px)); max-width: none; }
    .site-nav.is-scrolled { padding: 12px 0; }
    .scroll-progress { position: fixed; top: var(--bar-h); left: 0; z-index: 120; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow)); pointer-events: none; }
    .site-nav.is-scrolled .nav-shell {
      border-color: rgba(255, 255, 255, .62);
      background: rgba(246, 243, 235, .76);
      color: var(--ink);
      box-shadow: 0 14px 50px rgba(16, 17, 20, .12);
      backdrop-filter: blur(22px) saturate(135%);
    }
    .logo { display: inline-flex; align-items: center; gap: 10px; font-family: "Archivo Black", sans-serif; font-size: 1.4rem; letter-spacing: -.06em; }
    .logo-mark { display: block; width: 38px; height: 38px; object-fit: contain; flex: 0 0 auto; }
    .nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
    .nav-links > a { position: relative; font-size: .82rem; font-weight: 700; white-space: nowrap; opacity: .82; transition: opacity var(--dur-2) var(--ease); }
    .nav-links > a:hover, .nav-links > a.is-current { opacity: 1; }
    .nav-links > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: rgba(255, 255, 255, .9); transition: right var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
    .nav-links > a:not(.btn):hover::after, .nav-links > a.is-current::after { right: 0; }
    .nav-actions { display: flex; gap: 8px; }
    .nav-actions .btn { min-height: 48px; padding-inline: 20px; }
    .nav-actions .btn:not(.btn-primary) { border-color: rgba(255, 255, 255, .72); }
    .site-nav.is-scrolled .nav-links > a:not(.btn)::after { background: var(--blue); }
    .site-nav.is-scrolled .nav-actions .btn:not(.btn-primary) { border-color: rgba(16, 17, 20, .32); }

/* inner pages open on the cream background, so the bar starts dark-on-light */
.site-nav.nav-inner .nav-shell { color: var(--ink); }
.site-nav.nav-inner .nav-links > a:not(.btn)::after { background: var(--blue); }
.site-nav.nav-inner .nav-actions .btn:not(.btn-primary) { border-color: rgba(16, 17, 20, .32); }
    .menu-toggle {
      display: none;
      align-items: center;
      gap: 9px;
      margin-left: auto;
      padding: 10px 14px;
      border: 1px solid currentColor;
      border-radius: 999px;
      background: transparent;
      font-size: .8rem;
      font-weight: 800;
      cursor: pointer;
    }
    .menu-toggle .bars { display: grid; gap: 4px; width: 15px; }
    .menu-toggle .bars i { height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
    .menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* hero */
    .hero {
      --hero-accent: var(--yellow);
      --hero-accent-two: #b0c3ff;
      --hero-cta: var(--yellow);
      --hero-check: #93b2ff;
      --hero-blue-mid: #7ea2ff;
      --hero-blue-light: #b2c6ff;
      padding: 0;
    }
    .hero-shell {
      position: relative;
      min-height: calc(100svh - var(--bar-h));
      overflow: hidden;
      border-radius: 0;
      background: var(--blue);
      color: #fff;
      isolation: isolate;
    }
    .hero-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, rgba(5, 18, 61, .97) 0%, rgba(5, 18, 61, .86) 30%, rgba(5, 18, 61, .34) 52%, rgba(5, 18, 61, .03) 100%);
    }
    .hero-visual {
      position: absolute;
      inset: 0;
      z-index: -2;
      /* relative to this stylesheet (assets/), not to the page */
      background: url("hero-lifestyle-v2.jpg") 62% center / cover no-repeat;
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 56px; align-items: center; min-height: calc(100svh - var(--bar-h)); padding: 132px 0 64px; }
    .hero-copy { position: relative; z-index: 2; max-width: 520px; }
    .hero h1 { max-width: 520px; margin-bottom: 18px; font-size: clamp(3rem, 4.4vw, 4.55rem); line-height: .98; letter-spacing: -.06em; }
    .hero h1 span { display: block; }
    .hero h1 .hero-title-accent { color: var(--hero-accent); }
    .hero-intro { display: grid; max-width: 500px; gap: 6px; margin-bottom: 22px; font-size: .96rem; line-height: 1.5; }
    .hero-intro span { color: rgba(255, 255, 255, .68); }
    .hero-intro strong { color: rgba(255, 255, 255, .94); font-weight: 600; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
    .hero-actions .btn { min-height: 46px; padding-inline: 17px; }
    .hero .btn-yellow { border-color: var(--yellow); background: var(--hero-cta); color: var(--ink); box-shadow: 0 12px 30px rgba(255, 216, 77, .24); }

    .hero-status-stack { position: absolute; right: 0; bottom: 64px; z-index: 2; display: grid; width: min(100%, 310px); gap: 12px; }
    .hero-status-card { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 18px; background: rgba(255, 255, 255, .88); color: var(--ink); box-shadow: 0 18px 48px rgba(5, 18, 61, .2); backdrop-filter: blur(14px); }
    .hero-status-card:nth-child(1) { --card-x: -34px; }
    .hero-status-card:nth-child(3) { --card-x: -18px; }
    .hero-status-card { transform: translateX(var(--card-x, 0px)); }
    .hero-status-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px; background: var(--pink); color: #fff; font-weight: 900; }
    .hero-status-card:nth-child(2) .hero-status-mark { background: var(--yellow); color: var(--ink); }
    .hero-status-card:nth-child(3) .hero-status-mark { background: var(--green); color: var(--ink); }
    .hero-status-card small { display: block; margin-bottom: 3px; color: #5f626d; font: 700 .62rem/1.2 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .hero-status-card strong { font-size: .9rem; }

    /* ---- hero entrance sequence ----------------------------------------
       The hero is above the fold, so this runs on load rather than through
       the [data-reveal] IntersectionObserver (which fired everything at once).
       Order follows the product story: headline, then DM -> payment -> order.
       The global prefers-reduced-motion block near the end of this file
       collapses every animation below to .01ms, landing on the final state. */
    @keyframes hero-line-in {
      from { opacity: 0; transform: translateY(1em); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes hero-rise {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes hero-card-in {
      from { opacity: 0; transform: translate(calc(var(--card-x, 0px) + 48px), 12px) scale(.96); }
      to   { opacity: 1; transform: translate(var(--card-x, 0px), 0) scale(1); }
    }
    @keyframes hero-mark-pop {
      0%   { transform: scale(.5); }
      70%  { transform: scale(1.12); }
      100% { transform: scale(1); }
    }
    @keyframes hero-settle {
      from { transform: scale(1.07); }
      to   { transform: none; }
    }

    /* slow drift on the background photo — adds depth behind the copy */
    .hero-visual { animation: hero-settle 2.4s var(--ease) both; }

    /* headline reveals line by line out of a fixed mask.
       The padding/negative-margin pair gives descenders room inside overflow:hidden. */
    .hero h1 span { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
    .hero h1 i { display: block; font-style: normal; animation: hero-line-in .82s var(--ease) both; }
    .hero h1 span:nth-child(1) i { animation-delay: .15s; }
    .hero h1 span:nth-child(2) i { animation-delay: .28s; }

    .hero-intro   { animation: hero-rise .7s var(--ease) .44s both; }
    .hero-actions { animation: hero-rise .7s var(--ease) .56s both; }

    .hero-status-card { animation: hero-card-in .78s var(--ease) both; }
    .hero-status-card:nth-child(1) { animation-delay: .70s; }
    .hero-status-card:nth-child(2) { animation-delay: .85s; }
    .hero-status-card:nth-child(3) { animation-delay: 1.00s; }
    .hero-status-mark { animation: hero-mark-pop .5s var(--ease) both; }
    .hero-status-card:nth-child(1) .hero-status-mark { animation-delay: .90s; }
    .hero-status-card:nth-child(2) .hero-status-mark { animation-delay: 1.05s; }
    .hero-status-card:nth-child(3) .hero-status-mark { animation-delay: 1.20s; }

    .trust-line { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); border-bottom: 1px solid var(--line); }
    .trust-line > div { min-height: 110px; padding: 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
    .trust-line > div:last-child { border-right: 0; }
    .trust-title { font-family: "Archivo Black", sans-serif; font-size: 1.2rem; letter-spacing: -.03em; }
    .trust-line strong { font-size: 1.65rem; }
    .trust-line small { margin-top: 6px; color: var(--muted); }

    .signal-strip { position: relative; overflow: hidden; padding: 18px 0; background: var(--ink); color: #fff; }
    /* fade the marquee into the edges instead of cutting words in half */
    .signal-strip::before, .signal-strip::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 70px; pointer-events: none; }
    .signal-strip::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
    .signal-strip::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
    .signal-track { display: flex; width: max-content; gap: 48px; animation: signal 34s linear infinite; }
    .signal-strip:hover .signal-track { animation-play-state: paused; }
    .signal-track span { white-space: nowrap; font: 700 .75rem/1 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
    .signal-track b { margin-right: 7px; color: var(--yellow); font-size: 1.05rem; }
    @keyframes signal { to { transform: translateX(-50%); } }

    /* guided feature story — tab rail beside a media stage */
    .how-section { position: relative; }
    .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
    .chip { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .72rem; font-weight: 800; }

    /* scroll-pinned story: the stage sticks while a tall track scrolls past,
       advancing both columns together. Desktop only — mobile stacks instead. */
    .scrolly {
      position: relative;
      margin-top: 60px;
      background: var(--sand);
      border-block: 1px solid rgba(16, 17, 20, .12);
    }
    .scrolly::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(90deg, rgba(16, 17, 20, .05) 1px, transparent 1px),
        linear-gradient(rgba(16, 17, 20, .05) 1px, transparent 1px);
      background-size: 72px 72px;
    }
    .scrolly-track { --steps: 4; position: relative; z-index: 1; height: calc((var(--steps) + .6) * 100svh); }
    .scrolly-stage {
      position: sticky;
      top: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: min(calc(100% - 48px), var(--max));
      height: 100svh;
      margin-inline: auto;
      padding-top: calc(var(--bar-h) + 62px);
    }

    .scrolly-copy {
      position: relative;
      display: grid;
      align-content: center;
      justify-items: start;
      height: 100%;
      padding-right: clamp(28px, 4vw, 64px);
      border-right: 1px solid rgba(16, 17, 20, .12);
    }
    .scrolly-slide {
      grid-area: 1 / 1;
      max-width: 470px;
      opacity: 0;
      transform: translateY(38px);
      transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
      pointer-events: none;
    }
    .scrolly-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
    .step-label { margin-bottom: 18px; color: var(--blue); font: 700 .72rem/1.3 "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
    .scrolly-slide h3 { margin-bottom: 16px; font-size: clamp(1.9rem, 2.9vw, 2.9rem); line-height: 1.02; }
    .scrolly-slide p { margin: 0; font-size: 1rem; }

    .scrolly-rail { position: absolute; left: -26px; top: 50%; display: grid; gap: 9px; transform: translateY(-50%); }
    .scrolly-rail i { display: block; width: 3px; height: 36px; border-radius: 3px; background: rgba(16, 17, 20, .16); transition: background var(--dur-3) var(--ease); }
    .scrolly-rail i.on { background: var(--blue); }

    .scrolly-media { position: relative; display: grid; place-items: center; height: 100%; padding: 0 clamp(24px, 3.4vw, 56px); }
    .stage-media { grid-area: 1 / 1; display: grid; place-items: center; }
    /* real footage replaces the built-in mockup only once a file actually loads */
    .stage-videos { grid-area: 1 / 1; display: none; place-items: center; }
    .scrolly-media.has-video .stage-videos { display: grid; }
    .scrolly-media.has-video .stage-mock { visibility: hidden; }
    .stage-video {
      grid-area: 1 / 1;
      width: min(330px, 100%);
      aspect-ratio: 9 / 19.5;
      max-height: min(74svh, 640px);
      border: 8px solid var(--ink);
      border-radius: 38px;
      background: var(--ink);
      object-fit: cover;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease);
      box-shadow: 0 30px 66px rgba(16, 17, 20, .26);
    }
    .stage-video.is-active { opacity: 1; transform: none; }

    /* phone demo — one frame, four scenes that swap with the active step */
    .demo-window { display: grid; place-items: center; }
    .phone {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      width: 100%;
      max-width: 328px;
      height: 512px;
      overflow: hidden;
      border: 8px solid var(--ink);
      border-radius: 38px;
      background: #fff;
      box-shadow: 0 30px 66px rgba(6, 44, 145, .3);
    }
    .phone-top { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 14px 11px; border-bottom: 1px solid #dbdbdb; background: #fff; }
    /* Instagram's story ring around the avatar */
    .phone-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888); color: #fff; font: 900 .78rem/1 "Archivo Black", sans-serif; box-shadow: inset 0 0 0 2px #fff; }
    .phone-who b { display: block; font-size: .78rem; letter-spacing: -.01em; }
    .phone-who small { display: block; color: #8e8e8e; font-size: .61rem; }
    /* not Instagram chrome — this is the Zippsite annotation, so it stays branded */
    .phone-badge { padding: 5px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font: 700 .53rem/1 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }

    /* Instagram DM surface: the mockup depicts Instagram, so it uses Instagram's
       own greys and blue rather than Zippsite's palette. Brand lives in the page
       around the phone; a fake-coloured Instagram reads as fake. */
    .phone-body { position: relative; display: grid; overflow: hidden; padding: 14px; background: #fff; }
    .scene {
      grid-area: 1 / 1;
      display: flex;
      flex-direction: column;
      gap: 9px;
      opacity: 0;
      pointer-events: none;
    }
    /* The scene container no longer fades as a block — each message arrives on its
       own, so the thread reads as a conversation happening rather than a picture
       of one. Same reason the entrance is an animation and not a transition:
       it must re-fire every time a scene becomes active. */
    @keyframes msg-pop {
      from { opacity: 0; transform: translateY(10px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }
    /* pins the thread to the bottom; anything too tall clips off the top, like a real chat */
    .scene > :first-child { margin-top: auto; }
    .scene.is-active { opacity: 1; pointer-events: auto; }
    .scene.scene-top > :first-child { margin-top: 0; }

    /* message-by-message arrival — desktop stage and the per-slide mobile threads */
    .scene.is-active > *,
    .scrolly-slide.is-active .scene-static > * { animation: msg-pop var(--dur-3) var(--ease-out) backwards; }
    .scene.is-active > :nth-child(1),
    .scrolly-slide.is-active .scene-static > :nth-child(1) { animation-delay: .06s; }
    .scene.is-active > :nth-child(2),
    .scrolly-slide.is-active .scene-static > :nth-child(2) { animation-delay: .20s; }
    .scene.is-active > :nth-child(3),
    .scrolly-slide.is-active .scene-static > :nth-child(3) { animation-delay: .34s; }
    .scene.is-active > :nth-child(4),
    .scrolly-slide.is-active .scene-static > :nth-child(4) { animation-delay: .48s; }
    .scene.is-active > :nth-child(5),
    .scrolly-slide.is-active .scene-static > :nth-child(5) { animation-delay: .62s; }
    .scene.is-active > :nth-child(6),
    .scrolly-slide.is-active .scene-static > :nth-child(6) { animation-delay: .76s; }

    /* per-slide (mobile) threads: same layout as .scene but never toggled */
    .slide-media { display: none; }
    .scene-static { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 9px; }
    .scene-static > :first-child { margin-top: auto; }
    .scene-static.scene-top > :first-child { margin-top: 0; }

    .msg { max-width: 78%; margin: 0; padding: 9px 13px; border-radius: 20px; font-size: .77rem; line-height: 1.4; }
    .msg.in { align-self: flex-start; background: #efefef; color: #000; }
    .msg.out { align-self: flex-end; background: #3797f0; color: #fff; }
    /* consecutive messages from the same side group, the way Instagram stacks them */
    .msg.in + .msg.in { border-top-left-radius: 6px; }
    .msg.in:has(+ .msg.in) { border-bottom-left-radius: 6px; }
    .msg.out + .msg.out { border-top-right-radius: 6px; }
    .msg.out:has(+ .msg.out) { border-bottom-right-radius: 6px; }
    .msg em { display: block; margin-top: 5px; font: 700 .54rem/1 "Space Mono", monospace; font-style: normal; opacity: .72; text-transform: uppercase; letter-spacing: .06em; }
    .msg.in em { opacity: .55; }

    .chat-card { align-self: flex-end; width: 88%; overflow: hidden; border: 1px solid rgba(16, 17, 20, .1); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
    .chat-card-media { position: relative; height: 92px; background: linear-gradient(135deg, #ffd84d 0%, #f9a03f 45%, var(--pink) 100%); }
    .chat-card-media span { position: absolute; left: 9px; bottom: 9px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 700 .53rem/1 "Space Mono", monospace; }
    .chat-card-body { display: grid; gap: 8px; padding: 11px 12px 12px; }
    .chat-card-body strong { font-size: .79rem; letter-spacing: -.01em; }
    .chat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .chat-price { font-family: "Archivo Black", sans-serif; font-size: 1.02rem; letter-spacing: -.05em; }
    .chat-stock { color: #0d7b4b; font: 700 .56rem/1 "Space Mono", monospace; }
    .chat-sizes { display: flex; gap: 5px; }
    .chat-sizes i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--line); border-radius: 7px; font: 700 .57rem/1 Archivo, sans-serif; font-style: normal; }
    .chat-sizes i.gone { border-style: dashed; color: #b3b1a9; text-decoration: line-through; }

    .rule-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px dashed rgba(10, 67, 215, .45); border-radius: 999px; background: rgba(10, 67, 215, .06); color: var(--blue); font: 700 .54rem/1 "Space Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
    .rule-chip::before { content: "⚙"; font-size: .7rem; }

    .pay-card { align-self: flex-end; display: grid; width: 88%; gap: 10px; padding: 14px; border-radius: 17px; background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }
    .pay-head { color: rgba(255, 255, 255, .6); font: 700 .53rem/1 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .pay-amt { font-family: "Archivo Black", sans-serif; font-size: 1.45rem; letter-spacing: -.055em; }
    .pay-methods { display: flex; flex-wrap: wrap; gap: 5px; }
    .pay-methods span { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 8px; font: 700 .53rem/1 "Space Mono", monospace; }
    .pay-cta { display: grid; min-height: 34px; place-items: center; border-radius: 10px; background: var(--yellow); color: var(--ink); font-size: .74rem; font-weight: 800; }
    .paid-pill { align-self: flex-end; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 999px; background: #ddf5e9; color: #0b6b41; font-size: .72rem; font-weight: 800; }
    .paid-pill::before { content: "✓"; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: #0d7b4b; color: #fff; font-size: .6rem; }

    .order-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
    .order-row .oid { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font: 700 .53rem/1 "Space Mono", monospace; }
    .order-row b { display: block; font-size: .73rem; letter-spacing: -.01em; }
    .order-row small { display: block; color: var(--muted); font-size: .61rem; }
    .order-tag { padding: 4px 7px; border-radius: 999px; font: 700 .5rem/1 "Space Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
    .order-tag.paid { background: #ddf5e9; color: #0b6b41; }
    .order-tag.ship { background: var(--blue-soft); color: var(--blue); }
    .order-tag.back { background: #fff0bf; color: #7d5900; }

    .phone-input { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-top: 1px solid #dbdbdb; background: #fff; }
    /* Instagram's composer is a white pill with a grey hairline and a placeholder */
    .phone-input i { flex: 1; display: flex; align-items: center; height: 32px; padding: 0 14px; border: 1px solid #dbdbdb; border-radius: 999px; background: #fff; color: #8e8e8e; font: 400 .72rem/1 Archivo, sans-serif; font-style: normal; }
    .phone-input i::before { content: "Message…"; }
    .phone-input b { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: #3797f0; color: #fff; font-size: .78rem; }

    /* channel system */
    .channels { margin: 0 16px; border-radius: var(--radius-lg); background: var(--blue); color: #fff; }
    .channels .section-head p { color: rgba(255, 255, 255, .75); }
    .channel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .channel-card {
      position: relative;
      min-height: 205px;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 22px;
      background: rgba(255, 255, 255, .08);
      transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
    }
    .channel-card:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .34); transform: translateY(-5px); }
    .channel-card h3 { margin: 50px 0 9px; font-size: 1.35rem; letter-spacing: -.035em; }
    .channel-card p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .86rem; line-height: 1.55; }
    .channel-icon { display: grid; position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, .16); }
    .channel-icon svg { width: 21px; height: 21px; }
    .channel-index { font: 700 .66rem/1 "Space Mono", monospace; opacity: .55; }

    .channel-core { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: stretch; margin-top: 12px; padding: 26px 8px; border-radius: 24px; background: rgba(255, 255, 255, .96); color: var(--ink); }
    .channel-core-label { display: grid; align-content: center; gap: 7px; padding: 4px 26px; }
    .channel-core-label span { color: var(--blue); font: 700 .68rem/1.4 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
    .channel-core-label strong { font-family: "Archivo Black", sans-serif; font-size: 1.2rem; letter-spacing: -.04em; line-height: 1.1; }
    .channel-core-items { display: contents; }
    .channel-core-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 14px; align-content: center; padding: 4px 26px; border-left: 1px solid var(--line); }
    .channel-core-item .channel-icon { position: static; grid-row: 1 / span 2; background: var(--blue-soft); color: var(--blue); }
    .channel-core-item h3 { margin: 0 0 5px; font-size: 1.05rem; }
    .channel-core-item p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }

    /* comparison */
    /* `clip` rather than `hidden`: both clip identically, but `hidden` makes this a
       scroll container, which the converge animation's view() timeline would then
       measure against — and the cards never move inside it, so the timeline froze.
       `hidden` first as the fallback for browsers without `clip`. */
    .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #e8e4da; box-shadow: var(--shadow); }
    .bacard { min-height: 600px; padding: 52px; }
    .bacard.after { background: var(--ink); color: #fff; }
    .comparison-kicker { margin-bottom: 26px; font: 700 .72rem/1 "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
    .bacard h3 { margin-bottom: 38px; font-size: clamp(2.6rem, 4.5vw, 4.8rem); }
    .compare-list { list-style: none; margin: 0; padding: 0; }
    .compare-list li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid; border-color: rgba(16, 17, 20, .16); font-weight: 600; }
    .bacard.before .compare-list li { color: #56544d; }
    .bacard.after .compare-list li { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .92); }
    .compare-list b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(16, 17, 20, .1); color: #7a7871; }
    .compare-list b svg { width: 12px; height: 12px; }
    .after .compare-list b { background: var(--yellow); color: var(--ink); }

    /* Row alignment across the before/after cards.
       The two headings wrap to different line counts — "Twelve messages, maybe
       one sale." runs to four lines, "One chat. One tap. Paid." to two — so the
       parallel lists started at different heights and no row sat level with its
       counterpart. Reading *across* is the one thing this section exists to make
       easy, so subgrid pins the kicker, the heading and all five list rows to
       shared tracks. Rows: kicker / heading / 5 list rows / CTA.
       Progressive enhancement — without subgrid the original layout is untouched
       — and only above the 720px breakpoint, where the cards sit side by side. */
    @supports (grid-template-rows: subgrid) {
      @media (min-width: 721px) {
        .comparison-grid { grid-template-rows: auto auto repeat(5, auto) auto; }
        .bacard { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
        .compare-list { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
      }
    }

    /* Before/after overlay.
       The two cards start side by side, then slide toward each other as the
       section scrolls, with "after" ending on top of "before" and a sliver of
       the before card still showing at the left edge. The after literally
       covers the before — that is the argument.
       Travel maths: both cards move toward each other by half a card width, so
       the merged pair finishes centred in the content column rather than hard
       left. The small px term is the correction that leaves exactly
       `--cmp-sliver` of the before card showing past the after card's left edge.
       Transform does not disturb the subgrid above. */
    @keyframes slide-before { from { transform: none; } to { transform: translateX(calc(50% + (var(--cmp-gap) - var(--cmp-sliver)) / 2)); } }
    @keyframes slide-after  { from { transform: none; } to { transform: translateX(calc(-50% - (var(--cmp-gap) - var(--cmp-sliver)) / 2)); } }

    /* Above the stacking breakpoint the cards detach from the shared container so
       they can overlap: the container gives up its border, background and shadow,
       and each card carries its own. Below 721px they stay stacked and static. */
    /* Pin track: taller than the viewport so the stage can stick while the cards
       converge. Below the breakpoint both collapse to normal flow. */
    .comparison-track { position: relative; }
    .comparison-stage { display: block; }
    @media (min-width: 721px) {
      .comparison-track { height: 210svh; }
      .comparison-stage {
        position: sticky;
        top: 0;
        display: grid;
        align-content: center;
        width: min(calc(100% - 48px), var(--max));
        height: 100svh;
        margin-inline: auto;
        /* centre the cards in the space between the fixed nav and the fold,
           not in the raw viewport, or the top edge slides under the nav */
        padding-top: calc(var(--bar-h) + 108px);
        padding-bottom: 24px;
      }
      .comparison-grid {
        --cmp-gap: 28px;
        --cmp-sliver: 34px;
        gap: var(--cmp-gap);
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
      }
      .bacard { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
      .bacard.before { background: #e8e4da; border: 1px solid var(--line); }
      /* after sits above so it covers before rather than sliding under it */
      .bacard.after { position: relative; z-index: 2; }

      /* A pinned card has to fit the viewport between the nav and the fold, so the
         cards run more compact here than they did in normal flow. Mobile keeps the
         original, roomier sizing. */
      .bacard { min-height: 0; padding: 34px 38px; }
      .comparison-kicker { margin-bottom: 16px; }
      .bacard h3 { margin-bottom: 20px; font-size: clamp(1.7rem, 2.3vw, 2.3rem); }
      .compare-list li { padding: 10px 0; }
      .compare-list li span { font-size: .92rem; }
      .after .btn { margin-top: 20px; min-height: 52px; }
    }

    @media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
      /* Baseline: one-shot when the section reveals. Works everywhere. */
      .comparison-grid.is-visible > .bacard.before { animation: slide-before var(--dur-4) var(--ease-out) both; }
      .comparison-grid.is-visible > .bacard.after  { animation: slide-after  var(--dur-4) var(--ease-out) both; }

      /* Where supported, drive the convergence from the track's own progress.
         The track is taller than the viewport, so its `contain` range is exactly
         the window during which the stage is pinned — which means the cards
         finish converging while still held centred on screen, rather than
         completing as the section scrolls away. */
      @supports (animation-timeline: view()) {
        .comparison-track { view-timeline-name: --cmp; view-timeline-axis: block; }
        .comparison-grid > .bacard.before,
        .comparison-grid.is-visible > .bacard.before {
          animation: slide-before auto linear both;
          animation-timeline: --cmp;
          animation-range: contain 5% contain 62%;
        }
        .comparison-grid > .bacard.after,
        .comparison-grid.is-visible > .bacard.after {
          animation: slide-after auto linear both;
          animation-timeline: --cmp;
          animation-range: contain 5% contain 62%;
        }
      }
    }
    .after .btn { width: 100%; margin-top: 32px; }

    .quote-wrap { padding: 0 0 112px; }
    .quote-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 34px; align-items: center; padding: 48px 52px; border-radius: var(--radius-lg); background: var(--yellow); }
    .quote-card::after { content: "“"; position: absolute; right: 34px; bottom: -156px; color: rgba(16, 17, 20, .08); font: 400 20rem/1 Georgia, serif; }
    .quote-avatar { display: grid; width: 128px; height: 128px; place-items: center; border: 3px solid var(--ink); border-radius: 50%; background: var(--pink); color: #fff; font: 900 2.1rem/1 "Archivo Black", sans-serif; box-shadow: 7px 7px 0 var(--ink); }
    blockquote { position: relative; z-index: 1; margin: 0; font-family: "Archivo Black", sans-serif; font-size: clamp(1.3rem, 2.2vw, 2.05rem); letter-spacing: -.035em; line-height: 1.28; }
    blockquote footer { margin-top: 18px; font: 700 .72rem/1.5 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
    .quote-stat { position: relative; z-index: 1; display: grid; gap: 4px; padding-left: 34px; border-left: 2px solid rgba(16, 17, 20, .25); text-align: left; }
    .quote-stat strong { font-family: "Archivo Black", sans-serif; font-size: 2.9rem; letter-spacing: -.06em; line-height: 1; }
    .quote-stat small { max-width: 150px; color: #4b4942; font: 700 .68rem/1.4 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }

    /* journey */
    .journey { background: var(--ink); color: #fff; }
    .journey .section-head p { color: rgba(255, 255, 255, .65); }
    .journey-rail { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
    /* stop the connector at the centre of the last dot, not the grid edge */
    .journey-rail::before { content: ""; position: absolute; top: 26px; left: 26px; right: calc(100% / 7 - 38px); height: 2px; background: linear-gradient(90deg, var(--blue), var(--pink), var(--yellow)); }
    .journey-step { position: relative; z-index: 1; }
    .journey-number { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); font: 700 .68rem/1 "Space Mono", monospace; transition: transform var(--dur-2) var(--ease); }
    .journey-step:hover .journey-number { transform: translateY(-4px) scale(1.06); }
    /* fixed title height keeps every description on the same baseline */
    .journey-step h3 { min-height: 2.2em; margin-bottom: 10px; font-size: 1.02rem; line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; }
    .journey-step p { margin: 0; color: rgba(255, 255, 255, .55); font-size: .8rem; line-height: 1.5; }

    /* setup */
    .setup-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: setup; }
    .setup-card {
      counter-increment: setup;
      display: grid;
      align-content: start;
      min-height: 400px;
      padding: 34px 32px 32px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background-color: var(--surface);
      background-repeat: no-repeat;
      background-position: right -6px bottom -6px;
      transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    }
    /* step artwork sits bottom-right; text keeps the top-left clear */
    .setup-card:nth-child(1) { background-image: url("setup-connect.webp"); background-size: 58% auto; }
    .setup-card:nth-child(2) { background-image: url("setup-products.webp"); background-size: 44% auto; }
    .setup-card:nth-child(3) { background-image: url("setup-switch.webp"); background-size: 46% auto; }
    .setup-card:hover { transform: translateY(-8px); border-color: rgba(10, 67, 215, .3); box-shadow: var(--shadow); }
    .setup-card::before {
      content: "0" counter(setup);
      display: grid;
      width: 46px;
      height: 46px;
      place-items: center;
      margin-bottom: 26px;
      border-radius: 14px;
      background: var(--blue-soft);
      color: var(--blue);
      font: 700 .76rem/1 "Space Mono", monospace;
    }
    .setup-card h3 { margin-bottom: 12px; font-size: 1.6rem; }
    .setup-card p { margin: 0; }
    .setup-note { display: grid; gap: 4px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--blue); font: 700 .66rem/1.4 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
    .setup-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }

    /* pricing */

    /* faq */
    .faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; align-items: start; }
    .faq-title { position: sticky; top: 120px; }
    .faq-title h2 { margin-bottom: 18px; font-size: clamp(2.4rem, 4.4vw, 4.3rem); }
    .faq-help { display: grid; justify-items: start; gap: 12px; margin-top: 34px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
    .faq-help strong { font-family: "Archivo Black", sans-serif; font-size: 1.15rem; letter-spacing: -.035em; }
    .faq-help p { margin: 0; font-size: .88rem; }
    .faq-list { border-top: 1px solid var(--ink); }
    details { border-bottom: 1px solid var(--ink); }
    summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 0; cursor: pointer; list-style: none; font-family: "Archivo Black", sans-serif; font-size: 1.12rem; letter-spacing: -.025em; transition: color var(--dur-2) var(--ease); }
    summary:hover { color: var(--blue); }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; color: var(--ink); font-family: Archivo, sans-serif; font-size: 1.1rem; transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
    details[open] summary::after { transform: rotate(45deg); background: var(--yellow); }
    /* the +/× marker is the affordance, so the press lands on it in both states */
    summary:active::after { transform: scale(.9); transition-duration: var(--dur-1); }
    details[open] summary:active::after { transform: rotate(45deg) scale(.9); }
    details p { max-width: 680px; margin: 0; padding: 0 56px 25px 0; }
    /* animate the reveal where the browser supports interpolating to auto */
    @supports (interpolate-size: allow-keywords) {
      details { interpolate-size: allow-keywords; }
      details::details-content { height: 0; overflow: hidden; transition: height var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete; }
      details[open]::details-content { height: auto; }
    }

    /* closing */
    .closing { padding: 16px; }
    .closing-shell { position: relative; overflow: hidden; padding: 112px 24px; border-radius: var(--radius-lg); background: var(--yellow); text-align: center; }
    .closing-shell::before, .closing-shell::after { content: ""; position: absolute; width: 260px; height: 260px; border: 48px solid var(--blue); border-radius: 50%; }
    .closing-shell::before { left: -140px; top: -140px; }
    .closing-shell::after { right: -140px; bottom: -140px; border-color: var(--pink); }
    .closing h2 { position: relative; z-index: 1; margin-bottom: 20px; font-size: clamp(2.6rem, 6.4vw, 6.4rem); }
    .closing p { position: relative; z-index: 1; max-width: 560px; margin: 0 auto 30px; color: #37352f; font-size: 1.08rem; }
    .closing-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
    .closing .btn { position: relative; z-index: 1; }
    .closing .btn-outline { border-color: rgba(16, 17, 20, .35); }
    .closing .btn-outline:hover { border-color: var(--ink); background: rgba(255, 255, 255, .35); }
    .closing-microcopy { position: relative; z-index: 1; margin: 22px 0 0; color: #4b4942; font: 700 .66rem/1.5 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }

    .site-footer { padding: 70px 0 28px; background: var(--ink); color: rgba(255, 255, 255, .62); }
    .footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; }
    .site-footer .logo { color: #fff; }
    .site-footer p { max-width: 320px; margin-top: 18px; color: rgba(255, 255, 255, .55); }
    .site-footer h6 { margin: 0 0 18px; color: #fff; font: 700 .7rem/1 "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
    .site-footer ul { list-style: none; margin: 0; padding: 0; }
    .site-footer li { margin: 10px 0; font-size: .86rem; }
    .site-footer a { transition: color var(--dur-2) var(--ease); }
    .site-footer a:hover { color: var(--yellow); }
    .footer-mail { display: inline-block; margin-top: 16px; color: #fff; font-size: .88rem; font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, .3); }
    .footer-mail:hover { color: var(--yellow); border-bottom-color: var(--yellow); }
    .footer-social { display: flex; gap: 10px; margin-top: 22px; }
    .footer-social a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 11px; color: rgba(255, 255, 255, .72); transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
    .footer-social a:hover { border-color: var(--yellow); background: rgba(255, 216, 77, .12); color: var(--yellow); }
    .footer-social svg { width: 18px; height: 18px; }
    .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin-top: 54px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .75rem; }
    .site-footer .footer-legal { max-width: none; margin: 14px 0 0; color: rgba(255, 255, 255, .42); font-size: .72rem; }

    @media (max-width: 980px) {
      .section { padding: 88px 0; }
      .hero-grid { grid-template-columns: 1fr; padding-top: 110px; }
      .hero-copy { max-width: 500px; }
      .hero-status-stack { right: 0; bottom: 56px; width: 285px; }
      /* small screens read as a simple stack: step, its video, next step, its video.
         No pinning, no scroll hijacking — the pinned version stays desktop-only. */
      .scrolly { margin-top: 44px; }
      .scrolly-track { height: auto; }
      .scrolly-stage {
        position: static;
        display: block;
        width: 100%;
        height: auto;
        padding-top: 0;
      }
      .scrolly-media { display: none; }
      /* trim the chat chrome so a full thread still fits the shorter frame */
      .phone-top { padding: 12px 12px 10px; }
      .phone-body { padding: 11px; }
      .msg { padding: 8px 11px; font-size: .72rem; }
      .chat-card-media { height: 76px; }
      .chat-card-body { gap: 6px; padding: 9px 10px 10px; }
      .phone-input { padding: 9px 11px; }
      .scrolly-copy { display: block; height: auto; padding: 0; border-right: 0; }
      .scrolly-slide {
        max-width: none;
        padding: 34px clamp(20px, 5vw, 32px) 38px;
        border-top: 1px solid rgba(16, 17, 20, .12);
        opacity: 1;
        transform: none;
        pointer-events: auto;
      }
      .scrolly-slide:first-of-type { border-top: 0; }
      .scrolly-rail { display: none; }
      .phone { height: 476px; max-width: 300px; }

      /* each step carries its own frame on mobile */
      .slide-media { display: grid; place-items: center; margin-top: 26px; }
      .slide-video {
        display: none;
        width: min(300px, 100%);
        aspect-ratio: 9 / 19.5;
        max-height: 476px;
        border: 7px solid var(--ink);
        border-radius: 32px;
        background: var(--ink);
        object-fit: cover;
        box-shadow: 0 24px 50px rgba(16, 17, 20, .26);
      }
      .slide-media.has-video .slide-video { display: block; }
      .slide-media.has-video .slide-mock { display: none; }
      .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .channel-core { grid-template-columns: 1fr; gap: 20px; padding: 26px 0; }
      .channel-core-item { border-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
      .journey-rail { grid-template-columns: repeat(4, 1fr); row-gap: 36px; }
      .journey-rail::before { display: none; }
      .faq-grid { grid-template-columns: 1fr; gap: 32px; }
      .faq-title { position: static; }
    }

    /* the inline nav runs out of room well before the phone breakpoint */
    @media (max-width: 900px) {
      .menu-toggle { display: inline-flex; }
      .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--surface);
        color: var(--ink);
        box-shadow: var(--shadow);
      }
      .nav-links.open { display: flex; }
      .nav-links > a { padding: 14px; border-radius: 12px; font-size: .95rem; opacity: 1; }
      .nav-links > a:hover { background: rgba(10, 67, 215, .06); }
      .nav-links > a:not(.btn)::after { display: none; }
      .nav-actions { margin-left: 10px; }
    }

    @media (max-width: 720px) {
      :root { --bar-h: 38px; }
      .top-bar { gap: 10px; padding: 0 12px; font-size: .58rem; letter-spacing: .09em; }
      .top-bar-label::before { width: 6px; height: 6px; }
      .wrap { width: min(calc(100% - 32px), var(--max)); }
      .site-nav { padding: 10px 0; }
      .site-nav.is-scrolled { padding: 8px 0; }
      .nav-shell { min-height: 58px; border-radius: 17px; }
      .site-nav .nav-shell, .hero-grid { width: calc(100% - 32px); }
      .hero { padding: 0; }
      .hero-shell { min-height: calc(100svh - var(--bar-h)); border-radius: 0; background: var(--blue); }
      .hero-shell::before { background: linear-gradient(180deg, rgba(5, 18, 61, .08) 0%, rgba(5, 18, 61, .2) 31%, rgba(5, 18, 61, .78) 51%, var(--blue) 72%, var(--blue) 100%); }
      .hero-visual { height: auto; bottom: 0; background-position: 66% center; }
      .hero-grid { min-height: calc(100svh - var(--bar-h)); padding: 42vh 0 46px; }
      .hero h1 { font-size: clamp(2.55rem, 11vw, 3.5rem); line-height: 1; }
      .hero-intro { font-size: .94rem; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn { width: 100%; }
            .hero-status-stack { position: static; width: 100%; margin-top: 30px; }
      .hero-status-card:nth-child(n) { --card-x: 0px; transform: none; }
      .trust-line { grid-template-columns: 1fr 1fr; }
      .trust-line > div { min-height: 100px; padding: 20px 16px; border-bottom: 1px solid var(--line); }
      .trust-line > div:nth-child(2n) { border-right: 0; }
      .section-head { margin-bottom: 38px; }
      .scrolly-media { padding: 18px 0 12px; }
      .scrolly-slide { padding: 26px 20px; }
      .scrolly-slide h3 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
      .phone { height: 476px; border-width: 7px; border-radius: 32px; }
      .slide-video { max-height: 476px; }
      .channels { margin-inline: 8px; border-radius: 30px; }
      .channel-grid { grid-template-columns: 1fr; }
      .channel-card { min-height: 180px; }
      .channel-core { padding: 22px 0; }
      .channel-core-label, .channel-core-item { padding-inline: 22px; }
      .comparison-grid { grid-template-columns: 1fr; border-radius: 30px; }
      .bacard { min-height: 0; padding: 36px 25px; }
      .quote-card { grid-template-columns: 1fr; gap: 24px; padding: 36px 26px; border-radius: 30px; }
      .quote-avatar { width: 84px; height: 84px; font-size: 1.6rem; box-shadow: 5px 5px 0 var(--ink); }
      .quote-card::after { display: none; }
      .quote-stat { padding: 20px 0 0; border-left: 0; border-top: 2px solid rgba(16, 17, 20, .25); }
      .quote-stat strong { font-size: 2.3rem; }
      .journey-rail { grid-template-columns: 1fr 1fr; row-gap: 28px; }
      .journey-step h3 { min-height: 0; }
      .journey-number { width: 46px; height: 46px; margin-bottom: 16px; }
      .setup-grid { grid-template-columns: 1fr; }
      .setup-card { padding: 28px 24px; }
      .setup-card::before { margin-bottom: 18px; }
      .setup-actions { flex-direction: column; }
      .faq-title h2 { font-size: 3.2rem; }
      .closing-shell { padding: 88px 18px; border-radius: 30px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; }
    }

    /* below this the logo, menu button and CTA stop fitting on one row */
    @media (max-width: 560px) {
      .nav-shell { gap: 12px; padding-left: 14px; }
      .logo { font-size: 1.2rem; }
      .logo-mark { width: 32px; height: 32px; }
      .menu-toggle { padding: 10px; }
      .menu-toggle-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .nav-actions { margin-left: 0; }
      .nav-actions .btn { padding-inline: 16px; font-size: .82rem; }
    }

    @media (max-width: 430px) {
      .footer-grid { grid-template-columns: 1fr; }
      .footer-brand { grid-column: auto; }
      .trust-line strong { font-size: 1.25rem; }
      }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
      [data-reveal] { opacity: 1; transform: none; transition-delay: 0s !important; }
    }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.page-head { padding: calc(var(--bar-h) + 150px) 0 60px; text-align: center; }
.page-head h1 { margin-bottom: 20px; font-size: clamp(2.4rem, 5.4vw, 5rem); }
.page-head > .wrap > p { max-width: 620px; margin: 0 auto; font-size: 1.1rem; text-wrap: balance; }

/* monthly / annual switch */
.bill-toggle { display: inline-flex; align-items: center; gap: 6px; margin-top: 34px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); }
.bill-toggle button {
  min-height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 .78rem/1 Archivo, sans-serif;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.bill-toggle button.is-on { background: var(--ink); color: #fff; }
.bill-save { margin-left: 4px; padding: 6px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 .6rem/1 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }

/* plan cards */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 30px 30px;
  border: 1px solid rgba(16, 17, 20, .16);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.plan.is-featured { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-14px); box-shadow: 0 26px 60px rgba(6, 44, 145, .3); }
.plan.is-featured:hover { transform: translateY(-20px); box-shadow: 0 34px 74px rgba(6, 44, 145, .38); }
.plan.is-featured p, .plan.is-featured .plan-orders small { color: rgba(255, 255, 255, .74); }
.plan-flag { position: absolute; top: 18px; right: 18px; padding: 7px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); font: 700 .6rem/1 "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.plan-name { font: 700 .72rem/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.plan > p { min-height: 44px; margin: 12px 0 0; font-size: .89rem; }
.plan-price { display: flex; align-items: baseline; gap: 4px; margin: 22px 0 4px; font-family: "Archivo Black", sans-serif; font-size: 3rem; letter-spacing: -.06em; }
.plan-price .plan-cycle { font: 500 .88rem/1 Archivo, sans-serif; letter-spacing: 0; opacity: .7; }
.plan-annual { min-height: 20px; font: 700 .62rem/1.4 "Space Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.plan.is-featured .plan-annual { color: var(--yellow); }
.plan-orders { margin: 20px 0 22px; padding: 14px 16px; border-radius: 16px; background: rgba(10, 67, 215, .06); }
.plan.is-featured .plan-orders { background: rgba(255, 255, 255, .12); }
.plan-orders strong { display: block; font-family: "Archivo Black", sans-serif; font-size: 1.5rem; letter-spacing: -.05em; }
.plan-orders small { display: block; margin-top: 3px; color: var(--muted); font: 700 .6rem/1.3 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.plan ul { flex: 1; list-style: none; margin: 0 0 26px; padding: 0; }
.plan li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(16, 17, 20, .12); font-size: .86rem; }
.plan.is-featured li { border-top-color: rgba(255, 255, 255, .2); }
.plan li::before { content: "✓"; color: var(--blue); font-weight: 900; }
.plan.is-featured li::before { color: var(--yellow); }
.plan .btn { width: 100%; }
.price-note { max-width: 640px; margin: 30px auto 0; color: var(--muted); font-size: .82rem; text-align: center; }

/* plan picker quiz */
.picker { margin: 0 16px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; }
.picker .wrap { padding: 78px 0; }
.picker-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
.picker-intro h2 { margin-bottom: 18px; font-size: clamp(2.1rem, 3.6vw, 3.4rem); }
.picker-intro p { color: rgba(255, 255, 255, .68); font-size: 1rem; }
.picker-card { padding: 34px; border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.picker-progress { display: flex; gap: 6px; margin-bottom: 26px; }
.picker-progress i { flex: 1; height: 4px; border-radius: 4px; background: rgba(16, 17, 20, .12); transition: background var(--dur-2) var(--ease); }
.picker-progress i.on { background: var(--blue); }
.picker-step[hidden] { display: none; }
.picker-kicker { color: var(--blue); font: 700 .64rem/1 "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.picker-step h3 { margin: 14px 0 8px; font-size: 1.7rem; }
.picker-step > p { margin-bottom: 22px; font-size: .9rem; }
.picker-options { display: grid; gap: 10px; margin-bottom: 26px; }
.picker-option {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  font: 600 .95rem/1.35 Archivo, sans-serif;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.picker-option:hover { border-color: rgba(10, 67, 215, .4); transform: translateX(3px); }
.picker-option.is-picked { border-color: var(--blue); background: rgba(10, 67, 215, .06); }
.picker-option i { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-size: .7rem; }
.picker-option.is-picked i { border-color: var(--blue); background: var(--blue); color: #fff; }
.picker-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.picker-back { border: 0; background: transparent; color: var(--muted); font: 700 .8rem/1 Archivo, sans-serif; cursor: pointer; }
.picker-back:hover { color: var(--ink); }

.picker-result { display: grid; gap: 8px; text-align: center; }
.picker-result .picker-kicker { margin-bottom: 4px; }
.picker-result strong { font-family: "Archivo Black", sans-serif; font-size: 2.6rem; letter-spacing: -.06em; }
.picker-result p { margin: 0 auto 8px; max-width: 380px; font-size: .92rem; }
.picker-result .btn { justify-self: center; }
.picker-reset { margin-top: 6px; }

/* comparison table */
.compare-wrap { overflow-x: auto; margin-top: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .88rem; }
table.compare th, table.compare td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); }
table.compare thead th { position: sticky; top: 0; background: var(--surface); font: 700 .72rem/1 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
table.compare thead th:not(:first-child), table.compare td:not(:first-child) { text-align: center; width: 18%; }
table.compare tbody th { font-weight: 600; }
table.compare tr.group th { background: rgba(16, 17, 20, .04); font: 700 .66rem/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
table.compare .yes { color: #0d7b4b; font-weight: 900; }
table.compare .no { color: #b3b1a9; }
table.compare tbody tr:hover td, table.compare tbody tr:hover th { background: rgba(10, 67, 215, .03); }

@media (max-width: 980px) {
  .plan-grid { grid-template-columns: 1fr; }
  .plan, .plan:hover, .plan.is-featured, .plan.is-featured:hover { transform: none; }
  .plan > p { min-height: 0; }
  .picker-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  .page-head { padding: calc(var(--bar-h) + 118px) 0 44px; }
  .picker { margin-inline: 8px; border-radius: 30px; }
  .picker .wrap { padding: 54px 0; }
  .picker-card { padding: 24px 20px; border-radius: 22px; }
  .picker-step h3 { font-size: 1.4rem; }
  .picker-result strong { font-size: 2.1rem; }
  .bill-toggle { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.story { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.story h2 { position: sticky; top: calc(var(--bar-h) + 110px); font-size: clamp(1.9rem, 3.2vw, 3rem); }
.story-body p { font-size: 1.06rem; margin-bottom: 20px; }
.story-body p:last-child { margin-bottom: 0; }
.story-body strong { color: var(--ink); font-weight: 700; }
/* long-form prose (privacy and any future policy page) */
.story-body h3 { margin: 36px 0 12px; font-size: 1.18rem; letter-spacing: -.025em; }
.story-body h3:first-child { margin-top: 0; }
.story-body ul { margin: 0 0 20px; padding-left: 22px; }
.story-body li { margin-bottom: 9px; font-size: 1.06rem; line-height: 1.55; }
.story-body li::marker { color: var(--blue); }
.story-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

/* legal pages — sticky contents nav in the left column of .story */
.legal-toc { position: sticky; top: calc(var(--bar-h) + 108px); align-self: start; }
.legal-toc h2 { margin-bottom: 18px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; margin-bottom: 2px; }
.legal-toc a { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 5px 0; color: var(--muted); font-size: .82rem; line-height: 1.35; text-decoration: none; transition: color var(--dur-2) var(--ease); }
.legal-toc a::before { content: counter(toc); font: 700 .62rem/1.6 "Space Mono", monospace; color: var(--blue); }
.legal-toc a:hover { color: var(--ink); }
.legal-meta { margin-bottom: 34px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: .84rem; line-height: 1.6; }
.legal-meta strong { display: block; margin-bottom: 4px; font: 700 .64rem/1 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.story-body h3 { scroll-margin-top: calc(var(--bar-h) + 96px); }
.legal-table { width: 100%; margin: 0 0 24px; border-collapse: collapse; font-size: .9rem; }
.legal-table th, .legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table thead th { font: 700 .66rem/1 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal-table tbody th { width: 34%; font-weight: 700; }
.legal-scroll { overflow-x: auto; }
@media (max-width: 900px) {
  .legal-toc { position: static; }
  .legal-toc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
}
.pull {
  margin: 30px 0;
  padding: 26px 30px;
  border-left: 4px solid var(--blue);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: "Archivo Black", sans-serif;
  font-size: 1.25rem;
  letter-spacing: -.035em;
  line-height: 1.35;
  color: var(--ink);
}

.belief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.belief {
  display: grid;
  align-content: start;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.belief:hover { transform: translateY(-8px); border-color: rgba(10, 67, 215, .3); box-shadow: var(--shadow); }
.belief-mark { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 24px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font: 700 .76rem/1 "Space Mono", monospace; }
.belief h3 { margin-bottom: 12px; font-size: 1.4rem; }
.belief p { margin: 0; font-size: .92rem; }

.build-band { margin: 0 16px; border-radius: var(--radius-lg); background: var(--ink); color: #fff; }
.build-band .wrap { padding: 78px 0; }
.build-band .section-head h2 { color: #fff; }
.build-band .section-head p { color: rgba(255, 255, 255, .68); }
.build-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 8px; }
.build-item { padding: 26px 30px; border-left: 1px solid rgba(255, 255, 255, .16); }
.build-item:first-child { border-left: 0; padding-left: 0; }
.build-item span { color: var(--yellow); font: 700 .64rem/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.build-item h3 { margin: 14px 0 9px; font-size: 1.2rem; letter-spacing: -.035em; }
.build-item p { margin: 0; color: rgba(255, 255, 255, .6); font-size: .88rem; }

/* max-width caps the column count as well as the width: at 900px, auto-fit
   resolves to three columns, so six people sit as a balanced 3x2 rather than
   a lopsided 4+2. Raise it if the team outgrows six. */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 900px; margin-inline: auto; }
.person { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.person-avatar { display: grid; width: 84px; height: 84px; place-items: center; margin: 0 auto 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font: 900 1.6rem/1 "Archivo Black", sans-serif; box-shadow: 5px 5px 0 var(--ink); }
.person:nth-child(2n) .person-avatar { background: var(--pink); color: #fff; }
.person:nth-child(3n) .person-avatar { background: var(--green); }
.person h3 { margin-bottom: 5px; font-size: 1.1rem; }
.person small { display: block; color: var(--blue); font: 700 .62rem/1.4 "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.person p { margin: 12px 0 0; font-size: .85rem; }

@media (max-width: 980px) {
  .story { grid-template-columns: 1fr; gap: 26px; }
  .story h2 { position: static; }
  .belief-grid { grid-template-columns: 1fr; }
  .build-list { grid-template-columns: 1fr; }
  .build-item { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .build-item:first-child { border-top: 0; padding-top: 0; }
}

@media (max-width: 720px) {
  .build-band { margin-inline: 8px; border-radius: 30px; }
  .build-band .wrap { padding: 54px 0; }
  .pull { padding: 20px 22px; font-size: 1.1rem; }
}

/* ============================================================
   EARLY ACCESS / WAITLIST PAGE
   ============================================================ */
.ea-wrap { display: grid; place-items: start center; padding-bottom: 20px; }
.ea-card {
  width: min(100%, 620px);
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ea-form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font: 700 .72rem/1 "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font: 500 1rem/1 Archivo, sans-serif;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.field select { appearance: none; cursor: pointer; padding-right: 46px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 15px) 55%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat; }
.field input::placeholder { color: #a8a69e; }
.field input:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10, 67, 215, .14); }
.field select:invalid { color: #a8a69e; }

.ea-submit { width: 100%; min-height: 60px; margin-top: 4px; font-size: .95rem; }
.ea-submit[disabled] { opacity: .75; cursor: default; transform: none; box-shadow: none; }
.ea-submit.done { background: #0d7b4b; border-color: #0d7b4b; color: #fff; }
.ea-error { margin: 0; color: #b3261e; font-size: .85rem; }

.ea-perks { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); display: grid; gap: 14px; }
.ea-perks li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; font-size: .93rem; font-weight: 600; }
.ea-perks .tick { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; }
.ea-perks .tick svg { width: 11px; height: 11px; }
.ea-fineprint { margin: 22px 0 0; color: var(--muted); font-size: .8rem; text-align: center; }

@media (max-width: 720px) {
  .ea-card { padding: 26px 22px; border-radius: 26px; }
  .ea-perks { margin-top: 24px; padding-top: 22px; }
}