:root{
    --paper:#F4F6F9; --panel:#EAEEF3; --ink:#15191F; --ink-2:#3C4651; --ink-3:#5D6875;
    --steel:#9AA4B2; --hair:#CBD2DB; --brass:#A9781F; --brass-2:#C79233; --critical:#C0432C;
    --rail:84px; --maxw:1080px;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --sans:'IBM Plex Sans',system-ui,sans-serif;
    --disp:'Space Grotesk',var(--sans);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  body::before{ /* faint drafting grid */
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);
    background-size:48px 48px; opacity:.16;
    -webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);
    mask-image:radial-gradient(circle at 50% 30%,#000,transparent 80%);
  }
  a{color:inherit}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px 0 calc(var(--rail) + 28px); position:relative; z-index:1}
  @media(max-width:720px){ :root{--rail:0px} .wrap{padding:0 20px} }

  /* ---------- datum rail (the signature) ---------- */
  .datum{position:fixed; top:0; bottom:0; left:max(20px,calc((100vw - var(--maxw))/2 + 26px)); width:var(--rail); z-index:5; pointer-events:none}
  .datum .line{position:absolute; left:14px; top:0; width:1.5px; height:100%; background:linear-gradient(var(--brass),var(--brass) 60%,var(--hair)); transform-origin:top; }
  .datum .tick{position:absolute; left:14px; width:10px; height:1px; background:var(--steel)}
  .datum .station{position:absolute; left:28px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap}
  .no-anim .datum .line, .reveal{} /* hooks */
  @media(max-width:720px){ .datum{display:none} }

  /* page-load draw of the datum */
  .draw .datum .line{animation:draw 1.1s cubic-bezier(.2,.7,.2,1) both}
  .draw .datum .tick,.draw .datum .station{animation:fade .6s ease both; animation-delay:.5s}
  @keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}

  /* ---------- type ---------- */
  .eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:12px; margin:0 0 22px}
  .eyebrow::before{content:""; width:26px; height:1px; background:var(--brass)}
  h1{font-family:var(--disp); font-weight:700; font-size:clamp(40px,6.4vw,76px); line-height:1.02; letter-spacing:-.02em; margin:0; color:var(--ink)}
  h2{font-family:var(--disp); font-weight:700; font-size:clamp(28px,3.8vw,42px); line-height:1.08; letter-spacing:-.015em; margin:0 0 18px}
  h3{font-family:var(--disp); font-weight:500; font-size:21px; letter-spacing:-.01em; margin:0 0 8px}
  .lede{font-size:clamp(18px,2vw,21px); color:var(--ink-2); max-width:52ch; line-height:1.55}
  .mono{font-family:var(--mono)}
  strong{font-weight:600}

  /* ---------- hero ---------- */
  header.hero{padding:clamp(70px,12vh,150px) 0 70px}
  .hero h1 .lo{color:var(--ink-3)}
  /* dimensioned annotation under headline */
  .dimension{display:flex; align-items:center; gap:0; margin:30px 0 36px; max-width:560px; color:var(--steel)}
  .dimension .cap{width:1px; height:14px; background:var(--steel)}
  .dimension .span{flex:1; height:1px; background:var(--steel); position:relative}
  .dimension .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:0 14px; white-space:nowrap; background:var(--paper)}
  .dimension .mid{display:flex; align-items:center}
  .cta-row{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:flex-start; margin-top:8px}
  .btn{font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-decoration:none; padding:15px 26px; border:1.5px solid var(--ink); color:var(--paper); background:var(--ink); display:inline-flex; gap:10px; align-items:center; transition:transform .15s ease, background .15s ease}
  .btn:hover{background:var(--brass); border-color:var(--brass); transform:translateY(-2px)}
  .btn.ghost{background:transparent; color:var(--ink)}
  .btn.ghost:hover{background:transparent; color:var(--brass); border-color:var(--brass); transform:translateY(-2px)}
  /* waitlist forms — input + buttons share one height */
  .cta-row .btn{height:52px; padding:0 26px}
  .wl-form{margin:0; max-width:560px}
  .wl-input{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
  .wl-input input{flex:1 1 240px; min-width:0; height:52px; padding:0 16px; font-family:var(--mono); font-size:14px; color:var(--ink); background:#fff; border:1.5px solid var(--hair)}
  .wl-input input::placeholder{color:var(--steel)}
  .wl-input input:focus-visible{outline:2px solid var(--brass); outline-offset:2px; border-color:var(--brass)}
  .wl-input .btn{flex:0 0 auto}
  .wl-msg{font-family:var(--mono); font-size:12px; letter-spacing:.02em; margin:12px 0 0; min-height:1.1em; color:var(--ink-3)}
  .wl-msg.ok{color:var(--brass)}
  .wl-msg.err{color:var(--critical)}
  .wl-form.sent .wl-input{display:none}
  .band .wl-input input{background:#1F262E; border-color:#3A434D; color:#fff}
  .band .wl-input input::placeholder{color:#7C8794}
  .band .wl-msg{color:#9AA6B2}
  .band .wl-msg.ok{color:var(--brass-2)}

  /* spec readout (instrument panel) */
  .readout{margin-top:54px; border:1px solid var(--hair); background:rgba(255,255,255,.55); backdrop-filter:blur(2px); max-width:620px}
  .readout .rhead{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:11px 18px; border-bottom:1px solid var(--hair); display:flex; justify-content:space-between}
  .readout dl{margin:0; padding:8px 18px 14px}
  .readout .row{display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:baseline; padding:7px 0; border-bottom:1px dotted var(--hair)}
  .readout .row:last-child{border-bottom:0}
  .readout dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  .readout dd{margin:0; font-size:15.5px; color:var(--ink)}
  .readout dd b{color:var(--brass); font-weight:600}

  /* ---------- generic section ---------- */
  section{padding:74px 0; position:relative}
  .div-rule{height:1px; background:var(--hair); margin:0; border:0}
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
  .reveal.in{opacity:1; transform:none}

  /* differentiators */
  .diff{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:40px}
  .diff .cell{background:var(--paper); padding:30px 26px}
  .diff .cell .ix{font-family:var(--mono); font-size:11px; color:var(--brass); letter-spacing:.1em; margin-bottom:16px}
  .diff .cell p{margin:0; color:var(--ink-2); font-size:15.5px}
  @media(max-width:720px){ .diff{grid-template-columns:1fr} }

  /* process — a real sequence, so stationed */
  .steps{margin-top:34px; border-top:1px solid var(--hair)}
  .step{display:grid; grid-template-columns:64px 1fr; gap:24px; padding:26px 0; border-bottom:1px solid var(--hair); align-items:start}
  .step .st{font-family:var(--mono); font-size:13px; color:var(--brass); padding-top:5px; letter-spacing:.04em}
  .step p{margin:6px 0 0; color:var(--ink-2); font-size:15.5px; max-width:60ch}
  .step .tag{display:inline-block; white-space:nowrap; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--hair); padding:2px 8px; margin-left:10px; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle}
  .step h3{display:flex; flex-wrap:wrap; align-items:center; gap:0 4px}

  /* deliverable / trust */
  .two{display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center}
  @media(max-width:820px){ .two{grid-template-columns:1fr; gap:34px} }
  .ledger{border:1px solid var(--hair); background:rgba(255,255,255,.55)}
  .ledger .lh{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); padding:12px 18px; border-bottom:1px solid var(--hair)}
  .ledger .lrow{display:grid; grid-template-columns:1fr auto; padding:13px 18px; border-bottom:1px dotted var(--hair); font-size:14.5px}
  .ledger .lrow:last-child{border-bottom:0; background:var(--panel)}
  .ledger .lrow .v{font-family:var(--mono); color:var(--ink)}
  .ledger .lrow.tot .v{color:var(--brass); font-weight:600}
  .ledger .lrow .tr{font-family:var(--mono); font-size:10px; color:var(--ink-3); letter-spacing:.06em}

  /* contribute / cta band */
  .band{background:var(--ink); color:var(--paper); margin-top:0}
  .band .wrap{padding-top:74px; padding-bottom:74px}
  .band .eyebrow{color:var(--brass-2)}
  .band h2{color:var(--paper)}
  .band .lede{color:#AEB7C2}
  .band .btn{background:var(--brass); border-color:var(--brass); color:var(--ink)}
  .band .btn:hover{background:var(--brass-2); border-color:var(--brass-2)}
  .band .btn.ghost{background:transparent; color:var(--paper); border-color:#3A434F}
  .band .btn.ghost:hover{border-color:var(--brass-2); color:var(--brass-2)}
  .band::before{content:""; position:absolute; inset:0; opacity:.08; pointer-events:none;
    background-image:linear-gradient(90deg,#fff 1px,transparent 1px); background-size:48px 48px}

  footer{padding:46px 0 60px}
  .foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.04em}
  .foot .mark{color:var(--ink); font-weight:500}
  .foot a{text-decoration:none}
  .foot a:hover{color:var(--brass)}

  :focus-visible{outline:2px solid var(--brass); outline-offset:3px}
  @media(prefers-reduced-motion:reduce){
    *{animation:none !important; transition:none !important}
    .reveal{opacity:1; transform:none}
    html{scroll-behavior:auto}
  }
  /* CSP refactor: datum rows + band cta (was inline style=) */
  .datum .station{transform:translateY(-50%)}
  .datum .k1{top:14%}.datum .k2{top:40%}.datum .k3{top:60%}.datum .k4{top:80%}
  .band .cta-row.band-cta{margin-top:26px}