/* ===========================================================================
 * LEDGER — tokens mirrored from the app (frontend/app/globals.css).
 * Radix sand / grass / amber / tomato light scales are inlined here because a
 * standalone page can't @import the Radix packages. Names match the app so this
 * file stays a drop-in: a look change is still a one-place edit.
 *
 * Light only, on purpose. Ledger is paper-and-ink (modeled on a drawing sheet),
 * the app ships light, and the --sel / --chrome families have no dark values
 * decided yet.
 * ========================================================================= */
:root {
  --sand-1:#fdfdfc; --sand-2:#f9f9f8; --sand-3:#f1f0ef; --sand-4:#e9e8e6;
  --sand-5:#e2e1de; --sand-6:#dad9d6; --sand-7:#cfceca; --sand-8:#bcbbb5;
  --sand-9:#8d8d86; --sand-11:#63635e; --sand-12:#21201c;
  --grass-3:#e9f6e9; --grass-6:#b2ddb5; --grass-11:#2a7e3b;
  --amber-3:#fff7c2; --amber-6:#f3d673; --amber-11:#ab6400;
  --tomato-3:#feebe7; --tomato-6:#fdbdaf; --tomato-11:#d13415;

  --radius: 0.25rem;
  --background: var(--sand-1);
  --foreground: var(--sand-12);
  --muted-foreground: var(--sand-11);
  --border: var(--sand-6);

  --go: var(--grass-11);   --go-bg: var(--grass-3);   --go-border: var(--grass-6);
  --cond: var(--amber-11); --cond-bg: var(--amber-3); --cond-border: var(--amber-6);
  --nogo: var(--tomato-11);--nogo-bg: var(--tomato-3);--nogo-border: var(--tomato-6);

  /* selection / attention only. Never a verdict, never the primary button. */
  --sel:#c98a2e; --sel-deep:#a86f14; --sel-bg:#fdf8ef; --sel-border:#e3cf9f;

  /* chrome = a second surface framing light content */
  --chrome:#dcd8d2; --chrome-foreground:#372a15;
  --chrome-muted:#5f574a; --chrome-border:#c7c2ba;
  --canvas:#faf3ea; --canvas-foreground:#1b1916;

  --font-sans:'Inter','Inter Variable',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* marketing type scale — the app's tops out at 14px */
  --t-eyebrow:0.6875rem; --t-micro:0.75rem; --t-meta:0.8125rem;
  --t-body:1rem; --t-lead:1.0625rem;
  --t-h3:1.1875rem;
  --t-h2:clamp(1.375rem,1.1rem + 1.4vw,1.875rem);
  --t-h1:clamp(1.875rem,1.35rem + 3.1vw,3rem);

  --measure:63ch;
}

*,*::before,*::after{box-sizing:border-box;border-color:var(--border);}

body{
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shared primitives ---------- */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:20px;}
.band{border-top:1px solid var(--border);}
.band-canvas{background:var(--canvas);color:var(--canvas-foreground);}
.band-quiet{background:var(--sand-2);}
.sect{padding-block:clamp(44px,6vw,76px);}

.eyebrow{
  font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--muted-foreground);
  margin:0 0 14px;
}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-0.022em;}
h1{font-size:var(--t-h1);font-weight:700;line-height:1.08;}
h2{font-size:var(--t-h2);font-weight:650;line-height:1.18;}
h3{font-size:var(--t-h3);font-weight:600;line-height:1.3;letter-spacing:-0.012em;}
p{margin:0;}
.lead{font-size:var(--t-lead);color:var(--sand-12);max-width:var(--measure);}
.prose{color:var(--muted-foreground);max-width:var(--measure);}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.ref{
  font-family:var(--font-mono);font-size:var(--t-micro);font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--sand-12);
  background:var(--sand-3);border:1px solid var(--sand-5);
  border-radius:calc(var(--radius)*0.6);padding:1px 5px;white-space:nowrap;
}

