/* syntheticandhuman.com — site.css: the home page's design system, as a
   stylesheet the inner pages link.

   / ships self-contained since 2026-09-15, carrying the same colour tokens
   in its own <style>, value for value; /work carries the same colours too,
   and its non-colour tokens are its own. The four public inner pages —
   /how-it-runs, /pricing, /who and /privacy — link this file instead, so one
   stylesheet carries the tokens, the nav, the footer, the buttons and the
   card recipe they share with the home page, and each page carries only its
   markup. check_sah_palette_agreement in check_sites.py holds every colour
   token here equal to /'s and /work's own :root, so a colour changed in one
   place reds until all three move; the non-colour tokens (--font, --r,
   --mono, the shadows) are copied from / and held equal by nothing but this
   sentence.

   Set in the system UI stack, like the home page: no webfont, no preload, no
   second file to fetch before a headline paints. /fonts stays in the tree for
   styles.css, which the unlisted partner-side pages still link.

   One colour token per line, for the reader and for the gate's probes, which
   mutate this file by line: the linked-stylesheet reader (SAH_TOKEN_IN_BLOCK)
   is not line-anchored, but the probes that append or edit tokens here are.
   Every pairing this file paints text in is registered in
   SAH_STYLESHEET_PAIRS["site.css"] and measured there; every selector that
   paints var(--accent) is classified EDITORIAL or SYSTEM in the same file,
   and an unclassified one is a finding. The schematic primitives (.sch .nd,
   .nd-out, .nd-hi, .lb, .lb-s, .lb-hi, .ln, .ln-hi, .dsh) keep the names the
   drawings already use, so SAH_DIAGRAM_VOCAB["site.css"] names the same
   highlight rect and the same label that flips. */
:root{
  --paper:#E9ECEE;
  --surface:#FFFFFF;
  --surface-2:#F4F6F8;
  --ink:#0F1720;
  --ink-2:#3B4753;
  --ink-3:#5C6975;
  --line:#DCE1E6;
  --line-2:#C7CED5;
  --accent:#2659DD;
  --accent-2:#BFD0FF;
  --accent-soft:#E6EDFF;
  --ok:#177A45;
  --ok-soft:#E6F6EC;
  --band-mute:rgba(255, 255, 255, 0.72);
  --r:16px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --shadow-window:0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.05),0 40px 90px -36px rgba(15,23,32,.38);
  --shadow-card:0 1px 2px rgba(15,23,32,.04);
}

/* ---------- base, as the home page sets it ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(40px,6vw,72px);line-height:1.02;letter-spacing:-.035em;font-weight:600}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:600}
h3{font-size:17px;font-weight:600;letter-spacing:-.01em}
strong{font-weight:600;color:var(--ink)}
main p a,main li a{text-decoration:underline;text-underline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:99}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:11px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .08s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-secondary{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-sm{height:36px;padding:0 14px;font-size:14px;border-radius:9px}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(233,236,238,.8);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;height:64px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;font-size:15px}
.mark{width:28px;height:28px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.nav ul{list-style:none;margin:0 auto;padding:0;display:flex;gap:6px}
.nav ul a{display:block;padding:8px 12px;border-radius:9px;font-size:14px;color:var(--ink-2);font-weight:500}
.nav ul a:hover{background:rgba(15,23,32,.06);color:var(--ink)}
.nav ul a[aria-current="page"]{color:var(--ink);font-weight:600}

/* ---------- sections and type roles ---------- */
section{padding:96px 0 0}
.eyebrow{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:14px}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--ink-2);max-width:58ch;margin:20px auto 0}
.shead{margin-bottom:32px}
.shead h2{max-width:24ch}
.after{margin-top:14px;color:var(--ink-2);font-size:16px}
.after p+p,.fence p+p{margin-top:12px}
.h-small{font-size:20px;letter-spacing:-.02em;margin-bottom:16px}

