/* Norman Koh — REB Framework Landing Page
   Aesthetic: Operator Light (v3, 2026-06-11 per Bryan) — warm off-white, monochrome
   ink accent (red removed), mono numerals, hard edges. WhatsApp CTA uses WhatsApp green.
   Shared 1:1 with norman-koh-new-launch-resale/styles.css — keep the two files in sync. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
  /* Color tokens — Operator Light */
  --paper: #FAF8F3;        /* page background */
  --card: #FFFFFF;         /* cards, tiles, form panels */
  --sand: #F1EDE4;         /* contrast bands */
  --tint: #F5F1E8;         /* tinted callouts (neutral) */
  --ink: #16130F;          /* primary text */
  --muted: #5C574E;        /* secondary text */
  --faint: #8C867B;        /* tertiary/utility text */
  --line: #E2DCCF;         /* borders, grid gaps */
  --line-strong: #C9C2B2;  /* emphasized borders */
  --red: #16130F;          /* accent — red removed per Bryan 2026-06-11; accent = ink (token name kept for stability) */
  --red-deep: #44403A;     /* small-text accent (eyebrows, kickers), hovers — warm charcoal */
  --shadow: 0 1px 2px rgba(22, 19, 15, 0.05);

  /* Type tokens */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Layout tokens */
  --max-width: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-padding-y: clamp(64px, 9vw, 120px);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--red-deep); }

/* Typography */
h1, h2, h3, h4 { font-family: var(--font-sans); margin: 0; letter-spacing: -0.02em; }
h1 {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.05;
}
h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
}
p { margin: 0 0 1em; }
.lead { color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.65; }

.eyebrow, .section-kicker, .form-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
  display: inline-block;
  margin-bottom: 1rem;
}

.mono { font-family: var(--font-mono); }

/* Container */
.page { width: 100%; overflow-x: hidden; }
.section {
  padding: var(--section-padding-y) var(--gutter);
  max-width: var(--max-width);
  margin: 0 auto;
}
.section.tight { padding-block: clamp(48px, 7vw, 88px); }
.section-title { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }

/* Bands — full-width contrast sections (tonal, light) */
.band { width: 100%; background: var(--sand); border-block: 1px solid var(--line); }
.band-accent {
  width: 100%;
  background: var(--red);
  color: #FFFFFF;
  border-block: 1px solid var(--red-deep);
}
.band-accent .eyebrow,
.band-accent .section-kicker { color: #FFFFFF; }
.band-accent .lead { color: rgba(255,255,255,0.85); }

/* Rule */
hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: clamp(40px, 6vw, 72px) 0;
}

