/* set synchronously in the head script above, before #gate is even parsed —
     this is what actually stops the flash, not the JS at the bottom of body
     that was already hiding it, just one or two paints too late. */
  html.gate-seen #gate{display:none}
  /* phones get no gate at all. Three full-bleed rows of "where does it hurt" is a
     whole screen of decision before the page has said anything, and the payoff —
     the picked sheet flying into the hero pile — is already skipped there because
     the pile is display:none. The class is set in the head script above, on the
     same 760px boundary as the PHONE constant in the script at the bottom. */
  html.no-gate #gate{display:none}
  :root{
    /* heritage stationery: royal violet ink on warm ivory, brass gold for the pen */
    --accent:#5438CC;
    --accent-2:#7053E8;
    --accent-deep:#3A2596;
    --accent-tint:#ECE8FB;
    --brass:#A8823B;
    --brass-deep:#84662A;
    --brass-tint:#F3ECDB;
    --paper:#F5F2EC;
    --text:#171425;
    --muted:#5C5768;
    --line:rgba(23,20,37,.14);
    --card:#FFFEFA;
    --shadow-sm:0 1px 2px rgba(23,20,37,.06),0 6px 18px rgba(23,20,37,.07);
    --shadow-md:0 2px 4px rgba(23,20,37,.06),0 18px 50px rgba(23,20,37,.12);
    /* the fixed nav's height: the pinned stage stops here instead of sliding under it */
    --nav:70px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* reserve the scrollbar gutter permanently. The gate locks scroll with
     overflow:hidden, which takes the scrollbar away; without a reserved gutter
     the whole page jumps 15px sideways the moment the gate closes. */
  html{scroll-behavior:auto;scrollbar-gutter:stable}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  body{
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    background:var(--paper);color:var(--text);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--accent);color:#fff}
  /* paper grain over everything */
  body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.045'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:multiply}
  .serif{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400}
  .hand{font-family:'Caveat',cursive;font-weight:600}

  #progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
    background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

  /* ---------------- nav ---------------- */
  /* frameless nav: ink on paper, backdrop only appears on scroll */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:transparent;transition:background .35s,box-shadow .35s,backdrop-filter .35s;
  }
  nav.scrolled{background:rgba(245,242,236,.88);backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--line)}
  /* on a phone the backdrop is always on: the frameless-over-hero effect is
     barely visible at this size, and the .scrolled toggle lives in a CDN script,
     so without this a failed load leaves body text scrolling through the bar */
  @media(max-width:760px){
    nav{background:rgba(245,242,236,.88);backdrop-filter:blur(14px)}
  }
  /* the nav.dark set that used to flip the bar to ink over the Guard section is gone
     with the dark Guard ground itself — nothing has added the class since. */
  .nav-in{max-width:1120px;margin:0 auto;padding:16px clamp(20px,5vw,44px);
    display:flex;align-items:center;justify-content:space-between;gap:28px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em}
  .logo .mark{height:28px;width:auto;display:block;object-fit:contain;transition:filter .35s}
  .logo em{font-style:normal;color:var(--accent)}
  .nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px;font-weight:600;color:var(--muted)}
  .nav-links > a:not(.btn){position:relative;padding:6px 0;transition:color .2s}
  .nav-links > a:not(.btn):hover{color:var(--text)}
  /* brass underline draws in on hover — the second ink */
  .nav-links > a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
    background:var(--brass);border-radius:2px;transition:right .25s ease}
  .nav-links > a:not(.btn):hover::after{right:0}
  .nav-links .btn{padding:10px 20px;border-radius:11px;box-shadow:none}
  .nav-links .btn:hover{transform:none;box-shadow:0 6px 18px rgba(84,56,204,.3)}
  .btn{
    display:inline-flex;align-items:center;gap:8px;justify-content:center;
    padding:12px 24px;border-radius:999px;border:none;cursor:pointer;
    font-family:inherit;font-weight:700;font-size:14.5px;color:#fff;
    background:var(--accent);box-shadow:0 8px 24px rgba(84,56,204,.35);
    transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px);background:var(--accent-deep);box-shadow:0 12px 32px rgba(84,56,204,.45)}
  .btn .arr{transition:transform .2s}
  .btn:hover .arr{transform:translateX(3px)}
  /* mobile nav v2: flat full-screen menu behind a burger, no nested accordions.
     .nav-extra stays in the markup for desktop's dropdowns; mobile hides it
     entirely and uses .mobile-menu instead. */
  .nav-extra{display:contents}
  /* 44px box, 34px of bars: the padding buys the touch target without moving the
     drawn burger, and the negative margin keeps it flush with the wrap's edge */
  .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;background:none;border:none;cursor:pointer;padding:5px;
    margin-right:-5px;flex-shrink:0}
  .nav-burger span{display:block;height:2px;background:var(--text);border-radius:2px;
    transition:transform .25s,opacity .25s}
  .nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-burger.open span:nth-child(2){opacity:0}
  .nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-menu{display:none}
  /* 900px, matching assets/site.css and the .navdrop rule below. At 820 the burger
     appeared a breakpoint later than the dropdowns disappeared, so between 821 and
     900 the nav had no Process or Use Cases and no burger to reach them with. */
  @media(max-width:900px){
    .nav-burger{display:flex}
    .nav-links > a:not(.btn),.nav-links > .nav-extra{display:none}
    .nav-links .btn{display:none}
    .mobile-menu{display:none;position:fixed;top:var(--nav);left:0;right:0;bottom:0;
      z-index:99;background:var(--paper);overflow-y:auto;
      padding:2px clamp(20px,5vw,44px) 36px}
    .mobile-menu.open{display:block}
    .mm-group{padding:13px 0;border-bottom:1px solid var(--line)}
    .mm-group b{display:block;font-family:'DM Mono',ui-monospace,monospace;font-size:11px;
      letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
    .mm-group a{display:flex;align-items:center;gap:13px;padding:11px 0;min-height:44px;
      font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
    .mm-group a i{display:none}
    .mm-n{flex-shrink:0;font-family:'DM Mono',monospace;font-size:12px;font-weight:500;
      color:var(--brass-deep)}
    .mm-link{display:flex;align-items:center;padding:11px 0 13px;min-height:44px;font-size:15px;
      font-weight:600;color:var(--muted)}
    .mobile-menu .btn{display:flex;width:100%;justify-content:center;margin-top:20px}
  }

  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}

  /* ---------------- nav mega-menu ---------------- */
  .navdrop{position:relative}
  .navdrop-t{display:flex;align-items:center;gap:7px;background:none;border:none;padding:6px 0;
    font:inherit;font-size:14.5px;font-weight:600;color:var(--muted);cursor:pointer;
    position:relative;transition:color .2s}
  .navdrop-t svg{transition:transform .3s;margin-top:1px}
  .navdrop-t::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
    background:var(--brass);border-radius:2px;transition:right .25s ease}
  .navdrop:hover .navdrop-t,.navdrop.on .navdrop-t{color:var(--text)}
  .navdrop:hover .navdrop-t::after,.navdrop.on .navdrop-t::after{right:0}
  .navdrop.on .navdrop-t svg{transform:rotate(180deg)}

  .navdrop-p{position:absolute;top:calc(100% + 16px);left:50%;width:min(600px,86vw);
    /* pull back half the panel's own width. max(), not min(): both operands are
       negative, so min() would pick the *wider* pull and shove the panel left. */
    margin-left:max(-300px,-43vw);background:var(--card);border:1px solid var(--line);
    border-radius:20px;box-shadow:var(--shadow-md);padding:26px 26px 22px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .28s,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
  .navdrop.on .navdrop-p{opacity:1;visibility:visible;transform:none}
  /* Use Cases sits far enough right that centring a 600px panel on its button put
     it up to 39px past the viewport between 901 and ~1210, and body's
     overflow-x:hidden clipped the right-hand column of links rather than
     scrolling. Anchored to the button's right edge instead. */
  .navdrop-p.end{left:auto;right:0;margin-left:0;margin-right:-24px}
  /* an invisible bridge so the pointer can cross the gap without the panel closing */
  .navdrop-p::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
  .dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
  .dd-grid a{display:flex;gap:14px;align-items:flex-start;padding:12px 12px;border-radius:13px;
    transition:background .22s}
  .dd-grid a:hover{background:var(--accent-tint)}
  /* one accent, four steps: the live site tints each number a different hue, which
     reads as decoration here. Violet is the machine acting, so all four share it. */
  .dd-n{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:var(--accent-tint);color:var(--accent-deep);
    font-family:'DM Mono',monospace;font-size:14px;font-weight:500;transition:background .22s}
  .dd-grid a:hover .dd-n{background:var(--accent);color:#fff}
  .dd-x b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
  .dd-x i{display:block;font-style:normal;margin-top:3px;font-size:13px;line-height:1.5;
    color:var(--muted)}
  @media(max-width:900px){.navdrop{display:none}}


  /* ---------------- hero ---------------- */
  header{position:relative;padding:170px 0 110px;text-align:center;overflow:hidden}
  .hero-bg{position:absolute;inset:0;z-index:-2;
    background-image:
      radial-gradient(52% 42% at 50% 32%,rgba(84,56,204,.08),transparent 70%),
      radial-gradient(circle,rgba(23,20,37,.05) 1px,transparent 1.4px);
    background-size:auto,26px 26px}
  /* pulse survives its original owner: .ivframe .rec still uses it */
  @keyframes pulse{50%{box-shadow:0 0 0 9px rgba(84,56,204,0)}}
  h1{font-size:clamp(44px,7.2vw,88px);line-height:1.02;letter-spacing:-.04em;font-weight:800;
    max-width:16ch;margin:26px auto 0}
  /* ∞resumes. — the loop is a drawn pen stroke, the word writes itself in */
  .infu{white-space:nowrap;color:var(--accent)}
  h1 .inf{height:.88em;width:auto;vertical-align:-10%;overflow:visible;margin-right:-.04em}
  h1 .inf .ip{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
  .infw{font-family:'Caveat',cursive;font-weight:600;font-size:1.22em;letter-spacing:0;
    clip-path:inset(-20% -6% -20% 0)}
  .infw2{font-family:'Caveat',cursive;font-weight:600;font-size:1.18em;color:var(--text);
    display:inline-block;margin-top:-.22em;position:relative}
  /* brass pen swash beneath the punchline — the second ink, planted up front */
  .infw2::after{content:"";position:absolute;left:5%;right:7%;bottom:-6px;height:15px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C 60 4 140 17 200 9 C 240 4 274 11 296 8' fill='none' stroke='%23A8823B' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
  /* handwritten hero note — shifted right so the arrow lands on the chosen resume */
  .hand-note{margin-top:64px;font-family:'Caveat',cursive;font-weight:600;font-size:23px;
    color:#3A403A;transform:rotate(-1.5deg);position:relative;left:9%}
  .hand-note svg{vertical-align:-22px;margin-left:8px}
  @media(max-width:900px){.hand-note{left:0}}
  .sub{font-size:clamp(16px,2vw,19.5px);color:var(--muted);max-width:54ch;margin:22px auto 0;line-height:1.6}
  .k{color:var(--text);font-weight:700}

  .waitlist{
    display:flex;gap:10px;max-width:480px;margin:36px auto 0;
    padding:8px;border-radius:999px;background:#fff;
    border:1px solid var(--line);box-shadow:var(--shadow-md);
    transition:border-color .2s,box-shadow .2s;
  }
  .waitlist:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(84,56,204,.14),var(--shadow-md)}
  /* 16px is a floor, not a taste: iOS Safari zooms the page on focusing any
     input below 16px and leaves it zoomed after submit */
  .waitlist input{flex:1;min-width:0;border:none;background:none;outline:none;
    padding:0 8px 0 16px;font-family:inherit;font-size:16px;color:var(--text)}
  /* #A6ABA6 measured 2.33:1 on white and failed AA. This is the only visible label
     the field has, so it has to be readable. */
  .waitlist input::placeholder{color:#6B6577}
  .form-note{font-size:13.5px;color:var(--muted);margin-top:14px}
  /* on a phone the pill leaves the input about 90px wide and the placeholder is
     cut mid-word, so it stacks instead */
  @media(max-width:520px){
    .waitlist{flex-direction:column;gap:8px;border-radius:20px;padding:10px}
    .waitlist input{padding:12px 14px;text-align:center}
    .waitlist .btn{width:100%;justify-content:center}
  }
  .form-ok{display:none;margin:36px auto 0;max-width:480px;padding:18px 24px;border-radius:18px;
    background:var(--accent-tint);border:1px solid rgba(84,56,204,.3);color:var(--accent-deep);font-weight:700;font-size:15px}

  /* flat scattered resume thumbnails behind hero (2D, slight rotation only) */
  .strewn{position:absolute;inset:0;pointer-events:none;z-index:-1}
  .doc{
    position:absolute;width:110px;height:156px;border-radius:8px;background:#fff;
    border:1px solid var(--line);box-shadow:var(--shadow-sm);padding:14px 12px;opacity:.5;
  }
  .doc i{display:block;height:7px;border-radius:4px;background:#E4E2DB;margin-bottom:8px}
  .doc i:first-child{width:55%;background:#D3D8D3}
  .doc i:nth-child(odd){width:88%}
  .doc i:nth-child(even){width:70%}
  /* recruiter scribbles on the pile */
  .doc .scrib{position:absolute;bottom:5px;left:11px;font-family:'Caveat',cursive;font-weight:600;
    font-size:19px;color:#8A918A;transform:rotate(-4deg)}
  .doc .streak{position:absolute;top:46px;left:10px;right:20px;height:9px;
    background:rgba(168,130,59,.35);border-radius:4px;transform:rotate(-1.5deg)}
  @media(max-width:900px){.doc{display:none}}

  /* ---------------- scrollytelling process ---------------- */
  #process{position:relative;height:480vh}
  @media(max-width:760px){#process{height:300vh}}
  /* no overflow clip — the resume travels outside the pin during its hero flight */
  /* pins where the stage meets the nav, not behind it, so the lock reads as the panel
     docking against the bar rather than snapping underneath it */
  .stage-pin{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));
    display:flex;align-items:center}
  /* the scene: one full-width cinematic stage */
  .scene{position:relative;width:min(1240px,calc(100% - 48px));height:min(660px,80vh);margin:0 auto}
  .scene::before{content:"";position:absolute;inset:-26px -22px;border-radius:30px;
    background-color:#FBFAF5;
    background-image:radial-gradient(circle,rgba(23,20,37,.07) 1px,transparent 1.4px);
    background-size:20px 20px;border:1px solid var(--line);
    box-shadow:inset 0 2px 14px rgba(23,20,37,.05)}

  /* giant backdrop verbs */
  .bigwords{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:30px}
  .bigwords span{position:absolute;left:2%;top:3%;font-family:'Instrument Serif',serif;font-style:italic;
    font-size:clamp(90px,15vw,210px);line-height:1;white-space:nowrap;opacity:0;
    color:transparent;-webkit-text-stroke:1.5px rgba(84,56,204,.22)}
  #bw3{font-size:clamp(80px,11.5vw,170px)}
  /* interview scene extras */
  .iv-q{font-family:'DM Mono',monospace;font-size:11px;color:var(--muted);margin-top:12px;line-height:1.5}
  .iv-cam .cam-nm{position:absolute;left:10px;bottom:8px;font-size:10.5px;font-weight:800;
    background:rgba(255,255,255,.85);border-radius:6px;padding:3px 8px;color:var(--text)}
  /* picture-in-picture: AgentR is on the call too */
  .iv-cam .pip{position:absolute;right:8px;top:8px;width:80px;height:54px;border-radius:8px;
    background:#fff;box-shadow:0 2px 8px rgba(23,20,37,.14);display:grid;place-items:center}
  .iv-cam .pip img{height:14px;width:auto;display:block}

  /* phase copy: big editorial type, left third */
  /* centred by flex, NOT by translateY(-50%): the scene timeline tweens y on these
     blocks, and a gsap y overwrite silently throws away any transform centring */
  .pcopy{position:absolute;left:1.5%;top:0;bottom:0;width:min(320px,27%);opacity:0;
    display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
  .pcopy .pn{display:inline-block;font-size:22px;color:var(--brass-deep);transform:rotate(-2deg)}
  .pcopy h3{font-size:clamp(28px,3.1vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin-top:10px}
  .pcopy h3 .serif{color:var(--accent);font-size:1.06em}
  .pcopy p{color:var(--muted);font-size:15.5px;line-height:1.6;margin-top:14px}

  @media(max-width:960px){
    .scene{height:76vh}
    .pcopy{left:4%;top:0;bottom:auto;justify-content:flex-start;width:86%}
    .pcopy h3{font-size:24px}
    .pcopy p{font-size:13.5px;margin-top:8px}
    .bigwords span{font-size:100px;top:auto;bottom:2%}
  }

  /* handwritten phase note, top-right inside the work surface */
  .phase-chip{position:absolute;right:6px;top:-6px;z-index:6;transform:rotate(-2deg);
    font-family:'Caveat',cursive;font-weight:600;font-size:23px;color:#3A403A}
  .phase-chip .txts{display:grid}
  .phase-chip .txts span{grid-area:1/1;opacity:0;white-space:nowrap}

  /* four quiet beats on the mat: where you are in the pipeline */
  .sdots{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);display:flex;gap:10px;z-index:6}
  .sdots i{width:9px;height:9px;border-radius:50%;background:#DAD4C6}

  /* the resume document */
  /* rank: the rest of the pile, fanned out behind the winner */
  .backsheet{position:absolute;left:calc(52% - 190px);top:calc(52% - min(283px,32vh));
    height:min(566px,64vh);aspect-ratio:210/297;border-radius:14px;z-index:1;
    background-color:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);opacity:0;
    background-image:repeating-linear-gradient(180deg,transparent 0 26px,#EFEDE6 26px 33px);
    background-repeat:no-repeat;background-position:30px 88px;
    background-size:calc(100% - 60px) calc(100% - 130px)}

  .resume{
    /* no transform baseline — GSAP owns the transform for the hero→stage flight */
    position:absolute;left:calc(52% - 190px);top:calc(52% - min(283px,32vh));pointer-events:none;z-index:2;
    /* proper A4 sheet: 210 x 297 */
    height:min(566px,64vh);aspect-ratio:210/297;width:auto;max-width:88%;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow-md);padding:30px;overflow:hidden;
  }
  .r-head{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .r-head .av{width:46px;height:46px;border-radius:13px;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:15px}
  .r-head b{font-size:18px;letter-spacing:-.01em;display:block}
  .r-head small{color:var(--muted);font-size:12.5px;white-space:nowrap}
  .r-score{
    margin-left:auto;width:52px;height:52px;border-radius:50%;
    background:var(--accent);color:#fff;display:grid;place-items:center;
    font-weight:800;font-size:17px;box-shadow:0 6px 18px rgba(84,56,204,.4);
    transform:scale(0);
  }
  .r-body{padding-top:16px;font-size:13px}
  .r-sec{font-family:'DM Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin:14px 0 8px}
  .r-line{position:relative;height:9px;border-radius:5px;background:#EAE5D8;margin-bottom:9px}
  .r-line.w70{width:70%}.r-line.w85{width:85%}.r-line.w60{width:60%}.r-line.w90{width:90%}
  .r-claim{
    position:relative;font-size:12.5px;line-height:1.5;color:#2A2F2A;font-weight:600;
    padding:7px 9px;border-radius:8px;margin-bottom:8px;background:transparent;transition:background .2s;
  }
  .r-claim .mark{position:absolute;right:8px;top:50%;transform:translateY(-50%) scale(0);
    width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
    font-size:11px;font-weight:900;color:#fff}
  .r-claim.c1 .mark{background:var(--accent)}
  .r-claim.c2 .mark{background:var(--brass-deep)}
  .r-chips{display:flex;gap:8px;margin-top:6px}
  .r-chips span{background:var(--accent-tint);color:var(--accent-deep);font-weight:700;
    font-size:11.5px;padding:5px 11px;border-radius:999px}
  /* scan beam */
  .scan{
    position:absolute;left:0;right:0;top:0;height:64px;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,transparent,rgba(112,83,232,.2) 46%,rgba(112,83,232,.2) 54%,transparent);
  }
  .scan::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--accent);
    box-shadow:0 0 12px rgba(112,83,232,.8)}

  /* criteria card */
  /* screen: giant serif score numerals, right third */
  .bignums{position:absolute;right:1.5%;top:50%;transform:translateY(-50%);width:min(250px,23%)}
  .bignum{border-top:2px solid #1A1F1A;padding:12px 4px 20px;opacity:0;transform:translateY(16px)}
  .bignum b{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
    font-size:clamp(42px,4.8vw,60px);color:var(--accent-deep);line-height:1}
  .bignum label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-top:6px}
  .evidline{font-family:'Caveat',cursive;font-weight:600;font-size:21px;color:var(--brass-deep);
    transform:rotate(-2deg);margin-top:4px;opacity:0}

  /* verify callouts */
  /* verify: ink circles drawn on the resume itself */
  .circ{position:absolute;left:14px;right:14px;height:46px;opacity:0;pointer-events:none;color:var(--accent-deep)}
  .circ.gray{color:var(--brass-deep)}
  .circ path{stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
  /* circ top/height set from the claim elements by JS */
  /* handwritten margin notes with drawn arrows */
  .mnote{position:absolute;font-family:'Caveat',cursive;font-weight:600;font-size:23px;
    color:#4A514A;opacity:0;transform:rotate(-2deg);display:flex;align-items:center;gap:9px;white-space:nowrap}
  .mnote.g{color:var(--accent-deep)}
  .mnote .arr{flex-shrink:0}
  #mn1{left:calc(52% + 220px);top:37%}
  #mn2{left:calc(52% + 220px);top:50%;color:var(--brass-deep)}
  #mn3{left:calc(52% + 220px);top:63%;font-size:20px;color:var(--muted)}
  /* the side numbers and the margin notes live to the right of the work surface,
     which there is no room for on a phone. Declared after the base rules so it
     actually wins. */
  @media(max-width:960px){.bignums,.mnote{display:none}}

  /* interview card */
  /* interview: a real video-call frame */
  .ivframe{position:absolute;right:3%;bottom:16px;rotate:1deg;z-index:3;
    width:min(384px,34%);background:#fff;border:1px solid var(--line);border-radius:18px;
    box-shadow:var(--shadow-md);padding:20px;opacity:0}
  .ivframe .iv-top{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800}
  .ivframe .rec{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
  .iv-cam{position:relative;height:150px;border-radius:12px;margin-top:12px;overflow:hidden;
    background:linear-gradient(160deg,#EBE7F8,#DFD8F2);display:grid;place-items:center}
  .iv-cam .cam-face{width:58px;height:58px;border-radius:50%;background:var(--accent);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:17px}
  .iv-cam i{position:absolute;width:15px;height:15px;border:2px solid var(--accent)}
  .iv-cam .c1{top:9px;left:9px;border-right:none;border-bottom:none}
  .iv-cam .c2{top:9px;right:9px;border-left:none;border-bottom:none}
  .iv-cam .c3{bottom:9px;left:9px;border-right:none;border-top:none}
  .iv-cam .c4{bottom:9px;right:9px;border-left:none;border-top:none}
  .wave{display:flex;align-items:flex-end;gap:3px;height:26px;margin:12px 0 0}
  .wave i{width:4px;border-radius:2px;background:var(--accent-2);animation:wv 1s ease-in-out infinite}
  .wave i:nth-child(2n){animation-delay:.15s}.wave i:nth-child(3n){animation-delay:.3s}
  .wave i:nth-child(4n){animation-delay:.45s}.wave i:nth-child(5n){animation-delay:.6s}
  @keyframes wv{0%,100%{height:22%}50%{height:100%}}
  .iv-cap{font-family:'Instrument Serif',serif;font-style:italic;font-size:15.5px;line-height:1.45;
    margin-top:10px;color:#22261F;opacity:0}
  .proc{font-family:'DM Mono',monospace;font-size:10.5px;color:var(--accent-deep);margin-top:11px}
  .iscore{margin-top:9px;font-weight:800;font-size:13px;color:var(--accent-deep)}

  /* leaderboard */
  .board{
    position:absolute;right:2%;top:50%;transform:translateY(-50%);
    width:min(340px,30%);opacity:0;
  }
  @media(max-width:960px){
    .ivframe,.board{width:min(300px,58%);right:3%}
    .resume{left:6%}
  }
  /* Phones. The scene is a four-phase scrubbed film pinned for three screens, which
     is the most complex thing on the site. Here it becomes what it is underneath:
     four short blocks you scroll past. No pin, no scrub, no props. */
  @media(max-width:760px){
    .stage-pin{position:static;height:auto}
    .scene{height:auto;width:100%;padding:0 clamp(20px,5vw,28px)}
    .scene::before{display:none}
    #process{height:auto!important}
    .pcopy{position:static;width:100%;left:auto;top:auto;bottom:auto;
      opacity:1!important;transform:none!important;visibility:visible!important;
      padding:26px 0;border-top:1px solid var(--line)}
    .pcopy:first-of-type{border-top:none}
    .pcopy h3{font-size:26px}
    .pcopy p{font-size:15px;margin-top:10px}
    .resume,.backsheet,.board,.ivframe,.bigwords,.sdots,.phase-chip,.circ{display:none}
  }
  .board .b-title{font-size:13px;font-weight:800;margin-bottom:10px;display:flex;justify-content:space-between;color:var(--muted)}
  /* the real grouping: Top Picks / Contenders / Prospects */
  .bk-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--muted);
    margin:12px 0 7px;opacity:0}
  .bk-h::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9CEC9}
  .bk-h.top{color:var(--accent-deep)}
  .bk-h.top::before{background:var(--accent)}
  .brow .more{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--paper);
    border:1px solid var(--line);padding:3px 8px;border-radius:999px}
  .brow.muted{background:#FCFBF9;color:var(--muted)}
  .brow{
    display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);
    border-radius:13px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow-sm);
    font-size:13px;opacity:0;
  }
  .brow .rk{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted);width:20px}
  .brow b{flex:1}
  .brow .sc{font-weight:800}
  .brow.first{border:2px solid var(--accent);background:var(--accent-tint)}
  .brow.first .rk,.brow.first .sc{color:var(--accent-deep)}
  .brow .vf{font-size:10.5px;font-weight:800;color:var(--accent-deep);background:#fff;
    border:1px solid rgba(84,56,204,.35);padding:3px 8px;border-radius:999px}

  /* ---------------- sections after ---------------- */
  section.flat{padding:84px 0}
  /* a phone screen is ~800px tall: 170px above the hero and 168px between two
     flat sections is dead scroll there, not breathing room */
  @media(max-width:760px){
    header{padding:120px 0 72px}
    section.flat{padding:56px 0}
  }
  .center{text-align:center}
  h2{font-size:clamp(32px,4.8vw,54px);letter-spacing:-.035em;font-weight:800;line-height:1.05}
  h2 .serif{font-size:1.05em;color:var(--accent)}
  .lead{color:var(--muted);max-width:54ch;margin:16px auto 0;font-size:17px;line-height:1.6}

  /* the four restraints, two by two */
  .sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:54px;
    max-width:880px;margin-left:auto;margin-right:auto}
  @media(max-width:880px){.sys-grid{grid-template-columns:1fr}}
  .sys{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;
    box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;text-align:left}
  .sys:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
  .sys .ic{width:44px;height:44px;border-radius:12px;background:var(--accent-tint);
    display:grid;place-items:center;margin-bottom:18px;color:var(--accent-deep)}
  .sys h3{font-size:18px;font-weight:800;letter-spacing:-.01em}
  .sys p{color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px}

  /* ---------------- proctoring: lights down ----------------
     Same paper as the rest of the page. The scene is the contrast, so the section
     does not need a ground of its own. */
  #guard{position:relative;overflow:hidden;padding:clamp(72px,9vw,116px) 0}
  /* the same dot grid as the hero, faint enough to read as texture */
  #guard::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle,rgba(23,20,37,.055) 1px,transparent 1.4px);
    background-size:26px 26px}
  #guard::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(58% 52% at 50% 62%,#FFFDF7,rgba(255,253,247,0) 70%)}
  #guard > .wrap{position:relative;z-index:1}
  /* a rule with the word set into it: marks where this section starts and cuts it
     off from the page above, which a background wash used to do */
  .gd-band{display:flex;align-items:center;gap:18px;margin-bottom:clamp(34px,6vh,64px)}
  .gd-band::before,.gd-band::after{content:"";flex:1;height:1px;background:var(--line)}
  .gd-band span{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;font-weight:500;
    letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep)}
  /* the same rule closes the section, so the whole thing sits between two of them */
  .gd-band.end{margin:clamp(28px,4vh,46px) 0 0}
  #guard h2 .serif{color:var(--accent)}

  /* ---- the Guard scene: interview + invisible helper + the catch ----
     Authored in the CAUGHT state: helper visible, finding shown, room locked. The GSAP
     loop resets to clean and replays the catch; without JS (or with reduced motion) the
     resting frame already tells the whole story. */
  .gm-stage{position:relative;width:min(880px,100%);aspect-ratio:2.15/1;margin:44px auto 0;
    font-family:'Plus Jakarta Sans',system-ui,sans-serif}
  @media(max-width:640px){.gm-stage{aspect-ratio:5/6}}

  /* the interview room */
  .gm-call{position:absolute;left:0;top:0;width:70%;height:100%;
    background:var(--card);border:1px solid var(--line);
    border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
  .gm-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;
    background:rgba(84,56,204,.05);border-bottom:1px solid rgba(84,56,204,.12)}
  .gm-bar i{width:9px;height:9px;border-radius:50%;background:rgba(84,56,204,.18)}
  .gm-bar span{margin-left:8px;font-family:'DM Mono',monospace;font-size:10px;
    letter-spacing:.05em;color:var(--muted)}
  .gm-rec{margin-left:auto;display:flex;align-items:center;gap:5px;font-style:normal;
    font-family:'DM Mono',monospace;font-size:9.5px;color:var(--muted)}
  .gm-rec b{width:7px;height:7px;border-radius:50%;background:var(--accent)}
  .gm-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;height:calc(100% - 38px)}
  .gm-tile{position:relative;border-radius:11px;background:#F1EEFA;
    border:1px solid rgba(84,56,204,.12);padding:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
  .gm-av{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
    background:var(--accent);color:#fff;font-weight:800;font-size:13px}
  .gm-av2{background:rgba(84,56,204,.12);color:var(--accent-deep)}
  .gm-name{position:absolute;left:12px;bottom:10px;font-family:'DM Mono',monospace;
    font-size:9.5px;color:var(--muted)}
  .gm-wave{position:absolute;right:12px;bottom:12px;display:flex;align-items:flex-end;gap:3px;height:16px}
  .gm-wave i{width:3px;border-radius:2px;background:var(--accent);animation:gmwv 1s ease-in-out infinite}
  .gm-wave i:nth-child(2){animation-delay:.15s}.gm-wave i:nth-child(3){animation-delay:.3s}
  .gm-wave i:nth-child(4){animation-delay:.45s}.gm-wave i:nth-child(5){animation-delay:.6s}
  @keyframes gmwv{0%,100%{height:22%}50%{height:100%}}
  .gm-line{position:absolute;left:12px;top:58%;height:7px;width:64%;border-radius:4px;
    background:rgba(84,56,204,.18)}
  .gm-short{top:72%;width:42%}
  /* the room darkening while locked */
  .gm-dim{position:absolute;inset:0;background:rgba(245,242,236,.82);opacity:1;
    transition:none;pointer-events:none}
  .gm-lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);
    text-align:center;border:2px solid var(--brass);border-radius:10px;padding:9px 18px;
    color:var(--brass-deep);background:rgba(255,255,255,.9)}
  .gm-lock b{display:block;font-family:'DM Mono',monospace;font-size:13px;letter-spacing:.08em}
  .gm-lock small{display:block;margin-top:2px;font-family:'Caveat',cursive;font-weight:600;
    font-size:15px;opacity:.85}

  /* the invisible helper: ghost-dashed, the thing screen shares can't see */
  .gm-cheat{position:absolute;left:44%;bottom:7%;width:32%;z-index:2;
    border:1.5px dashed rgba(84,56,204,.55);border-radius:13px;padding:30px 16px 16px;
    background:#fff;box-shadow:0 24px 55px rgba(40,25,90,.26)}
  .gm-ctag{position:absolute;top:9px;left:16px;font-family:'DM Mono',monospace;
    font-size:8.5px;letter-spacing:.06em;color:var(--accent);opacity:.85}
  .gm-cheat b{display:block;font-size:12.5px;font-weight:800;color:var(--text);margin-bottom:9px}
  /* > only: .gm-target's corner <i>s must not become answer lines */
  .gm-cheat > i{display:block;height:7px;border-radius:4px;background:rgba(84,56,204,.22);
    margin-top:6px;transform-origin:left center}
  .gm-w60{width:60%}
  /* brass target brackets, resting ON (the caught frame) */
  .gm-target{position:absolute;inset:-9px;pointer-events:none}
  .gm-target::before,.gm-target::after{content:""}
  .gm-target::before,.gm-target::after,.gm-target i{position:absolute;width:15px;height:15px;
    border:2.5px solid var(--brass)}
  .gm-target::before{top:0;left:0;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
  .gm-target::after{bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 5px 0}
  .gm-target i:first-child{top:0;right:0;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
  .gm-target i:last-child{bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 5px}

  /* the sweep Guard runs over the machine; driven by the loop, resting off */
  .gm-scan{position:absolute;left:0;right:0;top:0;height:90px;z-index:4;opacity:0;
    pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(84,56,204,.16) 46%,rgba(84,56,204,.16) 54%,transparent)}

  /* the Guard: the lit instrument */
  .gm-guard{position:absolute;right:0;top:6%;width:34%;z-index:3;
    background:linear-gradient(165deg,#2D1F72,#1E1548);border:1px solid rgba(84,56,204,.5);
    border-radius:15px;padding:15px 16px;
    box-shadow:0 2px 6px rgba(30,21,72,.2),0 34px 74px rgba(30,21,72,.42)}
  .gm-ghead{display:flex;align-items:center;gap:7px;color:#fff}
  .gm-ghead svg{color:#BCACF5;flex-shrink:0}
  .gm-ghead span{font-size:12.5px;font-weight:800}
  .gm-ghead small{font-family:'DM Mono',monospace;font-size:9px;color:rgba(255,255,255,.45)}
  .gm-hb{margin-left:auto;font-style:normal;display:flex;position:relative}
  .gm-hb i{width:7px;height:7px;border-radius:50%;background:#BCACF5;
    box-shadow:0 0 0 0 rgba(188,172,245,.65);animation:gdbeat 2.4s ease-out infinite}
  /* the ping the loop fires when the heartbeat notices something */
  .gm-ping{position:absolute;inset:0;border-radius:50%;border:2px solid #BCACF5;opacity:0;
    pointer-events:none}
  @keyframes gdbeat{
    0%{box-shadow:0 0 0 0 rgba(188,172,245,.6);opacity:1}
    70%{box-shadow:0 0 0 11px rgba(188,172,245,0);opacity:.85}
    100%{box-shadow:0 0 0 0 rgba(188,172,245,0);opacity:1}}
  /* verdict: two pills stacked in one slot, crossfaded by the loop */
  .gm-vrow{position:relative;margin-top:12px;height:24px}
  .gm-v{position:absolute;left:0;top:0;font-family:'DM Mono',monospace;font-size:10.5px;
    letter-spacing:.06em;padding:5px 12px;border-radius:999px}
  .gm-v-clean{background:rgba(188,172,245,.18);color:#BCACF5;opacity:0}
  .gm-v-sus{background:var(--brass);color:#170F04}
  /* one slot, two occupants: the watch list while the room is quiet, the finding when
     it lands. Fixed height so the floating panel never pops as they swap. */
  .gm-fslot{position:relative;margin-top:11px;height:82px;
    border-top:1px solid rgba(255,255,255,.16)}
  /* the checklist, living inside the scene: what Guard is watching, row by row */
  .gm-empty{position:absolute;inset:11px 0 0;display:flex;flex-direction:column;gap:6px;
    opacity:0}
  .gm-empty span{display:flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;
    font-size:9.5px;letter-spacing:.04em;color:rgba(255,255,255,.6);white-space:nowrap}
  .gm-empty i{width:5px;height:5px;border-radius:50%;background:#BCACF5;opacity:.3;
    flex-shrink:0}
  .gm-find{position:absolute;inset:11px 0 0;display:flex;gap:9px;align-items:flex-start}
  .gm-find i{width:8px;height:8px;border-radius:50%;background:var(--brass);
    flex-shrink:0;margin-top:3px}
  .gm-find b{display:block;font-size:11.5px;font-weight:800;color:#fff}
  .gm-find span{display:block;margin-top:2px;font-size:10px;line-height:1.45;
    color:rgba(255,255,255,.6)}

  /* Narrow. Three overlapping absolute panels inside a 5/6 box left the helper
     hanging off the left edge and the Guard sitting on top of it. Nothing animates
     here any more, so they simply stack: the room, the thing hiding over it, and
     the Guard that found it. */
  @media(max-width:640px){
    .gm-stage{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;gap:14px}
    .gm-call,.gm-cheat,.gm-guard{position:relative;left:auto;right:auto;top:auto;bottom:auto;
      width:100%;margin:0}
    .gm-call{height:210px}
    .gm-cheat{padding:26px 16px 16px}
    /* full width means the watch list fits at its own size again */
    .gm-empty span{font-size:9.5px;letter-spacing:.04em}
    .gm-ctag{font-size:8.5px}
    .gm-find b{font-size:11.5px}
    .gm-find span{font-size:10px}
  }

  .gd-note{margin-top:clamp(38px,6vh,64px);text-align:center;font-size:23px;color:var(--brass-deep);
    transform:rotate(-1deg)}

  @media(prefers-reduced-motion:reduce){.gm-hb i,.gm-wave i{animation:none}}
  /* every endless keyframe on the page, stopped. A phone should not be running a
     pulse, a waveform and a heartbeat forever in a background tab. */
  @media(max-width:760px){
    .wave i,.ivframe .rec{animation:none}
    /* the gate sheets are set per nth-child further down the sheet, which outranks
       a plain selector here, so this one has to shout */
    .viz i,.viz .ring{animation:none!important}
  }

  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
  @media(max-width:820px){.stats-grid{grid-template-columns:1fr 1fr}}
  /* editorial stats: hairline rules, serif numerals */
  .stat{border-top:2px solid #1A1F1A;padding:24px 8px 0;text-align:left}
  .stat .num{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
    font-size:clamp(52px,6vw,78px);letter-spacing:0;color:var(--accent-deep);line-height:1;
    display:inline-block}
  .stat .lbl{color:var(--muted);font-size:13.5px;margin-top:12px;line-height:1.5;font-weight:600}

  /* founder note: set as an editorial column under a rule, the same 2px rule the
     stats sit under. A floating rounded card said "widget"; this says "written". */
  /* not a card and not a grid: a short letter set on the page itself, the way the
     handwritten notes elsewhere on this page sit on it */
  .note{max-width:820px;margin:0 auto;text-align:center;
    background:var(--card);border:1px solid var(--line);border-radius:26px;
    box-shadow:var(--shadow-md);
    padding:clamp(36px,5vw,60px) clamp(24px,4vw,56px) clamp(30px,4vw,48px)}
  .note .note-kicker{font-family:'Caveat',cursive;font-weight:600;font-size:27px;
    color:var(--accent-deep);transform:rotate(-1.5deg);display:inline-block}
  .note .note-lead{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;
    font-size:clamp(25px,3.5vw,40px);line-height:1.26;letter-spacing:-.012em;color:var(--text);
    margin-top:20px}
  .note .note-body{font-size:clamp(16px,1.7vw,17.5px);font-weight:500;line-height:1.75;
    margin:26px auto 0;color:var(--muted);max-width:52ch}
  .note .note-sign{position:relative;display:inline-block;margin-top:38px;
    font-family:'Caveat',cursive;font-weight:600;font-size:27px;color:var(--brass-deep);
    transform:rotate(-1deg)}
  /* the pen underlines its own signature, same ink as the circled zero */
  .note .sign-line{position:absolute;left:-6%;bottom:-11px;width:112%;height:11px;
    color:var(--brass);pointer-events:none;overflow:visible}
  .note{overflow:visible}
  @media(max-width:760px){.note .sign-line{left:0;width:100%}}

  /* full bleed: the wrap around it is neutralised for this section only, which
     avoids the 100vw trick and the scrollbar-width overflow that comes with it */
  #waitlist .wrap{max-width:none;padding:0}
  .cta-band{
    width:100%;text-align:center;
    background:linear-gradient(150deg,#1E1548,#2C1F6E 55%,#1E1548);color:#fff;
    padding:clamp(64px,9vw,110px) clamp(24px,5vw,60px);
  }
  /* the band is full width, the reading measure is not */
  .cta-band > *{max-width:640px;margin-left:auto;margin-right:auto}
  .cta-band h2 .serif{color:#BCACF5}
  .cta-band .lead{color:#B6ACD8}
  .cta-band .waitlist{background:#fff;border-color:transparent}
  .cta-band .form-note{color:#8F978F}
  .cta-band .form-ok{background:rgba(112,83,232,.15);border-color:rgba(112,83,232,.4);color:var(--accent-2)}

  /* third-party trust marks. They arrive in their own brands, so they get a plain
   row rather than any attempt to restyle them into the palette. */
  .foot-badges{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
    margin-top:16px;padding-bottom:clamp(24px,3vh,32px)}
  /* one height for all three, so the row sits on a single baseline */
  .foot-badges img{display:block;height:44px;width:auto}
  .foot-li{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
    border:1px solid var(--line);background:var(--card);color:var(--text);
    transition:color .2s,border-color .2s,transform .2s}
  .foot-li:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

  /* the footer carries the sitemap: legal pages have to be reachable from here */
  footer{padding:0 clamp(20px,6vw,72px) 40px}
  .foot-in{max-width:1120px;margin:0 auto;border-top:1px solid var(--line)}
  .foot-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,max-content);gap:32px clamp(30px,3.4vw,58px);padding:48px 0 22px}
  @media(max-width:1040px){.foot-grid{grid-template-columns:1fr 1fr;gap:26px 32px}}
  @media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
  .foot-brand img{height:26px;width:auto;display:block}
  .foot-brand p{color:var(--muted);font-size:14.5px;margin-top:14px;max-width:34ch;line-height:1.6}
  .foot-col b{display:block;font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;
    color:var(--muted);margin-bottom:12px}
  .foot-col a{display:block;padding:5px 0;font-size:15px;color:var(--text);opacity:.8;
    transition:opacity .2s,color .2s}
  .foot-col a:hover{opacity:1;color:var(--accent)}
  .foot-base{border-top:1px solid var(--line);padding:20px 0 0;display:flex;flex-wrap:wrap;gap:14px;
    justify-content:space-between;color:var(--muted);font-size:13.5px}

  /* ---------------- opening gate: brand left, three ways in on the right ----------------
     Ported from gate-v9-experiment. The v9 build had no hero, so its picked sheet flew
     straight onto the pinned stage. Here the hero sits between, so the gate simply lifts. */
  #gate{position:fixed;inset:0;z-index:300;background:var(--paper);
    display:grid;grid-template-columns:clamp(300px,37%,600px) 1fr;
    overflow-y:auto;overflow-x:hidden}
  #gate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(23,20,37,.05) 1px,transparent 1.4px);
    background-size:26px 26px}

  .g-left{position:relative;z-index:1;display:flex;flex-direction:column;
    padding:clamp(34px,4vw,60px);border-right:1px solid var(--line)}
  .g-logo{height:28px;width:auto;align-self:flex-start}
  .g-mid{margin:auto 0}
  .g-title{font-size:clamp(30px,3.3vw,46px);font-weight:800;letter-spacing:-.035em;
    line-height:1.06;color:var(--text)}
  .g-title .hl{color:var(--accent)}
  .g-what{margin-top:20px;max-width:34ch;font-size:17px;line-height:1.7;
    font-weight:500;color:var(--muted)}
  .g-lead{margin-top:30px;font-family:'Caveat',cursive;font-weight:600;
    font-size:clamp(24px,2.1vw,30px);color:var(--brass-deep);
    clip-path:inset(-25% -4% -25% 0)}
  .g-lead b{font-weight:600}

  .g-rows{position:relative;z-index:1;display:flex;flex-direction:column}
  .grow{position:relative;flex:1 1 0;min-height:0;overflow:hidden;
    display:flex;align-items:center;gap:clamp(16px,2.2vw,30px);
    /* full-bleed row, capped content: past 1180px the padding grows instead of the gap */
    padding-block:0;padding-inline:max(clamp(30px,4vw,58px),calc((100% - 1180px)/2));
    text-align:left;
    background:none;border:none;cursor:pointer;font:inherit;color:inherit;
    transition:background-color .3s,box-shadow .3s}
  .grow + .grow{border-top:1px solid var(--line)}
  /* the sheet of paper comes forward into the light, and the pen marks your choice.
     A flat violet flood was louder but said nothing; this uses both inks the way the
     rest of the site does: brass is the hand, violet is the machine. */
  .grow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;
    background:var(--accent);transform:scaleY(0);transform-origin:top;
    transition:transform .5s cubic-bezier(.66,0,.2,1)}
  .grow:hover::before,.grow.opening::before{transform:scaleY(1)}
  .grow:hover,.grow.opening{background:var(--card);box-shadow:var(--shadow-md)}
  .grow > *{position:relative;z-index:1}

  .grow .txt{flex:0 1 auto;min-width:0;margin-right:auto;
    transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .grow .q::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
    border-radius:2px;background:var(--brass);transform:scaleX(0);transform-origin:left center;
    transition:transform .55s cubic-bezier(.66,0,.2,1) .05s}
  .grow:hover .q::after,.grow.opening .q::after{transform:scaleX(1)}
  .grow .meta{display:block;margin-top:14px;font-family:'DM Mono',monospace;font-size:11.5px;
    letter-spacing:.04em;color:var(--muted);opacity:.75;transition:color .3s .16s,opacity .3s .16s}
  .grow:hover .meta,.grow.opening .meta{color:var(--brass-deep);opacity:1}
  .grow .q{position:relative;display:inline-block;font-family:'Caveat',cursive;font-weight:600;line-height:1.1;
    font-size:clamp(23px,2.4vw,33px);color:var(--text);transition:color .3s .1s}
  /* real box, not just a visual shrink — scale() alone leaves the row claiming 172px */
  .grow .vizwrap{flex-shrink:0;position:relative;width:clamp(170px,17vw,255px);
    height:clamp(130px,13vw,196px);will-change:transform}
  .grow .vizwrap .viz{position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(var(--vz,1.28));transform-origin:50% 50%}
  .grow .go{flex-shrink:0;font-size:19px;font-weight:800;color:var(--accent);
    opacity:0;transform:translateX(-10px);transition:.35s}

  .grow:hover .go,.grow.opening .go{color:var(--accent);opacity:1;transform:none}
  /* the paper lifts a little. That is the whole hover. */
  .grow .vizwrap{transition:transform .3s ease}
  .grow:hover .vizwrap,.grow.opening .vizwrap{transform:translateY(-6px)}

  /* the quiet way out: three forced choices is friction for anyone who just wants
     in. A round icon button reads as "more/continue" rather than a fourth option
     competing with the three rows, and sits centered on the gate as a whole
     rather than inside either column. */
  .g-skip{position:absolute;left:50%;bottom:clamp(18px,3vh,28px);transform:translateX(-50%);
    z-index:2;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-md);
    color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;
    animation:g-skip-bob 2.4s ease-in-out infinite}
  .g-skip:hover{background:var(--accent-tint);color:var(--accent-deep);box-shadow:var(--shadow-md)}
  @keyframes g-skip-bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
  @media(prefers-reduced-motion:reduce){.g-skip{animation:none}}
  .viz i{transition:box-shadow .3s}
  .grow:hover .viz i,.grow.opening .viz i{box-shadow:0 10px 22px rgba(23,20,37,.14)}

  /* ---- living paper assets ---- */
  .viz{position:relative;width:172px;height:132px;flex-shrink:0}
  .viz i{position:absolute;display:block;width:54px;height:74px;border-radius:5px;
    background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
    background-image:repeating-linear-gradient(180deg,transparent 0 7px,#E6E1D3 7px 8.5px);
    background-repeat:no-repeat;background-size:62% 34px;background-position:8px 13px;
    transition:box-shadow .3s,border-color .3s,opacity .35s}
  /* volume: three piles on the desk, not one tidy document. The thickness is the point. */
  .viz-pile i:nth-child(1){left:3px;top:58px;--r:-2deg}
  .viz-pile i:nth-child(2){left:4px;top:54px;--r:2deg}
  .viz-pile i:nth-child(3){left:1px;top:50px;--r:-3deg}
  .viz-pile i:nth-child(4){left:7px;top:46px;--r:1deg}
  .viz-pile i:nth-child(5){left:1px;top:42px;--r:-1deg}
  .viz-pile i:nth-child(6){left:5px;top:38px;--r:-3deg}
  .viz-pile i:nth-child(7){left:5px;top:34px;--r:-2deg}
  .viz-pile i:nth-child(8){left:1px;top:30px;--r:-3deg}
  .viz-pile i:nth-child(9){left:59px;top:62px;--r:0deg}
  .viz-pile i:nth-child(10){left:56px;top:58px;--r:-2deg}
  .viz-pile i:nth-child(11){left:56px;top:54px;--r:1deg}
  .viz-pile i:nth-child(12){left:59px;top:50px;--r:-3deg}
  .viz-pile i:nth-child(13){left:62px;top:46px;--r:1deg}
  .viz-pile i:nth-child(14){left:56px;top:42px;--r:-2deg}
  .viz-pile i:nth-child(15){left:61px;top:38px;--r:2deg}
  .viz-pile i:nth-child(16){left:60px;top:34px;--r:-3deg}
  .viz-pile i:nth-child(17){left:60px;top:30px;--r:1deg}
  .viz-pile i:nth-child(18){left:59px;top:26px;--r:-3deg}
  .viz-pile i:nth-child(19){left:112px;top:56px;--r:-3deg}
  .viz-pile i:nth-child(20){left:115px;top:52px;--r:3deg}
  .viz-pile i:nth-child(21){left:112px;top:48px;--r:-1deg}
  .viz-pile i:nth-child(22){left:114px;top:44px;--r:-2deg}
  .viz-pile i:nth-child(23){left:115px;top:40px;--r:-3deg}
  .viz-pile i:nth-child(24){left:115px;top:36px;--r:-1deg}
  .viz-pile i:nth-child(25){left:115px;top:32px;--r:3deg}
  .viz-pile i:nth-child(8){animation:shuffle 4.8s ease-in-out -0.0s infinite}
  .viz-pile i:nth-child(18){animation:shuffle 4.8s ease-in-out -1.6s infinite}
  .viz-pile i:nth-child(25){animation:shuffle 4.8s ease-in-out -3.2s infinite}
  /* fit: same angle, same lines, same everything. Sameness is the whole complaint,
     so the sheets are carbon copies rather than three tilted at different angles. */
  .viz-row i{top:29px;--r:0deg}
  .viz-row i:nth-child(1){left:4px;animation:stepup 5.1s ease-in-out infinite}
  .viz-row i:nth-child(2){left:59px;animation:stepup 5.1s ease-in-out -1.7s infinite}
  .viz-row i:nth-child(3){left:114px;animation:stepup 5.1s ease-in-out -3.4s infinite}
  @keyframes stepup{0%,64%,100%{transform:rotate(var(--r)) translateY(0)}
    76%,88%{transform:rotate(var(--r)) translateY(-10px)}}
  /* trust: the glass keeps checking */
  .viz-one i{left:44px;top:12px;width:78px;height:108px;
    background-size:64% 44px;background-position:11px 16px}
  /* the one line on the page that is in question */
  .viz-one i::after{content:"";position:absolute;left:11px;top:72px;width:52%;height:4px;
    border-radius:2px;background:var(--brass)}
  .viz-one .ring{position:absolute;left:52px;top:50px;width:58px;height:58px;border-radius:50%;
    border:3px solid var(--brass);background:rgba(168,130,59,.07);
    animation:sweep 5.4s ease-in-out infinite}
  .viz-one .ring::after{content:"";position:absolute;right:-14px;bottom:-10px;width:20px;height:3px;
    border-radius:2px;background:var(--brass);transform:rotate(42deg)}
  @keyframes sweep{0%,100%{transform:translate(0,0)}34%{transform:translate(-18px,-16px)}
    68%{transform:translate(6px,8px)}}

  @media(max-width:900px){
    #gate{grid-template-columns:1fr;grid-template-rows:auto 1fr}
    .g-left{border-right:none;border-bottom:1px solid var(--line);padding:26px}
    .g-mid{margin:20px 0}
    .g-lead{font-size:30px}
    .g-what{font-size:14px;margin-top:14px}
    .grow{padding:22px 24px;gap:16px}
    .grow .q{font-size:23px}
    .grow .vizwrap{display:none}
    /* the sheets keep running their keyframes even hidden, so stop them outright */
    .viz i,.viz .ring{animation:none}
  }

  .rv{opacity:0;transform:translateY(36px)}
  /* phones skip the entrance reveals entirely: nothing on the page then depends on
     a tween having run, so a slow or throttled GSAP can never leave it blank */
  @media(max-width:760px){.rv{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){
    .rv{opacity:1!important;transform:none!important}
    /* the gate's paper shuffles and its sweeping glass are the loudest loops on the
       page, and were the only ones this block still missed */
    .wave i,.ivframe .rec,.viz i,.viz .ring{animation:none!important}
  }

  /* human / machine toggle: links out to the plain-text /ai page for LLMs and copy-paste.
     Hero-only: hidden by default, shown once the hero is in view and the gate isn't
     covering it, hidden again once you scroll past. Opacity/visibility rather than
     display, so the fade reads as a reveal, not a pop-in. */
  .hmtoggle{position:fixed;right:22px;bottom:22px;z-index:998;display:flex;
    background:var(--text);border-radius:999px;padding:4px;box-shadow:var(--shadow-md);gap:2px;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease}
  .hmtoggle.show{opacity:1;visibility:visible;pointer-events:auto}
  .hmtoggle span,.hmtoggle a{font-family:'DM Mono',ui-monospace,monospace;font-size:11.5px;
    letter-spacing:.04em;padding:9px 16px;border-radius:999px;display:flex;align-items:center;gap:7px}
  .hmtoggle span{color:var(--text);background:#EDEAE2}
  .hmtoggle a{color:rgba(255,255,255,.55);text-decoration:none;transition:color .2s,background .2s}
  .hmtoggle a:hover{color:#fff;background:rgba(255,255,255,.12)}
  .hmtoggle i{width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor;flex-shrink:0}
  .hmtoggle span i{background:currentColor}
  /* phones lose the pill outright rather than shrinking it further: not enough
     room near the thumb-reach zone to keep it from feeling like a stray tap target */
  @media(max-width:600px){.hmtoggle{display:none}}
/* visually hidden, present for screen readers and text extractors: the
   infinity glyph is drawn as an svg, but "Infinite" has to exist as text */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}