/* GENERATED by build-site.py — do not edit, and do not let the model write here.
   palette: accent=#fff310 dark=#0c0b02 light=#f4f4ef
   Tokens are solved against WCAG targets, not declared; see scripts/css_tokens.py. */
:root{--accent:#fff310;--accent-ink:#000000;--accent-line:#867f09;--accent-tint:#f5f4d9;--accent-tint-2:#f6f4c7;--accent-text:#787208;--accent-text-dark:#fff310;--light:#f4f4ef;--ink:#000000;--surface:#f0f0eb;--surface-2:#ebebe7;--surface-3:#e3e3de;--muted:#656563;--faint:#7d7d7b;--line:#dbdbd7;--line-strong:#bdbdba;--dark-1:#0c0b02;--dark-2:#17160d;--dark-ink:#ffffff;--muted-dark:#888883;--faint-dark:#706f6a;--line-dark:#3a3931;--e-accent:0 8px 26px -10px #fcf348;--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4rem;--s9:clamp(5.5rem,7vw,7.5rem);--r-sm:6px;--r:14px;--r-lg:20px;--r-pill:999px;--t-cap:.75rem;--t-eyebrow:.8125rem;--t-sm:.9375rem;--t-body:1.0625rem;--t-lead:1.1875rem;--t-h3:1.0625rem;--t-h2:clamp(1.75rem,3vw,2.5rem);--tr-tight:-.015em;--tr-wide:.12em;--measure:68ch;--ease:cubic-bezier(.22,1,.36,1);--e1:0 1px 2px rgb(0 0 0/.04),0 1px 3px rgb(0 0 0/.06);--e2:0 2px 4px rgb(0 0 0/.04),0 8px 20px -6px rgb(0 0 0/.10);}
/* B — COMPONENT LAYER for C1..C12. Emitted verbatim by build-site.py, identical on every site.
   These are the nine components plan-pages.py asks for that today have no class at all. */

/* --- band rhythm: every <section> gets it, class or not (fixes the 6 classless pages) --- */
main>section,section.band{padding:var(--s9) 0}
section.band-tint{background:var(--surface-2);border-block:1px solid var(--line);padding:var(--s9) 0}
section.band-dark{background:var(--dark-1);color:var(--light);padding:var(--s9) 0}
section.band-dark h2,section.band-dark h3{color:var(--light)}
section.band-dark p{color:var(--muted-dark)}

/* --- shared card primitive; every component card composes it --- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);box-shadow:var(--e1);transition:box-shadow .25s var(--ease),
  border-color .25s var(--ease),transform .25s var(--ease)}
.card:hover{box-shadow:var(--e2);border-color:var(--line-strong);transform:translateY(-2px)}
/* line-height is the load-bearing half. Measured on pencilai.site, card titles rendered at
   17.6px/lh 1.60 next to 18px/lh 1.60 body copy — a heading SMALLER than the text beside it and
   just as loose reads as a bolded first line, not a heading. 1.22 is what makes it a label. */
.card h3{font-size:var(--t-h3);line-height:1.22;font-weight:700;letter-spacing:var(--tr-tight);
  margin:0 0 var(--s2)}
.card p{color:var(--muted);font-size:var(--t-sm);margin:0}
.band-dark .card{background:var(--dark-2);border-color:var(--line-dark);box-shadow:none}
.band-dark .card:hover{border-color:var(--accent-line)}

/* --- C1 SpecTable --- */
.spec{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.spec-wrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--e1)}
.spec th,.spec td{padding:var(--s3) var(--s4);text-align:left;font-size:var(--t-sm);
  border-bottom:1px solid var(--line)}
.spec thead th{background:var(--surface-3);font-weight:600;font-size:var(--t-cap);
  text-transform:uppercase;letter-spacing:var(--tr-wide);color:var(--faint)}
