/* ============================================================================
   landing.css — public marketing landing for mycedhcoach.com
   ----------------------------------------------------------------------------
   Page-prefixed selectors: .landing-*
   Self-contained — no shared primitives import (the landing is standalone HTML,
   not part of the React SPA bundle).

   Sections (top → bottom):
     1. Fonts + reset
     2. Motion background
     3. Topbar (sticky CTA)
     4. Hero
     5. Trust bar (data bona fides)
     6. Section separators
     7. Section primitives (eyebrow + title + lead)
     8. How-it-works 3-step
     9. Module groups (Personalized · Strategy · Research)
    10. Why-different callout
    11. FAQ accordion
    12. Privacy/security tiles
    13. Form section
    14. Footer
    15. Animations (scroll fade-in)
    16. Responsive breakpoints
   ============================================================================ */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Cinzel-700.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/Cinzel-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/Inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/Inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-500.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.55;
  min-height: 100vh;
  /* Smooth anchor scrolling for in-page nav */
  scroll-behavior: smooth;
  /* Stack motion bg behind content */
  position: relative;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover,
a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   2. Motion background — six pulsating + drifting blobs, pure CSS, GPU-composited
   ----------------------------------------------------------------------------
   Three teal + three purple, distributed across the viewport at varying sizes.
   Each blob has its own pulse (scale 0.92→1.12) + slight drift (3-6%) +
   opacity breath (0.10→0.20). Different periods (20-34s) keep the motion
   organic — never two blobs in sync.
   ============================================================================ */

.landing-motion-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-dark);
  overflow: hidden;
  pointer-events: none;
}

.landing-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  will-change: transform, opacity;
}

/* Top-left cluster — teal lead, small purple companion */
.landing-blob-1 { /* teal, large */
  width: 36vmax; height: 36vmax;
  top: -8%; left: -10%;
  background: radial-gradient(circle, var(--accent), transparent 60%);
  opacity: 0.16;
  animation: landing-blob-a 24s ease-in-out infinite;
}
.landing-blob-2 { /* purple, small */
  width: 22vmax; height: 22vmax;
  top: 18%; left: 8%;
  background: radial-gradient(circle, var(--accent-purple), transparent 60%);
  opacity: 0.13;
  animation: landing-blob-b 31s ease-in-out infinite;
  animation-delay: -6s;
}

/* Top-right cluster — purple lead, small teal companion */
.landing-blob-3 { /* purple, medium */
  width: 28vmax; height: 28vmax;
  top: -4%; right: -8%;
  background: radial-gradient(circle, var(--accent-purple), transparent 60%);
  opacity: 0.14;
  animation: landing-blob-c 27s ease-in-out infinite;
  animation-delay: -10s;
}
.landing-blob-4 { /* teal, small */
  width: 20vmax; height: 20vmax;
  top: 22%; right: 12%;
  background: radial-gradient(circle, var(--accent), transparent 60%);
  opacity: 0.12;
  animation: landing-blob-d 33s ease-in-out infinite;
  animation-delay: -16s;
}

/* Bottom-left cluster — single purple, slightly larger */
.landing-blob-5 { /* purple, medium */
  width: 30vmax; height: 30vmax;
  bottom: -6%; left: 4%;
  background: radial-gradient(circle, var(--accent-purple), transparent 60%);
  opacity: 0.13;
  animation: landing-blob-e 29s ease-in-out infinite;
  animation-delay: -3s;
}

/* Bottom-right cluster — teal lead, drifts inward */
.landing-blob-6 { /* teal, large */
  width: 34vmax; height: 34vmax;
  bottom: -10%; right: -6%;
  background: radial-gradient(circle, var(--accent), transparent 60%);
  opacity: 0.15;
  animation: landing-blob-f 26s ease-in-out infinite;
  animation-delay: -13s;
}

@keyframes landing-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1);     opacity: 0.16; }
  35%      { transform: translate(4%, 5%) scale(1.10); opacity: 0.20; }
  70%      { transform: translate(-2%, 3%) scale(0.94); opacity: 0.13; }
}
@keyframes landing-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1);     opacity: 0.13; }
  40%      { transform: translate(5%, -3%) scale(1.12); opacity: 0.17; }
  75%      { transform: translate(-3%, 4%) scale(0.92); opacity: 0.10; }
}
@keyframes landing-blob-c {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.14; }
  35%      { transform: translate(-4%, 4%) scale(1.08); opacity: 0.18; }
  75%      { transform: translate(2%, -2%) scale(0.95); opacity: 0.11; }
}
@keyframes landing-blob-d {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.12; }
  45%      { transform: translate(-3%, 6%) scale(1.10); opacity: 0.16; }
  80%      { transform: translate(4%, -3%) scale(0.94); opacity: 0.09; }
}
@keyframes landing-blob-e {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.13; }
  38%      { transform: translate(5%, -4%) scale(1.10); opacity: 0.18; }
  72%      { transform: translate(-3%, 3%) scale(0.93); opacity: 0.10; }
}
@keyframes landing-blob-f {
  0%, 100% { transform: translate(0, 0) scale(1);      opacity: 0.15; }
  42%      { transform: translate(-4%, -5%) scale(1.10); opacity: 0.19; }
  78%      { transform: translate(5%, 2%) scale(0.95);  opacity: 0.12; }
}

