/* ═══════════════════════════════════════════════════════════════════
   More To Life — marketing site styles
   Design system · the Meadow world, the same one the web app and the
   phone wear (webapp/src/index.css, flutter/lib/core/theme/meadow_tokens.dart):
   a white ground under one morning wash, Outfit as the only face, ink
   #28272C, leaf green as the one action colour, one hairline, no dark
   sections, no tracking. The token names below are the site's own; their
   VALUES are the app's.
   ═══════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ─── Tokens ────────────────────────────────────────────────────── */
:root {
  /* Ground and card are both white; one hairline separates them. */
  --paper-100: #FFFFFF;                        /* ground */
  --paper-95:  #FFFFFF;                        /* card */
  --paper-90:  #EFEEF2;                        /* track: rails, quiet fills */
  --paper-85:  #E6E6EA;                        /* THE hairline */

  /* Ink, never pure black */
  --ink-100: #28272C;                          /* headlines, body · 14.8:1 */
  --ink-70:  #5C5A64;                          /* secondary sentences · 6.8:1 */
  --ink-50:  #6F6D75;                          /* meta, icons · 5.1:1 */

  /* Surfaces */
  --bg:        var(--paper-100);
  --bg-soft:   #F6F5F8;                        /* chip */
  --bg-soft-2: var(--paper-100);
  --surface:        #FFFFFF;
  --surface-high:   #F6F5F8;
  --surface-highest:#EFEEF2;
  --ghost-border:        inset 0 0 0 1px #E6E6EA;
  --ghost-border-strong: inset 0 0 0 1px #E6E6EA;
  --ghost-border-color:  #E6E6EA;
  --accent-pale:         #FFF3C4;               /* sun: the reassurance fill */

  /* Text */
  --fg:        var(--ink-100);
  --fg-muted:  var(--ink-70);
  --fg-subtle: var(--ink-50);

  /* The one action colour: leaf. White on leaf clears AA only at 19px/700,
     so button labels are bold; green as smaller text is leaf-text. */
  --primary:        #4E9A2A;                   /* leaf: fills */
  --primary-strong: #3E7D22;                   /* pressed */
  --primary-soft:   #3D7D21;                   /* leaf as text, links · 5.1:1 */
  --primary-pale:   #EEF7E7;                   /* soft tint, selected fill */
  --accent:         #8A6A1F;                   /* honey, the only accent · 5.1:1 */
  --accent-strong:  #7A5A00;
  --accent-fg:      var(--paper-100);
  --moss:           #2F6B4F;                   /* affirmation: done, care */
  --arc-orange:     #D96E20;                   /* a stroke or a dot, never text */

  /* The morning wash: the one gradient the ground wears, at the top. */
  --wash-peach: #FEE4D0;
  --wash-lilac: #E1CDED;
  --wash-rose:  #EDD8EC;
  --wash-sky:   #DCE8F6;

  /* The Bloom's five, data and nothing else. */
  --bloom-mind:      #2F5D47;
  --bloom-body:      #3F5D6B;
  --bloom-fitness:   #8A6A1F;
  --bloom-habits:    #5C5A72;
  --bloom-nutrition: #527D1E;
  /* The mark's own five. The Bloom is drawn in these and nothing else is:
     the five hue families above, turned up, for the one place a pillar hue
     may be vivid (owner, 2026-10-07). The pillar slides and every other
     use of a pillar colour keep --bloom-* . The web app's copies are
     --bloom-* in webapp/src/index.css (there the name means the mark) and
     webapp's Logo.crossSurface test holds all of them to one palette. */
  --mark-mind:      #0A935E;
  --mark-body:      #1470D2;
  --mark-fitness:   #EE9400;
  --mark-habits:    #6340DC;
  --mark-nutrition: #58A80E;
  --c-mind:      var(--bloom-mind);
  --c-body:      var(--bloom-body);
  --c-fitness:   var(--bloom-fitness);
  --c-habits:    var(--bloom-habits);
  --c-nutrition: var(--bloom-nutrition);

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --shadow-lg: 0 24px 48px -16px rgba(40, 39, 44, 0.16);
  --shadow-glow: 0 10px 28px -10px rgba(78, 154, 42, 0.45);
  --header-height: 72px;

  /* Typography: one face. */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

/* ─── Reset + base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 30%, var(--bg-soft-2) 100%);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: "kern", "liga", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms ease;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* ─── Layout primitives ─────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .container {
    padding-inline: 2rem;
  }
}

.section {
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
}

.section--tight {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.section-header h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 1rem;
}

.section-header p {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-height);
  display: flex;
  align-items: center;
  background: rgba(13, 17, 28, 0.7);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 1px 0 rgba(31, 45, 36, 0.06);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--fg);
}

.nav-brand img,
.nav-brand .brand-mark {
  width: 36px;
  height: 36px;
}

/* Wordmark for the nav — "MoreToLife" with italic terracotta "To" */
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: 1.25rem;
  line-height: 1;
}
.brand-word em {
  color: var(--primary);
  font-style: italic;
  margin: 0 1px;
}

.nav-links {
  display: none;
  gap: 0.25rem;
  align-items: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  color: var(--fg-muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 200ms ease, background 200ms ease;
}

.nav-links a:hover {
  color: var(--fg);
  background: rgba(31, 45, 36, 0.05);
}

.nav-links a.active {
  color: var(--primary-soft);
}

.nav-cta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nav-cta .btn-sm {
  padding: 0.5rem 1rem;
  min-height: 40px;
  font-size: 0.9375rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--fg);
  transition: background 150ms ease;
}

.nav-toggle:hover {
  background: rgba(31, 45, 36, 0.06);
}

.nav-toggle:focus-visible {
  outline-offset: -2px;
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 49;
  background: var(--bg);
  padding: 2rem 1.5rem;
  transform: translateX(100%);
  transition: transform 300ms ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
}

.mobile-nav.open {
  transform: translateX(0);
}

.mobile-nav a {
  display: block;
  padding: 1rem;
  border-radius: var(--radius);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--fg);
  background: var(--surface);
  box-shadow: var(--ghost-border);
}

.mobile-nav a:hover {
  background: var(--surface-high);
}

.mobile-nav .nav-cta-group {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .nav-links {
    display: flex;
  }
  .nav-toggle,
  .mobile-nav {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  min-height: 56px;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 0;
  transition: transform 180ms ease, box-shadow 250ms ease, background 200ms ease, color 200ms ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn-sm {
  min-height: 40px;
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.hero-blob--primary {
  top: -10%;
  left: -10%;
  width: 580px;
  height: 580px;
  background: rgba(78, 154, 42, 0.3);
}

.hero-blob--accent {
  bottom: -15%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: rgba(138, 106, 31, 0.18);
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

/* Logo with pulsing ring */
.logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

.logo {
  position: relative;
  z-index: 2;
  width: clamp(140px, 22vw, 220px);
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(60, 40, 28, 0.4));
}

.logo-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78, 154, 42, 0.18) 0%, transparent 70%);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.9;
  }
}

/* Hero copy */
.hero h1 {
  font-size: clamp(3rem, 8.5vw, 6rem);
  max-width: 16ch;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}

.hero h1 .gradient-text {
  background: linear-gradient(120deg, var(--primary-soft) 0%, var(--primary) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  color: var(--fg-muted);
  max-width: 52ch;
  line-height: 1.55;
}

.tagline strong {
  color: var(--fg);
  font-weight: 600;
}

/* 5 dimension pills */
.dimension-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--pill-bg, rgba(31, 45, 36, 0.06));
  color: var(--pill-color, var(--fg));
  box-shadow: var(--ghost-border);
}

.pill--fitness {
  --pill-bg: hsl(217, 91%, 60%, 0.12);
  --pill-color: hsl(217, 91%, 75%);
}
.pill--mind {
  --pill-bg: hsl(258, 90%, 66%, 0.12);
  --pill-color: hsl(258, 90%, 78%);
}
.pill--body {
  --pill-bg: hsl(351, 95%, 71%, 0.12);
  --pill-color: hsl(351, 95%, 80%);
}
.pill--nutrition {
  --pill-bg: hsl(142, 71%, 45%, 0.12);
  --pill-color: hsl(142, 71%, 60%);
}
.pill--habits {
  --pill-bg: hsl(38, 92%, 50%, 0.12);
  --pill-color: hsl(38, 92%, 65%);
}