/* HERO */
.hero {
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(48px, 7vw, 96px);
  max-width: var(--max-width);
  margin: 0 auto;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.hero-subtitle {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  max-width: 36ch;
}
.hero-bullets {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.hero-bullets li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.98rem;
  color: var(--ink);
}
.hero-bullets li::before {
  content: '\25AA';
  position: absolute;
  left: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.75em;
}

/* Form panel */
.hero-form-panel,
.form-panel {
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 36px);
  position: sticky;
  top: 24px;
}
.form-panel { position: static; }
.form-heading { font-size: 1.5rem; margin-bottom: 0.5rem; }
.form-lead { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }
.field { display: flex; flex-direction: column; margin-bottom: 1rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.field input {
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s ease;
}
.field input:focus { border-color: var(--red); }
.privacy-note {
  font-size: 0.78rem;
  color: var(--faint);
  margin-top: 1rem;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.01em;
  min-height: 48px;
  transition: background 0.15s ease, transform 0.05s ease;
}
.button.primary { background: var(--red); color: #FFFFFF; }
.button.primary:hover { background: var(--red-deep); color: #FFFFFF; }
.button.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.button.ghost:hover { border-color: var(--ink); color: var(--ink); }
.button.full-width { width: 100%; }
.button.lg { font-size: 1.1rem; padding: 1.15rem 1.75rem; min-height: 56px; }

/* SECTION — 7 questions tease */
.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.question-tile {
  background: var(--card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: background 0.15s ease;
}
.question-tile:hover { background: #FDFBF6; }
.question-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.08em;
}
.question-tile h3 { font-size: 1.05rem; line-height: 1.3; }
.question-answers {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

/* Problem cards */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.card-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
}
.card h3 { font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.card-consequence {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink);
}
.card-consequence strong {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-deep);
  display: block;
  margin-bottom: 0.3rem;
}

/* REB Framework 5-stage strip */
.reb-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.reb-stage {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.reb-stage:last-child { border-right: 0; }
.reb-stage-num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--red);
}
.reb-stage h3 {
  font-size: 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.reb-stage p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}
.reb-strip-caption {
  margin-top: clamp(20px, 3vw, 32px);
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 500;
}
.reb-strip-caption .mono {
  color: var(--red-deep);
  font-weight: 700;
}

/* Norman Rating signature band */
.rating-band {
  background: var(--sand);
  border-block: 1px solid var(--line-strong);
  padding: clamp(72px, 10vw, 120px) var(--gutter);
}
.rating-band-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.rating-numeral {
  font-family: var(--font-mono);
  font-size: clamp(8rem, 18vw, 14rem);
  font-weight: 700;
  color: var(--red);
  line-height: 0.85;
  letter-spacing: -0.06em;
  display: block;
  white-space: nowrap;
}
.rating-numeral-sub {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: block;
  margin-top: 0.4rem;
  text-transform: uppercase;
}
.rating-band h2 { margin-bottom: 1rem; }
.rating-band .lead { color: var(--ink); }
.rating-band-quote {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--red);
  font-style: italic;
  color: var(--ink);
  font-size: 1.05rem;
}

/* Meet Norman */
.norman-portrait {
  position: relative;
  background: var(--sand);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%) contrast(1.05);
}
.norman-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.norman-photo-fallback {
  /* Hidden by default; the <img onerror> handler flips this to flex if the
     headshot fails to load. Must stay out of flow — .norman-portrait is a flex
     container, so an in-flow fallback sits BESIDE the photo and shoves it off
     the frame. */
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}
.norman-photo-fallback span {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.norman-photo-fallback small { font-size: 0.7rem; color: var(--faint); }
.norman-portrait-caption {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.meet-norman-bullets {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.meet-norman-bullets li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 1rem;
  color: var(--ink);
}
.meet-norman-bullets li::before {
  content: '\25AA';
  position: absolute;
  left: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.75em;
}
.meet-norman-bullets strong { color: var(--ink); display: block; margin-bottom: 0.2rem; }
.meet-norman-bullets span { color: var(--muted); font-size: 0.93rem; }
.norman-quote {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--red);
  background: var(--card);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
}
.norman-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Proof stat strip */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line-strong);
  background: var(--card);
}
.stat-tile {
  padding: clamp(28px, 4vw, 40px) 20px;
  border-right: 1px solid var(--line);
  text-align: center;
}
.stat-tile:last-child { border-right: 0; }
.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--red);
  display: block;
  line-height: 1;
}
.stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* What you get */
.get-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.get-item {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.get-item-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.get-item h3 { font-size: 1.1rem; }
.get-item p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* Final opt-in */
.optin-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.handoff-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.handoff-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.98rem;
  color: var(--ink);
}
.handoff-list li::before {
  content: '\25AA';
  position: absolute;
  left: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 0.75em;
}

/* Footer */
.footer {
  border-top: 1px solid var(--line);
  padding: 36px var(--gutter);
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  background: var(--paper);
}
.footer p { margin: 0.25rem 0; }

/* =========================================================
   THANK-YOU PAGE specifics
   ========================================================= */
.thanks-hero {
  padding: clamp(64px, 9vw, 120px) var(--gutter) clamp(48px, 7vw, 88px);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}
