/* ============================================================================
   Self-hosted fonts — WHY: loading from Google's CDN sends visitor IP
   addresses to Google servers on every page load. UK/EU courts have found
   this may breach GDPR without explicit consent. Self-hosting removes the
   third-party data transfer entirely (DPIA risk R8 mitigation).
   Font files live in /assets/fonts/ and are served from our own origin.
   ============================================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/lora-400-italic.woff2') format('woff2');
}

/* ============================================================================
   Ori — landing page styles
   Design direction: "F · Hybrid" from the Claude design handoff
   (editorial rhythm + on-device demos). Calm + premium + human.

   WHY a single hand-rolled stylesheet: this is a static brochure site
   (landing + privacy + terms). Keeping it framework-free matches the
   pre-revenue, "snappy and lightweight" mandate — no build step to host.
   ========================================================================== */

/* ─── Design tokens ──────────────────────────────────────────────────────
   Shared palette/typography live here so nothing is hard-coded per section
   (CLAUDE.md: config-driven, shared design tokens). Values come straight
   from the design handoff's token table. */
:root {
  --bg: #fbfaf5;          /* warm off-white page background */
  --ink: #0e1c14;         /* rich near-black: primary text + dark sections */
  --green: #2f6f52;       /* primary brand green: CTAs */
  --green-deep: #1e4a35;  /* darker green: hover + gradient end */
  --coral: #d96c57;       /* accent: eyebrows, badges, highlights only */
  --sage: #dce8d5;        /* sage tint: pills + soft sections */
  --paper: #f3efe4;       /* slightly warm card surface */
  --muted: #7c8a83;       /* secondary text */

  --line: rgba(14, 28, 20, 0.08);
  --line-strong: rgba(14, 28, 20, 0.15);

  --forest: linear-gradient(160deg, #0e1c14 0%, #1e4a35 100%);

  /* WHY Inter + Lora only: this mirrors the app exactly
     (lib/core/theme/ori_text_styles.dart uses Inter for display AND
     body, Lora italic for the "gentle voice", generic mono for tiny meta).
     The site should feel like the app from the first screen. */
  --display: "Inter", sans-serif;          /* headlines (heavy weights) */
  --body: "Inter", sans-serif;             /* body + UI */
  --serif: "Lora", Georgia, serif;         /* app-voice pull quotes */
  --hand: "Lora", Georgia, serif;          /* soft accent notes (italic) */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* in-phone labels */

  --container: 1100px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px -12px rgba(14, 28, 20, 0.15);
  --shadow-float: 0 18px 36px -12px rgba(14, 28, 20, 0.15);
  --shadow-phone:
    0 2px 6px rgba(14, 28, 20, 0.10),
    0 14px 28px -10px rgba(14, 28, 20, 0.22),
    0 42px 72px -26px rgba(14, 28, 20, 0.46);

  --nav-h: 72px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* In-page anchors clear the sticky nav when jumped/scrolled to. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

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

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-family: var(--display); font-weight: 500; font-size: 14px;
  transition: top 150ms ease;
}
.skip-link:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

/* ─── Shared primitives ────────────────────────────────────────────────── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 60px; position: relative; }

/* WHY w800: matches the app's sectionLabel (Inter w800, wide tracking). */
/* Salmon brand name — used inline on "Ori" in marketing copy only. */
.ori-name { color: var(--coral); font-style: normal; }

.eyebrow {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral);
  margin: 0;
}