/* Light mode — soften further so blobs don't wash out the page */
:root[data-theme="light"] .landing-blob {
  opacity: 0.08;
}
:root[data-theme="light"] .landing-blob-1,
:root[data-theme="light"] .landing-blob-3,
:root[data-theme="light"] .landing-blob-6 {
  opacity: 0.10;
}

/* Respect reduced-motion preferences — kill the animation entirely */
@media (prefers-reduced-motion: reduce) {
  .landing-blob {
    animation: none;
  }
}

.landing-shell {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   3. Topbar — sticky CTA appears once user scrolls past hero
   ============================================================================ */

.landing-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 16px 0;
  /* Subtle backdrop only when scrolled (added via .is-scrolled in JS) */
  transition: background 200ms ease, backdrop-filter 200ms ease, border-color 200ms ease;
  border-bottom: 1px solid transparent;
}

.landing-topbar.is-scrolled {
  background: color-mix(in srgb, var(--bg-dark) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border);
}

.landing-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.landing-brand:hover,
.landing-brand:focus-visible {
  color: var(--text-primary);
  text-decoration: none;
}

.landing-brand .accent {
  color: var(--accent);
}

.landing-topbar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-topbar-cta {
  display: inline-block;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  /* Hidden until scroll — JS toggles .is-visible */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, background 120ms ease;
}

.landing-topbar.is-scrolled .landing-topbar-cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.landing-topbar-cta:hover,
.landing-topbar-cta:focus-visible {
  background: var(--accent-strong);
  color: var(--bg-dark);
  text-decoration: none;
  outline: none;
}

.landing-theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.landing-theme-toggle:hover,
.landing-theme-toggle:focus-visible {
  border-color: var(--accent-border);
  color: var(--text-primary);
  outline: none;
}

/* ============================================================================
   4. Hero
   ============================================================================ */

.landing-hero {
  text-align: center;
  margin-bottom: 64px;
  padding: 32px 0 40px;
}

.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 18px;
  /* Subtle accent dot */
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.landing-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  margin: 0 0 22px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.landing-title .accent {
  color: var(--accent);
}
.landing-title .accent-purple {
  color: var(--accent-purple);
}

.landing-lead {
  max-width: 640px;
  margin: 0 auto 32px;
  font-size: 1.08rem;
  color: var(--text-secondary);
}

.landing-cta-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent);
  color: var(--bg-dark);
  font-weight: 700;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 4px 20px var(--accent-soft);
}
.landing-cta-primary:hover,
.landing-cta-primary:focus-visible {
  background: var(--accent-strong);
  color: var(--bg-dark);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px var(--accent-soft);
  outline: none;
}
.landing-cta-primary:active {
  transform: translateY(0) scale(0.985);
}

/* ============================================================================
   5. Trust bar — data bona fides (4 stats)
   ============================================================================ */

.landing-trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 0;
  margin: 0 auto 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.landing-trust-stat {
  padding: 8px 16px;
  border-right: 1px solid var(--border);
}
.landing-trust-stat:last-child {
  border-right: none;
}

.landing-trust-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 4px;
}

.landing-trust-label {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================================
   6. Section separators — thin gradient with subtle glow
   ============================================================================ */

.landing-separator {
  border: none;
  height: 1px;
  margin: 80px auto;
  max-width: 60%;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent-border) 30%,
    var(--accent-purple-border) 70%,
    transparent
  );
  position: relative;
}
.landing-separator::after {
  content: "";
  position: absolute;
  inset: -3px 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent-soft) 30%,
    var(--accent-purple-soft) 70%,
    transparent
  );
  filter: blur(6px);
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================================
   7. Section primitives — eyebrow + title + lead
   ============================================================================ */

.landing-section {
  margin: 0 auto;
  padding: 0;
}

.landing-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-section-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.landing-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin: 0 0 18px;
}
.landing-section-title .accent { color: var(--accent); }
.landing-section-title .accent-purple { color: var(--accent-purple); }
.landing-section-title em {
  font-style: italic;
  color: var(--accent-purple);
  font-weight: 600;
}

