:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-logo: 'Darker Grotesque', sans-serif;

  --color-terracotta: #C17B5A;
  --color-terracotta-dark: #A8613F;
  --color-terracotta-deep: #8F4F30;
  --color-terracotta-glow: rgba(193, 123, 90, 0.08);
  --color-gold: #C8963E;

  --color-cream: #F5F0EA;
  --color-warm-linen: #EDE7DD;
  --color-parchment: #F9F5EF;
  --color-bg-surface: #E5DDD3;
  --color-bg-elevated: #DDD4C9;

  --color-dark-brown: #2D2A26;
  --color-warm-charcoal: #3D3833;
  --color-medium-brown: #6B6560;
  --color-warm-gray: #9B9590;
  --color-light-gray: #C8C2BB;

  --divider: rgba(45, 42, 38, 0.12);
  --divider-strong: rgba(45, 42, 38, 0.25);

  --color-text-tertiary: var(--color-medium-brown);

  --section-pad: clamp(80px, 10vw, 140px);
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-cream);
  color: var(--color-warm-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}

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

/* Landing page heading typography (matches original) */
h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-dark-brown);
}

h1 em {
  font-style: italic;
  color: var(--color-terracotta);
  font-weight: 400;
}

h2 {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--color-dark-brown);
  margin-bottom: 24px;
}

h2 em {
  font-style: italic;
  color: var(--color-terracotta);
  font-weight: 400;
}

h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-dark-brown);
  margin-bottom: 16px;
}

.body-large {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
  margin-bottom: 48px;
}

/* Layout max-width utilities (matching original) */
.container-narrow {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-text {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Long-form reading — body prose inside .container-text.
   Scoped to unclassed <p> so .body-large / .founder-text on /become and / keep their own type. */
.container-text > p:not([class]) {
  font-size: 17px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
  margin-bottom: 20px;
}

.container-text > p:not([class]):last-child { margin-bottom: 0; }

/* Prose links only. A button dropped into .container-text is still a button —
   without the :not(), this rule out-specifies .btn-primary and paints the label
   terracotta-on-terracotta with an underline through it. */
.container-text a:not([class*="btn-"]) {
  color: var(--color-terracotta-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.container-text a:not([class*="btn-"]):hover { color: var(--color-terracotta-dark); }

.container-text blockquote {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 12px;
}

.container-text blockquote p {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-dark-brown);
  margin-bottom: 0;
}

/* Section deck — the one line under an H2 on a long-form page.
   Distinct from .body-large: it sits on the prose measure so the deck and the
   body below it share an optical axis, and it reads lighter so the H2 keeps the hierarchy. */
.section-deck {
  font-size: 20px;
  line-height: 1.55;
  color: var(--color-medium-brown);
  max-width: 600px;
  margin: 0 auto 48px;
}

/* Long-form vertical rhythm — stacked content blocks inside one section.
   A heading block already ends on .body-large's 48px; block-to-block is 40px.
   Any SEO page can stack these in any order and keep the beat.
   .note-card + .note-card intentionally overrides this later with -56px (stacked-card effect). */
:is(.container-text, .note-card, .compare-table-wrap, .hero-stats)
+ :is(.container-text, .note-card, .compare-table-wrap, .hero-stats) {
  margin-top: 40px;
}

/* A .note-card usually sits INSIDE .container-text, so the sibling rule above never fires for
   whatever follows it and the next paragraph renders flush against the card. Keep this BEFORE
   `.note-card + .note-card { -56px }` so the stacked-card effect still wins on source order. */
.container-text > .note-card + * {
  margin-top: 40px;
}

/* A steps block ends on its caption; long-form content after it gets the same beat. */
:is(.steps-grid, .steps-distinction)
+ :is(.container-text, .note-card, .compare-table-wrap, .hero-stats) {
  margin-top: 40px;
}

.container-pricing {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.hero-background {
  background-color: var(--color-cream);
  position: relative;
  padding-top: 140px;
  padding-bottom: var(--section-pad);
}

.hero-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, 100%);
  height: 800px;
  background: radial-gradient(ellipse 600px 400px at center 200px, rgba(193, 123, 90, 0.06), transparent 70%);
  pointer-events: none;
}

.section-light { background-color: var(--color-cream); padding: var(--section-pad) 0; }
.section-warm { background-color: var(--color-warm-linen); padding: var(--section-pad) 0; }
.section-dark { background-color: #2D2A26; color: var(--color-cream); }

.btn-primary {
  display: inline-block;
  padding: 16px 36px;
  background-color: var(--color-terracotta);
  color: white;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 100vw;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--color-terracotta-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(193, 123, 90, 0.3);
}

.btn-primary:active { transform: scale(0.97); }

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.answer-serif {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.1;
  color: var(--color-dark-brown);
  margin-top: 12px;
  margin-bottom: 28px;
}

.hero-privacy.hero-privacy-left { text-align: left; }

/* ── Line breaking, site-wide ──
   Previously scoped to .lp-home and .lp-arms, so the nine pages without that wrapper (every SEO
   page) wrapped unbalanced and stranded single words on their own line. Measured 2026-08-28 across
   11 pages at 1440/1200/1024/768/390: 140 widowed last lines, down to 8 in production.
   `balance` evens the lines of short display text; `pretty` protects a long block's last line.
   Any new page inherits both — do not re-scope these to a page wrapper. */
h1,
h2,
.hero-headline,
.final-cta-headline,
.faq-heading,
.h2-spaced,
.section-deck,
.body-large,
.final-cta-body,
.steps-distinction,
.hero-privacy,
.hero-trust,
.microcopy,
.final-cta-microcopy { text-wrap: balance; }

/* Hero subheads run 3-5 lines and balance cleanly. Past ~6 lines Chrome bails on `balance` and the
   block simply wraps as it does today, so this is safe on the long homepage variant too. */
.hero-sub,
.hero-subhead { text-wrap: balance; }

/* Long-form prose can run well past balance's line cap, so it uses `pretty`, which targets the
   last-line widow instead of evening every line. */
.container-text > p { text-wrap: pretty; }

/* ── /become + /coach conversion-page polish (scoped to .lp-arms) ── */
.lp-arms header { padding: 26px 0 0; }
.lp-arms .hero-background { padding-top: 72px; }

.lp-arms .hero-sub { max-width: 560px; }

.lp-home .credibility-grid-4 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
}
.lp-home .credibility-grid-4 .credibility-card:not(:last-child) { border-right: none; }
.lp-home .credibility-grid-4 .credibility-card:nth-child(odd) { border-right: 1px solid var(--divider); }
.lp-home .credibility-grid-4 .credibility-card:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
.lp-home .credibility-grid-4 .credibility-card:nth-child(n+3) { border-bottom: none; }

@media (max-width: 700px) {
  .lp-home .credibility-grid-4 { grid-template-columns: 1fr; }
  .lp-home .credibility-grid-4 .credibility-card:nth-child(odd) { border-right: none; }
  .lp-home .credibility-grid-4 .credibility-card:nth-child(3) { border-bottom: 1px solid var(--divider); }
}

/* §3 is three charges and their consequence, not the four peers .problem-grid models on
   /become and /cli — in a 2x2 the "and so" line read as a fourth alternative-that-fails.
   A 600px measure keeps every charge on one line, which three columns cannot do: the
   longest needs 317px and a third of the container gives ~299px. */
.lp-home .problem-ledger {
  max-width: 600px;
  margin: 0 auto;
}

.lp-home .problem-ledger p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
}

.lp-home .problem-charge {
  padding: 20px 0;
}

/* Rules sit between charges, so the list needs no last-child exception and stays correct
   if a charge is added or removed. */
.lp-home .problem-charge + .problem-charge {
  border-top: 1px solid var(--divider);
}

.lp-home .problem-sum {
  padding-top: 36px;
}

.lp-home .problem-sum p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-dark-brown);
}