a{color:inherit;}
a:focus-visible,button:focus-visible{
  outline:2px solid var(--sel);outline-offset:2px;border-radius:calc(var(--radius)*0.6);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:600;font-size:var(--t-meta);
  padding:11px 18px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background-color .14s ease,border-color .14s ease;
}
.btn-primary{background:var(--sand-12);color:var(--sand-1);}
.btn-primary:hover{background:#000;}
.btn-ghost{
  background:transparent;color:var(--sand-12);border-color:var(--sand-7);
}
.btn-ghost:hover{background:var(--sand-3);border-color:var(--sand-8);}

/* verdict badge — same construction as the app's <Verdict> */
.verdict{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  padding:3px 7px;border:1px solid;border-radius:calc(var(--radius)*0.6);
  white-space:nowrap;
}
.v-go{background:var(--go-bg);color:var(--go);border-color:var(--go-border);}
.v-cond{background:var(--cond-bg);color:var(--cond);border-color:var(--cond-border);}
.v-nogo{background:var(--nogo-bg);color:var(--nogo);border-color:var(--nogo-border);}

/* ---------- header ---------- */
.hdr{
  border-bottom:1px solid var(--border);background:var(--background);
  position:sticky;top:0;z-index:20;
}
.hdr-in{display:flex;align-items:center;gap:20px;min-height:58px;}
.brand{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;}
.brand b{font-size:0.9375rem;font-weight:700;letter-spacing:-0.02em;}
.brand span{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);
}
.hdr-nav{display:flex;gap:22px;margin-left:auto;}
.hdr-nav a{
  font-size:var(--t-meta);color:var(--muted-foreground);text-decoration:none;
  padding-block:4px;border-bottom:1px solid transparent;
}
.hdr-nav a:hover{color:var(--sand-12);border-bottom-color:var(--sel);}
.hdr .btn{padding:8px 14px;}
/* Log in sits beside Book a call. Ghost on the left so ink stays reserved for
 * the primary action: nearly everyone arriving here is a prospect who has never
 * logged in, and customers mostly bookmark the app directly. */
.hdr-cta{margin-left:18px;display:flex;align-items:center;gap:8px;}
@media (max-width:780px){
  .hdr-nav{display:none;}
  .hdr-cta{margin-left:auto;}
}
/* Below ~430px both buttons plus the wordmark overflow the bar; the login
 * link is the one a prospect needs least, so it goes first. */
@media (max-width:430px){
  .hdr-cta .btn-ghost{display:none;}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,72px) clamp(32px,4vw,44px);}
.hero h1{max-width:24ch;}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,52px);align-items:center;
}
@media (max-width:880px){.hero-grid{grid-template-columns:1fr;}}
.hero-art{min-width:0;}
.sheet-svg{
  display:block;width:100%;height:auto;
  border:1px solid var(--sand-6);border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(27,25,22,.08);
}
.art-cap{
  margin-top:9px;font-family:var(--font-mono);font-size:var(--t-micro);
  color:var(--muted-foreground);
}

/* INK BAND. The Bluebeam composition the tokens describe: a dark frame around
 * bright content, so the evidence panel reads as an object instead of more
 * page. Ink is --sand-12, already the brand's primary, so no new colour. */
.band-ink{background:var(--sand-12);color:var(--sand-4);border-top-color:var(--sand-12);}
.band-ink .eyebrow{color:var(--sand-9);}
.band-ink h2{color:var(--sand-1);}
.band-ink .prose{color:var(--sand-8);}
.band-ink .sect > .find-why{color:var(--sand-9);}

/* every page in the package, one cell each */
.pagemap{display:block;width:100%;max-width:340px;height:auto;}
.hero .lead{margin-top:18px;}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.trust{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
  font-size:var(--t-meta);color:var(--muted-foreground);max-width:var(--measure);
}
.trust b{color:var(--sand-12);font-weight:600;}