.landing-section-lead {
  margin: 0 0 36px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 720px;
}

.landing-section-cta-line {
  text-align: center;
  margin: 48px 0 0;
}

/* ============================================================================
   8. How it works — 3-step ordered list
   ============================================================================ */

.landing-steps {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: step;
}

.landing-steps li {
  padding: 28px 22px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  transition: border-color 160ms ease, transform 160ms ease;
}
.landing-steps li:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
}

.landing-step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}

.landing-steps li h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.landing-steps li p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ============================================================================
   9. Module groups — 3 groups × 3 cards
   ============================================================================ */

.landing-module-group {
  margin: 56px 0 0;
}
.landing-module-group:first-of-type {
  margin-top: 32px;
}

.landing-module-group-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 4px;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px solid;
}

/* Per-group accent — Personalized = teal, Strategy = white/black, Research = purple.
   Each group's title text and underline match each other (parallel to the other groups). */
.landing-module-group[data-group="personalized"] .landing-module-group-title { color: var(--accent);        border-bottom-color: var(--accent); }
.landing-module-group[data-group="strategy"]     .landing-module-group-title { color: var(--text-primary);  border-bottom-color: var(--text-primary); }
.landing-module-group[data-group="research"]     .landing-module-group-title { color: var(--accent-purple); border-bottom-color: var(--accent-purple); }

.landing-module-group-sub {
  margin: 8px 0 22px;
  font-size: 0.92rem;
  color: var(--text-muted);
  font-style: italic;
}

.landing-module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.landing-module-card {
  padding: 22px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  position: relative;
  overflow: hidden;
}

.landing-module-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border);
  transition: background 160ms ease;
}

.landing-module-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.landing-module-group[data-group="personalized"] .landing-module-card:hover { border-color: var(--accent-border); }
.landing-module-group[data-group="personalized"] .landing-module-card:hover::before { background: var(--accent); }
.landing-module-group[data-group="strategy"]     .landing-module-card:hover::before { background: var(--text-primary); }
.landing-module-group[data-group="research"]     .landing-module-card:hover { border-color: var(--accent-purple-border); }
.landing-module-group[data-group="research"]     .landing-module-card:hover::before { background: var(--accent-purple); }

.landing-module-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  margin: 0 0 10px;
  color: var(--text-primary);
}

.landing-module-card h4 .accent { color: var(--accent); }
.landing-module-card h4 .accent-purple { color: var(--accent-purple); }

.landing-module-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ============================================================================
   10. Why-different callout
   ============================================================================ */

.landing-callout {
  padding: 28px 28px;
  background: linear-gradient(
    135deg,
    var(--accent-soft),
    var(--accent-purple-soft)
  );
  border: 1px solid var(--accent-border);
  border-radius: 14px;
  margin: 24px 0 0;
}

.landing-callout p {
  margin: 0 0 14px;
  font-size: 1.02rem;
  color: var(--text-primary);
  line-height: 1.6;
}
.landing-callout p:last-child {
  margin-bottom: 0;
}
.landing-callout strong.accent { color: var(--accent-strong); }

/* ============================================================================
   11. FAQ accordion (native details/summary)
   ============================================================================ */

.landing-faq {
  margin: 24px 0 0;
  display: grid;
  gap: 8px;
}

.landing-faq details {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease;
}
.landing-faq details[open] {
  border-color: var(--accent-border);
}

.landing-faq summary {
  padding: 16px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 48px;
  color: var(--text-primary);
  user-select: none;
}
.landing-faq summary::-webkit-details-marker {
  display: none;
}
.landing-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent);
  transition: transform 160ms ease;
  line-height: 1;
}
.landing-faq details[open] summary::after {
  content: "−";
  color: var(--accent-purple);
}
.landing-faq summary:hover {
  background: var(--bg-hover);
}

.landing-faq details > p {
  padding: 0 20px 18px;
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.landing-faq details > p a {
  color: var(--accent);
}

/* ============================================================================
   12. Privacy/security tiles
   ============================================================================ */

.landing-trust-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 28px;
}

.landing-trust-tile {
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-trust-tile-icon {
  font-size: 1.15rem;
  margin-bottom: 4px;
}
.landing-trust-tile strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.landing-trust-tile span:not(.landing-trust-tile-icon) {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ============================================================================
   13. Form section
   ============================================================================ */

.landing-form-section {
  margin: 0 auto;
  padding: 36px 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.landing-form-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, var(--accent), var(--accent-purple));
}

.landing-form-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}

