@font-face{font-family:"BigShoulders";src:url("assets/fonts/BigShouldersDisplay_900Black.ttf") format("truetype");font-weight:900;font-display:swap}
  @font-face{font-family:"Sora";src:url("assets/fonts/Sora_400Regular.ttf") format("truetype");font-weight:400;font-display:swap}
  @font-face{font-family:"Sora";src:url("assets/fonts/Sora_600SemiBold.ttf") format("truetype");font-weight:600;font-display:swap}
  @font-face{font-family:"JetBrainsMono";src:url("assets/fonts/JetBrainsMono_500Medium.ttf") format("truetype");font-weight:500;font-display:swap}

  :root{
    --ink:#0A0A0B; --ink2:#131316; --surface:#1B1B20; --surface2:#25252C; --line:#2E2E36;
    --lime:#C9F31D; --coral:#FF6B47; --bone:#F5F2EB; --boneDim:#B8B4AB; --mute:#7A7A82;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{margin:0; background:var(--ink); color:var(--bone); font:400 16px/1.65 "Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
  a{color:var(--lime); text-decoration:none}
  a:hover{text-decoration:underline}
  .wrap{max-width:1040px; margin:0 auto; padding:0 20px}

  /* ── wordmark (mirrors components/Wordmark.tsx) ── */
  .gfd{font-family:"BigShoulders",Impact,sans-serif; font-weight:900; letter-spacing:-.5px; line-height:1}
  .gfd i{color:var(--lime); font-style:italic}

  /* ── nav ── */
  nav{position:sticky; top:0; z-index:10; background:rgba(10,10,11,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
  nav .row{display:flex; align-items:center; justify-content:space-between; height:62px}
  nav .gfd{font-size:30px}
  nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0}
  nav ul a{color:var(--boneDim); font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:.8px; text-transform:uppercase}
  nav ul a:hover{color:var(--bone); text-decoration:none}
  @media(max-width:640px){ nav ul{display:none} }

  /* ── hero ── */
  .hero{position:relative; min-height:min(88vh,760px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:1px solid var(--line)}
  .hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%}
  .hero .scrim{position:absolute; inset:0; background:linear-gradient(100deg,rgba(10,10,11,.82) 0%,rgba(10,10,11,.66) 30%,rgba(10,10,11,.28) 58%,rgba(10,10,11,.10) 78%,rgba(10,10,11,.04) 100%),linear-gradient(to bottom,rgba(10,10,11,.20) 0%,rgba(10,10,11,.24) 52%,rgba(10,10,11,.55) 88%,var(--ink) 100%)}
  .hero .inner{position:relative; padding:0 20px 64px; width:100%; min-width:0; max-width:1040px; margin:0 auto}
  .hero .sub{max-width:46ch}
  @media(min-width:900px){ .hero .tagline,.hero .sub,.hero .cta{max-width:60%} }
  .hero .gfd{font-size:clamp(76px,15vw,168px)}
  /* Wide enough for the slogan to sit on one line on desktop; `balance` keeps
     the two halves even when it does wrap on a phone, instead of orphaning a
     single word on the second line. */
  .tagline{font-size:clamp(19px,2.6vw,28px); font-weight:600; margin:8px 0 6px; max-width:min(36ch,100%); text-wrap:balance}
  .sub{color:var(--boneDim); max-width:min(46ch,100%); margin:0 0 26px; overflow-wrap:break-word}
  .cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .btn{display:inline-block; padding:14px 26px; border-radius:999px; font-weight:600; font-size:15px}
  .btn-primary{background:var(--lime); color:var(--ink)}
  .btn-primary:hover{text-decoration:none; filter:brightness(1.06)}
  .btn-ghost{border:1px solid var(--line); color:var(--bone); background:var(--surface)}
  .btn-ghost:hover{text-decoration:none; border-color:var(--mute)}
  .soon{font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:.8px; color:var(--mute); text-transform:uppercase}

  /* ── sections ── */
  section{padding:72px 0}
  .eyebrow{font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:1.4px; color:var(--lime); text-transform:uppercase; margin:0 0 10px}
  h2{font-family:"BigShoulders",Impact,sans-serif; font-weight:900; font-size:clamp(30px,4.4vw,46px); line-height:1.05; margin:0 0 14px; text-transform:uppercase}
  .lede{color:var(--boneDim); max-width:min(60ch,100%); margin:0 0 34px}
  .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
  .card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px}
  .card h3{font-size:16px; font-weight:600; margin:0 0 8px}
  .card p{color:var(--boneDim); font-size:15px; margin:0}
  .card .ic{display:block; font-size:20px; margin-bottom:12px; line-height:1}

  .band{background:var(--ink2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .privacy-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px}
  .privacy-list li{padding-left:26px; position:relative; color:var(--boneDim)}
  .privacy-list li::before{content:"✓"; position:absolute; left:0; color:var(--lime); font-weight:700}
  .privacy-list b{color:var(--bone)}

  .age{display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line);
       border-radius:999px; padding:9px 18px; font-family:"JetBrainsMono",monospace; font-size:11px;
       letter-spacing:.8px; color:var(--boneDim); text-transform:uppercase}
  .age span{color:var(--coral); font-weight:700}

  /* ── footer ── */
  footer{padding:52px 0 40px; color:var(--mute); font-size:14px}
  footer .cols{display:flex; flex-wrap:wrap; gap:36px; justify-content:space-between; margin-bottom:30px}
  footer h4{font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:1.2px; color:var(--bone); text-transform:uppercase; margin:0 0 12px}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin-bottom:8px}
  footer a{color:var(--boneDim)}
  footer a:hover{color:var(--bone)}
  .legal{border-top:1px solid var(--line); padding-top:22px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between}

  /* ── shared page chrome for legal + manual pages ───────────────────────── */
  .doc{max-width:820px; margin:0 auto; padding:40px 20px 80px}
  .doc h1{font-family:"BigShoulders",Impact,sans-serif; font-weight:900; text-transform:uppercase;
          font-size:clamp(34px,6vw,54px); line-height:1.02; margin:0 0 6px}
  .doc .updated{font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:1px;
          text-transform:uppercase; color:var(--mute); margin:0 0 34px}
  .doc h2{font-family:"BigShoulders",Impact,sans-serif; font-weight:900; text-transform:uppercase;
          font-size:clamp(22px,3vw,30px); line-height:1.1; margin:38px 0 12px; color:var(--bone)}
  .doc h3{font-family:"Sora",system-ui,sans-serif; font-weight:600; font-size:17px;
          margin:24px 0 8px; color:var(--bone)}
  .doc p{margin:0 0 14px; color:var(--boneDim); line-height:1.7}
  .doc ul{margin:0 0 16px; padding-left:20px}
  .doc li{margin:0 0 9px; color:var(--boneDim); line-height:1.65}
  .doc li strong{color:var(--bone)}
  .doc .kv{display:grid; grid-template-columns:minmax(140px,30%) 1fr; gap:6px 18px;
           padding:11px 0; border-bottom:1px solid var(--line)}
  .doc .kv dt{font-family:"JetBrainsMono",monospace; font-size:12px; letter-spacing:.4px;
              color:var(--lime); text-transform:uppercase}
  .doc .kv dd{margin:0; color:var(--boneDim); line-height:1.6}
  @media(max-width:560px){ .doc .kv{grid-template-columns:1fr; gap:2px} }
  .doc a{color:var(--lime)}
  .backlink{display:inline-block; margin:0 0 26px; font-family:"JetBrainsMono",monospace;
            font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--boneDim);
            text-decoration:none}
  .backlink:hover{color:var(--lime)}
  .toc{background:var(--ink2); border:1px solid var(--line); border-radius:14px;
       padding:20px 24px; margin:0 0 34px}
  .toc h4{font-family:"JetBrainsMono",monospace; font-size:11px; letter-spacing:1.2px;
          text-transform:uppercase; color:var(--bone); margin:0 0 12px}
  .toc ul{margin:0; padding-left:18px}
  .toc li{margin:0 0 6px}
  .toc a{color:var(--boneDim); text-decoration:none}
  .toc a:hover{color:var(--lime); text-decoration:underline}

  /* The manual is a destination in its own right, not fine print. */
  nav ul a.tab-manual{color:var(--lime); border:1px solid rgba(201,243,29,.35);
                      border-radius:999px; padding:6px 12px}
  nav ul a.tab-manual:hover{background:rgba(201,243,29,.10)}

  /* ── Ultrawide hero fix ────────────────────────────────────────────────────
     A full-bleed `cover` image on a 3440px display gives a 4.4:1 frame against a
     3:2 photo, so only ~34% of the image height survives the crop — measured, and
     it cut the second man out entirely while decapitating the first. Capping the
     media width keeps the frame near the photo's own shape, so the composition
     stays intact no matter how wide the monitor. The side fades stop the cap from
     reading as a hard-edged rectangle floating on black. */
  @media (min-width:1200px){
    .hero{min-height:min(92vh,860px)}
    .hero picture{position:absolute; inset:0; display:block}
    .hero img{left:50%; transform:translateX(-50%); width:min(100%,1700px);
              object-position:50% 31%;
              -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
              mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
  }

  /* On phones the portrait asset shows its full HEIGHT but gets cropped at the
     SIDES, which clipped the second man (he reaches x=790 of 900, the visible
     window ended at 746). Biasing the horizontal framing right keeps both in. */
  @media (max-width:700px){
    .hero img{object-position:68% 50%}
  }