/**
 * css/landing.css — Track 4.1 (compounding v1 plan)
 * Marketing landing page layout and styles.
 * Builds on tokens.css + global.css; never duplicates tokens.
 */

/* ── Page scaffold ─────────────────────────────────────── */

/* Prevent any child from blowing out the horizontal viewport.
   Applied at html level so it catches both the body and fixed
   positioned layers (e.g. the nav drawer overlay) on iOS Safari. */
html {
  overflow-x: hidden;
}

.landing-page {
  background: var(--bg-primary, #0a0a0a);
  color: var(--text-primary, #fff);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* belt-and-suspenders: catch any direct child overflow too */
  overflow-x: hidden;
  /* Ensure padding/border don't add to declared widths */
  box-sizing: border-box;
}

/* All direct children of the page use border-box so padding doesn't
   blow out their declared widths (important at 390px). */
.landing-page *,
.landing-page *::before,
.landing-page *::after {
  box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────────
   The landing page uses the SHARED marketing header (.mkt-header):
   markup lives in marketing.html, styles in marketing-header.css,
   behavior in /js/marketing-header.js. The old .landing-header /
   .landing-nav / .landing-menu-toggle system was removed with the
   marketing-funnel unification. */

/* ── Hero ───────────────────────────────────────────────── */
.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  padding: 5rem 2rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.landing-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-400, #c9a84c);
  margin: 0 0 1rem;
  font-weight: 600;
}

.landing-headline {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.12;
  font-weight: 700;
  margin: 0 0 1.25rem;
  letter-spacing: 0;
}

.landing-subheadline {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary, rgba(255,255,255,0.85));
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 42ch;
}

.landing-hero-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
}

.landing-hero-points li {
  min-width: 0;
  padding: 0.8rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-secondary, rgba(255,255,255,0.85));
  font-size: 0.88rem;
  line-height: 1.45;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.landing-cta-primary {
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.landing-cta-secondary {
  font-size: 0.95rem;
  padding: 0.75rem 1.25rem;
}

.landing-trust-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  /* Conversion microcopy — must stay legible. Was tertiary (0.55 fallback,
     below AA on the deep hero bg); raised to the secondary weight (~0.85). */
  color: var(--text-secondary, rgba(255,255,255,0.85));
  font-weight: 500;
}

/* ── Hero video ─────────────────────────────────────────── */
.landing-hero-video-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-subtle, #3a3a3f);
  aspect-ratio: 16 / 9;
}

.landing-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  /* Always light: this overlay sits on the dark video poster in every theme.
     --text-primary resolves to dark ink under the light theme (1.2:1 — invisible). */
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
  transition: background 0.2s;
}

.landing-video-play:hover {
  background: rgba(0, 0, 0, 0.55);
}

.landing-video-play-icon {
  font-size: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-gold-400, #c9a84c);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  transition: transform 0.15s;
}

.landing-video-play:hover .landing-video-play-icon {
  transform: scale(1.07);
}

/* ── Proof strip ────────────────────────────────────────── */
.landing-proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-secondary, #1c1c1e);
  border-top: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
}

.landing-proof-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
}

.landing-proof-divider {
  color: var(--text-tertiary, rgba(255,255,255,0.3));
  font-size: 1.2rem;
}

