/* Coastal Preferred Escapes — built on the house colour engine
   (Second Brain/Development/Website Rules and Guidelines/engine.css).
   Block 1 is the ONLY place raw colour inputs live. Values sampled from
   Neil's poster/logo (9 Oct 2026): navy #0C1848, sea teal #004860, orange #D86C00. */

:root {
  /* ── 1. MASTER BRAND INPUTS ─────────────────────────────────────── */
  --brand-h: 229;  --brand-s: 71%;              /* logo navy            */
  --accent-h: 30;  --accent-s: 100%; --accent-l: 42%; /* Premier orange */
  --sea-h: 195;    --sea-s: 100%;               /* logo wave / Escape   */

  /* ── 2. SHADE SCALE ─────────────────────────────────────────────── */
  --l-50: 97%; --l-100: 92%; --l-200: 82%; --l-300: 66%; --l-400: 46%;
  --l-500: 32%; --l-600: 23%; --l-700: 16%; --l-800: 11%; --l-900: 7%;

  /* ── 3. COMPUTED SCALES ─────────────────────────────────────────── */
  --brand-50:  hsl(var(--brand-h), var(--brand-s), var(--l-50));
  --brand-100: hsl(var(--brand-h), var(--brand-s), var(--l-100));
  --brand-200: hsl(var(--brand-h), var(--brand-s), var(--l-200));
  --brand-300: hsl(var(--brand-h), var(--brand-s), var(--l-300));
  --brand-400: hsl(var(--brand-h), var(--brand-s), var(--l-400));
  --brand-500: hsl(var(--brand-h), var(--brand-s), var(--l-500));
  --brand-700: hsl(var(--brand-h), var(--brand-s), var(--l-700));
  --brand-800: hsl(var(--brand-h), var(--brand-s), var(--l-800));
  --brand-900: hsl(var(--brand-h), var(--brand-s), var(--l-900));
  --sea-50:  hsl(var(--sea-h), 60%, 96%);
  --sea-100: hsl(var(--sea-h), 55%, 90%);
  --sea-400: hsl(var(--sea-h), var(--sea-s), 30%);
  --sea-600: hsl(var(--sea-h), var(--sea-s), 19%);
  --accent:       hsl(var(--accent-h), var(--accent-s), var(--accent-l));
  --accent-dark:  hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 8%));
  --accent-wash:  hsl(var(--accent-h), 90%, 95%);
  --sand:         hsl(var(--accent-h), 60%, 93%);   /* poster's warm label chips */

  /* ── 5. SEMANTIC ALIASES — components use only these ────────────── */
  --color-primary:       var(--brand-700);
  --color-primary-dark:  var(--brand-800);
  --color-primary-mid:   var(--brand-500);
  --color-primary-wash:  var(--brand-50);
  --color-sea:           var(--sea-600);
  --color-sea-mid:       var(--sea-400);
  --color-sea-wash:      var(--sea-50);
  --color-secondary:     var(--accent);
  --color-secondary-dark:var(--accent-dark);
  --color-dark:          hsl(var(--brand-h), 40%, 10%);
  --color-background:    hsl(var(--brand-h), 30%, 99%);
  --color-surface:       hsl(var(--brand-h), 40%, 97%);
  --color-surface-raised:hsl(var(--brand-h), 30%, 94%);
  --color-border:        hsl(var(--brand-h), 25%, 88%);
  --color-copy:          hsl(var(--brand-h), 12%, 27%);
  --color-copy-muted:    hsl(var(--brand-h), 8%, 45%);
  --color-on-dark:       hsl(var(--brand-h), 30%, 99%);
  --color-on-dark-muted: var(--brand-200);
  --color-on-dark-border:hsl(var(--brand-h), 40%, 28%);
  --color-good:          hsl(152, 55%, 30%);  /* status colour: saving / positive */
  --color-good-wash:     hsl(152, 50%, 94%);
  --color-bad:           hsl(4, 70%, 44%);    /* status colour: loss / error */
  --color-bad-wash:      hsl(4, 80%, 96%);
  --shadow: 0 1px 2px hsl(var(--brand-h) 40% 10% / .06), 0 8px 24px hsl(var(--brand-h) 40% 10% / .07); /* overlay */

  /* ── 6. TYPE ────────────────────────────────────────────────────── */
  --font-heading: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --text-xs: clamp(.75rem, .72rem + .15vw, .82rem);
  --text-sm: clamp(.875rem, .84rem + .18vw, .95rem);
  --text-base: clamp(1rem, .96rem + .2vw, 1.06rem);
  --text-lg: clamp(1.13rem, 1.06rem + .33vw, 1.28rem);
  --text-xl: clamp(1.4rem, 1.25rem + .6vw, 1.8rem);
  --text-2xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --text-3xl: clamp(2.2rem, 1.7rem + 2.2vw, 3.5rem);
  --text-4xl: clamp(2.8rem, 2rem + 3.6vw, 5.2rem);

  /* ── 7. SPACING / SHAPE / MOTION ────────────────────────────────── */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem;
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --shell: min(100% - 2rem, 1180px);
  --radius: .75rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 120ms; --dur-base: 260ms;
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-background); color: var(--color-copy); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-dark); line-height: 1.02; letter-spacing: -.005em; margin: 0 0 var(--space-4); font-weight: 700; text-transform: uppercase; }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
a { color: var(--color-sea); }
img { max-width: 100%; height: auto; display: block; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--wash { background: var(--color-surface); }
.section--sea { background: var(--color-sea-wash); }
.section--dark { background: var(--color-primary); color: var(--color-on-dark-muted); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-on-dark); }
.section--dark a { color: var(--color-on-dark); }
.lede { font-size: var(--text-lg); max-width: 62ch; color: var(--color-copy); }
.section--dark .lede { color: var(--color-on-dark-muted); }
.muted { color: var(--color-copy-muted); }
.small { font-size: var(--text-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.stack > * + * { margin-top: var(--space-4); }
.head { max-width: 760px; margin-bottom: var(--space-12); }
.head.center { margin-inline: auto; }

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border: 0; border-radius: 999px; background: var(--color-secondary); color: var(--color-on-dark); font-family: var(--font-body); font-size: var(--text-base); font-weight: 700; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:hover { background: var(--color-secondary-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; }
.btn--navy { background: var(--color-primary); }
.btn--navy:hover { background: var(--color-primary-dark); }
.btn--ghost { background: transparent; color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-border); }
.btn--ghost:hover { background: var(--color-primary-wash); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── HEADER (house pattern: GSI two bars, SCA phone pill) ──────────── */
.topbar { background: var(--color-primary); color: var(--color-on-dark-muted); font-size: var(--text-xs); }
.topbar .shell { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 38px; flex-wrap: wrap; }
.topbar a { color: var(--color-on-dark); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__left, .topbar__right { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.topbar svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; fill: currentColor; }
.mainbar { position: sticky; top: 0; z-index: 50; background: hsl(var(--brand-h) 30% 99% / .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); }
.mainbar .shell { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-6); min-height: 76px; }
.logo img { height: 54px; width: auto; }
.nav { display: flex; gap: var(--space-6); }
.nav a { color: var(--color-dark); text-decoration: none; font-weight: 600; font-size: var(--text-sm); padding-block: var(--space-2); border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-color: var(--color-secondary); }
.actions { display: flex; gap: var(--space-3); justify-content: flex-end; align-items: center; }
.phone-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-6); border-radius: 999px; background: var(--color-background); box-shadow: inset 0 0 0 1.5px var(--brand-100); color: var(--color-dark); font-weight: 800; text-decoration: none; white-space: nowrap; }
.phone-pill svg { width: 18px; height: 18px; fill: var(--color-secondary); }
.phone-pill:hover { box-shadow: inset 0 0 0 1.5px var(--color-secondary); }
.menu-btn { display: none; }
@media (max-width: 980px) {
  .mainbar .shell { grid-template-columns: 1fr auto; }
  .nav { display: none; grid-column: 1 / -1; flex-direction: column; gap: 0; padding-bottom: var(--space-4); }
  .nav.is-open { display: flex; }
  .nav a { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
  .actions { grid-column: 1 / -1; justify-content: stretch; padding-bottom: var(--space-3); }
  .actions > * { flex: 1; }
  .menu-btn { display: inline-flex; justify-self: end; background: transparent; border: 1.5px solid var(--color-border); border-radius: 999px; padding: var(--space-2) var(--space-4); font: 700 var(--text-sm) var(--font-body); color: var(--color-dark); cursor: pointer; }
  .logo img { height: 44px; }
  .topbar__right { display: none; }
}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero { position: relative; color: var(--color-on-dark); background: var(--color-primary-dark); overflow: hidden; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, hsl(var(--brand-h) 71% 9% / .92) 0%, hsl(var(--brand-h) 71% 12% / .7) 45%, hsl(var(--brand-h) 71% 12% / .1) 100%); }
.hero .shell { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 8rem); }
.hero h1 { color: var(--color-on-dark); max-width: 14ch; }
.hero .lede { color: var(--color-on-dark-muted); }
.hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); align-items: center; }
.hero__note { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--color-on-dark); color: var(--color-primary); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-6); }
.badge svg { width: 16px; height: 16px; fill: var(--color-secondary); }