.spec tbody tr:last-child td{border-bottom:0}
.spec td:first-child{font-weight:600}
.spec .yes::before{content:"✓";color:var(--accent-ink);background:var(--accent);
  border-radius:var(--r-pill);display:inline-grid;place-items:center;width:1.1em;height:1.1em;
  font-size:.72em;margin-right:.4em;vertical-align:.05em}
.spec .no::before{content:"—";color:var(--faint);margin-right:.4em}

/* --- C2 VersusCards --- */
.versus{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.versus .card{display:flex;flex-direction:column;gap:var(--s3)}
.versus .card.is-win{border-color:var(--accent-line);box-shadow:var(--e2)}
.versus ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.versus li{font-size:var(--t-sm);color:var(--muted);padding-left:1.4em;position:relative}
.versus li.pro::before{content:"✓";position:absolute;left:0;color:var(--accent-ink);font-weight:700}
.versus li.con::before{content:"✕";position:absolute;left:0;color:var(--faint)}

/* --- C3 DecisionSplit --- */
.split{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.split .card{border-top:3px solid var(--accent)}
.split dt{font-weight:700;font-size:var(--t-sm);margin-bottom:var(--s1)}
.split dd{margin:0 0 var(--s3);color:var(--muted);font-size:var(--t-sm)}

/* --- C4 StepFlow --- */
.steps{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  counter-reset:step}
.steps>*{counter-increment:step;position:relative;padding-top:var(--s6)}
.steps>*::before{content:counter(step,decimal-leading-zero);position:absolute;top:0;left:0;
  font-size:2.4rem;font-weight:800;line-height:1;letter-spacing:var(--tr-tight);
  color:var(--accent);opacity:.9}
.steps h3{font-size:var(--t-h3);margin:0 0 var(--s2)}
.steps p{color:var(--muted);font-size:var(--t-sm);margin:0}

/* --- C5 MetricStrip --- */
.metrics{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  border-block:1px solid var(--line);padding:var(--s6) 0}
.metric b{display:block;font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;line-height:1;
  letter-spacing:var(--tr-tight)}
.metric span{display:block;margin-top:var(--s2);font-size:var(--t-cap);color:var(--muted)}
.band-dark .metrics{border-color:var(--line-dark)}
.band-dark .metric span{color:var(--muted-dark)}

/* --- C6 UseCaseGrid --- */
.cases{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cases .card{display:flex;flex-direction:column;gap:var(--s2)}
.cases .card a{color:inherit;text-decoration:none;font-weight:600;font-size:var(--t-sm);
  margin-top:auto;padding-top:var(--s2);border-bottom:1px solid var(--accent-line);
  align-self:flex-start;transition:border-color .2s var(--ease)}
.cases .card a:hover{border-bottom-color:var(--accent)}

/* --- C7 LimitationGrid --- */
.limits{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.limits .card{background:var(--surface-3);box-shadow:none}
.limits .card h3::before{content:"!";display:inline-grid;place-items:center;width:1.35em;
  height:1.35em;margin-right:.5em;border-radius:var(--r-pill);background:var(--accent-tint-2);
  font-size:.8em;vertical-align:.08em}
.limits .fix{margin-top:var(--s2);font-size:var(--t-cap);color:var(--faint)}

/* --- C8 ChecklistReq --- */
.checklist{list-style:none;padding:0;margin:0;max-width:var(--measure);
  display:flex;flex-direction:column;gap:var(--s2)}
.checklist li{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--t-sm)}
.checklist li::before{content:"✓";flex:none;display:grid;place-items:center;width:1.35em;
  height:1.35em;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:.78em;font-weight:700}
.checklist li.optional::before{content:"○";background:transparent;border:1px solid var(--line-strong);
  color:var(--faint)}

/* --- C9 CompareVisual --- */
.ba{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr;align-items:start}
.ba figure{margin:0;position:relative}
.ba img{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);
  box-shadow:var(--e2)}
.ba figcaption{position:absolute;top:var(--s3);left:var(--s3);padding:.25rem .6rem;
  border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);
  font-size:var(--t-cap);font-weight:700;letter-spacing:.02em}
.ba-note{grid-column:1/-1;text-align:center;color:var(--muted);font-size:var(--t-cap);
  margin-top:var(--s2)}

/* --- C10 CalcWidget --- */
.calc{max-width:34rem;margin:0 auto;padding:var(--s6);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--e2)}
.calc label{display:block;font-size:var(--t-cap);font-weight:600;color:var(--faint);
  text-transform:uppercase;letter-spacing:var(--tr-wide);margin-bottom:var(--s3)}