.thanks-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  max-width: 18ch;
  margin: 0 auto 1.5rem;
}
.thanks-hero .lead { max-width: 56ch; margin: 0 auto 2rem; }
.thanks-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Primary WhatsApp panel */
.whatsapp-band {
  background: var(--red);
  color: #FFFFFF;
  padding: clamp(56px, 8vw, 96px) var(--gutter);
  border-block: 1px solid var(--red-deep);
}
.whatsapp-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.whatsapp-inner .eyebrow { color: #FFFFFF; }
.whatsapp-inner h2 {
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.whatsapp-inner p { color: rgba(255,255,255,0.92); font-size: 1.05rem; }
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #1F8A4C;
  color: #FFFFFF;
  padding: 1.15rem 1.85rem;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  min-height: 56px;
  margin-top: 1.5rem;
  transition: background 0.15s ease;
}
.whatsapp-button:hover { background: #166B3B; color: #FFFFFF; }
.whatsapp-preview {
  background: var(--card);
  color: var(--ink);
  padding: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
  border-radius: 2px;
  border: 1px solid var(--red-deep);
}
.whatsapp-preview-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--red-deep);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

/* Secondary booking */
.booking-band {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
}
.booking-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.booking-aside { color: var(--muted); font-size: 0.95rem; }

/* What's inside (mirrors index questions) */
.thanks-questions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.thanks-questions-list li {
  background: var(--card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.thanks-questions-list .q-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--red);
  letter-spacing: 0.1em;
}
.thanks-questions-list .q-title { font-size: 0.98rem; font-weight: 700; color: var(--ink); }

/* Utility footer */
.utility-row {
  text-align: center;
  padding: clamp(32px, 5vw, 56px) var(--gutter);
  color: var(--faint);
  font-size: 0.85rem;
  font-family: var(--font-mono);
}
.utility-row a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.utility-row a:hover { color: var(--red-deep); }

/* =========================================================
   RESPONSIVE — Mobile-first breakpoints
   ========================================================= */
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-form-panel { position: static; }
  .rating-band-inner { grid-template-columns: 1fr; text-align: center; }
  .rating-numeral { font-size: clamp(7rem, 28vw, 12rem); }
  .reb-strip { grid-template-columns: 1fr; }
  .reb-stage { border-right: 0; border-bottom: 1px solid var(--line); }
  .reb-stage:last-child { border-bottom: 0; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-tile:nth-child(2n) { border-right: 0; }
  .stat-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .optin-layout { grid-template-columns: 1fr; }
  .whatsapp-inner { grid-template-columns: 1fr; }
  .booking-inner { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .thanks-ctas .button { width: auto; }
}

@media (max-width: 480px) {
  .proof-strip { grid-template-columns: 1fr; }
  .stat-tile { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat-tile:last-child { border-bottom: 0; }
  .questions-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Anti-bot: honeypot + Turnstile + form error/fallback
   ============================================================ */
/* Off-screen, not display:none (some bots skip display:none fields). */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile { margin: 14px 0 4px; }
.form-error {
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--tint);
  color: var(--ink);
  font-size: 0.86rem;
}
.form-error.active { display: block; }
.form-fallback {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 0.84rem;
}
.form-fallback a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   LINDEN-ARCHITECTURE COMPONENTS — Operator Light
   Section architecture from linden-assured-path; re-skinned to
   the light token set. Mono numerals, red accent, radius 0.
   ============================================================ */

/* Hero brand row */
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(36px, 6vw, 64px);
  color: var(--ink);
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 1.02rem; line-height: 1; letter-spacing: 0; }
.brand-copy small {
  font-family: var(--font-mono);
  color: var(--faint);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero additions */
.hero-redline {
  margin-top: 1.25rem;
  color: var(--red-deep);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero-cta { margin-top: 1.75rem; min-width: 240px; }
.hero-note {
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--faint);
  letter-spacing: 0.04em;
}

/* Hero value card */
.hero-guide { position: relative; }
.value-card {
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 32px);
}
.value-card .vc-head {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin: 0 0 1rem;
}
.value-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.value-list li {
  position: relative;
  padding: 12px 14px 12px 40px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.value-list li strong { color: var(--ink); }
.value-list li::before {
  content: '\25AA';
  position: absolute;
  left: 14px;
  top: 14px;
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.75em;
}

/* Download / primary form section */
.download-section { background: var(--sand); border-block: 1px solid var(--line); }
.download-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.download-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.5rem; }
.download-benefits span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lead-form-panel {
  background: var(--card);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 36px);
}
.lead-form-panel.standalone { max-width: 560px; margin: 0 auto; }
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 0.84rem;
}
.form-consent input { margin-top: 3px; accent-color: var(--red); width: 18px; height: 18px; }
.lead-form .button { margin-top: 16px; }
.form-fineprint {
  margin-top: 12px;
  color: var(--faint);
  font-size: 0.78rem;
  text-align: center;
  font-family: var(--font-mono);
}

