/* ─────────────────────────────────────────────────────────────
   Non-Abusive Selling — sales page
   Palette lifted directly from hero.png; type per redesign brief.
   ───────────────────────────────────────────────────────────── */

/* Simone Sharper — Simone's hand-lettered display font.
   Per notes/universal-redesign-patterns.md §1, replaces Caveat as
   the primary handwriting font across all sales pages. Caveat
   stays as a fallback if the file fails to load. The .ttf lives at
   the project root; this folder is one level deeper. */
@font-face {
  font-family: "Simone Sharper";
  src: url("../SimoneSharper-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette */
  --navy:        #1a1654;
  --navy-deep:   #120e3a;
  --plum:        #2d1657;
  --magenta:     #d4708a;
  --magenta-deep:#b8526e;
  --magenta-soft:#e89bb0;
  --cream:       #faf3e6;
  --cream-deep:  #f0e6d0;
  --ink:         #1a0f3d;
  --ink-soft:    #3d2a5e;
  --coral:       #ee5a55;
  --gold:        #e6c875;

  /* Type */
  --serif:  "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:   "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:   "Simone Sharper", "Caveat", "Bradley Hand", cursive;
  --mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale */
  --pad-page: clamp(20px, 4vw, 56px);
  --section-pad: clamp(48px, 6vw, 88px);

  /* Radii */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  /* Shadows */
  --lift: 0 2px 0 rgba(0,0,0,0.04), 0 16px 48px -16px rgba(20, 10, 40, 0.45);
  --lift-strong: 0 4px 0 rgba(0,0,0,0.06), 0 28px 60px -20px rgba(20, 10, 40, 0.55);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  background: #fff;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

::selection { background: var(--magenta); color: #fff; }

/* ─── Layout primitives ─── */

.wrap        { max-width: 1180px; margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }
.wrap-narrow { max-width: 760px;  margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }
.wrap-prose  { max-width: 680px;  margin: 0 auto; padding-left: var(--pad-page); padding-right: var(--pad-page); }

.section {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
  position: relative;
}
.section--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
/* Below the hero, default sections are pure white. The class name
   .section--cream is retained for class-name inertia, but the bg is
   now #fff per Simone's directive (2026-05-12). The accent palette
   moments — hero (navy halo), founder (plum), magenta pulls, and
   navy accent blocks (e.g. praise wall) — keep their own bg colors. */
.section--cream { background: #fff; color: var(--ink); }
.section--navy { background: var(--navy); color: #fff; }
/* Yellow accent — pairs with .section--cream for inherited cream-context
   text/border overrides; only bg changes. */
.section--yellow { background: #fff7da; }
.section--magenta { background: var(--magenta); color: #fff; }
.section--plum { background: var(--plum); }

/* Subtle radial halo on navy sections, like the hero gradient */
.bg-halo {
  background:
    radial-gradient(80% 60% at 80% 30%, rgba(212, 112, 138, 0.10), transparent 60%),
    radial-gradient(60% 80% at 10% 90%, rgba(45, 22, 87, 0.5), transparent 70%),
    var(--navy);
}

/* Subtle warm halo on cream sections — keeps them from feeling flat */
.bg-halo-cream {
  background:
    radial-gradient(70% 50% at 85% 15%, rgba(212, 112, 138, 0.14), transparent 60%),
    radial-gradient(50% 60% at 5% 90%, rgba(230, 200, 117, 0.18), transparent 65%),
    var(--cream);
}

/* ─── Chrome ─── */

.chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--pad-page);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.78);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(18, 14, 58, 0.6);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.chrome__wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
}
.chrome__wordmark em { font-style: italic; color: var(--magenta-soft); font-weight: 400; }
.chrome__crumb {
  display: none;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
}
.chrome__crumb .sep { margin: 0 10px; opacity: 0.4; }
.chrome__crumb .current { color: #fff; }
.chrome__cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  transition: all 200ms cubic-bezier(.2,.6,.2,1);
}
.chrome__cta:hover { background: var(--magenta); border-color: var(--magenta); }
@media (min-width: 900px) { .chrome__crumb { display: inline-flex; } }

/* ─── HERO ─── */

.hero {
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__pitch .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta-soft);
  margin: 0 0 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero__pitch .eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--magenta-soft);
}

.hero__pitch h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero__pitch h1 em {
  font-style: italic;
  color: var(--magenta-soft);
  font-weight: 400;
}
.hero__pitch h1 .sub {
  display: block;
  font-family: var(--hand);
  font-style: normal;
  color: var(--gold);
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1;
  margin-top: 14px;
  letter-spacing: -0.01em;
}

.hero__pitch .hero__claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px);
  line-height: 1.32;
  color: rgba(255,255,255,0.95);
  max-width: 32ch;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.hero__pitch .hero__lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 50ch;
  margin: 0 0 32px;
}