.landing-form-section .landing-form-sub {
  color: var(--text-secondary);
  margin: 0 0 24px;
  font-size: 0.95rem;
}

.landing-form .landing-field {
  display: block;
  margin-bottom: 18px;
}

.landing-form .landing-field-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.landing-form .landing-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.98rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.landing-form .landing-input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.landing-form .landing-input[aria-invalid="true"] {
  border-color: var(--danger);
}

.landing-form .landing-radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.landing-form .landing-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color 120ms ease, background 120ms ease;
}

.landing-form .landing-radio input {
  margin: 0;
  accent-color: var(--accent);
}

.landing-form .landing-radio:hover {
  border-color: var(--accent-border);
}

.landing-form .landing-radio:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* honeypot — humans can never see or focus this */
.landing-form .landing-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.landing-form-status {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.92rem;
  display: none;
}
.landing-form-status[data-tone="success"] {
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--text-primary);
  display: block;
}
.landing-form-status[data-tone="error"] {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--text-primary);
  display: block;
}

.landing-form-submit {
  display: inline-block;
  padding: 13px 30px;
  background: var(--accent);
  color: var(--bg-dark);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 10px;
  letter-spacing: 0.02em;
  transition: background 120ms ease, transform 80ms ease;
}
.landing-form-submit:hover,
.landing-form-submit:focus-visible {
  background: var(--accent-strong);
  outline: none;
}
.landing-form-submit:active {
  transform: scale(0.98);
}
.landing-form-submit:disabled {
  background: var(--border);
  color: var(--text-muted);
  cursor: not-allowed;
  transform: none;
}

.landing-privacy {
  margin: 16px 0 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ============================================================================
   14. Footer
   ============================================================================ */

.landing-footer {
  margin: 80px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr));
  gap: 28px;
  margin-bottom: 24px;
}

.landing-footer-brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.landing-footer-brand .accent { color: var(--accent); }

.landing-footer-tag {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 0.88rem;
}

.landing-footer h5 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 12px;
}

.landing-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.landing-footer ul a {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.landing-footer ul a:hover {
  color: var(--accent);
}

.landing-footer-legal {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ============================================================================
   15. Animations — scroll fade-in (IntersectionObserver-driven)
   ============================================================================ */

.landing-fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
  will-change: opacity, transform;
}
.landing-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .landing-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   16. Responsive breakpoints
   ============================================================================ */

@media (max-width: 900px) {
  .landing-shell {
    padding: 20px 18px 60px;
  }

  .landing-topbar {
    gap: 14px;
    margin-bottom: 38px;
  }

  .landing-brand {
    font-size: 0.94rem;
    letter-spacing: 0.055em;
    min-width: 0;
  }

  .landing-topbar-nav {
    gap: 8px;
    flex-shrink: 0;
  }

  .landing-theme-toggle {
    padding: 6px 10px;
    font-size: 0.74rem;
  }

  .landing-hero {
    padding: 16px 0 24px;
  }

  .landing-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 18px 0;
  }
  .landing-trust-stat {
    border-right: none;
    padding: 12px 8px;
  }
  .landing-trust-stat:nth-child(odd) {
    border-right: 1px solid var(--border);
  }
  .landing-trust-stat:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  .landing-separator {
    margin: 56px auto;
    max-width: 80%;
  }

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

  .landing-module-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-trust-tiles {
    grid-template-columns: 1fr;
  }

  .landing-footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .landing-form-section {
    padding: 28px 22px;
  }
}

@media (max-width: 500px) {
  .landing-shell {
    padding-inline: 14px;
  }

  .landing-topbar {
    margin-bottom: 28px;
  }

  .landing-topbar-cta {
    display: none;
  }

  .landing-form .landing-radio-group {
    grid-template-columns: 1fr;
  }

  .landing-form .landing-radio {
    padding: 14px 14px;
    min-height: 48px;
  }

  .landing-cta-primary,
  .landing-form-submit {
    width: 100%;
    text-align: center;
  }

  .landing-form-section {
    padding: 24px 16px;
  }
}

@media (max-width: 360px) {
  .landing-brand {
    font-size: 0.86rem;
    letter-spacing: 0.04em;
  }

  .landing-theme-toggle {
    padding: 6px 8px;
    font-size: 0.7rem;
  }
}

/* AI alpha disclaimer — under MyCoach module card + above footer legal */
.landing-ai-disclaimer {
  margin: 10px 0 0;
  font-size: 0.74rem;
  font-style: italic;
  color: var(--text-muted, color-mix(in srgb, var(--text-primary) 60%, transparent));
  line-height: 1.4;
}

.landing-ai-disclaimer--footer {
  margin: 0 0 8px;
  text-align: center;
}