/* CTA stack */
.cta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 460px;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .cta-stack--row {
    flex-direction: row;
    max-width: 640px;
  }
  .cta-stack--row .btn {
    flex: 1;
  }
}

/* Trust strip */
.trust-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
  color: var(--fg-muted);
  font-size: 0.875rem;
}

.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.trust-item svg {
  color: var(--primary-soft);
}

.stars {
  color: var(--accent);
  letter-spacing: 0.1em;
  font-size: 0.9rem;
}

.divider {
  width: 1px;
  height: 14px;
  background: rgba(31, 45, 36, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════
   PARTNER / PRESS STRIP
   ═══════════════════════════════════════════════════════════════════ */
.press-strip {
  padding: 2.5rem 0;
  border-top: 1px solid rgba(31, 45, 36, 0.06);
  border-bottom: 1px solid rgba(31, 45, 36, 0.06);
  background: rgba(60, 40, 28, 0.2);
}

.press-label {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 1.5rem;
}

.press-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  opacity: 0.65;
}

.press-logo {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  filter: grayscale(100%);
}

/* ═══════════════════════════════════════════════════════════════════
   PROBLEM / "WHY" SECTION
   ═══════════════════════════════════════════════════════════════════ */
.why {
  position: relative;
}

.why-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 980px;
  margin: 0 auto;
}

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

.why-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--ghost-border);
  backdrop-filter: blur(10px);
}

.why-card h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.why-card p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.55;
}

.why-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: hsl(351, 95%, 71%, 0.15);
  color: hsl(351, 95%, 78%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.875rem;
}

.why-card-icon svg {
  width: 20px;
  height: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   5 PILLARS SECTION
   ═══════════════════════════════════════════════════════════════════ */
.pillars {
  background: linear-gradient(180deg, transparent 0%, rgba(60, 40, 28, 0.25) 50%, transparent 100%);
}

.pillars-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pillars-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.pillar {
  text-align: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  box-shadow: var(--ghost-border);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--ghost-border-strong), 0 18px 36px -12px rgba(60, 40, 28, 0.4);
}

.pillar-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pillar-bg);
  color: var(--pillar-color);
  margin: 0 auto 1rem;
  box-shadow: var(--ghost-border);
}

.pillar-icon svg {
  width: 26px;
  height: 26px;
}

.pillar h3 {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.pillar p {
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

.pillar--fitness {
  --pillar-bg: hsl(217, 91%, 60%, 0.15);
  --pillar-color: hsl(217, 91%, 72%);
}
.pillar--mind {
  --pillar-bg: hsl(258, 90%, 66%, 0.15);
  --pillar-color: hsl(258, 90%, 78%);
}
.pillar--body {
  --pillar-bg: hsl(351, 95%, 71%, 0.15);
  --pillar-color: hsl(351, 95%, 80%);
}
.pillar--nutrition {
  --pillar-bg: hsl(142, 71%, 45%, 0.15);
  --pillar-color: hsl(142, 71%, 60%);
}
.pillar--habits {
  --pillar-bg: hsl(38, 92%, 50%, 0.15);
  --pillar-color: hsl(38, 92%, 65%);
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════════════════════════════════ */
.features::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(31, 45, 36, 0.02) 50%, transparent 100%);
  pointer-events: none;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--ghost-border);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--ghost-border-strong), 0 18px 36px -12px rgba(60, 40, 28, 0.4);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--feature-bg);
  color: var(--feature-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ghost-border);
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature h3 {
  font-size: 1.25rem;
}

.feature p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.55;
  flex: 1;
}

.feature--blue {
  --feature-bg: hsl(217, 91%, 60%, 0.14);
  --feature-color: hsl(217, 91%, 70%);
}
.feature--teal {
  --feature-bg: hsl(173, 80%, 40%, 0.14);
  --feature-color: hsl(173, 75%, 60%);
}
.feature--green {
  --feature-bg: hsl(142, 71%, 45%, 0.14);
  --feature-color: hsl(142, 71%, 60%);
}
.feature--violet {
  --feature-bg: hsl(258, 90%, 66%, 0.14);
  --feature-color: hsl(258, 90%, 78%);
}
.feature--orange {
  --feature-bg: hsl(20, 90%, 55%, 0.14);
  --feature-color: hsl(20, 90%, 70%);
}
.feature--amber {
  --feature-bg: hsl(38, 92%, 50%, 0.14);
  --feature-color: hsl(38, 92%, 65%);
}
.feature--rose {
  --feature-bg: hsl(351, 95%, 71%, 0.14);
  --feature-color: hsl(351, 95%, 80%);
}
.feature--cyan {
  --feature-bg: hsl(191, 91%, 55%, 0.14);
  --feature-color: hsl(191, 91%, 70%);
}

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS
   ═══════════════════════════════════════════════════════════════════ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 980px;
  margin: 0 auto;
}

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

.step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.step-badge {
  position: absolute;
  top: -10px;
  right: calc(50% - 50px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px -2px rgba(138, 106, 31, 0.35);
}

.step-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 100%);
  color: hsl(0, 0%, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ghost-border), 0 14px 28px -8px rgba(78, 154, 42, 0.45);
  margin-top: 0.5rem;
}

.step-icon svg {
  width: 32px;
  height: 32px;
}

.step h3 {
  font-size: 1.375rem;
}

.step p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  max-width: 32ch;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════
   AUDIENCE GRID (Individual / Coach / Business)
   ═══════════════════════════════════════════════════════════════════ */
.audiences {
  background: linear-gradient(180deg, transparent 0%, rgba(60, 40, 28, 0.2) 50%, transparent 100%);
}

.audience-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .audience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.audience-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--ghost-border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ghost-border-strong), 0 22px 40px -12px rgba(60, 40, 28, 0.5);
}

.audience-card--featured {
  background: linear-gradient(135deg, rgba(78, 154, 42, 0.12) 0%, rgba(78, 154, 42, 0.04) 100%);
  box-shadow: 0 0 0 2px rgba(78, 154, 42, 0.35) inset;
}

.audience-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(78, 154, 42, 0.15);
  color: var(--primary-soft);
}

.audience-card h3 {
  font-size: 1.625rem;
}

.audience-card > p {
  font-size: 1rem;
  color: var(--fg-muted);
  line-height: 1.55;
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding-top: 0.5rem;
}

.audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

.audience-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.audience-card .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   APP PREVIEW
   ═══════════════════════════════════════════════════════════════════ */
.app-preview {
  text-align: center;
}

.preview-frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--surface-high), var(--surface));
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--ghost-border), 0 25px 60px -20px rgba(60, 40, 28, 0.6);
}

.preview-mockup {
  background: rgba(60, 40, 28, 0.35);
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
  position: relative;
  overflow: hidden;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(31, 45, 36, 0.04);
}

.preview-mockup::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(78, 154, 42, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.preview-score {
  position: relative;
  font-size: clamp(4rem, 10vw, 6rem);
  font-weight: 700;
  background: linear-gradient(120deg, var(--primary-soft) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

.preview-label {
  position: relative;
  color: var(--fg-muted);
  font-size: 1rem;
}

.preview-bars {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  height: 80px;
  width: 100%;
  max-width: 320px;
  justify-content: center;
}

.preview-bar {
  flex: 1;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--bar-color) 0%, var(--bar-color-dim) 100%);
  box-shadow: inset 0 0 0 1px rgba(31, 45, 36, 0.05);
  animation: barGrow 1.5s ease-out both;
}

@keyframes barGrow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--ghost-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.testimonial-quote {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--fg);
  flex: 1;
}

.testimonial-quote::before {
  content: "\201C";
  display: block;
  font-size: 2.5rem;
  line-height: 0.7;
  color: var(--primary-soft);
  margin-bottom: 0.5rem;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(31, 45, 36, 0.06);
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-color), var(--avatar-color-2));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: hsl(0, 0%, 100%);
  font-size: 0.9375rem;
  box-shadow: var(--ghost-border);
  flex-shrink: 0;
}

.testimonial-meta {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--fg);
}