/* ── What is Self: Prime? (citable prose block) ──────────── */
.landing-about {
  padding: 4rem 2rem 3rem;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.landing-about-inner > p {
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1.25rem;
  color: var(--text-secondary, #c8c8cf);
}

.landing-about-inner > p:last-child {
  margin-bottom: 0;
}

.landing-about-inner strong {
  color: var(--text-primary, #f4f4f6);
  font-weight: 600;
}

/* ── How it works ───────────────────────────────────────── */
.landing-steps {
  padding: 5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.landing-section-title {
  font-size: clamp(1.4rem, 3vw, 2.25rem);
  font-weight: 700;
  text-align: center;
  margin: 0 0 3rem;
  letter-spacing: 0;
}

.landing-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-step {
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-subtle, #3a3a3f);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.landing-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold-400, #c9a84c);
  color: #000;
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-step-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.landing-step-body {
  font-size: 0.92rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  line-height: 1.6;
  margin: 0;
}

/* ── Sample synthesis card ──────────────────────────────── */
.landing-sample-synthesis {
  padding: 3.5rem 2rem;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}

.landing-sample-inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sample-synthesis-card {
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-emphasis, rgba(201,168,76,0.3));
  border-left: 4px solid var(--color-gold-400, #c9a84c);
  border-radius: 12px;
  padding: 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sample-synthesis-card blockquote {
  margin: 0;
  padding: 0;
}

.sample-synthesis-card blockquote p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  margin: 0;
  font-style: italic;
}

.sample-synthesis-attribution {
  font-size: 0.8rem;
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .landing-sample-synthesis {
    padding: 2.5rem 1.25rem;
  }

  .sample-synthesis-card {
    padding: 1.5rem 1.25rem;
  }
}

/* ── Practitioner callout ───────────────────────────────── */
.landing-practitioner-callout {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.03) 100%);
  border-top: 1px solid var(--border-emphasis, rgba(201,168,76,0.3));
  border-bottom: 1px solid var(--border-emphasis, rgba(201,168,76,0.3));
  padding: 4rem 2rem;
}

.landing-prac-inner {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.landing-prac-inner h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}

.landing-prac-inner p {
  color: var(--text-secondary, rgba(255,255,255,0.85));
  font-size: 1rem;
  line-height: 1.65;
  margin: 0;
}

/* ── Final CTA ──────────────────────────────────────────── */
.landing-final-cta {
  padding: 5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.landing-final-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}

.landing-final-cta p {
  color: var(--text-secondary, rgba(255,255,255,0.85));
  font-size: 1rem;
  margin: 0;
}

/* ── Footer ─────────────────────────────────────────────── */
.landing-footer {
  margin-top: auto;
  padding: 3rem 2rem 2rem;
  border-top: 1px solid var(--border-secondary, rgba(255,255,255,0.08));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

/* Multi-column link grid (Issue #83) */
.landing-footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 3rem;
  width: 100%;
  max-width: 760px;
}

.landing-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 120px;
}

.landing-footer-col h3 {
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.landing-footer-col a {
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.6;
}

.landing-footer-col a:hover {
  color: var(--text-secondary, rgba(255,255,255,0.85));
}

/* Legacy flat link list (kept for progressive fallback) */
.landing-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.landing-footer-links a {
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  font-size: 0.85rem;
  text-decoration: none;
  transition: color 0.2s;
}

.landing-footer-links a:hover {
  color: var(--text-secondary, rgba(255,255,255,0.85));
}

.landing-footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  border-top: 1px solid var(--border-secondary, rgba(255,255,255,0.06));
  padding-top: 1.25rem;
}

.landing-footer-copy {
  color: var(--text-tertiary, rgba(255,255,255,0.4));
  font-size: 0.8rem;
  margin: 0;
}

@media (max-width: 600px) {
  .landing-footer {
    padding: 2rem 1.25rem 1.5rem;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .landing-footer-columns {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .landing-footer-col {
    min-width: unset;
    width: 100%;
  }
}

/* ── Responsive ─────────────────────────────────────────── */

/* Clip horizontal overflow so the off-screen nav panel never shows a
   scroll-bar or bleeds into the viewport on narrow devices. */
@media (max-width: 768px) {
  .landing-page {
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  /* HD#112 — hero: single-column, video stacked below copy ── */
  .landing-hero {
    grid-template-columns: 1fr;
    /* #320: reduce top padding on mobile — 5rem desktop → 1.75rem mobile
       prevents the hero from feeling cramped on 375–768px viewports */
    padding: 1.75rem 1.25rem 1.75rem;
    gap: 1.75rem;
  }

  /* Content (copy + CTAs) comes first in the visual order */
  .landing-hero-content {
    order: 1;
    min-width: 0;
  }

  /* Video widget fills the full column width below the copy */
  .landing-hero-video-wrap {
    order: 2;
    width: 100%;
    min-width: 0;
    /* Constrain height on very narrow viewports so the widget doesn't
       dominate the above-the-fold area (16:9 at 390px ≈ 219px — fine,
       but hard-cap at 260px to guard future breakpoint regressions). */
    max-height: 260px;
  }

  /* #320: "How it Works" cards — tighter padding + overflow guard */
  .landing-steps-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .landing-step {
    padding: 1.5rem;
    overflow: hidden;
  }

  .landing-step-title {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .landing-step-body {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Mobile nav drawer: shared header (marketing-header.css) */

  .landing-about {
    padding: 3rem 1.25rem 2rem;
  }

  .landing-about-inner > p {
    font-size: 1rem;
  }

  .landing-steps {
    padding: 3rem 1.25rem;
  }

  .landing-practitioner-callout {
    padding: 3rem 1.25rem;
  }

  .landing-final-cta {
    padding: 3.5rem 1.25rem;
  }
}

@media (max-width: 480px) {
  .landing-headline {
    font-size: 1.75rem;
  }

  /* Both CTA buttons stack full-width below 480px */
  .landing-cta-primary,
  .landing-cta-secondary {
    width: 100%;
    text-align: center;
  }

  .landing-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 375px) {
  /* Ultra-narrow: reduce hero padding for 375px viewport */
  .landing-hero {
    padding: 2rem 1rem 1.75rem;
    gap: 1.25rem;
  }

  .landing-headline {
    font-size: 1.5rem;
    margin: 0 0 0.75rem;
  }

  .landing-subheadline {
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
  }

  /* Ensure buttons have minimum touch target (44px) and prevent text overflow */
  .landing-cta-primary,
  .landing-cta-secondary {
    min-height: 44px;
    padding: 0.75rem 0.5rem;
    font-size: 0.875rem;
  }

  /* Reduce padding for narrow cards */
  .landing-step {
    padding: 1.5rem;
    gap: 0.5rem;
  }

  .landing-step-title {
    font-size: 0.95rem;
  }

  .landing-step-body {
    font-size: 0.85rem;
  }

  /* Reduce section padding */
  .landing-about {
    padding: 2.5rem 1rem 1.5rem;
  }

  .landing-steps {
    padding: 2.5rem 1rem;
  }

  .landing-practitioner-callout {
    padding: 2.5rem 1rem;
  }

  .landing-final-cta {
    padding: 2.5rem 1rem;
  }

  /* Chart calculator form layout */
  .landing-chart-form {
    padding: 1.5rem 1rem;
  }

  .landing-chart-form-grid {
    gap: 0.75rem 1rem;
  }
}

/* ── Anonymous chart calculator ────────────────────────── */
.landing-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.landing-chart-calc {
  padding: 4rem 1.5rem 4.5rem;
  scroll-margin-top: 80px;
}

.landing-chart-calc-inner {
  max-width: 760px;
  margin: 0 auto;
}

.landing-chart-calc-header {
  text-align: center;
  margin-bottom: 2rem;
}

.landing-chart-calc-subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
  max-width: 56ch;
  margin: -1.5rem auto 0;
}

.landing-chart-calc-highlights {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
}

.landing-chart-calc-highlights li {
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, rgba(255, 255, 255, 0.82));
  font-size: 0.82rem;
  line-height: 1.3;
}

.landing-chart-form {
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-emphasis, rgba(201, 168, 76, 0.25));
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.landing-chart-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}

.landing-chart-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.landing-chart-field--wide {
  grid-column: 1 / -1;
}

.landing-chart-field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-strong, rgba(246, 239, 220, 0.95));
}

.landing-chart-field input {
  appearance: none;
  -webkit-appearance: none;
  /* Was 4% white on #1c1c1e — fields were near-invisible per #310.
     Bumped to 10% bg + 30% border so the input boundary is obvious without
     overpowering the surrounding card. */
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 10px;
  color: var(--text-strong, rgba(246, 239, 220, 0.95));
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.85rem;
  width: 100%;
  min-width: 0;
  /* Min-height ensures 44px touch target on mobile (WCAG 2.5.5 / iOS HIG). */
  min-height: 44px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.landing-chart-field input:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

.landing-chart-field input::placeholder {
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.landing-chart-field input:focus {
  outline: none;
  border-color: var(--color-gold-400, #c9a84c);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.25);
}

.landing-chart-field-hint {
  font-size: 0.78rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  line-height: 1.4;
}

.landing-chart-form-error {
  margin: 0;
  background: rgba(220, 80, 80, 0.12);
  border: 1px solid rgba(220, 80, 80, 0.4);
  border-radius: 8px;
  color: #ff9d9d;
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
}

.landing-chart-form-error[hidden] {
  display: none;
}

.landing-chart-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}

.landing-chart-submit {
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  min-height: 48px;
}

.landing-chart-submit[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.landing-chart-form-meta {
  font-size: 0.82rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
}

.landing-chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem 0;
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
  font-size: 0.95rem;
}

/* The commitment beat speaks the visitor's own birth data back to them —
   it gets the oracle voice, not the instrument voice. */
.landing-chart-loading-text {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.01em;
}

.landing-chart-loading[hidden] {
  display: none;
}

.landing-chart-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.25);
  border-top-color: var(--color-gold-400, #c9a84c);
  animation: landing-chart-spin 0.8s linear infinite;
}

@keyframes landing-chart-spin {
  to { transform: rotate(360deg); }
}

.landing-chart-result {
  margin-top: 2.5rem;
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-emphasis, rgba(201, 168, 76, 0.3));
  border-left: 4px solid var(--color-gold-400, #c9a84c);
  border-radius: 14px;
  padding: 1.75rem 1.75rem 2rem;
}

.landing-chart-result[hidden] {
  display: none;
}

.landing-chart-result-header {
  margin-bottom: 1.25rem;
}

.landing-chart-block-label {
  margin: 0 0 0.7rem;
  color: var(--color-gold-400, #c9a84c);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 100%;
}

.landing-chart-result-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-400, #c9a84c);
  margin: 0 0 0.35rem;
}

.landing-chart-result-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-strong, rgba(246, 239, 220, 0.97));
}

.landing-chart-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  row-gap: 0.45rem;
  column-gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.landing-chart-facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
  margin: 0;
  align-self: center;
}