/* §4 is the only section where a transformation-note and a steps-distinction stack, and
   at 12px/13px in the same mono they read as two competing captions. Tuck the note up
   against the timeline it captions — the role it already plays in §1 and §6 — so the
   steps-distinction stays the section closer, as in §2 and §3. */
.lp-home .tl-note {
  font-size: 11px;
  margin-top: 16px;
  color: var(--color-text-tertiary);
  opacity: 0.8;
}

/* Sits between pricing and the founder letter's label, inside §10's container. */
.lp-home .qualifier-close { margin-top: 0; margin-bottom: 56px; }

/* Relocated under the CTA microcopy: match its tone so the fine print doesn't
   outweigh the line above it, and break the two blocks apart. */
.lp-home .hero-privacy-left {
  color: var(--color-text-tertiary);
  margin-top: 20px;
}

.lp-home .hero-stats { max-width: 780px; }
.lp-home .hero-stat { padding: 22px 14px; }

/* Home's hero demo is a real debrief, not a reveal — land it almost immediately. */
.lp-home .hero-demo-notification {
  animation-delay: 0.3s;
}

@media (max-width: 640px) {
  .lp-home .hero-stats {
    flex-wrap: wrap;
    border-radius: 24px;
    max-width: 340px;
  }
  .lp-home .hero-stat { flex: 0 0 50%; padding: 18px 10px; }
  .lp-home .hero-stat:nth-child(2n) { border-right: none; }
  .lp-home .hero-stat:nth-child(-n+2) { border-bottom: 1px solid var(--divider); }
}

.lp-arms .hero-kicker,
.lp-home .hero-kicker {
  text-align: left;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.6s ease 0.1s forwards;
}

.lp-arms .hero-demo-window {
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}
.lp-arms .hero-demo-content { min-height: auto; }

.hero-demo-correction {
  margin-top: 14px;
  background: var(--color-terracotta-glow);
  border: 1px solid rgba(193, 123, 90, 0.22);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-warm-charcoal);
}
.hero-demo-correction-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-terracotta);
  margin-bottom: 3px;
}

.lp-arms .pricing-card,
.lp-home .pricing-card {
  box-shadow: 0 2px 4px rgba(45, 42, 38, 0.04), 0 16px 40px rgba(45, 42, 38, 0.06);
}

.lp-arms .tl-card,
.lp-home .tl-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
}
.lp-arms .tc-badge,
.lp-home .tc-badge { margin-top: auto; }

.lp-arms .blindspot-points,
.lp-home .blindspot-points {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lp-arms .metric-label { font-size: 12px; }


.lp-arms .section-cta .h2-spaced { margin-bottom: 40px; }

.tape-signature {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--color-dark-brown);
  margin-top: 28px;
}

.lp-flash {
  max-width: 640px;
  margin: 20px auto 0;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--color-terracotta-glow);
  border: 1px solid var(--color-terracotta);
  color: var(--color-warm-charcoal);
  font-family: var(--font-sans);
  font-size: 15px;
  text-align: center;
}
.lp-flash-alert {
  background: rgba(168, 97, 63, 0.08);
  border-color: var(--color-terracotta-dark);
}

/* ── Creative moves (approved): price anchor, film metaphor, coach signature ── */

/* Move 1 — dramatized price anchor */
.lp-arms .pricing-compare-col:not(.pricing-compare-highlight) { opacity: 0.72; }
.lp-arms .pricing-compare-col:not(.pricing-compare-highlight) .pricing-compare-value,
.lp-arms .pricing-compare-col:not(.pricing-compare-highlight) .pricing-compare-value + .pricing-compare-detail {
  text-decoration: line-through;
  text-decoration-color: var(--color-warm-gray);
  color: var(--color-warm-gray);
}

.lp-home .pricing-compare-col:not(.pricing-compare-highlight) .pricing-compare-value,
.lp-home .pricing-compare-col:not(.pricing-compare-highlight) .pricing-compare-value + .pricing-compare-detail {
  text-decoration: line-through;
  text-decoration-color: var(--color-warm-gray);
  color: var(--color-medium-brown);
}
.lp-arms .pricing-compare-highlight,
.lp-home .pricing-compare-highlight {
  background: rgba(193, 123, 90, 0.14);
  box-shadow: 0 10px 28px rgba(193, 123, 90, 0.16);
}
.lp-arms .pricing-compare-highlight .pricing-compare-value,
.lp-home .pricing-compare-highlight .pricing-compare-value {
  font-size: 44px;
  line-height: 1;
  color: var(--color-terracotta-dark);
}
.lp-arms .pricing-compare-highlight .pc-per,
.lp-home .pricing-compare-highlight .pc-per {
  font-size: 18px;
  font-style: italic;
  color: var(--color-terracotta);
}
.lp-arms .pricing-compare-highlight .pricing-compare-value + .pricing-compare-detail,
.lp-home .pricing-compare-highlight .pricing-compare-value + .pricing-compare-detail {
  font-weight: 600;
  color: var(--color-dark-brown);
}

/* Move 2a — timeline as a film strip (sprocket perforations) */
.lp-arms .tl-dot,
.lp-home .tl-dot {
  width: 13px;
  height: 9px;
  border-radius: 2px;
}

/* Move 2b — film grain inside the hero window */
.lp-arms .hero-demo-window { position: relative; }
.lp-arms .hero-demo-window > * { position: relative; z-index: 1; }
.lp-arms .hero-demo-window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)'/%3E%3C/svg%3E");
}

/* Move 3 — /coach signature: cinematic metric row */
.lp-arms .metric-value {
  font-size: clamp(44px, 6vw, 64px);
  color: var(--color-dark-brown);
}
.lp-arms .metric-item:last-child .metric-value { color: var(--color-terracotta); }

/* Move 4 — /become signature: timeline cards as accumulating archive frames */
.lp-arms .tl-archive .tl-card {
  box-shadow:
    6px -6px 0 0 var(--color-warm-linen),
    6px -6px 0 1px rgba(200, 150, 62, 0.22),
    12px -12px 0 0 var(--color-bg-surface),
    12px -12px 0 1px rgba(200, 150, 62, 0.15);
}

.section-compact { padding: 40px 0; }

.waitlist-backdrop {
  background: rgba(61, 43, 31, 0.7);
}

.waitlist-panel {
  background: var(--color-cream);
}

.waitlist-header {
  background: var(--color-warm-linen);
}

.waitlist-icon {
  background: var(--color-terracotta);
}

.waitlist-close {
  color: var(--color-warm-gray);
}

.waitlist-title {
  color: var(--color-dark-brown);
}

.waitlist-subtitle {
  color: var(--color-warm-charcoal);
}

.waitlist-error {
  background: var(--color-terracotta-glow);
  border: 1px solid rgba(193, 123, 90, 0.2);
  color: var(--color-terracotta);
}

.waitlist-label {
  color: var(--color-dark-brown);
}

.waitlist-email-input {
  border: 1px solid var(--divider);
  background: var(--color-parchment);
  color: var(--color-dark-brown);
}

.waitlist-email-input:focus {
  box-shadow: 0 0 0 3px rgba(193, 123, 90, 0.08);
}

.waitlist-submit {
  background: var(--color-terracotta);
}

.waitlist-submit:hover {
  background: var(--color-terracotta-dark);
}

.waitlist-fine-print {
  color: var(--color-text-tertiary);
}