.testimonial-role {
  font-size: 0.8125rem;
  color: var(--fg-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING (teaser cards on home, full table on /pricing)
   ═══════════════════════════════════════════════════════════════════ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--ghost-border);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}

.pricing-card--featured {
  background: linear-gradient(135deg, rgba(78, 154, 42, 0.15) 0%, rgba(78, 154, 42, 0.05) 100%);
  box-shadow: 0 0 0 2px rgba(78, 154, 42, 0.4) inset, 0 25px 50px -20px rgba(78, 154, 42, 0.4);
  transform: scale(1.02);
}

@media (max-width: 1023px) {
  .pricing-card--featured {
    transform: none;
  }
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-fg);
  padding: 0.25rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 6px 12px -2px rgba(138, 106, 31, 0.4);
}

.pricing-card h3 {
  font-size: 1.375rem;
}

.pricing-card-desc {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(31, 45, 36, 0.06);
}

.pricing-amount {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg);
}

.pricing-unit {
  font-size: 0.9375rem;
  color: var(--fg-muted);
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

.pricing-features li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334d399' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

.pricing-features li.dim {
  color: var(--fg-subtle);
}

.pricing-features li.dim::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════════════════════════════════ */
.faq {
  max-width: 820px;
  margin: 0 auto;
}

.faq-item {
  background: var(--surface);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  box-shadow: var(--ghost-border);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--fg);
  transition: background 200ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  background: rgba(31, 45, 36, 0.03);
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--primary-soft);
  transition: transform 250ms ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-body {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fg-muted);
}

.faq-body p {
  margin-bottom: 0.75rem;
}

.faq-body p:last-child {
  margin-bottom: 0;
}

.faq-body a {
  color: var(--primary-soft);
  text-decoration: underline;
  text-decoration-color: hsl(17, 71%, 61%, 0.3);
  text-underline-offset: 2px;
}

.faq-body a:hover {
  text-decoration-color: var(--primary-soft);
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════════════ */
.final-cta {
  text-align: center;
  position: relative;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(78, 154, 42, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.final-cta .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  max-width: 720px;
}

.final-icon {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 6px 12px rgba(60, 40, 28, 0.3));
}

.final-cta h2 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.gradient-text {
  background: linear-gradient(120deg, var(--primary-soft) 0%, var(--primary) 40%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.final-cta p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--fg-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   NEWSLETTER
   ═══════════════════════════════════════════════════════════════════ */
.newsletter {
  background: rgba(60, 40, 28, 0.25);
  border-top: 1px solid rgba(31, 45, 36, 0.06);
  border-bottom: 1px solid rgba(31, 45, 36, 0.06);
}

.newsletter-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  max-width: 560px;
  margin: 0 auto;
}

.newsletter h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.newsletter p {
  color: var(--fg-muted);
  line-height: 1.55;
}

.newsletter-form {
  display: flex;
  width: 100%;
  gap: 0.5rem;
  flex-direction: column;
}

@media (min-width: 540px) {
  .newsletter-form {
    flex-direction: row;
  }
}

.newsletter-form input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius-full);
  background: rgba(31, 45, 36, 0.06);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  border: 0;
  outline: 0;
  box-shadow: var(--ghost-border);
  min-height: 52px;
}

.newsletter-form input::placeholder {
  color: var(--fg-subtle);
}

.newsletter-form input:focus {
  background: rgba(31, 45, 36, 0.09);
  box-shadow: var(--ghost-border-strong), 0 0 0 3px rgba(78, 154, 42, 0.25);
}

.newsletter-fine {
  font-size: 0.8125rem;
  color: var(--fg-subtle);
}

/* ═══════════════════════════════════════════════════════════════════
   MEGA FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.site-footer {
  background: rgba(60, 40, 28, 0.35);
  padding: 4rem 0 calc(2rem + env(safe-area-inset-bottom));
  box-shadow: inset 0 1px 0 rgba(31, 45, 36, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 320px;
}

.footer-brand img {
  width: 120px;
  height: auto;
  opacity: 0.95;
}

.footer-brand p {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  line-height: 1.55;
}

.footer-social {
  display: flex;
  gap: 0.5rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(31, 45, 36, 0.05);
  color: var(--fg-muted);
  box-shadow: var(--ghost-border);
  transition: background 200ms ease, color 200ms ease;
}

.footer-social a:hover {
  background: rgba(78, 154, 42, 0.15);
  color: var(--primary-soft);
}

.footer-col h5 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  margin-bottom: 1rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-col a {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-col a:hover {
  color: var(--primary-soft);
}

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(31, 45, 36, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--fg-subtle);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.8125rem;
}

.footer-bottom-links a {
  color: var(--fg-muted);
}

.footer-bottom-links a:hover {
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════
   LEGAL PAGE (privacy/terms layout)
   ═══════════════════════════════════════════════════════════════════ */
.legal-page {
  padding: 4rem 0 6rem;
}

.legal-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.5rem;
}

.legal-page .lead {
  color: var(--fg-muted);
  font-size: 1.0625rem;
  margin-bottom: 2.5rem;
}

.legal-page h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
  color: var(--fg);
}

.legal-page h3 {
  font-size: 1.125rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--fg);
}

