/* Hallmark · macrostructure: Manifesto · theme: custom "City Hunter" (locked) · desktop-first pass
 * pre-emit critique: P5 H4 E4 S5 R4 V5 · owner: Petr 🪨 · v2 (2026-07-17)
 * Iron rules: ONE pop per section (alternate pink/brown) · sharp corners · single 2px borders · NO shadows · Caveat straight */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--color-blue); }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
a, button, input, textarea { touch-action: manipulation; }
/* skip link — invisible until keyboard-focused */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 50; background: var(--color-ultramarine); color: var(--color-paper); padding: 0.7em 1.2em; font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; }
.skip-link:focus-visible { left: 0; }

/* ---------- type helpers ---------- */
.display {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  letter-spacing: -0.02em; line-height: 0.92; text-transform: uppercase;
  overflow-wrap: anywhere; min-width: 0;
}
/* line-break quality: headings balance across lines, body text avoids
   single-word last lines (widows/orphans). Width-agnostic — the browser
   recomputes per device; older browsers simply ignore these. */
h1, h2, h3, h4, .display, .lead, .claim { text-wrap: balance; }
p, li, .sub, summary { text-wrap: pretty; }
.pill, .btn, .ticker-track span { text-wrap: nowrap; }
.mono { text-wrap: balance; }
.mono { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; }
.hand { font-family: var(--font-hand); font-size: var(--text-hand); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-body);
  padding: 0.85em 1.9em; border-radius: var(--radius-pill);
  border: var(--rule) var(--color-blue); background: var(--color-blue); color: var(--color-paper);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-paper); color: var(--color-blue); }
.btn:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--color-blue); }
.btn-ghost:hover { background: var(--color-blue); color: var(--color-paper); }

/* ---------- desktop/mobile copy variants (mobile text file drives .m-only) -- */
.m-only { display: none; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg);
  background: var(--color-paper);
  border-bottom: 4px solid var(--color-ultramarine);
  padding: var(--space-md) var(--space-xl);
}
.nav .brand { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; color: var(--color-ultramarine); text-decoration: none; }
.nav .nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav .nav-links a { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.nav .nav-links a:hover, .nav .nav-links a[aria-current="page"] { border-bottom-color: var(--color-ultramarine); }
.nav .nav-links a.btn { padding: 0.55em 1.2em; color: var(--color-paper); border-bottom-color: transparent; }
.nav .nav-links a.btn:hover { color: var(--color-blue); background: var(--color-paper); }

/* mobile menu — lives inside the sticky nav, drops below it */
.nav-toggle {
  display: none; font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: none; color: var(--color-ultramarine);
  padding: 0.4em 0; cursor: pointer; border-bottom: 2px solid transparent;
}
.nav-toggle[aria-expanded="true"] { border-bottom-color: var(--color-ultramarine); }
.mobile-menu {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--color-paper); border-bottom: 4px solid var(--color-ultramarine);
}
.mobile-menu a {
  display: block; padding: var(--space-md) var(--space-lg);
  font-family: var(--font-mono); font-size: var(--text-body); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-ultramarine); text-decoration: none;
  border-top: 2px solid var(--color-paper-2);
}
.mobile-menu a:active { background: var(--color-paper-2); }

/* ---------- generic section ---------- */
.section { padding: var(--space-3xl) var(--space-xl); }
.section-tight { padding: var(--space-2xl) var(--space-xl); }
.surface-blue { background: var(--color-ultramarine); color: var(--color-paper); }
.surface-blue a { color: var(--color-paper); }
.surface-deep { background: var(--color-paper-2); }
.measure { max-width: 34em; }
.eyebrow { display: block; margin-bottom: var(--space-sm); }
.aside-hand { color: var(--color-brown); }
.surface-blue .aside-hand { color: var(--color-pink); }

/* ================= HERO — two zones: text LEFT, tasks pile RIGHT (no overlap, no divider) ======= */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: center; min-height: min(70vh, 560px); }
.hero-copy { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; max-width: 44rem; padding: var(--space-xl) var(--space-md) var(--space-xl) var(--space-xl); }
.hero .eyebrow { color: var(--color-brown); }
.hero h1 { color: var(--color-ultramarine); font-size: clamp(2rem, 1rem + 2.8vw, 3.2rem); }
.hero h1 .accent-hero { background: var(--color-pink); color: var(--color-ultramarine); padding: 0 0.12em; }
.hero .sub { font-size: var(--text-body-lg); max-width: 28rem; margin-top: var(--space-md); }
.hero .cta-row { margin-top: var(--space-lg); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); max-width: 28rem; }
.hero .cta-row .btn { text-align: center; padding-left: 1em; padding-right: 1em; }