.waitlist-success-icon {
  background: var(--color-terracotta-glow);
  color: var(--color-terracotta);
}

.waitlist-success-title {
  color: var(--color-dark-brown);
}

.waitlist-success-text {
  color: var(--color-warm-charcoal);
}

.waitlist-success-close {
  color: var(--color-terracotta);
}

.img-cover { object-fit: cover; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  background-color: transparent;
  color: var(--color-terracotta);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid var(--color-terracotta);
  cursor: pointer;
  transition: all 150ms ease-out;
  text-decoration: none;
}

.btn-secondary:hover { background-color: var(--color-terracotta-glow); }

.btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 40px;
  font-size: 16px;
  line-height: 1;
}

header[data-controller~="landing-nav"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: rgba(245, 240, 234, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--divider);
  z-index: 100;
  display: flex;
  align-items: center;
  transition: transform 300ms ease;
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header[data-controller~="landing-nav"].nav-hidden { transform: translateY(-100%); }
header[data-controller~="landing-nav"].nav-scrolled { box-shadow: 0 1px 3px rgba(61, 43, 31, 0.08); }

.logo {
  font-size: 20px;
  font-weight: 600;
  color: var(--color-dark-brown);
  text-decoration: none;
}

.logo span { color: var(--color-terracotta); }

nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

nav a {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-warm-charcoal);
  text-decoration: none;
  transition: color 150ms ease;
}

nav a:hover { color: var(--color-terracotta); }

.nav-cta {
  height: 36px;
  padding: 0 20px;
  font-size: 13px;
}

.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 0;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-dark-brown);
  position: absolute;
  left: 12px;
  transition: all 250ms ease;
}

.nav-hamburger span:nth-child(1) { top: 15px; }
.nav-hamburger span:nth-child(2) { top: 21px; }
.nav-hamburger span:nth-child(3) { top: 27px; }

.nav-open .nav-hamburger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; }
.nav-open .nav-hamburger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.nav-mobile {
  display: none;
}

@media (max-width: 768px) {
  nav { display: none; }
  .nav-hamburger { display: flex; align-items: center; justify-content: center; }

  .nav-mobile {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(245, 240, 234, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 24px;
    display: none;
    flex-direction: column;
    gap: 16px;
    border-bottom: 1px solid var(--divider);
  }

  .nav-open .nav-mobile { display: flex; }

  /* Menu links only — the trial CTA in this menu is a .btn-primary and keeps
     its own white-on-terracotta. Unscoped, this rule out-specifies the button
     and paints the label dark brown on terracotta (~4.1:1, under AA). */
  .nav-mobile a:not([class*="btn-"]) {
    font-size: 16px;
    color: var(--color-dark-brown);
    text-decoration: none;
    padding: 8px 0;
  }

  .nav-mobile a:not([class*="btn-"]):hover { color: var(--color-terracotta); }

  body.nav-locked { overflow: hidden; }
}

.headline-accent {
  font-style: italic;
  color: var(--color-terracotta);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 24px;
  text-align: center;
}

.hero-headline {
  font-size: clamp(36px, 3.8vw, 52px);
  margin-bottom: 24px;
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
  max-width: 520px;
  margin-bottom: 40px;
}

.hero-subhead {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.hero-cta {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

.hero-headline--centered { text-align: center; }
.hero-sub--centered { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }
.hero-cta--centered { justify-content: center; }

.hero-trust {
  animation: fadeUp 0.6s ease forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 600px;
  margin: 48px auto 0;
  position: relative;
  z-index: 1;
  background: var(--color-warm-linen);
  border-radius: 100vw;
  padding: 8px 0;
  box-shadow: 0 2px 8px rgba(61, 43, 31, 0.05), 0 1px 2px rgba(61, 43, 31, 0.04);
}

.hero-stat {
  flex: 1;
  padding: 24px 16px;
  text-align: center;
}

.hero-stat:not(:last-child) {
  border-right: 1px solid var(--divider);
}

.hero-stat-value {
  display: block;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--color-dark-brown);
  line-height: 1.2;
}

.hero-stat-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-warm-charcoal);
  margin-top: 4px;
}

.hero-privacy {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-warm-charcoal);
  font-family: var(--font-mono);
}

.ticker-wrap {
  position: relative;
  overflow: hidden;
}

.ticker-wrap::before,
.ticker-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.ticker-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--color-warm-linen), transparent);
}

.ticker-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--color-warm-linen), transparent);
}

@media (max-width: 768px) {
  .ticker-wrap::before,
  .ticker-wrap::after { width: 60px; }
}

.ticker-track {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

.ticker-content {
  display: flex;
  align-items: center;
  animation: ticker-scroll 45s linear infinite;
}

.ticker-content-reverse {
  animation: ticker-scroll-reverse 50s linear infinite;
}

.ticker-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ticker-item {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-warm-charcoal);
  padding: 0 12px;
  white-space: nowrap;
}

.ticker-dot {
  color: var(--color-terracotta);
  font-size: 8px;
  line-height: 1;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes ticker-scroll-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-content, .ticker-content-reverse { animation: none; }
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
  margin: 0 auto;
}

.problem-cell {
  padding: 32px;
  border-bottom: 1px solid var(--divider);
  text-align: left;
}

.problem-cell p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
}

.problem-cell strong {
  color: var(--color-dark-brown);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.problem-cell:nth-child(odd) {
  border-right: 1px solid var(--divider);
}

.problem-cell:nth-child(n+3) {
  border-bottom: none;
}

@media (max-width: 640px) {
  .problem-grid { grid-template-columns: 1fr; }
  .problem-cell:nth-child(odd) { border-right: none; }
  .problem-cell { border-bottom: 1px solid var(--divider); }
  .problem-cell:last-child { border-bottom: none; }
}

.sarah-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--divider-strong);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .sarah-sticky { position: sticky; top: 120px; }
}

.sarah-metrics {
  display: flex;
  border-top: 1px solid var(--divider);
  margin-top: 32px;
}

.sarah-metric {
  flex: 1;
  text-align: center;
  padding: 24px 16px;
}

.sarah-metric:not(:last-child) {
  border-right: 1px solid var(--divider);
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--color-terracotta);
  margin-bottom: 4px;
}

.stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-warm-charcoal);
}

.tl-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.tl-row-top { margin-bottom: 28px; }
.tl-row-top .tl-card:nth-child(1) { grid-column: 1; }
.tl-row-top .tl-card:nth-child(2) { grid-column: 3; }
.tl-row-top .tl-card:nth-child(3) { grid-column: 5; }

.tl-row-bottom { margin-top: 28px; }
.tl-row-bottom .tl-card:nth-child(1) { grid-column: 2; }
.tl-row-bottom .tl-card:nth-child(2) { grid-column: 4; }

.tl-track {
  position: relative;
  height: 2px;
  background: var(--divider);
}

.tl-track-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-gold);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(200, 150, 62, 0.3);
  transition: width 2s ease;
}

.tl-track.revealed .tl-track-progress { width: 100%; }

.tl-dots {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: -5px;
  left: 10%;
  right: 10%;
}

.tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-warm-linen);
  border: 1.5px solid var(--color-gold);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tl-track.revealed .tl-dot {
  opacity: 1;
  transform: scale(1);
}

.tl-track.revealed .tl-dot:nth-child(1) { transition-delay: 0.4s; }
.tl-track.revealed .tl-dot:nth-child(2) { transition-delay: 0.8s; }
.tl-track.revealed .tl-dot:nth-child(3) { transition-delay: 1.2s; }
.tl-track.revealed .tl-dot:nth-child(4) { transition-delay: 1.6s; }
.tl-track.revealed .tl-dot:nth-child(5) { transition-delay: 2.0s; }

