/* ============================================================
   Remade.md — section styles
   Hero (3 directions) · TrustBar · Problem · Program · Proof ·
   Founder · FinalCTA · shared section-header system
   ============================================================ */

/* ============================================================
   Shared section header — one eye path, enforced.
   Theatrical rhythm (default): wide-shot scale, ghost numeral.
   Tight rhythm: compact editorial header.
   ============================================================ */
section { position: relative; isolation: isolate; }
/* Anchor clearance — the nav is fixed at 64px, so a raw #hash jump lands
   with the section heading tucked under it. */
section[id] { scroll-margin-top: 88px; }

.section-pad { padding-block: 96px; }
@media (min-width: 1024px) { .section-pad { padding-block: 128px; } }
html[data-rhythm="theatrical"] .section-pad { padding-block: clamp(112px, 18vh, 176px); }

/* Consecutive sections on the same surface (02 → 03): tighten the seam
   and mark it with a full-width hairline instead of doubled air. */
section[data-surface="paper"] + section[data-surface="paper"] {
  border-top: 1px solid var(--rule);
  padding-top: 64px;
}
@media (min-width: 1024px) {
  section[data-surface="paper"] + section[data-surface="paper"] {
    padding-top: 80px;
  }
}

.section-header {
  position: relative;
  margin-inline: auto;
  display: flex;
  max-width: 56rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--accent);
}
.section-label .rule { height: 1px; width: 32px; background: var(--accent-dim); }
.section-label .idx { color: var(--meta); }

.section-title {
  margin-top: 24px;
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
html[data-rhythm="theatrical"] .section-title { font-size: clamp(2.75rem, 6.2vw, 5.75rem); }
.section-title .payoff { color: var(--accent); }

/* Balance the wrapped lines of long setup headlines so the short clause
   ("this.") does not strand on its own line under a full-width setup. */
.section-title .reveal-line > span,
.founder-h2 .reveal-line > span { text-wrap: balance; }

.section-subline {
  margin-top: 28px;
  max-width: 42rem;
  font-size: 18px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--foreground) 85%, transparent);
}
@media (min-width: 768px) { .section-subline { font-size: 20px; } }

/* Ghost numeral — wide-shot depth behind each header */
.ghost-num {
  position: absolute;
  inset-inline: 0;
  top: -0.18em;
  text-align: center;
  z-index: -1;
  font-family: var(--font-serif);
  font-size: clamp(12rem, 28vw, 26rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--foreground) 9%, transparent);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
html[data-rhythm="tight"] .ghost-num { display: none; }

/* ============================================================
   HERO — shared stage
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  padding: 112px 24px 40px;
  overflow: clip;
}
@media (min-width: 1024px) { .hero { padding: 128px 48px 40px; } }

.hero-stage {
  position: relative;
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 64rem;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 56px;
  text-align: center;
  will-change: transform;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--mint);
  min-height: 1.4em;
}
@media (min-width: 768px) {
  .hero-kicker { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .hero-kicker { font-size: 12px; letter-spacing: 0.4em; }
}
.hero-kicker .caret {
  display: none;
  margin-left: 2px;
  border-left: 1px solid var(--mint);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-h1 {
  margin-top: 40px;
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3.25rem, 10vw, 8.25rem);
  line-height: 0.93;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.hero-h1 .payoff { color: var(--mint); }

/* Mobile only: balance wrapped headline lines to avoid orphaned words */
@media (max-width: 767px) {
  .hero-h1 .reveal-line > span { text-wrap: balance; }
}

.hero-sub {
  margin-top: 40px;
  max-width: 32rem;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: oklch(0.965 0.005 90 / 0.9);
  white-space: pre-line;
}
@media (min-width: 640px) { .hero-sub { font-size: 17px; } }
/* Mobile only: the authored pre-line break becomes a mid-sentence orphan
   at narrow widths — let text reflow normally instead */
@media (max-width: 767px) {
  .hero-sub { white-space: normal; }
}

.hero-ctas {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (min-width: 640px) { .hero-ctas { flex-direction: row; } }

/* Proof chips — film-credit strip */
.hero-chips {
  margin-inline: auto;
  width: 100%;
  max-width: 1600px;
}
.hero-chips-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid oklch(0.965 0.005 90 / 0.1);
}
@media (min-width: 768px) { .hero-chips-grid { grid-template-columns: repeat(3, 1fr); } }
.hero-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px 24px;
  text-align: center;
}
.hero-chip + .hero-chip { border-top: 1px solid oklch(0.965 0.005 90 / 0.1); }
@media (min-width: 768px) {
  .hero-chip + .hero-chip { border-top: 0; border-left: 1px solid oklch(0.965 0.005 90 / 0.1); }
  .hero-chip { padding-inline: 32px; }
}
.hero-chip .value {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--bone);
}
@media (min-width: 768px) { .hero-chip .value { font-size: 36px; } }
/* Alpha raised from 0.7 for legibility over the hero photo.
   Set as quiet mono sentences, not tracked caps: these are proof claims
   the reader has to actually read, not metadata labels. */