.section { padding: 88px 0; position: relative; }
.section--dark { background: var(--ink); color: #fff; }
.section--forest { background: var(--forest); color: #fff; }
.section--sage { background: var(--sage); }
.section--dark .eyebrow,
.section--forest .eyebrow { color: var(--coral); }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0;
}
h1 { font-size: clamp(44px, 6vw, 68px); letter-spacing: -0.03em; line-height: 1.06; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.12; }
h3 { font-size: clamp(24px, 2.4vw, 32px); }
h4 { font-size: 22px; }

p { margin: 0; }
.lead { font-size: 18px; line-height: 1.6; color: rgba(14, 28, 20, 0.7); }
.section--dark .lead,
.section--forest .lead { color: rgba(255, 255, 255, 0.72); }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: var(--radius-sm);
  font-family: var(--display); font-weight: 500; font-size: 14px;
  background: var(--green); color: #fff; border: 1.5px solid var(--green);
  cursor: pointer; transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--green-deep); border-color: var(--green-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--coral { background: var(--coral); border-color: var(--coral); }
.btn--coral:hover { background: #c75a45; border-color: #c75a45; }
.btn--green { background: var(--green); border-color: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-deep); border-color: var(--green-deep); }
.btn--block { width: 100%; }

/* Pills / chips --------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--sage); color: var(--ink);
  font-family: var(--display); font-weight: 500; font-size: 12px;
}

/* ─── Site header / navigation ─────────────────────────────────────────── */
/* WHY opaque-by-default: nav link colour is a fixed dark tone, so it only
   reads over a light backdrop. Transparency is opt-in (.is-hero) and applied
   by JS only while the header is confirmed to overlap the (light) hero —
   if JS never runs, or a deep link jumps straight past the hero, the header
   stays in this safe, always-legible state instead of going invisible over
   a dark section. */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px 60px; min-height: var(--nav-h);
  /* WHY near-opaque, not blurred-translucent: a lower opacity + saturating
     blur let busy content behind the header (dark text, bright badges)
     ghost through visibly on scroll — this trades a little of the "glass"
     look for a header that never smears whatever is scrolling underneath. */
  background: rgba(251, 250, 245, 0.98);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px -16px rgba(14, 28, 20, 0.5);
  transition: background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.site-header.is-hero {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; font-size: 24px; }
.brand-mark { height: 44px; width: auto; object-fit: contain; }

.site-nav { display: flex; gap: 28px; font-family: var(--display); font-weight: 500; font-size: 14px; }
.site-nav a { color: rgba(14, 28, 20, 0.7); transition: color 120ms ease; }
.site-nav a:hover { color: var(--ink); }

.nav-cta {
  padding: 10px 18px; border-radius: var(--radius-sm);
  background: var(--green); color: #fff;
  font-family: var(--display); font-weight: 500; font-size: 13px;
  transition: background 140ms ease, transform 140ms ease;
}
.nav-cta:hover { background: var(--green-deep); transform: translateY(-1px); }

/* Mobile menu toggle (hidden on desktop) */
.menu-button {
  display: none; flex-direction: column; gap: 5px;
  width: 42px; height: 42px; padding: 10px;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.menu-button span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 160ms ease, opacity 160ms ease; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; flex-direction: column; gap: 4px;
  padding: 12px 22px 22px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  position: sticky; top: var(--nav-h); z-index: 39;
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 12px 6px; font-family: var(--display); font-weight: 500; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }

/* ─── Phone mockup (recreated from the wireframe in CSS) ───────────────── */
.phone {
  /* Faint top-lit sheen across the rim so the bezel reads like a metal
     edge rather than a flat black slab — the cheap-looking part before. */
  background: linear-gradient(155deg, #20342a 0%, #0e1c14 45%, #060d09 100%);
  border-radius: 40px; padding: 7px;   /* slim, concentric, iPhone-like bezel */
  /* Layered shadow = realistic float: tight contact + mid + soft ambient,
     plus a 1px inner rim highlight to catch the "metal" edge. */
  box-shadow: var(--shadow-phone), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative; width: 260px;
}
.phone-notch {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 20px; background: var(--ink);
  border-radius: 0 0 12px 12px; z-index: 2;
}
/* Real-screenshot phones bring their own status bar, so the fake notch
   would just cover it — hide it and let the bezel sit flush to the shot. */
.phone:has(.phone-screen--shot) .phone-notch { display: none; }
.phone-screen {
  background: var(--bg); border-radius: 33px;   /* nests inside the 40px/7px frame */
  padding: 26px 18px 18px; min-height: 480px;
  display: flex; flex-direction: column; gap: 14px;
}
.phone-screen--dark { background: var(--ink); color: #fff; }
.phone-screen--sage { background: var(--sage); }
/* Real app screenshot fills the screen edge-to-edge — the shot already
   has its own status bar and nav, so we drop the mockup padding/min-height. */
.phone-screen--shot { padding: 0; min-height: 0; overflow: hidden; }
.phone-screen--shot img { display: block; width: 100%; height: auto; border-radius: 33px; }

.phone-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.phone-title { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; margin-top: 4px; }
.phone-title--sm { font-size: 22px; }

.app-card { background: var(--paper); border-radius: var(--radius); padding: 14px; }
.app-card--soft { background: rgba(14, 28, 20, 0.04); }
.app-card--green { background: var(--green); color: #fff; }
.app-card--sage { background: var(--sage); }
.app-card--coral { background: rgba(217, 108, 87, 0.15); }
.app-card .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.6; }
.app-card .value { font-family: var(--display); font-weight: 500; margin-top: 4px; }
.app-card .quote { font-family: var(--serif); font-style: italic; font-size: 13px; line-height: 1.4; margin-top: 4px; }
/* Was Caveat handwriting in the handoff; now Lora italic to match the
   app's gentleVoice style — same warmth, same family as the pull quotes. */
.hand-note { font-family: var(--hand); font-style: italic; color: var(--coral); font-size: 13px; margin-top: 2px; }

/* Camera viewfinder block inside the Look Away phones */
.viewfinder {
  background: var(--ink); color: rgba(255, 255, 255, 0.6);
  border-radius: 10px; min-height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.viewfinder .hand-note { color: var(--coral); font-size: 15px; }
.viewfinder .label { font-family: var(--mono); font-size: 10px; opacity: 0.55; }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-top: 64px; padding-bottom: 96px; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.hero-copy .eyebrow { margin-bottom: 22px; }
.hero-copy h1 { margin: 0 0 0; }
/* "weight" in green so it reads differently from the coral "Ori" above it. */
.hero-copy h1 em { font-style: normal; color: var(--green); }

/* "Meet Ori" brand intro — Lora italic for warmth, Inter bold coral for the name.
   Sits above the h1 as the primary brand moment, not a tiny label. */
.hero-meet {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 52px);
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 16px;
}
.hero-meet .ori-name {
  font-weight: 800;
  color: var(--coral);
  font-size: inherit;
}
.hero-copy .lead { margin-top: 24px; max-width: 460px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Right column: floating phone + off-axis "permission" card */
.hero-stage { position: relative; min-height: 680px; }
/* Larger hero phone = far less downscaling of the 1080px screenshot, so it
   stays crisp (the main reason it looked soft was being crushed to 260px).
   min() keeps it from overflowing narrow screens when the stage stacks. */
.hero-stage .phone { position: absolute; right: 0; top: 6px; width: min(320px, 80vw); }

/* ─── Intro band ("The idea") ──────────────────────────────────────────── */
.intro-band { text-align: center; }
.intro-band .container { max-width: 880px; }
.intro-band h2 { line-height: 1.18; margin-top: 22px; }
.intro-band em { font-style: normal; color: var(--coral); }

/* ─── Feature spotlights ───────────────────────────────────────────────── */
.feature .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.feature--reverse .container { grid-template-columns: 1fr 1.1fr; }
.feature--reverse .feature-media { order: -1; }   /* phone first on reversed rows */
.feature h2 { margin-top: 12px; }
.feature .lead { margin-top: 20px; font-size: 17px; max-width: 440px; }
.soft-list { margin: 18px 0 0; padding-left: 18px; line-height: 1.8; color: rgba(14, 28, 20, 0.75); font-size: 15px; }
.feature-media { display: flex; justify-content: center; }
.feature-media .phone { width: 300px; }

/* "Instead of / Ori says" companion card */
.demo-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-card); margin-top: 28px; max-width: 440px;
}
.demo-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgba(14, 28, 20, 0.12); }
.demo-row:last-child { border-bottom: 0; }
.demo-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); width: 96px; flex-shrink: 0; padding-top: 4px; }
.demo-label--coral { color: var(--coral); }
.demo-content { flex: 1; font-family: var(--display); font-weight: 500; font-size: 15px; }
.demo-content--muted { color: var(--muted); font-size: 14px; }
.demo-content--strike { text-decoration: line-through; }
.demo-content--serif { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--green-deep); font-size: 16px; }