/* three-fact strip */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-top:30px;
}
.fact{background:var(--background);padding:14px 18px 16px;}
/* each column says what it is, so three numbers read as one progression */
.fact-lbl{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--sand-9);
  margin:0 0 9px;
}
.fact dt{
  font-family:var(--font-mono);font-size:1.5rem;font-weight:500;
  font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-0.025em;
}
.fact dd{margin:7px 0 0;font-size:var(--t-meta);color:var(--muted-foreground);}
@media (max-width:620px){.facts{grid-template-columns:1fr;}}

/* ---------- evidence panel ---------- */
.panel{
  border:1px solid var(--chrome-border);border-radius:var(--radius);
  overflow:hidden;background:var(--canvas);margin-top:28px;
}
.panel-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--chrome);color:var(--chrome-foreground);
  border-bottom:1px solid var(--chrome-border);padding:10px 14px;
}
.panel-bar .job{font-size:var(--t-meta);font-weight:600;}
.panel-bar .pages{
  font-family:var(--font-mono);font-size:var(--t-micro);
  font-variant-numeric:tabular-nums;color:var(--chrome-muted);
}
.panel-bar .verdict{margin-left:auto;}
.panel-body{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--chrome-border);}
@media (max-width:760px){.panel-body{grid-template-columns:1fr;}}
.panel-col{background:var(--canvas);padding:16px 16px 18px;}
.col-hd{
  font-family:var(--font-mono);font-size:var(--t-eyebrow);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--chrome-muted);
  margin:0 0 12px;
}
.find{padding:12px 0;border-top:1px solid var(--sand-5);}
.find:first-of-type{border-top:0;padding-top:0;}
.find-top{display:flex;align-items:baseline;gap:8px;}
.find-top strong{font-size:var(--t-meta);font-weight:600;}
.find-why{margin:5px 0 8px;font-size:var(--t-micro);color:var(--sand-11);}
.cites{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.cites-lbl{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--sand-9);
  margin-right:2px;
}
.out{opacity:.72;}

/* CSS-drawn drawing sheets, no images needed */
.sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.sheet{text-align:left;font:inherit;padding:0;background:none;border:0;cursor:default;}
.sheet-img{
  position:relative;aspect-ratio:4/3;background:#fff;
  border:1px solid var(--sand-7);border-radius:2px;overflow:hidden;
  box-shadow:0 1px 2px rgba(27,25,22,.1);
}
.sheet-img::before{
  content:"";position:absolute;inset:7% 7% 20% 7%;
  background:
    repeating-linear-gradient(90deg,var(--sand-6) 0 1px,transparent 1px 15px),
    repeating-linear-gradient(0deg,var(--sand-5) 0 1px,transparent 1px 13px);
  opacity:.8;
}
.sheet-img::after{
  content:"";position:absolute;right:7%;bottom:7%;width:30%;height:11%;
  border:1px solid var(--sand-7);background:var(--sand-2);
}
.sheet.is-sel .sheet-img{
  border-color:var(--sel);box-shadow:0 0 0 2px var(--sel-border);
}
.sheet-no{
  display:block;margin-top:6px;font-family:var(--font-mono);
  font-size:var(--t-micro);font-weight:500;font-variant-numeric:tabular-nums;
}
.sheet-ttl{display:block;font-size:0.6875rem;color:var(--sand-11);line-height:1.35;}
.sheet.is-sel .sheet-no{color:var(--sel-deep);}
@media (max-width:420px){.sheets{grid-template-columns:repeat(2,1fr);}}

.panel-foot{
  border-top:1px solid var(--chrome-border);background:var(--sand-2);
  padding:9px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.illus{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--sel-deep);background:var(--sel-bg);
  border:1px solid var(--sel-border);border-radius:calc(var(--radius)*0.6);
  padding:2px 6px;
}
.panel-foot p{font-size:var(--t-micro);color:var(--muted-foreground);}

/* verbatim text lifted off the sheet — evidence, so neutral rules, not gold */
.quote{
  font-family:var(--font-mono);font-size:var(--t-micro);line-height:1.5;
  color:var(--sand-12);background:#fff;
  border:1px solid var(--sand-5);border-left:2px solid var(--sand-8);
  border-radius:2px;padding:6px 8px;margin-top:8px;
}
.qref{font-weight:600;color:var(--sand-9);margin-left:4px;}

