/* ============================================================================
   AI Integrator — PUBLIC SITE STYLESHEET  ·  Direction A "The Working Surface"
   Built 2026-08-03.  ONE file. Every public page links this and carries no
   private <style> block of its own.

   WHY THIS FILE EXISTS. Measured 2026-08-03: all 12 public pages (index.html +
   11 under resources/) each carried their own inline <style>, and NOT ONE of
   them referenced design-system/tokens.css. Twelve private copies of the same
   design is why the palette drifted — teal ran 27x on index and 10x on every
   resources page against a brand rule of "once per view", and the display face
   silently became Inter. You cannot hold a rule that lives in twelve places.

   ITS RELATIONSHIP TO tokens.css. tokens.css is the COMMAND CENTER's token set
   (the app). This is the SITE's. The six locked brand values are identical and
   are the only values either file may treat as fixed; everything else here is
   the site's own semantic layer. One fact, one file — the brand hexes are
   quoted from AI Integrator - Brand Guide.md and nowhere else.

   THE PALETTE RULE, STATED ONCE SO IT CAN BE ENFORCED:
     indigo  = structure  (rules, primary buttons, emphasised clauses, labels)
     slate   = secondary  (construction lines, meta, muted copy)
     near-black = the bars (header, contrast bands, footer)
     off-white  = text on the bars
     teal    = ONE moment per view, and only the "structured / after" moment.
   If you are reaching for teal a second time on a page, the answer is indigo.
   ==========================================================================*/

/* ── 1 · LOCKED BRAND VALUES — never edit these six ───────────────────────── */
:root{
  --aii-indigo:      #4F46E5;
  --aii-indigo-deep: #3730A3;
  --aii-teal:        #00D4AA;
  --aii-near-black:  #0D0D24;
  --aii-off-white:   #F0EFFF;
  --aii-slate:       #6366A0;

  /* ── 2 · SITE SEMANTIC LAYER — shading within those families only ──────── */
  --paper:      #F4F4F9;   /* page canvas                                   */
  --panel:      #FFFFFF;   /* cards, tables, anything raised off the canvas */
  --ink:        #0D0D24;   /* headings                                      */
  --ink-2:      #3D3D5C;   /* body                                          */
  --ink-3:      #5B5B7A;   /* small print inside a card                     */
  --line:       #DEDEEA;   /* hairline                                      */
  --indigo-bg:  #ECEAFF;   /* indigo chip / soft fill                       */
  --bar:        #0D0D24;   /* the dark bars                                 */
  --bar-2:      #1B1B3A;
  --bar-line:   #2A2A50;
  --bar-ink:    #F0EFFF;
  --bar-ink-2:  #B6B8D6;
  --bar-muted:  #9EA0C8;

  /* status hues — inherited from design-system/tokens.css, not invented here */
  --st-ok-fg:#067647; --st-ok-bg:#ECFDF3;
  --st-wait-fg:#B9760A; --st-wait-bg:#FFFAEB;
  --st-blocked-fg:#B42318; --st-blocked-bg:#FEF3F2;

  /* ── 3 · TYPE ─────────────────────────────────────────────────────────────
     ONE family, five weights. Archivo replaces the Inter that the 12 pages
     drifted onto. ALWAYS ship the generic fallback: a font shorthand ending in
     a bare family silently renders as the browser's default serif — measured
     2026-08-03, card neon_font_shorthand_silently_falls_back_to_serif.
     NEVER put clamp() inside the `font:` shorthand — its commas make the whole
     declaration unparseable and it is dropped without warning. Longhand only. */
  /* ── THE TYPE RULING · canonical, Bryce 2026-08-03 ──────────────────────
     "I do not care what font or size font is used as long as it looks nice and
      is consistent throughout — that becomes the canonical."
     ARCHIVO is that face. One family, every word on the site, display and body.
     IBM PLEX MONO is a LABEL face only — eyebrows, timestamps, meta, sheet
     numbers. It is a different job, not a second display face; never set a
     headline or body copy in it.
     RETIRED by this ruling: Inter (was on all 12 public pages), Space Grotesk
     (was the display token in tokens.css), Georgia (was the two diagram
     headlines). The wordmark needs NO font — its letters are outlined paths —
     and its Nimbus Sans drawing is Helvetica-metric, the same grotesque
     lineage as Archivo, so the mark and the text read as one family. */
  --font:      Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-eyebrow:11px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:15px;
  --fs-lede:17.5px;  --fs-lg:18.5px;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:26px; --sp-8:34px; --sp-10:44px; --sp-12:56px; --sp-16:74px;

  --wrap: 1340px;
  --wrap-read: 880px;
  /* THE MEASURE — one number, derived from the read container so HOME's reading
     column and the resources pages' are literally the same width.
     It is an ABSOLUTE length on purpose. `ch` is relative to each block's OWN
     font-size, so 70ch on 15.5px copy, 70ch on 16.5px copy and 74ch on 17px copy
     are three different columns BY CONSTRUCTION. Measured 2026-08-04 at 1440px,
     before this: every block shared one left edge (94px) and the right edge landed
     in SEVEN places — 1346 / 978 / 941 / 896 / 887 / 829 / 721 / 609. On the close
     band three stacked blocks ended at 887, 721 and 609, a staircase. Bryce, from
     a screenshot: "text at the bottom of act 3 doesn't wrap ... similar issues in
     photos 2-6." Nothing failed to wrap; nothing agreed where to STOP.
     After: headings 1346, every reading column 886. Two edges, not seven.
     STATED EXCEPTIONS, so nobody thinks these were missed:
       .c-lead p / .c-lead .c-note  — the HOME hero is its own composition; its h1
         and body already agree at 698 and narrowing them would change the hero.
       .c-bigstat__body h3 / .c-band--close h2 — DISPLAY HEADINGS. A ch cap on a
         heading is a words-per-line decision, not a measure, and is correct there. */
  --measure: calc(var(--wrap-read) - (2 * var(--sp-10)));   /* 792px */   /* resources articles — a real measure, not full width.
                           880 minus the 44px gutters = 792px of text, ~74 characters
                           at 16.5px Archivo. Raised from 760 on 2026-08-04 when this
                           token was finally WIRED UP: 760 would have narrowed the
                           existing measure, and the measure was never the complaint. */
}