/* ─── Stealth Health toggle ─────────────────────────────────────────────── */
.stealth-toggle {
  display: flex; align-items: center; gap: 14px; margin-top: 28px;
}
/* Sonar-ping on the switch to signal it's interactive — stops after first click */
.stealth-switch::before {
  content: ''; position: absolute; inset: -4px; border-radius: 18px;
  border: 2px solid var(--green);
  animation: stealth-ping 2s ease-out 1s infinite;
  pointer-events: none;
}
.stealth-switch.was-clicked::before { display: none; }
@keyframes stealth-ping {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}
.stealth-toggle__label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  transition: color 300ms var(--ease-calm);
}
.stealth-toggle__label.is-active { color: var(--green-deep); font-weight: 600; }
.stealth-switch {
  position: relative; width: 52px; height: 28px; flex-shrink: 0;
  background: var(--green); border: none; border-radius: 14px;
  cursor: pointer; transition: background 300ms var(--ease-calm);
  outline-offset: 3px;
}
.stealth-switch[aria-checked="false"] { background: var(--line-strong); }
.stealth-switch__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 300ms var(--ease-calm);
}
.stealth-switch[aria-checked="true"] .stealth-switch__thumb { transform: translateX(24px); }

/* Fade the phone screenshot between states */
#stealth-phone .phone-screen--shot img {
  transition: opacity 250ms var(--ease-calm);
}
#stealth-phone .phone-screen--shot img.is-fading { opacity: 0; }