/* every page a scope was found on. gold marks the anchor page only. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px;}
.pg{
  font-family:var(--font-mono);font-size:var(--t-micro);
  font-variant-numeric:tabular-nums;text-align:center;padding:4px 0;
  background:#fff;border:1px solid var(--sand-6);border-radius:2px;
  color:var(--sand-11);
}
.pg.is-sel{
  border-color:var(--sel);background:var(--sel-bg);
  color:var(--sel-deep);font-weight:600;
}

/* ---------- board rows ---------- */
.board{
  border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;margin-top:24px;
}
.board-hd,.row{
  display:grid;grid-template-columns:minmax(0,2.3fr) 7.5rem minmax(0,1.9fr);
  gap:14px;align-items:center;padding:11px 14px;
}
.board-hd{
  background:var(--sand-3);border-bottom:1px solid var(--border);
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted-foreground);
}
.row{border-top:1px solid var(--sand-4);background:var(--background);}
.row:first-of-type{border-top:0;}
.row .nm{font-size:var(--t-meta);font-weight:600;min-width:0;}
.row .nm em{
  display:block;font-style:normal;font-weight:400;
  font-family:var(--font-mono);font-size:var(--t-micro);
  color:var(--muted-foreground);font-variant-numeric:tabular-nums;
}
.row .bc{font-size:var(--t-micro);color:var(--muted-foreground);min-width:0;}
@media (max-width:620px){
  .board-hd{display:none;}
  .row{grid-template-columns:1fr auto;gap:8px 12px;}
  .row .bc{grid-column:1/-1;}
}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:26px;}
.step{background:var(--background);padding:18px;display:flex;gap:14px;}
.band-canvas .step{background:var(--canvas);}
.step-n{
  flex:0 0 auto;font-family:var(--font-mono);font-size:var(--t-micro);
  font-weight:600;font-variant-numeric:tabular-nums;color:var(--sand-9);
  padding-top:2px;
}
.step h3{margin-bottom:5px;}
.step p{font-size:var(--t-meta);color:var(--muted-foreground);}
@media (max-width:680px){.steps{grid-template-columns:1fr;}}

.steps.trio{grid-template-columns:repeat(2,1fr);}
.trio .step{gap:13px;align-items:flex-start;}

/* Icons are drawing conventions, not UI glyphs: a sheet stack, a stamped
 * verdict, a detail callout bubble with its leader, a struck line item. Thin
 * ink strokes in a hairline square, echoing a title block — deliberately not a
 * tinted rounded tile. */
.ico{
  flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--sand-6);border-radius:calc(var(--radius)*0.8);
  background:var(--background);color:var(--sand-12);
}
.ico svg{width:18px;height:18px;display:block;}
/* Tinted by meaning, not decoration: the answer is a verdict green, citations
 * are the attention gold, exclusions the out-of-scope red. */
.ico-ink{border-color:var(--chrome-border);background:var(--chrome);color:var(--chrome-foreground);}
.ico-go{border-color:var(--go-border);background:var(--go-bg);color:var(--go);}
.ico-sel{border-color:var(--sel-border);background:var(--sel-bg);color:var(--sel-deep);}
.ico-nogo{border-color:var(--nogo-border);background:var(--nogo-bg);color:var(--nogo);}