/* ── 4 · RESET + PAGE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font)}
h1,h2,h3,h4{margin:0}
p{margin:0}
img,svg{max-width:100%}

/* ══════════════════════════════════════════════════════════════════════════════
   §4.1 - §14b DELETED 2026-08-04 (T2·S5) — the finish line of card
   neon_site_needs_templates_not_css_patches_20260803.

   482 lines and 141 legacy class names came out of this file in one cut: the page
   furniture (.wrap .section .topbar .sitefoot), the type classes (.eyebrow .display
   .lede .turn .marker), the home page's private vocabulary (.tue .row .chip .stat
   .three-levels .phases .keep .alt .get .price .founder .terms .grid-4 .split .card
   .figure) and §14's whole "keep the old names and re-define them" block.

   THEY ARE GONE, NOT DEPRECATED. §14's own header said it: "It is DELETED the day the
   last page moves onto a template -- that deletion is the finish line, not an optional
   cleanup." All 12 public pages are now GENERATED from _src/content/*.md through
   _src/templates/*.html, and every class they carry is a `c-` component in §15-16.

   THE PROOF THAT THIS WAS SAFE, and it is re-runnable: each of the 141 names was
   grepped against all 12 SHIPPED pages, and against every file in the tree that links
   this stylesheet. Zero hits. Not "we think nothing uses them" -- nothing does.

   What survives above this line is §1-3 (the tokens) and the element reset. What
   survives below is §15 (the article/shared set) and §16 (HOME). Two sections, one
   vocabulary, and a page can no longer invent a third.
   ══════════════════════════════════════════════════════════════════════════════*/
/* ══════════════════════════════════════════════════════════════════════════════
   15 · THE COMPONENT SET  —  every `c-` class the site is allowed to use
   Added 2026-08-04 (T2·S4). Bryce named the missing layer himself:

     "It would almost seem to me that we're missing a components piece. Those
      components make up a template. That way, anytime a template needs a
      component, it pulls the component. The components are all originated from
      CSS. Clear line."

   THE CLEAR LINE, and it only runs one way:
     TOKENS  (§1-3)  ->  COMPONENTS (here)  ->  TEMPLATES (_src/templates)  ->  PAGES (_src/content)
   A page holds CONTENT and nothing else. It picks a template. The template pulls
   components. A component is the only thing that owns markup and style, and it
   owns BOTH in one place -- which is the part that was missing.

   WHY §14 IS NOT THIS. §14 kept ~70 legacy class names and re-defined them, so
   two pages could both be "correct" against the stylesheet and still not look
   alike: the stylesheet answered "what does .qa look like" and never answered
   "what does an ARTICLE PAGE look like." §14 stays only while pages are still
   being migrated. It is DELETED the day the last page moves onto a template --
   that deletion is the finish line, not an optional cleanup.

   WHAT COLLAPSED INTO WHAT (the 18-for-1 is not a typo):
     .c-panel   <-  qa eg dept level failure-item disqualifier result-item
                    compare-card callout note reassure outcome intake verdict
                    five change edge keep-col col-body
     .c-label   <-  eyebrow act-label tag facet egl col-label card-tag compare-label
     .c-note    <-  source fine disclaimer pic
     .c-cols    <-  grid grid-wrap keep-grid two-col
     .c-rows    <-  compare-row compare-label compare-text
     .c-stat    <-  stat-block big source
     .c-close   <-  cta-block btn-primary undercta

   A PANEL MAY NOT CONTAIN A PANEL. That was 39 nested boxes across 5 pages on
   2026-08-03. It is now impossible rather than discouraged: the content format
   has no syntax for nesting one, so no page can express it.
   ═══════════════════════════════════════════════════════════════════════════════*/

/* ── chrome: the two parts every page carries and no page authors ──────────── */
.c-nav{background:var(--bar);height:70px;display:flex;align-items:center;
  padding:0 var(--sp-10);gap:var(--sp-6);flex-wrap:wrap}
.c-nav__logo{display:flex;align-items:center;text-decoration:none;flex:none}
.c-nav__logo svg{height:19px;width:auto;display:block}
.c-nav__right{display:flex;align-items:center;gap:var(--sp-6);margin-left:auto}
.c-nav__link{color:var(--bar-muted);text-decoration:none;font-size:var(--fs-sm);font-weight:500}
.c-nav__cta{background:var(--aii-indigo);color:#fff;text-decoration:none;
  padding:11px 18px;font-size:var(--fs-sm);font-weight:600}