.hero__meta {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin-top: 8px;
}
.hero__meta strong { color: #fff; font-weight: 500; }

.hero__art {
  position: relative;
}
.hero__art img {
  width: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--lift-strong);
}
/* tiny decorative ticker float in front of hero card */
.hero__art .floater {
  position: absolute;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--hand);
  font-size: 22px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  box-shadow: var(--lift);
  transform: rotate(-4deg);
}
.hero__art .floater--top    { top: -14px; right: -10px; transform: rotate(4deg); }
.hero__art .floater--bot    { bottom: -16px; left: -16px; }
@media (max-width: 600px) {
  .hero__art .floater { font-size: 18px; padding: 6px 12px; }
  .hero__art .floater--top { right: 6px; }
  .hero__art .floater--bot { left: 6px; }
}

/* ─── Prose ─── */

.prose p {
  margin: 0 0 22px;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255,255,255,0.92);
  text-wrap: pretty;
}
.section--cream .prose p { color: var(--ink); }
.prose strong { color: #fff; font-weight: 600; }
.section--cream .prose strong { color: var(--ink); }
.prose em { font-style: italic; color: var(--magenta-soft); }
.section--cream .prose em { color: var(--magenta-deep); }
.prose .flirt { font-family: var(--hand); font-style: normal; font-size: 1.25em; color: var(--gold); display: inline-block; line-height: 1; }
.section--cream .prose .flirt { color: var(--magenta-deep); }

.section-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--magenta-soft);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section--cream .section-eyebrow { color: var(--magenta-deep); }
.section-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.section-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 36px;
  text-wrap: balance;
}
.section-h em { font-style: italic; color: var(--magenta-soft); }
.section--cream .section-h em { color: var(--magenta-deep); }

/* ─── Compare cards (eye contact / hand on waist) ─── */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 12px 0;
}
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }
.compare__card {
  border-radius: var(--r-md);
  padding: 32px 28px 28px;
  position: relative;
  border: 1px solid;
}
.compare__card--ok {
  background: linear-gradient(180deg, rgba(212,112,138,0.10), rgba(212,112,138,0.02));
  border-color: rgba(212,112,138,0.32);
}
.compare__card--no {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.10);
}
.compare__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  margin: 0 0 18px;
}
.compare__card--ok .compare__pill {
  background: var(--magenta);
  color: #fff;
}
.compare__card--no .compare__pill {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.1);
}
.compare__heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.18;
  margin: 0 0 12px;
  color: #fff;
}
.compare__say {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  color: rgba(255,255,255,0.85);
  margin: 0 0 8px;
}
.compare__say::before { content: "“"; color: var(--magenta-soft); margin-right: 2px; }
.compare__say::after  { content: "”"; color: var(--magenta-soft); margin-left: 2px; }
.compare__react {
  font-family: var(--hand);
  font-size: clamp(32px, 3vw, 38px);
  line-height: 1;
  margin-top: 18px;
}
.compare__card--ok .compare__react { color: var(--gold); }
.compare__card--no .compare__react { color: var(--coral); }