/* ---------- product shot: the board, built from the app's own tokens ------- */
.app-shot{
  border:1px solid var(--chrome-border);border-radius:var(--radius);
  overflow:hidden;background:var(--background);
  box-shadow:0 4px 22px rgba(27,25,22,.11);
}
.app-bar{
  display:flex;align-items:center;gap:9px;padding:9px 12px;
  background:var(--chrome);color:var(--chrome-foreground);
  border-bottom:1px solid var(--chrome-border);
}
.app-bar .t{font-size:var(--t-micro);font-weight:600;}
.app-bar .m{
  margin-left:auto;font-family:var(--font-mono);font-size:0.625rem;
  color:var(--chrome-muted);font-variant-numeric:tabular-nums;
}
.app-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border-bottom:1px solid var(--border);
}
.app-stats > div{background:var(--background);padding:11px 12px;}
.app-stats b{
  display:block;font-family:var(--font-mono);font-size:1.3rem;font-weight:500;
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
}
.app-stats span{
  display:block;margin-top:5px;font-family:var(--font-mono);font-size:0.5625rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--sand-9);
}
.s-go b{color:var(--go);} .s-cond b{color:var(--cond);} .s-nogo b{color:var(--nogo);}
.app-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;
  align-items:center;padding:9px 12px;border-top:1px solid var(--sand-4);
}
.app-row .t{font-size:var(--t-micro);font-weight:600;min-width:0;}
.app-row .t em{
  display:block;font-style:normal;font-weight:400;font-family:var(--font-mono);
  font-size:0.625rem;color:var(--sand-9);font-variant-numeric:tabular-nums;
}
.app-row.is-sel{background:var(--sel-bg);box-shadow:inset 2px 0 0 var(--sel);}

/* ---------- first-customer results ---------- */
.results{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-top:26px;
}
.res{background:var(--background);padding:16px 18px;}
.res b{
  display:block;font-family:var(--font-mono);font-size:1.6rem;font-weight:500;
  line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;
}
.res span{display:block;margin-top:8px;font-size:var(--t-meta);color:var(--muted-foreground);}
.res-hero{background:var(--sel-bg);}
.res-hero b{color:var(--sel-deep);}
.res-nogo b{color:var(--nogo);}
.res-go b{color:var(--go);}
@media (max-width:860px){.results{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.results{grid-template-columns:1fr;}}

/* ---------- comparison: us against the category we get mistaken for ------- */
.vs{
  margin-top:26px;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;background:var(--background);
}
.vs-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);
  border-top:1px solid var(--sand-4);
}
.vs-row:first-child{border-top:0;}
.vs-row > *{padding:12px 14px;font-size:var(--t-meta);min-width:0;}
.vs-hd{
  background:var(--sand-3);font-family:var(--font-mono);font-size:0.625rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-foreground);
}
.vs-hd.mine{background:var(--sel-bg);color:var(--sel-deep);}
.vs-k{font-weight:600;background:var(--sand-2);}
.vs-them{color:var(--muted-foreground);}
.vs-me{background:var(--sel-bg);color:var(--sand-12);}
@media (max-width:700px){
  .vs-row{grid-template-columns:1fr;}
  .vs-row > *{padding:9px 14px;}
  .vs-k{border-top:1px solid var(--sand-5);}
  .vs-them::before{content:"Takeoff tool: ";font-weight:600;color:var(--sand-9);}
  .vs-me::before{content:"Bid Intelligence: ";font-weight:600;color:var(--sel-deep);}
  .vs-hd{display:none;}
}

/* ---------- run the math ---------- */
.roi{
  margin-top:26px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--background);padding:clamp(18px,2.5vw,24px);
}
.roi-lbl{font-size:var(--t-meta);font-weight:600;}
.roi-ctl{display:flex;align-items:center;gap:14px;margin-top:12px;}
.roi-ctl input[type=range]{flex:1 1 auto;min-width:0;accent-color:var(--sel);}
.roi-ctl output{
  flex:0 0 auto;font-family:var(--font-mono);font-size:1.1rem;font-weight:500;
  font-variant-numeric:tabular-nums;min-width:3ch;text-align:right;
}
.roi-out{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:18px;
  background:var(--border);border:1px solid var(--border);
  border-radius:calc(var(--radius)*0.8);overflow:hidden;
}
.roi-out > div{background:var(--sand-2);padding:14px 16px;}
.roi-out b{
  display:block;font-family:var(--font-mono);font-size:1.5rem;font-weight:500;
  line-height:1;letter-spacing:-0.025em;font-variant-numeric:tabular-nums;
  color:var(--sel-deep);
}
.roi-out span{display:block;margin-top:7px;font-size:var(--t-meta);color:var(--muted-foreground);}
.roi-note{margin-top:12px;font-size:var(--t-micro);color:var(--muted-foreground);}
@media (max-width:520px){.roi-out{grid-template-columns:1fr;}}