.c-foot{background:var(--bar);border-top:1px solid var(--bar-line);
  padding:var(--sp-8) var(--sp-10);display:flex;justify-content:space-between;
  align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.c-foot__copy{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:#6C6E96}
.c-foot__link{color:var(--bar-muted);text-decoration:none;font-size:var(--fs-sm)}

/* ── the ARTICLE template's own two zones ─────────────────────────────────── */
/* ── THE MEASURE — ONE place decides it, and the column is CENTRED ──────────
   Bryce, 2026-08-04, looking at a full-width window: "a lot of white space to the
   right and cramming on the left ... they would all be center in the available
   space and the left/right margins would shrink at the same rate."

   THE CAUSE: the container was --wrap (1340px) and centred, but every child was
   capped at 74ch and LEFT-ALIGNED inside it. So the box centred and the text hugged
   its left edge, dumping ~600px of slack on the right at 1440px. Two different
   things were deciding the measure and neither knew about the other.

   THE FIX, and it was already written down: --wrap-read has existed since the
   stylesheet was built, commented "resources articles — a real measure, not full
   width", and NOTHING referenced it. Now the CONTAINER is the measure, it is
   centred, and children fill it. One measure, one place. Per-element ch caps are
   deleted -- a second opinion about width is exactly what caused this.

   The INDEX template opts out with --wide, because a 3-up card grid genuinely
   needs the full page. That is a declared variant, not drift. */
.c-hero{background:var(--paper);padding:var(--sp-16) var(--sp-10) var(--sp-12);
  max-width:var(--wrap-read);margin:0 auto}
.c-hero--wide{max-width:var(--wrap)}
.c-crumb{margin-bottom:var(--sp-5);font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  font-weight:600;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:var(--aii-indigo)}
.c-crumb a{color:inherit;text-decoration:none}
.c-crumb a:hover{text-decoration:underline}
.c-hero h1{font-size:clamp(34px,3.6vw,50px);font-weight:800;
  letter-spacing:-.034em;line-height:1.06;color:var(--ink);margin-bottom:var(--sp-5)}
.c-hero__sub{font-size:var(--fs-lede);line-height:1.64;color:var(--ink-2)}

.c-article{max-width:var(--wrap-read);margin:0 auto;padding:0 var(--sp-10) var(--sp-16)}
.c-article--wide{max-width:var(--wrap)}
.c-back{display:inline-block;margin-bottom:var(--sp-10);text-decoration:none;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aii-indigo)}

/* ── prose: the default, and the only thing a page gets without naming a component
   :where() ON PURPOSE, and this is the ROOT FIX for a defect that bit twice.
   `.c-article p` has specificity (0,1,1) and BEATS any one-class component rule at
   (0,1,0). So a component sitting inside the article silently inherited body styling:
   .c-btn--teal rendered indigo-on-teal (2026-08-04, caught by rendering), and .c-note
   rendered at 16.5px body size instead of small (2026-08-04, caught by measuring the
   computed style). Two instances, one cause -- patching each one is how the third
   arrives. :where() forces these defaults to (0,0,1), element-only, so ANY component
   class outranks them without needing a specificity trick of its own. */
:where(.c-article) p{margin-bottom:var(--sp-5);font-size:16.5px;line-height:1.72;color:var(--ink-2)}
:where(.c-article) h2{margin:var(--sp-12) 0 var(--sp-5);font-size:26px;font-weight:800;
  letter-spacing:-.026em;line-height:1.2;color:var(--ink)}
:where(.c-article) h3{margin:var(--sp-8) 0 var(--sp-3);font-size:18px;font-weight:700;
  line-height:1.32;color:var(--ink)}
:where(.c-article) ul,:where(.c-article) ol{margin:0 0 var(--sp-5) 22px;font-size:16.5px;
  line-height:1.8;color:var(--ink-2)}
:where(.c-article) li{margin-bottom:var(--sp-2)}
:where(.c-article) a{color:var(--aii-indigo-deep);text-decoration:underline;text-underline-offset:2px}
.c-btn,.c-back,.c-card{text-decoration:none}

/* ── PANEL — one box, one border weight, one rhythm. The 18-name collapse. ── */
.c-panel{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--aii-indigo);padding:var(--sp-6);margin-bottom:var(--sp-5)}
.c-panel > h3{margin:0 0 var(--sp-3);font-size:17px;font-weight:700;
  line-height:1.32;color:var(--ink)}
.c-panel h4{margin:var(--sp-4) 0 var(--sp-3);font-size:16px;font-weight:700;
  line-height:1.32;color:var(--ink)}
.c-panel p{margin-bottom:var(--sp-3);font-size:15px;line-height:1.65;color:var(--ink-3)}
.c-panel p:last-child{margin-bottom:0}
.c-panel ul{margin:0 0 var(--sp-3) 20px;font-size:15px;line-height:1.7;color:var(--ink-3)}
.c-panel ul:last-child{margin-bottom:0}
/* a panel inside a panel is not structure, it is noise (Vignelli / Tufte, 2026-08-03).
   The content format cannot express it; this rule is the belt to that suspenders. */
.c-panel .c-panel{background:transparent;border:0;border-left:2px solid var(--line);
  padding:0 0 0 var(--sp-5);margin:var(--sp-4) 0 0}

/* ── STAT — the one dark moment an article is allowed ─────────────────────── */
.c-stat{background:var(--bar);border-left:4px solid var(--aii-indigo);
  padding:var(--sp-6) var(--sp-8);margin:var(--sp-8) 0;display:grid;
  grid-template-columns:auto 1fr;gap:var(--sp-8);align-items:center}