/* ─── Pull quote (the iconic typographic moment) ─── */

.pull {
  text-align: center;
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(72px, 9vw, 128px);
  background: var(--magenta);
  position: relative;
  overflow: hidden;
}
.pull::before, .pull::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.pull::before { top: -120px; left: -120px; }
.pull::after  { bottom: -160px; right: -120px; }
.pull__hearts {
  position: relative;
  font-size: 22px;
  color: var(--coral);
  margin-bottom: 8px;
  letter-spacing: 6px;
}
.pull__q {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 132px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 14ch;
  color: #fff;
  text-wrap: balance;
  position: relative;
}
.pull__q::before, .pull__q::after {
  font-family: var(--serif);
  color: rgba(255,255,255,0.4);
  font-size: 0.6em;
  position: relative;
  top: 0.05em;
}
.pull__q::before { content: "“"; margin-right: 6px; }
.pull__q::after  { content: "”"; margin-left: 6px; }
.pull__sub {
  font-family: var(--hand);
  font-size: clamp(28px, 3.4vw, 44px);
  margin-top: 18px;
  color: #fff;
  position: relative;
}

/* ─── Founder card ─── */

.founder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 820px) { .founder { grid-template-columns: 1fr; } }
.founder__stat {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--magenta-soft);
  margin: 0 0 8px;
}
.founder__stat-sub {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.founder__rule {
  height: 1px;
  background: rgba(255,255,255,0.18);
  margin: 28px 0;
}
.prose .founder__sig,
.founder__sig {
  font-family: var(--hand);
  font-size: 35px;
  line-height: 1.0;
  color: var(--magenta-soft);
  margin-top: 20px;
  white-space: nowrap;
}

/* ─── Editorial list (numbered) ─── */

.numlist { list-style: none; padding: 0; margin: 0; counter-reset: nl; }
.numlist > li {
  counter-increment: nl;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(16px, 2vw, 36px);
  padding: 36px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: baseline;
}
.numlist > li:last-child { border-bottom: 1px solid rgba(255,255,255,0.12); }
.numlist > li::before {
  content: counter(nl, decimal-leading-zero);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--magenta-soft);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.numlist__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  margin: 0 0 10px;
  color: #fff;
  letter-spacing: -0.005em;
}
.numlist__title em { font-style: italic; color: var(--magenta-soft); }
.numlist__body { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.6; margin: 0; }
/* Stacked paragraphs inside one numlist item — breathing room between beats */
.numlist__body + .numlist__body { margin-top: 16px; }

/* Numlist variant that uses word-labeled parts ("Part 1:", "Part 2:")
   inside the h3 titles instead of the abstract 01/02/03 counter.
   Kills the counter and gives the content full width so the prefix
   doesn't double up with a decorative numeral. */
.numlist--parts > li {
  grid-template-columns: 1fr;
  gap: 0;
}
.numlist--parts > li::before { content: none; }

/* Bonus block — "And there are bonus resources. You'll also get:" with
   check list, sits below the modules numlist. Adds a flourish-then-list
   rhythm. (border-top removed 2026-05-12 to avoid double-line with the
   numlist's last-child border-bottom.) Top space tightened so the
   bonus block sits close to the last numlist item. */
.bonus-block {
  margin-top: clamp(16px, 2vw, 28px);
  padding-top: clamp(8px, 1.5vw, 18px);
}
.bonus-intro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.bonus-leadin {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 18px;
}

/* Cream-section variants */
.section--cream .numlist > li { border-color: rgba(45,22,87,0.18); }
.section--cream .numlist > li:last-child { border-bottom-color: rgba(45,22,87,0.18); }
.section--cream .numlist > li::before { color: var(--magenta-deep); }
.section--cream .numlist__title { color: var(--ink); }
.section--cream .numlist__title em { color: var(--magenta-deep); }
.section--cream .numlist__body { color: var(--ink-soft); }