.landing-chart-facts dd {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: var(--text-strong, rgba(246, 239, 220, 0.95));
  word-break: break-word;
}

/* One plain-English interpretive sentence under Type / Strategy / Authority —
   a lens, never a verdict. Spans both grid columns so it reads as a caption
   under the fact row rather than a second value. */
.landing-chart-fact-note {
  grid-column: 1 / -1;
  margin: -0.15rem 0 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.72));
}

.landing-chart-bodygraph-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.landing-chart-bodygraph {
  width: min(280px, 100%);
  height: auto;
  flex-shrink: 0;
  /* Dark cosmic field (--bg / #05091a) — the free chart should look like the
     product it leads to (Visual Language Spec §3: ceremony stays cosmic). The
     server-rendered SVG (.landing-chart-bodygraph--server) already paints this
     same field itself; the schematic fallback relies on this container fill. */
  background: var(--bg, #05091a);
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 12px;
  padding: 0.5rem;
}

.landing-chart-legend {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}

.landing-chart-legend li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.landing-chart-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
  flex-shrink: 0;
}

.landing-chart-swatch--defined {
  background: #c9a84c;
  border: 1px solid #c9a84c;
}

.landing-chart-swatch--open {
  background: transparent;
  border: 1px solid rgba(201, 168, 76, 0.6);
}

