/* ═══════════════════════════════════════════════════════════════
   The Amish Home Repair Manual — landing page
   Editorial almanac aesthetic. Warm cream throughout. Only THE MATH dark.
   Newsreader serif (editorial), Instrument Sans (small caps), JetBrains Mono (numbers).
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cream: #EEE7D0;
  --cream-2: #E7DFC4;
  --cream-3: #DFD5B5;
  --dark: #0F0806;
  --dark-2: #170D0A;
  --ink: #1B1108;
  --ink-2: #3B2B1E;
  --burgundy: #8A2418;
  --burgundy-2: #6B1810;
  --gold: #C4A64A;
  --hairline: rgba(27, 17, 8, 0.18);
  --hairline-strong: rgba(27, 17, 8, 0.35);
  --hairline-light: rgba(238, 231, 208, 0.2);
  --font-serif: 'Newsreader', 'PT Serif', Georgia, serif;
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--burgundy); text-decoration: none; }
a:hover { color: var(--burgundy-2); }
a:focus { outline: 2px solid var(--burgundy); outline-offset: 3px; }

em { font-style: italic; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 32px; }

/* ─── TOP BAR ─────────────────────────────────────────────── */
.top-bar {
  background: var(--dark);
  color: var(--cream);
  padding: 12px 0;
  border-bottom: 1px solid rgba(196, 166, 74, 0.15);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
}
.top-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.top-bar-left { color: rgba(238, 231, 208, 0.7); }
.top-bar-center {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(238, 231, 208, 0.75);
}
.top-bar-right { color: rgba(238, 231, 208, 0.7); }
.countdown-box {
  background: var(--burgundy);
  color: var(--cream);
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
  text-align: center;
}

/* ─── SECTIONS ────────────────────────────────────────────── */
.section-cream, .hero { background: var(--cream); color: var(--ink); padding: 100px 0; }
.section-dark { background: var(--dark); color: var(--cream); padding: 120px 0; }
/* Subtle alt-cream variant — deeper cream tone, dotted top/bottom edge
   for editorial rhythm without full contrast shift. Cards inside get
   pulled to base cream so they still pop against the section bg. */
.section-cream-alt {
  background: var(--cream-2);
  color: var(--ink);
  padding: 100px 0;
  border-top: 1px dotted var(--hairline);
  border-bottom: 1px dotted var(--hairline);
}
.section-cream-alt .qwin-card,
.section-cream-alt .fit-col { background: var(--cream); }
.hero { padding: 80px 0 90px 0; }

/* ─── EDITORIAL GRID (Roman numeral left, content right) ───── */
.ed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.ed-numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 44px;
  color: var(--burgundy);
  line-height: 1;
  margin-bottom: 6px;
}
.ed-numeral-gold { color: var(--gold); }
.ed-content { max-width: 1120px; }
.ed-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--burgundy);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ed-label-gold { color: var(--gold); }
.ed-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.5px;
  margin-bottom: 26px;
}
.ed-title-light { color: var(--cream); }
.ed-title em { color: var(--burgundy); font-style: italic; font-weight: 700; }
.ed-title-light em { color: var(--gold); }
.ed-body {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 720px;
}
.ed-body-light { color: rgba(238, 231, 208, 0.88); }

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
}
.hero-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.eyebrow-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--burgundy);
  text-transform: uppercase;
  flex: 1;
}
.eyebrow-tag {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--ink-2);
  text-transform: uppercase;
  opacity: 0.65;
}
.hero-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 780px;
}
.hero-title em {
  font-style: italic;
  font-weight: 700;
  color: var(--burgundy);
}
.italic-red { font-style: italic; color: var(--burgundy); font-weight: 700; }

.hero-body {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 34px;
  max-width: 600px;
  text-indent: 0;
}
.drop-cap {
  float: left;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 82px;
  line-height: 0.85;
  color: var(--burgundy);
  padding: 8px 12px 0 0;
  margin-top: -2px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 32px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  min-height: 60px;
  text-decoration: none;
}
.btn-primary {
  background: var(--burgundy);
  color: var(--cream);
  border-color: var(--burgundy);
}
.btn-primary:hover { background: var(--burgundy-2); color: var(--cream); border-color: var(--burgundy-2); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-cream {
  background: var(--cream);
  color: var(--burgundy);
  border-color: var(--cream);
}
.btn-cream:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-block { width: 100%; }

.hero-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 22px;
  align-items: flex-start;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  max-width: 620px;
}
.stat-sep { display: none; }
.stat-item { flex: 1 1 33%; min-width: 0; }
.stat-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--burgundy);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.stat-num sup { font-size: 20px; vertical-align: top; }
.stat-star {
  color: var(--gold);
  font-size: 30px;
  margin-left: 4px;
  font-style: normal;
  filter: drop-shadow(0 1px 2px rgba(196, 166, 74, 0.35));
}
.stat-num em { font-style: italic; }
.stat-lbl {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 2.5px;
  color: var(--ink);
  opacity: 0.6;
}

/* ─── HERO PORTRAIT ─────────────────────────────────────────── */
.hero-portrait { margin: 0; position: relative; max-width: 540px; margin-left: auto; }
.portrait-mat {
  background: var(--cream-2);
  padding: 18px 18px 22px 18px;
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 40px rgba(15, 8, 6, 0.12);
}
.portrait-mat-lg { padding: 22px 22px 26px 22px; }
.portrait-placeholder {
  aspect-ratio: 4 / 5;
  background: var(--dark);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.4;
}
/* Real portrait image inside the photo mat frame — crops to a
   4:5 portrait aspect. object-fit: cover fills the whole frame
   even if the source image is a different ratio. */
.portrait-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.portrait-pullquote {
  position: absolute;
  bottom: 30px;
  left: -20px;
  background: var(--cream);
  padding: 18px 22px 16px 22px;
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(15, 8, 6, 0.08);
  max-width: 280px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pq-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 40px;
  line-height: 0.7;
  color: var(--burgundy);
  flex-shrink: 0;
}
.pq-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.pq-text em { font-style: italic; }
.pq-attr {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--ink);
  opacity: 0.6;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION I. THE MANUAL — product block
   ═══════════════════════════════════════════════════════════════ */
.product-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  margin-top: 46px;
  align-items: start;
}
.product-cover {
  display: flex;
  justify-content: center;
}
/* Real book cover image — trade-paperback 2:3 aspect. The image
   itself sits inset with a cream "mat" around it so the outer
   2:3 container keeps the same footprint on screen but the
   actual cover reads a bit smaller inside a soft cream frame.
   Box-shadow stays on the outer border-box so it looks like the
   whole matted frame is sitting on the page. */