/* ── GRIDS & CARDS ────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); }
.card--raised { box-shadow: var(--shadow); border-color: transparent; }
.card h3 { margin-bottom: var(--space-3); }
.card p:last-child { margin-bottom: 0; }
.split { display: grid; gap: var(--space-12); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); align-items: center; }
.rounded-img { border-radius: var(--radius); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* Steps */
.steps { counter-reset: s; display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.step { position: relative; padding-top: var(--space-12); }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-secondary); color: var(--color-on-dark); font: 700 var(--text-lg) var(--font-heading); }

/* Tier cards */
.tiers { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
.tier { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--color-background); box-shadow: var(--shadow); }
.tier__top { padding: var(--space-6); color: var(--color-on-dark); }
.tier--escape .tier__top { background: var(--color-sea); }
.tier--preferred .tier__top { background: var(--color-primary-mid); }
.tier--premier .tier__top { background: var(--color-secondary); }
.tier__top h3 { color: var(--color-on-dark); margin: 0; }
.tier__season { font-size: var(--text-sm); opacity: .9; }
.tier__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); flex: 1; }
.price { font: 700 var(--text-3xl) / 1 var(--font-heading); color: var(--color-dark); }
.price small { font: 600 var(--text-sm) var(--font-body); color: var(--color-copy-muted); }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.ticks li { padding-left: 1.6rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--color-sea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11 3.5 8l1-1 2 2 5-5 1 1z' fill='white'/%3E%3C/svg%3E") center / 100% no-repeat; } /* white tick glyph inside icon */
.tier__foot { margin-top: auto; }
.ribbon { display: inline-block; background: var(--sand); color: var(--color-secondary-dark); font-weight: 700; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: 999px; }

/* Photo gallery */
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }

