/* ── Tonic — tonichabits.com ──
   Light-first, built from the app's marketing design language
   (Debug/AppStoreFramesView.swift + the amberClean palette in
   PaletteThemes.swift). The site is the "lived web version" of the
   App Store frames: warm amber gradient bands, white component cards
   with real app icons and tinted progress, Fraunces headlines.
   Dark appears only in the deliberate night strip on the home page. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* amberClean light palette — DesignTokens source of truth */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-elevated: #F4F3F0;
  --accent: #B8842A;          /* buttonFill.light */
  --accent-bright: #E8A04A;   /* the dark-mode gold, for warm moments */
  --accent-text: #966C20;
  --accent-subtle: rgba(184, 132, 42, 0.10);
  --text-primary: #1C1C1E;
  --text-secondary: #5E5E62;
  --divider: #E5E5E7;
  --success: #6B9B5A;
  --destructive: #C45B4A;

  /* archetype tints (light values) */
  --tint-reader: #C8824B;
  --tint-meditator: #9B7EC8;
  --tint-learner: #5BA57A;
  --tint-journaler: #5A8FB0;
  --tint-athlete: #C46A5A;
  --tint-daylight: #4A90B8;

  /* App Store frame gradient + phone ground */
  --band-top: #C8703A;
  --band-mid: #E0A050;
  --band-bottom: #F0C074;
  --phone-ground: #FAF8F5;

  /* night strip */
  --dark-bg: #141416;
  --dark-surface: #232326;
  --dark-text: #F0EFEC;
  --dark-secondary: #8E8E93;
  --dark-amber: #D4954A;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;

  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --card-shadow: 0 4px 12px rgba(28, 28, 30, 0.06), 0 1px 3px rgba(28, 28, 30, 0.05);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
}

a { color: var(--accent-text); }

.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

section { padding: var(--space-3xl) 0; }

/* ── Nav ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  background: rgba(250, 250, 247, 0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.nav-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.logo-dot { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: var(--space-lg); }

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-link:hover { color: var(--accent-text); }

.nav-cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 999px;
  transition: transform 0.15s ease;
}

.nav-cta:hover { transform: translateY(-1px); }

@media (max-width: 600px) {
  .nav-link { display: none; }
  .nav-link.nav-link-keep { display: inline; }
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 20px rgba(184, 132, 42, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  letter-spacing: -0.2px;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(184, 132, 42, 0.4), 0 2px 6px rgba(0, 0, 0, 0.18);
}

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

/* White button for amber bands */
.btn-on-band {
  background: #fff;
  color: var(--band-top);
  box-shadow: 0 4px 24px rgba(60, 30, 5, 0.25), 0 1px 3px rgba(0, 0, 0, 0.15);
}

.btn-on-band:hover { box-shadow: 0 6px 32px rgba(60, 30, 5, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18); }

.btn-note {
  display: block;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* ── Amber band (the App Store frame ground) ── */
.band {
  position: relative;
  background: linear-gradient(180deg, var(--band-top) 0%, var(--band-mid) 55%, var(--band-bottom) 100%);
  color: #fff;
  overflow: hidden;
}

.band::before {
  /* the frames' radial white glow */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -140px;
  transform: translateX(-50%);
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.band-headline {
  font-size: clamp(2.4rem, 6.5vw, 3.6rem);
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.band-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: #fff;
  opacity: 0.92;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.band-sub {
  font-size: clamp(1.05rem, 2.5vw, 1.2rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.6;
}

.band .btn-note { color: rgba(255, 255, 255, 0.85); }

/* serif-italic accent line (404 page) */
.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-weight: 400;
  font-style: italic;
  color: var(--accent-text);
  letter-spacing: 0.01em;
}

/* ── Section headings ── */
.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--accent-text);
  margin-bottom: var(--space-sm);
}

.section-heading {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-bottom: var(--space-md);
}

.section-sub {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.7;
}

/* ── Two-column feature rows (copy + component cluster) ── */
.feature-row {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  padding: var(--space-2xl) 0;
}

.feature-row.reverse { flex-direction: row-reverse; }

.feature-copy { flex: 1; min-width: 0; }

.feature-text {
  font-size: clamp(1.05rem, 2.5vw, 1.15rem);
  color: var(--text-primary);
  line-height: 1.75;
  max-width: 480px;
}

.feature-stage { flex: 1; min-width: 0; display: flex; justify-content: center; }

@media (max-width: 800px) {
  .feature-row, .feature-row.reverse {
    flex-direction: column;
    gap: var(--space-xl);
    align-items: stretch;
  }
  .feature-stage { justify-content: stretch; }
}

/* ══════════════════════════════════════════════════════════════
   Component cards — web builds of the App Store frame components
   ══════════════════════════════════════════════════════════════ */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 440px;
}

