:root {
  --paper:#FCFCFB; --alt:#F5F5F3; --ink:#0F172A; --soft:#3D4557; --muted:#6B7280;
  --green:#059669; --green-ink:#047857; --green-soft:rgba(5,150,105,.08);
  --amber:#B45309; --red:#B91C1C;
  --dark:#070A10; --dark2:#0C1220;
  --line:rgba(15,23,42,.09); --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(15,23,42,.06);
  --max:1080px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-weight:300;color:var(--ink);line-height:1.55;
  background:var(--paper);
}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.serif{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
em.accent{font-style:italic;color:var(--green);font-family:"Instrument Serif",Georgia,serif}

.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(252,252,251,.9);border-bottom:1px solid var(--line)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.brand{font-size:22px}
.nav-links{display:flex;gap:18px;align-items:center;color:var(--soft);font-size:13px;font-weight:400}
@media(max-width:800px){.nav-links{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:var(--radius);padding:12px 18px;font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-green{background:var(--green);color:#fff}

.hero{padding:80px 0 64px}
.badge{display:inline-flex;padding:7px 12px;border-radius:99px;background:var(--green-soft);color:var(--green-ink);border:1px solid rgba(5,150,105,.18);margin-bottom:22px}
.hero h1{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(42px,7vw,76px);line-height:1.04;letter-spacing:-.02em;margin:0 0 18px;font-weight:400;max-width:15ch}
.hero .sub{font-size:18px;color:var(--soft);max-width:58ch;margin:0 0 28px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.proof{color:var(--muted);font-size:14px;margin-top:18px}




.section{padding:80px 0}
.section.alt{background:rgba(245,245,243,.75)}
.section.dark{background:var(--dark);color:#E8ECF4}
.eyebrow{color:var(--muted);margin-bottom:12px}
.section h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(32px,5vw,50px);line-height:1.1;margin:0 0 16px;font-weight:400}
.lead{color:var(--soft);max-width:62ch;margin:0 0 32px;font-size:17px}
.dark .lead,.dark .eyebrow{color:#9AA3B5}
.section-close{margin-top:28px}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(min-width:701px) and (max-width:1000px){.grid-4{grid-template-columns:1fr 1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.card.dark-card{background:var(--dark2);color:#E8ECF4;border-color:rgba(255,255,255,.08)}
.card.with-card{background:linear-gradient(180deg,#F3FBF7,#fff);border-color:rgba(5,150,105,.25)}
.card h3{font-family:"Instrument Serif",Georgia,serif;font-size:28px;margin:8px 0 14px;font-weight:400}
.card .big{font-family:"Instrument Serif",Georgia,serif;font-size:40px;margin:8px 0;line-height:1}
.list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--soft)}
.dark-card .list li{color:#C5CCD8}
.mark{flex:0 0 auto;width:18px;height:18px;border-radius:99px;display:grid;place-items:center;font-size:11px;font-weight:600;margin-top:2px}
.mark.bad{background:rgba(185,28,28,.12);color:var(--red)}
.mark.good{background:var(--green-soft);color:var(--green-ink)}

.status-ui{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.dark-card .status-ui{background:#0A101C;border-color:rgba(255,255,255,.08)}
.status-ui .bar{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px}
.dark-card .status-ui .bar{border-color:rgba(255,255,255,.08);color:#9AA3B5}
.status-row{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.dark-card .status-row{border-color:rgba(255,255,255,.06);color:#C5CCD8}
.status-row:last-child{border-bottom:0}
.pill{display:inline-flex;align-items:center;border-radius:99px;padding:4px 9px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.pill.ok{background:var(--green-soft);color:var(--green-ink)}
.pill.warn{background:rgba(180,83,9,.12);color:var(--amber)}
.pill.bad{background:rgba(185,28,28,.12);color:var(--red)}
.pill.soft{background:rgba(15,23,42,.06);color:var(--soft)}

.pills{display:flex;flex-wrap:wrap;gap:10px}
.chip{border-radius:99px;padding:10px 14px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--soft)}
.chip b{color:var(--ink);font-weight:500;margin-right:6px}

.machine{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
@media(max-width:900px){.machine{grid-template-columns:1fr}}
.flywheel{display:grid;gap:10px}
.fly-step{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.fly-step .n{width:42px;height:42px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:"JetBrains Mono",monospace;font-size:12px}
.fly-step strong{display:block;font-weight:500;margin-bottom:2px}
.fly-step span{color:var(--muted);font-size:14px}
.calc{background:var(--dark);color:#E8ECF4;border-radius:var(--radius);padding:24px}
.calc label{display:block;margin:0 0 6px;color:#9AA3B5}
.calc .field{margin-bottom:14px}
.calc input,.calc select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--dark2);color:#fff;padding:12px;font:400 15px Inter,sans-serif}
.calc-out{margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.calc-out .big{font-family:"Instrument Serif",Georgia,serif;font-size:42px;color:#34D399;line-height:1;margin:6px 0}

.band-dark{background:linear-gradient(180deg,var(--dark),var(--dark2));color:#E8ECF4;padding:72px 0}
.band-dark h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(30px,4.5vw,46px);font-weight:400;margin:0 0 16px;max-width:22ch}
.band-dark p{color:#9AA3B5;max-width:62ch;font-size:17px}

.phase{position:relative;padding-left:28px;margin:28px 0;border-left:1px dashed rgba(15,23,42,.18)}
.phase-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:12px}
.phase-card .top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.phase-card h3{font-family:"Instrument Serif",Georgia,serif;font-size:28px;margin:10px 0 8px;font-weight:400}
.phase-card p{margin:0 0 14px;color:var(--soft)}
.outcome{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:var(--green-soft);color:var(--green-ink);border:1px solid rgba(5,150,105,.18);font-size:13px;font-weight:500}

.beat{border-top:3px solid var(--green);padding-top:14px}
.ref-table{width:100%;border-collapse:collapse;font-size:14px}
.ref-table th,.ref-table td{border-bottom:1px solid var(--line);padding:12px 10px;text-align:left}
.ref-table th{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.strike{text-decoration:line-through;color:var(--muted)}
.target{color:var(--green-ink);font-weight:500}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.split{grid-template-columns:1fr}}
.yes h3{color:var(--green-ink)}
.no h3{color:var(--red)}

.stat-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
@media(max-width:700px){.stat-rail{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:left}
.stat .num{font-family:"Instrument Serif",Georgia,serif;font-size:40px;line-height:1}
.stat .lbl{color:var(--muted);font-size:13px;margin-top:6px}

.fake-ui{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.fake-ui .chrome{display:flex;gap:6px;padding:12px 14px;background:var(--alt);border-bottom:1px solid var(--line)}
.fake-ui .dot{width:9px;height:9px;border-radius:99px;background:#D1D5DB}
.fake-ui .body{padding:16px}
.fake-ui .row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.fake-ui .row:last-child{border-bottom:0}

.doctrine{display:grid;grid-template-columns:1.4fr .8fr;gap:22px}
@media(max-width:900px){.doctrine{grid-template-columns:1fr}}
.doctrine blockquote{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:28px;line-height:1.35;font-style:italic}
.doctrine .meta{margin-top:16px;color:var(--muted);font-size:14px}

.checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){.checkgrid{grid-template-columns:1fr}}
.checkgrid .item{display:flex;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;color:var(--soft)}

.guarantee{background:var(--dark2);color:#E8ECF4;border-radius:var(--radius);padding:28px;margin-top:28px}
.guarantee strong{color:#34D399}

.register{background:var(--alt);border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.form-grid .full{grid-column:1/-1}
label.field{display:grid;gap:6px;font-size:13px;color:var(--soft);font-weight:500}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;font:400 15px Inter,sans-serif;color:var(--ink)}
.hidden{position:absolute;left:-9999px}
.form-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.success{display:none;padding:28px;border-radius:var(--radius);background:var(--green-soft);border:1px solid rgba(5,150,105,.2)}
.success.show{display:block}
.form.hide{display:none}

.site-footer{padding:40px 0 110px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.site-footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:12px 16px;background:rgba(252,252,251,.95);border-top:1px solid var(--line);backdrop-filter:blur(10px)}
.sticky-cta.show{display:block}
.sticky-cta .inner{display:flex;gap:12px;align-items:center;justify-content:space-between;width:min(var(--max),100%);margin:0 auto}
.sticky-cta .btn{flex:0 0 auto}
@media(max-width:700px){.sticky-cta .copy{display:none}.sticky-cta .btn{width:100%;justify-content:center}}
.footnote{font-size:13px;color:var(--muted);margin-top:14px}

.compare-card{padding:0;overflow:hidden}
.compare-head{padding:12px 18px;color:#fff;letter-spacing:.1em}
.compare-head.bad-head{background:#0F172A}
.compare-head.good-head{background:var(--green)}
.compare-card .status-ui.featured{margin:16px 16px 0;border-radius:12px}
.compare-card .list{padding:0 18px 20px}
.compare-card .callouts{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px 4px}
.callout{background:rgba(15,23,42,.06);color:var(--soft);border-radius:10px;padding:8px 11px;font-size:13px;font-weight:500}
.dark-card .callout{background:rgba(255,255,255,.06);color:#C5CCD8}
.callouts.good .callout{background:var(--green-soft);color:var(--green-ink)}
.status-row b{font-family:"JetBrains Mono",monospace;font-weight:500;margin-right:4px}

.rail{padding:28px 0 22px;border-block:1px solid var(--line);background:
  linear-gradient(180deg,rgba(245,245,243,.9),rgba(252,252,251,.95));
  position:relative;overflow:hidden}
.rail-label{text-align:center;color:var(--muted);margin:0 0 14px;font-size:11px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  background:#fff;border-block:1px solid var(--line);padding:16px 0}
.marquee-track{display:flex;width:max-content;animation:bank-scroll 38s linear infinite}
.marquee-group{display:flex;align-items:center;gap:28px;padding-right:28px}
.bank{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);white-space:nowrap;font-weight:500}
.bank i{width:7px;height:7px;border-radius:99px;background:var(--green);display:inline-block;flex:0 0 auto}
@keyframes bank-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}



/* ===== Blueprint atmosphere (adapted) ===== */
/* ---------- edge-art scene layer (art hugs the left + right edges) ---------- */
.has-scene{position:relative}
.has-scene>*:not(.scene){position:relative;z-index:1}
/* no centre sheet: the whiteness comes from the page itself now (--paper) plus the
   grayscale/lift on the edge art, so there is no visible two-tone box in the middle */
.scene{
  /* the scene sits BEHIND the graph-paper layer, so both live on negative z-index
     inside the section's own stacking context: scene -2, graph paper -1, copy on top */
  position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:var(--o,.85);
  /* the fade is a length, not a flat 18%, so a 420px section and a 7600px one
     hand off to each other over the same distance */
  --fade:clamp(120px,18%,320px);
  --fade-b:var(--fade);
  /* the horizontal edge mask as four tunable stops rather than four literals:
     solid art out to --me1, dissolving to a clear centre that runs --mx1 -> --mx2,
     then the right band picks back up at --me2. any section (or breakpoint) can
     widen its own clear centre by overriding ONE variable instead of restating
     the whole two-layer mask. */
  --me1:6%;--mx1:20%;--mx2:80%;--me2:94%;
  -webkit-mask-image:
    linear-gradient(90deg,#000 0%,#000 var(--me1),transparent var(--mx1),transparent var(--mx2),#000 var(--me2),#000 100%),
    linear-gradient(180deg,transparent 0%,#000 var(--fade),#000 calc(100% - var(--fade-b)),transparent 100%);
  mask-image:
    linear-gradient(90deg,#000 0%,#000 var(--me1),transparent var(--mx1),transparent var(--mx2),#000 var(--me2),#000 100%),
    linear-gradient(180deg,transparent 0%,#000 var(--fade),#000 calc(100% - var(--fade-b)),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* the scene JPEG is opaque, so each edge needs its own box or the left one
   paints straight over the right one */
.scene::before,.scene::after{
  content:"";position:absolute;top:0;bottom:0;width:52%;
  background-image:var(--img);background-repeat:no-repeat;background-size:auto 100vh;
  /* the s2 engravings are already neutral gray on pure white stock, so no desaturation
     is needed. the hair of lift that keeps the ground flush with --paper used to be a
     runtime filter:brightness(1.02) here, which meant a filter pass on all sixteen of
     these viewport-pinned boxes on every scroll frame. it is now baked into the pixels
     of the *-lit files instead, byte for byte: clip(round(v * 1.02)) in 8-bit sRGB,
     which is exactly what Chrome's brightness() does (verified on a 0..255 ramp). */
}
/* each edge box also dissolves toward the centre on its own, so the 52% boundary
   never shows as a vertical cut inside the section-level mask */
.scene::before{
  left:0;background-position:left center;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);
}
.scene::after{
  right:0;background-position:right center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 100%);
}
/* every scene but the hero is pinned to the viewport, so the set pieces hold
   still while the copy scrolls and each section swaps the scene behind it */
@media(min-width:768px){
  .scene.pin::before,.scene.pin::after{background-attachment:fixed}
}
/* if two-layer mask intersection is unsupported, keep the horizontal edge mask only */
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  .scene{
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 var(--me1),transparent var(--mx1),transparent var(--mx2),#000 var(--me2),#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 var(--me1),transparent var(--mx1),transparent var(--mx2),#000 var(--me2),#000 100%);
  }
}
/* per-section tuning knob: a hair more clear centre where a subheadline sits low
   enough in the section to compete with the art. one variable pair, nothing else. */
.scene.midwide{--mx1:16%;--mx2:84%}
/* on a phone the hero's side art has almost no room before it reaches the copy
   column, so the hero (and only the hero) pulls its edges in hard: solid to 4%,
   fully gone by 14% (52.5px at a 375 viewport) */
@media(max-width:767px){
  .hero>.scene{--me1:4%;--mx1:14%;--mx2:86%;--me2:96%}
}
/* ---------- graph-paper ground ----------
   the reference runs faded engineering paper behind most of the page, straight
   through the middle, which is what stops the centre column reading as one wide
   empty white box. two logical layers (a 64px major grid and a 16px minor grid,
   each drawn on both axes), masked by the INTERSECTION of a horizontal fade that
   holds full strength across the middle ~74% and dies out just before the viewport
   edge (overlapping the inner edge of the scene art on the way), and a ~120px fade
   at the top and bottom so one section hands off to the next without a seam.
   every section owns a stacking context, so the paper can sit at z-index -1:
   above the scene art at -2, below every scrap of copy. */
section,.hero{isolation:isolate}
section:not(.band-dark)::after,.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  --gmaj:rgba(13,16,23,.018);
  --gmin:rgba(13,16,23,.008);
  /* a short section would be swallowed whole by two flat 120px fades */
  --gfade:min(120px,20%);
  background-image:
    repeating-linear-gradient(90deg,var(--gmaj) 0,var(--gmaj) 1px,transparent 1px,transparent 64px),
    repeating-linear-gradient(180deg,var(--gmaj) 0,var(--gmaj) 1px,transparent 1px,transparent 64px),
    repeating-linear-gradient(90deg,var(--gmin) 0,var(--gmin) 1px,transparent 1px,transparent 16px),
    repeating-linear-gradient(180deg,var(--gmin) 0,var(--gmin) 1px,transparent 1px,transparent 16px);
  -webkit-mask-image:
    linear-gradient(90deg,transparent 0%,transparent 3%,#000 13%,#000 87%,transparent 97%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--gfade),#000 calc(100% - var(--gfade)),transparent 100%);
  mask-image:
    linear-gradient(90deg,transparent 0%,transparent 3%,#000 13%,#000 87%,transparent 97%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 var(--gfade),#000 calc(100% - var(--gfade)),transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* the hero keeps the lightest version so the headline still owns the fold */
section:not(.band-dark)::after{opacity:.22}
.hero::after{opacity:.18}
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){
  section:not(.band-dark)::after,.hero::after{
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 13%,#000 87%,transparent 97%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,transparent 3%,#000 13%,#000 87%,transparent 97%,transparent 100%);
  }
}

/* the centre rail's green lining. desktop only, and barely there: on a narrow
   viewport it sits on top of the content instead of framing it */
.railguide{display:none}
@media(min-width:1100px){
  .railguide{
    display:block;
    position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
    width:min(1180px,100% - 24px);z-index:5;pointer-events:none;
    border-left:1px solid rgba(5,150,105,.09);
    border-right:1px solid rgba(5,150,105,.09);
  }
}


.hero.has-scene{padding:88px 0 72px;text-align:center;position:relative;overflow:hidden}
.hero.has-scene .wrap{position:relative;z-index:1;max-width:760px}
.hero.has-scene h1{max-width:16ch;margin-left:auto;margin-right:auto}
.hero.has-scene .sub{margin-left:auto;margin-right:auto}
.hero.has-scene .hero-actions{justify-content:center}
.hero.has-scene .proof{text-align:center}
.pill{
  display:inline-flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;margin-bottom:22px;
  border:1px solid rgba(15,23,42,.1);border-radius:99px;background:rgba(255,255,255,.72);
}
.pill b{
  font-family:"JetBrains Mono",monospace;font-weight:500;font-size:10.5px;letter-spacing:.1em;color:#fff;
  background:var(--green);padding:5px 12px;border-radius:99px;text-transform:uppercase;
}
.pill span{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;color:var(--soft);text-transform:uppercase}
.proof-row{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 22px;flex-wrap:wrap}
.avatars{display:flex}
.avatars img{
  width:38px;height:38px;border-radius:50%;border:2px solid var(--paper);margin-left:-10px;
  object-fit:cover;filter:grayscale(1);background:var(--alt);
}
.avatars img:first-child{margin-left:0}
.stars{color:#C89B3C;font-size:15px;letter-spacing:2px}
.proof-row p{font-size:14.5px;margin:0;color:var(--soft)}
.proof-row p b{font-weight:600;color:var(--ink)}
.micro-trust{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.section.has-scene,.band-dark.has-scene{position:relative;overflow:hidden}
.band-dark.has-scene .scene{opacity:.35}
.railguide{display:none}
@media(min-width:1100px){
  .railguide{
    display:block;position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);
    width:min(1080px,100% - 24px);z-index:5;pointer-events:none;
    border-left:1px solid rgba(5,150,105,.09);border-right:1px solid rgba(5,150,105,.09);
  }
}
/* rename collision: keep bank marquee as .bank-rail */
.bank-rail{padding:28px 0 22px;border-block:1px solid var(--line);background:linear-gradient(180deg,rgba(245,245,243,.9),rgba(252,252,251,.95));position:relative;overflow:hidden}


/* ===== beauty pass ===== */
.hero.has-scene{padding:96px 0 84px}
.hero.has-scene .scene{opacity:.92}
.hero.has-scene h1{
  font-size:clamp(48px,6.4vw,84px);
  letter-spacing:-.025em;
  line-height:1.02;
  margin:0 auto 20px;
}
.hero.has-scene .sub{
  font-size:17px;line-height:1.65;color:#3D4557;
  max-width:54ch;font-weight:300;
}
.hero.has-scene .pill{
  margin-bottom:28px;
  box-shadow:0 8px 24px -18px rgba(15,23,42,.35);
  backdrop-filter:blur(6px);
}
.hero.has-scene .hero-actions{margin-top:4px;gap:14px}
.hero.has-scene .btn-ghost{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(4px);
}
.hero.has-scene .micro-trust{letter-spacing:.14em;opacity:.85}
.site-header{
  background:rgba(252,252,251,.78);
  border-bottom:1px solid rgba(15,23,42,.06);
}
.site-header .btn-primary{display:none}
.site-header .btn-header{
  display:inline-flex;align-items:center;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.7);
  color:var(--ink);
  border-radius:999px;
  padding:10px 16px;
  font:500 11px/1 "JetBrains Mono",monospace;
  letter-spacing:.14em;text-transform:uppercase;
}
.site-header .btn-header:hover{transform:translateY(-1px)}
/* soften bank marquee band */
.bank-rail{background:transparent;border-block:0;padding:10px 0 8px}
.bank-rail .rail-label{margin-bottom:10px;opacity:.75}
.marquee{
  background:rgba(255,255,255,.72);
  border-block:1px solid rgba(15,23,42,.07);
  backdrop-filter:blur(4px);
}
/* section scenes a touch quieter so cards stay crisp */
.section.has-scene > .scene{opacity:.72}


/* ===== z-index / hero grid fix ===== */
.hero.has-scene{
  isolation:isolate;
  position:relative;
  overflow:hidden;
}
.hero.has-scene > .scene{
  z-index:0 !important;
  pointer-events:none;
}
/* graph paper must NEVER paint over copy/buttons/images */
.hero.has-scene::after{
  z-index:0 !important;
  opacity:.14 !important;
  pointer-events:none !important;
}
.hero.has-scene > .wrap{
  position:relative;
  z-index:2;
}
.hero.has-scene .pill,
.hero.has-scene .hero-actions,
.hero.has-scene .proof-row,
.hero.has-scene .btn,
.hero.has-scene img,
.hero.has-scene .avatars{
  position:relative;
  z-index:3;
}
/* safer: disable hero graph paper entirely — engravings carry the mood */
.hero.has-scene::after{
  display:none !important;
}
/* keep paper only on lower sections, still behind content */
.section.has-scene{
  isolation:isolate;
  position:relative;
}
.section.has-scene > .scene{z-index:0;pointer-events:none}
.section.has-scene::after{z-index:0;pointer-events:none}
.section.has-scene > .wrap{position:relative;z-index:2}