/* Content pages. Same design language as the homepage and the legal pages:
   Space Grotesk for text, IBM Plex Mono for labels and numbers, navy ground,
   one blue accent. No JS anywhere — these are plain documents. */
:root{
  --bg:#0A0F1E; --panel:#0F1628; --panel-2:#131C31;
  --ink:#F0F4FF; --muted:#8BA7D6; --blue:#3A7BF7; --teal:#00E5C3;
  --rule:rgba(139,167,214,.16); --rule-2:rgba(139,167,214,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{color:#5089F8}
a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:20;background:rgba(10,15,30,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,32px);height:68px;display:flex;align-items:center;gap:clamp(12px,3vw,32px)}
.brand{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.brand b{color:var(--blue);font-weight:700}
.nav-links{display:flex;gap:clamp(14px,2.5vw,26px);margin-left:auto}
.nav-links a{font-size:15px;color:var(--muted);white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.cta-quiet{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;letter-spacing:.04em;color:var(--ink);border:1px solid rgba(139,167,214,.45);padding:9px 18px;border-radius:4px;white-space:nowrap}
.cta-quiet:hover{border-color:var(--blue);color:#fff}
@media (max-width:720px){ .nav-links{display:none} .nav-links+.cta-quiet{margin-left:auto} }

main{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}

.crumbs{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.12em;color:rgba(139,167,214,.6);padding:26px 0 0}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 4px}

/* ---- hero ---- */
.hero{padding:clamp(40px,7vw,72px) 0 clamp(28px,4vw,44px);border-bottom:1px solid var(--rule)}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.22em;color:var(--muted);margin:0 0 16px}
.hero h1{margin:0 0 18px;font-size:clamp(32px,5.4vw,54px);font-weight:500;line-height:1.08}
.hero .sub{margin:0;font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:62ch;line-height:1.6}
.cta{display:inline-block;margin-top:26px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;letter-spacing:.04em;color:#fff;background:var(--blue);padding:15px 30px;border-radius:4px}
.cta:hover{background:#5089F8;color:#fff}

h2{font-size:clamp(24px,3.2vw,34px);font-weight:500;margin:0 0 8px}
section{padding:clamp(38px,6vw,64px) 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:none}

/* ---- services grid ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.svc{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:26px 24px}
.svc h3{margin:0 0 10px;font-size:20px;font-weight:600}
.svc .lead{margin:0 0 12px;color:var(--ink);font-size:16px}
.svc p{margin:0 0 18px;color:var(--muted);font-size:15.5px}
.stat{display:flex;flex-direction:column;gap:4px;padding-top:16px;border-top:1px solid var(--rule)}
.stat .lbl{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;color:rgba(139,167,214,.7)}
.stat .num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:26px;font-weight:500;color:var(--blue)}

/* ---- method ---- */
.steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start}
.steps .n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;color:var(--blue);padding-top:4px}
.steps h3{margin:0 0 5px;font-size:18px;font-weight:600}
.steps p{margin:0;color:var(--muted);max-width:64ch}
@media (max-width:560px){ .steps li{grid-template-columns:34px 1fr;gap:10px} }

/* ---- checklist ---- */
.checklist ul{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;max-width:70ch}
.checklist li{position:relative;padding-left:28px;color:var(--muted)}
.checklist li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:2px;border:1.5px solid var(--teal)}

/* ---- case tables ---- */
.cases{display:flex;flex-direction:column;gap:20px}
.cases h2{margin-bottom:22px}
.case{background:var(--panel);border:1px solid var(--rule);border-radius:10px;overflow:hidden}
.case-head{display:flex;flex-wrap:wrap;gap:22px;padding:22px 24px;border-bottom:1px solid var(--rule)}
.case-head .lbl{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;color:rgba(139,167,214,.7);margin-bottom:5px}
.case-head h3{margin:0;font-size:18px;font-weight:600}
.case-head .did{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;color:var(--ink)}
.table{padding:6px 24px 18px}
.row{display:grid;grid-template-columns:1.7fr 1fr 1fr .8fr;gap:14px;padding:11px 0;border-bottom:1px solid rgba(139,167,214,.08);align-items:baseline}
.row:last-child{border-bottom:none}
.row.head div{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;color:rgba(139,167,214,.7)}
.row .m{color:var(--ink)}
.row .b{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--muted);font-variant-numeric:tabular-nums}
.row .a{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.row .d{font-family:'IBM Plex Mono',ui-monospace,monospace;color:var(--teal);font-variant-numeric:tabular-nums}
.case-note{margin:0;padding:0 24px 22px;color:var(--muted);font-size:15px;max-width:70ch}
/* On a phone the four rigid columns give each ~85px. Stack the label instead. */
@media (max-width:640px){
  .row{grid-template-columns:1fr 1fr 1fr;gap:6px 10px}
  .row>:first-child{grid-column:1/-1}
  .case-head,.table,.case-note{padding-left:18px;padding-right:18px}
}

/* ---- faq / misc ---- */
.faq .qa{padding:18px 0;border-bottom:1px solid var(--rule);max-width:72ch}
.faq .qa:last-child{border-bottom:none}
.faq h3{margin:0 0 6px;font-size:17px;font-weight:600}
.faq p{margin:0;color:var(--muted)}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.two-col h3{margin:0 0 8px;font-size:17px;font-weight:600}
.two-col p{margin:0;color:var(--muted)}
.note-box{border:1px solid var(--rule);border-radius:10px;background:var(--panel);padding:22px 24px;margin-top:8px}
.note-box p{margin:0;color:var(--muted);max-width:72ch}
.note-box strong{color:var(--ink)}

/* ---- closer + footer ---- */
.closer{text-align:center;border-bottom:none}
.closer p{color:var(--muted);max-width:52ch;margin:10px auto 0}
.foot{border-top:1px solid var(--rule);margin-top:20px}
.foot-in{max-width:1080px;margin:0 auto;padding:34px clamp(20px,4vw,32px) 44px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:20px}
.foot-links a{font-size:14px;color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.foot-note{width:100%;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:rgba(139,167,214,.6)}