:root{
  --navy:#0A1F44;
  --navy-deep:#07172F;
  --gold:#C9A34E;
  --teal:#00A08A;
  --blue:#2C5C99;
  --ink:#1A2333;
  --paper:#FFFFFF;
  --wash:#F4F6FA;
  --rule:#D7DEE8;
  --muted:#6B7686;
  --pale:#CADCFC;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --measure:34rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.68;
  font-synthesis:none;
}
.wrap{max-width:64rem;margin:0 auto;padding:0 2rem}

a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(44,92,153,.35)}
a:hover{border-bottom-color:var(--blue)}
a:focus-visible,.button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:.75rem;padding-top:1.15rem;padding-bottom:1.15rem}
.mark{display:block;width:30px;height:30px;flex:none}
.wordmark{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:.22em;color:var(--navy);border:0}
.nav{margin-left:auto;display:flex;gap:1.4rem;font-family:var(--sans);font-size:.8125rem}
.nav a{color:var(--muted);border:0}
.nav a:hover{color:var(--navy)}
.nav a[aria-current="page"]{color:var(--navy)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif);color:var(--navy);font-weight:600;margin:0}
h1{font-size:clamp(2rem,4.6vw,2.6rem);line-height:1.24;letter-spacing:-.008em;max-width:38rem}
h2{font-size:clamp(1.4rem,2.9vw,1.75rem);line-height:1.32;max-width:34rem}
h3{font-size:1.0625rem;line-height:1.4}
p{margin:0 0 1.1rem;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lead{font-size:1.1875rem}
.quiet{color:var(--muted)}

/* ---------- sections ---------- */
section{padding:3.6rem 0;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0}
.wash{background:var(--wash)}
.hero{padding:4.4rem 0 3.8rem}
.hero p{margin-top:1.4rem}

/* ---------- calls to action ---------- */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin-top:2rem}
.button{
  font-family:var(--sans);font-size:.875rem;font-weight:500;
  background:var(--navy);color:#fff;border:1px solid var(--navy);
  padding:.7rem 1.2rem;border-radius:6px;display:inline-block;
}
.button:hover{background:var(--navy-deep);border-color:var(--navy-deep)}
.button-note{font-family:var(--sans);font-size:.8125rem;color:var(--muted);max-width:20rem;line-height:1.5}

/* ---------- the measure: a gold path used as a rule ---------- */
.measure-rule{display:block;width:100%;max-width:34rem;height:14px;margin:2.2rem 0}

/* ---------- evidence marks in the margin ---------- */
.ledger{border-top:1px solid var(--rule);margin-top:1.8rem;max-width:38rem}
.ledger-row{display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.class-mark{font-family:var(--sans);font-size:.75rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.class-a{color:var(--teal)}
.class-b{color:var(--blue)}
.class-d{color:var(--gold)}
.ledger-row p{margin:0;font-size:1.0625rem}

/* ---------- plain two-column runs ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 3rem;margin-top:2rem;max-width:52rem}
.cols h3{margin-bottom:.4rem}
.cols p{font-size:1rem;margin:0}

/* ---------- the stack table ---------- */
.stack{width:100%;max-width:44rem;border-collapse:collapse;margin-top:1.8rem;font-size:1rem}
.stack th,.stack td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
.stack th{font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--muted)}
.stack tr.ours td{background:var(--wash);color:var(--navy)}
.stack tr.ours td:first-child{box-shadow:inset 3px 0 0 var(--gold)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:2.4rem 0 3rem;font-family:var(--sans);font-size:.8125rem;color:var(--muted)}
footer p{max-width:36rem;margin-bottom:.5rem}
footer a{color:var(--muted)}

@media (max-width:34rem){
  .wrap{padding:0 1.25rem}
  section{padding:2.6rem 0}
  .hero{padding:3rem 0 2.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}