/* closing band on ink, so the page ends on contrast */
.band-ink .close-box{
  background:#2b2a25;border-color:#3d3b35;
}
.band-ink .close-box .lead{color:var(--sand-2);}
.band-ink .who{border-top-color:#3d3b35;}
.band-ink .who b{color:var(--sand-1);}
.band-ink .who p{color:var(--sand-9);}
.band-ink .close-box .find-why{color:var(--sand-9);}
.band-ink .btn-ghost{color:var(--sand-2);border-color:var(--sand-11);}
.band-ink .btn-ghost:hover{background:#3d3b35;border-color:var(--sand-9);}
.band-ink .dl{border-top-color:#3d3b35;}
.band-ink .dl > div{border-bottom-color:#3d3b35;}
.band-ink .dl dt{color:var(--sand-2);}
.band-ink .dl dd{color:var(--sand-9);}

.pull{
  margin-top:26px;border:1px solid var(--border);border-left:3px solid var(--sel);
  border-radius:var(--radius);background:var(--background);
  padding:clamp(18px,2.5vw,24px);
}
.pull p{font-size:var(--t-lead);color:var(--sand-12);max-width:58ch;}
.pull footer{
  margin-top:14px;font-size:var(--t-micro);color:var(--muted-foreground);
}
.pull footer b{color:var(--sand-12);font-weight:600;}
@media (max-width:680px){.steps,.steps.trio{grid-template-columns:1fr;}}

/* ---------- definition lists ---------- */
.dl{margin-top:24px;border-top:1px solid var(--border);}
.dl > div{
  display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr);
  gap:8px 28px;padding:16px 0;border-bottom:1px solid var(--border);
}
.dl dt{font-size:var(--t-meta);font-weight:600;}
.dl dd{margin:0;font-size:var(--t-meta);color:var(--muted-foreground);}
@media (max-width:680px){.dl > div{grid-template-columns:1fr;gap:4px;}}

.todo{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--nogo);
  background:var(--nogo-bg);border:1px solid var(--nogo-border);
  border-radius:calc(var(--radius)*0.6);padding:1px 5px;margin-right:6px;
}

/* ---------- closing cta ---------- */
.close-box{
  margin-top:26px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--background);padding:clamp(20px,3vw,28px);
}
.who{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;
  margin-top:20px;padding-top:20px;border-top:1px solid var(--border);
}
.who p{font-size:var(--t-micro);color:var(--muted-foreground);}
.who b{display:block;font-size:var(--t-meta);color:var(--sand-12);}
@media (max-width:560px){.who{grid-template-columns:1fr;}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--border);background:var(--sand-2);padding-block:26px;}
.ftr-in{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;}
.ftr p,.ftr a{font-size:var(--t-micro);color:var(--muted-foreground);}
.ftr .co{font-weight:600;color:var(--sand-12);}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
}

/* =========================================================================
 * MULTI-PAGE ADDITIONS
 * ===================================================================== */

/* page intro, used at the top of every sub-page */
.phead{padding-block:clamp(34px,5vw,56px) clamp(22px,3vw,30px);}
.phead h1{font-size:clamp(1.7rem,1.2rem + 2.4vw,2.5rem);max-width:20ch;}
.phead .lead{margin-top:16px;}

/* current page marker in the nav */
.hdr-nav a[aria-current="page"]{
  color:var(--sand-12);border-bottom-color:var(--sel);
}