/* A standalone "real tweak" example card */
.tweak-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-card); margin-top: 28px; max-width: 440px; }
.tweak-card h4 { line-height: 1.3; margin-top: 10px; }
.tweak-card p { margin-top: 10px; color: rgba(14, 28, 20, 0.7); font-style: italic; }

/* ─── How it works ─────────────────────────────────────────────────────── */
.how-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.how-copy .eyebrow { color: rgba(255,255,255,0.5); }
.how-copy h2 { color: #fff; margin: 12px 0 16px; }
.how-copy .lead { color: rgba(255,255,255,0.7); max-width: 440px; }
.how-media { display: flex; justify-content: center; }
.how-media .phone { width: 300px; }

.how-steps { display: flex; flex-direction: column; gap: 4px; margin-top: 32px; }
.how-step {
  display: flex; align-items: flex-start; gap: 20px;
  background: none; border: none; border-radius: 12px;
  padding: 16px; text-align: left; cursor: pointer; width: 100%;
  color: rgba(255,255,255,0.5); transition: background 250ms var(--ease-calm), color 250ms var(--ease-calm);
}
.how-step:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
.how-step.is-active { background: rgba(255,255,255,0.08); color: #fff; }
.how-step__num {
  font-family: var(--display); font-weight: 700; font-size: 28px;
  color: var(--coral); letter-spacing: -0.04em; line-height: 1;
  flex-shrink: 0; width: 36px; opacity: 0.4;
  transition: opacity 250ms var(--ease-calm);
}
.how-step.is-active .how-step__num { opacity: 1; }
.how-step__text { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; font-size: 14px; line-height: 1.5; }
.how-step__text strong { font-size: 16px; font-weight: 600; display: block; }

/* Screenshot swap transition */
#how-img { transition: opacity 200ms var(--ease-calm); }
#how-img.is-fading { opacity: 0; }

/* ─── Plans ────────────────────────────────────────────────────────────── */
.plans .eyebrow { text-align: center; }
.plans h2 { text-align: center; margin: 12px 0 12px; }
.plans .plans-note { text-align: center; max-width: 560px; margin: 0 auto 48px; color: var(--muted); font-size: 15px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 0 auto; align-items: stretch; }
.price-card { background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 28px; position: relative; display: flex; flex-direction: column; }
.price-card h3 { margin-top: 8px; }
.price-card .plan-tag { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); }
.price-card .plan-summary { margin: 12px 0 18px; color: rgba(14, 28, 20, 0.7); }
.price-card ul { list-style: none; margin: 0 0 22px; padding: 0; }
.price-card li { position: relative; padding: 7px 0 7px 24px; font-size: 14px; line-height: 1.45; }
.price-card li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 7px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.price-card .btn { margin-top: auto; }
.price-card--featured { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 20px 50px -10px rgba(14, 28, 20, 0.3), 0 0 0 1px var(--green); }
.price-card--featured .plan-summary { color: rgba(255, 255, 255, 0.7); }
.price-card--featured li::before { border-color: var(--coral); }
.plan-fineprint { font-size: 12px; color: var(--muted); margin: 0 0 18px; line-height: 1.5; }
.price-card--featured .plan-fineprint { color: rgba(255, 255, 255, 0.55); }
.price-badge {
  position: absolute; top: -10px; right: 20px;
  background: var(--coral); color: #fff;
  font-family: var(--display); font-weight: 500; font-size: 11px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* ─── Get the app ──────────────────────────────────────────────────────── */
.get { text-align: center; }
.get .container { max-width: 720px; }
.get h2 { margin-top: 12px; }
.get .lead { margin: 18px auto 0; }
.store-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 32px; }
.store-row a { display: inline-flex; transition: transform var(--dur-micro) var(--ease-calm), opacity var(--dur-micro) ease; }
.store-row a:hover { transform: translateY(-2px); opacity: 0.88; }
/* Both badges locked to the same height — Apple's SVG and Google's PNG have
   different natural aspect ratios so width must stay auto. */
.store-badge { height: 48px; width: auto; display: block; }
/* Pre-launch: store links aren't live yet. Badges stay visible (so the page
   reads as real) but greyed out and non-interactive until real URLs land. */
.store-badge-disabled { display: inline-flex; opacity: 0.45; filter: grayscale(1); cursor: default; }
.hero-store-row { margin-top: 36px; justify-content: flex-start; }
.store-note { margin-top: 18px; font-size: 13px; color: var(--muted); }

/* ─── Safety panel ─────────────────────────────────────────────────────── */
.safety .container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 60px; align-items: start; }
.safety h2 { margin-top: 12px; }
.safety-copy p { margin-bottom: 16px; color: rgba(14, 28, 20, 0.78); }
.safety-copy ul { margin: 0; padding-left: 18px; line-height: 1.8; color: rgba(14, 28, 20, 0.75); font-size: 15px; }
.safety-copy a { color: var(--green); text-decoration: underline; }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
.faq .eyebrow { text-align: center; }
.faq h2 { text-align: center; margin: 12px 0 40px; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 16px 36px 16px 0; position: relative;
  font-family: var(--display); font-weight: 500; font-size: 18px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-family: var(--display); font-size: 24px; color: var(--green); transition: transform 160ms ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 18px; color: rgba(14, 28, 20, 0.72); max-width: 680px; }