.tl-card {
  padding: 16px;
  border-left: 2px solid var(--color-gold);
  background: var(--color-bg-surface);
  border-radius: 0 6px 6px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tl-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(61, 43, 31, 0.06);
}

.tc-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-terracotta);
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.tc-body {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.tc-body strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-dark-brown);
  font-size: 13px;
}

.tc-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-top: 8px;
  display: inline-block;
}

@media (max-width: 768px) {
  .tl-row { grid-template-columns: 1fr; }
  .tl-row-top .tl-card:nth-child(1),
  .tl-row-top .tl-card:nth-child(2),
  .tl-row-top .tl-card:nth-child(3),
  .tl-row-bottom .tl-card:nth-child(1),
  .tl-row-bottom .tl-card:nth-child(2) { grid-column: 1; }
  .tl-track { display: none; }
}

.feature-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: block;
  color: var(--color-terracotta);
}


.h2-spaced { margin-bottom: var(--section-pad); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.testimonial-cell {
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.testimonial-cell blockquote {
  flex: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.625;
  color: var(--color-warm-charcoal);
  margin-bottom: 24px;
}

.testimonial-emphasis {
  color: var(--color-dark-brown);
  font-style: normal;
  font-weight: 500;
}

.testimonial-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark-brown);
}

.testimonial-role {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-cell:not(:nth-child(3n)) {
  border-right: 1px solid var(--divider);
}

.testimonial-cell:nth-child(-n+3) {
  border-bottom: 1px solid var(--divider);
}

@media (max-width: 1024px) {
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-cell:not(:nth-child(3n)) { border-right: none; }
  .testimonial-cell:nth-child(-n+3) { border-bottom: none; }
  .testimonial-cell:nth-child(odd) { border-right: 1px solid var(--divider); }
  .testimonial-cell { border-bottom: 1px solid var(--divider); }
  .testimonial-cell:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 768px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-cell { border-right: none !important; border-bottom: 1px solid var(--divider); }
  .testimonial-cell:last-child { border-bottom: none; }
}

.founder-letter {
  border-left: 3px solid var(--color-terracotta);
  padding: 40px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-warm-linen);
  border-radius: 0 8px 8px 0;
}

.founder-text {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
  font-style: italic;
  margin-bottom: 32px;
}

.founder-attribution {
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  color: var(--color-terracotta);
}

.pricing-card {
  padding: 48px 40px;
  border: 1px solid var(--divider-strong);
  border-radius: 8px;
  background: var(--color-parchment);
  margin-bottom: 40px;
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 16px;
}

.pricing-dollar {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: 400;
  color: var(--color-dark-brown);
  line-height: 1;
}

.pricing-period {
  font-size: 16px;
  color: var(--color-text-tertiary);
}

.pricing-tagline {
  font-size: 15px;
  color: var(--color-warm-charcoal);
  margin-bottom: 40px;
}

.pricing-tagline strong {
  color: var(--color-terracotta);
  font-weight: 500;
}

.pricing-outcomes {
  text-align: left;
  max-width: 440px;
  margin: 0 auto 40px;
}

.pricing-outcome {
  padding: 16px 0;
  font-size: 15px;
  color: var(--color-dark-brown);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.pricing-outcome:last-child { border-bottom: none; }

.pricing-outcome::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terracotta);
  margin-top: 8px;
  flex-shrink: 0;
}

.roi-callout {
  background: var(--color-terracotta-glow);
  border-radius: 8px;
  padding: 24px;
  text-align: left;
  max-width: 440px;
  margin: 0 auto 40px;
}

.roi-callout p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
}

.roi-callout strong {
  color: var(--color-terracotta);
  font-weight: 500;
}

.pricing-features {
  list-style: none;
  text-align: left;
  max-width: 440px;
  margin: 0 auto 40px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 24px;
}

.pricing-features li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text-tertiary);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pricing-features li::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--divider-strong);
  margin-top: 7px;
  flex-shrink: 0;
}

.pricing-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (max-width: 480px) {
  .pricing-features { grid-template-columns: 1fr; }
}

.faq-heading {
  margin-bottom: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--divider);
}

.faq-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20px 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-dark-brown);
  text-align: left;
  gap: 16px;
}

.faq-button:hover { color: var(--color-terracotta); }

.faq-indicator {
  font-size: 20px;
  font-weight: 300;
  color: var(--color-warm-charcoal);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
  transition: transform 200ms ease;
}

.faq-open .faq-indicator { transform: rotate(45deg); }
.faq-open .faq-button { color: var(--color-terracotta); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}

.faq-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer-inner p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
  padding-bottom: 20px;
}

footer {
  background-color: var(--color-cream);
  color: var(--color-warm-charcoal);
  padding: 32px 48px;
  border-top: 1px solid var(--divider);
}

footer a {
  text-decoration: none;
  transition: color 150ms ease;
}

footer a:hover { color: var(--color-terracotta); }

@media (max-width: 768px) {
  footer { padding: 24px 20px; }
}

/* Debrief specimen — a faithful still of the real daily debrief UI.
   Values mirror app/views/debrief_mailer/daily_debrief.html.erb so the page shows
   the artifact people actually receive rather than a marketing approximation. */
.debrief-specimen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 48px auto 0;
  align-items: start;
}

.debrief-card {
  background-color: var(--color-cream);
  border-radius: 8px;
  padding: 20px 24px;
  border: 1px solid var(--divider);
}

.debrief-card-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-medium-brown);
  margin: 0 0 14px;
}

.debrief-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
}

.debrief-row-name {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-dark-brown);
}

.debrief-row-value {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-medium-brown);
  white-space: nowrap;
}

.debrief-bar {
  height: 6px;
  background-color: var(--color-bg-surface);
  margin-bottom: 12px;
  overflow: hidden;
}

.debrief-bar-fill {
  display: block;
  height: 6px;
  background-color: var(--color-terracotta);
}

.debrief-note {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-warm-gray);
  margin: 8px 0 0;
}

.debrief-band {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 12px 0 4px;
}

.debrief-band:first-of-type { margin-top: 0; }
.debrief-band--now { color: var(--color-terracotta); }
.debrief-band--scheduled { color: var(--color-warm-charcoal); }
.debrief-band--waiting { color: var(--color-medium-brown); }

.debrief-entry {
  padding: 7px 0 9px;
}

.debrief-entry-text {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-dark-brown);
  margin: 0;
}

.debrief-entry--now .debrief-entry-text { font-weight: 600; }

.debrief-entry-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0 0;
}

.debrief-chip {
  display: inline-block;
  font-weight: 600;
  border-radius: 9999px;
  padding: 1px 8px;
}

.debrief-chip--you {
  background-color: var(--color-terracotta);
  color: var(--color-parchment);
}

.debrief-chip--other {
  background-color: var(--color-warm-linen);
  color: var(--color-medium-brown);
}

.debrief-meta-sep {
  color: var(--color-light-gray);
  padding: 0 5px;
}

.debrief-due {
  font-weight: 600;
  color: var(--color-terracotta);
}

@media (max-width: 768px) {
  .debrief-specimen-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* Global site footer (shared/_site_footer) — Option B, the contact sheet */
.site-footer { padding: 56px 48px 32px; }

.site-footer-inner { max-width: 1100px; margin: 0 auto; }

.site-footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
}

.site-footer-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-medium-brown);
  margin: 12px 0 0;
  max-width: 30ch;
}

/* Beats the bare `nav { display: none }` header rule at <=768px (landing.css:727),
   which would otherwise hide these columns on every mobile viewport. */
.site-footer-col { display: block; }

.site-footer-colhead {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  margin: 0 0 16px;
}