.calc input[type=range]{width:100%;accent-color:var(--accent);margin-bottom:var(--s5)}
.calc-out{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  border-top:1px solid var(--line);padding-top:var(--s4)}
.calc-out b{display:block;font-size:1.6rem;font-weight:800;letter-spacing:var(--tr-tight)}
.calc-out span{font-size:var(--t-cap);color:var(--muted)}

/* --- C11 Timeline --- */
.timeline{list-style:none;margin:0;padding:0 0 0 var(--s5);max-width:var(--measure);
  border-left:2px solid var(--line)}
.timeline li{position:relative;padding:0 0 var(--s5) var(--s4)}
.timeline li::before{content:"";position:absolute;left:calc(-1 * var(--s5) - 5px);top:.45em;
  width:10px;height:10px;border-radius:var(--r-pill);background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-tint)}
.timeline time{display:block;font-size:var(--t-cap);color:var(--faint);font-weight:600;
  letter-spacing:.04em}
.timeline h3{font-size:var(--t-h3);margin:var(--s1) 0 var(--s2)}
.timeline p{color:var(--muted);font-size:var(--t-sm);margin:0}

/* --- C12 RelatedRail (pill row) --- */
.rail{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s4) 0;margin:var(--s5) 0;
  border-block:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:var(--s2);padding:.4rem .85rem;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);font-size:var(--t-cap);
  text-decoration:none;color:inherit;background:var(--surface);
  transition:background .2s var(--ease),border-color .2s var(--ease)}
.pill:hover{background:var(--accent-tint);border-color:var(--accent-line)}
.pill::after{content:"→";opacity:.5}

/* --- buttons: three variants, one shape --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:.85rem 1.6rem;border-radius:var(--r-pill);font-weight:700;font-size:var(--t-body);
  line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--e-accent)}
.btn-ghost{background:transparent;border-color:currentColor;opacity:.85}
.btn-ghost:hover{opacity:1;background:var(--accent-tint)}
.btn-sm{padding:.5rem 1rem;font-size:var(--t-cap)}
.btn-lg{padding:1rem 2rem;font-size:var(--t-lead)}

/* --- section head, shared by all 12 --- */
.section-head{max-width:44rem;margin:0 auto var(--s7);text-align:center}
.eyebrow{text-transform:uppercase;letter-spacing:var(--tr-wide);font-size:var(--t-eyebrow);
  font-weight:600;color:var(--faint);margin:0 0 var(--s3)}
.band-dark .eyebrow{color:var(--accent)}
/* scoped, NOT a bare `h2` — base.css loads BEFORE site.css, and a bare element
   selector here would still beat nothing while silently fighting a landing that
   styles its own h2. Sub-page sections carry .section-head; the landing does not. */
.section-head h2{font-size:var(--t-h2);line-height:1.15;letter-spacing:var(--tr-tight);
  text-wrap:balance;margin:0}
.section-sub{color:var(--muted);margin:var(--s3) auto 0;max-width:var(--measure);
  text-wrap:balance}

/* --- accessibility + motion --- */
:where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--accent);
  outline-offset:3px;border-radius:var(--r-sm);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--ink) 55%,transparent)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .card:hover,.btn:hover{transform:none}
}

/* --- responsive: one place, not per-component --- */
@media (max-width:900px){
  .ba{grid-template-columns:1fr}
  main>section,section.band,section.band-tint,section.band-dark{padding:var(--s8) 0}
}
@media (max-width:640px){
  .spec-wrap{margin-inline:calc(-1 * var(--s5))}
  .rail{gap:var(--s1)}
}