.legal-page p,
.legal-page li {
  color: var(--fg-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.legal-page ul {
  padding-left: 1.5rem;
}

.legal-page li {
  margin-bottom: 0.4rem;
  list-style: disc;
}

.legal-page strong {
  color: var(--fg);
  font-weight: 600;
}

.legal-page a {
  color: var(--primary-soft);
  text-decoration: underline;
  text-decoration-color: hsl(17, 71%, 61%, 0.3);
}

.legal-page a:hover {
  text-decoration-color: var(--primary-soft);
}

/* ─── Accessibility / motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(78, 154, 42, 0.4);
  color: hsl(0, 0%, 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   Marketing 2026 — terracotta refresh layout primitives
   Added in Phase 7. New page structure for MK-01..05.
   ═══════════════════════════════════════════════════════════════════ */

/* Type system primitives */
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.018em; }
.display em, .display i { font-style: italic; color: var(--primary); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.tabular { font-variant-numeric: tabular-nums; }

/* Generic eyebrow label — small caps mono */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

/* Section primitives */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section-tinted { background: var(--bg-soft); border-top: 1px solid var(--ghost-border-color); border-bottom: 1px solid var(--ghost-border-color); }
.section-dark { background: var(--ink-100, #28272C); color: var(--paper-100, #FFFFFF); }
.section-dark .eyebrow { color: rgba(92, 90, 100, 0.55); }
.section-cta { background: var(--bg-soft); text-align: center; padding: clamp(4rem, 8vw, 7rem) 0; }
.section-cta .cta-mark { margin: 0 auto 1.5rem; display: block; }

/* The Bloom, drawn as light. Each petal is blended onto the ones under it
   with `screen`, inside an isolated group so the page behind is never part
   of the sum. Screen can only brighten: where two petals meet you see two
   lights added, and the centre, where all five meet, is white. Composited
   normally at 62%, as they were until 2026-10-07, they averaged to grey
   ("muddy", the book's author called it, correctly).
   A petal lights under a pointer. It is decoration and means nothing, so a
   touch screen is offered nothing in its place, and reduced motion keeps
   the light and drops the growth. Same rules as .mtl-bloom in the web app. */
.bloom { isolation: isolate; }
.bloom circle {
  mix-blend-mode: screen;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease-out;
}
@media (hover: hover) {
  .bloom circle:hover {
    transform: scale(1.06);
    filter: brightness(1.12) saturate(1.15);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bloom circle { transition: none; }
  .bloom circle:hover { transform: none; }
}
.section-cta .cta-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin-bottom: 1rem; }
.section-cta .cta-lede { color: var(--fg-muted); font-size: 1.0625rem; margin-bottom: 2rem; }

.section-header { text-align: center; max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.section-title { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.01em; margin-top: 0.5rem; }
.section-lede { color: var(--fg-muted); font-size: 1.0625rem; line-height: 1.65; margin: 1rem 0 1.5rem; max-width: 540px; }
.container-narrow { max-width: 760px; margin-inline: auto; padding-inline: 1.25rem; }

/* ─── Buttons (terracotta refresh) ────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  border: none;
  transition: background 200ms ease, transform 150ms ease, box-shadow 200ms ease;
  text-decoration: none;
  font-family: inherit;
  white-space: nowrap;
}
.btn-sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.btn-lg { padding: 1rem 1.75rem; font-size: 1rem; min-height: 56px; }
.btn-primary {
  background: var(--primary);
  color: var(--paper-100, #FFFFFF);
  box-shadow: 0 4px 14px -3px rgba(78, 154, 42, 0.4);
}
.btn-primary:hover {
  background: var(--primary-strong);
  box-shadow: 0 6px 20px -3px rgba(78, 154, 42, 0.5);
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: var(--ghost-border-strong);
}
.btn-ghost:hover { background: rgba(40, 39, 44, 0.04); }
.section-dark .btn-ghost { color: var(--paper-100, #FFFFFF); box-shadow: inset 0 0 0 1px rgba(92, 90, 100, 0.2); }

/* ─── Hero ────────────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 6vw, 5rem) 1.25rem clamp(4rem, 8vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 380px; gap: 4rem; } }
/* Eight words where "How are you?" was three: a step down from the 6rem
   ceiling, or it runs to four lines and pushes the button off a laptop. */
.hero-headline { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0.75rem 0 0; text-wrap: balance; }
.hero-ctas { margin-top: 2rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero-promises { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; padding: 0; list-style: none; }
.hero-promises li { font-size: 0.8125rem; color: var(--fg-muted); display: inline-flex; align-items: center; gap: 0.4rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-primary { background: var(--primary); }

/* ─── Store badges (WF-01 from 2026-05-18 audit) ──────────────────────
   Inline-SVG-only — no external images so visitor data never leaks to
   Apple/Google CDNs (consistent with the site's manifesto). */
.store-badges { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  background: var(--ink-100, #28272C);
  color: #FFFFFF;
  text-decoration: none;
  min-width: 160px;
  transition: opacity 150ms ease;
}
.store-badge:hover { opacity: 0.9; }
.store-badge-glyph { width: 22px; height: 22px; flex-shrink: 0; }
.store-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge-eyebrow { font-size: 0.625rem; opacity: 0.75; letter-spacing: 0.04em; text-transform: uppercase; }
.store-badge-name { font-size: 0.95rem; font-weight: 600; }
.store-badge-coming { opacity: 0.5; cursor: default; }
.store-badge-coming:hover { opacity: 0.5; }

/* ─── Garden preview (right column on home hero) ──────────────────── */
.garden-preview {
  padding: 2rem;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(78, 154, 42, 0.06), var(--bg-soft));
  box-shadow: var(--ghost-border-strong), 0 24px 60px rgba(40, 30, 20, 0.10);
}
.garden-eyebrow { text-align: center; margin-bottom: 1.25rem; font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-muted); }
.garden-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.garden-cell {
  padding: 0.875rem;
  background: var(--bg);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ghost-border-strong);
  text-align: center;
}
.garden-cell-wide { grid-column: 1 / -1; }
.garden-label { font-size: 0.8125rem; font-weight: 500; color: var(--fg); margin-top: 0.25rem; }

/* ─── Three Principles ────────────────────────────────────────────── */
.principle-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .principle-grid { grid-template-columns: repeat(3, 1fr); } }
.principle-card {
  padding: 2rem;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ghost-border-strong);
}
.principle-num { font-size: 0.75rem; color: var(--fg-subtle); }
.principle-title { font-size: 1.5rem; color: var(--fg); margin: 0.4rem 0 0.75rem; line-height: 1.1; letter-spacing: -0.01em; }
.principle-card p { color: var(--fg-muted); line-height: 1.6; font-size: 0.9375rem; }

/* ─── Five Kingdoms ───────────────────────────────────────────────── */
.kingdoms-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .kingdoms-grid { grid-template-columns: 380px 1fr; } }
.kingdoms-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.875rem; }
@media (min-width: 760px) { .kingdoms-row { grid-template-columns: repeat(5, 1fr); } }
.kingdom-card {
  background: color-mix(in oklab, var(--cell-color, var(--primary)) 12%, var(--bg));
  border-radius: 14px;
  padding: 1rem 0.875rem;
  text-align: center;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.kingdom-icon { display: flex; align-items: center; justify-content: center; height: 56px; }
.kingdom-pillar { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); margin-top: auto; }
.kingdom-organism { font-family: var(--font-display); font-style: italic; font-size: 0.9375rem; color: var(--fg); }
.kingdom-tag { font-size: 0.625rem; color: var(--fg-subtle); line-height: 1.35; }

/* ─── Pull quote (manifesto preview) ──────────────────────────────── */
.pull-quote { margin: 0; text-align: center; }
.pull-quote-text { font-size: clamp(1.375rem, 3vw, 2.25rem); line-height: 1.35; font-style: italic; letter-spacing: -0.005em; }
.pull-quote-source { margin-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(92, 90, 100, 0.55); }
.pull-quote-source a { color: var(--primary-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ─── Header / nav adjustments ────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(40, 39, 44, 0.08);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.875rem;
  gap: 1.5rem;
}
.nav-cta { display: none; align-items: center; gap: 0.5rem; }
@media (min-width: 960px) { .nav-cta { display: flex; } }
.nav-toggle {
  display: flex; flex-direction: column; gap: 4px;
  background: transparent; border: none; padding: 10px; cursor: pointer;
}
.nav-toggle .g { width: 22px; height: 22px; }
@media (min-width: 760px) { .nav-toggle { display: none; } }
.nav-links { display: none; }
@media (min-width: 760px) {
  .nav-links { display: flex; gap: 0.25rem; align-items: center; }
  .nav-links a { font-size: 0.9375rem; color: var(--fg-muted); padding: 0.5rem 0.875rem; border-radius: var(--radius-full); transition: color 200ms, background 200ms; }
  .nav-links a:hover { color: var(--fg); background: rgba(40, 39, 44, 0.04); }
}
.nav-links.open {
  display: flex; flex-direction: column;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--ghost-border-color);
}

/* ─── Footer (rewritten) ──────────────────────────────────────────── */
.site-footer {
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  background: var(--bg-soft);
  border-top: 1px solid var(--ghost-border-color);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-brand { display: flex; flex-direction: column; gap: 0.875rem; max-width: 280px; }
.footer-tagline { font-size: 0.9375rem; color: var(--fg-muted); line-height: 1.55; margin: 0; }
.footer-heading { font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 0.75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 0.25rem 0; }
.footer-links a { color: var(--fg-muted); font-size: 0.875rem; transition: color 200ms; }
.footer-links a:hover { color: var(--fg); }
.footer-links .soon { color: var(--fg-muted); font-size: 0.875rem; opacity: 0.7; cursor: default; }
.footer-divider { border: none; border-top: 1px solid var(--ghost-border-color); margin: 2.5rem 0 1rem; }
.footer-fineprint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--fg-subtle); }

/* ═══════════════════════════════════════════════════════════════════
   How-it-works page primitives (MK-02)
   ═══════════════════════════════════════════════════════════════════ */
.page-hero {
  padding: clamp(4rem, 8vw, 6rem) 1.25rem clamp(2rem, 4vw, 3rem);
}
.page-hero h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0.5rem 0 1.25rem; }
.page-hero .lede { font-size: 1.125rem; color: var(--fg-muted); line-height: 1.55; max-width: 640px; }

.ritual-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .ritual-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ritual-grid { grid-template-columns: repeat(4, 1fr); } }
.ritual-card {
  padding: 1.75rem;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ghost-border-strong);
}
.ritual-card .when { font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-subtle); }
.ritual-card .name { font-family: var(--font-display); font-size: 1.875rem; margin-top: 0.4rem; letter-spacing: -0.01em; }
.ritual-card .dur { font-size: 0.75rem; color: var(--fg-subtle); margin-top: 0.25rem; }
.ritual-card p { margin-top: 1rem; font-size: 0.9375rem; color: var(--fg-muted); line-height: 1.6; }