.site-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.site-footer-links a {
  font-size: 14px;
  color: var(--color-medium-brown);
}

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}

.site-footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-warm-gray);
  margin: 0;
}

.site-footer-trust {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--color-medium-brown);
  margin: 0;
}

@media (max-width: 900px) {
  .site-footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px 24px; }
  .site-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-footer { padding: 40px 20px 24px; }
  .site-footer-top { grid-template-columns: 1fr 1fr; }
  .site-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

.legal-content h1 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 8px;
}

.legal-content .legal-updated {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-bottom: 56px;
}

.legal-content h2 {
  font-size: 22px;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--divider);
}

.legal-content h3 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal-content ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.legal-content ul li {
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-content a:hover {
  color: var(--color-terracotta-dark);
}

@media (max-width: 768px) {
  .legal-content { padding: 48px 20px 80px; }
}

.card {
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 4px rgba(45, 42, 38, 0.08);
  transition: all 250ms ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(45, 42, 38, 0.12);
}

.card-light {
  background: var(--color-parchment);
  border: 1px solid var(--color-light-gray);
}

.card-dark {
  background: linear-gradient(135deg, rgba(61, 56, 51, 0.9) 0%, rgba(45, 42, 38, 0.95) 100%);
  border: 1px solid rgba(200, 194, 187, 0.15);
  backdrop-filter: blur(8px);
}

.card-dark:hover {
  border-color: rgba(193, 123, 90, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(193, 123, 90, 0.1);
}

.card-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-warm-linen);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terracotta);
  margin-bottom: 16px;
}

[data-scroll-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-scroll-reveal].revealed {
  opacity: 1;
  transform: none;
}

[data-scroll-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-scroll-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0s; }
[data-scroll-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 0.1s; }
[data-scroll-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 0.15s; }
[data-scroll-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 0.2s; }
[data-scroll-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 0.25s; }
[data-scroll-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 0.3s; }

[data-scroll-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

/* Transformation Section (Sarah Lin) */
.transformation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.transformation-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: start;
}

.transformation-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: sticky;
  top: 120px;
}

.transformation-avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 2px solid var(--divider-strong);
  overflow: hidden;
}

.transformation-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transformation-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-dark-brown);
}

.transformation-role {
  font-size: 13px;
  color: var(--color-text-tertiary);
}

.transformation-label {
  text-align: left !important;
}

.transformation-headline {
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.15;
  margin-bottom: 24px;
}

.transformation-body .body-large {
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
  margin-bottom: 40px;
}

/* Before/After grid */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.before-col,
.after-col {
  padding: 32px;
}

.before-col {
  border-right: 1px solid var(--divider);
}

.ba-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.before-col .ba-label { color: var(--color-text-tertiary); }
.after-col .ba-label { color: var(--color-terracotta); }

.before-col p,
.after-col p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
}

/* The coach's own words, set apart from the description of them. */
.ba-quote {
  font-style: italic;
  color: var(--color-dark-brown);
}

/* Metric row */
.metric-row {
  display: flex;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--divider);
}

.metric-item {
  flex: 1;
  padding: 24px 16px;
  text-align: center;
}

.metric-item:not(:last-child) {
  border-right: 1px solid var(--divider);
}

.metric-value {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-terracotta);
  display: block;
}

.metric-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-top: 4px;
  display: block;
}

@media (max-width: 1024px) {
  .transformation-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .transformation-avatar-wrap { position: static; }
  .transformation-label { text-align: center; }
}

@media (max-width: 768px) {
  .transformation-inner { grid-template-columns: 1fr; }
  .transformation-avatar { width: 120px; height: 120px; }
  .before-after { grid-template-columns: 1fr; }
  .before-col { border-right: none; border-bottom: 1px solid var(--divider); }
  .metric-row { flex-direction: column; }
  .metric-item:not(:last-child) { border-right: none; border-bottom: 1px solid var(--divider); }
}

/* Section Dividers */
.section-divider {
  width: 100%;
  height: 1px;
  background: var(--divider);
  max-width: 1200px;
  margin: 0 auto;
}

/* Hero Screenshot (3D perspective) */
.hero-screenshot {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
  transform: perspective(1200px) rotateY(-2deg) rotateX(1deg);
  box-shadow:
    0 2px 4px rgba(61, 43, 31, 0.06),
    0 8px 24px rgba(61, 43, 31, 0.10),
    0 32px 80px rgba(61, 43, 31, 0.12);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* Connective Thread (gold line down the page) */
.thread-container {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
  display: none;
}

@media (min-width: 1025px) {
  .thread-container { display: block; left: 80px; transform: none; }
}

.thread-line {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--color-gold) 0%, rgba(200, 150, 62, 0.2) 100%);
  border-radius: 1px;
}

/* Section CTA (mid-page CTAs) */
.section-cta {
  text-align: center;
  padding-top: 40px;
}

.microcopy {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-tertiary);
}

/* Timeline card staggered entry animations */
[data-scroll-reveal] .tl-row-top .tl-card {
  opacity: 0;
  transform: translateY(-30px);
}

[data-scroll-reveal] .tl-row-bottom .tl-card {
  opacity: 0;
  transform: translateY(30px);
}

[data-scroll-reveal].revealed .tl-row-top .tl-card,
[data-scroll-reveal].revealed .tl-row-bottom .tl-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-scroll-reveal].revealed .tl-row-top .tl-card:nth-child(1) { transition-delay: 0s; }
[data-scroll-reveal].revealed .tl-row-top .tl-card:nth-child(2) { transition-delay: 0.3s; }
[data-scroll-reveal].revealed .tl-row-top .tl-card:nth-child(3) { transition-delay: 0.6s; }
[data-scroll-reveal].revealed .tl-row-bottom .tl-card:nth-child(1) { transition-delay: 0.15s; }
[data-scroll-reveal].revealed .tl-row-bottom .tl-card:nth-child(2) { transition-delay: 0.45s; }

/* Final CTA radial glow */
.final-cta-glow {
  position: relative;
}

.final-cta-glow::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse 600px 300px at center bottom, rgba(193, 123, 90, 0.04), transparent 70%);
  pointer-events: none;
}

/* Final CTA headline */
.final-cta-headline {
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
}

/* Final CTA button (larger) */
.btn-final-cta {
  font-size: 17px;
  padding: 18px 44px;
}

/* Privacy note (final CTA footer) */
.privacy-note {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.privacy-note p {
  line-height: 1.7;
}

/* Marquee hover pause */
.ticker-wrap:hover .ticker-content,
.ticker-wrap:hover .ticker-content-reverse {
  animation-play-state: paused;
}

/* ════════════════════════════════════════════════════════════════════
   HOW IT WORKS — Steps grid
   ════════════════════════════════════════════════════════════════════ */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 960px;
  margin: 48px auto 0;
}

.step-card {
  text-align: center;
  padding: 32px 24px;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-terracotta);
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-terracotta);
  margin-bottom: 20px;
}

.step-card h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-brown);
  margin-bottom: 12px;
}

.step-card p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.steps-distinction {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--color-medium-brown);
  margin-top: 48px;
}

@media (max-width: 768px) {
  .steps-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   CREDIBILITY CARDS — What You Get
   ════════════════════════════════════════════════════════════════════ */

.credibility-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 48px auto 0;
}

.credibility-card {
  padding: 32px;
  text-align: center;
}

.credibility-card:not(:last-child) {
  border-right: 1px solid var(--divider);
}

.credibility-card h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-dark-brown);
  margin: 16px 0 12px;
}