.c-stat__big{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--bar-ink)}
.c-stat__body p{margin:0;font-size:15px;line-height:1.6;color:var(--bar-ink-2)}
.c-stat__src{margin:var(--sp-2) 0 0 !important;font-family:var(--font-mono);font-size:11px;
  font-weight:500;letter-spacing:.06em;color:#8A8CB4 !important}

/* ── QUOTE — the turn ─────────────────────────────────────────────────────── */
.c-quote{margin:var(--sp-8) 0;padding:0 0 0 22px;border-left:3px solid var(--aii-indigo);
  font-size:19px;line-height:1.6;font-weight:600;color:var(--ink)}

/* ── LABEL / NOTE — the two mono voices, and the only two ─────────────────── */
.c-label{display:block;margin-bottom:var(--sp-2);font-family:var(--font-mono);
  font-size:10px;font-weight:600;line-height:1;letter-spacing:.15em;
  text-transform:uppercase;color:var(--aii-indigo)}
/* ARCHIVO, not mono. Measured 2026-08-04: .c-note carries 92-, 232- and 322-character
   PARAGRAPHS, and the canonical type ruling (Bryce, 2026-08-03) says IBM Plex Mono is
   "a LABEL face only ... never set a headline or body copy in it." The live pages broke
   this too (.source/.fine/.disclaimer/.pic were all mono in section 14), so the
   migration reproduced an existing violation faithfully instead of catching it.
   Mono survives where it IS a label: .c-label, .c-crumb, .c-back, .c-card__go,
   .c-stat__src, .c-foot__copy -- all one short line, all genuinely meta. */
.c-note{font-size:var(--fs-sm);font-weight:400;line-height:1.65;
  color:var(--aii-slate);margin-bottom:var(--sp-5)}

/* ── COLS — side-by-side panels. They share a baseline and a height. ──────── */
.c-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-5);margin-bottom:var(--sp-8);max-width:none;align-items:stretch}
.c-cols .c-panel{margin-bottom:0;border:1px solid var(--line);border-top:2px solid var(--aii-indigo);
  border-left:1px solid var(--line)}

/* ── ROWS — a label and its text, two columns, never a word glued to a sentence */
.c-rows{margin-bottom:var(--sp-8);max-width:none}
.c-row{display:grid;grid-template-columns:84px 1fr;gap:var(--sp-4);
  align-items:baseline;margin-bottom:var(--sp-4)}
.c-row .c-label{margin-bottom:0}
.c-row__body p{margin-bottom:var(--sp-2);font-size:15px;line-height:1.65;color:var(--ink-2)}
.c-row__body p:last-child{margin-bottom:0}

/* ── PHASE — a numbered step ──────────────────────────────────────────────── */
.c-phase{background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--aii-indigo);padding:var(--sp-6);margin-bottom:var(--sp-5)}
.c-phase__head{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.c-phase__num{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--aii-indigo)}
.c-phase__head h3{margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--ink)}
.c-phase p{margin-bottom:var(--sp-3);font-size:15px;line-height:1.65;color:var(--ink-3)}
.c-phase p:last-child{margin-bottom:0}

/* ── CARDS — the INDEX template's grid of links ───────────────────────────── */
.c-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--sp-5);margin-bottom:var(--sp-8);max-width:none}
.c-card{display:block;background:var(--panel);border:1px solid var(--line);
  padding:var(--sp-6);text-decoration:none;color:inherit}
.c-card:hover{background:var(--indigo-bg)}
.c-card h3{margin:0 0 var(--sp-3);font-size:17px;font-weight:700;line-height:1.32;color:var(--ink)}
.c-card p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3)}
.c-card__go{display:inline-block;margin-top:var(--sp-4);font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aii-indigo)}

/* ── DOWNLOAD — a panel whose payload is a file ───────────────────────────── */
.c-download{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--aii-indigo);padding:var(--sp-6);margin-bottom:var(--sp-5)}
.c-download h3{margin:0 0 var(--sp-3);font-size:17px;font-weight:700;line-height:1.32;color:var(--ink)}
.c-download p{margin-bottom:var(--sp-3);font-size:15px;line-height:1.65;color:var(--ink-3)}

/* ── CLOSE — the last thing on every page, and always the same thing ──────── */
.c-close{background:var(--indigo-bg);border:1px solid var(--line);
  padding:var(--sp-12) var(--sp-8);margin-top:var(--sp-12);text-align:left;max-width:none}
.c-close h2{margin:0 0 var(--sp-4);font-size:28px;font-weight:800;
  letter-spacing:-.026em;line-height:1.2;color:var(--ink)}
.c-close p{margin-bottom:var(--sp-6);max-width:var(--measure);font-size:16px;line-height:1.65;color:var(--ink-2)}

/* ── BUTTONS — two, and only two ──────────────────────────────────────────── */
.c-btn{display:inline-block;padding:16px 27px;font-family:var(--font);
  font-size:14.5px;font-weight:600;line-height:1;text-decoration:none}
/* TWO classes on purpose, not one. A single .c-btn--teal is specificity (0,1,0) and
   LOSES to .c-article a at (0,1,1) -- the button silently inherits the body-link colour
   and renders indigo-on-teal. Caught 2026-08-04 by rendering it; invisible to every
   text-level check. .c-btn.c-btn--primary is (0,2,0) and wins regardless of source order.

   WHICH BUTTON GOES WHERE -- Bryce's ruling, 2026-08-04, made by looking at all three
   rendered side by side. The article close uses --primary (indigo on the pale panel),
   the same button the reader already learned in the top bar. --teal is still a real
   component and is NOT deleted: it is the home page's closing button, where it sits on
   the near-black band (index.html section--dark close). Teal was never off-brand; teal
   on pale lavender was. The name says where it belongs so nobody reaches for it again. */