/* ─── Trust strip ──────────────────────────────────────────────────────── */
.trust .container { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.trust p { font-size: 16px; color: rgba(255, 255, 255, 0.78); }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; justify-content: space-between;
  padding: 40px 60px; background: var(--bg); border-top: 1px solid var(--line);
}
.footer-brand .brand { margin-bottom: 8px; }
.footer-tag { color: var(--muted); font-size: 14px; }
.footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-end; font-family: var(--display); font-weight: 500; font-size: 13px; color: var(--muted); }
.footer-nav a:hover { color: var(--ink); }
.footer-bottom { display: flex; align-items: center; gap: 20px; }
.footer-store-row { margin-top: 0; }
.footer-social { display: flex; gap: 2px; }
/* Padding brings the tap target to ~44px without enlarging the icon itself;
   negative margin cancels the padding's visual footprint so spacing looks
   the same as a bare 20px icon. */
.social-link { display: inline-flex; padding: 12px; margin: -12px; color: var(--muted); transition: color 200ms ease, transform 150ms ease; }
.social-link:hover { color: var(--ink); transform: translateY(-2px); }

/* ============================================================================
   Legal pages (privacy.html / terms.html) — shared chrome + readable body
   ========================================================================== */
.legal-main { max-width: 800px; margin: 0 auto; padding: 56px 60px 96px; }
.legal-hero { margin-bottom: 32px; }
.legal-hero h1 { font-size: clamp(36px, 5vw, 56px); margin-top: 10px; }
.legal-meta { color: var(--muted); font-size: 14px; margin-top: 12px; }
.legal-body { line-height: 1.7; }
.legal-body h2 { font-size: 24px; margin: 40px 0 12px; }
.legal-body h3 { font-size: 19px; margin: 28px 0 10px; }
.legal-body p { margin: 0 0 14px; color: rgba(14, 28, 20, 0.82); }
.legal-body ul, .legal-body ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.7; color: rgba(14, 28, 20, 0.82); }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--green); text-decoration: underline; }
.legal-body .notice {
  background: var(--sage); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 28px;
  font-size: 15px; color: var(--ink);
}
.legal-body .notice--warm {
  background: #fdf3ee; border-color: rgba(217, 108, 87, 0.2);
}

/* ─── Legal tables ────────────────────────────────────────────────────────
   WHY .table-wrap: allows horizontal scroll on small screens so the table
   never squashes columns below readable width. */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 0 0 28px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

.legal-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.65;
  min-width: 520px; /* forces scroll before columns collapse unreadably */
}

.legal-body th {
  background: var(--sage);
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line-strong);
  vertical-align: top;
  white-space: nowrap; /* keep header labels on one line */
}