.credibility-card p {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.credibility-card .feature-icon {
  color: var(--color-terracotta);
  margin: 0 auto;
}

.coach-link {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-terracotta);
  text-decoration: none;
  transition: color 150ms ease;
}

.coach-link:hover { color: var(--color-terracotta-dark); }

.testimonial-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.testimonial-grid-3 .testimonial-cell:nth-child(-n+3) {
  border-bottom: none;
}

.testimonial-disclaimer {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-warm-gray);
  margin-top: 32px;
}

@media (max-width: 768px) {
  .testimonial-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .credibility-grid { grid-template-columns: 1fr; }
  .credibility-card:not(:last-child) { border-right: none; border-bottom: 1px solid var(--divider); }
}

/* ════════════════════════════════════════════════════════════════════
   PRICING — Comparison row
   ════════════════════════════════════════════════════════════════════ */

.pricing-comparison {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 640px;
  margin: 40px auto;
  border: 1px solid var(--divider);
  border-radius: 8px;
  overflow: hidden;
}

.pricing-compare-col {
  flex: 1;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pricing-compare-highlight { background: var(--color-terracotta-glow); }

.pricing-compare-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  background: var(--divider);
  position: relative;
}

.pricing-compare-plus {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-warm-linen);
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-terracotta);
}

.pricing-compare-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-medium-brown);
}

.pricing-compare-value {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--color-dark-brown);
}

.pricing-compare-detail {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-warm-charcoal);
}

@media (max-width: 640px) {
  .pricing-comparison { flex-direction: column; }
  .pricing-compare-divider { width: 100%; height: 1px; }
  .pricing-compare-plus { top: -14px; }
}

.pricing-features-grouped {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
  padding: 24px 0;
  border-top: 1px solid var(--divider);
  text-align: left;
}

.pricing-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 12px;
}

.pricing-features-grouped ul { list-style: none; padding: 0; margin: 0; }

.pricing-features-grouped li {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-warm-charcoal);
  padding: 4px 0 4px 14px;
  position: relative;
}

.pricing-features-grouped li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-terracotta);
  opacity: 0.5;
}

@media (max-width: 640px) {
  .pricing-features-grouped { grid-template-columns: 1fr; gap: 20px; }
}

.roi-callout-large { padding: 24px 28px; margin: 24px 0; }

/* ════════════════════════════════════════════════════════════════════
   SARAH — Larger metrics
   ════════════════════════════════════════════════════════════════════ */

.metric-value-sarah {
  font-size: clamp(28px, 3.5vw, 42px);
}

.transformation-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-medium-brown);
  margin-top: 24px;
}

/* ════════════════════════════════════════════════════════════════════
   DARK SECTION — Final CTA
   ════════════════════════════════════════════════════════════════════ */

.final-cta-section {
  background: var(--color-dark-brown);
  color: var(--color-cream);
  padding: var(--section-pad) 0;
  position: relative;
  overflow: hidden;
}

.final-cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(193, 123, 90, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta-section .final-cta-headline {
  font-family: var(--font-serif);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-cream);
  margin-bottom: 20px;
}

.final-cta-section .headline-accent {
  font-style: italic;
  color: var(--color-terracotta);
}

.final-cta-body {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(245, 240, 234, 0.8);
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.final-cta-microcopy { color: rgba(245, 240, 234, 0.6); }

.final-cta-section .btn-primary { font-size: 17px; padding: 18px 44px; }

/* ════════════════════════════════════════════════════════════════════
   HERO DEMO — Animated Game Moment
   ════════════════════════════════════════════════════════════════════ */

.hero-demo-container { perspective: 1200px; }

.hero-demo-window {
  background: var(--color-dark-brown);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(45, 42, 38, 0.15), 0 8px 16px rgba(45, 42, 38, 0.1);
  transform: rotateY(-2deg) rotateX(1deg);
  transition: transform 0.3s ease;
}

.hero-demo-titlebar {
  background: linear-gradient(180deg, #3D3833 0%, #352F2B 100%);
  padding: 12px 16px;
  display: flex;
  align-items: center;
}

.hero-demo-buttons { display: flex; gap: 8px; }

.hero-demo-btn-close,
.hero-demo-btn-minimize,
.hero-demo-btn-maximize {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.hero-demo-btn-close { background: linear-gradient(180deg, #FF6058 0%, #E14942 100%); }
.hero-demo-btn-minimize { background: linear-gradient(180deg, #FFC02E 0%, #DBA21A 100%); }
.hero-demo-btn-maximize { background: linear-gradient(180deg, #2ACB42 0%, #1AAB32 100%); }

.hero-demo-content {
  padding: 32px 24px;
  min-height: 220px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hero-demo-notification {
  background: var(--color-cream);
  border-radius: 10px;
  padding: 16px 20px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-12px);
  animation: heroNotifIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s forwards;
}

.hero-demo-notif-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--color-warm-charcoal);
}

.hero-demo-notif-source {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-dark-brown);
  flex: 1;
}

.hero-demo-notif-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-warm-gray);
}

.hero-demo-notif-body {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-warm-charcoal);
  margin-bottom: 12px;
}

.hero-demo-notif-body strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-dark-brown);
}

.hero-demo-notif-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-terracotta);
  opacity: 0;
  animation: heroNotifIn 0.4s ease 2.5s forwards;
}

@keyframes heroNotifIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Re-arrival on switch. Same spring as the first drop, so a switch reads as another
   debrief landing rather than a slide advancing. */
.hero-demo-notification.is-arriving {
  animation: heroNotifIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Once the controller takes over (.is-stacked), every panel occupies the same grid cell,
   so the window is sized by the tallest card at any width and never jolts on switch.
   Inactive panels use visibility, which also takes them out of the a11y tree and tab order. */
.is-stacked .hero-demo-content {
  display: grid;
  justify-items: center;
  align-items: start;
}

.is-stacked .hero-demo-notification {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
}

.is-stacked .hero-demo-notification.is-active {
  visibility: visible;
  opacity: 1;
}

/* The scrubber reads as a transport bar, not web tabs — you review the tape. */
.debrief-scrubber {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 20px;
  padding-bottom: 8px;
}

.debrief-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  background: none;
  border: none;
  padding: 6px 14px;
  cursor: pointer;
  transition: color 0.25s ease;
}

.debrief-tab:hover { color: var(--color-warm-charcoal); }
.debrief-tab.is-active { color: var(--color-terracotta); }

.debrief-tab:focus-visible {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The playhead is positioned by the controller in px, so it tracks whatever the mono
   labels actually measure rather than assuming equal-width tabs. */
.debrief-playhead {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-terracotta);
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  .hero-demo-content { min-height: 180px; padding: 20px 16px; }
  .debrief-tab { padding: 6px 10px; letter-spacing: 0.08em; }
}

/* ════════════════════════════════════════════════════════════════════
   COACH PAGE — Debrief mockup + problem statements + onboarding callout
   ════════════════════════════════════════════════════════════════════ */

.debrief-mockup {
  background: var(--color-parchment);
  border-left: 3px solid var(--color-terracotta);
  border-radius: 0 8px 8px 0;
  padding: 32px 40px;
  max-width: 640px;
  margin: 48px auto 0;
}

.debrief-mockup-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-terracotta);
  margin-bottom: 4px;
}

.debrief-mockup-date {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-warm-gray);
  margin-bottom: 24px;
}

.debrief-entry {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
}

.debrief-entry:last-of-type { border-bottom: none; }

.debrief-body {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.debrief-body strong {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-dark-brown);
}

.debrief-coaching-close {
  border-left: 3px solid var(--color-terracotta);
  padding: 16px 20px;
  background: var(--color-warm-linen);
  border-radius: 0 8px 8px 0;
  margin-top: 16px;
}