/* Feature chips (poster amenities) */
.features { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.feature { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius); background: var(--color-background); border: 1px solid var(--color-border); }
.feature svg { flex: none; width: 32px; height: 32px; fill: var(--color-primary); }
.feature strong { display: block; color: var(--color-dark); }
.feature span { font-size: var(--text-sm); color: var(--color-copy-muted); }

/* Stats */
.stats { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { padding: var(--space-6); border-radius: var(--radius); background: var(--color-background); border: 1px solid var(--color-border); }
.stat__n { font: 700 var(--text-3xl) / 1 var(--font-heading); color: var(--color-primary); }
.stat__l { font-size: var(--text-sm); color: var(--color-copy-muted); margin-top: var(--space-2); }
.stat--bad .stat__n { color: var(--color-bad); }
.stat--good .stat__n { color: var(--color-good); }
.section--dark .stat { background: hsl(var(--brand-h) 60% 20% / .5); border-color: var(--color-on-dark-border); }
.section--dark .stat__n { color: var(--color-on-dark); }
.section--dark .stat__l { color: var(--color-on-dark-muted); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-background); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { background: var(--color-surface); color: var(--color-dark); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--color-good); font-weight: 700; }
.neg { color: var(--color-bad); font-weight: 700; }
tr.total td { font-weight: 800; color: var(--color-dark); background: var(--color-surface); }

/* Callouts */
.callout { border-left: 4px solid var(--color-secondary); background: var(--accent-wash); padding: var(--space-4) var(--space-6); border-radius: 0 var(--radius) var(--radius) 0; }
.callout--sea { border-color: var(--color-sea); background: var(--color-sea-wash); }
.callout--bad { border-color: var(--color-bad); background: var(--color-bad-wash); }
.callout--good { border-color: var(--color-good); background: var(--color-good-wash); }
.callout p:last-child { margin: 0; }

