/* ── Automatos v2 — responsive layer ───────────────────────────────
   Adapts the desktop pages for mobile + tablet by lifting the design
   language from landing-mobile.html. Selectors target the actual v2
   page classes; no markup changes needed. Hamburger nav handled by
   _nav.js (it injects DOM + classes).

   Breakpoints
     mobile : up to 720px  — single column, hamburger nav, tight gutters
     tablet : 721–1080px   — 2-column where 3-column was, hamburger nav
     desktop: 1081+        — untouched (current design)
   ───────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════
   TABLET — 721px to 1080px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {

  :root { --gutter: 40px; }

  /* ── Topbars: index uses .header/.header-row/.nav/.utilities,
     every other page uses .topbar/nav/.util — handle both ────── */
  .topbar { grid-template-columns: 1fr auto !important; padding: 14px var(--gutter); }
  .topbar nav { display: none !important; }
  .topbar > :last-child {
    display: flex !important; gap: 12px !important; align-items: center;
    justify-content: flex-end;
  }
  .topbar .util, .topbar .cta { font-size: 10.5px; }
  .topbar .util:not(.solid):not(.cta) { display: none; }

  /* index header */
  .header-row {
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
    padding: 14px var(--gutter) !important;
  }
  .nav { display: none !important; }
  .utilities {
    display: flex !important; gap: 8px !important; align-items: center;
    justify-content: flex-end;
  }
  /* hide Changelog util on tablet; keep Sign in + Start free */
  .utilities .util:not(.solid):first-child { display: none; }
  .util { padding: 9px 12px !important; font-size: 10.5px !important; }

  /* Hero — landing page (fullbleed photo) + other pages (split layout) */
  .hero {
    height: auto !important;
    min-height: 540px;
    grid-template-columns: 1fr !important; /* split-hero pages collapse */
    gap: 40px !important;
    padding: 56px var(--gutter) !important;
  }
  .hero-h, h1.hero-h, .hero h1 { font-size: clamp(56px, 8vw, 88px) !important; }
  .hero-headline { font-size: clamp(56px, 9vw, 96px) !important; }
  .hero-content { padding: 32px var(--gutter) !important; }
  .hero-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    font-size: 10px !important;
  }
  .hero-meta span + span { margin-left: 16px !important; }
  .hero-foot { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Metrics ledger: 5/6-col → 2-col */
  .metrics, .metrics-ledger { grid-template-columns: repeat(2, 1fr) !important; }
  .metric { border-right: 1px solid var(--rule-c); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric-num { font-size: 42px !important; }

  /* Chapter meta + body */
  .chapter-meta {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .chapter-meta > div { padding: 14px 20px !important; }
  .chapter-meta > div:nth-child(3) { display: none !important; }
  .chapter-body { grid-template-columns: 1fr !important; }
  .chapter-side { display: none !important; }
  .chapter-content { padding: 48px var(--gutter) !important; }
  .chapter-aside { padding: 0 var(--gutter) 48px !important; }
  .chapter-h { font-size: clamp(40px, 6.5vw, 64px) !important; }

  /* Photo / sketch plates — shorter on tablet */
  .photo-card, .sketch-card, .plate { min-height: 320px; }

  /* Plate · 003 — System / end-to-end (chapter-02 architecture plate)
     Desktop: [280px label | 3-col arch-grid]
     Tablet : single column — label on top, then 2-col arch-grid */
  .plate-arch { grid-template-columns: 1fr !important; }
  .plate-arch-label {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 32px var(--gutter) !important;
  }
  .plate-arch-label-h { font-size: clamp(24px, 4vw, 32px) !important; }
  .plate-arch-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .arch-col {
    border-right: 1px solid var(--rule-c) !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 28px var(--gutter) !important;
  }
  .arch-col:nth-child(2n) { border-right: 0 !important; }
  .arch-col:last-child { border-right: 0 !important; }

  /* Doc cards row — 3-col → 1-col on tablet for legibility */
  .doc-row { grid-template-columns: 1fr !important; }
  .doc-card { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }

  /* Closer — 2-col → stacked */
  .closer { grid-template-columns: 1fr !important; }
  .closer-left, .closer-right { padding: 48px var(--gutter); }
  .closer-right { border-top: 1px solid var(--rule-c); border-left: 0 !important; }
  .closer-h { font-size: clamp(40px, 6.5vw, 64px) !important; }

  /* Footer — 5-col → 2-col */
  .footer {
    grid-template-columns: repeat(2, 1fr) !important;
    padding: 56px var(--gutter) !important;
    gap: 36px !important;
  }
  .footer-brand { grid-column: 1 / -1; }

  /* Marketplace — featured packs row */
  .featured-row, .packs { grid-template-columns: 1fr !important; }
  .pack { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }
  .agent-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Pricing — 3 tiers → 1 col stacked (more readable than squished 3) */
  .tier-grid { grid-template-columns: 1fr !important; }
  .tier { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }
  .compare { overflow-x: auto; }

  /* Contact */
  .layout { grid-template-columns: 1fr !important; }
  .form { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }
  .aside { padding: 32px var(--gutter); }

  /* Field-notes featured + grid */
  .featured { grid-template-columns: 1fr !important; }
  .featured .photo { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--rule-c); }
  .featured .body { padding: 48px var(--gutter) !important; }
  .featured h2 { font-size: clamp(36px, 6vw, 56px) !important; }
  .index-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .note { padding: 28px var(--gutter) !important; }

  /* Field-notes article body (blog-post template) */
  .title-block { padding: 56px var(--gutter) 36px !important; }
  .title-block h1 { font-size: clamp(48px, 7vw, 72px) !important; }
  .post-body { padding: 0 var(--gutter); margin: 40px auto 56px; font-size: 16px; }

  /* Field-notes longform article (field-notes-five-tiers): 3-col body → stack */
  .body {
    grid-template-columns: 1fr !important;
    padding: 48px var(--gutter) 64px !important;
    gap: 28px !important;
  }
  .marginalia {
    position: static !important;
    padding: 16px var(--gutter) !important;
    margin: 0 calc(-1 * var(--gutter)) 24px !important;
    background: var(--bg-2);
    border-top: 1px solid var(--rule-c);
    border-bottom: 1px solid var(--rule-c);
    display: flex !important; flex-wrap: wrap; gap: 4px 14px !important;
  }
  .marginalia .row { border-bottom: 0 !important; padding: 0 !important; }
  .prose { max-width: none !important; font-size: 16px !important; }
  .prose h2 { font-size: 28px !important; margin: 36px 0 16px !important; }
  .prose .dropcap::first-letter { font-size: 64px !important; padding: 6px 10px 0 0 !important; }
  .prose blockquote { font-size: 20px !important; margin: 20px 0 !important; padding: 14px 0 14px 18px !important; }
  .footnotes {
    grid-template-columns: 1fr !important;
    padding: 28px var(--gutter) !important;
    gap: 14px !important;
  }
  .related-meta { grid-template-columns: 1fr !important; }
  .related-meta > div { padding: 12px var(--gutter) !important; border-right: 0 !important; border-bottom: 1px solid var(--rule-c); justify-content: flex-start !important; }
  .related { grid-template-columns: 1fr !important; }
  .related .note { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); padding: 28px var(--gutter) !important; min-height: auto !important; }
  .cta-strip {
    grid-template-columns: 1fr !important;
    padding: 48px var(--gutter) !important;
    gap: 28px !important;
  }
  .cta-h { font-size: clamp(36px, 9vw, 56px) !important; }

  /* Masthead */
  .masthead { grid-template-columns: 1fr 1fr !important; }
  .masthead > div:nth-child(3) { display: none; }

  /* Section meta strips — collapse 3-col → 2-col */
  .section-meta { grid-template-columns: 1fr 1fr !important; }
  .section-meta > div:nth-child(3) { display: none; }

  /* ── Index — Plate · 004 / Docs (3-col meta + 3-col card grid) ── */
  .plate-docs-meta { grid-template-columns: 1fr 1fr !important; }
  .plate-docs-meta > div { padding: 14px var(--gutter) !important; }
  .plate-docs-meta > div:nth-child(3) { display: none !important; }
  .plate-docs-grid { grid-template-columns: 1fr !important; }
  .plate-docs-grid .doc-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    min-height: auto !important;
    padding: 40px var(--gutter) !important;
  }
  .plate-docs-grid .doc-card:last-child { border-bottom: 0; }

  /* ── Index — Plate · 005 / Start CTA band (280px label | body[1.2/1]) ── */
  .plate-start { grid-template-columns: 1fr !important; }
  .plate-start-label {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 36px var(--gutter) !important;
  }
  .plate-start-body {
    grid-template-columns: 1fr !important;
    padding: 48px var(--gutter) !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .plate-start-h { font-size: clamp(40px, 6.5vw, 56px) !important; }
  .plate-start-side { gap: 22px !important; }

  /* ── Index — Chapter 02 Router schematic flow rows ── */
  .flow-row { grid-template-columns: 1fr auto 1fr auto 1fr !important; gap: 10px !important; }
  .flow-node { padding: 10px 12px !important; font-size: 10.5px !important; }
  .flow-node b { font-size: 16px !important; }
  /* 3-col chips stay 3-col on tablet — easy to read */
  .flow-stack { grid-template-columns: 1fr 1fr 1fr !important; }

  /* ── Index — Chapter 03 Feature grid (200px label | 3 cells) ── */
  .fgrid { grid-template-columns: 1fr !important; }
  .fgrid > .chapter-side {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 32px var(--gutter) !important;
  }
  .fgrid-cell {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 36px var(--gutter) 40px !important;
    gap: 20px !important;
  }
  .fgrid-cell:last-child { border-bottom: 0; }
  .fgrid-h { font-size: clamp(28px, 4.5vw, 36px) !important; }

  /* ── Index — Quote band (200/1fr/240) ── */
  .quote {
    grid-template-columns: 1fr !important;
    padding: 64px var(--gutter) 60px !important;
    gap: 28px !important;
  }
  .quote-body { font-size: clamp(36px, 5.6vw, 48px) !important; }

  /* ── Index — Chapter list (2-col → 1-col tighter) ── */
  .chapter-list { grid-template-columns: 1fr !important; }
  .chapter-list-item {
    padding: 16px 0 !important;
    border-left: 0 !important;
  }
  .chapter-list-item:nth-child(odd),
  .chapter-list-item:nth-child(even) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
  }

  /* ── Index — Chapter num oversized serif (84px → smaller on tablet) ── */
  .chapter-num { font-size: 56px !important; }

  /* ── Index — Closer changelog stays in same column on tablet ── */
  .cl-item { grid-template-columns: 64px 1fr !important; gap: 14px !important; }

  /* ── Marketplace — toolbar (search | filter | sort) + channels grid ── */
  .toolbar { grid-template-columns: 1fr !important; }
  .toolbar > * { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }
  .toolbar > *:last-child { border-bottom: 0; }
  .channels { grid-template-columns: repeat(4, 1fr) !important; }
  .channels .channel { border-bottom: 1px solid var(--rule-c); }
  .channels .channel:nth-child(4n) { border-right: 0; }
  /* Inline-styled featured/agent grids that use repeat(3,1fr) inline */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Pricing — 4 tiers → 2 cols on tablet, FAQ 2 → 1, CTA strip stack ── */
  .tiers { grid-template-columns: 1fr 1fr !important; }
  .tier { border-right: 0 !important; }
  .tier:nth-child(odd) { border-right: 1px solid var(--rule-c) !important; }
  .tier { border-bottom: 1px solid var(--rule-c); }
  .compare { overflow-x: auto; }
  .compare > div { white-space: nowrap; }
  .faq { grid-template-columns: 1fr !important; }
  .cta-strip { grid-template-columns: 1fr !important; gap: 28px !important; padding: 56px var(--gutter) !important; }
  .cta-h { font-size: clamp(40px, 6.5vw, 56px) !important; }

  /* ── Field-notes — sub-strip footer ── */
  .sub-strip { grid-template-columns: 1fr !important; gap: 28px !important; padding: 48px var(--gutter) !important; }

  /* ── Terms — title block ── */
  .title-block { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ── Pitch-mode page — every band is 1.x fr / 1fr or 5-col ── */
  .pg-pitch .hero-content,
  .hero-content { grid-template-columns: 1fr !important; gap: 36px !important; }
  /* pitch-mode .chapter is split — give it space */
  .chapter:not(.field-note) { grid-template-columns: 1fr !important; gap: 40px !important; padding: 56px var(--gutter) !important; }
  .chapter h2 { font-size: clamp(40px, 6vw, 56px) !important; }
  .fnote { grid-template-columns: 1fr !important; gap: 32px !important; padding: 56px var(--gutter) !important; }
  .cta { grid-template-columns: 1fr !important; gap: 32px !important; padding: 64px var(--gutter) !important; }

  /* ── 404 — main grid stacks ── */
  main { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE — up to 720px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  :root { --gutter: 20px; }

  html, body { font-size: 15px; }

  /* Topbar (other pages) */
  .topbar { padding: 12px var(--gutter); font-size: 10px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 18px; height: 18px; margin-right: 8px; }
  .topbar .cta { font-size: 9.5px; padding-bottom: 1px; }

  /* Hide Sign in on mobile — drawer will carry it */
  .topbar > :last-child > a:not(.cta):not(.nav-toggle) { display: none; }

  /* Topbar (index — .header / .header-row / .utilities) */
  .header-row { padding: 10px var(--gutter) !important; gap: 8px !important; }
  .brand-name { font-size: 18px !important; }
  .brand-mark { width: 22px !important; height: 22px !important; }
  /* On mobile: only Start free + hamburger remain in utilities */
  .utilities .util:not(.solid):not(.nav-toggle) { display: none !important; }
  .utilities .util.solid { padding: 9px 12px !important; font-size: 9.5px !important; }
  .util.solid .arrow { font-size: 9px !important; }

  /* Hero — landing photo-fullbleed + split-layout pages */
  .hero {
    height: auto !important;
    min-height: 480px;
    grid-template-columns: 1fr !important;
    padding: 40px var(--gutter) !important;
  }
  .hero-h, h1.hero-h, .hero h1, .hero .hero-headline, .hero-headline {
    font-size: clamp(28px, 7.6vw, 48px) !important;
    line-height: 1.03 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: none !important;
    text-wrap: balance !important;
    hyphens: auto;
  }
  /* The index hero hardcodes <br /> + &nbsp; for desktop typesetting — break them on mobile */
  .hero-headline br { display: none !important; }
  .hero-headline em { overflow-wrap: anywhere !important; }
  /* Hide non-essential utility buttons on mobile — only brand + hamburger remain */
  .utilities .util.solid { display: none !important; }
  .topbar .cta { display: none !important; }
  .hero-eye { font-size: 10px !important; }
  .hero-content { padding: 24px var(--gutter) 28px !important; }
  .hero-photo { min-height: 320px; aspect-ratio: 4/5; }
  .hero-meta {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    font-size: 9.5px !important;
    width: 100% !important;
  }
  .hero-meta > div { padding: 10px var(--gutter) !important; }
  .hero-meta span + span { margin-left: 0 !important; }
  .hero-foot { padding: 0 !important; }
  .hero-foot > * { padding: 16px var(--gutter) !important; }

  /* Metrics ledger — 5/6-col → 1-col stacked */
  .metrics, .metrics-ledger { grid-template-columns: 1fr !important; }
  .metric { padding: 22px var(--gutter) !important; border-right: 0 !important; border-bottom: 1px solid var(--rule-c); }
  .metric .val { font-size: 44px !important; }
  .metric-num { font-size: 38px !important; }
  .metric .note { font-size: 12.5px !important; max-width: none !important; }

  /* Chapter body — single col */
  .chapter-meta {
    grid-template-columns: 1fr !important;
    font-size: 10px !important;
  }
  .chapter-meta > div { padding: 12px var(--gutter) !important; border-right: 0 !important; border-bottom: 1px solid var(--rule-c); justify-content: flex-start !important; }
  .chapter-meta > div:last-child { border-bottom: 0; }
  .chapter-content { padding: 36px var(--gutter) !important; }
  .chapter-aside { padding: 0 var(--gutter) 36px !important; }
  .chapter-h { font-size: clamp(34px, 9vw, 52px) !important; }
  .chapter-lead { font-size: 14.5px !important; }
  .chapter-list-item { font-size: 13px !important; }
  .chapter-list-item .num { font-size: 10px !important; }

  /* Photo / sketch plates — narrower aspect */
  .photo-card, .sketch-card, .plate { min-height: 280px !important; }

  /* Hero photo aspect on mobile: portrait friendly */
  .hero-photo { aspect-ratio: 4/5; min-height: 320px; }

  /* Plate · 003 — System: stack everything */
  .plate-arch { grid-template-columns: 1fr !important; }
  .plate-arch-label { padding: 28px var(--gutter) !important; gap: 14px !important; }
  .plate-arch-label-h { font-size: 24px !important; }
  .plate-arch-grid { grid-template-columns: 1fr !important; }
  .arch-col { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); padding: 24px var(--gutter) !important; }
  .arch-col-head { padding-bottom: 12px !important; margin-bottom: 12px !important; }
  .arch-col-name { font-size: 19px !important; }
  .arch-col-lead { font-size: 12.5px !important; max-width: none !important; }
  .arch-rows { font-size: 10.5px !important; }
  /* Keep .arch-row's internal grid (38px ix | 1fr name | auto meta) — DON'T override columns */
  .arch-row { padding: 7px 0 !important; gap: 10px !important; }

  /* Doc cards — single col */
  .doc-row { grid-template-columns: 1fr !important; }
  .doc-card { padding: 28px var(--gutter) !important; }

  /* Closer */
  .closer-left, .closer-right { padding: 40px var(--gutter) !important; }
  .closer-h { font-size: clamp(36px, 9vw, 52px) !important; }
  .closer-ctas { flex-wrap: wrap; gap: 8px !important; }

  /* Buttons — compact mobile */
  .btn, .btn-light, .util.solid {
    font-size: 10.5px !important;
    padding: 11px 14px !important;
  }

  /* Footer — single col stacked */
  .footer {
    grid-template-columns: 1fr !important;
    padding: 40px var(--gutter) !important;
    gap: 28px !important;
  }
  .footer-brand { padding-bottom: 12px; border-bottom: 1px solid var(--rule-c); }
  .footer h6 { font-size: 10px !important; }
  .footer-foot {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    font-size: 10px !important;
  }
  .footer-social { gap: 16px !important; }

  /* Hero CTAs */
  .hero-ctas, .closer-ctas { flex-direction: column; align-items: stretch; gap: 8px; }
  .hero-ctas .btn-light, .closer-ctas .btn-light { justify-content: center; }

  /* Section meta strips */
  .section-meta { grid-template-columns: 1fr !important; }
  .section-meta > div {
    padding: 12px var(--gutter) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    justify-content: flex-start !important;
  }
  .section-meta > div:last-child { border-bottom: 0; justify-content: flex-start !important; }
  .section-meta > div:nth-child(3) { display: flex !important; }

  /* Marketplace */
  .featured-row, .packs { grid-template-columns: 1fr !important; }
  .agent-grid { grid-template-columns: 1fr !important; }
  .pack { padding: 28px var(--gutter) !important; }
  .pack-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pack-foot .btn { width: 100%; justify-content: center; }

  /* Pricing — 1-col, sticky CTAs flow inline */
  .tier-grid { grid-template-columns: 1fr !important; }
  .tier { padding: 32px var(--gutter) !important; }
  .compare { font-size: 12px; }
  .compare table { min-width: 540px; }

  /* Contact */
  .form { padding: 32px var(--gutter) !important; }
  .aside { padding: 28px var(--gutter) !important; }
  .radio-row { flex-wrap: wrap; gap: 6px !important; }
  .radio-row label { font-size: 9.5px !important; padding: 7px 10px !important; }

  /* Field-notes featured + grid + filters */
  .featured .photo { min-height: 280px !important; }
  .featured h2 { font-size: clamp(34px, 9vw, 48px) !important; }
  .featured .body { padding: 32px var(--gutter) !important; gap: 18px !important; }
  .featured .meta { flex-wrap: wrap; gap: 10px !important; }
  .filter-strip { flex-direction: column; align-items: stretch; gap: 14px !important; padding: 20px var(--gutter) !important; }
  .filters { flex-wrap: wrap; gap: 8px !important; }
  .index-grid { grid-template-columns: 1fr !important; }
  .note { padding: 28px var(--gutter) !important; gap: 14px !important; }
  .note h3 { font-size: 22px !important; }
  .note .desc { font-size: 13px !important; max-width: none !important; }

  /* Field-notes article body */
  .title-block { padding: 40px var(--gutter) 28px !important; }
  .title-block h1 { font-size: clamp(36px, 10vw, 60px) !important; }
  .title-block .dek { font-size: 16px !important; }
  .post-body { padding: 0 var(--gutter) !important; margin: 32px auto 48px !important; font-size: 16px !important; line-height: 1.65 !important; }
  .post-body h2 { font-size: 28px !important; }
  .post-body h3 { font-size: 22px !important; }
  .cover { min-height: 220px !important; aspect-ratio: 4/3 !important; }
  .cover .cap { left: var(--gutter); right: var(--gutter); font-size: 9px !important; }
  .author-strip { padding: 20px var(--gutter) 0 !important; flex-direction: column; align-items: flex-start; gap: 6px; }
  .back-strip { padding: 24px var(--gutter) !important; font-size: 10px !important; }
  .masthead { grid-template-columns: 1fr !important; }
  .masthead > div { padding: 12px var(--gutter) !important; border-right: 0 !important; border-bottom: 1px solid var(--rule-c); justify-content: flex-start !important; }
  .masthead > div:last-child { border-bottom: 0; }

  /* Plates (chapter 01 watchbill / chapter 04 cutaway) */
  .plate-watchbill, .plate-cutaway { font-size: 10px; padding: 22px var(--gutter); }
  .plate-watchbill .wb-title, .plate-cutaway .ct-title { font-size: 22px !important; }
  .plate-watchbill td.name { font-size: 14px !important; }
  .plate-watchbill .wb-stamp, .plate-cutaway .ct-stamp { width: 70px; height: 70px; right: var(--gutter); top: 60px; font-size: 8px; }
  .plate-cutaway .ct-stage { top: 100px; bottom: 50px; }

  /* Topbar dropdowns / utility */
  .topbar { font-size: 10px !important; }

  /* Waitlist modal — full-bleed on small screens */
  .wl-card {
    max-width: 100%;
    padding: 24px 22px 20px !important;
  }
  .wl-title { font-size: 30px !important; }
  .wl-row-grid { grid-template-columns: 1fr !important; }
  .wl-submit-row { flex-direction: column; align-items: stretch; gap: 14px !important; }
  .wl-note { text-align: left !important; }
  .wl-stamp { width: 80px !important; height: 80px !important; top: 60px !important; right: 14px !important; font-size: 8px !important; }

  /* ════════════════════════════════════════════════════════════════
     INDEX-SPECIFIC MOBILE — overrides for sections only on index.html
     ════════════════════════════════════════════════════════════════ */

  /* Plate · 004 / Docs — meta strip stacks, doc cards stack */
  .plate-docs-meta {
    grid-template-columns: 1fr !important;
  }
  .plate-docs-meta > div {
    padding: 12px var(--gutter) !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    justify-content: flex-start !important;
  }
  .plate-docs-meta > div:last-child { border-bottom: 0; justify-content: flex-start !important; }
  .plate-docs-grid { grid-template-columns: 1fr !important; }
  .plate-docs-grid .doc-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    min-height: auto !important;
    padding: 32px var(--gutter) !important;
  }
  .plate-docs-grid .doc-card:last-child { border-bottom: 0; }
  .doc-card-h { font-size: 26px !important; }
  .doc-card-lead { font-size: 13.5px !important; }
  .doc-diagram { padding: 18px 14px !important; font-size: 10px !important; }

  /* Plate · 005 / Start CTA band */
  .plate-start { grid-template-columns: 1fr !important; }
  .plate-start-label {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 28px var(--gutter) !important;
    gap: 18px !important;
  }
  .plate-start-body {
    grid-template-columns: 1fr !important;
    padding: 36px var(--gutter) 40px !important;
    gap: 24px !important;
    align-items: start !important;
  }
  .plate-start-h { font-size: clamp(34px, 9vw, 48px) !important; }
  .plate-start-side { gap: 18px !important; }
  .plate-start-sub { font-size: 14.5px !important; max-width: none !important; }
  .plate-start-action { gap: 10px !important; }
  .plate-start-foot { gap: 12px !important; font-size: 9.5px !important; }

  /* Chapter 02 — Router schematic flow rows
     Desktop: [in] → [router] → [agent]  (horizontal arrows)
     Mobile : single column, arrows rotate to point down. */
  .schematic-body { padding: 20px var(--gutter) !important; gap: 14px !important; }
  .schematic-head, .schematic-foot { padding: 10px var(--gutter) !important; font-size: 9.5px !important; }
  .flow-row {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    justify-items: stretch;
  }
  .flow-node {
    padding: 12px 14px !important;
    font-size: 10.5px !important;
    min-height: auto !important;
    justify-items: center;
    text-align: center;
  }
  .flow-node b { font-size: 17px !important; }
  /* Rotate the horizontal arrow to vertical */
  .flow-arrow {
    width: 1px !important;
    height: 18px !important;
    background: var(--rule-strong);
    justify-self: center;
  }
  .flow-arrow::after {
    right: auto !important;
    top: auto !important;
    bottom: -1px !important;
    left: -3px !important;
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 6px solid var(--rule-strong) !important;
    border-bottom: 0 !important;
  }
  /* 3-col chip stack → 2-col on mobile (legible without huge stretch) */
  .flow-stack { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .flow-chip { padding: 7px 8px !important; font-size: 9px !important; }

  /* Chapter 03 — Feature grid (200px label + 3 cells → stack) */
  .fgrid { grid-template-columns: 1fr !important; }
  .fgrid > .chapter-side {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 28px var(--gutter) !important;
  }
  .fgrid-cell {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 32px var(--gutter) 36px !important;
    gap: 18px !important;
  }
  .fgrid-cell:last-child { border-bottom: 0; }
  .fgrid-h { font-size: clamp(26px, 7.5vw, 36px) !important; }
  .fgrid-body { font-size: 13.5px !important; }
  .fgrid-vis { height: 110px !important; }
  .vis-bars { padding: 12px !important; gap: 4px !important; }

  /* Quote band — collapse 3-col to single editorial column */
  .quote {
    grid-template-columns: 1fr !important;
    padding: 48px var(--gutter) 52px !important;
    gap: 22px !important;
    align-items: start !important;
  }
  .quote-meta { font-size: 10px !important; }
  .quote-body {
    font-size: clamp(26px, 7.2vw, 36px) !important;
    line-height: 1.15 !important;
    max-width: none !important;
    text-wrap: pretty !important;
    overflow-wrap: break-word !important;
  }
  .quote-attr {
    font-size: 10px !important;
    align-self: start !important;
  }
  .quote-attr b { font-size: 18px !important; }

  /* Chapter list — 2-col internal → 1-col stack */
  .chapter-list { grid-template-columns: 1fr !important; margin-top: 28px !important; }
  .chapter-list-item {
    padding: 14px 0 !important;
    grid-template-columns: 28px 1fr !important;
    gap: 12px !important;
    border-left: 0 !important;
  }
  .chapter-list-item:nth-child(odd),
  .chapter-list-item:nth-child(even) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
  }
  .chapter-list-item .label { font-size: 13px !important; }
  .chapter-list-item .label span { font-size: 12px !important; }

  /* Chapter num — oversized serif (84px) at mobile is too loud */
  .chapter-num { font-size: 44px !important; }
  .chapter-num small { font-size: 10px !important; margin-top: 8px !important; }

  /* Closer changelog cl-item (80px date col → 60px) */
  .cl-item { grid-template-columns: 60px 1fr !important; gap: 12px !important; }
  .cl-h { font-size: 19px !important; }
  .cl-body { font-size: 12.5px !important; }

  /* ════════════════════════════════════════════════════════════════
     PAGES-WIDE MOBILE — marketplace, pricing, pitch-mode, 404
     ════════════════════════════════════════════════════════════════ */

  /* Marketplace toolbar — search/filter/sort all stack */
  .toolbar { grid-template-columns: 1fr !important; }
  .toolbar > * {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-c) !important;
    padding: 14px var(--gutter) !important;
  }
  .toolbar > *:last-child { border-bottom: 0 !important; }
  .search { gap: 10px !important; }

  /* Marketplace channels grid — 8-col → 2-col */
  .channels { grid-template-columns: repeat(2, 1fr) !important; }
  .channels .channel {
    border-right: 1px solid var(--rule-c) !important;
    border-bottom: 1px solid var(--rule-c);
    padding: 20px 12px !important;
    font-size: 14px !important;
  }
  .channels .channel:nth-child(2n) { border-right: 0 !important; }

  /* Any inline-styled repeat(3,1fr) on marketplace stacks fully */
  [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing — tiers stack, CTA strip stack */
  .tiers { grid-template-columns: 1fr !important; }
  .tier { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); padding: 32px var(--gutter) !important; }
  .tier:last-child { border-bottom: 0; }

  /* Pricing compare — keep horizontal scroll, narrow font */
  .compare {
    overflow-x: auto;
    grid-template-columns: 1.6fr repeat(4, minmax(110px, 1fr)) !important;
    min-width: 540px;
  }
  .compare > div { white-space: normal !important; padding: 12px 14px !important; font-size: 12.5px !important; }

  /* FAQ */
  .faq { grid-template-columns: 1fr !important; }
  .faq > div { padding: 24px var(--gutter) !important; }
  .faq-q { font-size: 18px !important; }
  .faq-a { font-size: 13.5px !important; }

  /* Shared CTA strip used on marketplace/pricing/field-notes */
  .cta-strip {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px var(--gutter) 56px !important;
    align-items: start !important;
  }
  .cta-h { font-size: clamp(36px, 8.5vw, 52px) !important; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: 8px !important; }
  .cta-actions .btn { justify-content: center; }

  /* Sub strip (field-notes footer) */
  .sub-strip {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 40px var(--gutter) !important;
  }

  /* Terms — title block */
  .title-block {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 40px var(--gutter) 28px !important;
  }
  .title-block h1 { font-size: clamp(38px, 10vw, 60px) !important; }

  /* Pitch-mode — every 2-col band stacks */
  .pg-pitch .hero-content,
  .hero-content {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .chapter:not(.field-note) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px var(--gutter) !important;
  }
  .chapter h2 { font-size: clamp(34px, 9vw, 52px) !important; }
  .chapter p { font-size: 15px !important; max-width: none !important; }
  .fnote {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 40px var(--gutter) !important;
  }
  .cta {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 48px var(--gutter) !important;
  }

  /* 404 — main 2-col stacks */
  main {
    grid-template-columns: 1fr !important;
  }
  main > * { border-right: 0 !important; border-bottom: 1px solid var(--rule-c); padding: 32px var(--gutter) !important; }
  main > *:last-child { border-bottom: 0; }
  .where a { grid-template-columns: 32px 1fr auto !important; gap: 8px !important; padding: 12px 0 !important; font-size: 10.5px !important; }

  /* Marketplace pack — desktop has multi-row grid template, keep but tighten gap */
  .pack { grid-template-rows: auto !important; gap: 16px !important; }
  .pack-includes .row { grid-template-columns: 60px 1fr !important; gap: 8px !important; font-size: 11px !important; }
}