.c-btn.c-btn--primary{background:var(--aii-indigo);color:#fff}
.c-btn.c-btn--teal{background:var(--aii-teal);color:var(--aii-near-black)}  /* dark bands ONLY */
.c-btn.c-btn--sm{padding:14px 24px;font-size:14px}

@media(max-width:620px){
  .c-nav{height:auto;padding:14px var(--sp-5)}
  .c-hero,.c-article{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .c-stat{grid-template-columns:1fr;gap:var(--sp-4)}
  .c-row{grid-template-columns:1fr;gap:var(--sp-2)}
  .c-foot{padding:var(--sp-6) var(--sp-5)}
}

/* ── ASIDE — an indented sub-block INSIDE a panel, and the answer to nesting ──
   Added 2026-08-04 while migrating guides 2-9. The live pages needed a small block
   inside a panel three different ways -- "For example…" inside a Q&A, "Best when…"
   closing a comparison, "The honest edge…" qualifying an answer -- and every one of
   them was written as a PANEL INSIDE A PANEL. That is the 2026-08-03 nested-box
   defect (39 of them across 5 pages), and §14b was already flattening them back out
   after the fact with a 16-selector rule.
   This is the same shape, declared once, at the source: no border, no fill, one
   hairline rule, indented. Vignelli -- a box inside a box is never structure.
   Tufte -- the inner border carried no information, so delete the ink. */
.c-aside{margin:var(--sp-4) 0 var(--sp-3);padding:0 0 0 var(--sp-5);
  border-left:2px solid var(--line)}
.c-aside:last-child{margin-bottom:0}
.c-aside p{margin-bottom:var(--sp-2);font-size:15px;line-height:1.65;color:var(--ink-3)}
.c-aside p:last-child{margin-bottom:0}
.c-aside .c-label{margin-bottom:var(--sp-2)}

/* ── LEDE — the standfirst under a section heading (was .sectionlede) ──────── */
.c-lede{margin:calc(var(--sp-5) * -1) 0 var(--sp-8);max-width:var(--measure);
  font-size:var(--fs-lede);line-height:1.64;color:var(--ink-2)}
/* .c-article > .c-lede override deleted 2026-08-04 — the base .c-lede now
   carries --measure, and --measure IS the .c-article content width. One opinion. */

/* ── ROW tones — a Pro/Con label carries meaning, so it carries a hue ──────── */
.c-label--pro{color:var(--st-ok-fg)}
.c-label--con{color:var(--st-blocked-fg)}
/* the label column has to fit the longest label without wrapping mid-word */
.c-panel .c-row,.c-panel--col .c-row{grid-template-columns:64px 1fr;margin-bottom:var(--sp-4)}
.c-panel .c-row:last-child{margin-bottom:0}

/* ── COL TONES + PHASE DECK — added 2026-08-04 during the guides 2-9 migration ──
   Both exist because the migration FOUND them missing, not because they were guessed:
   a "what you keep / what changes" pair rendered as two identical boxes once the
   legacy .keep/.change tints were gone, and a phase's one-line deck fell into the
   body and read as ordinary copy. A component set is only finished when the real
   pages stop needing something it does not have. */
.c-panel--keep{border-top:2px solid var(--st-ok-fg)}
.c-panel--change{border-top:2px solid var(--aii-indigo)}
.c-phase__head{align-items:flex-start}
.c-phase__deck{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);
  line-height:1.55;color:var(--ink-3)}
/* a phase that splits into two halves: the grid sits flush inside the phase box */
.c-phase .c-cols{margin:var(--sp-4) 0 0}
.c-phase .c-cols .c-panel{background:transparent;border:0;border-top:2px solid var(--line);
  padding:var(--sp-4) 0 0}

/* ==============================================================================
   16 · THE HOME COMPONENT SET  —  added 2026-08-04 (T2·S5)

   The last hand-written page. index.html carried ~30 private class names that
   existed nowhere else on the site (.tue .row .chip .stat .three-levels .phases
   .keep .alt .get .price .founder .terms .grid-4 .split .card .figure .turn
   .marker .topbar .sitefoot .cta .hero .close …) and it is the page that takes
   money — the lead modal, /api/submit-lead, two diagrams, the founder photo and
   the commercial pricing terms all live on it.

   THE ONE IDEA WORTH KEEPING FROM THIS SECTION: A DARK BAND IS A PALETTE SWITCH,
   NOT A SET OF DARK COMPONENTS. `.c-band--dark` re-points the SEMANTIC tokens
   (--panel, --line, --ink, --ink-2, --ink-3, --meta, --accent) for its whole
   subtree, so a panel, a grid or a row dropped on a dark band is the SAME
   component and simply reads inverted. The alternative — an `--on-dark` variant
   per component — is two of everything and a rule nobody can hold. The six LOCKED
   brand values are never re-pointed; only the semantic layer above them is.
   ============================================================================== */

/* two semantic tokens the dark band needs to be able to move.
   They default to the brand values, so nothing already written changes. */
:root{ --meta: var(--aii-slate); --accent: var(--aii-indigo); }

/* ── BAND — the home page's unit of rhythm ────────────────────────────────── */
/* the DEFAULT band is the page canvas -- that is what the live .section was.
   A white band has to be asked for by name. */
.c-band{padding:var(--sp-16) 0;background:var(--paper)}
.c-band__wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-10)}
.c-band--panel{background:var(--panel)}
.c-band--dark{
  background:var(--bar);color:var(--bar-ink);
  --panel:#1B1B3A; --paper:#0D0D24; --line:#2A2A50; --indigo-bg:#1B1B3A;
  --ink:#F0EFFF; --ink-2:#B6B8D6; --ink-3:#B6B8D6;
  --meta:#9EA0C8; --accent:#F0EFFF;
}
.c-band h2{margin:0;font-family:var(--font);font-weight:800;letter-spacing:-.034em;
  line-height:1.06;font-size:clamp(34px,3.5vw,50px);color:var(--ink)}