.hero-chip .label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: oklch(0.965 0.005 90 / 0.85);
}

/* ---------- Hero atmosphere layers (variant-gated) ---------- */
.hero-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Aurora — two drifting mint fields + floor vignette */
.hero-aurora {
  opacity: var(--atmosphere);
  will-change: transform;
}
.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  inset: -20%;
}
.hero-aurora::before {
  background: radial-gradient(ellipse 42% 32% at 50% 42%, oklch(0.905 0.045 165 / 0.13), transparent 70%);
  animation: aurora-a calc(26s / max(var(--motion), 0.001)) ease-in-out infinite alternate;
}
.hero-aurora::after {
  background:
    radial-gradient(ellipse 30% 24% at 38% 50%, oklch(0.755 0.045 165 / 0.07), transparent 70%),
    radial-gradient(ellipse 90% 42% at 50% 112%, oklch(0.275 0.02 170 / 0.55), transparent 65%);
  animation: aurora-b calc(34s / max(var(--motion), 0.001)) ease-in-out infinite alternate;
}
@keyframes aurora-a {
  from { transform: translate(-3%, -2%) scale(1); }
  to   { transform: translate(3%, 3%) scale(1.12); }
}
@keyframes aurora-b {
  from { transform: translate(2%, 1%); }
  to   { transform: translate(-3%, -2%); }
}
html[data-motion="0"] .hero-aurora::before,
html[data-motion="0"] .hero-aurora::after { animation: none; }

/* Grid that slowly pans */
.hero-gridfield {
  opacity: 0.6;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.018) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.018) 1px, transparent 1px);
  background-size: 72px 72px;
  will-change: transform;
}

/* Cursor light — desktop only */
.hero-cursor-light {
  opacity: 0;
  transition: opacity 1.2s ease;
  background: radial-gradient(circle 320px at var(--cx, 50%) var(--cy, 40%), oklch(0.905 0.045 165 / 0.06), transparent 70%);
}
@media (pointer: fine) { .hero-cursor-light.is-live { opacity: var(--atmosphere); } }

/* Spotlight — title-sequence variant: cone + heavy vignette */
.hero-spotlight {
  opacity: 0;
  transition: opacity 2s ease;
  background:
    radial-gradient(ellipse 46% 38% at 50% 38%, oklch(0.905 0.045 165 / calc(0.1 * var(--atmosphere))), transparent 68%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 38%, oklch(0.1 0.008 170 / 0.85) 100%);
}

/* Monolith — the three R-mark slabs as parallax architecture */
.hero-monolith { display: flex; align-items: center; justify-content: center; }
.hero-monolith svg {
  width: min(120vmin, 1100px);
  height: auto;
  color: var(--mint);
  opacity: calc(0.05 * var(--atmosphere));
}
.hero-monolith .slab { will-change: transform; }

/* Variant gating */
html[data-hero="title"] .v-not-title { display: none; }
html[data-hero="aurora"]   .v-title-only, html[data-hero="aurora"]   .v-monolith-only { display: none; }
html[data-hero="title"]    .v-aurora-only, html[data-hero="title"]   .v-monolith-only { display: none; }
html[data-hero="monolith"] .v-title-only { display: none; }
html[data-hero="title"] .hero-spotlight { opacity: 1; }
html[data-hero="title"] .hero-kicker .caret { display: inline-block; }

/* Title variant — Ken Burns settle is driven by remade-motion.js */

/* ============================================================
   TrustBar — marquee
   ============================================================ */
.trustbar {
  position: relative;
  overflow: hidden;
  border-block: 1px solid oklch(0.965 0.005 90 / 0.1);
  padding-block: 28px;
}
.trustbar-label {
  padding-inline: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--stone);
}
.marquee-mask {
  margin-top: 24px;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}
.marquee-track {
  display: flex;
  align-items: baseline;
  gap: 56px;
  width: max-content;
  padding-right: 56px;
  will-change: transform;
}

.marquee-item {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: oklch(0.965 0.005 90 / 0.7);
}
.marquee-item .dot {
  display: inline-block;
  margin-left: 56px;
  height: 4px;
  width: 4px;
  transform: translateY(-4px);
  background: oklch(0.905 0.045 165 / 0.5);
}