/* the pile zone — the RIGHT column only; words fall & pile here, never behind the text */
.pile-band { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; min-height: 360px; overflow: hidden; margin-left: clamp(-6rem, -5vw, -1rem); }
.pill {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: clamp(0.68rem, 0.58rem + 0.35vw, 0.88rem);
  text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap;
  padding: 0.48em 0.8em;
  border: var(--rule) var(--color-ultramarine); color: var(--color-ultramarine);
  background: var(--color-paper); border-radius: var(--radius);
  will-change: transform; cursor: grab; user-select: none;
}
.pill.pop { color: var(--color-ultramarine); background: var(--color-pink); border-color: var(--color-ultramarine); }
/* static fallback (no-JS / reduced-motion): pills rest as a wrapped shelf. Visible by default. */
.pile-static { position: absolute; left: var(--space-md); right: var(--space-md); bottom: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-content: flex-end; justify-content: center; }
.pile-static .pill { position: static; cursor: default; }
.physics-on .pile-static { display: none; }

/* ================= MIRROR / BELIEF (blue) ================= */
.mirror .kicker { color: var(--color-pink); }
.mirror .mega { font-size: var(--text-display); max-width: 20ch; margin-top: var(--space-sm); }
.mirror .accent { background: var(--color-pink); color: var(--color-ultramarine); padding: 0 0.1em; }
.mirror .claim { font-size: var(--text-body-lg); max-width: 34em; margin-top: var(--space-xl); }
.mirror .claim + .claim { margin-top: var(--space-lg); }
.mirror .fomo { margin-top: var(--space-xl); border-top: var(--rule) var(--color-pink); padding-top: var(--space-lg); max-width: 40em; }

/* ================= OFFER — "how AI actually helps you" (butter, brown) ================= */
.offer .eyebrow { color: var(--color-brown); }
.offer h2 { font-size: var(--text-display-s); color: var(--color-ultramarine); max-width: 20ch; }
.offer .lead { max-width: 36em; margin-top: var(--space-md); font-size: var(--text-body-lg); }
.cards-3 { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--rule) var(--color-brown); }
.card {
  padding: var(--space-xl);
  border-right: var(--rule) var(--color-brown);
}
.card:last-child { border-right: none; }
.card .tag { color: var(--color-brown); }
.card h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: var(--text-h3); line-height: 0.95; margin-top: var(--space-xs); }
.card p { margin-top: var(--space-sm); }

/* real examples by niche */
.examples { margin-top: var(--space-2xl); }
.examples .eyebrow { color: var(--color-brown); }
.example-row { display: grid; grid-template-columns: 12rem minmax(0,1fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-top: var(--rule) var(--color-paper-2); align-items: baseline; }
.example-row:last-child { border-bottom: var(--rule) var(--color-paper-2); }
.example-row .who { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.1rem; color: var(--color-ultramarine); }
.example-row .what { font-size: var(--text-body-lg); }

/* ================= HOW IT WORKS (blue) ================= */
.how.section { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.how h2 { font-size: var(--text-display-s); max-width: 18ch; }
.steps { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-xl); counter-reset: st; }
.step { counter-increment: st; }
.step .num { font-family: var(--font-mono); font-size: var(--text-label); display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border: var(--rule) var(--color-pink); color: var(--color-pink); }
.step h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.2rem; margin-top: var(--space-md); }
.step p { margin-top: var(--space-xs); }
/* her call: centered, bigger, unmissable */
.how .cta-row { margin-top: var(--space-xl); display: flex; justify-content: center; }
.how .cta-row .btn { font-size: var(--text-body-lg); padding: 1em 2.6em; background: var(--color-pink); border-color: var(--color-pink); color: var(--color-ultramarine); }
.how .cta-row .btn:hover { background: var(--color-paper); border-color: var(--color-paper); }