/* hero: the inner pages' headlines run longer than the home page's 18ch, so 20ch */
.hero{padding-top:84px;text-align:center}
.hero h1{max-width:20ch;margin:0 auto}
.hero--left{text-align:left}
.hero--left h1{margin:0}
.hero--left .lede{margin:18px 0 0}

/* ---------- the card recipe, shared with every surface on the home page ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-card);padding:20px 22px}
.glow{position:absolute;inset:auto 0 -40px 0;height:60%;pointer-events:none;z-index:0;background:radial-gradient(60% 70% at 30% 60%,rgba(38,89,221,.30),transparent 65%),radial-gradient(50% 60% at 75% 40%,rgba(124,92,255,.24),transparent 65%);filter:blur(34px)}

/* two columns: the claim on the left, the panel on the right (the home page's .fit-grid);
   the panel column is the wider one so a schematic keeps its labels legible */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:start;text-align:left}
.sticky{position:sticky;top:88px}

/* the checklist panel */
.fit-panel{padding:22px 24px}
.fitlist{list-style:none;margin:0;padding:0}
.fitlist li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line)}
.fitlist li:first-child{border-top:0}
.fitlist .tick{flex:none;margin-top:2px}
.fitlist b{display:block;font-size:15px}
.fitlist p{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.fitlist--long p{font-size:14px}
.fit-panel__ft{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}
.tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--ok-soft);color:var(--ok);font-weight:700}
.tick:empty::after{content:"✓"}

/* steps: the five-step list, numbered the way the bill numbers them */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px;text-align:left;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-card);counter-increment:step;display:grid;grid-template-columns:40px 1fr;gap:4px 16px;align-items:start}
.step::before{content:counter(step,decimal-leading-zero);grid-row:1/3;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);padding-top:3px}
.step b{display:block;font-size:15px;margin-bottom:2px}
.step p{font-size:14px;color:var(--ink-2)}
.steps-after,.bill-after{margin-top:28px;color:var(--ink-2);max-width:62ch}