@media (max-width: 800px) {
  .stack { max-width: 100%; }
}

.ucard {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: 14px 16px;
  color: var(--text-primary); /* cards stay dark-on-white even inside .band (which sets white text) */
}

/* a soft ground panel that groups cards, like the phone screen ground */
.panel {
  background: var(--phone-ground);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
}

/* ── App icons (real icons, frame treatment) ── */
.appicon {
  display: block;
  border-radius: 9px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  width: 38px;
  height: 38px;
  object-fit: cover;
}

.appicon-sm { width: 28px; height: 28px; border-radius: 7px; }
.appicon-lg { width: 56px; height: 56px; border-radius: 13px; }

/* fanned icon cluster (CompactLimitRow.fannedIcons) */
.fan {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
}

.fan img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.fan img + img { margin-left: -12px; }

.fan img:nth-child(1) { transform: rotate(-6deg); }
.fan img:nth-child(2) { transform: rotate(4deg); z-index: 1; }
.fan img:nth-child(3) { transform: rotate(10deg); }

/* ── Progress primitives ── */
.bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
  min-width: 60px;
}

.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 4px;
  display: block;
}

.segments { display: flex; gap: 4px; flex: 1; }

.segments i {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  display: block;
}

.escalate { display: flex; align-items: flex-end; gap: 5px; height: 20px; }

.escalate i { width: 13px; border-radius: 2px; display: block; }

.dots { display: inline-flex; gap: 5px; align-items: center; }

.dots i { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* ── Earn / ritual cards ── */
.earn-card { display: flex; flex-direction: column; gap: 10px; }

.earn-card .row-top { display: flex; align-items: center; gap: 12px; }

.earn-title { font-size: 0.95rem; font-weight: 700; }

.earn-title .kw { font-weight: 800; }

.earn-sub { font-size: 0.8rem; color: var(--text-secondary); font-weight: 500; }

.earn-card .row-progress {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.microcap {
  font-size: 0.66rem;
  font-weight: 500;
  color: #9b9b9f;
  white-space: nowrap;
}

/* unlock footer inside earn card: "then" + reward icons */
.row-unlocks {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--surface-elevated);
}

.row-unlocks .then {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.chip-banked { background: rgba(107, 155, 90, 0.12); color: var(--success); }

.glyph {
  font-size: 1.15rem;
  line-height: 1;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  flex-shrink: 0;
}

/* ── Payoff cards (earnPayoffCard: "10 min → 30 min scroll") ── */
.payoff { display: flex; align-items: center; gap: 12px; }

.payoff .left { font-size: 0.95rem; font-weight: 700; }

.payoff .arrow { color: #b9b9bd; font-weight: 700; }

.payoff .right { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }

/* ── Limit rows (CompactLimitRow) ── */
.limit-row { display: flex; gap: 12px; align-items: flex-start; }

.limit-row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.limit-row .head { display: flex; align-items: center; gap: 8px; }

.limit-row .name { font-size: 0.95rem; font-weight: 700; }

.limit-row .head .tag { margin-left: auto; }

.limit-row .strategy { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }

/* ── Enforcement scales (limit builder: before/after) ── */
.scale-card { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); }

.scale-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.scale {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.scale::before {
  content: '';
  position: absolute;
  left: 12px; right: 12px; top: 11px;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-elevated);
}

.scale .stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 33%;
}

.scale .stop i {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--divider);
  display: block;
}

.scale .stop span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.scale .stop.active i {
  background: var(--accent-bright);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(232, 160, 74, 0.25);
}

.scale .stop.active span { color: var(--accent-text); font-weight: 700; }

/* ── Scenarios ── */
.scenario-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }

.scenario-item {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--text-primary);
  transition: border-color 0.25s, background 0.25s;
}

.scenario-item:hover { border-color: var(--accent); background: rgba(184, 132, 42, 0.06); }

/* ── Night strip ── */
.night {
  position: relative;
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: calc(var(--space-4xl) + 40px) 0;
  margin: var(--space-2xl) 0;
}

.night::before, .night::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  pointer-events: none;
}

.night::before { top: -1px; background: linear-gradient(180deg, var(--bg), rgba(20, 20, 22, 0)); }
.night::after { bottom: -1px; background: linear-gradient(0deg, var(--bg), rgba(20, 20, 22, 0)); }

.night .section-label { color: var(--dark-amber); }

.night .section-heading { color: var(--dark-text); }

.night .section-sub { color: var(--dark-secondary); }

.night-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
  margin-top: var(--space-2xl);
}