/* ---------- the flow: four nodes, connected ---------- */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(8px,1.5vw,18px);margin-top:30px;
}
.fstep{position:relative;text-align:center;padding:0 4px;}
/* the connector runs from this node's icon to the next one's */
.fstep:not(:last-child)::after{
  content:"";position:absolute;top:31px;left:calc(50% + 36px);
  width:calc(100% - 72px);height:1px;background:var(--sand-7);
}
.fstep:not(:last-child)::before{
  content:"";position:absolute;top:28px;right:calc(-1 * clamp(8px,1.5vw,18px) / 2 - 3px);
  width:0;height:0;border-left:5px solid var(--sand-8);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}
.fnode{
  width:62px;height:62px;margin:0 auto;display:grid;place-items:center;
  border:1px solid var(--sand-6);border-radius:var(--radius);
  background:var(--background);color:var(--sand-12);position:relative;z-index:1;
}
.fnode svg{width:26px;height:26px;display:block;}
.fstep h3{margin-top:13px;font-size:var(--t-body);}
.fstep p{margin-top:6px;font-size:var(--t-micro);color:var(--muted-foreground);}
.fstep .fn{
  display:block;font-family:var(--font-mono);font-size:0.5625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--sand-9);margin-bottom:9px;
}
.f-go .fnode{border-color:var(--go-border);background:var(--go-bg);color:var(--go);}
.f-sel .fnode{border-color:var(--sel-border);background:var(--sel-bg);color:var(--sel-deep);}
.f-ink .fnode{border-color:var(--chrome-border);background:var(--chrome);color:var(--chrome-foreground);}
@media (max-width:760px){
  .flow{grid-template-columns:1fr;gap:0;}
  .fstep{display:grid;grid-template-columns:62px 1fr;gap:16px;text-align:left;
    padding-bottom:22px;}
  .fstep:not(:last-child)::after{top:62px;left:31px;width:1px;height:calc(100% - 62px);}
  .fstep:not(:last-child)::before{display:none;}
  .fstep .fn{margin-bottom:4px;}
  .fstep h3{margin-top:0;}
  .fstep > div{grid-column:2;}
  .fnode{grid-row:span 2;}
}

/* ---------- footer with columns, like the category expects ---------- */
.ftr-cols{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(20px,3vw,40px);padding-bottom:26px;
  border-bottom:1px solid var(--border);
}
@media (max-width:780px){.ftr-cols{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.ftr-cols{grid-template-columns:1fr;}}
.ftr-col h4{
  font-family:var(--font-mono);font-size:0.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.11em;color:var(--sand-9);
  margin:0 0 11px;
}
.ftr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.ftr-col a{font-size:var(--t-meta);color:var(--muted-foreground);text-decoration:none;}
.ftr-col a:hover{color:var(--sand-12);}
.ftr-brand b{display:block;font-size:0.9375rem;font-weight:700;letter-spacing:-0.02em;}
.ftr-addr{
  margin-top:10px;font-size:var(--t-meta);color:var(--muted-foreground);
  font-style:normal;line-height:1.7;
}
.ftr-addr a{color:var(--sand-12);text-decoration:none;border-bottom:1px solid var(--sand-7);}
.ftr-bot{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:18px;}
.ftr-bot p{font-size:var(--t-micro);color:var(--sand-9);}

/* ---------- contact ---------- */
.contact{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;margin-top:26px;
}
.contact > div{background:var(--background);padding:18px;}
.contact h3{font-size:var(--t-body);}
.contact p,.contact address{
  margin-top:8px;font-size:var(--t-meta);color:var(--muted-foreground);
  font-style:normal;line-height:1.7;
}
.contact a{color:var(--sand-12);text-decoration:none;border-bottom:1px solid var(--sand-7);}
.contact a:hover{border-bottom-color:var(--sel);}
@media (max-width:760px){.contact{grid-template-columns:1fr;}}

/* a quiet link that still reads as a link */
.more{
  display:inline-block;margin-top:18px;font-size:var(--t-meta);font-weight:600;
  color:var(--sand-12);text-decoration:none;
  border-bottom:1px solid var(--sel);padding-bottom:1px;
}
.more:hover{border-bottom-width:2px;}
.band-ink .more{color:var(--sand-1);}