.week-table {
  display: flex; flex-direction: column; gap: 0.25rem;
  max-width: 1000px; margin: 0 auto;
}
.week-day {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--ghost-border-strong);
  align-items: center;
  font-size: 0.875rem;
}
@media (min-width: 760px) { .week-day { grid-template-columns: 50px 1fr 1fr 1fr 1.4fr; } }
.week-day .d { font-family: var(--font-display); font-size: 1.125rem; }
.week-day .sage { color: var(--primary); font-style: italic; font-size: 0.8125rem; }

/* ═══════════════════════════════════════════════════════════════════
   Orgs page (MK-03)
   ═══════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
.kpi-card {
  padding: 1.75rem;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ghost-border-strong);
}
.kpi-value { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--primary); line-height: 1; }
.kpi-label { font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 0.25rem; }
.kpi-card p { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.6; margin-top: 0.875rem; }

.promise-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 760px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
.promise-card {
  display: flex; gap: 0.625rem; align-items: flex-start;
  padding: 0.875rem 1rem;
  background: color-mix(in oklab, var(--paper-100, #FFFFFF) 8%, transparent);
  border-radius: 10px;
  font-size: 0.875rem; line-height: 1.5;
}
.promise-card svg { flex-shrink: 0; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   Pricing page (MK-04)
   ═══════════════════════════════════════════════════════════════════ */
.price-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
.price-tier {
  padding: 2rem;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 0 0 1px var(--ghost-border-strong);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.price-tier.featured {
  border-top: 4px solid var(--primary);
  box-shadow: 0 0 0 1px var(--ghost-border-strong), 0 16px 36px -8px rgba(40, 30, 20, 0.10);
}
.price-tier .badge {
  position: absolute; top: 1rem; right: 1rem;
  font-size: 0.6875rem; padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  background: hsl(78, 41%, 36%, 0.15); color: var(--c-body, #708238);
}
.price-tier .tier-name { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; }
.price-tier .tier-price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.5rem; }
.price-tier .tier-price .num { font-family: var(--font-display); font-size: 2.75rem; color: var(--fg); line-height: 1; }
.price-tier .tier-price .sub { font-size: 0.8125rem; color: var(--fg-subtle); }
.price-tier .tier-desc { font-size: 0.875rem; color: var(--fg-muted); line-height: 1.55; }
.price-tier .feat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.price-tier .feat-list li { position: relative; display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--fg); }
.price-tier .feat-list li::before {
  content: "";
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(78, 154, 42, 0.15);
  flex-shrink: 0;
}
.price-tier .feat-list li::after {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%);
  background: #C8633D;
  -webkit-mask: url("assets/icons/glyph/check.png") center/contain no-repeat;
  mask: url("assets/icons/glyph/check.png") center/contain no-repeat;
}

.faq-list { max-width: 720px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid var(--ghost-border-color);
  padding: 1.125rem 0;
}
.faq-list summary {
  cursor: pointer; font-size: 0.9375rem; font-weight: 500; color: var(--fg);
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: var(--fg-muted);
  -webkit-mask: url("assets/icons/glyph/plus.png") center/contain no-repeat;
  mask: url("assets/icons/glyph/plus.png") center/contain no-repeat;
  transition: transform 200ms;
}
.faq-list details[open] summary::after {
  -webkit-mask-image: url("assets/icons/glyph/minus.png");
  mask-image: url("assets/icons/glyph/minus.png");
}
.faq-list details p { margin-top: 0.625rem; font-size: 0.875rem; color: var(--fg-muted); line-height: 1.65; }

/* ═══════════════════════════════════════════════════════════════════
   Manifesto page (MK-05)
   ═══════════════════════════════════════════════════════════════════ */
.manifesto-article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 6rem) 1.25rem clamp(3rem, 6vw, 5rem);
}
.manifesto-article h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.875rem;
}
.manifesto-date {
  font-size: 0.875rem;
  color: var(--fg-subtle);
  font-style: italic;
  margin-bottom: 2rem;
}
.manifesto-article p {
  font-size: 1.125rem;
  color: var(--fg);
  line-height: 1.65;
  margin-top: 1.5rem;
}
.manifesto-article .opener {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  margin-top: 1.5rem;
}
.manifesto-signoff {
  margin-top: 3rem;
  padding-top: 1.875rem;
  border-top: 1px solid var(--ghost-border-color);
  font-size: 0.8125rem;
  color: var(--fg-muted);
}


/* ═══════════════════════════════════════════════════════════════════
   Three Ways to Answer demo (2026-05-19)
   Pure CSS auto-loop showing Classic / This-or-That / What-If formats.
   9s cycle, 3 frames at 3s each. Honors prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */

.section-demo {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.demo-shell {
  max-width: 560px;
  margin: 2rem auto 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--primary) 6%, var(--bg));
  box-shadow: var(--ghost-border);
}

.demo-stage {
  position: relative;
  min-height: 280px;
}

.demo-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  opacity: 0;
  transform: translateY(8px);
  animation: demo-cycle 9s infinite cubic-bezier(.4,0,.2,1);
}
.demo-frame-classic { animation-delay: 0s; }
.demo-frame-tot     { animation-delay: 3s; }
.demo-frame-whatif  { animation-delay: 6s; }

@keyframes demo-cycle {
  0%   { opacity: 0; transform: translateY(8px); }
  3%   { opacity: 1; transform: translateY(0); }
  31%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.demo-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}

.demo-caption {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-muted);
  text-align: center;
  max-width: 380px;
}

/* ── Classic Likert mock ─────────────────────────────────────────── */
.demo-likert {
  display: flex;
  gap: 0.5rem;
}
.demo-pill {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  background: color-mix(in srgb, var(--ink-100) 6%, transparent);
  color: var(--fg-muted);
  transition: background 200ms, color 200ms, transform 200ms;
}
.demo-pill-select {
  /* Highlights mid-frame to simulate a tap. The animation runs in sync
     with .demo-frame-classic (offset 0s, so 0-3s into the master
     timeline). Keyframes are relative to a 9s parent cycle: tap lands
     at ~13% (1.2s of 9s) so it feels like a deliberate pick after a
     beat. */
  animation: demo-classic-pick 9s infinite cubic-bezier(.4,0,.2,1);
}
@keyframes demo-classic-pick {
  0%, 12%, 31%, 100% {
    background: color-mix(in srgb, var(--ink-100) 6%, transparent);
    color: var(--fg-muted);
    transform: scale(1);
  }
  16% {
    background: var(--primary);
    color: var(--paper-100);
    transform: scale(1.12);
  }
  20%, 31% {
    background: var(--primary);
    color: var(--paper-100);
    transform: scale(1.04);
  }
}

/* ── This or That mock ───────────────────────────────────────────── */
.demo-tot-card {
  display: flex;
  width: min(100%, 360px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink-100) 8%, transparent);
}
.demo-tot-side {
  flex: 1;
  padding: 1rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ink-100) 4%, var(--bg));
  color: var(--fg);
}
.demo-tot-this {
  /* Activates mid-frame to demo a tap on the "This" side. Offset
     relative to the 9s parent timeline — ToT is the second frame
     (33-66%). Highlight at ~46% (about 1.2s into the ToT slot). */
  animation: demo-tot-tap 9s infinite cubic-bezier(.4,0,.2,1);
}
.demo-tot-glyph {
  font-size: 0.875rem;
  color: var(--primary);
}
.demo-tot-that .demo-tot-glyph { color: var(--fg-subtle); }
@keyframes demo-tot-tap {
  0%, 41%, 64%, 100% {
    background: color-mix(in srgb, var(--ink-100) 4%, var(--bg));
  }
  46%, 60% {
    background: color-mix(in srgb, var(--primary) 18%, var(--bg));
  }
}

