/* ============================================================
   Octomatica design language v2: print / PDF stylesheet for offers.
   Link it with media="print" after components.css. It keeps the web
   look (type, fields, rules) and makes it paginate on A4:
   light theme forced, header becomes a running line, hero shrinks to
   a title block, nothing animates, rows never split across pages.
   Chrome "Save as PDF" or Playwright page.pdf({ format: "A4",
   printBackground: true }) both honour it.
   ============================================================ */

@page { size: A4; margin: 14mm 14mm 16mm; }

:root:not([data-theme="never"]), :root[data-theme] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f1f4f2;
  --ink: #0f1613; --muted-strong: #424d47; --muted: #5e6a63;
  --line: #e2e7e4; --line-strong: #cfd5d1;
  --accent-deep: #0a7351; --accent-soft: #def3e8; --accent-faint: #edf8f1;
  --field-sand: #f2edcf; --field-rose: #f3ded9; --field-sky: #dce6f4; --field-mint: #e3f2ea;
  --brand-mark: url("assets/octo-core.svg");
  --shell: 100%;
  --section-pad: 6mm;
  --fs-display: 30pt; --fs-h2: 22pt; --fs-h3: 13pt; --fs-num: 30pt; --fs-lead: 11.5pt;
  --fs-body: 10pt; --fs-small: 8.5pt; --fs-micro: 7pt;
  color-scheme: light;
}

html, body { background: #fff; }
body { font-size: var(--fs-body); line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body::before { display: none; }

/* header: a quiet running line, no glass, no nav, no buttons */
.site-header { position: static; height: auto; padding-bottom: 5mm; background: none !important; box-shadow: none !important; backdrop-filter: none !important; color: var(--ink) !important; }
.site-header .nav-links, .site-header .header-actions .button { display: none; }
.site-header .wordmark { font-size: 15pt; }
.site-header .wordmark::before { background-image: var(--brand-mark) !important; }

/* hero: a title block, edge to edge of the text area */
.hero, .hero-compact { display: block; min-height: 0; padding: 4mm 0 6mm; background: none; color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.hero-media, .hero-wash, .hero-stamp { display: none; }
.hero-content, .hero-left .hero-content { width: auto; padding: 0; justify-items: start; text-align: left; }
.hero-content .lead { max-width: none; margin-top: 4mm; color: var(--muted-strong); }
.hero .eyebrow, .hero-ink .eyebrow { color: var(--accent-deep); }
.hero .display { line-height: 1; }

.band, .band-ink { background: none; color: var(--ink); }
.band-ink .lead, .band-ink .muted { color: var(--muted); }
.band-ink .eyebrow { color: var(--accent-deep); }
.band-ink .rule-list > *, .band-ink .index-list > li, .band-ink .kv > div { border-color: var(--line-strong); }
.section { padding-block: var(--section-pad) 0; }
.intro-row { grid-template-columns: 1fr; gap: 4mm; }
.split-sticky > :first-child { position: static; }
.intro { margin-bottom: 5mm; }

.flight, .receipt, .board, .brief { box-shadow: none; }
.flight > * { min-height: 0; padding: 6mm; }
.symbol { width: 9mm; height: 9mm; margin-bottom: 4mm; box-shadow: none; font-size: 9pt; }
.field { min-height: 0; padding: 5mm; gap: 3mm; }
.field::after { display: none; }
.fields { gap: 3mm; }
.index-list > li { grid-template-columns: 16mm 1fr 1.3fr; padding-block: 4mm; }
.index-list > li::before { font-size: 18pt; }
.facts strong { font-size: 22pt; }
.facts > div { padding-top: 3mm; }
.board th, .board td { padding: 3mm 4mm; font-size: 9pt; }
.brief { display: block; min-height: 0; padding: 6mm; overflow: visible; }
.faq details > div { display: block; }
.button { min-height: 0; padding: 2.4mm 5mm; box-shadow: none; }
.button-glass { display: none; }

/* A4 is ~794px wide, which trips the tablet breakpoints: restore the desktop grids. */
.rule-list { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important; gap: 0 6mm; }
.rule-list > * { padding-block: 3mm 4mm; gap: 2mm; }
.facts { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important; }
.fields { grid-template-columns: repeat(12, 1fr) !important; }
.field { grid-column: span var(--span, 4) !important; min-height: 0 !important; }
.flight, .tiers { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) !important; }
.split { display: block; }
.split > :first-child { margin-bottom: 4mm; }
.index-list > li { grid-template-columns: 12mm 0.9fr 1.3fr !important; gap: 2mm 5mm; padding-block: 3mm; }
.brief .index-list > li { grid-template-columns: 10mm 0.7fr 1.3fr !important; padding-block: 2.5mm; }
.brief-actions { display: flex; align-items: center; gap: 6mm; min-width: 0; margin-top: 4mm; }
.kv > div { grid-template-columns: 40mm 1fr !important; padding-block: 3mm; }
.board-stack table { display: table !important; } .board-stack thead { display: table-header-group !important; }
.board-stack tbody { display: table-row-group !important; } .board-stack tr { display: table-row !important; padding: 0; }
.board-stack td { display: table-cell !important; padding: 3mm 4mm !important; border-top: 1px solid var(--line) !important; }
.board-stack td + td { border-left: 1px solid var(--line) !important; }
.board-stack td[data-label]::before { content: none; }
.h4 { font-size: 10.5pt; }
.label { font-size: 6.5pt; }
.proof { font-size: 8pt; }

/* never split a row, a step or a panel; keep headings with what follows */
.rule-list > *, .index-list > li, .flight > *, .field, .kv > div, .board tr, .callout, .receipt, .tiers > * { break-inside: avoid; }
h1, h2, h3, .eyebrow { break-after: avoid; }
.page-break { break-before: page; }
.screen-only { display: none !important; }

.reveal, .reveal-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
a[href^="http"]::after { content: ""; }

/* compact rhythm: inline screen spacing is reduced so a short offer fits two A4 pages */
.hero .facts { margin-top: 5mm !important; }
.field [style*="margin-top"] { margin-top: 2mm !important; }
.brief .index-list { margin-top: 3mm !important; }