/* ─── Checklist (bullets with custom marker) ─── */

.checks { list-style: none; padding: 0; margin: 0; }
.checks li {
  position: relative;
  padding: 18px 0 18px 44px;
  font-size: 19px;
  line-height: 1.5;
  border-bottom: 1px dashed rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}
.checks li:last-child { border-bottom: 0; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--magenta);
  background-image:
    linear-gradient(45deg, transparent 46%, #fff 46% 56%, transparent 56%),
    linear-gradient(-45deg, transparent 60%, #fff 60% 70%, transparent 70%);
  background-size: 100% 100%, 60% 60%;
  background-position: center, 6px 9px;
  background-repeat: no-repeat;
}
.checks li strong { color: #fff; }
.checks li em { color: var(--magenta-soft); font-style: italic; }
.section--cream .checks li { color: var(--ink); border-bottom-color: rgba(45,22,87,0.18); }
.section--cream .checks li strong { color: var(--ink); }
.section--cream .checks li em { color: var(--magenta-deep); }

/* ─── CTA band ─── */

.cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--magenta) 0%, var(--magenta-deep) 100%);
  box-shadow: var(--lift-strong);
}
@media (max-width: 720px) { .cta { grid-template-columns: 1fr; text-align: center; } }
.cta__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0;
  color: #fff;
  line-height: 1.1;
}
.cta__price em { font-style: italic; color: rgba(255,255,255,0.88); }
.cta__price small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  background: #fff;
  color: var(--magenta-deep);
  border: 0;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  transition: transform 200ms cubic-bezier(.2,.6,.2,1), box-shadow 200ms;
  white-space: nowrap;
}
.btn .arrow { transition: transform 250ms cubic-bezier(.2,.6,.2,1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.14); }
.btn:hover .arrow { transform: translateX(3px); }
.btn:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(0,0,0,0.12); }

.btn--invert { background: var(--ink); color: #fff; }
.btn--big { padding: 20px 32px; font-size: 17px; }

/* Unboxed CTA variant — used when the CTA sits below another bounded
   panel (e.g. the inclusions card) and doesn't need its own bounding
   box. Drops the gradient bg, padding, shadow, and rounded corners.
   Stacks the price + button vertically, centered. Button is deep
   navy (was magenta) per 2026-05-12 Simone direction. */
.cta--unboxed {
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 22px;
}
.cta--unboxed .cta__price { color: var(--ink); }
.cta--unboxed .cta__price em { color: var(--magenta-deep); }
.cta--unboxed .cta__price small { color: var(--ink-soft); }
.cta--unboxed .btn {
  background: var(--navy);
  color: #fff;
  padding: 26px 56px;
  font-size: 20px;
}
.cta--unboxed .btn:hover { background: var(--navy-deep); }

/* Final mega CTA */
.megacta {
  text-align: center;
}
.megacta__head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: #fff;
  text-wrap: balance;
}
.megacta__head em { font-style: italic; color: var(--gold); }
.megacta__sub {
  font-family: var(--hand);
  font-size: clamp(28px, 3vw, 40px);
  margin: 0 0 36px;
  color: rgba(255,255,255,0.9);
}
.megacta .btn { padding: 22px 36px; font-size: 18px; }
.megacta__legal {
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ─── Praise grid ─── */

.praise-head {
  text-align: center;
  margin-bottom: 56px;
}
.praise-head h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  margin: 0;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.praise-head .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin: 0 0 14px;
}