/* ── What If mock ────────────────────────────────────────────────── */
.demo-whatif-card {
  padding: 1rem 1.125rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: min(100%, 380px);
}
.demo-whatif-eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 600;
}
.demo-whatif-scenario {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fg);
  text-align: center;
}
.demo-whatif-options {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  opacity: 0;
  transform: translateY(6px);
  /* WhatIf is frame 3 (66-100% of the 9s cycle). Reveal at ~78%. */
  animation: demo-whatif-reveal 9s infinite cubic-bezier(.4,0,.2,1);
}
.demo-whatif-opt {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  font-size: 0.8125rem;
  color: var(--fg);
  background: color-mix(in srgb, var(--c-habits) 18%, var(--bg));
}
.demo-whatif-opt-b {
  background: color-mix(in srgb, var(--primary) 22%, var(--bg));
  font-weight: 600;
}
@keyframes demo-whatif-reveal {
  0%, 74%, 97%, 100% {
    opacity: 0;
    transform: translateY(6px);
  }
  78%, 94% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Pagination dots ─────────────────────────────────────────────── */
.demo-dots {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 1.25rem;
}
.demo-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 25%, transparent);
  animation: demo-dot-active 9s infinite cubic-bezier(.4,0,.2,1);
}
.demo-dot-classic { animation-delay: 0s; }
.demo-dot-tot     { animation-delay: 3s; }
.demo-dot-whatif  { animation-delay: 6s; }
@keyframes demo-dot-active {
  0%, 31%, 100% {
    background: color-mix(in srgb, var(--primary) 25%, transparent);
    width: 6px;
  }
  3%, 28% {
    background: var(--primary);
    width: 22px;
  }
}

/* ── Reduced motion: hold the first frame static ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .demo-frame,
  .demo-pill-select,
  .demo-tot-this,
  .demo-whatif-options,
  .demo-dot {
    animation: none;
  }
  .demo-frame-classic { opacity: 1; transform: none; }
  .demo-frame-tot,
  .demo-frame-whatif { display: none; }
  .demo-pill-select {
    background: var(--primary);
    color: var(--paper-100);
  }
  .demo-dot-classic {
    background: var(--primary);
    width: 22px;
  }
}

/* The five kingdoms carry the app's felt flowers (assets/icons/3d) and the real binomial beside the common name. */
.kingdom-icon img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 8px 12px rgba(40,39,44,0.12)); }

/* ─── The 3D objects (assets/icons/3d) ────────────────────────────────
   One rule set for the whole site. The object is the same matte, pastel
   set the app and the phone draw (docs/design/icons-3d.md); it names a
   THING or a PLACE beside a label that already says the word, so it
   carries no colour, no border and no alt text of its own. Sizes follow
   section 3 of that doc: 32-44 in a card, 56-72 as a hero, never under
   20. The soft shadow is the app's own, so an object sits on the page
   the way it sits on a card in the product. */
.obj {
  display: inline-block;
  object-fit: contain;
  flex: none;
  filter: drop-shadow(0 6px 10px rgba(40, 39, 44, 0.12));
}
.obj-sm { width: 26px; height: 26px; }
.obj-lg { width: 44px; height: 44px; }
.obj-block { display: block; margin-bottom: 0.875rem; }
.faq-list summary .faq-q { flex: 1; padding-left: 0.625rem; }

/* ─── The monochrome glyphs (assets/icons/glyph) ──────────────────────
   Controls and marks under 20px only, matched by shape from the owner's
   vector decks (docs/design/icons-3d.md section 6). Tinted with
   currentColor so it sits in running text and inherits a link's colour. */