.c-band h2 em{font-style:normal;color:var(--aii-indigo-deep)}
.c-band--dark h2 em{color:var(--aii-off-white)}
.c-band > .c-band__wrap > .c-label{color:var(--accent)}
.c-band p{color:var(--ink-2)}
.c-band .c-lede{margin:var(--sp-4) 0 0}
.c-band--dark a{color:var(--aii-off-white)}

/* THE ONE TEAL MOMENT, and a page has to name it in the content (`==text==`).
   Written that way so "teal once per view" is countable by grepping the source
   instead of by eyeballing the render. */
.c-marker{position:relative;white-space:nowrap}
.c-marker::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:5px;
  background:var(--aii-teal)}

/* ── HERO — the only two-column top on the site ───────────────────────────── */
.c-hero-home{padding:64px 0 var(--sp-16);max-width:var(--wrap);margin:0 auto;
  padding-left:var(--sp-10);padding-right:var(--sp-10)}
.c-hero-home__g{display:grid;grid-template-columns:1.02fr 1fr;gap:var(--sp-12);
  align-items:start}
.c-hero-home__h1{margin:0 0 var(--sp-6);font-weight:800;letter-spacing:-.038em;
  line-height:1.02;font-size:clamp(40px,4.6vw,66px);color:var(--ink)}
.c-hero-home__h1 em{font-style:normal;color:var(--aii-indigo-deep)}
.c-lead > .c-label{margin-bottom:var(--sp-4)}
.c-lead p{margin:0 0 var(--sp-8);max-width:52ch;font-size:var(--fs-lg);
  line-height:1.63;color:var(--ink-2)}
.c-lead .c-note{margin:var(--sp-8) 0 0;max-width:44ch;font-size:var(--fs-xs);
  font-weight:500;line-height:1.6;color:var(--meta)}

/* ── CTA — the two buttons, and the only place the modal is opened ────────── */
.c-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.c-btn--ghost{border:1px solid var(--line);background:var(--panel);
  color:var(--aii-indigo-deep)}
.c-band--dark .c-btn--ghost{background:transparent;border-color:var(--line);
  color:var(--bar-ink)}
/* a <button> has to be told it is one of these; same look, no browser chrome */
button.c-btn{border:0;cursor:pointer;font-family:var(--font)}
button.c-nav__cta{border:0;cursor:pointer;font-family:var(--font)}

/* ── FEED — the product, behaving, in the hero ────────────────────────────── */
.c-feed{background:var(--panel);border:1px solid var(--line)}
.c-feed__head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:15px var(--sp-5);border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.c-feed__live{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:11px;font-weight:600;line-height:1;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
/* ★ TEAL — the live dot. */
.c-feed__live::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--aii-teal);flex:none}
.c-feed__stamp{font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--meta)}
.c-item{display:grid;grid-template-columns:74px 1fr auto;gap:var(--sp-4);
  padding:17px var(--sp-5);border-bottom:1px solid var(--line);align-items:start}
.c-item:last-of-type{border-bottom:0}
.c-item__time{font-family:var(--font-mono);font-size:11px;font-weight:500;
  line-height:1.4;color:var(--meta);padding-top:2px}
.c-item__dept{display:block;margin-bottom:7px;font-family:var(--font-mono);
  font-size:10px;font-weight:600;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
.c-item__what{display:block;margin-bottom:5px;font-size:var(--fs-base);
  font-weight:600;line-height:1.4;color:var(--ink)}
.c-item__meta{display:block;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3)}
.c-chip{margin-top:2px;padding:6px 9px;white-space:nowrap;font-family:var(--font-mono);
  font-size:9.5px;font-weight:600;line-height:1;letter-spacing:.09em;
  text-transform:uppercase}
.c-chip--ap{background:var(--indigo-bg);color:var(--aii-indigo-deep)}
.c-chip--dn{background:var(--st-ok-bg);color:var(--st-ok-fg)}
.c-chip--rt{background:var(--st-wait-bg);color:var(--st-wait-fg)}
.c-feed .c-note{margin:0;padding:15px var(--sp-5);border-top:1px solid var(--line);
  background:var(--paper);font-size:var(--fs-xs);line-height:1.55;color:var(--ink-2)}
.c-feed .c-note strong{color:var(--ink)}

/* ── GRID — one component, four densities ─────────────────────────────────── */
.c-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  margin-top:var(--sp-10);background:var(--panel);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.c-cell{padding:28px var(--sp-6);border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.c-cell > .c-label{margin-bottom:var(--sp-3)}
.c-cell h4{margin:0 0 9px;font-size:16.5px;font-weight:700;line-height:1.32;
  color:var(--ink)}
.c-cell p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3)}
.c-cell p + p{margin-top:var(--sp-3)}
.c-cell ul{margin:0;padding-left:17px;font-size:14.5px;line-height:1.85;color:var(--ink-2)}
.c-cell li{margin-bottom:var(--sp-1)}
/* terms: the commercial small print under the price table. Three across, no fill. */
.c-grid--terms{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-top:var(--sp-6);background:transparent;border-left:0}
.c-grid--terms .c-cell{padding:var(--sp-6) var(--sp-6) var(--sp-6) 0;
  border-right:0;border-bottom:0}