/* ================= ABOUT (butter-deep) ================= */
.about-grid { display: grid; grid-template-columns: 20rem minmax(0,1fr); gap: var(--space-2xl); align-items: start; max-width: 62rem; margin: 0 auto; }
.about .photo { aspect-ratio: 4/5; border: var(--rule) var(--color-ultramarine); background: var(--color-paper); display: grid; place-items: center; text-align: center; padding: var(--space-lg); }
.about .photo .mono { color: var(--color-ultramarine); }
.about h2 { font-size: var(--text-display-s); color: var(--color-ultramarine); }
.about p { margin-top: var(--space-md); font-size: var(--text-body-lg); max-width: 34em; }
.about .punch { font-weight: 700; }

/* ================= TICKER (blue) ================= */
.ticker { overflow: hidden; border-top: var(--rule) var(--color-pink); border-bottom: var(--rule) var(--color-pink); padding: var(--space-md) 0; }
.ticker-track { display: flex; gap: var(--space-2xl); white-space: nowrap; width: max-content; animation: ticker 34s linear infinite; }
.ticker-track span { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.4rem; color: var(--color-paper); }
.ticker-track span::after { content: "·"; margin-left: var(--space-2xl); color: var(--color-pink); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; white-space: normal; flex-wrap: wrap; width: auto; } }

/* ================= FREE GUIDES (blue surface — v1 design) ================= */
.guides h2 { font-size: var(--text-display); color: var(--color-paper); }
.guides .sub { max-width: 40em; margin-top: var(--space-md); font-size: var(--text-body-lg); color: var(--color-paper); }
.grid-3 { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-lg); }
.guide-card { border: var(--rule) var(--color-paper); background: transparent; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: var(--color-paper); }
.guide-card:hover { background: rgba(242, 239, 234, 0.08); }
.guide-card .tag { color: var(--color-pink); }
.guide-card h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; color: var(--color-paper); line-height: 0.98; }
.guide-card .status { margin-top: auto; color: var(--color-pink); }
.guides .see-all { display: inline-block; margin-top: var(--space-2xl); font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-pink); text-decoration: none; }
.guides .see-all:hover { text-decoration: underline; text-underline-offset: 4px; }
.guides .closing { margin-top: var(--space-lg); font-size: var(--text-body-lg); color: var(--color-paper); }

/* ================= STARTER GUIDE email (butter surface, pink-soft form-card — v1 design) ====== */
.kit h2 { font-size: var(--text-display); color: var(--color-ultramarine); }
.kit .sub { margin-top: var(--space-md); font-size: var(--text-body-lg); max-width: 44rem; }
.form-card { background: var(--color-pink-soft); border: var(--rule) var(--color-ultramarine); padding: clamp(2rem, 5vw, 3.5rem); max-width: 44rem; margin-top: var(--space-xl); }
.form-card .field-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.form-card input[type=email] {
  flex: 1 1 240px; font-family: var(--font-body); font-size: var(--text-body);
  padding: 0.9em 1.1em; border: var(--rule) var(--color-ultramarine); border-radius: var(--radius);
  background: var(--color-paper); color: var(--color-ink);
}
.form-card .form-note { margin-top: var(--space-lg); font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: 0.04em; color: var(--color-ink); opacity: 0.78; }

/* ================= CLOSING CTA (blue) ================= */
.closer { text-align: center; }
.closer h2 { font-size: var(--text-display-s); color: var(--color-paper); }
.closer .cta-row { margin-top: var(--space-lg); display: flex; justify-content: center; }
.closer .btn { font-size: var(--text-body-lg); padding: 1em 2.6em; background: var(--color-pink); border-color: var(--color-pink); color: var(--color-ultramarine); }
.closer .btn:hover { background: var(--color-paper); border-color: var(--color-paper); }

/* ================= FOOTER (blue) ================= */
.footer { background: var(--color-ultramarine); color: var(--color-paper); padding: var(--space-xl) var(--space-xl); }
.footer .foot-line { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.3rem, 5.4vw, 3rem); white-space: nowrap; }
.footer .foot-links { display: flex; gap: var(--space-lg); margin-top: var(--space-lg); flex-wrap: wrap; }
.footer a { color: var(--color-paper); text-decoration-thickness: 2px; }
.footer .aside-hand { display: block; margin-top: var(--space-md); color: var(--color-pink); }
.footer .fineprint { margin-top: var(--space-sm); font-size: var(--text-label); opacity: 0.85; }