.debrief-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.debrief-annotation {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--color-medium-brown);
  margin-top: 24px;
}

.session-contrast-muted {
  color: var(--color-warm-gray);
  background: var(--color-bg-surface);
}

.session-contrast-muted p {
  color: var(--color-warm-gray);
}

.coach-problems {
  max-width: 640px;
  margin: 40px auto 0;
}

.coach-problem {
  padding: 20px 0;
  border-bottom: 1px solid var(--divider);
}

.coach-problem:last-child { border-bottom: none; }

.coach-problem p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.coach-problem strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-dark-brown);
}

.coach-onboarding-callout {
  border-left: 3px solid var(--color-terracotta);
  padding: 20px 24px;
  background: var(--color-warm-linen);
  border-radius: 0 8px 8px 0;
  margin-top: 40px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.coach-onboarding-callout p {
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.coach-onboarding-callout strong {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-dark-brown);
}

@media (max-width: 640px) {
  .debrief-mockup { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal] { opacity: 1; transform: none; transition: none; }
  [data-scroll-reveal-stagger] > * { opacity: 1; transform: none; transition: none; }
  .hero-headline, .hero-subhead, .hero-cta, .hero-trust, .hero-kicker { animation: none; opacity: 1; }
  .tl-dot { opacity: 1; transform: none; transition: none; }
  [data-scroll-reveal] .tl-row-top .tl-card,
  [data-scroll-reveal] .tl-row-bottom .tl-card { opacity: 1; transform: none; transition: none; }
  .tl-track-progress { width: 100% !important; }
  .hero-demo-notification { opacity: 1; transform: none; animation: none; }
  .lp-home .hero-demo-notification { animation: none; }
  .hero-demo-notification.is-arriving { animation: none; }
  .hero-demo-notif-badge { opacity: 1; animation: none; }
  .debrief-playhead { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   SECURITY & PRIVACY PAGE  (/security)
   ═══════════════════════════════════════════════════════════════════ */

.sec-topbar {
  background: var(--color-cream);
  border-bottom: 1px solid var(--divider);
}
.sec-topbar-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec-topbar-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.sec-topbar-nav a {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-warm-charcoal);
  text-decoration: none;
  transition: color 150ms ease-out;
}
.sec-topbar-nav a:hover { color: var(--color-terracotta); }

/* Hero */
.sec-hero { padding-bottom: 24px; }
.sec-hero-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-dark-brown);
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 14px 0 20px;
}
.sec-hero-sub {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* Data-flow diagram */
.sec-flow-group {
  max-width: 62rem;
  margin: 44px auto 0;
  padding: 0 24px;
}
.sec-flow-label {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-terracotta);
  margin-bottom: 4px;
}
.sec-flow-label-alt {
  color: var(--color-medium-brown);
  margin-top: 34px;
}
.sec-flow-fallback { opacity: 0.86; }
.sec-node-cloud {
  border-style: dashed;
  border-color: var(--color-medium-brown);
}

.sec-flow {
  max-width: 60rem;
  margin: 12px auto 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.sec-node {
  flex: 1 1 200px;
  max-width: 260px;
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.sec-node-local { border-color: var(--color-terracotta); box-shadow: 0 0 0 1px var(--color-terracotta); }
.sec-node-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-dark-brown);
}
.sec-node-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-medium-brown);
}
.sec-arrow {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 78px;
}
.sec-arrow-mark {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-terracotta);
  line-height: 1;
}
.sec-arrow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--color-medium-brown);
  text-align: center;
}
.sec-flow-caption {
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--color-medium-brown);
  margin: 22px auto 0;
  max-width: 48ch;
}

/* Promises */
.sec-promises {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.sec-promise {
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 14px;
  padding: 24px 26px;
}
.sec-promise-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-terracotta-glow);
  color: var(--color-terracotta);
  margin-bottom: 14px;
}
.sec-promise-icon svg { display: block; }
.sec-promise-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-dark-brown);
  margin: 0 0 8px;
}
.sec-promise-desc {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-medium-brown);
  margin: 0;
}
.sec-promise-desc em { font-style: italic; color: var(--color-warm-charcoal); }

/* Subprocessors */
.sec-vendors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  margin-top: 44px;
}
.sec-vendor {
  border-top: 1px solid var(--divider);
  padding-top: 16px;
}
.sec-vendor-name {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-dark-brown);
  margin-bottom: 4px;
}
.sec-vendor-role {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-medium-brown);
}

/* Technical facts */
.sec-tech {
  max-width: 44rem;
  margin: 48px auto 0;
  border: 1px solid var(--divider);
  border-radius: 14px;
  overflow: hidden;
}
.sec-tech-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 16px 24px;
}
.sec-tech-row + .sec-tech-row { border-top: 1px solid var(--divider); }
.sec-tech-key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  padding-top: 2px;
}
.sec-tech-val {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-warm-charcoal);
  margin: 0;
}

/* Honest note */
.sec-honest {
  max-width: 56ch;
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-medium-brown);
}

/* CTA */
.sec-cta h2 { margin-bottom: 16px; }
.sec-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.sec-inline-link {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease-out;
}
.sec-inline-link:hover { border-bottom-color: var(--color-terracotta); }

/* Hero privacy line link (home) */
.hero-privacy-link {
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .sec-topbar-inner { padding: 16px 20px; }
  .sec-topbar-nav { gap: 18px; }
  .sec-promises,
  .sec-vendors { grid-template-columns: 1fr; }
  .sec-flow { flex-direction: column; align-items: center; }
  .sec-arrow { flex-direction: row; min-width: 0; }
  .sec-arrow-mark { transform: rotate(90deg); }
  .sec-node { max-width: 340px; width: 100%; }
  .sec-tech-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   /meetings + /cli landing pages
   ============================================================ */

.pricing-comparison-wide { max-width: 880px; }

.pricing-compare-note {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-warm-charcoal);
  opacity: 0.7;
  margin-top: 4px;
}

.terminal-body {
  padding: 24px 20px 28px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-cream);
  text-align: left;
}

.terminal-prompt { color: var(--color-gold); }
.terminal-cmd { color: var(--color-cream); }
.terminal-ok { color: var(--color-gold); }
.terminal-dim { color: var(--color-cream); opacity: 0.55; }

.terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--color-terracotta);
  animation: terminal-blink 1.1s steps(1) infinite;
}

@keyframes terminal-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .terminal-cursor { animation: none; }
}

.works-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.works-with-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-charcoal);
}

.works-with-chip {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-dark-brown);
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 9999px;
  padding: 6px 14px;
}

/* ============================================================
   /meetings-1 + /cli-1 — richer demo components
   ============================================================ */

/* Light product window (app screenshot look) */
.app-window {
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(45, 42, 38, 0.12), 0 8px 16px rgba(45, 42, 38, 0.08);
  max-width: 960px;
  margin: 56px auto 0;
  text-align: left;
}

.app-window-titlebar {
  background: var(--color-warm-linen);
  border-bottom: 1px solid var(--divider);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-window-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-medium-brown);
}

.app-window-body { display: grid; grid-template-columns: 260px 1fr; }

.app-pane-list {
  border-right: 1px solid var(--divider);
  padding: 16px 0;
  background: var(--color-cream);
}

.app-pane-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
  padding: 0 20px 10px;
  display: block;
}

.app-meeting {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.app-meeting-active { background: var(--color-terracotta-glow); }

.app-meeting-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dark-brown);
}

.app-meeting-meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--color-medium-brown);
}

.app-pane-detail { padding: 24px 28px 28px; }

.app-detail-heading {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dark-brown);
  margin-bottom: 14px;
}