.cover-img {
  display: block;
  max-width: 480px;
  width: 100%;
  aspect-ratio: 2 / 3;
  padding: 14px;
  box-sizing: border-box;
  object-fit: contain;
  background: #F7F1DB;
  border-radius: 2px;
}
.cover-book {
  background: #0D2D1D;
  color: #E7DDB8;
  aspect-ratio: 2 / 3;
  max-width: 340px;
  width: 100%;
  padding: 20px 22px;
  border: 6px solid #3A2B18;
  outline: 1px solid rgba(196, 166, 74, 0.5);
  outline-offset: -14px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 8, 6, 0.4);
  font-family: var(--font-serif);
  position: relative;
}
.cover-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 8px;
  letter-spacing: 2px;
  color: #C4A64A;
  margin-top: 4px;
}
.cover-sub-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 10px;
  color: #C4A64A;
  margin: 4px 0 8px 0;
}
.cover-big {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: #E7DDB8;
  margin: 4px 0 6px 0;
  letter-spacing: -0.3px;
}
.cover-title-main {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 14px;
  color: #E7DDB8;
  line-height: 1.2;
  margin-bottom: 6px;
}
.cover-italic-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 9px;
  color: #C4A64A;
  line-height: 1.4;
  margin: 4px 0 8px 0;
}
.cover-photo-slot {
  flex: 1;
  background: #1A1A0F;
  color: #C4A64A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2px;
  min-height: 100px;
  margin: 4px 0;
}
.cover-bottom-line {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #C4A64A;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid rgba(196, 166, 74, 0.4);
}
.cover-footer {
  font-family: var(--font-sans);
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #C4A64A;
  opacity: 0.7;
  margin-top: 4px;
}

.product-info { min-width: 0; }
.product-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--burgundy);
  margin-bottom: 12px;
}
.product-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.22;
  color: var(--ink);
  margin-bottom: 18px;
}
.product-desc {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 640px;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.price-now {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 42px;
  color: var(--burgundy);
  line-height: 1;
}
.price-was {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  opacity: 0.5;
  text-decoration: line-through;
}
.price-tag {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--burgundy);
  text-transform: uppercase;
}

.value-header {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 2.5px;
  color: var(--ink);
  opacity: 0.75;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.value-list { list-style: none; padding: 0; margin: 0 0 4px 0; }
.value-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.v-text {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
}
.v-text strong { font-weight: 700; }
.v-price {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--ink);
  white-space: nowrap;
}

.value-totals { margin: 14px 0 24px 0; }
.vt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}
.vt-row-final {
  background: var(--cream-2);
  padding: 16px 18px;
  margin-top: 4px;
  border-radius: 2px;
}
.vt-num { font-weight: 700; }
.vt-num-final { color: var(--burgundy); font-style: italic; font-size: 24px; }

.under-btn {
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--ink);
  opacity: 0.65;
  margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION II. THE MATH (dark)
   ═══════════════════════════════════════════════════════════════ */
.math-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin: 40px 0 30px 0;
  padding-top: 20px;
}
.math-col { min-width: 0; }
.math-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(238, 231, 208, 0.25);
  margin-bottom: 16px;
}
.math-head-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--cream);
}
.math-head-sub {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: var(--gold);
}
.math-lines { list-style: none; padding: 0; margin: 0; }
.math-lines li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted rgba(238, 231, 208, 0.12);
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--cream);
}
.ml-item em {
  font-style: italic;
  opacity: 0.6;
  font-size: 14px;
  margin-left: 4px;
}
.ml-price {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--cream);
  white-space: nowrap;
}
.math-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 18px 0 6px 0;
  border-top: 1px solid rgba(238, 231, 208, 0.35);
  margin-top: 8px;
}
.mt-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--cream);
}
.mt-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 38px;
  color: var(--cream);
}
.math-total-gold .mt-label { color: var(--gold); }
.math-total-gold .mt-num { color: var(--gold); }
.math-source {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(238, 231, 208, 0.5);
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1.5;
}

.net-savings-line {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 44px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 19px;
  color: var(--burgundy);
}
.ns-bar {
  width: 3px;
  height: 20px;
  background: var(--burgundy);
  display: inline-block;
}

.sources-block {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(238, 231, 208, 0.15);
}
.sources-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--gold);
  margin-bottom: 12px;
}
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sources-list li {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(238, 231, 208, 0.7);
  padding: 4px 0;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION III. WHAT'S INSIDE — chapter cards
   ═══════════════════════════════════════════════════════════════ */
.chapter-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
.chap-card {
  background: var(--cream);
  border: 1px solid var(--hairline-strong);
  padding: 22px 24px 20px 24px;
  border-radius: 2px;
}
.chap-card-header {
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.chap-card-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--burgundy);
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px;
}
.chap-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
}
.chap-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.chap-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.ci-num {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--burgundy);
  min-width: 22px;
  flex-shrink: 0;
}
.ci-text { flex: 1; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════
   SECTION IV. TESTIMONIALS
   ═══════════════════════════════════════════════════════════════ */
.testimonial-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 40px;
}
.testi {
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  padding: 32px 26px 26px 26px;
  border-radius: 2px;
  position: relative;
}
.testi-quote-mark {
  position: absolute;
  top: 12px;
  left: 22px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 40px;
  color: var(--burgundy);
  line-height: 1;
}
.testi-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 4px;
  margin: 22px 0 14px 0;
}
.testi blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  border: none;
  padding: 0;
  margin: 0 0 18px 0;
}
.testi-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink);
  opacity: 0.9;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.testi-attr-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Full name in bold sans, easy to scan */
.ta-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
}
/* Role + city in mixed-case serif, slightly muted */
.ta-role {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 1px;
}
/* Star rating denominator — sits inline with ★★★★★ */
.testi-rating {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gold);
  margin-left: 6px;
  vertical-align: middle;
}
/* Circular avatar. If images/testi-*.jpg exists, it shows.
   If not, the img is hidden via onerror and the data-initial
   letter renders on top of a warm cream circle. Either way the
   layout doesn't shift. */
.testi-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cream-3);
  color: var(--burgundy);
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 24px;
  font-style: italic;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(15, 8, 6, 0.15);
}
.testi-avatar::before {
  content: attr(data-initial);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 1;
}
.testi-avatar img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* "Verified customer · Month Year" line — smaller than the name,
   normal-case, muted, sits directly under the attribution. Reads
   as a verification badge without shouting. */
.testi-verified {
  display: block;
  margin-top: 6px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-2);
  opacity: 0.7;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION V. ABOUT
   ═══════════════════════════════════════════════════════════════ */
.about-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
  margin-top: 20px;
}
.about-portrait { max-width: 380px; }
.about-pullquote {
  border-left: 3px solid var(--burgundy);
  background: var(--cream-2);
  padding: 20px 24px;
  margin: 28px 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink);
}
.watch-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--burgundy);
  text-transform: uppercase;
  margin-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION VII. FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq {
  margin-top: 32px;
  border-top: 1px solid var(--hairline);
  max-width: 780px;
}
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  padding: 22px 48px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 22px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  color: var(--ink);
  opacity: 0.5;
  transition: transform 0.15s ease;
  line-height: 1;
}
.faq-item[open] summary::after { content: '×'; opacity: 0.8; }
.faq-item summary:hover { color: var(--burgundy); }
.faq-answer {
  padding: 0 0 24px 0;
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.9;
  max-width: 720px;
}