.legal-body td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: rgba(14, 28, 20, 0.82);
}

.legal-body tr:last-child td {
  border-bottom: none;
}

/* Subtle stripe to help the eye track across wide rows */
.legal-body tbody tr:nth-child(even) td {
  background: rgba(14, 28, 20, 0.025);
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .container { padding: 0 22px; }
  .section { padding: 56px 0; }
  .site-header { padding: 14px 22px; }

  .site-nav { display: none; }   /* collapse into hamburger */
  .menu-button { display: flex; }

  .hero-grid,
  .feature .container,
  .feature--reverse .container,
  .safety .container,
  .trust .container { grid-template-columns: 1fr; gap: 36px; }

  /* Left-aligned text reads fine stacked, but the store badges are a paired
     CTA block, not prose — flex-start leaves them stranded against the left
     edge with dead space beside them, so they centre in the column instead. */
  .hero-store-row { justify-content: center; }

  /* Phone flows inline (drop the absolute hero staging) */
  .hero { padding-top: 32px; padding-bottom: 56px; }
  .hero-stage { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .hero-stage .phone { position: static; right: auto; top: auto; }

  .feature--reverse .feature-media { order: 0; }   /* keep natural order when stacked */

  .how-grid { grid-template-columns: 1fr; }
  .how-media { order: -1; }

  .plan-grid { grid-template-columns: 1fr; gap: 20px; max-width: 480px; }

  /* Desktop footer is two columns (brand left, links/badges right-aligned) —
     stacked on mobile that reads as three different alignments on top of
     each other, so everything centres instead once it drops to one column. */
  .site-footer { padding: 32px 22px; flex-direction: column; align-items: center; text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-right { align-items: center; width: 100%; }
  .footer-nav { justify-content: center; text-align: center; }
  .footer-bottom { flex-direction: column; }
  .footer-social { justify-content: center; }
  .legal-main { padding: 40px 22px 72px; }
}

@media (max-width: 560px) {
  .hero-actions .btn { width: 100%; }
}

/* ============================================================================
   v2 MOTION SYSTEM
   WHY: the brand is "calm, non-judgemental" — so every animation here is
   slow, soft, and one-directional (things settle, they never bounce or zoom).
   Durations/easings are tokens so the whole site's "pace" is tuned in one place.
   ========================================================================== */
:root {
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);  /* long, soft landing */
  --dur-reveal: 900ms;
  --dur-micro: 220ms;
  --blob-opacity: 0.5;
}

/* ─── Scroll reveals ─────────────────────────────────────────────────────
   Elements tagged [data-reveal] start slightly low + transparent and settle
   into place when scrolled into view (JS adds .is-visible). Stagger is set
   per-element via --reveal-delay so groups ripple in gently. */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-reveal) var(--ease-calm),
    transform var(--dur-reveal) var(--ease-calm);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* If JS never runs (or IO is unsupported), content must not stay hidden. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ─── Hero entrance ──────────────────────────────────────────────────────
   Plays once on load: copy lines rise in sequence, the phone drifts up,
   the "permission" card settles last with its little rotation. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { opacity: 0; animation: rise-in var(--dur-reveal) var(--ease-calm) forwards; }
.hero-copy .eyebrow      { animation-delay: 80ms; }
.hero-copy h1            { animation-delay: 180ms; }
.hero-copy .lead         { animation-delay: 320ms; }
.hero-copy .hero-actions { animation-delay: 460ms; }
.hero-copy .stat-strip   { animation-delay: 580ms; }
.hero-stage .phone {
  opacity: 0;
  /* Static after the entrance: a continuous motion softens the real
     screenshot, so the hero phone settles and stays pin-sharp (Cal-AI style). */
  animation: rise-in 1100ms var(--ease-calm) 350ms forwards;
}


/* ─── Living phone details ─────────────────────────────────────────────── */
/* "— hidden —" slowly pulses, hinting it's tappable without nagging. */
@keyframes soft-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
/* Scoped to .app-card--hidden so other soft cards (e.g. chat bubbles in the
   logging steps) don't inherit the fade and look washed out. */
.app-card--hidden .value { animation: soft-pulse 3.4s ease-in-out infinite; }