/* fanned dark boards — HTML phones, same component library in dark */
.night-fan {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.night-fan .mini-phone { width: 204px; margin: 0; }

.night-fan .mini-phone:nth-child(1) { transform: rotate(-8deg) translateX(30px) translateY(10px); }
.night-fan .mini-phone:nth-child(2) { z-index: 1; transform: translateY(-10px); }
.night-fan .mini-phone:nth-child(3) { transform: rotate(8deg) translateX(-30px) translateY(10px); }

/* real device capture inside the bezel (status bar cropped; the island
   floats in the padding above the capture) */
.screen-shot-wrap {
  background: linear-gradient(180deg, #181818, #141416);
  border-radius: 36px;
  padding-top: 42px;
  overflow: hidden;
  line-height: 0;
}

.screen-shot-wrap img { width: 100%; height: auto; display: block; }

.night-fan .mini-phone .island { width: 64px; height: 19px; top: 12px; }


/* the shield screen, in a device bezel (ShieldFrame + DeviceFrame, web build) */
.night-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--dark-amber);
  text-align: center;
  margin-bottom: var(--space-md);
}

.mini-phone {
  position: relative;
  width: 262px;
  border-radius: 46px;
  padding: 5px;
  background: linear-gradient(180deg, #2E2E30, #1A1A1C);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 28px 64px rgba(0, 0, 0, 0.65), 0 2px 6px rgba(0, 0, 0, 0.4);
  margin: 0 auto;
}

.mini-phone .island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 24px;
  border-radius: 12px;
  background: #0B0B0C;
  z-index: 2;
}

.shield-screen {
  background: #151517;
  border-radius: 41px;
  aspect-ratio: 1 / 2.05;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 54px 18px 22px;
  overflow: hidden;
}

.shield-screen .bottle {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  margin: auto auto var(--space-sm);
  display: block;
}

.shield-screen .blocked {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
}

.shield-screen .left-line {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dark-amber);
  margin: 4px 0 auto;
}

.shield-screen .cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--band-top);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 14px;
  padding: 13px;
  margin-bottom: 10px;
}

.shield-screen .cta img { width: 22px; height: 22px; border-radius: 5px; }

.shield-screen .alt {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

/* ── Icon rows ("syncs with your good apps") ── */
.iconrow-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: var(--space-sm);
}

.iconrow {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.iconrow img {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(28, 28, 30, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  object-fit: cover;
}

.iconrow.offset-r { transform: translateX(16px); }
.iconrow.offset-l { transform: translateX(-16px); }

@media (max-width: 600px) {
  .iconrow img { width: 44px; height: 44px; border-radius: 10px; }
  .iconrow.offset-r, .iconrow.offset-l { transform: none; }
}

/* ── Trial-timeline pattern (PaywallTrialOfferView.TrialTimeline) ── */
.timeline { display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }

.tl-step {
  position: relative;
  display: flex;
  gap: var(--space-md);
  padding-bottom: var(--space-xl);
}

.tl-step:last-child { padding-bottom: 0; }

.tl-step::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 17px;
  bottom: -17px;
  width: 6px;
  border-radius: 3px;
  background: rgba(184, 132, 42, 0.28);
}

.tl-step:last-child::before {
  background: linear-gradient(180deg, rgba(184, 132, 42, 0.28), rgba(184, 132, 42, 0));
  bottom: -56px;
}

.tl-badge {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.tl-body strong { display: block; font-size: 1rem; margin-bottom: 2px; }

.tl-body span { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.55; }

/* ── FAQ ── */
.faq-list { display: flex; flex-direction: column; }

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

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-primary);
}

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

.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--accent-text);
  flex-shrink: 0;
  transition: transform 0.2s;
}

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

.faq-answer {
  padding: 0 0 var(--space-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 640px;
}

.faq-answer p + p { margin-top: var(--space-sm); }

/* ── Prose pages (privacy, support) ── */
.page-header {
  padding-top: calc(var(--space-4xl) + 60px);
  padding-bottom: var(--space-2xl);
}

.page-header h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin-bottom: var(--space-md); }

.page-header .meta { color: var(--text-secondary); font-size: 0.9rem; }

.prose { line-height: 1.75; }

.prose h2 { font-size: 1.5rem; margin: var(--space-2xl) 0 var(--space-md); }

.prose h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
}

.prose p { margin-bottom: var(--space-md); color: var(--text-primary); }

.prose ul, .prose ol { margin: 0 0 var(--space-md) var(--space-lg); color: var(--text-primary); }

.prose li { margin-bottom: var(--space-xs); }

.prose .muted { color: var(--text-secondary); }

/* ── Callout card ── */
.card {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--card-shadow);
}

.card + .card { margin-top: var(--space-md); }

/* ── Numbered steps (support page) ── */
.steps { list-style: none; counter-reset: step; }

.steps li {
  counter-increment: step;
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) 0;
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: #fff;
  background: var(--accent);
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.12);
}