/* ---- guides page: filters + paper-surface cards (blue-surface .guide-card is home-teaser only) ---- */
.filters { margin-top: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
.filter-group { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: center; }
.filter-group .flabel { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brown); margin-right: var(--space-sm); }
.chip {
  font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.45em 1.1em; border: var(--rule) var(--color-ultramarine); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ultramarine); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--color-paper-2); }
.chip[aria-pressed="true"] { background: var(--color-ultramarine); color: var(--color-paper); }
.guide-grid { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.gcard { border: var(--rule) var(--color-ultramarine); background: var(--color-paper); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); text-decoration: none; color: var(--color-ink); }
.gcard:hover { background: var(--color-paper-2); }
.gcard .tag { color: var(--color-brown); }
.gcard h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.15rem; color: var(--color-ultramarine); line-height: 0.98; }
.gcard .status { margin-top: auto; font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brown); }
.guides-empty { margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-brown); }
@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; }
}

/* ---- inner pages (guides / contact) ---- */
.page-hero { padding: calc(var(--space-2xl) + 1rem) var(--space-xl) var(--space-2xl); }
.page-hero h1 { color: var(--color-ultramarine); font-size: var(--text-display); }
.page-hero .lede { max-width: 40em; margin-top: var(--space-md); font-size: var(--text-body-lg); }
.flagship { border: var(--rule) var(--color-ultramarine); background: var(--color-pink-soft); padding: var(--space-xl); }
.flagship .tag { color: var(--color-brown); }
.flagship h2 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: var(--text-h3); color: var(--color-ultramarine); margin-top: var(--space-2xs); }
.flagship p { margin-top: var(--space-sm); max-width: 44em; }
.flagship form { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); flex-wrap: wrap; max-width: 34rem; }
.flagship input[type=email] { flex: 1 1 14rem; font-family: var(--font-body); font-size: var(--text-body); padding: 0.85em 1em; border: var(--rule) var(--color-ultramarine); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
.contact-form { max-width: 40rem; }
.contact-form .field { margin-top: var(--space-lg); }
.contact-form label { font-weight: 700; display: block; }
.contact-form .hint { font-family: var(--font-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brown); display: block; margin-top: 2px; }
.contact-form input, .contact-form textarea { width: 100%; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-body); padding: 0.85em 1em; border: var(--rule) var(--color-ultramarine); border-radius: var(--radius); background: var(--color-paper); color: var(--color-ink); }
.contact-form textarea { min-height: 8rem; resize: vertical; }

/* ================= AUDIT OFFER v3 additions (2026-07-20) =================
 * hero note · reframe claims inside .how · bonus (PINK pop, no brown) · deal (blue, pink accents) · who strip */
.hero-note { margin-top: var(--space-md); color: var(--color-brown); }

.how .kicker { color: var(--color-pink); }
.how > .display { font-size: var(--text-display-s); max-width: 22ch; }
.how .accent { background: var(--color-pink); color: var(--color-ultramarine); padding: 0 0.1em; }
.how .claim { max-width: 36em; margin-top: var(--space-lg); font-size: var(--text-body-lg); }
.how .claim + .claim { margin-top: var(--space-md); }
.hero-note-2 { margin-top: var(--space-2xs); opacity: 0.75; }
.frags { margin-top: var(--space-xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
.frag h3 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.2rem; color: var(--color-pink); }
.frag p { margin-top: var(--space-xs); }

/* BONUS — one pop only: pink. No brown anywhere in this composition. */
.bonus-box { border: var(--rule) var(--color-ultramarine); background: var(--color-pink-soft); padding: clamp(2rem, 5vw, 3.5rem); max-width: 58rem; margin: 0 auto; }
.bonus-box .eyebrow { color: var(--color-ultramarine); }
.bonus-box h2 { font-size: var(--text-display-s); color: var(--color-ultramarine); max-width: 24ch; }
.bonus-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-2xl); margin-top: var(--space-lg); align-items: start; }
.bonus-grid p { margin-top: var(--space-md); font-size: var(--text-body-lg); max-width: 36em; }
.bonus-grid p:first-child { margin-top: 0; }
.bonus-grid .fine { font-size: var(--text-body); border-top: var(--rule) var(--color-ultramarine); padding-top: var(--space-md); }
.bonus-list { list-style: none; border: var(--rule) var(--color-ultramarine); background: var(--color-paper); }
.bonus-list li { padding: var(--space-md) var(--space-lg); border-top: var(--rule) var(--color-pink); color: var(--color-ultramarine); }
.bonus-list li:first-child { border-top: none; }
.bonus .aside-hand { display: block; margin-top: var(--space-lg); color: var(--color-ultramarine); }