.landing-chart-swatch--channel {
  background: linear-gradient(90deg, transparent 0 30%, rgba(201, 168, 76, 0.85) 30% 70%, transparent 70%);
  border: 0;
  border-radius: 0;
  height: 2.5px;
  width: 22px;
}

.landing-chart-cta {
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.12) 0%, rgba(201, 168, 76, 0.04) 100%);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  text-align: center;
}

.landing-chart-cta-copy {
  margin: 0 0 1rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.landing-chart-cta-copy strong {
  color: var(--text-strong, rgba(246, 239, 220, 0.97));
}

.landing-chart-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0.75rem 1.4rem;
  min-height: 44px;
}

.landing-chart-cta-note {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
}

/* Kairos' Council continuity note under the pre-filled birth-date field
   (js/kairos-arrival.js) — quiet confirmation, not a banner. */
.landing-chart-field-note {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
}

/* Email-capture fallback under the primary "Keep my chart" call to action. */
.landing-chart-lead {
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.landing-chart-lead-copy {
  margin: 0 0 0.75rem;
  font-size: var(--text-base);
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.landing-chart-lead-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

/* Values deliberately identical to `.landing-chart-field input` above: #310
   found 4% white on #1c1c1e left the field boundary near-invisible and raised
   it to 10% bg / 30% border. A second input on the same card must not quietly
   reintroduce the contrast bug that issue fixed. */
.landing-chart-lead-input {
  appearance: none;
  -webkit-appearance: none;
  flex: 1 1 15rem;
  max-width: 20rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  /* --text-lg is clamp(1rem, ...), i.e. it FLOORS at 16px and only grows.
     That is load-bearing: any smaller and iOS zooms the page on focus. Do not
     swap this for a token whose floor drops below 1rem. */
  font-size: var(--text-lg);
  color: var(--text-strong, rgba(246, 239, 220, 0.95));
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.landing-chart-lead-input:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
}

.landing-chart-lead-input::placeholder {
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

.landing-chart-lead-input:focus {
  outline: none;
  border-color: var(--color-gold-400, #c9a84c);
  box-shadow: 0 0 0 3px var(--gold-alpha-25);
}

.landing-chart-lead-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  padding: 0.65rem 1.25rem;
  min-height: 44px;
}

.landing-chart-lead-status {
  margin: 0.6rem 0 0;
  font-size: var(--text-sm);
  min-height: 1.2em;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
}

.landing-chart-lead-status.is-error {
  color: var(--danger, #ff9a8b);
}

.landing-chart-share {
  margin-top: 1rem;
  text-align: center;
}

.landing-chart-share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
}

.landing-chart-share-status {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  min-height: 1.2em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.landing-chart-share-status.is-visible {
  opacity: 1;
}

.landing-chart-prac-doorway {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.landing-chart-prac-doorway__text {
  font-size: 0.85rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
  margin: 0;
}

.landing-chart-prac-doorway__link {
  font-size: 0.85rem;
  color: var(--color-primary, #a78bfa);
  text-decoration: none;
  white-space: nowrap;
}

.landing-chart-prac-doorway__link:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .landing-hero-points {
    grid-template-columns: 1fr;
  }

  .landing-chart-calc {
    padding: 3rem 1rem 3.5rem;
  }

  .landing-chart-calc-subtitle {
    margin-top: -1rem;
  }

  .landing-chart-calc-highlights {
    justify-content: flex-start;
  }

  .landing-chart-form {
    padding: 1.25rem 1.1rem 1.25rem;
  }

  .landing-chart-form-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .landing-chart-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .landing-chart-submit {
    width: 100%;
  }

  .landing-chart-form-meta {
    text-align: center;
  }

  .landing-chart-result {
    padding: 1.25rem 1.1rem 1.5rem;
  }

  .landing-chart-facts {
    grid-template-columns: 1fr;
    row-gap: 0.6rem;
    column-gap: 0;
    padding: 0.9rem 1rem;
  }

  .landing-chart-facts dt {
    margin-top: 0.6rem;
  }

  .landing-chart-facts dt:first-of-type {
    margin-top: 0;
  }

  .landing-chart-bodygraph-wrap {
    flex-direction: column;
    gap: 1rem;
  }

  .landing-chart-bodygraph {
    width: 100%;
    max-width: 260px;
  }

  .landing-chart-cta-button {
    width: 100%;
  }

  .landing-chart-cta {
    padding: 1rem;
  }
}

/* ── 390px narrow viewport fixes (#174) ─────────────────── */
@media (max-width: 430px) {
  /* Body / page: ensure no horizontal overflow */
  html, .landing-page {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hero: tighter padding, full-width, no overflow */
  .landing-hero {
    padding: 2rem 1rem 1.75rem;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
  }

  .landing-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    word-break: break-word;
  }

  .landing-headline {
    font-size: 1.6rem;
    hyphens: auto;
  }

  .landing-subheadline {
    font-size: 0.95rem;
    max-width: 100%;
  }

  /* CTA buttons: full-width stack on very narrow screens */
  .landing-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .landing-cta-primary,
  .landing-cta-secondary {
    width: 100%;
    text-align: center;
    white-space: normal;
    padding: 0.8rem 1rem;
  }

  /* Hero video: constrain height so it doesn't push content off-screen */
  .landing-hero-video-wrap {
    max-height: 220px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Proof strip: stack items vertically, hide dividers */
  .landing-proof-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
  }

  .landing-proof-divider {
    display: none;
  }

  /* Chart calculator: full width, tight padding */
  .landing-chart-calc {
    padding: 2rem 0.875rem 2.5rem;
  }

  .landing-chart-form {
    padding: 1rem 0.875rem;
  }

  .landing-chart-form-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .landing-chart-field--wide {
    grid-column: 1;
  }

  /* Steps grid: single column */
  .landing-steps {
    padding: 2.5rem 1rem;
  }

  .landing-steps-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .landing-step {
    padding: 1.25rem 1rem;
  }

  /* About / whats-new sections */
  .landing-about {
    padding: 2.5rem 1rem 1.75rem;
  }

  /* Practitioner callout */
  .landing-practitioner-callout {
    padding: 2.5rem 1rem;
  }

  /* Final CTA */
  .landing-final-cta {
    padding: 2.5rem 1rem;
  }

  .landing-final-cta h2 {
    font-size: 1.4rem;
  }

  /* Footer columns: ensure proper wrap */
  .landing-footer {
    padding: 1.5rem 1rem;
  }

  .landing-footer-columns {
    gap: 1.5rem;
  }

  .landing-footer-col h3 {
    font-size: 0.75rem;
  }
}

/* ── Pricing section ───────────────────────────────────── */
.landing-pricing {
  padding: 5rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.landing-pricing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.landing-pricing-header {
  text-align: center;
  max-width: 700px;
}

.landing-pricing-subtitle {
  font-size: 1rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  line-height: 1.6;
  margin: 0.5rem 0 0;
}

.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 900px;
}

.landing-pricing-card {
  background: var(--bg-secondary, #1c1c1e);
  border: 1px solid var(--border-subtle, #3a3a3f);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}

.landing-pricing-card--featured {
  border-color: var(--color-gold-400, #c9a84c);
  transform: scale(1.02);
}

.landing-pricing-badge {
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: var(--color-gold-400, #c9a84c);
  color: #000;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.35rem 0.85rem;
  border-radius: 100px;
  text-transform: uppercase;
}

.landing-pricing-plan-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #fff);
}

.landing-pricing-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.landing-pricing-amount {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.landing-pricing-period {
  font-size: 0.95rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  font-weight: 500;
}

.landing-pricing-description {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
}

.landing-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.landing-pricing-features li {
  font-size: 0.9rem;
  color: var(--text-secondary, rgba(255,255,255,0.8));
  line-height: 1.5;
  padding-left: 1.5rem;
  position: relative;
}

.landing-pricing-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-gold-400, #c9a84c);
  font-weight: 700;
}

.landing-pricing-cta {
  align-self: flex-start;
  font-size: 0.95rem;
  padding: 0.7rem 1.25rem;
  white-space: nowrap;
}

.landing-pricing-card--featured .landing-pricing-cta {
  align-self: stretch;
  text-align: center;
}

.landing-pricing-footer {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary, rgba(255,255,255,0.85));
  margin: 0;
}

.landing-pricing-footer a {
  color: var(--color-gold-400, #c9a84c);
  text-decoration: underline; /* WCAG link-in-text-block: distinguish without color alone */
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.landing-pricing-footer a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .landing-pricing {
    padding: 3.5rem 1.25rem;
  }

  .landing-pricing-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .landing-pricing-card--featured {
    transform: scale(1);
  }
}

/* ── Trust proof / testimonials (shared with pricing.css) ── */
.trust-proof-section { padding: 60px 1.5rem 40px; }
.trust-proof__heading {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--color-gold-400, #c9a84c);
  text-align: center; margin: 0 0 2rem;
}
.trust-proof__grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 900px; margin: 0 auto;
}
@media (min-width: 600px) { .trust-proof__grid { grid-template-columns: repeat(3, 1fr); } }
.trust-proof-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem; padding: 1.25rem 1.375rem;
  display: flex; flex-direction: column; gap: 0.625rem;
}
.trust-proof-card__quote {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--color-text-2, rgba(255,255,255,0.8));
  font-style: italic; margin: 0;
}
.trust-proof-card__attribution {
  font-size: 0.75rem; color: var(--color-text-3, rgba(255,255,255,0.5)); margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Light / sunrise theme accent-text fixes (WCAG AA)
   landing.css had no light-theme overrides, so accent text using the
   bright gold #f0ca65 rendered at ~1.5:1 on the live parchment theme.
   --gold-text (#934a5e) keeps the rose-gold hue and passes 4.5:1.
   ────────────────────────────────────────────────────────────────── */
html[data-theme="light"] .landing-eyebrow,
html[data-theme="light"] .landing-chart-result-eyebrow,
html[data-theme="light"] .landing-pricing-footer a,
html[data-theme="light"] .trust-proof__heading,
html[data-theme="light"] .landing-pricing-features li::before {
  color: var(--gold-text, #934a5e);
}

/* ══════════════════════════════════════════════════════════
   RESONANCE PR-2 — One sky, two voices.
   Serif is the voice that knows you (display, ≥1.3rem only);
   Inter is the instrument. Gold is light, not paint: display
   gold is a top-lit gradient, gold surfaces bloom.
   ══════════════════════════════════════════════════════════ */

/* Display voice: the oracle speaks in serif, warm cream, weight 400. */
.landing-headline,
.landing-section-title,
.landing-prac-inner h2,
.landing-final-cta h2 {
  font-family: var(--font-serif, 'Instrument Serif', 'Iowan Old Style', Georgia, serif);
  font-weight: 400;
  color: var(--text-cream, #f6efdc);
  letter-spacing: 0;
}

.landing-headline {
  font-size: clamp(2.4rem, 5.5vw, 4.25rem);
  line-height: 1.05;
}

.landing-headline em,
.landing-section-title em {
  font-style: italic;
  background: var(--gold-luminous, linear-gradient(135deg, #fae6af, #f0ca65 40%, #c9a84c));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Wordmark carries the serif voice; nav stays instrument. */
.mkt-header__logo {
  font-family: var(--font-serif, 'Instrument Serif', Georgia, serif);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

/* Gold CTAs are lit buttons, not yellow stickers: vertical gradient fill,
   outer bloom, inset top highlight. */
.landing-page .btn-primary,
.landing-cta-primary.btn-primary,
.landing-chart-submit {
  background: var(--gold-cta-fill, linear-gradient(180deg, #f0ca65 0%, #c9a84c 100%));
  box-shadow: var(--gold-bloom, 0 0 24px rgba(201, 168, 76, 0.35)),
              var(--gold-cta-inset, inset 0 1px 0 rgba(255, 255, 255, 0.35));
}

.landing-page .btn-primary:hover:not(:disabled),
.landing-chart-submit:hover:not(:disabled) {
  box-shadow: 0 0 32px rgba(201, 168, 76, 0.45),
              var(--gold-cta-inset, inset 0 1px 0 rgba(255, 255, 255, 0.35));
}

/* ══════════════════════════════════════════════════════════
   RESONANCE PR-3 — Chart Birth Ceremony, marketing fallback
   (AM-4 item 1). The anonymous result injects a SERVER-
   rendered bodygraph SVG whose internal markup we must not
   assume, so the ceremony here is a class contract on the
   result container: the chart glow-settles in (opacity/scale
   ONLY — no per-element choreography), then the facts and
   CTA rise 400ms after it lands. All hidden states live
   inside keyframes with fill-mode: both, so environments
   that collapse animations degrade to instantly visible.
   ══════════════════════════════════════════════════════════ */

@keyframes landing-chart-glow-in {
  from { opacity: 0; transform: scale(1.035); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes landing-chart-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.landing-chart-result.landing-chart-reveal .landing-chart-bodygraph-wrap {
  animation: landing-chart-glow-in 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* Facts, headline, CTA and doorway rise together once the chart has settled:
   900ms glow + 400ms breath = 1300ms delay. */
.landing-chart-result.landing-chart-reveal > :not(.landing-chart-bodygraph-wrap) {
  animation: landing-chart-rise 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1300ms both;
}

/* Reduced motion: no scale/translate theatre, no waiting — the finished
   result, immediately. */
@media (prefers-reduced-motion: reduce) {
  .landing-chart-result.landing-chart-reveal .landing-chart-bodygraph-wrap,
  .landing-chart-result.landing-chart-reveal > :not(.landing-chart-bodygraph-wrap) {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

/* ══════════════════════════════════════════════════════════
   RESONANCE PR-4 — Show the mirror (B6, C1, C2).
   The calculator header becomes the page's one H1 (keyword
   holder); the old narrative hero demotes to the Recognition
   Arc "mirror" section, whose visual is a REAL chart — the AP
   verification anchor, rendered at build time by
   scripts/render-hero-chart.mjs and inlined between the
   HERO_CHART markers in marketing.html. Zero new JS.
   ══════════════════════════════════════════════════════════ */

/* ── The one H1 (calculator header) ─────────────────────── */
.landing-chart-calc-h1 {
  /* .landing-headline supplies the serif voice; scale it to sit inside the
     760px calculator column without wrapping into a wall. */
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  line-height: 1.08;
  margin: 0 0 1.1rem;
}

/* The old negative pull-up was tuned against the deleted H2; the subhead now
   follows the H1 and breathes on its own. */
.landing-chart-calc-header .landing-chart-calc-subtitle {
  margin: 0 auto;
  max-width: 62ch;
}

/* Quiet echo above the form (C2): a kicker, not a second hero. */
.landing-chart-echo {
  margin: 0 0 0.9rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(201, 168, 76, 0.75);
}

html[data-theme="light"] .landing-chart-echo {
  color: var(--gold-text, #934a5e);
}

/* ── The mirror section heading (Recognition Arc beat 1) ── */
.landing-hero-heading {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.18;
}

/* ── The breathing bodygraph (B6) ───────────────────────── */
.landing-hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.landing-hero-chart {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/* The page's one radial glow lives behind the chart. */
.landing-hero-chart::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  background: radial-gradient(
    ellipse 62% 55% at 50% 42%,
    rgba(201, 168, 76, 0.14),
    rgba(201, 168, 76, 0.05) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

.landing-hero-chart svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  animation: landing-hero-breathe 7s ease-in-out infinite;
  will-change: transform, filter;

  /* The cosmic field the chart is drawn ON, not merely drawn against.
     scripts/render-hero-chart.mjs bakes the SVG with HERO_THEME, a DARK-surface
     palette: its open centers, their labels and the hairlines are all
     white-alpha and its open gate numbers are opaque white. The hero inherits
     the page's warm cream, so 12 of the artwork's 28 labels landed near 1.07:1
     contrast — five of nine centers and every open gate number were invisible,
     leaving empty rounded boxes floating unconnected on the ONE proof element
     of the landing page.

     Scoped to the artwork rather than to .landing-hero-chart because the
     caption is also a child of that container and is correctly dark ink for
     the light page — a panel on the parent would simply move the contrast
     failure onto the caption.

     Colour comes from the PALETTE PRIMITIVES, not the semantic --bg-* aliases.
     The aliases are theme-scoped: under html[data-theme="light"] and under
     @media (prefers-color-scheme: light), --bg-primary becomes warm ivory and
     --bg-tertiary warm sand — so building this field from them would resolve
     to cream for exactly the visitors who hit the bug, and fix nothing. The
     neutral primitives are defined once and never re-themed, which is what
     this field needs: the artwork is unconditionally dark, so its backdrop
     must be too. tokens.css is render-blocking ahead of this file
     (marketing.html:153-154), so both are defined when this rule applies. */
  background: radial-gradient(ellipse 72% 62% at 50% 42%, var(--color-neutral-850) 0%, var(--color-neutral-950) 72%);
  border-radius: 14px;
  padding: 0.75rem;
}

/* Active channels glow. Keyed to the exact active-channel stroke the build
   script bakes into the SVG (scripts/render-hero-chart.mjs
   HERO_THEME.channelActive) — keep the two values in sync. */
.landing-hero-chart svg line[stroke="#e8cf72"] {
  filter: drop-shadow(0 0 5px rgba(232, 207, 114, 0.55));
}

@keyframes landing-hero-breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.015); filter: brightness(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-hero-chart svg {
    animation: none;
  }
}

/* Caption stays in the instrument voice (serif never below ~1.3rem). */
.landing-hero-chart-caption {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255, 255, 255, 0.75));
}

/* ── Welcome video, demoted to a modest thumbnail (B6) ──── */
.landing-hero-visual .landing-hero-video-wrap {
  width: min(230px, 80%);
  max-height: none;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.landing-hero-visual .landing-hero-video-wrap:hover {
  opacity: 1;
}

.landing-hero-visual .landing-video-play {
  gap: 0.35rem;
  font-size: 0.75rem;
}

.landing-hero-visual .landing-video-play-icon {
  width: 30px;
  height: 30px;
  font-size: 0.95rem;
}

/* ── Mobile (≤640px): the chart column yields to a watermark behind the
   birth-data form card — same SVG, 8% opacity, written to
   /img/hero-chart.svg by the same build script. ─────────── */
@media (max-width: 640px) {
  .landing-hero-chart {
    display: none;
  }

  .landing-chart-form {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .landing-chart-form::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/img/hero-chart.svg") center 40% / contain no-repeat;
    opacity: 0.08;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════
   /how-we-verify — the falsifiability page (hwv-).
   Same night sky, same two voices: serif is the voice that
   knows you (display, ≥1.3rem only), Inter is the instrument.
   Reuses .landing-page scaffold, .landing-eyebrow, and
   .landing-headline; everything below is page-local.
   ══════════════════════════════════════════════════════════ */

.hwv-main {
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 3rem;
}

.hwv-hero {
  margin-bottom: 3rem;
}

/* The one H1 — serif voice from .landing-headline, scaled to a reading column. */
.hwv-h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.06;
  margin: 0 0 1.1rem;
}

.hwv-lead {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  max-width: 58ch;
  margin: 0;
}

.hwv-claim p,
.hwv-mechanism > p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary, rgba(255, 255, 255, 0.85));
  margin: 0 0 1.1rem;
  max-width: 62ch;
}

.hwv-claim p:last-child {
  margin-bottom: 0;
}

/* ── Mechanism cards ────────────────────────────────────── */
.hwv-mechanism {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  margin: 2.25rem 0 0;
}

.hwv-mech-label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold-400, #c9a84c);
  margin: 0 0 0.6rem;
}

/* Section titles carry the serif voice (display size, weight 400). */
.hwv-mech-title {
  font-family: var(--font-serif, 'Instrument Serif', 'Iowan Old Style', Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.2;
  color: var(--text-cream, #f6efdc);
  letter-spacing: 0;
  margin: 0 0 1rem;
}

/* The concrete-artifact callout: what actually exists in the machinery. */
.hwv-artifact {
  border-left: 2px solid var(--color-gold-400, #c9a84c);
  background: rgba(201, 168, 76, 0.07);
  border-radius: 0 10px 10px 0;
  padding: 0.9rem 1.15rem;
  margin: 1.35rem 0 0;
}

.hwv-artifact-label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-gold-400, #c9a84c);
  margin: 0 0 0.35rem;
}

.hwv-artifact p:not(.hwv-artifact-label) {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255, 255, 255, 0.82));
  margin: 0;
}

/* The standing rule, quoted in the oracle voice. */
.hwv-rule-quote {
  font-family: var(--font-serif, 'Instrument Serif', 'Iowan Old Style', Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  color: var(--text-cream, #f6efdc);
  border-left: 2px solid var(--color-gold-400, #c9a84c);
  margin: 1.4rem 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
}

/* Banned filler lines: struck through, deliberately dimmed. */
.hwv-banned {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
}

.hwv-banned li {
  text-decoration: line-through;
  text-decoration-color: rgba(201, 168, 76, 0.55);
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
  font-size: 0.95rem;
  line-height: 1.9;
}

/* Specimen of the grounding chip that renders on real readings. */
.hwv-chip-row {
  margin: 0 0 1.1rem;
}

.hwv-chip {
  display: inline-block;
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.08);
  color: var(--color-gold-300, #e8cf72);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* ── Quiet CTA back to the calculator ───────────────────── */
.hwv-cta {
  text-align: center;
  margin-top: 3.5rem;
  padding: 3rem 1rem 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hwv-cta-line {
  font-family: var(--font-serif, 'Instrument Serif', 'Iowan Old Style', Georgia, serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.2;
  color: var(--text-cream, #f6efdc);
  margin: 0 0 1.5rem;
}

.hwv-cta-button {
  display: inline-block;
  font-size: 1rem;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.hwv-cta-note {
  margin: 1rem 0 0;
  font-size: 0.82rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
}

/* ── Footer (mirrors the pricing-page standalone footer) ── */
.hwv-footer {
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
  font-size: 0.85rem;
}

.hwv-footer a {
  color: var(--color-gold-400, #c9a84c);
  text-decoration: none;
}

.hwv-footer a:hover {
  text-decoration: underline;
}

.hwv-footer p {
  margin: 0.75rem 0 0;
}

/* Trust line under the marketing calculator meta (links here). */
.landing-chart-trust-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.55));
}

.landing-chart-trust-note a {
  color: var(--color-gold-400, #c9a84c);
  /* A11y: inline link inside body text must not rely on color alone
     (axe link-in-text-block) — underline always, not only on hover. */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.landing-chart-trust-note a:hover {
  text-decoration-thickness: 2px;
}

html[data-theme="light"] .landing-chart-trust-note a {
  color: var(--color-gold-800, #5a4824);
}

/* Light / sunrise theme: keep gold accents at AA on parchment
   (same fix pattern as the landing accent-text block above). */
html[data-theme="light"] .hwv-mech-label,
html[data-theme="light"] .hwv-artifact-label,
html[data-theme="light"] .hwv-chip,
html[data-theme="light"] .hwv-footer a,
html[data-theme="light"] .landing-chart-trust-note a {
  color: var(--gold-text, #934a5e);
}

/* ── A11y (2026-07-12): the serif display voice is cream on the night sky —
   on the light theme that cream vanishes into the parchment (1.07:1). Display
   headings flip to dark ink; the italic gold clip deepens to stay legible.
   2026-07-20: the how-we-verify display voice ships as .hwv-mech-title /
   .hwv-rule-quote / .hwv-cta-line — the original .hwv-section-title selector
   matched no element, so every mechanism title, the standing-rule pullquote,
   and the closing CTA line stayed cream (~1.07:1) on parchment. Flip the real
   classes to dark ink; the whole page's serif voice now reads on light. */
html[data-theme="light"] .landing-headline,
html[data-theme="light"] .landing-section-title,
html[data-theme="light"] .landing-prac-inner h2,
html[data-theme="light"] .landing-final-cta h2,
html[data-theme="light"] .hwv-h1,
html[data-theme="light"] .hwv-mech-title,
html[data-theme="light"] .hwv-rule-quote,
html[data-theme="light"] .hwv-cta-line {
  color: var(--color-dark-ink, #0b1225);
}

html[data-theme="light"] .landing-headline em,
html[data-theme="light"] .landing-section-title em,
html[data-theme="light"] .hwv-h1 em {
  background: linear-gradient(135deg, var(--color-gold-700, #7a6030), var(--color-gold-800, #5a4824));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}