/* ════════════════════════════════════════════════════════════════
   NAV DRAWER (mobile + tablet) — injected by _nav.js
   ════════════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  padding: 0;
}
.nav-toggle::before, .nav-toggle::after {
  content: ""; display: block; width: 16px; height: 1px;
  background: var(--fg);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"]::before { transform: translateY(2.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after  { transform: translateY(-2.5px) rotate(-45deg); }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
}

.nav-drawer {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.nav-drawer[data-open="true"] { pointer-events: auto; opacity: 1; }
.nav-drawer__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--fg) 55%, transparent);
  backdrop-filter: blur(2px);
}
.nav-drawer__panel {
  position: relative; height: 100%;
  width: min(420px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--rule-strong);
  padding: 24px 28px 28px;
  display: flex; flex-direction: column; gap: 20px;
  transform: translateX(20px);
  transition: transform .26s cubic-bezier(.2,.7,.2,1);
  overflow-y: auto;
}
.nav-drawer[data-open="true"] .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-c);
}
.nav-drawer__close {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--rule-c);
  cursor: pointer; color: var(--fg);
  font-family: var(--mono); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
}
.nav-drawer__close:hover { border-color: var(--fg); }

.nav-drawer__list {
  display: flex; flex-direction: column;
  flex: 1;
  gap: 0;
}
.nav-drawer__list a {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px dashed var(--rule-c);
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-transform: none;
}
.nav-drawer__list a .num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding-top: 8px;
}
.nav-drawer__list a em { font-style: italic; color: var(--muted); }
.nav-drawer__list a:hover .num { color: var(--accent); }

.nav-drawer__foot {
  border-top: 1px solid var(--rule-c);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.nav-drawer__foot a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  justify-content: center;
}
.nav-drawer__foot a.solid {
  background: var(--fg); color: var(--bg); border-color: var(--fg);
}
.nav-drawer__foot a:hover { border-color: var(--fg); }

.nav-drawer__meta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between;
  padding-top: 6px;
}

/* Lock body scroll while drawer is open */
body.has-nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer__panel, .nav-toggle::before, .nav-toggle::after { transition: none !important; }
}

@media print {
  .nav-toggle, .nav-drawer { display: none !important; }
}