/* the schematic panel: a drawing, its convention chip, and the sentence under it */
.schem{display:grid;gap:14px;align-content:start;grid-template-rows:auto minmax(0,1fr)}
.schem--ft{grid-template-rows:auto minmax(0,1fr) auto}
.schem__hd{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.schem__hd b{font-size:15px}
.schem__hd span{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);white-space:nowrap}
.schem__art{overflow-x:auto;overscroll-behavior-x:contain;align-self:center;padding:4px 0}
.schem__art svg{display:block;width:100%;height:auto;min-width:540px;margin-inline:auto}
.schem__ft{padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.sch{color:var(--ink);font-family:var(--font)}
.sch .nd{fill:var(--surface);stroke:currentColor;stroke-width:1.5}
.sch .nd-out{fill:var(--surface-2);stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 3}
.sch .nd-hi{fill:var(--accent);stroke:var(--accent);stroke-width:1.5}
.sch .lb{font-size:15px;font-weight:600;fill:currentColor}
.sch .lb-s{font-size:13px;font-weight:400;fill:var(--ink-2)}
.sch .lb-hi{fill:#fff}
.sch .ln{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sch .ln-hi{stroke:var(--accent)}
.sch .dsh{stroke:var(--ink-3);stroke-width:1.25;fill:none;stroke-dasharray:4 5;stroke-linecap:round}

/* how it runs: the hero's two panels over the glow, then the bill */
.hero--how .stage{position:relative;margin-top:48px;display:grid;grid-template-columns:1.6fr 1fr;gap:12px;text-align:left}
.hero--how .stage>.panel{position:relative;z-index:1;box-shadow:var(--shadow-window)}
.shape{display:grid;gap:12px;align-content:center;padding:22px 24px}
.shape h2{font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.02em}
.shape p{font-size:15px;color:var(--ink-2)}
.cmp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:end;text-align:left}
.cmp-grid .lead{color:var(--ink-2);font-size:16px}
.bill{margin-top:32px;padding:0;overflow:hidden}
.bill .scroll,.cmp__scroll{overflow-x:auto;overscroll-behavior-x:contain}
.panel table{width:100%;border-collapse:collapse;font-size:14.5px}
.panel th,.panel td{text-align:left;vertical-align:top;padding:12px 18px;border-top:1px solid var(--line)}
.panel thead th{font-size:12px;font-weight:600;color:var(--ink-3);background:var(--surface-2);border-top:0;padding:10px 18px}
.panel tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.panel td{color:var(--ink-2)}
.panel td.here,.panel th.here{background:var(--surface-2);color:var(--ink)}
.bill table{min-width:640px}
.bill tbody th i{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);margin-right:10px}

/* pricing: the number, the ledger, the comparison, the terms */
.price-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
.hero .price-h{display:grid;gap:10px;max-width:none}
.price-h .figure{display:block;font-size:clamp(56px,8vw,96px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.price-h .sub{display:block;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.025em;max-width:24ch}
.price-copy{margin-top:20px;font-size:16px;color:var(--ink-2)}
.ledger{padding:0;overflow:hidden}
.ledger__hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ledger__hd b{font-size:15px}
.ledger__hd span{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3)}
.ledger td{padding:11px 20px}
.ledger tr:first-child td{border-top:0}
.ledger td:last-child{text-align:right;white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.ledger td small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.3;margin-top:1px}
.ledger tr.week td:first-child{font-weight:600;color:var(--ink)}
.ledger tr.zero td{color:var(--ink-3)}
.ledger tr.choice td{background:var(--accent-soft)}
.ledger tr.choice td:first-child,.ledger tr.choice td:last-child{color:var(--accent);font-weight:600}
.cmp{margin-top:0;padding:0;overflow:hidden}
.cmp table{min-width:780px}
.fence{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin-top:12px;font-size:15px;color:var(--ink-2)}
.fence h3{font-size:20px;letter-spacing:-.02em;color:var(--ink);max-width:18ch;margin-top:2px}
.fence--split{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
.terms{padding:0;overflow:hidden}
.facts{margin:0;display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface-2);border-bottom:1px solid var(--line)}
.facts div{padding:14px 18px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts dt{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3)}
.facts dd{margin:4px 0 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.termlist{list-style:none;margin:0;padding:6px 0}
.termlist li{display:grid;grid-template-columns:160px 1fr;gap:6px 20px;padding:16px 20px;border-top:1px solid var(--line);align-items:start}
.termlist li:first-child{border-top:0}
.termlist b{display:block;font-size:15px;line-height:1.3}
.termlist b em{display:block;font-style:normal;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--accent);margin-top:4px}
.termlist p{font-size:14px;color:var(--ink-2)}

/* who: the portrait card, and the working day as three lanes */
.portrait{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:var(--shadow-card)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:558/698;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.portrait figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 8px 4px;font-size:14px;color:var(--ink-2)}
.portrait figcaption b{color:var(--ink)}
.tl-scroll{margin-top:32px;overflow-x:auto;overscroll-behavior-x:contain}
.tl{display:grid;gap:10px;min-width:560px}
.lane{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:center}
.lane__name{font-size:14px;line-height:1.3}
.lane__name b{display:block;color:var(--ink)}
.lane__name span{font-size:12.5px;color:var(--ink-3)}
.lane__track{display:grid;grid-template-columns:repeat(var(--cols,12),1fr);gap:6px 4px;padding:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px}
.lane__track>*{grid-column:var(--s) / var(--e)}
.bar{min-height:40px;border-radius:7px;display:flex;align-items:center;padding:6px 10px;font-size:13px;line-height:1.2}
.bar--v{background:var(--accent);color:#fff;font-weight:500}
.bar--agency{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.flag{grid-row:2;font-size:12.5px;color:var(--ink-2);padding-left:2px}
.flag b{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--ink);color:#fff;font-weight:600}

/* read next: the home page's card, three up */
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.next-card{display:grid;gap:6px;align-content:start;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);transition:border-color .15s ease}
.next-card:hover{border-color:var(--ink)}
.next-card b{font-size:15px;letter-spacing:-.01em}
.next-card span{font-size:13.5px;color:var(--ink-2)}

/* the closing band, as the home page draws it */
.endcta{padding-top:48px}
.band{background:var(--ink);color:#fff;border-radius:22px;padding:56px 40px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;overflow:hidden;position:relative;text-align:left}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 80% at 90% 20%,rgba(124,92,255,.35),transparent 60%),radial-gradient(40% 60% at 70% 100%,rgba(38,89,221,.35),transparent 60%);pointer-events:none}
.band>*{position:relative}
.band h2{color:#fff;max-width:20ch;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.15}
.band p{color:var(--band-mute);margin-top:12px;font-size:16px;max-width:48ch}
.band .btn-primary{background:#fff;color:var(--ink)}
.band .btn-primary:hover{background:var(--paper)}
.band .btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.band .btn-secondary:hover{border-color:#fff}
.band .hand{margin-top:16px;font-size:13.5px}
.band .hand a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.person{display:flex;align-items:center;gap:16px;justify-self:end}
.person img{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#2A2E36;border:2px solid rgba(255,255,255,.2)}
.person div{font-size:14px;color:var(--band-mute)}
.person b{display:block;color:#fff;font-size:15px}
.person a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* privacy: a document page, prose at 62ch, no surfaces but the figure and the read-next cards */
.doc{padding-top:72px}
.doc .wrap{max-width:calc(62ch + 48px)}
.doc h1{font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-.03em}
.doc .lede{margin:18px 0 0;max-width:none}
.doc__sec{margin-top:48px;padding-top:40px;border-top:1px solid var(--line)}
.doc h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:16px}
.doc .h-small{font-size:20px}
.doc p+p,.doc ul+p{margin-top:14px}
.doc ul{list-style:none;margin:0 0 16px;padding:0}
.doc li{padding:12px 0;border-top:1px solid var(--line)}
.doc li:last-child{border-bottom:1px solid var(--line)}
.doc figure{margin:24px 0 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-card);overflow-x:auto;overscroll-behavior-x:contain}
.doc figcaption{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-3);margin-bottom:12px}
.doc figure svg{display:block;width:100%;height:auto;min-width:520px}
.doc .next-grid{grid-template-columns:1fr}
/* the figure bleeds past the prose column once the viewport has the room, so
   its labels stay legible without a scrollbar */
@media (min-width:840px){.doc figure{margin-inline:-96px}}

/* footer */
footer{padding:40px 0 48px;font-size:13.5px;color:var(--ink-3)}
footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:24px}
footer ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
footer .legal{margin-top:18px;max-width:78ch;line-height:1.6}

/* the two-column shapes collapse before a 540px schematic would have to
   scroll inside its panel; the rest of the chrome follows the home page at 960 */
@media (max-width:1060px){
  .split,.hero--how .stage{grid-template-columns:1fr}
  .sticky{position:static}
  .portrait{max-width:26rem}
}
@media (max-width:960px){
  .nav ul{display:none}
  section{padding:72px 0 0}
  .price-grid,.cmp-grid,.band{grid-template-columns:1fr}
  .cmp-grid{gap:12px}
  .person{justify-self:start}
}
@media (max-width:700px){
  .next-grid,.fence--split,.facts{grid-template-columns:1fr}
  .facts div{border-right:0;border-top:1px solid var(--line)}
  .facts div:first-child{border-top:0}
  .termlist li{grid-template-columns:1fr}
  .lane{grid-template-columns:1fr;gap:6px}
}
@media (max-width:600px){
  .brand .txt{display:none}
  .band{padding:36px 24px}
  .hero{padding-top:56px}
  .step{grid-template-columns:32px 1fr}
}