.g {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  background: currentColor;
  -webkit-mask: var(--g) center/contain no-repeat;
  mask: var(--g) center/contain no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════
   WISHLIST (the one door while sign-up is by invitation)
   ═══════════════════════════════════════════════════════════════════ */
/* pretty: the line ends on "nothing else.", not on a lone "else." */
.section-wishlist .cta-lede { max-width: 38rem; margin-inline: auto; text-wrap: pretty; }
.wishlist-form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 30rem; margin: 0 auto; text-align: start; }
.wishlist-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 1rem; font-weight: 600; color: var(--fg); }
.wishlist-field em { font-style: normal; font-weight: 400; color: var(--fg-subtle); }
.wishlist-field input, .wishlist-field textarea {
  font: inherit; font-weight: 400; font-size: 1.0625rem; color: var(--fg);
  background: var(--bg); border: 0; border-radius: 1.25rem; padding: 0.95rem 1.1rem; min-height: 56px;
  box-shadow: inset 0 0 0 1px hsl(30 20% 20% / 0.12);
}
.wishlist-field textarea { min-height: 4.5rem; resize: vertical; }
.wishlist-field input:focus-visible, .wishlist-field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wishlist-form .btn { margin-top: 0.4rem; min-height: 64px; font-size: 1.0625rem; }
.wishlist-form .btn[disabled] { opacity: 0.7; cursor: default; transform: none; }
.wishlist-error { color: hsl(14 60% 38%); font-size: 1rem; margin: 0; }
.cf-turnstile:empty { display: none; }
.wishlist-count { color: var(--fg-muted); font-size: 1rem; text-align: center; margin: 0.2rem 0 0; min-height: 1.4em; }
.wishlist-done { max-width: 30rem; margin: 0 auto; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.wishlist-done h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.wishlist-done p { color: var(--fg-muted); font-size: 1.0625rem; margin: 0; }
.wishlist-form[hidden], .wishlist-done[hidden], .wishlist-done .btn[hidden] { display: none; }
.wishlist-signin { margin-top: 2rem; color: var(--fg-muted); font-size: 1rem; }
.wishlist-signin a { color: var(--fg); text-decoration: underline; text-underline-offset: 0.2em; }
.plan-note { margin-top: 0.75rem; color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   THE FIVE, ONE AT A TIME (pillar slides)
   One composition per pillar on its own wash: the felt flower with the
   real item names turning around it (the Bloom's own figure), the name
   at display scale, its sentence, three plain lines. Reduced motion
   holds the ring still with the names still placed.
   ═══════════════════════════════════════════════════════════════════ */
.section-pillars { background: var(--bg); }
.pillar-rail { margin-inline: -1.25rem; }
.pillar-track {
  display: flex; gap: 1rem; padding: 0.5rem 1.25rem 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pillar-track::-webkit-scrollbar { display: none; }
.pillar-slide {
  flex: 0 0 min(88vw, 32rem); scroll-snap-align: start;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pillar) 18%, var(--bg)) 0%, color-mix(in srgb, #FEE4D0 55%, var(--bg)) 45%, var(--bg) 100%);
  border-radius: 24px; padding: 1.75rem 1.5rem 1.75rem;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.pillar-orbit {
  position: relative; width: min(64vw, 260px); aspect-ratio: 1; margin: 0.5rem auto 1.25rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--pillar) 30%, transparent) 0%, color-mix(in srgb, var(--pillar) 10%, transparent) 52%, transparent 72%);
}
.pillar-flower {
  position: absolute; inset: 23%; width: 54%; height: 54%;
  filter: drop-shadow(0 22px 30px rgba(40,39,44,0.18));
  animation: pillar-float 6s ease-in-out infinite;
}
.pillar-slide-title { font-size: clamp(2.75rem, 6vw, 3.75rem); line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
/* The question this part asks: the slide's main line after its name. */
.pillar-slide-tag { color: var(--fg); font-size: 1.25rem; line-height: 1.35; margin: 0 0 0.35rem; }
.pillar-line { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fg); }
.pillar-line strong { color: var(--fg); }
.pillar-more { margin: 0.5rem 0 0; }
.pillar-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 0.5rem; }
.pillar-arrow { min-width: 44px; }
.pillar-dots { display: flex; gap: 0.375rem; }
.pillar-dot { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; cursor: pointer; background: color-mix(in srgb, var(--primary) 25%, transparent); transition: width 200ms ease, background 200ms ease; }
.pillar-dot.is-active { width: 22px; background: var(--primary); }
.pillar-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes pillar-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.03); } }
@media (prefers-reduced-motion: reduce) {
  .pillar-flower { animation: none; }
  .pillar-track { scroll-behavior: auto; }
}
@media (min-width: 900px) {
  .pillar-slide { flex-basis: 32rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE DECK: the front page reads as slides. Each section is a viewport
   tall and the page snaps to it (proximity, so a tall section never
   fights a thumb); a section's content settles in as it arrives where the
   browser has scroll-driven animation. Reduced motion holds every state.
   ═══════════════════════════════════════════════════════════════════ */
html:has(body.deck) { scroll-snap-type: y proximity; }
body.deck .hero,
body.deck .section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-margin-top: 0;
}
body.deck .site-footer { scroll-snap-align: end; }

/* A BAND, not a slide. The front page was 11.9 screens of scroll with ten
   sections, each claiming a whole viewport whether or not it had a viewport's
   worth to say; the owner's word for it was "so vast". These four keep every
   word and stop claiming a screen each, so the page reads as six stops with
   quieter ground between them instead of ten equal demands.

   Deliberately a modifier on .section rather than a new element, so a band
   keeps the section's container, rhythm and scroll-driven settle. */
body.deck .section--band {
  min-height: 0;
  scroll-snap-align: none;
  padding-block: clamp(3rem, 7vw, 5rem);
}
@supports (animation-timeline: view()) {
  body.deck .section > .container,
  body.deck .hero > .hero-grid {
    animation: deck-arrive linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
}
@keyframes deck-arrive {
  from { opacity: 0.7; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  body.deck .section > .container,
  body.deck .hero > .hero-grid { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE MEADOW WORLD ON THE SITE (2026-09-07)
   The app's grammar, applied over the older rules above: Outfit at
   weight, no tracking, white ground, the wash on the hero only, leaf as
   the one action colour, hairline cards, no dark sections.
   ═══════════════════════════════════════════════════════════════════ */
body { background: var(--bg); color: var(--fg); font-family: var(--font); }
h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; letter-spacing: normal; color: var(--fg); }
.display { font-family: var(--font); font-weight: 700; letter-spacing: normal; font-style: normal; }
.display em, .hero-headline em { font-style: normal; font-weight: 600; color: var(--primary-soft); }
.hero-headline { letter-spacing: normal; }
.hero h1 { letter-spacing: normal; }
.pillar-slide-title { letter-spacing: normal; }
.eyebrow { letter-spacing: 0.04em; color: var(--fg-muted); font-weight: 600; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.kingdom-organism, .ritual-card .name, .week-day .d, .kpi-value, .price-tier .tier-name { font-family: var(--font); font-style: normal; }
.kpi-value { color: var(--primary-soft); font-weight: 700; }

/* The header: white glass with the one hairline, as the app's bar. */
.site-header {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--paper-85);
}
.nav-links a { color: var(--fg-muted); }
.nav-links a:hover, .nav-links a.active { color: var(--fg); background: var(--bg-soft); }

/* Buttons: the app's pills. */
.btn { font-family: var(--font); font-weight: 700; }
.btn-primary { background: var(--primary); color: #FFFFFF; box-shadow: 0 4px 14px -6px rgba(78, 154, 42, 0.5); }
.btn-primary:hover { background: var(--primary-strong); box-shadow: 0 6px 18px -6px rgba(78, 154, 42, 0.6); }
.btn-ghost { background: var(--primary-pale); color: var(--primary-soft); box-shadow: none; }
.btn-ghost:hover { background: #E4F1DA; }
.btn-sm { font-weight: 600; }

/* The hero wears the wash; everything under it is white. */
.hero {
  background: linear-gradient(160deg, var(--wash-peach) 0%, var(--wash-lilac) 55%, var(--wash-sky) 82%, var(--bg) 100%);
}
.hero-blob { display: none; }
.section-tinted { background: var(--bg); border-top: 1px solid var(--paper-85); border-bottom: 1px solid var(--paper-85); }
.section-cta { background: linear-gradient(180deg, var(--bg) 0%, var(--wash-peach) 100%); }
.section-dark { background: linear-gradient(160deg, var(--wash-lilac) 0%, var(--wash-rose) 60%, var(--wash-peach) 100%); color: var(--fg); }
.section-dark .eyebrow, .pull-quote-source { color: var(--ink-70); }
.pull-quote-text { font-style: normal; font-weight: 600; }
.pull-quote-source a { color: var(--primary-soft); }
.section-dark .btn-ghost { color: var(--primary-soft); background: rgba(255, 255, 255, 0.7); box-shadow: none; }

/* Cards: white, one hairline, the app's soft lift. */
.principle-card, .card, .audience-card, .price-tier, .ritual-card, .kingdom-card, .promise-card, .kpi-card, .faq-item, .step-card, .feature-card {
  background: var(--paper-95);
  box-shadow: inset 0 0 0 1px var(--paper-85), 0 4px 18px -8px rgba(40, 39, 44, 0.10);
  border: 0;
}
.principle-num { color: var(--fg-subtle); }
.dot-primary { background: var(--primary); }
a { color: var(--primary-soft); }
::selection { background: var(--wash-lilac); color: var(--fg); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════
   LIVINGNESS (2026-09-07): the hero wash reaches the edges and follows
   the pointer; headline words rise in on load; cards and tiles settle in
   as they arrive; the garden plants sway; the pillar orbit turns. Every
   motion starts from a visible resting state and is off under reduced
   motion.
   ═══════════════════════════════════════════════════════════════════ */
body.deck .hero {
  max-width: none;
  margin-inline: 0;
  padding-inline: max(1.25rem, calc((100vw - var(--container)) / 2));
  background:
    radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, 0.55), transparent 60%),
    linear-gradient(160deg, var(--wash-peach) 0%, var(--wash-lilac) 55%, var(--wash-sky) 82%, var(--bg) 100%);
  background-size: 100% 100%, 200% 200%;
  animation: wash-drift 24s ease infinite;
}
@keyframes wash-drift {
  0% { background-position: 0 0, 0% 0%; }
  50% { background-position: 0 0, 100% 100%; }
  100% { background-position: 0 0, 0% 0%; }
}
/* Headline words rise in, one after another. */
.hero-headline .w { display: inline-block; animation: word-rise 0.8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes word-rise { from { transform: translateY(0.35em); opacity: 0.6; } to { transform: none; opacity: 1; } }
/* Cards settle in as they arrive: from a visible rest (never opacity 0). */
.reveal { transition: transform 0.7s cubic-bezier(.16, 1, .3, 1), opacity 0.7s ease; transition-delay: calc(var(--i, 0) * 80ms); transform: translateY(16px); opacity: 0.72; }
.reveal.is-in { transform: none; opacity: 1; }
/* The garden plants sway on the breath. */
.garden-cell img, .garden-cell svg, .kingdom-card img, .kingdom-card svg { transform-origin: 50% 100%; animation: plant-sway 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 0.7s); }
@keyframes plant-sway { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
/* Cards lift a breath on hover. */
.principle-card, .promise-card, .kingdom-card, .ritual-card, .kpi-card, .price-tier, .pillar-slide { transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s ease; }
.principle-card:hover, .promise-card:hover, .kingdom-card:hover, .ritual-card:hover, .kpi-card:hover, .price-tier:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--paper-85), 0 18px 36px -14px rgba(40, 39, 44, 0.18); }
/* The primary pill breathes light, slowly. */
.hero-ctas .btn-primary, .section-cta .btn-primary { animation: leaf-breathe 4.2s ease-in-out infinite; }
@keyframes leaf-breathe {
  0%, 100% { box-shadow: 0 4px 14px -6px rgba(78, 154, 42, 0.5), 0 0 0 0 rgba(78, 154, 42, 0); }
  50% { box-shadow: 0 8px 22px -6px rgba(78, 154, 42, 0.6), 0 0 0 10px rgba(78, 154, 42, 0.09); }
}
@media (prefers-reduced-motion: reduce) {
  body.deck .hero { animation: none; }
  .hero-headline .w { animation: none; }
  .reveal { transform: none; opacity: 1; transition: none; }
  .garden-cell img, .garden-cell svg, .kingdom-card img, .kingdom-card svg { animation: none; }
  .hero-ctas .btn-primary, .section-cta .btn-primary { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   ONE SPINE (2026-09-08): the front page follows the apps' section
   order and words. These rules dress the sections the site gained
   (the doors, how it works, the toolkit, the book, the plan, the six
   answers) in the same Meadow grammar as the rest.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; align-items: center; } }
body.deck .section > .container { width: 100%; min-width: 0; }
.section-header { width: 100%; min-width: 0; }
.accent { color: var(--leaf, #4E9A2A); }

/* The five parts: a glyph, a name and the question that part asks. Each row
   opens that part's own page in the app. (These were eight "doors", a symptom
   over a promise; the class names stay, the words went.) */
.doors { width: 100%; max-width: 520px; }
@media (min-width: 960px) { .doors { justify-self: end; } }
.doors-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.door-link {
  display: flex; align-items: center; gap: 1rem; min-height: 72px; padding: 0.875rem 1.125rem;
  background: var(--paper-100, #fff); border-radius: 18px; box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA), 0 6px 18px rgba(40, 39, 44, 0.05);
  color: var(--ink-100, #28272C); text-decoration: none;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), box-shadow 0.35s ease;
}
.door-link:hover, .door-link:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA), 0 14px 28px rgba(40, 39, 44, 0.09); }
.door-link:active { transform: scale(0.985); }
.door-glyph { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.door-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.door-name { font-weight: 600; font-size: 1.125rem; line-height: 1.3; }
.door-question { font-size: 1rem; line-height: 1.4; color: var(--ink-70, #5C5A64); }
.door-chev { opacity: 0.4; flex: 0 0 auto; }

/* How it works: three cards, the same three drawings on every surface */
.how-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 1100px; margin-inline: auto; }
@media (min-width: 760px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
.how-card { background: var(--paper-100, #fff); border-radius: 20px; box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.125rem; }
.how-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 0.375rem; color: var(--ink-100, #28272C); }
.how-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-70, #5C5A64); }
.how-art { border-radius: 16px; padding: 1.25rem; min-height: 212px; display: flex; flex-direction: column; justify-content: center; gap: 0.625rem; position: relative; }
.how-art-ladder { background: hsl(24 100% 94% / 0.6); }
/* Six rungs, 0 to 5, mapped onto the five-stop ramp the way the app's own
   ladder does (the third and fourth rungs share the middle stop). */
.how-art-ladder span { display: block; height: 26px; width: var(--w); border-radius: 999px; background: hsl(24 100% 90%); }
.how-art-ladder span:nth-child(2) { background: hsl(20 90% 86%); }
.how-art-ladder span:nth-child(3), .how-art-ladder span:nth-child(4) { background: hsl(30 70% 84%); }
.how-art-ladder span:nth-child(5) { background: hsl(104 45% 84%); }
.how-art-ladder span:nth-child(6) { background: hsl(104 55% 76%); }
.how-art-ladder span.is-picked { box-shadow: inset 0 0 0 2px var(--leaf, #4E9A2A); }
.how-art-picture { background: hsl(262 60% 94% / 0.6); }
.how-bar { display: flex; align-items: center; gap: 0.625rem; }
.how-bar img { width: 22px; height: 22px; flex: 0 0 auto; }
.how-bar i { display: block; flex: 1; height: 10px; border-radius: 999px; background: rgba(40, 39, 44, 0.08); position: relative; overflow: hidden; }
.how-bar i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--c); border-radius: inherit; }
.how-example { font-size: 0.8125rem !important; color: var(--ink-50, #8A8892) !important; margin-top: 0.25rem !important; }
.how-art-garden { background: hsl(212 60% 92% / 0.6); flex-direction: row; align-items: flex-end; justify-content: center; gap: 0.25rem; flex-wrap: wrap; padding-bottom: 2.5rem; }
.how-art-garden img { width: 64px; height: 64px; scale: var(--s); transform-origin: bottom center; filter: drop-shadow(0 6px 10px rgba(40, 39, 44, 0.12)); animation: plant-sway 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.how-art-garden .how-example { position: absolute; left: 1rem; bottom: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .how-art-garden img { animation: none; } }

/* Rhythms and the toolkit */
.ritual-card .name { font-weight: 600; }
.toolkit-title { text-align: center; max-width: 640px; margin: clamp(2.5rem, 5vw, 4rem) auto 1.5rem; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; font-weight: 600; }
.toolkit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .toolkit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .toolkit-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .toolkit-grid { grid-template-columns: repeat(4, 1fr); } }
.tool-card { background: var(--paper-100, #fff); border-radius: 18px; box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA); padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 188px; }
.tool-card img { width: 64px; height: 64px; filter: drop-shadow(0 8px 12px rgba(40, 39, 44, 0.12)); margin-bottom: 0.25rem; }
.tool-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; margin: 0; line-height: 1.3; color: var(--ink-100, #28272C); }
.tool-card p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-70, #5C5A64); }

/* The book */
.book-card { text-align: center; background: var(--paper-100, #fff); border-radius: 24px; box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA); padding: clamp(2rem, 5vw, 3rem); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.book-card .obj { width: 56px; height: 56px; }
.book-card .section-title { margin: 0; }
.book-card p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-70, #5C5A64); max-width: 620px; }
.book-card p em { font-style: italic; color: var(--ink-100, #28272C); }
.book-scales { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.book-scales li { padding: 0.5rem 1rem; border-radius: 999px; background: rgba(78, 154, 42, 0.1); font-weight: 500; font-size: 0.9375rem; color: var(--ink-100, #28272C); }

/* The plan */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; max-width: 820px; margin-inline: auto; }
@media (min-width: 760px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
.plan-grid .price-tier { display: flex; flex-direction: column; gap: 0.625rem; }
.plan-grid .price-tier.featured { box-shadow: inset 0 0 0 2px var(--leaf, #4E9A2A); }
.plan-trial { text-align: center; max-width: 560px; margin: 2rem auto 0; font-size: 1rem; line-height: 1.6; color: var(--ink-70, #5C5A64); }
.plan-cta { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.75rem 0 0; }

/* The six answers, in the apps' card grammar */
.faq-item-m { background: var(--paper-100, #fff); border-radius: 18px; box-shadow: 0 0 0 1px var(--paper-85, #E6E6EA); padding: 0 1.25rem; margin-bottom: 0.75rem; }
.faq-item-m summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.625rem; min-height: 64px; padding: 0.75rem 0; font-weight: 600; font-size: 1.0625rem; color: var(--ink-100, #28272C); }
.faq-item-m summary::-webkit-details-marker { display: none; }
.faq-item-m summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--ink-50, #8A8892); border-bottom: 2px solid var(--ink-50, #8A8892); transform: rotate(-45deg); transition: transform 0.3s ease; margin-left: auto; flex: 0 0 auto; }
.faq-item-m[open] summary::after { transform: rotate(45deg); }
.faq-item-m p { margin: 0; padding: 0 0 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--ink-70, #5C5A64); }

/* Phones: the button runs full width, and may wrap rather than clip. */
@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; white-space: normal; text-align: center; }
  .pillar-orbit { width: min(58vw, 260px); }
}

.hero-what { margin: 1rem 0 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink-70, #5C5A64); max-width: 34rem; }
.hero-what + .hero-what { margin-top: 0.75rem; }
/* The book's own question, and the one button that answers it. A line of the
   page, not a label over the button. */
.hero-ask { margin: 1.75rem 0 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.2; color: var(--ink-100, #28272C); }
.hero-ask + .hero-ctas { margin-top: 0.75rem; }
/* The headline is eight words where "How are you?" was three, and it was still
   being set by `.hero h1` (6rem, which outranks `.hero-headline`): four lines
   of 96px, which pushed the page's one button under the fold on the two
   commonest laptop sizes (measured 2026-10-07: 67px under at 1366x768, 112px
   under at 1280x720). At the web app's size it runs to three lines and the
   button clears the fold at both. */
.hero h1.hero-headline { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1.02; max-width: 16ch; margin: 0; }

.pillar-slide-what { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--ink-70, #5C5A64); }
.pillar-slide-tag { margin-top: 0.25rem; }

/* ═══════════════════════════════════════════════════════════════════
   THE FIRST SCREEN IN THE AUTHOR'S WORDS (2026-10-06). The closing
   section opens on the way in again; the wishlist sits under it with
   its own, smaller title, and the store badges moved down here from
   the hero.
   ═══════════════════════════════════════════════════════════════════ */
.section-header .section-lede { margin-inline: auto; }
.cta-actions { margin: 0 0 3rem; }
.cta-actions .btn { white-space: normal; text-align: center; }
.section-cta .cta-title { text-wrap: balance; }
.wishlist-title { font-size: clamp(1.375rem, 3vw, 1.75rem); line-height: 1.2; margin: 0 0 0.75rem; }
.section-wishlist .store-badges { justify-content: center; margin-top: 2rem; }
.plan-cta .btn { white-space: normal; text-align: center; }