.praise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
/* Third card centers alone in the second row for visual balance */
.praise-grid figure:nth-child(3) {
  grid-column: 1 / -1;
  max-width: calc(50% - 12px);
  justify-self: center;
}
@media (max-width: 880px) {
  .praise-grid { grid-template-columns: 1fr; max-width: 520px; }
  .praise-grid figure:nth-child(3) { grid-column: auto; max-width: none; }
}
.praise-grid figure {
  margin: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-md);
  padding: 12px;
  transition: transform 250ms cubic-bezier(.2,.6,.2,1), box-shadow 250ms;
}
.praise-grid figure:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift);
}
.praise-grid img {
  width: 100%;
  border-radius: var(--r-sm);
}

/* highlight quote chips above the grid */
.praise-quotes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 1080px;
  margin: 0 auto 56px;
}
.praise-quotes .chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 18px;
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,0.92);
}
.praise-quotes .chip--accent {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

/* ─── Margin handnote ─── */

.handnote {
  font-family: var(--hand);
  font-size: clamp(30px, 3vw, 38px);
  line-height: 1.2;
  color: var(--gold);
  display: inline-block;
  position: relative;
  padding-left: 32px;
  margin: 18px 0 32px;
}
.handnote::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 22px; height: 1px;
  background: var(--gold);
}
.section--cream .handnote { color: var(--magenta-deep); }
.section--cream .handnote::before { background: var(--magenta-deep); }

/* ─── Closer ─── */

.closer {
  text-align: center;
}
.closer__lockeyes {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  color: rgba(255,255,255,0.85);
  margin: 0 0 8px;
}
.closer__sig {
  font-family: var(--hand);
  font-size: clamp(64px, 9vw, 132px);
  color: var(--magenta-soft);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.01em;
}

/* ─── Footer ─── */

.foot {
  padding: 36px var(--pad-page);
  background: var(--navy-deep);
  border-top: 1px solid rgba(255,255,255,0.08);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: space-between;
  align-items: center;
}
.foot a { color: rgba(255,255,255,0.85); text-decoration: none; }
.foot a:hover { color: var(--magenta-soft); }

/* ─── White-section overrides (the 2026-05-12 white-bg flip) ─────────
   These rules kick in for any section using .section--cream (now =
   white bg). They flip white-on-dark text to ink-on-white and adjust
   borders/backgrounds for components originally designed for dark
   surfaces. The original dark-section rules remain untouched so the
   founder (.section--plum) and magenta pulls keep working. */

/* Compare cards on white */
.section--cream .compare__card--ok {
  background: linear-gradient(180deg, rgba(212,112,138,0.10), rgba(212,112,138,0.04));
  border-color: rgba(212,112,138,0.32);
}
.section--cream .compare__card--no {
  background: rgba(45,22,87,0.03);
  border-color: rgba(45,22,87,0.12);
}
.section--cream .compare__card--no .compare__pill {
  background: rgba(45,22,87,0.06);
  color: var(--ink-soft);
  border-color: rgba(45,22,87,0.12);
}
.section--cream .compare__heading { color: var(--ink); }
.section--cream .compare__say { color: var(--ink-soft); }
.section--cream .compare__say::before,
.section--cream .compare__say::after { color: var(--magenta-deep); }
.section--cream .compare__card--ok .compare__react { color: var(--magenta-deep); }
.section--cream .compare__card--no .compare__react { color: var(--coral); }