/* ============================================================
   Problem — three sourced quotes
   ============================================================ */
.signal-grid {
  margin-top: 64px;
  display: grid;
  gap: 1px;
  background: color-mix(in oklab, var(--rule) 60%, transparent);
}
@media (min-width: 768px) { .signal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .signal-grid { margin-top: 80px; } }

.signal-card {
  display: flex;
  flex-direction: column;
  background: var(--background);
  padding: 28px;
  transition: background-color 0.3s ease;
}
@media (min-width: 768px) { .signal-card { padding: 32px; } }
.signal-card:hover { background: color-mix(in oklab, var(--background) 92%, var(--mint)); }
.signal-card h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.signal-card .body {
  margin-top: 12px;
  flex: 1;
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 92%, transparent);
}
.signal-card .source {
  margin-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  /* tracking stepped back one notch so the bigger type keeps the same
     set width inside the 3-up card */
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--meta);
}

/* ============================================================
   Program — three expandable step cards + section CTA
   ============================================================ */
.steps-wrap { position: relative; margin-top: 80px; }
.steps-connector {
  position: absolute;
  left: 0; right: 0; top: 48px;
  display: none;
  height: 1px;
  background: repeating-linear-gradient(
    to right,
    color-mix(in oklab, var(--accent) 40%, transparent) 0 4px,
    transparent 4px 10px
  );
}
@media (min-width: 768px) { .steps-connector { display: block; } }

.steps-grid { display: grid; gap: 24px; }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }

.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: color-mix(in oklab, var(--card) 40%, var(--background));
  padding: 28px;
  transition: transform 0.5s var(--ease-soft), border-color 0.5s ease;
}
.step-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--accent) 60%, transparent); }

.step-node {
  position: absolute;
  top: -12px;
  left: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--background);
  padding-inline: 8px;
}
.step-node .pip {
  height: 8px; width: 8px;
  background: var(--accent);
}
.step-node .num {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--meta);
}
.step-card h3 {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.step-card .step-body {
  margin-top: 20px;
  flex: 1;
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}

.step-toggle {
  margin-top: 28px;
  display: flex;
  /* 44px floor — the toggle is the only tap target inside the card */
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  border-top: 1px solid color-mix(in oklab, var(--rule) 60%, transparent);
  padding-top: 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  transition: color 0.2s ease;
  width: 100%;
}
.step-toggle:hover { color: var(--foreground); }
.step-toggle .plus { transition: transform 0.3s var(--ease-soft); font-size: 14px; }
.step-card.is-open .step-toggle .plus { transform: rotate(45deg); }
.step-toggle .toggle-open { display: inline; }
.step-toggle .toggle-close { display: none; }
.step-card.is-open .toggle-open { display: none; }
.step-card.is-open .toggle-close { display: inline; }

.step-proof {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease-soft);
}
.step-card.is-open .step-proof { grid-template-rows: 1fr; }
.step-proof > div { overflow: hidden; }
.step-proof-inner {
  margin-top: 16px;
  border-left: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
  padding-left: 16px;
}
.step-proof-inner .client {
  font-family: var(--font-mono);
  font-size: 12px;
  /* tracking stepped back one notch to hold the line inside the indent */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--meta);
}
.step-proof-inner .proof-body {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}

.section-cta {
  margin-inline: auto;
  margin-top: 80px;
  display: flex;
  max-width: 36rem;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.section-cta .line {
  width: 100%;
  font-family: var(--font-serif);
  font-size: clamp(1.875rem, 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
/* Reassurance copy at the booking moment — a quiet mono sentence, not a
   tracked-caps label. It has to be read, so it is set to be read. */
.section-cta .note {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--meta);
}
.section-cta .btn { margin-top: 28px; }

/* ============================================================
   Proof — featured case + testimonials
   ============================================================ */
.proof-grid { margin-top: 56px; display: grid; gap: 24px; }
@media (min-width: 1024px) {
  .proof-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr); }
}

.case-card {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: color-mix(in oklab, var(--card) 40%, transparent);
  padding: 28px;
}
@media (min-width: 768px) { .case-card { padding: 36px; } }