/* Talk-ratio bars */
.viz-ratio { display: grid; gap: 8px; margin: 14px 0 18px; }

.viz-ratio-row { display: grid; grid-template-columns: 44px 1fr 40px; align-items: center; gap: 10px; }

.viz-ratio-name {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-medium-brown);
}

.viz-ratio-track { background: var(--color-bg-surface); border-radius: 9999px; height: 10px; overflow: hidden; }

.viz-ratio-fill { height: 100%; border-radius: 9999px; background: var(--color-terracotta); }
.viz-ratio-fill-muted { background: var(--color-bg-elevated); }

.viz-ratio-val {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-dark-brown);
  text-align: right;
}

.app-moment {
  border-top: 1px solid var(--divider);
  padding: 12px 0;
  display: flex;
  gap: 14px;
  align-items: baseline;
}

.app-moment-time {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.app-moment-text {
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-warm-charcoal);
}

.app-coach-line {
  margin-top: 14px;
  background: var(--color-terracotta-glow);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--color-dark-brown);
}

/* Zig-zag feature rows */
.feature-rows { display: grid; gap: clamp(56px, 8vw, 96px); margin-top: 64px; }

.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.feature-row-copy h3 {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-dark-brown);
  margin-bottom: 12px;
}

.feature-row-copy p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-warm-charcoal);
  max-width: 44ch;
}

.feature-row-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  display: block;
  margin-bottom: 10px;
}

.feature-visual {
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 26px 28px;
  box-shadow: 0 12px 28px rgba(45, 42, 38, 0.08);
}

.feature-row-flip .feature-visual { order: -1; }

/* Week chips (feedback carried) */
.viz-weeks { display: flex; gap: 10px; margin-top: 14px; }

.viz-week {
  flex: 1;
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--color-medium-brown);
  background: var(--color-cream);
}

.viz-week-flag {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  background: var(--color-terracotta-glow);
}

/* Decision checklist */
.viz-decisions { display: grid; gap: 10px; }

.viz-decision {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--divider);
  border-radius: 8px;
  padding: 10px 14px;
  background: var(--color-cream);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-warm-charcoal);
}

.viz-owner {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 9999px;
  padding: 3px 10px;
  background: var(--color-warm-linen);
  color: var(--color-medium-brown);
  white-space: nowrap;
}

.viz-owner-missing {
  background: var(--color-terracotta-glow);
  color: var(--color-terracotta);
}

/* Chat demo (agent panels) */
.chat-demo { padding: 22px 24px; display: grid; gap: 14px; }

.chat-bubble {
  max-width: 75%;
  border-radius: 14px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.55;
}

.chat-bubble-user {
  justify-self: end;
  background: var(--color-terracotta);
  color: var(--color-cream);
  border-bottom-right-radius: 4px;
}

.chat-bubble-agent {
  justify-self: start;
  background: var(--color-cream);
  border: 1px solid var(--divider);
  color: var(--color-warm-charcoal);
  border-bottom-left-radius: 4px;
}

.chat-receipts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.chat-receipt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  background: var(--color-terracotta-glow);
  border-radius: 9999px;
  padding: 3px 9px;
}

/* Radio tab switcher (no JS) */
.demo-tabs { max-width: 760px; margin: 48px auto 0; text-align: left; }

.demo-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.demo-tab-labels { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }

.demo-tab-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-warm-charcoal);
  border: 1px solid var(--divider);
  border-radius: 9999px;
  padding: 8px 18px;
  cursor: pointer;
  background: var(--color-cream);
  transition: all 150ms ease;
}

.demo-tab-label:hover { border-color: var(--color-terracotta); color: var(--color-terracotta); }

/* The radio driving these tabs is visually hidden, so element-level
   :focus-visible would draw the ring on an invisible box. Move it to the
   label, which is what a keyboard user can actually see. */
.demo-tabs input[type="radio"]#demo-tab-1:focus-visible ~ .demo-tab-labels label[for="demo-tab-1"],
.demo-tabs input[type="radio"]#demo-tab-2:focus-visible ~ .demo-tab-labels label[for="demo-tab-2"],
.demo-tabs input[type="radio"]#demo-tab-3:focus-visible ~ .demo-tab-labels label[for="demo-tab-3"] {
  outline: 2px solid var(--color-terracotta);
  outline-offset: 2px;
}

.demo-panel { display: none; }

#demo-tab-1:checked ~ .demo-tab-labels label[for="demo-tab-1"],
#demo-tab-2:checked ~ .demo-tab-labels label[for="demo-tab-2"],
#demo-tab-3:checked ~ .demo-tab-labels label[for="demo-tab-3"] {
  background: var(--color-dark-brown);
  border-color: var(--color-dark-brown);
  color: var(--color-cream);
}

#demo-tab-1:checked ~ .demo-panels .demo-panel-1,
#demo-tab-2:checked ~ .demo-panels .demo-panel-2,
#demo-tab-3:checked ~ .demo-panels .demo-panel-3 { display: block; }

/* Comparison table */
.compare-table-wrap { max-width: 880px; margin: 48px auto 0; overflow-x: auto; }

.compare-table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--divider);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-cream);
}

.compare-table th, .compare-table td {
  padding: 14px 18px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--color-warm-charcoal);
  border-bottom: 1px solid var(--divider);
}

.compare-table th {
  font-weight: 600;
  color: var(--color-dark-brown);
  background: var(--color-warm-linen);
  font-size: 13px;
}

.compare-table tr:last-child td { border-bottom: 0; }

.compare-table td:first-child, .compare-table th:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--color-dark-brown);
}

.compare-col-us { background: var(--color-terracotta-glow); }

.compare-yes { color: var(--color-terracotta); font-weight: 600; }
.compare-no { color: var(--color-warm-gray); }

@media (max-width: 900px) {
  .app-window-body { grid-template-columns: 1fr; }
  .app-pane-list { border-right: 0; border-bottom: 1px solid var(--divider); display: flex; overflow-x: auto; padding: 12px; }
  .app-pane-list .app-pane-label { display: none; }
  .app-meeting { min-width: 180px; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row-flip .feature-visual { order: 0; }
}

.app-window-flush { margin-top: 0; }
.hero-demo-window-flat { transform: none; }
.chat-demo-bare { padding: 0; }

.sec-flow-group + .before-after { margin-top: 64px; }
.ba-attribution { margin-top: 12px; }

/* Blind-spot layout: repeated-artifact stack + trimmed problem points */
.blindspot-layout {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  max-width: 1020px;
  margin: 64px auto 0;
}

.note-stack { max-width: 440px; width: 100%; }

.note-card {
  position: relative;
  background: var(--color-parchment);
  border: 1px solid var(--divider);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 14px 28px rgba(45, 42, 38, 0.07);
}

.note-card + .note-card { margin-top: -56px; }

.note-card-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-medium-brown);
  display: block;
  margin-bottom: 8px;
}

.note-card p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-warm-charcoal);
}

.note-card-past { background: var(--color-warm-linen); }
.note-card-past .note-card-label,
.note-card-past p { color: var(--color-warm-gray); }

.note-stack-coach { margin-top: 24px; }

.blindspot-points { text-align: left; }

.blindspot-point {
  padding: 20px 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-warm-charcoal);
}

.blindspot-point:first-child { padding-top: 0; }
.blindspot-point:last-child { padding-bottom: 0; }
.blindspot-point + .blindspot-point { border-top: 1px solid var(--divider); }

.blindspot-point strong {
  color: var(--color-dark-brown);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .blindspot-layout { grid-template-columns: 1fr; gap: 44px; justify-items: center; }
  .blindspot-points { justify-self: stretch; }
}