/* OFFER STACK — blue surface, pink accents, CENTERED paper card; value stack above, price below */
.deal { scroll-margin-top: 76px; }
.deal { text-align: center; }
.deal .kicker { color: var(--color-pink); }
.deal h2 { font-size: var(--text-display-s); color: var(--color-paper); }
.deal-box { margin: var(--space-xl) auto 0; background: var(--color-paper); color: var(--color-ink); border: var(--rule) var(--color-pink); padding: clamp(2rem, 5vw, 3.5rem); max-width: 44rem; text-align: left; }
.deal-label { display: block; text-align: center; color: var(--color-brown); }
.stack { list-style: none; margin-top: var(--space-lg); }
.stack-item { position: relative; padding: var(--space-md) 0 var(--space-md) 2.4rem; border-top: 1px solid var(--color-paper-2); }
.stack-item:first-child { border-top: none; }
.stack-item::before { content: "\2713"; position: absolute; left: 0; top: var(--space-md); font-family: var(--font-mono); font-weight: 700; font-size: var(--text-body-lg); color: var(--color-ultramarine); }
.stack-item h4 { font-family: var(--font-display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; font-size: 1.05rem; color: var(--color-ultramarine); }
.stack-item p { margin-top: 2px; font-size: var(--text-body); }
.stack-bonus { background: var(--color-pink-soft); border-top: none; margin-top: var(--space-sm); padding: var(--space-md) var(--space-md) var(--space-md) 2.4rem; border: var(--rule) var(--color-ultramarine); }
.stack-bonus::before { left: var(--space-sm); }
.price-block { margin-top: var(--space-xl); border-top: var(--rule) var(--color-ultramarine); padding-top: var(--space-lg); text-align: center; }
.deal-anchor { max-width: 32em; margin: 0 auto; opacity: 0.85; }
.price-note { display: block; margin-top: var(--space-lg); color: var(--color-brown); }
.price-row { display: flex; align-items: baseline; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-2xs); }
.price-now { font-size: clamp(3.4rem, 2.4rem + 4vw, 5rem); color: var(--color-ultramarine); }
.price-was { font-size: var(--text-h3); text-decoration: line-through; text-decoration-thickness: 3px; opacity: 0.55; }
.guarantee { margin-top: var(--space-lg); border: var(--rule) var(--color-ultramarine); padding: var(--space-lg); text-align: left; }
.guarantee .mono { color: var(--color-ultramarine); }
.guarantee p { margin-top: var(--space-xs); font-size: var(--text-body-lg); }
.deal-box .cta-row { margin-top: var(--space-lg); display: flex; justify-content: center; }
.deal-box .cta-row .btn { font-size: var(--text-body-lg); padding: 1em 2.6em; }

/* WHO strip */
.who h2 { font-size: var(--text-display-s); color: var(--color-ultramarine); }
.who .lead { max-width: 40em; margin-top: var(--space-md); font-size: var(--text-body-lg); }

.closer-note { margin-top: var(--space-md); color: var(--color-pink); }

/* mid-page CTAs + mobile sticky CTA bar (2026-07-20 mobile pass) */
.cta-mid { margin-top: var(--space-xl); display: flex; justify-content: center; }

/* ---- section rhythm: consistent ~192px visual gap between sections (2026-07-20 pass) ---- */
.bonus.section, .about.section, .deal.section, .faq.section, .kit.section { padding-top: var(--space-2xl); }

/* DEAL anchor line (value anchor above price) */
.deal-anchor { margin-top: var(--space-sm); max-width: 30em; opacity: 0.85; }