.c-grid--terms .c-cell p{font-size:var(--fs-sm);line-height:1.62;color:var(--ink-3)}
/* check: a flat list of what you get, each line dashed */
.c-grid--check{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.c-grid--check .c-cell{display:grid;grid-template-columns:26px 1fr;gap:var(--sp-3);
  align-items:start;padding:22px var(--sp-6);font-size:14.5px;line-height:1.58;
  color:var(--ink-2)}
.c-grid--check .c-cell::before{content:"—";color:var(--accent);font-weight:700}
.c-grid--check .c-cell p{font-size:14.5px;line-height:1.58;color:var(--ink-2)}

/* ── MATRIX — N things judged against the SAME questions ──────────────────
   Added 2026-08-05. The scorecard on five-questions is six kinds of AI scored
   against five questions, and the whole value of a comparison is reading DOWN a
   column. The set had no table, so it had been written as six stacked panels —
   nothing beside anything, and unreadable. A FAILING verdict is marked in the
   content with a leading '!' so it is explicit rather than inferred from wording.
   Under 760px the table becomes labelled rows: a phone reader gets a sentence,
   not a squeezed grid. Palette rule holds — indigo is structure, no teal here. */
.c-matrix{margin-top:var(--sp-10);background:var(--panel);
  border:1px solid var(--line);overflow-x:auto;
  /* A comparison needs WIDTH or every cell wraps to five lines and you are back to
     stacks. Break out of the 720px prose column, capped so it never outruns the eye. */
  width:min(1120px,calc(100vw - 2 * var(--sp-8)));
  margin-left:50%;transform:translateX(-50%)}
.c-matrix table{width:100%;border-collapse:collapse}
.c-matrix th,.c-matrix td{text-align:left;vertical-align:top;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);line-height:1.5}
.c-matrix thead th{font-family:var(--font-mono);font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--aii-indigo);border-bottom:2px solid var(--line);
  padding-top:var(--sp-5);padding-bottom:var(--sp-3)}
.c-matrix tbody th{width:1.55in;font-weight:700;color:var(--ink)}
.c-matrix__sub{display:block;margin-top:4px;font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);font-weight:400;letter-spacing:.03em;
  text-transform:none;color:var(--meta)}
.c-matrix td{color:var(--ink-2)}
/* MUST be td.c-matrix__no: a bare `.c-matrix__no` loses to `.c-matrix td` on
   specificity and the failing verdicts render in ordinary ink (caught in render,
   2026-08-05 — the class was present in the HTML the whole time). */
.c-matrix td.c-matrix__no{color:var(--st-blocked-fg)}
.c-matrix__row--us{background:var(--indigo-bg)}
.c-matrix__row--us th,.c-matrix__row--us td{border-bottom:0;color:var(--ink)}
.c-matrix__row--us th{color:var(--aii-indigo)}
@media(max-width:760px){
  .c-matrix{overflow-x:visible;width:auto;margin-left:0;transform:none}
  .c-matrix table,.c-matrix tbody,.c-matrix tr,.c-matrix th,.c-matrix td{
    display:block;width:auto}
  .c-matrix thead{display:none}
  .c-matrix tr{padding:var(--sp-5) 0;border-bottom:1px solid var(--line)}
  .c-matrix tbody th{width:auto;border:0;padding:0 var(--sp-5) var(--sp-3);
    font-size:16.5px}
  .c-matrix td{border:0;padding:var(--sp-2) var(--sp-5)}
  .c-matrix td::before{content:attr(data-h);display:block;margin-bottom:2px;
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.07em;
    text-transform:uppercase;color:var(--meta)}
}

/* ── FIGURE — the wrapper every diagram sits in ───────────────────────────── */
.c-figure{margin-top:var(--sp-10);border:1px solid var(--line);background:var(--panel)}
.c-figure svg{display:block;width:100%;height:auto}
.c-figure__cap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-6);padding:var(--sp-6) var(--sp-8) var(--sp-8);
  border-top:1px solid var(--line)}
.c-figure__cap .c-cell{padding:0;border:0}
.c-figure__cap .c-cell > .c-label{margin-bottom:9px;color:var(--meta)}
.c-figure__cap .c-cell p{color:var(--ink-3)}

/* ── BIGSTAT — the number the whole argument rests on ─────────────────────── */
.c-bigstat{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-12);
  align-items:center;margin-top:var(--sp-16);padding-top:var(--sp-12);
  border-top:1px solid var(--line)}
.c-bigstat__n{display:block;font-weight:800;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(84px,10vw,148px);color:var(--ink)}
.c-bigstat__src{margin:14px 0 0;font-family:var(--font-mono);font-size:11px;
  font-weight:500;line-height:1.6;letter-spacing:.1em;text-transform:uppercase;
  color:var(--meta)}
.c-bigstat__body h3{max-width:24ch;font-weight:800;letter-spacing:-.024em;
  line-height:1.28;font-size:clamp(22px,2.2vw,30px)}
.c-bigstat__body .c-lede{margin-top:var(--sp-4)}

/* ── SPLIT — an argument beside the card that answers it ──────────────────── */
.c-split{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--sp-12);
  align-items:start}
.c-split h2{font-size:clamp(30px,2.9vw,42px)}
.c-side--card{background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--accent);padding:28px}
.c-side--card h3{margin:0 0 var(--sp-3);font-size:16px;font-weight:700;
  line-height:1.35;color:var(--ink)}