/* Prose blocks */
.prose { max-width: 760px; margin: 0 auto; }
.prose p { color: var(--ink); font-size: clamp(1.02rem, 1.4vw, 1.12rem); line-height: 1.72; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 800; }
.prose .em-red { color: var(--red-deep); font-weight: 700; }

/* Section title centering + narrow variant */
.section.narrow { max-width: 880px; }
.section-title.centered { margin-left: auto; margin-right: auto; text-align: center; }
.proof-note {
  margin-top: 1.25rem;
  color: var(--faint);
  font-size: 0.86rem;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.guide-mid-cta { margin-top: 2rem; text-align: center; }

/* Image drop-zones */
.img-slot {
  width: 100%;
  aspect-ratio: 16 / 6;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-strong);
  background: var(--sand);
  color: var(--faint);
}
img.img-slot { object-fit: cover; border-style: solid; border-color: var(--line); filter: grayscale(100%) contrast(1.05); }
.img-slot-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
}

/* Journey timeline */
.journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(24px, 4vw, 40px);
}
.journey-step { padding: 22px 20px; background: var(--card); display: flex; flex-direction: column; }
.journey-step .js-stage {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red-deep);
}
.journey-step .js-name { display: block; margin-top: 10px; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.journey-step .js-detail { display: block; margin-top: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.journey-step .js-gain {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}

/* Contrast / fit grid */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  margin-top: clamp(24px, 4vw, 36px);
}
.fit-col { padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); }
.fit-col.yes { border-left: 3px solid var(--red); background: var(--tint); }
.fit-col.no { border-left: 3px solid var(--line-strong); }
.fit-label {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.fit-col.yes .fit-label { color: var(--red-deep); }
.fit-col.no .fit-label { color: var(--faint); }
.fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fit-col li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.fit-col.yes li { color: var(--ink); }
.fit-col li::before {
  content: '\25AA';
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 0.75em;
}
.fit-col.yes li::before { color: var(--red); }
.fit-col.no li::before { color: var(--faint); }

/* Framework pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(24px, 4vw, 40px);
}
.pillar { padding: 26px 22px; background: var(--card); }
.pillar .p-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
}
.pillar h3 { margin-top: 14px; font-size: 1.02rem; }
.pillar p { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* Questions callout */
.questions {
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(24px, 3vw, 32px);
  border: 1px dashed var(--red);
  background: var(--tint);
}
.questions h3 { font-size: 1.1rem; }
.questions ol { margin: 14px 0 0; padding-left: 20px; }
.questions li { margin-top: 10px; color: var(--ink); font-size: 0.96rem; line-height: 1.55; }
.questions li strong { color: var(--red-deep); font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* Case studies */
.case-study {
  margin-top: clamp(24px, 4vw, 40px);
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cs-body { padding: clamp(26px, 4vw, 40px); }
.cs-eyebrow {
  margin: 0 0 12px;
  color: var(--red-deep);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cs-name { margin: 0 0 8px; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.15; font-weight: 800; color: var(--ink); }
.cs-tagline { margin: 0 0 18px; color: var(--muted); font-size: 1rem; font-style: italic; }
.cs-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0 0 22px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cs-stat strong {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cs-stat.gain strong { color: var(--red); }
.cs-stat span { display: block; margin-top: 4px; color: var(--faint); font-size: 0.8rem; }
.cs-narrative p { color: var(--muted); font-size: 0.98rem; line-height: 1.68; }
.cs-narrative p + p { margin-top: 14px; }
.cs-insight {
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 2px solid var(--red);
  background: var(--tint);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
.cs-insight strong { color: var(--red-deep); }
.cs-quote {
  margin: 18px 0 0;
  padding: 14px 18px;
  border-left: 2px solid var(--red);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
}
.case-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  align-items: stretch;
}
.case-duo .case-study { margin-top: 0; }
.case-duo .cs-body { padding: clamp(22px, 3vw, 30px); }

/* Case-study visuals (16:7 image atop/below the body) */
.cs-visual { margin: 0; position: relative; overflow: hidden; }
.cs-image {
  width: 100%;
  aspect-ratio: 16 / 7;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--sand);
  color: var(--faint);
}
img.cs-image { object-fit: cover; filter: grayscale(100%) contrast(1.05); }
.cs-image .img-slot-label { background: var(--card); }

/* Proof grid (credential tiles) */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(24px, 4vw, 40px);
}
.proof-card { padding: 26px 22px; background: var(--card); display: flex; flex-direction: column; }
.proof-card .pc-num {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}
.proof-card .pc-name { margin-top: 10px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.proof-card .pc-tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  align-self: flex-start;
}
.proof-card .pc-detail { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }

/* Mistakes list */
.mistakes { margin-top: clamp(24px, 4vw, 36px); display: grid; gap: 14px; }
.mistake {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.mistake .m-num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: rgba(22, 19, 15, 0.22);
}
.mistake h3 { font-size: 1.05rem; }
.mistake p { margin: 6px 0 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
.mistake .m-fix { color: var(--ink); }
.mistake .m-fix strong {
  color: var(--red-deep);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Expect steps */
.expect-steps { margin-top: clamp(24px, 4vw, 36px); display: grid; gap: 14px; }
.expect-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}
.expect-step .es-num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
}
.expect-step h3 { font-size: 1.08rem; }
.expect-step p { margin: 8px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }

/* FAQ */
.faq { display: grid; gap: 1px; margin-top: clamp(24px, 4vw, 36px); background: var(--line); border: 1px solid var(--line); }
.faq-item { background: var(--card); padding: 0 22px; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0; padding: 0 0 20px; color: var(--muted); font-size: 0.96rem; line-height: 1.65; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: clamp(24px, 4vw, 36px);
}
.testimonial-tile { border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); padding: 20px; }
.testimonial-tile.placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 150px;
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--faint);
  box-shadow: none;
  background: var(--paper);
}
.testimonial-tile.placeholder span {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Testimonials — named text reviews (scales 1..N).
   The older .testimonial-grid / .testimonial-tile screenshot classes above are
   kept for when approved review screenshots become available. */
.testimonial-stack {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  max-width: 820px;
  margin: clamp(24px, 4vw, 40px) auto 0;
}
.testimonial-card {
  position: relative;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  box-shadow: var(--shadow);
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3.5vw, 44px) clamp(24px, 3vw, 32px);
}
.tc-quote { margin: 0; }
.tc-quote p {
  margin: 0 0 1.1rem;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.7;
}
.tc-quote p:first-child {
  font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.tc-quote p:last-child { margin-bottom: 0; }
.tc-attrib {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 32px);
  padding-top: clamp(18px, 2.5vw, 24px);
  border-top: 1px solid var(--line);
}
/* Alvin's photo replaces the monogram. Square with a hairline border rather
   than a circle, to match the page's hard-edged treatment. Source is 200x200,
   so it stays sharp at 48px on retina. */