/* ═══════════════════════════════════════════════════════════════
   LAST CALL
   ═══════════════════════════════════════════════════════════════ */
.last-call {
  text-align: center;
  padding: 120px 0;
}
.last-call-label { text-align: center; margin-bottom: 20px; }
.last-call-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 46px;
  line-height: 1.1;
  color: var(--cream);
  letter-spacing: -0.5px;
  margin-bottom: 22px;
}
.last-call-body {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.65;
  color: rgba(238, 231, 208, 0.85);
  max-width: 600px;
  margin: 0 auto 34px auto;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--dark);
  color: var(--cream);
  padding: 60px 0 40px 0;
  border-top: 1px solid rgba(196, 166, 74, 0.15);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
  padding-bottom: 30px;
}
.footer-left {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--cream);
  font-style: italic;
}
.footer-left em { font-style: italic; font-weight: 700; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
}
.footer-nav a {
  color: rgba(238, 231, 208, 0.7);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--gold); }
.footer-right {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(238, 231, 208, 0.6);
}
.footer-copyright {
  text-align: center;
  padding: 24px 20px 0 20px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 12px;
  color: rgba(238, 231, 208, 0.45);
  line-height: 1.65;
  max-width: 800px;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET (720px+)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  .ed-grid {
    grid-template-columns: 90px 1fr;
    gap: 30px;
  }
  .ed-numeral { font-size: 60px; margin-bottom: 0; }
  .ed-title { font-size: 46px; }
  .hero-title { font-size: 58px; }

  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: start;
  }

  .product-block { grid-template-columns: 460px 1fr; gap: 56px; }

  .math-grid { grid-template-columns: 1fr 1fr; gap: 40px; }

  .chapter-grid { grid-template-columns: 1fr 1fr; gap: 22px; }

  .testimonial-row { grid-template-columns: 1fr 1fr 1fr; }

  .about-layout { grid-template-columns: 340px 1fr; gap: 50px; }

  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }

  .last-call-title { font-size: 52px; }
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP (1000px+)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1000px) {
  .ed-grid { grid-template-columns: 120px 1fr; gap: 44px; }
  .ed-numeral { font-size: 74px; }
  .ed-title { font-size: 52px; }
  .hero-title { font-size: 66px; }

  .section-cream { padding: 130px 0; }
  .section-cream-alt { padding: 130px 0; }
  .section-dark { padding: 140px 0; }

  .chap-card { padding: 26px 28px 22px 28px; }
}

/* ═══════════════════════════════════════════════════════════════
   FIRST-WEEKEND QUICK WINS — proof of the $47 payback claim
   Three fixes, each with real materials/time/bill-drop numbers.
   ═══════════════════════════════════════════════════════════════ */