/* Viewfinder scan: a soft light band drifting down, like a camera reading. */
.viewfinder { position: relative; overflow: hidden; }
.viewfinder::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: scan 3.2s ease-in-out infinite;
}
@keyframes scan {
  from { top: -45%; }
  to   { top: 105%; }
}

/* ─── Ambient blobs ──────────────────────────────────────────────────────
   Big, blurred, slow-drifting colour fields behind the hero and sage CTA.
   WHY: gives the page gentle "life" at near-zero attention cost — the
   Headspace trick. Opacity kept low so text contrast is untouched. */
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: var(--blob-opacity);
  pointer-events: none; z-index: 0;
  animation: drift 22s ease-in-out infinite alternate;
}
.blob--sage  { background: var(--sage); }
.blob--coral { background: rgba(217, 108, 87, 0.35); }
.blob--green { background: rgba(47, 111, 82, 0.22); }
.blob:nth-child(2) { animation-duration: 28s; animation-delay: -9s; }
.blob:nth-child(3) { animation-duration: 34s; animation-delay: -17s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.12); }
}
/* Sections that host blobs need their content lifted above them. */
.has-blobs { overflow: hidden; }
.has-blobs .container { position: relative; z-index: 1; }

/* ─── Nav: active-section underline ──────────────────────────────────────
   Scrollspy (JS) marks the in-view section's link; underline grows from
   the left with the same calm easing as everything else. */
.site-nav a { position: relative; padding-bottom: 4px; }
.site-nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-micro) var(--ease-calm);
}
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active { color: var(--ink); }

/* ─── Micro-interactions ───────────────────────────────────────────────── */
.btn, .nav-cta {
  transition:
    transform var(--dur-micro) var(--ease-calm),
    background var(--dur-micro) ease,
    border-color var(--dur-micro) ease,
    box-shadow var(--dur-micro) var(--ease-calm);
}
.btn:hover, .nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(14, 28, 20, 0.35);
}
.btn:active, .nav-cta:active { transform: translateY(0); transition-duration: 80ms; }

.demo-card, .tweak-card, .price-card {
  transition: transform var(--dur-micro) var(--ease-calm), box-shadow var(--dur-micro) var(--ease-calm);
}
.demo-card:hover, .tweak-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -14px rgba(14, 28, 20, 0.22);
}
.price-card:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -16px rgba(14, 28, 20, 0.25); }
.price-card--featured:hover {
  box-shadow: 0 28px 60px -12px rgba(14, 28, 20, 0.4), 0 0 0 1px var(--green);
}

/* Plan checkmarks draw themselves in as the card reveals. */
.price-card li::before {
  opacity: 0; transform: rotate(-45deg) scale(0.4);
  transition: opacity 400ms var(--ease-calm), transform 400ms var(--ease-calm);
}
[data-reveal].is-visible li::before { opacity: 1; transform: rotate(-45deg) scale(1); }
.price-card li:nth-child(1)::before { transition-delay: 350ms; }
.price-card li:nth-child(2)::before { transition-delay: 470ms; }
.price-card li:nth-child(3)::before { transition-delay: 590ms; }
.price-card li:nth-child(4)::before { transition-delay: 710ms; }

/* Pills lift a touch on hover — playful, not busy. */
.pill { transition: transform var(--dur-micro) var(--ease-calm), background var(--dur-micro) ease; }
.pill:hover { transform: translateY(-2px); background: #d0e0c8; }

/* ─── FAQ: answers ease open instead of snapping ─────────────────────────
   WHY grid-rows trick: animating height:auto isn't possible in pure CSS;
   0fr→1fr is, and needs no JS measurement. */
.faq-list details p {
  padding: 0; max-width: 680px;
  overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 360ms var(--ease-calm), transform 360ms var(--ease-calm);
}
.faq-list .faq-answer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 360ms var(--ease-calm);
}
.faq-list .faq-answer > div { overflow: hidden; }
.faq-list details[open] .faq-answer { grid-template-rows: 1fr; }
.faq-list details[open] p { opacity: 1; transform: none; padding-bottom: 18px; }
.faq-list summary:hover { color: var(--green-deep); }


/* ============================================================================
   Reduced motion: the calm promise includes "no motion at all" if asked.
   Everything still appears — instantly, in place.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  [data-reveal], .hero-copy > *, .hero-stage .phone {
    opacity: 1 !important; transform: none !important;
  }
  .price-card li::before { opacity: 1 !important; transform: rotate(-45deg) !important; }
  .blob { display: none; }
}