/* Praise wall on white */
.section--cream .praise-head h2 { color: var(--ink); }
.section--cream .praise-head .eyebrow { color: var(--ink-soft); }
.section--cream .praise-grid figure {
  background: #fff;
  border-color: rgba(45,22,87,0.10);
  box-shadow: 0 1px 0 rgba(20, 10, 40, 0.04), 0 12px 28px -16px rgba(20, 10, 40, 0.20);
}
.section--cream .praise-quotes .chip {
  background: rgba(45,22,87,0.04);
  border-color: rgba(45,22,87,0.14);
  color: var(--ink);
}
.section--cream .praise-quotes .chip--accent {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

/* Closer on white */
.section--cream .closer__lockeyes { color: var(--ink-soft); }
.section--cream .closer__sig { color: var(--magenta-deep); }

/* Bio signature — specificity bump so .founder__sig wins over .prose p */
.section--plum .founder__sig,
.section--magenta .founder__sig {
  color: #fff;
  text-align: left;
}

/* Sales-Should-Feel-Good header (and any reused subheader spot) */
.section-h--small {
  font-size: clamp(22px, 2.6vw, 34px);
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

/* Inclusions card — wraps the deliverables list in a cream paper
   panel so it reads as a contained "offer block" against the white
   section bg. */
.inclusions-card {
  background: var(--cream);
  padding: clamp(20px, 3vw, 36px) clamp(22px, 3vw, 40px);
  border-radius: var(--r-md);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 14px 32px -18px rgba(20, 10, 40, 0.18);
  margin: 24px auto 0;
  max-width: 680px;
}

/* Inclusions list — "What you get when you join" (per universal §15)
   Bordered hairline rules, two-column name + sub, no bullets. */
.inclusions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.inclusions li {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 22px;
  padding: 22px 4px;
  border-top: 1px solid rgba(45,22,87,0.14);
  align-items: baseline;
}
.inclusions li:last-child {
  border-bottom: 1px solid rgba(45,22,87,0.14);
}
/* Single-column variant — for items with no sub-line (e.g. ASL row) */
.inclusions li.inclusions__li--solo { grid-template-columns: 1fr; }
.inclusions__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.3;
}
.inclusions__sub {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .inclusions li { grid-template-columns: 1fr; gap: 4px; padding: 18px 4px; }
}

/* ─── Founder section reconfigured (2026-05-12) — portrait + prose ─────
   Replaces the old stat-pullquote left column with a portrait image.
   Stays on the plum bg as a deep-blue accent panel. */
.founder__photo {
  margin: 0;
  border-radius: var(--r-md);
  box-shadow: var(--lift-strong);
  aspect-ratio: 3 / 4;
  max-height: 640px;
  width: 100%;
  position: relative;
  overflow: visible;  /* so the washi tape can poke above */
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: var(--r-md);
}
/* Washi tape strip across the top of the portrait (universal §11) */
.founder__photo::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 150px;
  height: 28px;
  background: rgba(242,163,212,0.82);
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,0.22) 0%,
    transparent 20%,
    transparent 80%,
    rgba(20,24,45,0.08) 100%
  );
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  z-index: 5;
  border-radius: 1px;
}

/* ─── Reveal on scroll (whisper motion) ─── */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(.2,.6,.2,1), transform 0.9s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .praise-grid figure { transition: none; }
}

/* ─── FAQ (Imported from Specific Copy) ─── */
.sc-faq__h {
  font-family: var(--serif);
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.05;
  color: var(--ink);
  margin: 16px 0 clamp(36px, 5vw, 56px);
  letter-spacing: -0.02em;
  font-weight: 400;
  text-align: center;
}
.sc-faq__h em { color: var(--magenta-deep); font-style: italic; }
.sc-faq__list { max-width: 760px; margin: 0 auto; }
.sc-faq__list details {
  border-top: 1px solid rgba(45,22,87,0.18);
  padding: 0;
}
.sc-faq__list details:last-child { border-bottom: 1px solid rgba(45,22,87,0.18); }
.sc-faq__list summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px 22px 0;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
  transition: color 0.2s;
}
.sc-faq__list summary:hover { color: var(--magenta-deep); }
.sc-faq__list summary::-webkit-details-marker { display: none; }
.sc-faq__list summary::after {
  content: "+";
  font-family: var(--serif);
  font-weight: 400;
  color: var(--magenta-deep);
  font-size: 28px;
  line-height: 1;
  transition: transform 0.3s;
  flex-shrink: 0;
}
.sc-faq__list details[open] summary::after { transform: rotate(45deg); }
.sc-faq__a {
  padding: 0 4px 22px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}