/* FAQ — butter surface, brown pop */
.faq { text-align: center; }
.faq h2 { font-size: var(--text-display-s); color: var(--color-ultramarine); }
.faq-list { margin: var(--space-xl) auto 0; max-width: 46rem; border-top: var(--rule) var(--color-ultramarine); text-align: left; }
.faq-item { border-bottom: var(--rule) var(--color-ultramarine); }
.faq-item summary { cursor: pointer; padding: var(--space-md) 0; font-weight: 700; font-size: var(--text-body-lg); list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); font-size: var(--text-body-lg); color: var(--color-brown); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 0 var(--space-md); max-width: 40em; }

/* ================= MOBILE (full pass) ================= */
@media (max-width: 860px) {
  /* tighter gutters everywhere */
  .section, .section-tight { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .page-hero { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .footer { padding-left: var(--space-lg); padding-right: var(--space-lg); }
  .nav { padding: var(--space-sm) var(--space-lg); }
  .nav .nav-links a:not([data-keep]) { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
  .mobile-menu.open { display: block; }
  /* 44px touch floors (rule #22) — desktop look unchanged */
  .nav .nav-links a.btn { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { min-height: 44px; padding: 0.6em 1.2em; }
  .footer .foot-links a, .guides .see-all { display: inline-block; padding-top: 12px; padding-bottom: 12px; }

  /* mobile copy variants swap in */
  .d-only { display: none; }
  .m-only { display: inline; }

  /* mobile type proportions: display headline UP, sub DOWN (her call 2026-07-20) */
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .hero .sub { font-size: var(--text-body); max-width: none; }

  /* hero = ONE block: tasks fall through the whole hero BEHIND the text and
     settle at the bottom; the heap climbs up to just under the buttons */
  .hero { grid-template-columns: 1fr; min-height: 0; position: relative; align-items: start; padding-bottom: 400px; /* the heap zone: tasks settle here, right under the CTAs */ }
  /* solid backing so a tall-settling task never shows through the ghost button */
  .hero .cta-row .btn-ghost { background: var(--color-paper); }
  .hero-note { display: none; }
  .hero-copy { grid-column: 1; grid-row: 1; max-width: none; padding: var(--space-xl) var(--space-lg) var(--space-lg); position: relative; z-index: 2; /* NO background — the fall must be visible behind the text */ }
  .pile-band { position: absolute; inset: 0; grid-column: auto; grid-row: auto; min-height: 0; z-index: 1; margin-left: 0; }
  /* fewer tasks than desktop, but enough that the heap reaches the CTA row */
  .pile-static .pill:nth-child(n+47) { display: none; }

  .cards-3, .steps, .grid-3 { grid-template-columns: 1fr; }
  .bonus-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .frags { grid-template-columns: 1fr; gap: var(--space-lg); }
  .price-row { gap: var(--space-sm); }
  .deal-box .cta-row .btn { width: 100%; text-align: center; }
  .card { border-right: none; border-bottom: var(--rule) var(--color-brown); }
  .card:last-child { border-bottom: none; }
  .steps { gap: var(--space-lg); }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .about .photo { max-width: 18rem; margin: 0 auto; }
  .example-row { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .ticker-track span { font-size: 1.1rem; }
}

@media (max-width: 480px) {
  .nav { gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); }
  .nav .brand { font-size: 0.85rem; }
  .nav .nav-links { gap: var(--space-sm); }
  .nav .nav-links a.btn { padding: 0.5em 0.9em; font-size: 0.8rem; white-space: nowrap; }
  /* narrower screen → slightly fewer tasks in the static fallback */
  .pile-static .pill:nth-child(n+35) { display: none; }
  .section, .section-tight, .page-hero, .footer { padding-left: var(--space-md); padding-right: var(--space-md); }
  .hero-copy { padding-left: var(--space-md); padding-right: var(--space-md); }
  /* full-width CTAs — no two-line buttons, no awkward side-by-side wrap */
  .hero .cta-row { grid-template-columns: 1fr; max-width: none; }
  .hero .cta-row .btn, .how .cta-row .btn { width: 100%; text-align: center; }
  .form-card { padding: var(--space-lg); }
  .form-card .field-row .btn, .flagship form .btn { width: 100%; text-align: center; }
}