/* ==========================================================
     VAULTLINE — Archive Console palette (brand-locked).
     Accent discipline:
       Signal Blue  — eyebrow rules, active tab, links, focus
       Archive Amber— the price, ::selection, one hero marker
     Amber never appears as text on a light surface.
     ========================================================== */
  :root{
    --ink:#0B0F14;
    --surface:#151B23;
    --surface-2:#1A2129;
    --text:#F4F1EA;
    --muted:#7D8896;   /* 5.3:1 on --ink */
    --dim:#7A8592;     /* 5.1:1 on --ink */
    --blue:#4C8DFF;
    --amber:#D7A84F;
    --line:rgba(244,241,234,.075);
    --line-2:rgba(244,241,234,.14);
    --sans:"Inter Tight",system-ui,-apple-system,sans-serif;
    --mono:"Spline Sans Mono",ui-monospace,monospace;
    --pad:32px;
    --rhythm:128px;
    --shadow:0 60px 140px -60px rgba(0,0,0,.95);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
  @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
  section[id],header[id],div[id]{scroll-margin-top:84px}
  body{
    background:var(--ink);color:var(--text);
    font-family:var(--sans);font-size:16px;line-height:1.55;font-synthesis:none;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;background:none;border:none}
  /* A film grain over the whole page. Large flat dark areas band on cheap
     panels; a few percent of noise hides it and gives the surface material. */
  body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
  img{max-width:100%;display:block}
  ::selection{background:var(--amber);color:var(--ink)}
  /* the default light scrollbar is the one element that gives away that this
     is a webpage rather than an application surface */
  html{scrollbar-color:rgba(244,241,234,.18) transparent;scrollbar-width:thin}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:rgba(244,241,234,.14);border-radius:99px;
    border:3px solid var(--ink);background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:rgba(244,241,234,.26);background-clip:padding-box}
  :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .skip-link{position:fixed;top:12px;left:16px;z-index:200;background:var(--text);color:var(--ink);
    font-family:var(--mono);font-size:12px;padding:10px 14px;border-radius:8px;transform:translateY(-180%);transition:transform .2s}
  .skip-link:focus{transform:none}
  .wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
  @media(max-width:640px){:root{--pad:20px;--rhythm:62px}}

  h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em;line-height:1.05}
  h1{font-size:clamp(29px,6.2vw,64px);letter-spacing:-.042em;line-height:1.02}
  h2{font-size:clamp(27px,3.3vw,40px)}
  h3{font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em;line-height:1.25}
  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);display:inline-flex;align-items:center;gap:10px}
  .eyebrow::before{content:"";width:18px;height:1px;background:var(--blue);flex:none}
  .lead{color:var(--muted);font-size:clamp(15.5px,1.5vw,18px);line-height:1.6;max-width:58ch}
  .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase}

  .btn{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:15px;
    padding:13px 20px;border-radius:9px;border:1px solid transparent;cursor:pointer;white-space:nowrap;
    transition:background .18s,border-color .18s,box-shadow .18s}
  .btn .a{font-family:var(--mono);font-weight:400;font-size:13px;transition:transform .2s}
  .btn:hover .a{transform:translateX(3px)}
  .btn-primary{background:var(--text);color:var(--ink)}
  .btn-primary:hover{box-shadow:0 0 0 1px rgba(244,241,234,.35)}
  .btn-ghost{border-color:var(--line-2);color:var(--text);background:rgba(244,241,234,.02)}
  .btn-ghost:hover{border-color:var(--muted);background:rgba(244,241,234,.05)}
  .btn[aria-disabled="true"]{opacity:.62;cursor:default}
  .btn[aria-disabled="true"]:hover{box-shadow:none}
  .btn[aria-disabled="true"]:hover .a{transform:none}

  /* ---------------- nav ---------------- */
  /* scoped to #nav: the console contains its own <nav>, which a bare
     element selector would yank out of the layout and pin to the viewport */
  #nav{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(11,15,20,.72);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
  #nav.stuck{border-bottom-color:var(--line);background:rgba(11,15,20,.93)}
  /* the bar condenses once you leave the hero — smaller, tighter, less present */
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px;
    transition:height var(--t-mid) var(--ease-io)}
  #nav.stuck .nav-in{height:62px}
  .brand-logo{width:146px;height:auto;transition:width var(--t-mid) var(--ease-io)}
  #nav.stuck .brand-logo{width:126px}
  .nav-r{display:flex;align-items:center;gap:26px}
  .nav-r a{font-family:var(--mono);font-size:12.5px;color:var(--muted);transition:color .18s}
  .nav-r a:hover{color:var(--text)}
  .nav-r .btn{padding:10px 16px;font-size:13.5px}
  .nav-toggle{display:none;width:42px;height:42px;align-items:center;justify-content:center;
    border:1px solid var(--line-2);border-radius:9px;background:rgba(244,241,234,.02);cursor:pointer}
  .nav-toggle .bars{position:relative;display:block;width:17px;height:11px}
  .nav-toggle .bars span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;
    transition:transform .25s,opacity .2s}
  .nav-toggle .bars span:nth-child(1){top:0}
  .nav-toggle .bars span:nth-child(2){top:50%;transform:translateY(-50%)}
  .nav-toggle .bars span:nth-child(3){bottom:0}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(1){top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .bars span:nth-child(3){top:50%;bottom:auto;transform:translateY(-50%) rotate(-45deg)}
  .nav-menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    background:rgba(11,15,20,.98);backdrop-filter:blur(20px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);
    padding:4px 0 18px;max-height:calc(100vh - 72px);overflow-y:auto}
  .nav-menu a{font-family:var(--mono);font-size:14.5px;color:var(--muted);padding:15px var(--pad);border-bottom:1px solid var(--line)}
  .nav-menu a:hover{color:var(--text);background:rgba(244,241,234,.03)}
  .nav-menu .menu-cta{margin:18px var(--pad) 2px;justify-content:center}
  .nav-scrim{position:fixed;inset:0;z-index:70;background:rgba(5,7,10,.6)}
  body.nav-open{overflow:hidden}
  @media(max-width:940px){
    .nav-r a,.nav-r>.btn{display:none}
    .nav-toggle{display:inline-flex}
    .nav-menu.open{display:flex}
  }
  /* Mobile header. The wordmark was taking 36% of the screen width and the
     bar stood 76px tall before any content appeared. */
  @media(max-width:620px){
    .nav-in{height:60px}
    #nav.stuck .nav-in{height:54px}
    .brand-logo{width:112px}
    #nav.stuck .brand-logo{width:104px}
    .nav-toggle{width:44px;height:44px;border-radius:10px}
    .nav-menu{max-height:calc(100vh - 60px)}
  }
  /* keep clear of the notch and the home indicator */
  @supports(padding:max(0px)){
    .wrap{padding-left:max(var(--pad),env(safe-area-inset-left));
          padding-right:max(var(--pad),env(safe-area-inset-right))}
    footer{padding-bottom:max(34px,env(safe-area-inset-bottom))}
  }

  /* ==========================================================
     HERO — copy left, real product bleeding off the right edge
     ========================================================== */
  .hero{position:relative;padding:150px 0 0;overflow:hidden}
  /* --drift is set from the scroll handler; transform-only, so it never reflows */
  .hero{--drift:0px}
  .hero::before{content:"";position:absolute;left:50%;top:-18%;width:1100px;height:760px;
    transform:translateX(-42%) translateY(var(--drift));pointer-events:none;will-change:transform;
    background:radial-gradient(ellipse at center,rgba(76,141,255,.11),transparent 62%);filter:blur(28px)}
  .hero .wrap{position:relative;z-index:2}
  .hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center}
  @media(max-width:1060px){.hero-grid{grid-template-columns:1fr;gap:44px}}
  .hero h1{margin-top:22px}
  h1 .l,h2 .l{display:block;text-wrap:balance}
  h1 .l1,h2 .l1{color:rgba(244,241,234,.40)}
  .hero .lead{margin-top:22px}
  .hero-cta{display:flex;gap:11px;margin-top:28px;flex-wrap:wrap}
  .hero-note{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:18px}
  @media(max-width:520px){.hero{padding:126px 0 0}.hero-cta .btn{width:100%;justify-content:center}}

  /* Keep the product surface inside the page frame so it has the same breathing
     room on the right as the rest of the composition. */
  .hero-shot{position:relative;margin-right:0}
  .hero-grid>*{min-width:0}
  .console{max-width:100%}
  @media(max-width:560px){
    .console-top{flex-wrap:wrap}
    /* .console-top prefix so this beats the later `.ct-search{flex:1}` */
    .console-top .ct-search{order:3;flex:1 1 100%;margin-left:0}
  }
  .shot-cap{display:flex;align-items:center;gap:9px;margin-top:14px;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

  /* ==========================================================
     CONSOLE — the product surface, written as markup rather than
     pasted in as a screenshot. It mirrors the real Sandbox and it
     actually filters.
     ========================================================== */
  .console{position:relative;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg,var(--surface-2),var(--ink));
    box-shadow:var(--shadow),0 0 0 1px rgba(244,241,234,.03),0 1px 0 rgba(244,241,234,.06) inset;
    font-size:13px;min-width:0}
  /* a lit top edge, brightest where the light would fall */
  .console::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:5;
    background:linear-gradient(90deg,transparent,rgba(244,241,234,.28) 22%,rgba(244,241,234,.28) 62%,transparent)}
  .console-top{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);
    background:rgba(244,241,234,.02)}
  .ct-brand{font-weight:600;letter-spacing:-.02em;font-size:13.5px}
  .ct-sep{width:1px;height:14px;background:var(--line-2)}
  .ct-app{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
  .ct-search{flex:1;min-width:0;display:flex;align-items:center;gap:8px;margin-left:6px;
    border:1px solid var(--line-2);border-radius:8px;padding:7px 11px;background:rgba(11,15,20,.66)}
  .ct-search svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--dim);stroke-width:1.5;stroke-linecap:round}
  .ct-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
    font-family:var(--mono);font-size:11.5px}
  .ct-search input::placeholder{color:var(--dim)}
  .ct-search:focus-within{border-color:rgba(76,141,255,.55)}

  /* fixed height so the grid clips like a real app viewport instead of
     growing past the hero copy beside it */
  .console-main{display:grid;grid-template-columns:186px minmax(0,1fr) 172px;height:454px}
  @media(max-width:720px){.console-main{height:352px}}
  .c-stage{overflow:hidden}
  @media(max-width:1180px){.console-main{grid-template-columns:170px minmax(0,1fr)}.c-filters{display:none}}
  @media(max-width:720px){.console-main{grid-template-columns:1fr}.c-side{display:none}}

  .c-side{border-right:1px solid var(--line);padding:14px 0;background:linear-gradient(180deg,rgba(21,27,35,.6),transparent)}
  .c-item,.c-vol,.c-sub{display:flex;align-items:center;gap:9px;padding:7px 14px;font-size:12.5px;color:var(--muted)}
  .c-item b,.c-sub b{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:400;color:var(--dim)}
  .c-item.is-on{color:var(--text);background:rgba(244,241,234,.045);box-shadow:inset 2px 0 0 var(--blue)}
  .c-group{display:block;padding:16px 14px 6px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim)}
  .c-vol{font-size:12.5px;color:var(--text)}
  .c-vol em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--dim)}
  .c-vol .dot{width:7px;height:7px;border-radius:50%;background:#6fb98f;flex:none}
  .c-sub{padding-left:26px;font-size:10.5px;color:var(--dim);font-family:var(--mono);
    white-space:nowrap;overflow:hidden}
  .c-sub,.c-item,.c-vol{min-width:0}
  .c-item span,.c-sub{text-overflow:ellipsis}
  .ic{width:12px;height:12px;flex:none;border:1px solid currentColor;opacity:.65}
  .ic-lib{border-radius:2px}
  .ic-proj{transform:rotate(45deg)}
  .ic-star{border-radius:50%}
  .ic-coll{border-radius:2px;border-style:dashed}
  .ic-warn{border-radius:2px;transform:rotate(45deg);border-color:var(--amber)}
  .ic-dupe{border-radius:2px;box-shadow:2px 2px 0 -1px currentColor}

  .c-stage{padding:14px;min-width:0;display:flex;flex-direction:column}
  /* Only shown once the side rails collapse. Without it a build switch on a
     phone changes nothing the reader can see, which defeats the point. */
  .c-compact{display:none;flex-direction:column;gap:9px;margin-bottom:12px;
    border:1px solid var(--line);border-radius:10px;padding:11px;background:rgba(244,241,234,.02)}
  @media(max-width:1180px){.c-compact{display:flex}}
  .cc-row{display:flex;flex-wrap:wrap;gap:6px}
  .cc-row span{font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--dim);
    border:1px solid var(--line);border-radius:5px;padding:4px 7px}
  .cc-row b{color:var(--text);font-weight:400}
  .cc-naming{align-items:center;gap:8px}
  .cc-naming span{border:0;padding:0;letter-spacing:.14em;text-transform:uppercase}
  .cc-naming code{font-family:var(--mono);font-size:9.5px;color:var(--blue);
    border:1px dashed rgba(76,141,255,.35);border-radius:5px;padding:4px 7px;
    word-break:normal;overflow-wrap:anywhere}
  .cc-mods{display:flex;flex-wrap:wrap;gap:4px}
  .c-facets{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .c-facet-label{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin-right:2px}
  .facet{font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--line-2);
    border-radius:999px;padding:4px 9px;cursor:pointer;transition:color .16s,border-color .16s,background .16s}
  .facet:hover{color:var(--text)}
  .facet.is-on{color:var(--blue);border-color:rgba(76,141,255,.45);background:rgba(76,141,255,.09)}
  .c-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px;align-content:start}
  .card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(21,27,35,.7);
    animation:cardin .34s var(--ease-out) both;will-change:transform,opacity}
  @keyframes cardin{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
  .card .th img{transition:transform .5s var(--ease-out)}
  .card:hover .th img{transform:scale(1.06)}
  .card{transition:border-color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io)}
  .card:hover{border-color:var(--line-2);background:rgba(26,33,41,.9)}
  /* the console breathes while it is "indexing" */
  .c-stage{position:relative}
  .scanline{position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;z-index:3;
    background:linear-gradient(90deg,transparent,rgba(76,141,255,.55),transparent);opacity:0}
  .console.indexing .scanline{animation:scan 1.1s var(--ease-io)}
  @keyframes scan{0%{opacity:0;transform:translateY(0)}
    12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(420px)}}
  /* build switch crossfade */
  .console.swapping .console-main{animation:swapDip .42s var(--ease-io)}
  @keyframes swapDip{0%{opacity:1}42%{opacity:.32}100%{opacity:1}}
  .c-side,.c-filters{transition:opacity var(--t-mid) var(--ease-io)}
  /* the caret only blinks when the demo is idle */
  .ct-search.typing .caret-live{opacity:1}
  .card .th{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0d1218}
  .card .th img{width:100%;height:100%;object-fit:cover}
  .card .th .dur{position:absolute;right:5px;bottom:5px;font-family:var(--mono);font-size:8.5px;
    background:rgba(11,15,20,.82);border-radius:3px;padding:2px 4px;color:var(--text)}
  .card .th .kind{position:absolute;left:5px;top:5px;font-family:var(--mono);font-size:7.5px;letter-spacing:.09em;
    text-transform:uppercase;background:rgba(11,15,20,.78);border:1px solid var(--line-2);border-radius:3px;
    padding:2px 5px;color:var(--muted)}
  .card .wave{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px;padding:0 10px}
  .card .wave i{flex:1;background:rgba(76,141,255,.55);border-radius:1px}
  .card .meta{padding:7px 8px}
  .card .meta code{display:block;font-family:var(--mono);font-size:9px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .c-empty{font-family:var(--mono);font-size:11px;color:var(--dim);padding:26px 2px}

  .c-filters{border-left:1px solid var(--line);padding:14px 12px}
  .cf-count{font-family:var(--mono);font-size:10px;color:var(--dim);padding-bottom:12px;border-bottom:1px solid var(--line)}
  .cf-count b{color:var(--text);font-weight:400}
  .cf-h{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--dim);margin:14px 0 8px}
  .cf-chips{display:flex;flex-wrap:wrap;gap:5px}
  .chip{font-family:var(--mono);font-size:9.5px;color:var(--muted);border:1px solid var(--line-2);
    border-radius:6px;padding:4px 7px;cursor:pointer;transition:color .16s,border-color .16s,background .16s}
  .chip b{color:var(--dim);font-weight:400;margin-left:3px}
  .chip:hover{color:var(--text)}
  .chip.is-on{color:var(--ink);background:var(--text);border-color:var(--text)}
  .chip.is-on b{color:rgba(11,15,20,.55)}
  .cf-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;
    color:var(--dim);padding:6px 0;border-bottom:1px solid var(--line)}
  .cf-row em{font-style:normal;color:var(--muted)}
  /* break at the token boundaries rather than mid-brace */
  .cf-naming{font-family:var(--mono);font-size:9px;letter-spacing:-.02em;color:var(--blue);
    border:1px dashed rgba(76,141,255,.35);border-radius:6px;padding:6px 7px;
    word-break:normal;overflow-wrap:anywhere;line-height:1.6}
  .cf-mods{display:flex;flex-wrap:wrap;gap:4px}
  .mod{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;border:1px solid var(--line-2);
    border-radius:5px;padding:3px 6px;color:var(--text);background:rgba(244,241,234,.05)}
  /* bespoke work is marked, because that is what the client is really buying */
  .mod.bespoke{color:var(--blue);border-color:rgba(76,141,255,.4);background:rgba(76,141,255,.08);
    border-style:dashed}
  .cf-custom{display:flex;align-items:center;gap:7px;margin-top:9px;
    font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
  .cf-custom .dotx{width:5px;height:5px;border-radius:1px;background:var(--blue);flex:none}

  .shot-cap .dot.quiet{background:var(--dim);animation:none}
  .shot-cap .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;animation:blip 2.6s infinite}
  @keyframes blip{0%{box-shadow:0 0 0 0 rgba(76,141,255,.45)}70%{box-shadow:0 0 0 7px rgba(76,141,255,0)}100%{box-shadow:0 0 0 0 rgba(76,141,255,0)}}
  .shot-cap a{color:var(--blue)}
  .shot-cap a:hover{color:var(--text)}

  /* ---------------- stat strip ---------------- */
  .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:96px}
  .stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
  @media(max-width:840px){.stats-in{grid-template-columns:1fr 1fr}}
  .stat{padding:30px 26px 30px 0;border-right:1px solid var(--line)}
  .stat:last-child{border-right:0}
  .stat b{display:block;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1}
  .stat span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--dim);margin-top:9px}
  @media(max-width:840px){
    .stat{padding:24px 20px 24px 0}
    .stat:nth-child(2){border-right:0}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
  }
  /* ---------------- sections ---------------- */
  /* The argument holds at the center of the viewport while the reader reveals
     it word by word, then releases naturally into the rest of the page. */
  .statement{height:250vh;padding:0;border-top:1px solid var(--line)}
  .statement .wrap{position:sticky;top:0;height:100vh;display:flex;align-items:center}
  .say{font-size:clamp(23px,3.4vw,44px);line-height:1.2;letter-spacing:-.032em;
    color:var(--muted);max-width:min(100%,21em);text-wrap:pretty}
  .say b{color:inherit;font-weight:600}
  .say-word{color:rgba(244,241,234,.18);transition:color .16s linear,text-shadow .16s linear}
  .say-word.is-read{color:rgba(244,241,234,.68)}
  .say-word.is-current{color:var(--text);text-shadow:0 0 24px rgba(76,141,255,.25)}

  /* scroll-driven band — translateX tracks scroll, like the reference rails */
  .railband{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
  .railband{--skew:0deg}
  .railband-track{display:flex;width:max-content;gap:14px;will-change:transform}
  .railband-track span{transform:skewX(var(--skew));transition:transform .18s var(--ease-io)}
  .railband-track span{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
    font-family:var(--mono);font-size:11.5px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:8px 15px}
  .railband-track i{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
  .railband-track i.ok{color:#6fb98f}
  .railband-track i.warn{color:var(--amber)}
  .railband-track i.hot{color:#d98b7a}

  .sec{padding:var(--rhythm) 0;border-top:1px solid var(--line)}
  .sec.flush{border-top:0}
  .sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end;margin-bottom:48px}
  .sec-head h2{margin-top:16px}
  @media(max-width:900px){.sec-head{grid-template-columns:1fr;gap:20px;align-items:start}}

  /* ==========================================================
     EXPLORER — interactive tabs over real Sandbox screenshots
     ========================================================== */
  /* ==========================================================
     EXPLORER — a scroll-driven sequence.
     The stage pins while an invisible track scrolls past it. Every panel
     is rendered at once and its opacity, lift and scale are written from
     the section's scroll progress, so previews cross-fade through each
     other rather than snapping. Only transforms and opacity are touched.
     ========================================================== */
  .explorer{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:60px;align-items:start}
  @media(max-width:1000px){.explorer{grid-template-columns:1fr;gap:28px}}
  .rail{position:sticky;top:120px;display:flex;flex-direction:column;gap:0;list-style:none}
  @media(max-width:1000px){.rail{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}}
  .tabs{display:contents}
  .tab{position:relative;text-align:left;cursor:pointer;font-family:var(--sans);
    font-size:clamp(20px,2.2vw,29px);font-weight:600;letter-spacing:-.028em;line-height:1.25;
    color:rgba(244,241,234,.24);padding:12px 0 12px 22px;border:0;background:none;
    transition:color var(--t-mid) var(--ease-io)}
  .tab::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:2px;background:var(--line-2)}
  .tab{--fill:0%}
  .tab::after{content:"";position:absolute;left:0;top:13px;height:calc((100% - 26px) * 1);width:2px;
    background:linear-gradient(180deg,var(--blue) var(--fill),transparent var(--fill))}
  .tab:hover{color:rgba(244,241,234,.5)}
  .tab[aria-selected="true"]{color:var(--text)}
  .tab .tnum{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);
    display:block;margin-bottom:4px;font-weight:400}
  @media(max-width:1000px){
    .tab{font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
      border:1px solid var(--line-2);border-radius:999px;padding:9px 14px}
    .tab::before,.tab::after{display:none}
    .tab .tnum{display:none}
    .tab[aria-selected="true"]{color:var(--ink);background:var(--text);border-color:var(--text)}
  }

  .panels{position:relative}
  .panel-wrap{display:block}
  @media(min-width:1001px){
    .seq-on .panels-inner{position:sticky;top:120px;height:var(--stage,520px)}
    .seq-on .panels-track{height:calc(var(--n,5) * 78vh)}
    .seq-on .panel{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
    .seq-on .panel[hidden]{display:block}
  }
  .panels-track{height:0}
  @media(max-width:1000px){
    .panels-track{display:none}
    .panel[hidden]{display:none}
    .panel{opacity:1 !important;transform:none !important}
  }
  /* a slim readout of where you are in the sequence */
  .seq{display:flex;align-items:center;gap:12px;margin-top:24px;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
  .seq b{color:var(--text);font-weight:400}
  .seq-bar{flex:1;height:2px;background:var(--line-2);border-radius:99px;overflow:hidden;max-width:220px}
  .seq-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:inherit}
  @media(max-width:1000px){.seq{display:none}}
  .panel[hidden]{display:none}
  .panel-copy{padding-top:30px}
  .panel-copy h3{margin-bottom:12px}
  .panel-copy p{color:var(--muted);font-size:15px;line-height:1.6}
  .panel-more{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

  .feature-library{margin-top:64px;border-top:1px solid var(--line-2);padding-top:30px}
  .feature-library-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
  .feature-library-head h3{font-size:clamp(22px,2.7vw,34px)}
  .feature-library-head p{color:var(--muted);font-size:14.5px;line-height:1.65;max-width:66ch}
  .feature-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;margin-top:30px}
  .feature-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:14px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;line-height:1.5;align-items:start}
  .feature-item::before{content:"+";font-family:var(--mono);color:var(--blue)}
  .feature-library-note{margin-top:22px;font-size:15px;line-height:1.55;color:var(--text);max-width:72ch}
  .feature-library-note span{color:var(--muted)}
  .feature-library .btn{margin-top:22px}
  @media(max-width:900px){.feature-library-head{grid-template-columns:1fr;gap:14px}.feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media(max-width:560px){.feature-library{margin-top:44px}.feature-list{grid-template-columns:1fr}.feature-item{padding:12px 0}}

  /* ---- mini surfaces for the six capability panels ---- */
  .mini{border:1px solid var(--line-2);border-radius:13px;overflow:hidden;
    background:linear-gradient(180deg,var(--surface-2),var(--ink));box-shadow:var(--shadow);
    animation:fade .32s ease both}
  .mini-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;
    border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;background:rgba(244,241,234,.02)}
  .mini-bar span{color:var(--text)}
  .mini-bar em{font-style:normal;color:var(--dim)}
  .mini-body{padding:14px;display:flex;flex-direction:column;gap:11px}
  .mini-q{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:8px;
    padding:9px 11px;font-family:var(--mono);font-size:11px;color:var(--text);background:rgba(11,15,20,.6)}
  .mini-q i{width:5px;height:12px;background:var(--blue);flex:none;animation:caret 1.2s step-end infinite}
  @keyframes caret{0%,50%{opacity:1}51%,100%{opacity:0}}
  .mini-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .mt{position:relative;border:1px solid var(--line);border-radius:7px;overflow:hidden;aspect-ratio:16/9;display:block}
  .mt img{width:100%;height:100%;object-fit:cover}
  .mt b{position:absolute;right:4px;bottom:4px;font-family:var(--mono);font-size:8px;font-weight:400;
    background:rgba(11,15,20,.82);border-radius:3px;padding:1px 4px}
  .mini-rows{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .mini-rows div{background:var(--ink);display:flex;justify-content:space-between;gap:12px;padding:9px 11px;
    font-family:var(--mono);font-size:10.5px;color:var(--dim)}
  .mini-rows b{color:var(--text);font-weight:400}
  .mini-rows.tall div{padding:11px}
  .drive{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;border:1px solid var(--line);
    border-radius:8px;padding:10px 11px;background:rgba(21,27,35,.6)}
  .drive strong{display:block;font-size:12.5px;font-weight:500}
  .drive small{display:block;font-family:var(--mono);font-size:9px;color:var(--dim);margin-top:2px}
  .pill{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;
    border:1px solid var(--line-2);border-radius:999px;padding:3px 7px;color:var(--muted)}
  .pill.good{color:#6fb98f;border-color:rgba(111,185,143,.4)}
  .pill.warn{color:var(--amber);border-color:rgba(215,168,79,.42)}
  .pill.hot{color:#d98b7a;border-color:rgba(217,139,122,.45)}
  .meter{grid-column:1/-1;height:4px;border-radius:999px;background:rgba(244,241,234,.08);overflow:hidden}
  .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),rgba(76,141,255,.35))}
  .steps-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
  .sm{border:1px solid var(--line);border-radius:8px;padding:10px 9px;background:rgba(21,27,35,.6)}
  .sm b{display:block;font-size:11.5px;font-weight:500}
  .sm span{display:block;font-family:var(--mono);font-size:8.5px;color:var(--dim);margin-top:4px}
  .sm.done{border-color:rgba(111,185,143,.35)}
  .sm.run{border-color:rgba(76,141,255,.45);background:rgba(76,141,255,.06)}
  .photo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
  .ps{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;aspect-ratio:1;display:block}
  .ps img{width:100%;height:100%;object-fit:cover}
  .ps.pick{border-color:rgba(76,141,255,.7);box-shadow:0 0 0 1px rgba(76,141,255,.35)}
  .ps.out{opacity:.34}
  .player{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:16/9}
  .player img{width:100%;height:100%;object-fit:cover}
  .player .scrub{position:absolute;left:9%;right:9%;bottom:11px;height:3px;border-radius:999px;background:rgba(244,241,234,.25)}
  .player .scrub i{display:block;height:100%;border-radius:inherit;background:var(--blue)}
  .notes{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .notes div{background:var(--ink);padding:9px 11px;font-size:11.5px;color:var(--muted);display:flex;gap:10px}
  .notes b{font-family:var(--mono);font-size:9.5px;color:var(--blue);font-weight:400;flex:none}
  .backup-map{display:grid;grid-template-columns:1fr 30px 1fr;gap:10px;align-items:center;padding:8px 0}
  .backup-node{border:1px solid var(--line-2);border-radius:9px;padding:13px;background:rgba(21,27,35,.7)}
  .backup-node b{display:block;font-size:12px;font-weight:500}
  .backup-node span{display:block;margin-top:4px;font-family:var(--mono);font-size:9px;color:var(--dim)}
  .backup-link{height:2px;background:linear-gradient(90deg,var(--blue),#6fb98f);position:relative}
  .backup-link::after{content:"";position:absolute;right:0;top:-3px;border-left:6px solid #6fb98f;border-top:4px solid transparent;border-bottom:4px solid transparent}
  .dupe-mini{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:10px 11px;background:rgba(21,27,35,.6)}
  .dupe-mini i{width:9px;height:9px;border:1px solid var(--blue);border-radius:2px;box-shadow:3px 3px 0 -1px var(--blue);flex:none}
  .dupe-mini div{min-width:0;flex:1}
  .dupe-mini b{display:block;font-family:var(--mono);font-size:10px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dupe-mini span{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;color:var(--dim)}
  .dupe-mini em{font-family:var(--mono);font-size:9px;font-style:normal;color:var(--amber);flex:none}

  /* ---- read progress ---- */
  .progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:90;transform-origin:0 50%;
    transform:scaleX(0);background:linear-gradient(90deg,var(--blue),rgba(76,141,255,.35));
    pointer-events:none;transition:opacity .3s}
  /* ---- scroll-linked process rail ---- */
  .step{position:relative}
  .step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--blue);
    transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease-out)}
  .step.lit::before{transform:scaleY(1)}
  .step .n{transition:color var(--t-mid) var(--ease-io)}
  .step.lit .n{color:var(--text)}
  @media(max-width:900px){.step::before{width:100%;height:2px;bottom:auto;transform:scaleX(0);transform-origin:0 50%}
    .step.lit::before{transform:scaleX(1)}}
  /* counters hold their width so nothing reflows as they tick */
  .count{font-variant-numeric:tabular-nums}

  /* ---- duplicates surface ---- */
  .dupes{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg,var(--surface-2),var(--ink));box-shadow:var(--shadow);padding:16px}
  .dupes-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:13px}
  .dupes-stats div{border:1px solid var(--line);border-radius:9px;padding:13px;background:rgba(21,27,35,.6)}
  .dupes-stats b{display:block;font-size:23px;font-weight:600;letter-spacing:-.03em}
  .dupes-stats span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--dim);margin-top:5px}
  .dupe-group{border:1px solid var(--line);border-radius:9px;margin-bottom:9px;overflow:hidden}
  .dupe-head{display:flex;align-items:center;gap:10px;padding:9px 11px;background:rgba(244,241,234,.02);
    border-bottom:1px solid var(--line);flex-wrap:wrap}
  .dupe-head .tagline{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--amber);border:1px solid rgba(215,168,79,.35);border-radius:999px;padding:2px 7px}
  .dupe-head strong{font-size:12.5px;font-weight:500}
  .dupe-head em{font-style:normal;margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--dim)}
  .dupe-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .dupe-row:last-child{border-bottom:0}
  .dupe-row i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
  .dupe-row code{font-family:var(--mono);font-size:10.5px;color:var(--text)}
  .dupe-row span{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--dim)}
  .dupes-foot{font-family:var(--mono);font-size:9.5px;color:var(--dim);margin-top:4px}
  .panel-facts{display:flex;flex-direction:column;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:20px}
  .panel-facts div{background:var(--ink);padding:13px 15px;display:flex;justify-content:space-between;gap:14px;
    font-family:var(--mono);font-size:11.5px;color:var(--dim)}
  .panel-facts b{color:var(--text);font-weight:400}
  .panel-shot{animation:fade .35s ease both}
  @keyframes fade{from{opacity:.35}to{opacity:1}}

  /* ---------------- outcomes ---------------- */
  /* hairline columns, no fills — matching the capability figures */
  .outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-top:1px solid var(--line-2);padding-top:34px}
  @media(max-width:900px){.outcomes{grid-template-columns:1fr 1fr;row-gap:44px}}
  @media(max-width:560px){.outcomes{grid-template-columns:1fr;row-gap:30px}}
  .outcome{padding:0 28px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--line)}
  .outcome:first-child{padding-left:0;border-left:0}
  @media(max-width:900px){.outcome:nth-child(2n+1){padding-left:0;border-left:0}}
  @media(max-width:560px){.outcome{padding-left:0;border-left:0}}
  .outcome h3{font-size:17px;line-height:1.3}
  .outcome p{color:var(--dim);font-size:14px;line-height:1.6}
  .objection{border-top:1px solid var(--line);margin-top:44px;padding-top:24px;
    display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
  .objection strong{font-size:15px;font-weight:600;letter-spacing:-.02em}
  .objection span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
  @media(max-width:520px){.objection{padding:18px 22px}}

  /* ---------------- custom / capabilities ---------------- */
  /* Hairline-divided columns, no card fills — the references use rules and
     negative space where a lesser page would use a bordered box. */
  /* Six columns of figures. Breakpoints rewritten as one ladder — the old
     set had overlapping nth-child overrides that left some columns indented
     and others not, and collapsed to a single column on phones, where each
     capability then ate half a screen of empty space. */
  .capgrid{display:grid;gap:0;grid-template-columns:repeat(5,1fr);--cols:5}
  @media(max-width:1180px){.capgrid{grid-template-columns:repeat(3,1fr);--cols:3;row-gap:48px}}
  @media(max-width:720px){.capgrid{grid-template-columns:repeat(2,1fr);--cols:2;row-gap:36px;column-gap:20px}}
  .cap{margin:0;display:flex;flex-direction:column;color:var(--muted);
    padding-left:26px;border-left:1px solid var(--line)}
  .cap:nth-child(5n+1){padding-left:0;border-left:0}
  @media(max-width:1180px){.cap{padding-left:24px}.cap:nth-child(3n+1){padding-left:0;border-left:0}
    
    .cap:nth-child(3n+1){padding-left:0;border-left:0}}
  @media(max-width:720px){.cap{padding-left:0;border-left:0}}
  .figlabel{font-family:var(--mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;
    color:var(--dim);display:block;padding-bottom:22px;min-height:calc(1.5em + 22px);line-height:1.5}
  .fig{width:100%;height:142px;display:block;color:var(--muted);margin-bottom:28px;
    transition:color var(--t-mid) var(--ease-io),transform var(--t-slow) var(--ease-out)}
  @media(max-width:1180px){.fig{height:118px;margin-bottom:22px}}
  @media(max-width:720px){
    .fig{height:74px;margin-bottom:16px}
    .figlabel{padding-bottom:14px;min-height:calc(1.5em + 14px)}
  }
  .cap:hover .fig{color:var(--text);transform:translateY(-3px)}
  .cap strong{font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--text)}
  .cap span{font-size:13.5px;color:var(--dim);line-height:1.55;margin-top:9px;padding-bottom:4px}
  @media(max-width:720px){.cap strong{font-size:14.5px}.cap span{font-size:13px;margin-top:7px}}
  .fig g{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300);
    transition:stroke-dashoffset 1.4s var(--ease-out)}
  .seen .fig g,.cap.drawn .fig g{stroke-dashoffset:0}
  .capnote{margin-top:46px;font-size:clamp(16px,1.7vw,19px);max-width:56ch;line-height:1.5;letter-spacing:-.015em}
  .capnote em{font-style:normal;color:var(--muted)}
  /* where the money goes */
  .econ{margin-top:44px;border-top:1px solid var(--line);padding-top:30px}
  .econ-bar{display:flex;height:8px;border-radius:999px;overflow:hidden;gap:2px}
  .econ-bar span{display:block;border-radius:2px}
  .econ-bar .e1{background:rgba(244,241,234,.22)}
  .econ-bar .e2{background:rgba(244,241,234,.4)}
  .econ-bar .e3{background:var(--blue)}
  .econ-key{display:flex;gap:30px;flex-wrap:wrap;margin-top:18px}
  .econ-key span{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
    font-size:10.5px;letter-spacing:.06em;color:var(--muted)}
  .econ-key i{width:9px;height:9px;border-radius:2px;flex:none}
  .econ-key .k1{background:rgba(244,241,234,.22)}
  .econ-key .k2{background:rgba(244,241,234,.4)}
  .econ-key .k3{background:var(--blue)}
  .econ-note{margin-top:16px;font-size:13.5px;color:var(--dim);max-width:70ch;line-height:1.6}

  /* ---------------- feature row ---------------- */
  .frow{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
  .frow.flip{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .frow.flip .frow-copy{order:-1}
  @media(max-width:940px){.frow,.frow.flip{grid-template-columns:1fr;gap:34px}.frow.flip .frow-copy{order:0}}
  .frow-copy h2{margin-top:16px;font-size:clamp(24px,2.7vw,33px)}
  .frow-copy .lead{margin-top:16px}
  .checks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:10px}
  .checks li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.45}
  .checks li::before{content:"—";font-family:var(--mono);color:var(--blue);flex:none;font-size:12px;margin-top:2px}

  /* ---------------- process ---------------- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-top:1px solid var(--line-2);padding-top:34px}
  @media(max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:44px}}
  @media(max-width:560px){.steps{grid-template-columns:1fr;row-gap:36px}}
  .step{padding:0 28px;display:flex;flex-direction:column;gap:11px;border-left:1px solid var(--line)}
  .step:first-child{padding-left:0}
  @media(max-width:900px){.step:nth-child(2n+1){padding-left:0}}
  @media(max-width:560px){.step{padding-left:0}}
  .step .n{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.14em}
  .step strong{font-size:17px;font-weight:600;letter-spacing:-.02em}
  .step p{font-size:14px;color:var(--muted);line-height:1.5}

  /* ---------------- fit ---------------- */

  /* ---------------- deliverable figures ---------------- */
  .dfig{width:100%;height:96px;display:block;color:var(--muted);margin:6px 0 18px;
    transition:color var(--t-mid) var(--ease-io),transform var(--t-slow) var(--ease-out)}
  .dv:hover .dfig{color:var(--text);transform:translateY(-3px)}
  @media(max-width:720px){.dfig{height:64px;margin:2px 0 12px}}

  /* ---------------- process timeline ----------------
     The rail fills as the section passes, so the four stages read as a
     sequence you are moving along rather than four more columns of text. */
  .timeline{position:relative}
  .tl-rail{position:relative;height:1px;background:var(--line-2);margin-bottom:0}
  .tl-fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--blue);
    box-shadow:0 0 12px rgba(76,141,255,.5)}
  .timeline .steps{border-top:0;padding-top:0}
  .timeline .step{padding-top:30px;position:relative}
  .tl-dot{position:absolute;top:-4.5px;left:0;width:9px;height:9px;border-radius:50%;
    background:var(--ink);border:1px solid var(--line-2);transition:border-color var(--t-mid) var(--ease-io),
      background var(--t-mid) var(--ease-io),transform var(--t-mid) var(--ease-out)}
  .timeline .step:not(:first-child) .tl-dot{left:28px}
  .step.lit .tl-dot{border-color:var(--blue);background:var(--blue);transform:scale(1.25)}
  .tl-when{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 9px;align-self:flex-start;margin-top:4px}
  .step.lit .tl-when{color:var(--muted);border-color:var(--line-2)}
  .timeline .step::before{display:none}
  @media(max-width:900px){
    .tl-rail{display:none}
    .timeline .step{padding-top:0;padding-left:24px;border-left:1px solid var(--line)}
    .tl-dot{left:-5px !important;top:6px}
  }

  /* ---------------- who it's for ---------------- */
  .fitrows{border-top:1px solid var(--line-2)}
  .fitrow{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:baseline;
    padding:22px 0;border-bottom:1px solid var(--line)}
  .fitrow:last-child{border-bottom:0}
  .fnum{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--dim)}
  .fitrow p{font-size:clamp(16px,1.9vw,21px);line-height:1.4;letter-spacing:-.02em;color:var(--text)}
  @media(max-width:620px){.fitrow{grid-template-columns:38px minmax(0,1fr);gap:12px;padding:18px 0}
    .fitrow p{font-size:16px}}
  .fitnote{margin-top:32px;font-size:14.5px;color:var(--dim);line-height:1.65;max-width:74ch}
  .fitnote b{color:var(--text);font-weight:500}

  /* ---------------- proof placeholders ---------------- */
  body[data-proof="off"] [data-proof-block]{display:none !important}
  .proof-strip{padding:52px 0;border-top:1px solid var(--line);text-align:center}
  .proof-strip .eyebrow{justify-content:center}
  .proof-strip .eyebrow::before{display:none}
  .logos{display:flex;align-items:center;justify-content:center;gap:52px;flex-wrap:wrap;margin-top:28px}
  .logo-slot{width:130px;height:36px;border:1px dashed var(--line-2);border-radius:6px;
    display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:9.5px;
    letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
  .logo-slot img{width:100%;height:100%;object-fit:contain;opacity:.6;filter:grayscale(1)}
  .line-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  @media(max-width:1100px){.line-grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:760px){.line-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.line-grid{grid-template-columns:1fr}}
  .line-card{display:block;border:1px solid var(--line-2);border-radius:14px;padding:22px;
    background:linear-gradient(180deg,var(--surface),rgba(11,15,20,.6));
    transition:border-color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io)}
  a.line-card:hover{border-color:var(--muted);background:linear-gradient(180deg,var(--surface-2),rgba(11,15,20,.6))}
  .line-card.is-primary{border-color:rgba(76,141,255,.4)}
  .line-card h3{margin:12px 0 8px;font-size:19px}
  .line-card p{color:var(--muted);font-size:13.5px;line-height:1.55}
  .line-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 8px;border:1px solid var(--line-2);border-radius:99px;color:var(--dim)}
  .line-tag.on{color:var(--blue);border-color:rgba(76,141,255,.4);background:rgba(76,141,255,.08)}
  .case-grid,.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:900px){.case-grid,.quote-grid{grid-template-columns:1fr}}
  .case{border:1px solid var(--line-2);border-radius:14px;padding:28px;min-height:252px;
    background:linear-gradient(180deg,var(--surface),rgba(11,15,20,.6));display:flex;flex-direction:column;gap:12px}
  .case p{color:var(--muted);font-size:14.5px;line-height:1.55;flex:1}
  .case .metric{border-top:1px solid var(--line);padding-top:16px}
  .case .metric b{display:block;font-size:29px;font-weight:600;letter-spacing:-.03em}
  .case .metric span{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
  .quote{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:26px;
    display:flex;flex-direction:column;gap:18px}
  .quote blockquote{font-size:16.5px;line-height:1.5;letter-spacing:-.015em;flex:1}
  .quote figcaption{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding-top:16px}
  .avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);
    flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;color:var(--dim)}
  .who b{display:block;font-size:13.5px;font-weight:500}
  .who span{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

  /* ---------------- pricing ---------------- */
  .price-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:16px}
  @media(max-width:900px){.price-grid{grid-template-columns:1fr}}
  .offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  @media(max-width:980px){.offer-grid{grid-template-columns:1fr}}
  .pcard{position:relative;border:1px solid var(--line-2);border-radius:16px;padding:34px;overflow:hidden;
    background:linear-gradient(180deg,var(--surface),rgba(11,15,20,.72));display:flex;flex-direction:column}
  .pcard.feature{border-color:rgba(215,168,79,.3)}
  .pcard.feature::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,var(--amber),rgba(215,168,79,0))}
  .pcard .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .pcard h3{margin-top:14px}
  .price{font-size:clamp(36px,4.4vw,48px);font-weight:600;letter-spacing:-.035em;margin-top:20px;line-height:1}
  .price.amber{color:var(--amber)}
  .price.quiet{color:var(--muted)}
  .price-sub{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:10px;line-height:1.6}
  .plist{list-style:none;display:flex;flex-direction:column;gap:10px;margin:24px 0 28px;flex:1}
  .plist li{display:flex;gap:11px;font-size:14.5px;color:var(--muted);line-height:1.45}
  .plist li::before{content:"—";font-family:var(--mono);color:var(--dim);flex:none;font-size:12px;margin-top:2px}
  /* scope row: the same chip language as the console, so the two cards are
     visibly different sizes of the same thing rather than two price points */
  .scope{border-top:1px solid var(--line);padding-top:16px;margin-bottom:26px}
  .scope-h{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--dim);margin-bottom:10px}
  .scope-row{display:flex;flex-wrap:wrap;gap:5px}
  .scope-row .mod{font-size:9.5px;padding:4px 8px}
  .mod.off{color:var(--dim);border-color:var(--line);background:none;opacity:.5;text-decoration:line-through}
  .scope-note{font-size:12.5px;color:var(--dim);line-height:1.55;margin:-8px 0 22px}
  .pcard .btn{align-self:flex-start}
  .expansion-card{border:1px solid var(--line-2);border-radius:16px;padding:34px;background:rgba(244,241,234,.018);display:flex;flex-direction:column}
  .expansion-card .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
  .expansion-card h3{margin-top:14px;font-size:clamp(24px,2.7vw,34px)}
  .expansion-card>p{margin-top:16px;color:var(--muted);font-size:14.5px;line-height:1.65}
  .expansion-path{display:flex;flex-direction:column;margin-top:26px;border-top:1px solid var(--line)}
  .expansion-path span{padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
  .expansion-path span::before{content:"+";color:var(--blue);margin-right:10px}
  .expansion-card .small-note{margin-top:auto;padding-top:24px;color:var(--text);font-size:13.5px}
  /* aftercare: full-width rows so it cannot read as a second tier of cards
     paired to the two above it */
  /* pricing is the tallest block on a phone — tighten it there */
  @media(max-width:720px){
    .pcard{padding:24px}
    .pcard h3{margin-top:10px}
    .price{margin-top:14px}
    .price-sub{margin-top:8px}
    .plist{gap:8px;margin:18px 0 18px}
    .plist li{font-size:13.5px}
    .scope{margin-bottom:18px;padding-top:14px}
  }
  .after{margin-top:40px;border-top:1px solid var(--line-2);padding-top:28px}
  @media(max-width:720px){.after{margin-top:26px;padding-top:20px}.arow{padding:15px 0}}
  .after-head{display:flex;justify-content:space-between;gap:28px;align-items:baseline;flex-wrap:wrap;margin-bottom:18px}
  .after-head p{color:var(--dim);font-size:13.5px;max-width:46ch}
  .arow{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:24px;align-items:center;
    padding:20px 0;border-bottom:1px solid var(--line)}
  .arow:last-child{border-bottom:0}
  .arow .an{font-size:17px;font-weight:600;letter-spacing:-.02em}
  .arow p{color:var(--muted);font-size:14px;line-height:1.5}
  .arow .ap{font-family:var(--mono);font-size:15px;color:var(--text);white-space:nowrap}
  .arow .ap em{font-style:normal;color:var(--dim);font-size:12px}
  .arow .ap small{display:block;color:var(--dim);font-size:10px;margin-top:4px}
  .after-note{margin:16px 0 0;color:var(--muted);font-size:13.5px;line-height:1.6;max-width:76ch}
  @media(max-width:720px){
    /* explicit placement: auto-flow pushed the price below the description */
    .arow{grid-template-columns:1fr auto;gap:8px 18px}
    .arow .an{grid-column:1;grid-row:1}
    .arow .ap{grid-column:2;grid-row:1;align-self:baseline}
    .arow p{grid-column:1/-1;grid-row:2}
  }
  .tools-strip{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:38px;align-items:start;
    margin-top:40px;padding-top:30px;border-top:1px solid var(--line-2)}
  .tools-strip h3{margin-top:13px;font-size:clamp(22px,2.5vw,30px)}
  .tool-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .tool-items>a,.tool-items>span{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line-2);border-radius:12px;
    padding:18px;background:rgba(244,241,234,.018);transition:border-color var(--t-fast) var(--ease-io)}
  .tool-items>a:hover{border-color:var(--muted)}
  .tool-items b{font-size:15px;font-weight:500}
  .tool-items span span{font-family:var(--mono);font-size:10.5px;line-height:1.55;color:var(--dim)}
  @media(max-width:760px){.tools-strip{grid-template-columns:1fr;gap:20px;margin-top:26px;padding-top:22px}.tool-items{grid-template-columns:1fr}}

  /* deliverables */

  .deliver{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    border-top:1px solid var(--line-2);padding-top:34px}
  @media(max-width:940px){.deliver{grid-template-columns:1fr 1fr;row-gap:44px}}
  @media(max-width:560px){.deliver{grid-template-columns:1fr 1fr;column-gap:20px;row-gap:32px}}
  .dv{padding:0 28px;display:flex;flex-direction:column;gap:11px;border-left:1px solid var(--line)}
  .dv:first-child{padding-left:0;border-left:0}
  @media(max-width:940px){.dv:nth-child(2n+1){padding-left:0;border-left:0}}
  @media(max-width:560px){.dv{padding-left:0;border-left:0}.dv .num{font-size:9px}.dv strong{font-size:15px}.dv p{font-size:13px}}
  .dv .num{color:var(--dim)}
  .dv strong{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
  .dv p{font-size:14px;color:var(--dim);line-height:1.6}

  /* ---------------- lead magnet strip ---------------- */
  .guide-strip{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;
    border:1px solid var(--line-2);border-radius:18px;padding:44px;
    background:linear-gradient(160deg,rgba(76,141,255,.06),var(--ink) 58%);
    transition:border-color var(--t-fast) var(--ease-io),transform var(--t-mid) var(--ease-out)}
  .guide-strip:hover{border-color:rgba(76,141,255,.4);transform:translateY(-3px)}
  @media(max-width:900px){.guide-strip{grid-template-columns:1fr;gap:30px;padding:32px}}
  .gs-copy h2{margin-top:16px;font-size:clamp(22px,2.5vw,32px)}
  .gs-copy .lead{margin-top:16px;font-size:15px}
  .gs-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-weight:500;font-size:15px;color:var(--blue)}
  .guide-strip:hover .gs-cta .a{transform:translateX(3px)}
  .gs-cta .a{font-family:var(--mono);font-size:13px;transition:transform .2s var(--ease-out)}
  .gs-art svg{width:100%;height:auto}
  @media(max-width:900px){.gs-art{display:none}}

  /* ---------------- FAQ accordion ---------------- */
  .faq{border-top:1px solid var(--line)}
  details.q{border-bottom:1px solid var(--line)}
  details.q summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;
    gap:24px;align-items:center;font-size:clamp(16px,1.8vw,19px);font-weight:500;letter-spacing:-.02em}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary .pm{position:relative;width:15px;height:15px;flex:none}
  details.q summary .pm::before,details.q summary .pm::after{content:"";position:absolute;background:var(--muted);
    border-radius:2px;transition:transform .25s,opacity .25s}
  details.q summary .pm::before{left:0;right:0;top:7px;height:1.5px}
  details.q summary .pm::after{top:0;bottom:0;left:7px;width:1.5px}
  details.q[open] summary .pm::after{transform:rotate(90deg);opacity:0}
  details.q .ans{color:var(--muted);font-size:15px;line-height:1.6;max-width:70ch;padding:0 0 26px}

  /* ---------------- close ---------------- */
  .close{padding:var(--rhythm) 0;border-top:1px solid var(--line)}
  .close-box{position:relative;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
    background:linear-gradient(180deg,var(--surface),var(--ink));padding:72px 44px;text-align:center}
  .close-box::before{content:"";position:absolute;left:24%;right:24%;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--blue),transparent)}
  .close-box>*{position:relative}
  .close-box .eyebrow{justify-content:center}
  .close-box .eyebrow::before{display:none}
  .close-box h2{margin:20px auto 0;max-width:20ch;text-wrap:balance}
  .close-box .lead{margin:18px auto 0;max-width:50ch}
  .close-cta{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:32px}
  .runway{display:flex;justify-content:center;flex-wrap:wrap;margin-top:32px;
    font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
  .runway span{padding:0 18px;border-right:1px solid var(--line-2)}
  .runway span:last-child{border-right:0}
  @media(max-width:560px){.close-box{padding:52px 22px}.close-cta .btn{width:100%;justify-content:center}
    .runway span{padding:4px 12px;border-right:0}}

  footer{border-top:1px solid var(--line);padding:72px 0 34px}
  .ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:64px;padding-bottom:52px}
  @media(max-width:900px){.ft-top{grid-template-columns:1fr;gap:44px}}
  .ft-logo{width:150px;height:auto;opacity:.9}
  .ft-brand p{margin-top:20px;font-size:14px;line-height:1.65;color:var(--dim);max-width:42ch}
  .ft-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;color:var(--blue)}
  .ft-cta:hover{color:var(--text)}
  .ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  @media(max-width:560px){.ft-cols{grid-template-columns:1fr 1fr;gap:28px}}
  .ft-cols div{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
  .ft-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--dim);margin-bottom:3px}
  .ft-cols a{position:relative;font-size:14px;color:var(--muted);transition:color var(--t-fast) var(--ease-io)}
  .ft-cols a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-fast) var(--ease-out)}
  .ft-cols a:hover{color:var(--text)}
  .ft-cols a:hover::after{transform:scaleX(1)}
  .ft-base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
    border-top:1px solid var(--line);padding-top:26px;
    font-family:var(--mono);font-size:11px;color:var(--dim)}

  /* ==========================================================
     MOTION SYSTEM
     One easing curve for entrances, one for interface response.
     Everything below is gated by prefers-reduced-motion at the end
     of this stylesheet, and every animated element is legible with
     motion disabled — nothing depends on movement to be readable.
     ========================================================== */
  :root{
    /* Timing lifted from the references: interface response is fast and
       symmetrical (easeInOutCubic at 200ms), entrances are a short fade plus a
       14px lift. Slower curves read as sluggish next to these sites. */
    --ease-io:cubic-bezier(.645,.045,.355,1);
    --ease-out:cubic-bezier(.22,.72,.24,1);
    --t-fast:.2s; --t-mid:.4s; --t-slow:.6s;
    --lift:14px;
  }
  .reveal{opacity:0;transform:translateY(var(--lift));
    transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out)}
  .reveal.seen{opacity:1;transform:none}

  /* ==========================================================
     FRAME MATRIX — the ambient layer.
     A contact sheet of empty frames behind the hero. Individual frames
     brighten in a travelling diagonal rhythm, as though the archive were
     being walked. Per-cell delay rather than per-cell keyframes: same
     choreography, one animation definition.
     ========================================================== */
  .matrix{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
    -webkit-mask-image:radial-gradient(ellipse 78% 68% at 62% 26%,#000 4%,transparent 70%);
    mask-image:radial-gradient(ellipse 78% 68% at 62% 26%,#000 4%,transparent 70%)}
  .matrix-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));
    gap:9px;padding:14px;width:100%;height:100%;align-content:start}
  .mcell{aspect-ratio:16/10;border:1px solid rgba(244,241,234,.16);border-radius:2px;opacity:.09}
  .anim .mcell{animation:cellPulse 7s var(--ease-io) infinite;animation-delay:var(--d,0s)}
  @keyframes cellPulse{
    0%,64%,100%{opacity:.09;border-color:rgba(244,241,234,.16)}
    12%{opacity:.62;border-color:rgba(76,141,255,.55)}
    26%{opacity:.16;border-color:rgba(244,241,234,.2)}
  }
  /* directional variants */
  .reveal.from-l{transform:translateX(-22px)}
  .reveal.from-r{transform:translateX(22px)}
  .reveal.from-l.seen,.reveal.from-r.seen{transform:none}
  /* staggered children: the parent gets .stagger, each child lifts in turn */
  .stagger>*{opacity:0;transform:translateY(14px);
    transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out)}
  .stagger.seen>*{opacity:1;transform:none}
  .stagger.seen>*:nth-child(1){transition-delay:.02s}
  .stagger.seen>*:nth-child(2){transition-delay:.08s}
  .stagger.seen>*:nth-child(3){transition-delay:.14s}
  .stagger.seen>*:nth-child(4){transition-delay:.20s}
  .stagger.seen>*:nth-child(5){transition-delay:.26s}
  .stagger.seen>*:nth-child(6){transition-delay:.32s}

  /* ---- hero entrance choreography ----
     Transitions rather than keyframes, driven by a .ready class. Chrome pauses
     animations on a hidden document, so a keyframe entrance with fill:both left
     the hero blank for anyone who opened the page in a background tab. With a
     class toggle plus the JS failsafe, content always ends up visible. */
  .boot .hero-in{opacity:0;transform:translateY(20px);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
  .boot.ready .hero-in{opacity:1;transform:none}
  .boot .he-1{transition-delay:.04s}
  .boot .he-2{transition-delay:.12s}
  .boot .he-3{transition-delay:.20s}
  .boot .he-4{transition-delay:.30s}
  .boot .he-5{transition-delay:.38s}
  /* Headline reveals word by word, each lifting out of a blur. Line-level
     masking read as a single slab; per-word gives the type some weight. */
  h1 .l{overflow:hidden}
  /* direct child only: the injected word spans live inside this one and must
     stay inline, or every word takes its own line */
  h1 .l > span{display:block}
  h1 .l .w{display:inline-block;white-space:pre}
  .boot h1 .w{transform:translateY(88%);filter:blur(7px);opacity:0;
    transition:transform .82s var(--ease-out),filter .62s var(--ease-out),opacity .5s linear;
    transition-delay:var(--wd,0s)}
  .boot.ready h1 .w{transform:none;filter:blur(0);opacity:1}
  /* the console rises last and settles */
  .boot .console-boot{opacity:0;transform:translateY(26px) scale(.985);
    transition:opacity 1s var(--ease-out) .34s,transform 1s var(--ease-out) .34s}
  .boot.ready .console-boot{opacity:1;transform:none}

  /* ---------------- modal ---------------- */
  .modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px}
  .modal.open{display:flex}
  .modal-scrim{position:absolute;inset:0;background:rgba(5,7,10,.76);backdrop-filter:blur(6px)}
  .modal-card{position:relative;z-index:2;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
    background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 50px 130px -40px rgba(0,0,0,.95)}
  .modal-head{padding:26px 28px 0;position:relative}
  .modal-head .mk{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
  .modal-head h3{font-size:23px;margin:14px 0 8px}
  .modal-head p{color:var(--muted);font-size:14.5px;line-height:1.5}
  .modal-close{position:absolute;top:20px;right:20px;width:32px;height:32px;border:1px solid var(--line-2);
    border-radius:9px;color:var(--muted);font-size:16px;cursor:pointer}
  .modal-close:hover{color:var(--text);border-color:var(--muted)}
  .mform{padding:22px 28px 28px;display:flex;flex-direction:column;gap:14px}
  .frow2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:460px){.frow2{grid-template-columns:1fr}}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .field label .req{color:var(--blue)}
  .field input,.field textarea,.field select{background:var(--ink);border:1px solid var(--line-2);border-radius:9px;
    padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:15px;width:100%}
  .field textarea{resize:vertical;min-height:84px;line-height:1.5}
  .err{font-family:var(--mono);font-size:11px;color:#d98b7a;display:none}
  .err.show{display:block}
  .fine{font-family:var(--mono);font-size:10.5px;color:var(--dim);text-align:center}
  .msuccess{padding:44px 32px 40px;text-align:center;display:none}
  .msuccess.show{display:block}
  .msuccess .chk{width:48px;height:48px;border-radius:50%;border:1px solid rgba(76,141,255,.4);color:var(--blue);
    display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 20px}
  .msuccess h3{font-size:22px}
  .msuccess p{color:var(--muted);font-size:14.5px;line-height:1.5;max-width:340px;margin:10px auto 22px}
  body.modal-lock{overflow:hidden}

  /* ==========================================================
     MICRO-INTERACTIONS
     ========================================================== */
  /* buttons get a subtle lift and their arrow leads */
  .btn{transform:translateZ(0);transition:background var(--t-fast) var(--ease-io),
    border-color var(--t-fast) var(--ease-io),box-shadow var(--t-fast) var(--ease-io),
    transform var(--t-fast) var(--ease-out)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0);transition-duration:.06s}

  /* cards and tiles lift off the grid */
  .outcome,.cap,.dv{position:relative;transition:background var(--t-mid) var(--ease-io),
    transform var(--t-mid) var(--ease-out)}
  .outcome:hover,.cap:hover,.dv:hover{transform:translateY(-3px)}
  .case,.quote{transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-io)}
  .case:hover,.quote:hover{transform:translateY(-4px);border-color:var(--muted)}
  .pcard{transition:transform var(--t-mid) var(--ease-out),border-color var(--t-mid) var(--ease-io)}
  .pcard:hover{transform:translateY(-4px)}


  /* the mini surfaces settle in when their panel becomes current */
  .panel:not([hidden]) .mini{animation:panelIn .44s var(--ease-out) both}
  @keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .panel:not([hidden]) .panel-copy{animation:panelIn .44s var(--ease-out) .06s both}

  /* FAQ: animate the disclosure open rather than snapping */
  details.q .ans{overflow:hidden}
  details.q[open] .ans{animation:ansIn .38s var(--ease-out) both}
  @keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  details.q summary{transition:color var(--t-fast) var(--ease-io)}
  details.q summary:hover{color:var(--text)}
  details.q summary .pm::before,details.q summary .pm::after{background:var(--muted)}
  details.q:hover summary .pm::before,details.q:hover summary .pm::after{background:var(--text)}

  /* console follows the pointer with a faint light, like glass catching a lamp */
  .console{--px:50%;--py:0%}
  .console::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;
    background:radial-gradient(420px circle at var(--px) var(--py),rgba(244,241,234,.045),transparent 62%);
    opacity:0;transition:opacity .35s var(--ease-io)}
  .console:hover::after{opacity:1}

  /* aftercare rows and sidebar entries respond to hover */
  .arow{transition:background var(--t-fast) var(--ease-io)}
  .arow:hover{background:rgba(244,241,234,.02)}
  .c-item,.c-sub{transition:color var(--t-fast) var(--ease-io),background var(--t-fast) var(--ease-io)}
  .c-item:hover,.c-sub:hover{color:var(--text)}
  .logo-slot{transition:border-color var(--t-fast) var(--ease-io)}
  .logo-slot:hover{border-color:var(--muted)}

  /* nav links get an underline that grows from the left */
  .nav-r a{position:relative}
  .nav-r a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--blue);
    transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-fast) var(--ease-out)}
  .nav-r a:hover::after{transform:scaleX(1)}

  /* Reduced motion: strip every animation and transition, and neutralise the
     transform-based entrance states so nothing can end up stuck off-screen. */
  /* ==========================================================
     TOUCH
     On a coarse pointer every control gets a 44px hit area. The visual
     size is unchanged — the padding grows, not the chip.
     ========================================================== */
  @media(pointer:coarse){
    .bs,.facet,.tab,.chip{min-height:44px;display:inline-flex;align-items:center}
    .facet,.chip{padding-top:0;padding-bottom:0}
    .nav-menu a{padding-top:17px;padding-bottom:17px}
    .ft-cols a,.ft-cta,.shot-cap a,.brand{display:inline-flex;align-items:center;min-height:44px}
    .ft-cols div{gap:4px}
    .console-open,.gs-cta{min-height:44px;align-items:center}
    details.q summary{padding-top:22px;padding-bottom:22px}
    /* pointer-driven ornament is meaningless without a pointer */
    .console::after{display:none}
    .card:hover .th img{transform:none}
  }
  /* the matrix is ambient, not content: it should not cost a phone battery */
  /* The matrix is ambient decoration. On a phone the copy runs full width so
     it sits under the type, it costs battery, and it buys nothing. Cut it. */
  @media(max-width:760px){.matrix{display:none}}

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal,.stagger>*,.hero-in,.console-boot,h1 .l span,h1 .w,.mini,.panel-copy{
      opacity:1!important;transform:none!important;filter:none!important}
    .console{transform:none!important}
    .railband-track span{transform:none!important}
    .progress{display:none}
    .step::before{transform:none!important}
    .console::after{display:none}
    .matrix{display:none}
    .railband-track{transform:none!important}
    .statement{height:auto;padding:var(--rhythm) 0}
    .statement .wrap{position:static;height:auto}
    .say-word{color:inherit!important;text-shadow:none!important}
  }