.steps strong { display: block; margin-bottom: 2px; }

.steps span { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════
   Help center (tonichabits.com/help) — article library
   Added 2026-06-20 for the support-article system (see
   support/SUPPORT_SYSTEM.md). First article: counting steps from a
   fitness tracker. These are the ONLY help-specific primitives;
   article bodies otherwise reuse .prose / .card / .steps.
   ══════════════════════════════════════════════════════════════ */

/* Breadcrumb above an article title. Visual nav only: article URLs stay
   flat (/help/<slug>) and never encode the category, so the taxonomy can
   change without breaking links. The breadcrumb is the only place the
   category is shown. */
.breadcrumb {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb .sep { margin: 0 8px; opacity: 0.5; }

/* Answer-first lead: the 40-60 word standalone answer at the top of every
   article. This is the block AI answer engines and skimmers read first, so
   it must make sense on its own. Warm left rule, slightly larger type. */
.answer-lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-primary);
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Callout: honest "what won't work / one thing to know" boxes. Warm amber
   by default, never an alarming red. Used for caveats and limits, which we
   always state plainly rather than bury. */
.callout {
  background: var(--accent-subtle);
  border: 1px solid rgba(184, 132, 42, 0.20);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.callout p { margin-bottom: var(--space-xs); color: var(--text-primary); }
.callout p:last-child { margin-bottom: 0; }
.callout .callout-title { font-weight: 600; color: var(--accent-text); margin-bottom: 4px; }

/* Tables inside articles (device / compatibility matrices). The base CSS had
   no table style; this is the canonical one for all help content. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0 var(--space-lg);
  font-size: 0.95rem;
}
.prose th, .prose td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  vertical-align: top;
}
.prose th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 2px solid var(--divider);
}
.prose td { color: var(--text-secondary); }
.prose tr:last-child td { border-bottom: none; }

/* Help index (the /help hub): a browsable list of article links grouped by
   task. A group is rendered only when it has articles, so there are never
   empty buckets (the help-center rule for a small, growing library). */
.help-group { margin-bottom: var(--space-2xl); }
.help-group > h2 { margin-bottom: var(--space-md); }
.help-links { list-style: none; display: flex; flex-direction: column; gap: var(--space-xs); }
/* Two-column card grid for the help home directory; single column on mobile. */
.help-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
@media (max-width: 600px) { .help-grid { grid-template-columns: 1fr; } }
.help-links a,
.help-grid a {
  display: block;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 0.2s, transform 0.15s;
}
.help-links a:hover,
.help-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.help-links a span,
.help-grid a span {
  display: block;
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════════
   Long-form / use-case pages — visual rhythm devices
   Added 2026-06-21. Break up long reads the way Whoop/Oura/Superhuman
   do: a serif-italic pull quote and a plain 3-step mechanism diagram.
   Reusable across every /uses landing page. NOT AI art or stock.
   ══════════════════════════════════════════════════════════════ */

/* Pull quote: lifts one thesis line out of a wall of text. */
.pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.4;
  color: var(--accent-text);
  border-left: 3px solid var(--accent);
  padding-left: var(--space-lg);
  margin: var(--space-2xl) 0;
  max-width: 640px;
}

/* Three-step mechanism flow (a diagram, not a fake screenshot). */
.flow { display: flex; align-items: stretch; gap: var(--space-sm); margin: var(--space-xl) 0; }
.flow-step {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  box-shadow: var(--card-shadow);
}
.flow-step .flow-label { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; color: var(--text-primary); }
.flow-step .flow-sub { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }
.flow-arrow { display: flex; align-items: center; color: var(--accent); font-weight: 700; font-size: 1.3rem; }
@media (max-width: 600px) {
  .flow { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); justify-content: center; padding: 2px 0; }
}

/* ── CTA section ── */
.cta-section { border-top: 1px solid var(--divider); text-align: center; }

.cta-heading {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  margin-bottom: var(--space-md);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.cta-sub { color: var(--text-secondary); font-size: 1.05rem; margin-bottom: var(--space-xl); line-height: 1.6; }

/* ── Footer ── */
footer { border-top: 1px solid var(--divider); padding: var(--space-xl) 0; }

.footer-inner {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer-text { font-size: 0.8rem; color: var(--text-secondary); }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); }

.footer-link {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-link:hover { color: var(--accent-text); }

/* ── Grain overlay (subtle, light) ── */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

@media (max-width: 600px) {
  section { padding: var(--space-2xl) 0; }

  /* shrink the whole fan; zoom keeps the phones' inner type crisp */
  .night-fan { zoom: 0.58; }

  .night-stage { gap: var(--space-xl); }

  .mini-phone { width: min(240px, 72vw); }
}