.c-side--card p{margin:0;font-size:var(--fs-sm);line-height:1.62;color:var(--ink-3)}
.c-side--card p + p{margin-top:var(--sp-3)}
.c-split .c-rows{margin:var(--sp-6) 0 0;border-top:1px solid var(--line)}
.c-split .c-row{grid-template-columns:130px 1fr;gap:var(--sp-5);margin:0;
  padding:16px 0;border-bottom:1px solid var(--line)}
.c-split .c-row .c-label{color:var(--meta)}
.c-split .c-row__body p{font-size:14.5px;line-height:1.58;color:var(--ink-2)}

/* ── PHASES — the article stacks them; HOME sets them side by side ────────── */
.c-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:var(--sp-10);background:var(--panel);border:1px solid var(--line);
  border-top:2px solid var(--accent)}
.c-phases .c-phase{margin:0;background:transparent;border:0;
  border-right:1px solid var(--line);padding:30px 28px}
.c-phases .c-phase:last-child{border-right:0}
.c-phases .c-phase__head{display:block;margin-bottom:0}
.c-phases .c-phase__num{display:block;margin-bottom:var(--sp-4);font-size:34px}
.c-phase__when{display:block;margin-bottom:10px;font-family:var(--font-mono);
  font-size:10px;font-weight:600;line-height:1;letter-spacing:.15em;
  text-transform:uppercase;color:var(--meta)}
.c-phases .c-phase__head h3{margin-bottom:11px;font-size:17px}
.c-phases .c-phase p{margin-bottom:11px;font-size:var(--fs-sm);line-height:1.62;
  color:var(--ink-3)}
.c-phases .c-phase p:last-child{margin-bottom:0}
.c-phases .c-phase p strong{color:var(--ink)}

/* ── TIERS — one component for both money blocks ──────────────────────────── */
.c-tiers{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--sp-10);
  border:1px solid var(--line);background:var(--panel)}
.c-tier{padding:32px var(--sp-8)}
.c-tier + .c-tier{border-left:1px solid var(--line)}
.c-tier__label{display:block;margin-bottom:var(--sp-2);font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;line-height:1;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.c-tier__sub{display:block;margin-bottom:var(--sp-5);font-size:14px;color:var(--meta)}
.c-tier__fig{font-size:clamp(30px,3.2vw,46px);font-weight:800;line-height:1.05;
  letter-spacing:-.042em;color:var(--ink)}
.c-tier__per{margin-left:3px;font-size:14px;font-weight:500;line-height:1;color:var(--meta)}
.c-tier__unit{display:block;margin:6px 0 var(--sp-5);font-family:var(--font-mono);
  font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.12em;
  text-transform:uppercase;color:var(--meta)}
.c-tier p{margin:var(--sp-5) 0 0;font-size:14px;line-height:1.65;color:var(--ink-3)}
.c-tier p + p{margin-top:11px}
.c-tier .c-note{margin:var(--sp-6) 0 0;font-family:var(--font-mono);font-size:11px;
  font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta)}
.c-tier--bet{background:var(--indigo-bg)}
.c-tier--bet p{color:var(--ink-2)}

/* ── PERSON — a photo and the claim it backs ──────────────────────────────── */
.c-person{display:grid;grid-template-columns:150px 1fr;max-width:var(--measure);gap:var(--sp-10);
  align-items:start;margin-top:var(--sp-8)}
.c-person__photo{width:150px;height:150px;object-fit:cover;
  border:1px solid var(--line);display:block}
.c-person__name{margin:0 0 6px;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-size:clamp(26px,2.4vw,34px);color:var(--ink)}
.c-person__role{margin:0 0 var(--sp-4);font-family:var(--font-mono);font-size:11px;
  font-weight:600;line-height:1;letter-spacing:.13em;text-transform:uppercase;
  color:var(--meta)}
.c-person p{font-size:15.5px;line-height:1.68;color:var(--ink-2)}
.c-person p + p{margin-top:14px}

/* ── TURN — the paragraph that hands one act to the next ──────────────────── */
.c-turn{margin:var(--sp-8) 0 0;max-width:var(--measure);padding:var(--sp-1) 0 var(--sp-1) 22px;
  border-left:3px solid var(--accent);font-size:16.5px;line-height:1.6;
  color:var(--ink-2)}
.c-turn strong{color:var(--ink)}

/* ── the CLOSE band — big type, one teal button, one line of reassurance ──── */
.c-band--close h2{max-width:22ch;font-size:clamp(32px,3.6vw,52px);letter-spacing:-.036em;
  line-height:1.08}
.c-band--close .c-lede{margin-top:var(--sp-5);font-size:17px}
.c-band--close .c-cta{margin-top:var(--sp-8)}
.c-band--close .c-note{margin-top:var(--sp-6);max-width:var(--measure);color:var(--meta)}

/* the footer carries the wordmark, drawn in exactly one file (_src/parts/logo.html) */
.c-foot__logo{display:block;flex:none}
.c-foot__logo svg{height:15px;width:auto;display:block;opacity:.85}

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media(max-width:1040px){
  .c-hero-home__g,.c-tiers,.c-bigstat,.c-split{grid-template-columns:1fr;gap:var(--sp-8)}
  .c-tier + .c-tier{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .c-band{padding:var(--sp-12) 0}
  .c-band__wrap,.c-hero-home{padding-left:var(--sp-5);padding-right:var(--sp-5)}
  .c-item{grid-template-columns:1fr;gap:var(--sp-2)}
  .c-item__time{padding-top:0}
  .c-person{grid-template-columns:1fr}
  .c-figure__cap{padding:var(--sp-5)}
}