.case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.case-head .feat {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
}
.case-head .badge {
  display: inline-block;
  text-align: left;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: 2px;
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.case-card h3 {
  margin-top: 32px;
  max-width: 48rem;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 6.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.case-card .case-body {
  margin-top: 20px;
  max-width: 42rem;
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}
@media (min-width: 768px) { .case-card .case-body { font-size: 18px; } }

.case-stats {
  margin-top: 36px;
  display: grid;
  gap: 24px;
  border-block: 1px solid color-mix(in oklab, var(--rule) 70%, transparent);
  padding-block: 24px;
}
@media (min-width: 640px) { .case-stats { grid-template-columns: repeat(3, 1fr); } }
.case-stat .value {
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 4vw, 3.75rem);
  line-height: 1;
  color: var(--foreground);
}
.case-stat .label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--meta);
}

.testimonial-col { display: grid; gap: 24px; }
.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: color-mix(in oklab, var(--card) 35%, transparent);
  padding: 24px;
}
@media (min-width: 768px) { .testimonial { padding: 28px; } }
.testimonial .quote {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
@media (min-width: 768px) { .testimonial .quote { font-size: 24px; } }
.testimonial footer { margin-top: 20px; }
.testimonial .name {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.testimonial .role {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--meta);
}

/* ============================================================
   Founder
   ============================================================ */
.founder-grid { display: grid; gap: 48px; }
@media (min-width: 1024px) {
  .founder-grid { grid-template-columns: 7fr 1fr 4fr; align-items: center; }
}

.founder-h2 {
  margin-top: 24px;
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 4.5vw, 4.25rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.founder-h2 span { display: block; }
.founder-h2 .payoff { color: var(--accent); }

.founder-body { margin-top: 32px; max-width: 42rem; display: grid; gap: 20px; }
.founder-body p {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}
@media (min-width: 768px) { .founder-body p { font-size: 18px; } }

.fire-quote {
  margin-top: 40px;
  max-width: 36rem;
  border-left: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
  padding-left: 20px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
@media (min-width: 768px) { .fire-quote { font-size: 30px; } }
.fire-quote .payoff { color: var(--accent); }

.founder-portrait { position: relative; will-change: transform; }
@media (max-width: 1023px) {
  /* Center the capped-width portrait so it doesn't leave a lopsided gap
     next to it in the single-column layout */
  .founder-portrait { max-width: 420px; margin-inline: auto; }
}
.founder-portrait .frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: color-mix(in oklab, var(--card) 40%, transparent);
}
.founder-portrait img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  filter: grayscale(20%);
}
.founder-portrait .scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, oklch(0.165 0.01 170 / 0.45), transparent 50%);
}
.founder-portrait figcaption {
  position: absolute;
  bottom: 0; left: 0;
  padding: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  /* tracking stepped back one notch — the caption sits over the portrait */
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mint);
}

.offers-grid {
  margin-top: 64px;
  display: grid;
  gap: 1px;
  background: color-mix(in oklab, var(--rule) 60%, transparent);
}
@media (min-width: 768px) { .offers-grid { grid-template-columns: repeat(3, 1fr); } }
.offer-card { background: var(--background); padding: 28px; transition: background-color 0.3s ease; }
.offer-card:hover { background: color-mix(in oklab, var(--background) 94%, var(--mint)); }
.offer-card .offer-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.offer-card h3 {
  margin-top: 20px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.offer-card p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}

/* ============================================================
   Final CTA — the close
   ============================================================ */
.final-cta {
  position: relative;
  padding-block: 128px;
  overflow: clip;
}
@media (min-width: 1024px) { .final-cta { padding-block: 192px; } }
html[data-rhythm="theatrical"] .final-cta { min-height: 92vh; display: flex; align-items: center; }

.final-cta .top-rule {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, oklch(0.905 0.045 165 / 0.4), transparent);
}
.final-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--atmosphere);
  background: radial-gradient(ellipse 60% 50% at 50% 60%, oklch(0.905 0.045 165 / 0.07), transparent 70%);
}
.final-inner {
  position: relative;
  margin-inline: auto;
  display: flex;
  width: 100%;
  max-width: 64rem;
  flex-direction: column;
  align-items: center;
  padding-inline: 24px;
  text-align: center;
}
.final-h2 {
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--bone);
  will-change: transform;
}
.final-h2 .payoff { color: var(--mint); }
.final-copy { margin-top: 48px; display: flex; flex-direction: column; align-items: center; }
.final-copy .lead {
  max-width: 28rem;
  font-size: 18px;
  line-height: 1.6;
  color: oklch(0.965 0.005 90 / 0.9);
}
/* Same register as .section-cta .note — the close is where the reader is
   deciding, so the reassurance reads as a sentence. */
.final-copy .sub,
.final-copy .scarcity {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--stone);
}
.final-copy .sub { margin-top: 8px; }
.final-copy .btn { margin-top: 40px; padding: 20px 36px; border-radius: 0; }
.final-copy .scarcity { margin-top: 20px; }