/* Calculator & forms */
.calc { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.field { display: grid; gap: var(--space-2); }
.field > span { font-size: var(--text-sm); font-weight: 600; color: var(--color-dark); }
.input, .select, .textarea { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border); border-radius: calc(var(--radius) * .75); background: var(--color-background); color: var(--color-dark); font: 500 var(--text-base) var(--font-body); }
.input::placeholder, .textarea::placeholder { text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); font-weight: 600; color: var(--color-copy-muted); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-sea); outline: none; }
input[type=range] { width: 100%; accent-color: var(--color-secondary); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.seg button { flex: 1; min-height: 44px; border: 1.5px solid var(--color-border); background: var(--color-background); border-radius: 999px; font: 700 var(--text-sm) var(--font-body); color: var(--color-dark); cursor: pointer; padding-inline: var(--space-3); }
.seg button[aria-pressed=true] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-dark); }
.result { border-radius: var(--radius); padding: var(--space-6); background: var(--color-primary); color: var(--color-on-dark-muted); }
.result h3 { color: var(--color-on-dark); }
.result__big { font: 700 var(--text-3xl) / 1 var(--font-heading); color: var(--color-on-dark); margin-block: var(--space-2) var(--space-4); }
.result dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-sm); }
.result dd { margin: 0; color: var(--color-on-dark); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lead-form { display: grid; gap: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-8); }
.lead-form h3 { margin: 0; }
.pair { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.consent { display: flex; gap: var(--space-3); font-size: var(--text-sm); align-items: flex-start; }
.consent input { margin-top: .3em; width: 18px; height: 18px; accent-color: var(--color-primary); flex: none; }
.form-error { color: var(--color-bad); font-size: var(--text-sm); margin: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--color-border); padding-block: var(--space-4); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--color-dark); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::after { content: "+"; font: 700 var(--text-xl) / 1 var(--font-heading); color: var(--color-secondary); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--space-3) 0 0; }

/* Charts (SVG drawn by JS) */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font-body); font-size: 12px; fill: var(--color-copy-muted); }
.chart .lbl-strong { fill: var(--color-dark); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); margin-top: var(--space-3); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* Plan document */
.doc-layout { display: grid; gap: var(--space-12); grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.toc { position: sticky; top: 96px; font-size: var(--text-sm); }
.toc a { display: block; padding: var(--space-2) 0; color: var(--color-copy-muted); text-decoration: none; border-left: 2px solid var(--color-border); padding-left: var(--space-3); }
.toc a:hover, .toc a.is-active { color: var(--color-dark); border-color: var(--color-secondary); }
.doc section { padding-block: var(--space-12); border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.doc section:first-child { padding-top: 0; }
.doc h2 { font-size: var(--text-2xl); }
.doc h3 { font-size: var(--text-lg); margin-top: var(--space-8); }
.doc p, .doc li { max-width: 74ch; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-bottom: var(--space-2); }
.kicker-num { font: 700 var(--text-sm) var(--font-body); color: var(--color-secondary); letter-spacing: .02em; }
.err { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px dashed var(--color-border); }
.err:last-child { border-bottom: 0; }
.sev { font-size: var(--text-xs); font-weight: 800; padding: var(--space-1) var(--space-3); border-radius: 999px; height: fit-content; white-space: nowrap; }
.sev--high { background: var(--color-bad-wash); color: var(--color-bad); }
.sev--med { background: var(--accent-wash); color: var(--color-secondary-dark); }
.sev--low { background: var(--color-sea-wash); color: var(--color-sea); }
.err h4 { margin: 0 0 var(--space-1); text-transform: none; font-family: var(--font-body); font-size: var(--text-base); }
.err p { margin: 0; font-size: var(--text-sm); }
.bridge-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .toc { position: static; display: none; } }

/* Footer */
.footer { background: var(--color-primary-dark); color: var(--color-on-dark-muted); padding-block: var(--space-12); font-size: var(--text-sm); }
.footer a { color: var(--color-on-dark); }
.footer .grid { align-items: start; }
.footer h4 { color: var(--color-on-dark); font-size: var(--text-base); }
.review-bar { background: var(--color-secondary); color: var(--color-on-dark); font-size: var(--text-sm); text-align: center; padding: var(--space-2) var(--space-4); }
.review-bar a { color: var(--color-on-dark); font-weight: 700; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } }

@media print {
  .topbar, .mainbar, .review-bar, .toc, .footer, .no-print { display: none !important; }
  .doc-layout { display: block; }
  .doc section { break-inside: auto; padding-block: 1rem; }
  body { font-size: 10.5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .err, tr, .stat, .step, svg.chart { break-inside: avoid; }
  h2, h3, h4 { break-after: avoid; }
  .table-wrap { overflow: visible; }
  th { white-space: normal; }
  table { font-size: 9pt; }
  th, td { padding: 6px 8px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat__n { font-size: 20pt; }
  .stat { padding: 10px 12px; }
  .stat__l { font-size: 8pt; line-height: 1.35; }
  .hero h1 { font-size: 34pt; }
  .hero .shell { padding-block: 2.5rem; }
  @page { size: A4; margin: 14mm 12mm; }
  .reveal { opacity: 1; transform: none; }
}