.qwin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 40px 0 32px 0;
}
.qwin-card {
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  padding: 22px 24px 20px 24px;
  border-radius: 2px;
}
.qwin-num {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--burgundy);
  font-weight: 700;
}
.qwin-chap {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  margin-top: 4px;
}
.qwin-title {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  margin: 12px 0 16px 0;
}
.qwin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.qwin-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
  font-size: 16px;
  color: var(--ink-2);
}
.qwin-list li span:first-child {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  align-self: center;
}
.qwin-list li span:last-child {
  font-family: var(--font-serif);
  color: var(--ink);
  text-align: right;
}
.qwin-list li span em {
  color: var(--burgundy);
  font-weight: 700;
  font-style: italic;
}
.qwin-payoff {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding: 18px 0 16px 0;
  margin-top: 12px;
}
.qwin-payoff-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}
.qwin-payoff-line em {
  color: var(--burgundy);
  font-weight: 800;
  font-style: italic;
  font-size: 32px;
}
.qwin-payoff-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  margin-top: 12px;
  line-height: 1.55;
}
@media (min-width: 720px) {
  .qwin-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   GUARANTEE CARD — sits right under the primary CTA. Risk reversal.
   Round wax-seal style number on the left, promise text on right.
   ═══════════════════════════════════════════════════════════════ */
.guarantee-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--burgundy);
  border-radius: 2px;
}
.gc-seal {
  flex-shrink: 0;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--burgundy);
  color: var(--cream);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 3px var(--cream-2), inset 0 0 0 4px var(--burgundy);
}
.gc-seal-inner { text-align: center; line-height: 1; }
.gc-seal-num {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 800;
}
.gc-seal-lbl {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  margin-top: 2px;
}
.gc-body { flex: 1; }
.gc-title {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.gc-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.gc-sig {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   HONEST GATE — "buy this if" / "skip it if" two-column trust block
   ═══════════════════════════════════════════════════════════════ */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
.fit-col {
  padding: 24px 26px 22px 26px;
  background: var(--cream-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.fit-yes { border-top: 4px solid #2E6B3A; }
.fit-no  { border-top: 4px solid var(--burgundy); }
.fit-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.fit-check, .fit-x {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: 14px;
}
.fit-check { background: #2E6B3A; }
.fit-x { background: var(--burgundy); }
.fit-head-txt {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 700;
}
.fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fit-list li {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px dotted var(--hairline);
}
.fit-list li:last-child { border-bottom: none; }
@media (min-width: 720px) {
  .fit-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   AFTER-BUY strip — "what happens next" under the final dark CTA.
   Reassures the buyer right at the click.
   ═══════════════════════════════════════════════════════════════ */
.after-buy {
  list-style: none;
  padding: 0;
  margin: 28px auto 0 auto;
  max-width: 620px;
  display: grid;
  gap: 8px;
  text-align: left;
}
.after-buy li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--cream);
  opacity: 0.9;
}
.ab-num {
  font-family: var(--font-serif);
  color: var(--gold);
  font-weight: 700;
  min-width: 22px;
}
.ab-txt { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════
   LIVE READER STRIP — thin band under the top bar. Red pulsing
   dot plus a number that flashes and springs when it changes.
   ═══════════════════════════════════════════════════════════════ */
.live-strip {
  background: var(--dark);
  color: var(--cream);
  padding: 9px 16px;
  text-align: center;
  border-top: 1px solid rgba(196, 166, 74, 0.15);
  border-bottom: 1px solid rgba(196, 166, 74, 0.15);
}
.live-readers {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.live-dot {
  display: inline-block;
  width: 9px; height: 9px;
  background: #E13D3D;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(225, 61, 61, 0.55);
  animation: liveDotPulse 1.7s ease-out infinite;
}
@keyframes liveDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(225, 61, 61, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(225, 61, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(225, 61, 61, 0); }
}
.live-num {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  display: inline-block;
  min-width: 28px;
  text-align: center;
  transform-origin: center;
}
.live-num.is-updating {
  animation: liveNumFlip 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes liveNumFlip {
  0%   { transform: translateY(0)    scale(1);    opacity: 1; }
  40%  { transform: translateY(-9px) scale(0.85); opacity: 0; }
  50%  { transform: translateY(8px)  scale(0.85); opacity: 0; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}
.live-lbl { opacity: 0.78; font-weight: 500; }

/* ═══════════════════════════════════════════════════════════════
   BUYER TOAST — dark card, gold circle avatar with initial,
   green side stripe. Slides in from the left, sits ~6s, fades.
   ═══════════════════════════════════════════════════════════════ */
.toast-stack {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 55;
  pointer-events: none;
  width: 360px;
  max-width: calc(100vw - 40px);
}
.toast {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #1a1310;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid #4EA86B;
  border-radius: 14px;
  padding: 14px 18px 14px 15px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: var(--cream);
  opacity: 0;
  transform: translate3d(-24px, 8px, 0) scale(0.96);
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1.2, 0.36, 1);
  will-change: opacity, transform;
  pointer-events: auto;
}
.toast.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.toast.is-leaving {
  opacity: 0;
  transform: translate3d(-14px, 0, 0) scale(0.97);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.36, 0, 0.66, -0.56);
}
.toast-avatar {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #D4B155 0%, #B8963F 100%);
  color: #241812;
  display: grid; place-items: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 22px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.32;
  min-width: 0;
}
.toast-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-action {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: rgba(238, 231, 208, 0.72);
}
.toast-action em {
  color: var(--gold);
  font-style: normal;
  font-weight: 600;
}
.toast-ago {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: rgba(238, 231, 208, 0.4);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .toast-stack {
    left: 12px;
    right: 12px;
    width: auto;
    bottom: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL METRIC — big % number and "bill reduction" label
   at the top of each testimonial card. Draws the eye first.
   ═══════════════════════════════════════════════════════════════ */
.testi-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}
.tm-num {
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 44px;
  color: var(--burgundy);
  line-height: 1;
  font-style: italic;
  white-space: nowrap;
}
/* Text-heavy metrics like "6 WEEKS" render smaller so they align
   with the visual weight of numeric ones like $202 / $920. */
.testi-metric:has(.tm-num:not(:has(*))) .tm-num { }
.tm-num.tm-num-text { font-size: 32px; }
.tm-lbl {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  font-weight: 700;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════
   Section I outro — a small italic transition line. No button here.
   The hero CTA already jumps straight to the order block, so the
   pitch just needs a soft handoff into the evidence sections.
   ═══════════════════════════════════════════════════════════════ */
.section-i-outro {
  margin: 34px 0 0 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 520px;
}

/* ═══════════════════════════════════════════════════════════════
   Payment methods + refund strip under the Section VIII buy button.
   Subtle, small-caps, wraps gracefully on narrow screens. The lock
   glyph anchors the "SECURE CHECKOUT" label.
   ═══════════════════════════════════════════════════════════════ */
.pay-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 14px;
  padding: 14px 8px;
  border-top: 1px dotted var(--hairline);
  border-bottom: 1px dotted var(--hairline);
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  text-transform: uppercase;
}
.pb-lock {
  font-size: 12px;
  margin-right: 2px;
  opacity: 0.75;
}
.pb-item { font-weight: 600; }
.pb-sep {
  opacity: 0.35;
  font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════
   Hero video-continuity line — one italic line right below the
   eyebrow, above the title. Reads to a warm viewer as "yes, this
   is the book from the video you just watched." Tiny copy tweak,
   real conversion signal for video-source traffic.
   ═══════════════════════════════════════════════════════════════ */
.hero-video-continuity {
  margin: 6px 0 12px 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.4;
  color: var(--burgundy);
  font-style: italic;
  letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   Hero mini buy card — floats under the portrait in the hero
   right column. Puts price + buy CTA above the fold for warm
   traffic that arrived from the video. Full offer stack lives in
   Section I for buyers who want to see the value list first.
   Whole card is a link.
   ═══════════════════════════════════════════════════════════════ */
.hero-buy-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 22px;
  background: var(--dark);
  color: var(--cream);
  border: 1px solid var(--dark-2);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(15, 8, 6, 0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-buy-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 8, 6, 0.32);
  color: var(--cream);
}
.hbc-left {
  flex: 1;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hbc-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 600;
}
.hbc-title {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cream);
}
.hbc-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.hbc-now {
  font-family: var(--font-serif);
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  color: var(--gold);
}
.hbc-was {
  font-family: var(--font-serif);
  font-size: 13px;
  text-decoration: line-through;
  opacity: 0.55;
}
.hbc-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--cream);
  opacity: 0.7;
  margin-left: 2px;
}
.hbc-cta {
  background: var(--burgundy);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--cream);
  min-width: 100px;
  justify-content: center;
  transition: background 0.18s ease;
}
.hero-buy-card:hover .hbc-cta { background: var(--burgundy-2); }
.hbc-cta-arrow { font-size: 15px; }
@media (max-width: 720px) {
  .hero-buy-card { margin-top: 16px; }
  .hbc-title { font-size: 15px; }
  .hbc-now { font-size: 20px; }
  .hbc-cta { min-width: 82px; padding: 0 14px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   SAMPLE CHAPTER PREVIEW — styled to look like an actual printed
   page lifted from the book. Kills the "is this AI slop?" doubt.
   Header rule with part-label + page number, chapter title in
   book-style caps, drop-cap opener, three real paragraphs, then
   a fade-out to imply the chapter keeps going.
   ═══════════════════════════════════════════════════════════════ */
.sample-wrap {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid var(--hairline);
}
.sample-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--burgundy);
  font-weight: 700;
  margin-bottom: 10px;
}
.sample-headline {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px 0;
}
.sample-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 0 32px 0;
}
.sample-page {
  position: relative;
  background: #F7F1DB;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 60px rgba(15, 8, 6, 0.15), 0 4px 12px rgba(15, 8, 6, 0.08);
  padding: 44px 38px 60px 38px;
  max-width: 640px;
  overflow: hidden;
  border-radius: 2px;
}
.sample-page-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--hairline);
}
.sample-part {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  font-weight: 600;
}
.sample-pgnum {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-2);
}
.sample-chap-title {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 28px 0;
  letter-spacing: -0.01em;
}
.sample-lead {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin: 0 0 20px 0;
}
.sample-p {
  font-family: var(--font-serif);
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0 0 18px 0;
  hyphens: auto;
}
.sample-close { margin-bottom: 0; }
.sample-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 90px;
  background: linear-gradient(180deg, rgba(247, 241, 219, 0) 0%, #F7F1DB 78%);
  pointer-events: none;
}
.sample-cap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 700px;
  margin: 22px 0 0 0;
}
@media (min-width: 720px) {
  .sample-page { padding: 56px 60px 72px 60px; }
  .sample-chap-title { font-size: 34px; }
  .sample-lead { font-size: 22.5px; }
  .sample-p { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE POLISH ( <= 720px )
   ---------------------------------------------------------------
   Most visitors will land here from a video CTA on a phone. This
   block tightens every section for narrow viewports: type sizes,
   paddings, stacking, and touch-target minimums. Grouped by page
   region top-to-bottom so it's easy to scan.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* Container tighter side padding, section vertical breathing room
     halved so scrolling isn't endless on a small screen. */
  .container { padding: 0 16px; }
  .section-cream, .section-cream-alt { padding: 60px 0; }
  .section-dark { padding: 68px 0; }
  /* Hero on mobile: tight top padding so the portrait + title both
     sit above the fold on first paint. */
  .hero { padding: 22px 0 44px 0; }

  /* Top bar on mobile: strip decorative side labels, only the
     countdown (urgency signal) needs the real estate. Matches
     competitor's mobile treatment. */
  .top-bar { padding: 12px 0; font-size: 11px; letter-spacing: 2px; }
  .top-bar-inner {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    text-align: center;
  }
  .top-bar-left, .top-bar-right { display: none; }
  .top-bar-center { gap: 10px; justify-content: center; }
  .countdown-box { font-size: 13px; padding: 4px 10px; }

  /* Live reader strip: smaller type, tighter padding. Red dot stays
     the same size so the pulse still reads. */
  .live-strip { padding: 7px 14px; }
  .live-readers { gap: 8px; font-size: 12px; letter-spacing: 0.14em; }
  .live-num { font-size: 13px; min-width: 24px; }

  /* Hero on mobile — competitor pattern: big portrait first, then a
     "NAME —————— TAG" horizontal-rule divider, then the title. Warm
     traffic lands, sees the face they know from the video, scrolls
     into the eyebrow line + title. */
  /* Tight gap so the portrait + title read as one unit, both
     visible above the fold on first paint. */
  .hero-grid { display: flex; flex-direction: column; gap: 14px; }
  .hero-right { order: -1; margin: 0 -4px; }  /* portrait first, slight bleed */
  .hero-video-continuity { font-size: 15px; margin: 2px 0 8px 0; }
  .hero-title { font-size: 34px; letter-spacing: -0.4px; margin-bottom: 18px; line-height: 1.08; }
  .hero-body { font-size: 18.5px; font-weight: 500; line-height: 1.6; margin-bottom: 26px; }
  .drop-cap { font-size: 46px; line-height: 0.9; margin: 4px 9px -2px 0; }

  /* Eyebrow becomes an inline horizontal-rule divider on mobile.
     Name on the left, thin cream/brown line stretching across the
     middle, tag on the right. The line uses ::after positioned by
     flex `order` (0 name / 1 line / 2 tag). */
  .hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 0;
    border-bottom: none;
    margin: 8px 0 22px 0;
    font-size: 11.5px;
  }
  .eyebrow-name { flex: 0 0 auto; order: 0; }
  .eyebrow-tag { flex: 0 0 auto; order: 2; }
  .hero-eyebrow::after {
    content: '';
    order: 1;
    flex: 1 1 auto;
    height: 1px;
    background: var(--hairline-strong);
    min-width: 24px;
    align-self: center;
  }

  .hero-buttons { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn {
    padding: 20px 24px;
    font-size: 14px;
    letter-spacing: 0.22em;
    font-weight: 600;
    justify-content: center;
    text-align: center;
    min-height: 60px;
  }

  /* Hero stats stacked vertically on mobile — matches competitor's
     layout. Each row takes full width with a hairline between so
     each stat gets its own space and reads big. Star is burgundy
     (matching competitor + your book cover accent), not gold. */
  .hero-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
    padding-bottom: 4px;
    border-top: 1px solid var(--hairline);
  }
  .stat-item {
    flex: 1 1 100%;
    min-width: 0;
    padding: 20px 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
  }
  .stat-item:last-child { border-bottom: none; }
  .stat-num {
    font-size: 36px;
    margin-bottom: 8px;
    letter-spacing: -0.4px;
  }
  .stat-num sup { font-size: 20px; }
  .stat-star {
    font-size: 30px;
    color: var(--burgundy);
    margin-left: 4px;
    filter: none;
  }
  .stat-lbl {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin-top: 4px;
    line-height: 1.3;
    opacity: 0.7;
  }
  .stat-sep { display: none; }

  /* Portrait capped at 300px wide + centered so the hero title
     sits right below it on the same first paint. Buyer lands and
     sees BOTH the face and the hook without scrolling. */
  .hero-portrait { max-width: 300px; margin: 0 auto; }
  .portrait-mat { padding: 6px; }
  .portrait-pullquote { display: none; }

  /* Editorial grid: numeral stacks above content, smaller. */
  .ed-grid { gap: 8px; }
  .ed-numeral { font-size: 42px; margin-bottom: 6px; }
  .ed-label { font-size: 11px; letter-spacing: 0.2em; }
  .ed-title { font-size: 31px; line-height: 1.12; letter-spacing: -0.3px; margin-bottom: 18px; }
  .ed-body { font-size: 18.5px; font-weight: 500; line-height: 1.6; }

  /* Product block: cover centered above product-info, tighter
     price row, value list rows readable at narrow widths. */
  .product-block { gap: 22px; margin-top: 30px; }
  .product-cover { justify-content: center; }
  .cover-img { max-width: 400px; width: 100%; }
  .product-eyebrow { font-size: 12px; letter-spacing: 0.14em; }
  .product-title { font-size: 25px; line-height: 1.22; margin: 8px 0 14px 0; }
  .product-desc { font-size: 17px; font-weight: 500; line-height: 1.6; }

  .price-row { flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
  .price-now { font-size: 42px; }
  .price-was { font-size: 20px; }
  .price-tag { font-size: 12px; letter-spacing: 0.12em; }

  .value-header { font-size: 11px; letter-spacing: 0.18em; margin: 22px 0 10px 0; }
  .value-list li { gap: 12px; padding: 12px 0; align-items: flex-start; }
  .v-text { font-size: 16px; font-weight: 500; line-height: 1.55; }
  .v-price { font-size: 16px; min-width: 46px; text-align: right; }
  .value-totals { margin-top: 8px; }
  .vt-row { font-size: 17px; padding: 12px 0; }
  .vt-num-final em, .vt-row-final em { font-size: 24px; }

  .btn-block { padding: 22px 24px; font-size: 15px; letter-spacing: 0.16em; min-height: 64px; font-weight: 700; }
  .under-btn { font-size: 11px; letter-spacing: 0.16em; margin-top: 12px; }

  /* Payment badges: shrink and let them wrap cleanly. */
  .pay-badges { gap: 4px 8px; font-size: 11.5px; letter-spacing: 0.1em; padding: 12px 4px; }

  /* Guarantee card stacks the seal above the body. */
  .guarantee-card { flex-direction: column; gap: 16px; padding: 20px 20px; margin-top: 20px; }
  .gc-seal { width: 68px; height: 68px; }
  .gc-seal-num { font-size: 28px; }
  .gc-seal-lbl { font-size: 9px; }
  .gc-title { font-size: 18px; }
  .gc-text { font-size: 15.5px; font-weight: 500; line-height: 1.55; }
  .gc-sig { font-size: 14px; }

  /* THE MATH: single-column stacked. Bigger line items to match
     competitor's readable feel on mobile. */
  .math-grid { gap: 30px; margin-top: 30px; }
  .math-head-title { font-size: 19px; font-weight: 700; }
  .math-head-sub { font-size: 10.5px; }
  .math-lines li { padding: 12px 0; align-items: center; }
  .ml-item { font-size: 16.5px; font-weight: 500; line-height: 1.4; }
  .ml-item em { font-size: 14px; }
  .ml-price { font-size: 17px; font-weight: 500; }
  .math-total { padding: 14px 0 8px 0; }
  .mt-label { font-size: 11.5px; letter-spacing: 2.5px; }
  .mt-num em { font-size: 32px; }
  .net-savings-line { font-size: 17px; padding: 16px 18px; margin-top: 30px; text-align: center; }
  .sources-block { margin-top: 32px; padding-top: 22px; }
  .sources-label { font-size: 11px; }
  .sources-list li { font-size: 14.5px; }

  /* Reader Results testimonials — 1 column, less padding. */
  .testimonial-row { gap: 16px; margin-top: 28px; }
  .testi { padding: 26px 20px 20px 20px; }
  .testi-quote-mark { font-size: 36px; top: 8px; left: 16px; }
  .testi-metric { margin-top: 8px; margin-bottom: 16px; padding-bottom: 14px; }
  .tm-num { font-size: 38px; }
  .tm-lbl { font-size: 11px; }
  .testi-stars { font-size: 16px; letter-spacing: 5px; margin: 20px 0 12px 0; color: var(--gold); }
  .testi blockquote { font-size: 16.5px; font-weight: 500; line-height: 1.6; margin-bottom: 16px; }
  .testi-attr { font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; padding-top: 14px; }

  /* Quick Wins cards */
  .qwin-grid { gap: 14px; margin: 32px 0 28px 0; }
  .qwin-card { padding: 20px 20px 18px 20px; }
  .qwin-num { font-size: 13px; }
  .qwin-chap { font-size: 12px; }
  .qwin-title { font-size: 21px; margin: 10px 0 14px 0; }
  .qwin-list li { font-size: 15px; font-weight: 500; padding: 8px 0; }
  .qwin-list li span:first-child { font-size: 11.5px; }
  .qwin-payoff { padding: 16px 0 14px 0; }
  .qwin-payoff-line { font-size: 18px; }
  .qwin-payoff-line em { font-size: 26px; }
  .qwin-payoff-note { font-size: 15.5px; font-weight: 500; }

  /* Chapter grid: cards stack (already 1-col by default), tighten. */
  .chapter-grid { gap: 16px; margin-top: 26px; }
  .chap-card { padding: 20px 20px 18px 20px; }
  .chap-card-label { font-size: 10.5px; letter-spacing: 0.14em; }
  .chap-card-title { font-size: 18.5px; line-height: 1.25; margin: 6px 0 12px 0; }
  .chap-list li { font-size: 15px; font-weight: 500; line-height: 1.45; padding: 7px 0; }
  .ci-num { font-size: 11.5px; min-width: 20px; }

  /* Sample chapter page: keep the printed-page look but slimmer. */
  .sample-wrap { margin-top: 46px; padding-top: 36px; }
  .sample-headline { font-size: 28px; margin-bottom: 10px; }
  .sample-sub { font-size: 16px; margin-bottom: 24px; }
  .sample-page { padding: 32px 24px 50px 24px; }
  .sample-page-hd { padding-bottom: 12px; margin-bottom: 22px; }
  .sample-part { font-size: 11px; letter-spacing: 0.2em; }
  .sample-pgnum { font-size: 14px; }
  .sample-chap-title { font-size: 25px; margin-bottom: 24px; }
  .sample-lead { font-size: 18.5px; margin-bottom: 16px; }
  .sample-p { font-size: 16.5px; font-weight: 500; line-height: 1.7; margin-bottom: 16px; }
  .sample-fade { height: 74px; }
  .sample-cap { font-size: 15px; }

  /* About section: portrait above text, tighter type. */
  .about-layout { gap: 28px; }
  .about-portrait { max-width: 280px; margin: 0 auto; }
  .portrait-mat-lg { padding: 12px 12px 16px 12px; }
  .about-text .ed-title { font-size: 32px; }
  .about-pullquote { font-size: 18px; font-weight: 500; padding: 16px 18px; margin-top: 20px; line-height: 1.55; }
  .watch-link { font-size: 13px; letter-spacing: 0.14em; margin-top: 22px; }

  /* Honest gate fit-cols */
  .fit-grid { gap: 14px; margin-top: 26px; }
  .fit-col { padding: 20px 18px 18px 18px; }
  .fit-head-txt { font-size: 12px; letter-spacing: 0.14em; }
  .fit-list li { font-size: 16px; font-weight: 500; line-height: 1.55; padding: 8px 0; }

  /* FAQ */
  .faq-item summary { font-size: 17px; padding: 18px 8px; }
  .faq-answer { font-size: 16px; font-weight: 500; line-height: 1.6; padding: 0 8px 18px 8px; }

  /* Last call closer */
  .last-call { padding: 60px 0 68px 0; }
  .last-call-label { margin-bottom: 12px; }
  .last-call-title { font-size: 34px; line-height: 1.12; margin-bottom: 16px; }
  .last-call-body { font-size: 17px; font-weight: 500; margin-bottom: 26px; }
  .after-buy { margin-top: 22px; }
  .after-buy li { font-size: 15.5px; font-weight: 500; }
  .ab-num { min-width: 18px; }
  .btn-cream { padding: 16px 22px; font-size: 12.5px; min-height: 52px; }

  /* Footer */
  .footer { padding: 26px 0 28px 0; }
  .footer-inner { flex-direction: column; text-align: center; gap: 12px; padding: 0 16px; }
  .footer-nav { flex-wrap: wrap; justify-content: center; gap: 10px 16px; font-size: 10.5px; }
  .footer-copyright { font-size: 11px; padding: 18px 16px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ULTRA-NARROW ( <= 380px ) — Galaxy Fold closed, iPhone SE 1st gen,
   Galaxy S8 in "high density" mode. Text scales down one more step
   and the value list rows wrap so long dollar strings never
   overflow to the right of the price column.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  .container { padding: 0 13px; }

  .top-bar { font-size: 9.5px; letter-spacing: 1.2px; }
  .top-bar-left, .top-bar-right { font-size: 9px; }
  .countdown-box { font-size: 11px; padding: 3px 7px; }

  .live-readers { font-size: 9.5px; letter-spacing: 0.12em; }

  .hero-title { font-size: 33px; letter-spacing: -0.3px; }
  .hero-body { font-size: 16px; }
  .drop-cap { font-size: 40px; margin-right: 7px; }

  .hero-stats { gap: 6px; }
  .stat-num { font-size: 17px; }
  .stat-lbl { font-size: 7.5px; }

  /* Ultra-narrow keeps portrait at 100% too (competitor-style
     full-bleed) but with a slightly thinner side bleed */
  .hero-right { margin: 0 -2px; }

  .ed-numeral { font-size: 38px; }
  .ed-title { font-size: 27px; letter-spacing: -0.2px; }
  .ed-body { font-size: 15.5px; }

  .cover-img { max-width: 340px; width: 100%; }
  .product-title { font-size: 20px; }
  .product-desc { font-size: 14px; }
  .price-now { font-size: 34px; }
  .price-was { font-size: 16px; }

  /* Wrap value-list rows so the price drops below the description
     on very narrow screens — the flexbox row can't fit both */
  .value-list li { flex-wrap: wrap; }
  .v-text { flex: 1 1 100%; font-size: 13.5px; }
  .v-price { margin-top: 2px; text-align: right; width: 100%; font-size: 14px; }
  .vt-num-final em, .vt-row-final em { font-size: 20px; }

  .pay-badges { font-size: 8.5px; letter-spacing: 0.08em; gap: 3px 6px; }

  .gc-title { font-size: 14.5px; }
  .gc-text { font-size: 12.5px; }

  .qwin-card { padding: 16px 15px 14px; }
  .qwin-title { font-size: 17px; }
  .qwin-list li { font-size: 12.5px; }
  .qwin-payoff-line { font-size: 15px; }
  .qwin-payoff-line em { font-size: 20px; }

  .chap-card { padding: 18px 16px 14px; }
  .chap-card-title { font-size: 16px; }
  .chap-list li { font-size: 12.5px; }
  .ci-num { min-width: 18px; }

  .sample-page { padding: 26px 18px 42px; }
  .sample-chap-title { font-size: 19px; margin-bottom: 18px; }
  .sample-lead { font-size: 15px; }
  .sample-p { font-size: 13.5px; line-height: 1.65; }
  .sample-fade { height: 60px; }

  .tm-num { font-size: 26px; }
  .testi blockquote { font-size: 13.5px; }
  .testi { padding: 24px 18px 18px; }

  .fit-col { padding: 18px 15px; }
  .fit-list li { font-size: 13.5px; }

  .about-portrait { max-width: 210px; }
  .about-text .ed-title { font-size: 26px; }

  .last-call-title { font-size: 28px; }
  .last-call-body { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   LANDSCAPE PHONES — phones rotated (short-height, wider). Fold
   the hero into two columns so the portrait doesn't push the CTA
   button below the fold, and squish section paddings so users see
   real content on the first screen.
   ═══════════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-grid { grid-template-columns: 1.2fr 0.8fr; gap: 22px; align-items: center; }
  .hero-portrait { max-width: 240px; }
  .hero-title { font-size: 28px; margin-bottom: 12px; }
  .hero-body { font-size: 14.5px; margin-bottom: 16px; }
  .hero-buttons { flex-direction: row; gap: 8px; }
  .hero-stats { padding-top: 14px; gap: 6px; }
  .section-cream, .section-cream-alt, .hero { padding: 42px 0; }
  .section-dark { padding: 48px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   TABLET PORTRAIT ( 721px - 1024px ) — iPad Mini, iPad 10.2,
   Galaxy Tab in portrait, iPad Pro portrait. The existing 720px+
   styles kick in with 2-column grids, but the type and paddings
   are tuned for full desktop. Here we keep the layout but pull
   type sizes down half a step and section padding shorter for a
   comfortable read on a hand-held tablet.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 721px) and (max-width: 1024px) {
  .container { padding: 0 32px; }
  .section-cream, .hero, .section-cream-alt { padding: 82px 0; }
  .section-dark { padding: 94px 0; }

  .hero-grid { gap: 44px; }
  .hero-title { font-size: 52px; }
  .hero-body { font-size: 20px; font-weight: 500; }
  .ed-title { font-size: 42px; }
  .ed-body { font-size: 20px; font-weight: 500; }

  /* Bigger product cover on tablet + heavier body copy */
  .cover-img { max-width: 420px; }
  .product-block { grid-template-columns: 400px 1fr; gap: 44px; }
  .product-title { font-size: 26px; }
  .product-desc { font-size: 18px; font-weight: 500; }
  .v-text { font-size: 17px; font-weight: 500; }
  .v-price { font-size: 17px; }
  .vt-row { font-size: 18px; }

  .about-layout { grid-template-columns: 320px 1fr; gap: 44px; }

  .qwin-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .qwin-title { font-size: 22px; }
  .qwin-list li { font-size: 15px; font-weight: 500; }

  .fit-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .fit-list li { font-size: 17px; font-weight: 500; }

  .chapter-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .chap-card-title { font-size: 19px; }
  .chap-list li { font-size: 15.5px; font-weight: 500; }

  .testimonial-row { grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
  .testi blockquote { font-size: 17px; font-weight: 500; }
  .testi-attr { font-size: 12px; font-weight: 600; }
  .tm-num { font-size: 42px; }
  .testi-stars { font-size: 16px; color: var(--gold); }

  .ml-item { font-size: 17px; font-weight: 500; }
  .ml-price { font-size: 17px; }
  .math-head-title { font-size: 18px; }
  .mt-num em { font-size: 34px; }
  .net-savings-line { font-size: 18px; }

  /* Tablet portrait: same vertical stack pattern as mobile —
     stacked full-width rows with hairlines, big prominent numbers.
     Reads like his page — clean, spacious, no cramping. */
  .hero-stats {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 10px;
    max-width: 500px;
    border-top: 1px solid var(--hairline);
  }
  .stat-item {
    flex: 1 1 100%;
    padding: 22px 0;
    border-bottom: 1px solid var(--hairline);
    text-align: left;
  }
  .stat-item:last-child { border-bottom: none; }
  .stat-num { font-size: 40px; letter-spacing: -0.5px; margin-bottom: 8px; }
  .stat-num sup { font-size: 22px; }
  .stat-star { font-size: 32px; color: var(--burgundy); filter: none; margin-left: 4px; }
  .stat-lbl { font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; opacity: 0.7; }

  .sample-headline { font-size: 30px; }
  .sample-sub { font-size: 16px; }

  .faq-item summary { padding: 18px 8px; font-size: 18px; }
  .faq-answer { font-size: 16.5px; font-weight: 500; }

  .last-call-title { font-size: 42px; }
  .last-call-body { font-size: 18px; font-weight: 500; }
  .after-buy li { font-size: 16.5px; font-weight: 500; }

  /* Bigger tap targets on tablet — fingers, not mice */
  .btn { min-height: 62px; padding: 20px 28px; font-size: 14px; font-weight: 600; }
  .btn-block { min-height: 68px; padding: 22px 28px; font-size: 15.5px; font-weight: 700; letter-spacing: 0.14em; }
}


/* ═══════════════════════════════════════════════════════════════
   Hi-DPI RETINA polish — thin hairlines that render slightly
   fuzzy on standard displays get one crisp pixel on retina.
   ═══════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .top-bar { border-bottom-width: 0.5px; }
  .chap-card, .qwin-card, .fit-col, .testi { border-width: 0.5px; }
}

/* ══════════════════════════════════════════════════════════════
   HERO TRUST LINE
   Small italic social-proof line under the hero-stats row.
   ══════════════════════════════════════════════════════════════ */
.hero-trust {
  margin: 22px 0 0 0;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: 0.005em;
  opacity: 0.88;
}
.hero-trust strong {
  color: var(--burgundy);
  font-weight: 700;
  font-style: normal;
}
@media (max-width: 720px) {
  .hero-trust { font-size: 14px; margin-top: 18px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   NET SAVINGS SUB-NOTE (math section)
   Small italic caveat under the big net-savings-line.
   ══════════════════════════════════════════════════════════════ */
.ns-sub {
  max-width: 620px;
  margin: 16px auto 0;
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
  opacity: 0.82;
}
@media (max-width: 720px) {
  .ns-sub { font-size: 14px; padding: 0 4px; margin-top: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   STICKY MOBILE BUY BAR
   Slides up from bottom after ~500px scroll on mobile. Hidden on
   desktop. Uses backdrop-blur cream tint so it doesn't feel jammed
   on top of the editorial content behind it. Auto-hides again as
   the reader nears the LAST CALL section where the primary buy
   button already lives.
   ══════════════════════════════════════════════════════════════ */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(238, 231, 208, 0.94);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(27, 17, 8, 0.10);
  /* translate3d forces a GPU compositor layer so iOS Safari doesn't
     lose track of the hit-test area during transitions (which was
     causing the first-tap-does-nothing bug on fixed + backdrop-filter). */
  transform: translate3d(0, 110%, 0);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  /* pointer-events NOT toggled — the button is physically off-screen
     when hidden (translated 110% below viewport) so it can't be tapped
     accidentally. Toggling pointer-events at the same instant as the
     transform starts is what makes iOS drop the first tap. */
  display: none;
}
.sticky-cta.is-visible {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.sticky-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px 20px;
  background: var(--burgundy);
  color: #F7F1DB;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(107, 24, 16, 0.28),
              0 2px 6px rgba(27, 17, 8, 0.10);
  cursor: pointer;
  /* touch-action: manipulation removes iOS's 300ms tap-delay and
     the double-tap-to-zoom gesture, so the first tap fires instantly
     and is treated as a real click, not a pending gesture. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: background 180ms ease, transform 140ms ease;
}
.sticky-cta-btn:active {
  transform: scale(0.985);
  background: var(--burgundy-2);
}
.sticky-cta-label {
  flex: 1;
  text-align: left;
}
.sticky-cta-price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 4px;
  opacity: 0.98;
}
.sticky-cta-arrow {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════════════════════════
   SAMPLE CHAPTER — CENTERED REAL BOOK PAGE
   The text mock-up "book page" was removed; the real p. 44
   screenshot is now the single hero element of the sample block.
   Centered, capped at 540px wide (portrait 2:3 aspect ratio),
   framed in a cream mat with a two-layer drop shadow so it reads
   as an object photographed in place, not a flat image asset.
   ══════════════════════════════════════════════════════════════ */
.sample-image {
  margin: 40px auto 0;
  padding: 0;
  max-width: 540px;
}
.sample-image-frame {
  position: relative;
  padding: 10px;
  background: #F7F1DB;
  box-shadow: 0 30px 60px rgba(27, 17, 8, 0.28),
              0 6px 20px rgba(27, 17, 8, 0.12);
  border-radius: 3px;
  transform: rotate(0.2deg);
  transition: transform 260ms ease;
}
.sample-image-frame:hover {
  transform: rotate(0deg) translateY(-2px);
}
.sample-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
.sample-image-cap {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
  font-weight: 700;
  text-align: center;
  opacity: 0.88;
}
@media (max-width: 720px) {
  .sample-image { margin: 32px auto 0; max-width: 100%; }
  .sample-image-frame { padding: 8px; transform: none; }
  .sample-image-cap { font-size: 11px; letter-spacing: 0.2em; }
}

/* Mobile only. Desktop uses the in-page hero + section VIII buttons. */
@media (max-width: 720px) {
  .sticky-cta { display: block; }
  /* Hide the buyer toast on mobile so it doesn't stack with the
     sticky CTA at the bottom of the phone screen. Toast stays on
     desktop where the extra floating element doesn't fight the CTA. */
  .toast-stack { display: none !important; }
  /* Give the last-call section some breathing room above the sticky
     bar so the primary buy button never gets covered by it. */
  .last-call { padding-bottom: 120px; }
}

/* ══════════════════════════════════════════════════════════════
   EXIT-INTENT MODAL
   Cream card centered over a dark blurred scrim. Book cover at
   the top, small-caps burgundy eyebrow, big italic-red headline,
   short subtext, primary buy CTA, secondary "see what's inside"
   text link, close X. Matches the site's editorial cream+burgundy
   palette so it reads as one system with the sticky bar and the
   buyer toast, not a bolt-on popup.
   ══════════════════════════════════════════════════════════════ */
.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 320ms ease;
}
.exit-modal.is-open {
  display: flex;
  opacity: 1;
}
.exit-modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 17, 8, 0.62);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
}
.exit-modal-card {
  position: relative;
  background: #F7F1DB;
  border-radius: 6px;
  padding: 34px 40px 34px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.40),
              0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(24px) scale(0.97);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 380ms ease 60ms;
  will-change: transform, opacity;
}
.exit-modal.is-open .exit-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.exit-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 26px;
  font-family: var(--font-serif);
  color: var(--ink-2);
  cursor: pointer;
  padding: 6px 12px;
  line-height: 1;
  opacity: 0.55;
  transition: opacity 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.exit-modal-close:hover,
.exit-modal-close:focus-visible { opacity: 1; outline: none; }
.exit-modal-cover {
  margin: 0 auto 22px;
  width: 132px;
}
.exit-modal-cover img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28),
              0 2px 6px rgba(0, 0, 0, 0.12);
}
.exit-modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: var(--burgundy);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.exit-modal-title {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}
.exit-modal-title .italic-red {
  color: var(--burgundy);
  font-style: italic;
  font-weight: 600;
}
.exit-modal-body {
  font-family: var(--font-serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 auto 22px;
  max-width: 340px;
  opacity: 0.92;
}
.exit-modal-btn {
  display: block;
  padding: 17px 26px;
  background: var(--burgundy);
  color: #F7F1DB;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 180ms ease, transform 140ms ease;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(107, 24, 16, 0.28);
}
.exit-modal-btn:hover { background: var(--burgundy-2); }
.exit-modal-btn:active { transform: scale(0.985); background: var(--burgundy-2); }
.exit-modal-alt {
  margin-top: 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
  text-transform: uppercase;
  opacity: 0.85;
}
.exit-modal-alt-link {
  color: var(--burgundy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 700;
}
.exit-modal-alt-link:hover { color: var(--burgundy-2); }

@media (max-width: 480px) {
  .exit-modal { padding: 16px; }
  .exit-modal-card { padding: 28px 22px 30px; border-radius: 4px; }
  .exit-modal-title { font-size: 26px; }
  .exit-modal-cover { width: 108px; margin-bottom: 18px; }
  .exit-modal-body { font-size: 14.5px; }
  .exit-modal-close { top: 6px; right: 8px; font-size: 24px; }
}