.tc-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  display: block;
}
/* [hidden] alone loses to display:grid below, so make it explicit. */
.tc-monogram[hidden] { display: none; }
.tc-monogram {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tc-who { display: flex; flex-direction: column; gap: 2px; }
.tc-name { font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.tc-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Post-form microcopy */
.post-form-microcopy {
  max-width: 640px;
  margin: 1.75rem auto 0;
  text-align: center;
  color: var(--faint);
  font-size: 0.92rem;
  line-height: 1.65;
}
.post-form-microcopy p + p { margin-top: 8px; }

/* Footer disclaimer */
.footer .disclaimer {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--faint);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* Responsive — Linden-architecture components */
@media (max-width: 880px) {
  .download-grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testimonial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fit-grid { grid-template-columns: 1fr; }
  .case-duo { grid-template-columns: 1fr; }
  .hero-guide { max-width: 520px; }
  .lead-form-panel { max-width: 520px; margin: 0 auto; width: 100%; }
}

@media (max-width: 480px) {
  .journey { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .mistake { grid-template-columns: 1fr; gap: 8px; }
  .expect-step { grid-template-columns: 1fr; gap: 10px; }
  .hero-cta { width: 100%; }
}

/* ============================================================
   DESIGN PASS — 2026-09-02
   The page ran 9 consecutive sections on the same paper
   background, every one using the same kicker → h2 → lead →
   white-bordered-card-grid pattern. This block adds rhythm and
   a single peak moment.

   STAYS MONOCHROME. Red was removed 2026-06-11 per Bryan and is
   deliberately not reintroduced here. All contrast is carried by
   ink / sand / paper and by scale.
   ============================================================ */

/* --- 1. Hero -------------------------------------------------
   h1 was clamping to 83px inside a 554px column, about 6 characters
   per line, which stacked the headline into a ragged 9-line tower.
   Widen the text column and lower the ceiling. */
/* Scoped to min-width: this file's @media (max-width:880px) rules collapse both
   of these to one column, and an unscoped rule here would win on source order
   and stop them stacking on phones.
   Threshold lowered 881 -> 761 (2026-09-03g) so the headline-beside-form layout
   survives tablet widths instead of stacking at 828px. These rules win in the
   761-880px overlap by source order. Below 761px the form column would fall
   under ~290px, so both still stack there. */
@media (min-width: 761px) {
  .hero-grid { grid-template-columns: 1.35fr 1fr; }
  .optin-layout { grid-template-columns: 1.1fr 1fr; }
  /* Grid items default to min-width:auto, so the form panel's min-content width
     (~352px) was overriding the fr ratio and forcing two equal columns, which
     squeezed the headline into a narrow ragged block at tablet widths. Allowing
     the form column to shrink lets the intended ratio apply. */
  .hero-form-panel,
  .optin-layout > * { min-width: 0; }
}
h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.05rem);
  letter-spacing: -0.035em;
}
.hero-subtitle { max-width: 46ch; }

/* --- 2. §5 Norman Rating: the page's one dark moment ---------
   The section comment has always called this "the visual hero",
   but it rendered as the same sand band as §3 and §15. Inverted,
   the 50/70 numeral finally carries the page. */
.rating-band {
  background: var(--ink);
  border-block: 1px solid var(--ink);
  color: var(--paper);
}
.rating-band h2 { color: var(--paper); }
.rating-band .section-kicker { color: rgba(250, 248, 243, 0.62); }
.rating-band .lead { color: rgba(250, 248, 243, 0.78); }
.rating-numeral { color: var(--paper); }
.rating-numeral-sub { color: rgba(250, 248, 243, 0.55); }
.rating-band-quote {
  border-left: 2px solid rgba(250, 248, 243, 0.4);
  color: rgba(250, 248, 243, 0.92);
}

/* --- 3. §7 Proof strip: inverted stat bar --------------------
   Gives the back half a strong horizontal beat without needing a
   full-bleed band wrapper. */
.proof-strip {
  background: var(--ink);
  border: 1px solid var(--ink);
}
/* border-color only. Setting border-right here would have re-added the right
   border that @media (max-width:480px) zeroes for the stacked layout. */
.proof-strip .stat-tile { border-color: rgba(250, 248, 243, 0.18); }
.stat-num { color: var(--paper); }
.stat-label { color: rgba(250, 248, 243, 0.62); }

/* --- 4. §2 The 7 questions: numerals get real presence -------
   Every grid on the page looked like the same white box. This one
   is the most important block, so the index number becomes a
   display element rather than part of a small mono label. */
.question-num {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.question-num .qn {
  font-size: 2.1rem;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.question-tile { padding: 30px 26px; }
.question-tile:hover { background: var(--tint); }

/* --- 5. Sticky CTA bar --------------------------------------
   2,500 words is a long way back to the form. Revealed by JS once
   the hero form scrolls out, hidden again over the final opt-in. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--ink);
  border-top: 1px solid var(--ink);
  transform: translateY(105%);
  transition: transform 0.28s ease;
}
.sticky-cta[data-show="true"] { transform: translateY(0); }
.sticky-cta-text {
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.3;
}
.sticky-cta-text small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
  margin-top: 3px;
}
.sticky-cta .button {
  flex: none;
  /* The @media (max-width:880px) rule above sets .button{width:100%}, which
     stretched this one across the whole bar. Same fix the thank-you page's
     .thanks-ctas .button already uses. */
  width: auto;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.sticky-cta .button:hover { background: #FFFFFF; color: var(--ink); }
@media (max-width: 560px) {
  /* At 375px the default button width squeezed the label to three lines.
     Shrink the button and let the text keep the room. */
  .sticky-cta { padding: 10px 12px; gap: 10px; }
  .sticky-cta-text { font-size: 0.86rem; line-height: 1.25; min-width: 0; }
  .sticky-cta-text small { display: none; }
  .sticky-cta .button {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    min-height: 44px;
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* 7 questions is an odd number, so the last row left empty cells showing the
   grid's own background as a grey block. Let the final question span the row
   instead — reads as a deliberate capstone rather than a gap. */
.question-tile:last-child { grid-column: 1 / -1; }

/* ============================================================
   REVISIONS — 2026-09-03 (Collen)
   ============================================================ */

/* 1. Headshot in colour.
   The grayscale came from the original Operator Light spec, which called for
   "grayscale documentary" photography. That rule predates this session. With
   the headshot now the only photograph on the page there is nothing to stay
   consistent with, so the filter comes off. */
.norman-portrait { filter: none; }

/* 2. No more stranded last cards.
   Both of these grids hold exactly 3 items on auto-fit tracks, so at tablet
   widths they laid out 2 + 1 and left the third stranded on the left ("the
   three traps" card 3, and "Free / 48h turnaround" in What you get). Explicit
   3-up above 980px, stacked below, so a lone card never sits off to one side. */
.problem-grid,
.get-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .problem-grid,
  .get-grid { grid-template-columns: 1fr; }
}

/* 3. The 7th question spans the full row, so centre its text rather than
   leaving it ranged left across a very wide box. */
.questions-grid .question-tile:last-child { align-items: center; text-align: center; }
.questions-grid .question-tile:last-child .question-num { justify-content: center; }

/* 4. Testimonial set as a quote: serif, italic, with real quotation marks.
   Georgia is a system face, so no extra webfont request. */
.tc-quote p {
  font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.72;
}
.tc-quote p:first-child {
  font-size: clamp(1.14rem, 1.6vw, 1.32rem);
  line-height: 1.55;
}

/* Meet Norman: the portrait column was 1fr against 1.4fr of text, so at 1280px
   the photo rendered ~426x533 and dominated the section. Fixed narrow column
   instead, with a max-width that also keeps it from going full-bleed once the
   grid stacks on phones.
   The min-width wrapper is deliberate: @media (max-width:880px) earlier in this
   file collapses these grids to one column, and an unscoped rule here
   would beat it on source order. */
/* Meet Norman — heading beside the portrait, everything else full width.
   Top row: kicker + h2 on the left, portrait on the right. The lead paragraph,
   bullets, pull-quote and journey then run the full content width underneath,
   rather than being confined to a column. */
.meet-norman-head {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-bottom: clamp(26px, 3.5vw, 44px);
}
.mn-heading .section-kicker { margin-bottom: 0.9rem; }
.mn-photo .norman-portrait { max-width: 220px; margin-inline: auto; }
/* Sized to sit on one line inside the 220px column (it wrapped at 0.78rem). */
.mn-photo .norman-portrait-caption {
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  margin-top: 0.75rem;
}
.meet-norman-body > :first-child { margin-top: 0; }

/* Below 761px the portrait column would crowd the heading, so stack: heading,
   portrait, then the body. Matches the hero/opt-in threshold. */
@media (max-width: 760px) {
  .meet-norman-head { grid-template-columns: 1fr; }
  .mn-photo .norman-portrait { margin-inline: 0; }
  .mn-photo .norman-portrait-caption { text-align: left; }
}

/* ============================================================
   THANK-YOU PAGE — design pass, 2026-09-03
   Brings thank-you.html in line with the landing page. The two pages share
   this stylesheet but almost none of their class names, so the landing-page
   pass reached none of this.

   Already congruent and deliberately left alone: .whatsapp-band is the dark
   peak moment (same --red/ink token as .rating-band), .thanks-questions-list
   already uses the 1px-gap hairline grid, and h1 / .eyebrow / .button come
   from the shared tokens.
   ============================================================ */

/* 1. Question numerals get the same display treatment as the landing page's
      .question-num — values copied so the two read identically. */
.thanks-questions-list .q-num {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.thanks-questions-list .q-num .qn {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink);
}

/* 2. Same orphan fix as the landing page: 7 items on auto-fit tracks left the
      last row with empty cells showing the grid's own background as a grey
      block. The 7th spans the row and centres, as a capstone. */
.thanks-questions-list li:last-child {
  grid-column: 1 / -1;
  align-items: center;
  text-align: center;
}
.thanks-questions-list li:last-child .q-num { justify-content: center; }

/* 3. Matching hover, as on .question-tile. */
.thanks-questions-list li { transition: background 0.15s ease; }
.thanks-questions-list li:hover { background: var(--tint); }

/* 4. The dark band used pure #FFFFFF while .rating-band uses the warm --paper
      token, so side by side the two dark sections read as different whites.
      Aligned to paper. */
.whatsapp-band { color: var(--paper); }
.whatsapp-inner .eyebrow { color: rgba(250, 248, 243, 0.62); }
.whatsapp-inner h2 { color: var(--paper); }
.whatsapp-inner p { color: rgba(250, 248, 243, 0.78); }
.whatsapp-preview-label { color: var(--red-deep); }

/* 5. .band on the landing page borders both edges; this one bordered only the
      bottom, so the seam above it was missing. */
.booking-band { border-block: 1px solid var(--line); }

/* ============================================================
   ARTIFACT MOCKUP — §9 "What you get", 2026-09-03
   A CSS-built stand-in for the PDF cover and the scorecard, since the real
   PDF does not exist yet. Deliberately not an image: it stays sharp at any
   size, uses the page's own type, and avoids the garbled lettering that image
   generators put on book covers. Doubles as a spec for whoever builds the
   real PDF. Replace with a real export or photograph when available.
   ============================================================ */
.artifact-duo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 3vw, 34px);
  margin: 0 0 clamp(30px, 4vw, 48px);
}
.artifact {
  margin: 0;
  width: 208px;
  aspect-ratio: 1 / 1.414;      /* A4 */
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 28px rgba(22, 19, 15, 0.13), 0 2px 6px rgba(22, 19, 15, 0.08);
}

/* --- the PDF cover: ink, matching the page's dark peak treatment --- */
.artifact-cover {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.ac-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
}
.ac-title {
  margin: 1.4rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.ac-sub {
  margin: 0.7rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: rgba(250, 248, 243, 0.72);
}
.ac-by {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(250, 248, 243, 0.55);
}

/* --- the scorecard: paper, seven blank rows --- */
.artifact-sheet {
  background: var(--card);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.as-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-deep);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.as-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.as-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.58rem;
  line-height: 1.2;
  color: var(--muted);
}
.as-rows li span { font-family: var(--font-mono); letter-spacing: 0.02em; }
/* the blank score box */
.as-rows li i {
  flex: none;
  width: 22px;
  height: 15px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
}
.as-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 2px solid var(--ink);
  font-family: var(--font-mono);
}
.as-total span {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.as-total strong { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }

@media (max-width: 520px) {
  /* Two A4 cards side by side stop working below ~520px. */
  .artifact-duo { gap: 14px; }
  .artifact { width: 152px; padding: 16px 14px; }
  .ac-title { font-size: 1.2rem; margin-top: 1rem; }
  .ac-sub { font-size: 0.64rem; }
  .as-rows li { font-size: 0.5rem; padding: 4px 0; }
  .as-rows li i { width: 17px; height: 12px; }
}

/* Case-study images in colour, matching the headshot and Alvin's photo. The
   grayscale filter came from the original "grayscale documentary" spec, written
   when every image here was to be generated stock; it was dropped from the
   portrait on 2026-09-03 and these follow. */
img.cs-image { filter: none; }