/* Nari 1 site. Tokens from NILY_DESIGN_FINAL_LOCKED §1–3 (colour, type, spacing), §9 (motion), v1.1 A7–A8. */

@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("fonts/PlusJakartaSans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  --mineral: #F4F1EB;
  --surface: #FFFEFB;
  --surface-subtle: #ECE9E2;
  --carbon: #18151F;
  --carbon-raised: #24202B;
  --indigo: #4B46D8;
  --indigo-700: #3C37A0;
  --indigo-accessible: #8B87FF;
  --indigo-tint: #E0DCE9;
  --coral: #F15D45;
  --coral-accessible: #F47A66;
  --coral-tint: #F4DCD4;
  --text: #18151F;
  --text-secondary: #67616D;
  --text-on-dark: #F4F1EB;
  --text-on-dark-secondary: #B8B1BC;
  --border-soft: #DDD8CF;
  --border-strong: #8A857D;
  --indigo-100: #DCD9E8;
  --coral-700: #B0473A;
  --scrim-nav: rgba(244, 241, 235, 0.85);

  --radius-control: 10px;
  --radius-card: 16px;
  --radius-card-lg: 20px;
  --radius-demo: 24px;
  --shadow-demo: 0 1px 3px rgba(24, 21, 31, 0.08);

  --gutter: 16px;
  --section: 48px;
  --max: 1120px;
  --header-h: 64px;

  --t-instant: 120ms;
  --t-fast: 180ms;
  --t-base: 240ms;
  --t-slow: 360ms;
  --t-narrative: 420ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --section: 64px; }
}
@media (min-width: 1024px) {
  :root { --section: 96px; }
}

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

/* Founding and Wave 2 blocks are switched with the hidden attribute; it must win over any display rule. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--mineral);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

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

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--indigo-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible { outline-color: var(--indigo-accessible); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 500;
  background: var(--carbon); color: var(--text-on-dark); padding: 12px 16px; border-radius: var(--radius-control);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* Lenis 1.3.26 (lenis.css from the pinned package): only active when motion.js starts it. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ---------- header (sticky; the scrim is the kit's one translucent surface) ---------- */
/* WCAG 2.2 2.4.11: a focused or linked-to element is never hidden under the sticky header, nor under the
   reserve dock that sits at the bottom of phones and tablets on the pages that have one. */
html { scroll-padding-top: calc(var(--header-h) + 8px); }
@media (max-width: 1023.98px) {
  :root:has(body.has-dock) { scroll-padding-bottom: calc(76px + 8px + env(safe-area-inset-bottom)); }
}
.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: var(--mineral); box-shadow: inset 0 -1px 0 transparent;
  transition: box-shadow var(--t-fast) var(--ease);
}
.site-header.is-stuck { box-shadow: inset 0 -1px 0 var(--border-soft); }
@supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
  @media (min-width: 768px) {
    .site-header { background: var(--scrim-nav); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  }
}
.header-bar { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.brand img { height: 30px; width: auto; }
@media (min-width: 1024px) { .brand img { height: 34px; } }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
  color: var(--carbon); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none;
  border-radius: var(--radius-control); transition: color var(--t-fast) var(--ease);
}
.site-nav a:hover { color: var(--indigo-700); text-decoration: underline; text-decoration-thickness: 2px; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--indigo); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.site-nav .nav-wide { display: none; }
@media (min-width: 768px) {
  .site-nav .nav-wide { display: inline-flex; }
}
/* Small phones fit the brand and two links: Stories and Founding 1,000 stay in the header; Health guides is in every
   footer (and every guide's breadcrumb), so it steps out of the header below 480 px (30 Oct, measured at 360 and 375). */
@media (max-width: 479.98px) {
  .site-nav a[href="/learn"] { display: none; }
  .site-nav a { white-space: nowrap; }
  .brand { flex: none; }
}
@media (max-width: 399.98px) {
  .site-nav { gap: 0; }
  .site-nav a { padding: 0 10px; }
}
@media (min-width: 1024px) {
  .header-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-nav { justify-self: center; }
}

/* ---------- type ---------- */
.display {
  font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em;
  text-wrap: balance;
}
.h2 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font-size: 20px; line-height: 28px; font-weight: 700; }
.lead { font-size: 17px; line-height: 26px; color: var(--text); max-width: 34em; }
.muted { color: var(--text-secondary); }
.small { font-size: 14px; line-height: 20px; }
/* keeps a phone number on one line (a helpline number must never break at its hyphens) */
.nowrap { white-space: nowrap; }

@media (min-width: 1024px) {
  .display { font-size: 64px; line-height: 68px; }
  .h2 { font-size: 36px; line-height: 44px; }
  .h3 { font-size: 22px; line-height: 30px; }
  .lead { font-size: 18px; line-height: 28px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 12px 24px; border-radius: var(--radius-control); border: 0;
  font: 600 16px/24px var(--font); text-decoration: none; cursor: pointer;
  width: 100%;
}
@media (min-width: 480px) { .btn { width: auto; min-width: 280px; } }
.btn-primary { background: var(--indigo); color: var(--mineral); }
.btn-primary:hover { background: var(--indigo-700); }
.btn-primary:active { background: var(--indigo-700); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-subtle); color: var(--text-secondary); cursor: not-allowed;
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.reserve-note { margin-top: 12px; }

/* reserve dock: the page's third reserve slot. Shown only when no other reserve button and no portrait is on
   screen (one primary per view; a portrait is never next to a price). Phones: a bottom bar. Desktop: the header. */
.dock {
  position: fixed; z-index: 110; left: 0; right: 0; bottom: 0;
  padding: 12px max(var(--gutter), env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--mineral); box-shadow: inset 0 1px 0 var(--border-soft);
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--t-base) var(--ease-exit), visibility 0s linear var(--t-base);
}
.dock.is-shown { transform: none; visibility: visible; transition: transform var(--t-base) var(--ease), visibility 0s; }
.dock .btn { width: 100%; }
.has-dock .site-footer { padding-bottom: calc(56px + 76px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) {
  .has-dock .site-footer { padding-bottom: 56px; }
  .dock {
    left: auto; bottom: auto; top: 10px; right: max(var(--gutter), calc((100% - var(--max)) / 2));
    padding: 0; background: none; box-shadow: none; opacity: 0; transform: translateY(-8px);
    transition: transform var(--t-base) var(--ease-exit), opacity var(--t-base) var(--ease-exit), visibility 0s linear var(--t-base);
  }
  .dock.is-shown { opacity: 1; transform: none; transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), visibility 0s; }
  .dock .btn { width: auto; min-width: 0; min-height: 44px; padding: 10px 18px; font-size: 15px; line-height: 24px; }
}

/* ---------- hero ---------- */
.hero { padding: 24px 0 var(--section); }
.hero-grid { display: grid; gap: 24px; }
.hero-copy { display: grid; gap: 20px; align-content: start; }
/* eyebrow: one quiet line above the headline that says what Nari 1 is (kit small type, secondary text) */
.eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-secondary); margin-bottom: -8px; }
.hero .lead { margin-top: -4px; }
/* brand line: answers the headline's question; Nari 1, powered by Nily (Megh, 28 Oct) */
.hero-brand { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--indigo-700); max-width: 30em; margin-top: -4px; }
@media (min-width: 1024px) { .hero-brand { font-size: 18px; line-height: 28px; } }

.price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 4px; margin-top: 4px; }
.price-now { display: inline-block; font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; transform-origin: left 70%; }
/* The strike is drawn, not a font decoration, so the price change can be shown happening. */
.price-was { position: relative; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--text-secondary); text-decoration: none; }
.price-was::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px;
  background: currentColor; transform-origin: left center;
}
.price-caption { flex-basis: 100%; color: var(--text-secondary); font-size: 15px; line-height: 22px; }
@media (min-width: 1024px) { .price-now { font-size: 64px; line-height: 68px; } }

.counter { display: grid; gap: 8px; max-width: 420px; }
.counter[hidden] { display: none; }
.counter-text { font-size: 15px; line-height: 22px; font-weight: 500; }
.counter-text strong { font-weight: 800; }
.counter-track { height: 8px; border-radius: 4px; background: var(--border-soft); overflow: hidden; }
.counter-fill { height: 100%; width: 0; background: var(--indigo); border-radius: 4px; }
.counter-fill.is-animated { transition: width 900ms cubic-bezier(.2,.7,.2,1); }
.full-note { font-size: 15px; line-height: 22px; font-weight: 600; max-width: 34em; }

.promise {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft);
  max-width: 34em;
}
.promise-title { font-weight: 700; font-size: 15px; line-height: 22px; }
.promise p { font-size: 15px; line-height: 22px; }

/* founding band: the 1,000-spot field next to the ticket */
.spots-grid { display: grid; gap: 28px; }
.spots-copy { display: grid; gap: 12px; max-width: 36em; }
.field { display: grid; gap: 14px; }
/* 25 columns × 40 rows on phones, 40 × 25 from 768 px; each cell is 1.2 times as tall as it is wide.
   The ratio is set here so the canvas never shifts the layout when it draws. */
.field-canvas { display: block; width: 100%; height: auto; aspect-ratio: 25 / 48; }
@media (min-width: 768px) { .field-canvas { aspect-ratio: 4 / 3; } }
.field-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; line-height: 20px; color: var(--text-on-dark-secondary); }
.key { display: inline-flex; align-items: center; gap: 8px; }
.key::before { content: ""; width: 10px; height: 12px; border-radius: 5px 5px 0 0; }
.key-taken::before { background: var(--mineral); }
.key-next::before { background: var(--coral-accessible); }
.key-open::before { box-shadow: inset 0 0 0 1.5px var(--text-on-dark-secondary); }
@media (min-width: 1024px) {
  .spots-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy ticket" "field ticket";
    column-gap: 64px; row-gap: 32px; align-items: start;
  }
  .spots-copy { grid-area: copy; }
  .field { grid-area: field; }
  .spots-grid > .ticket { grid-area: ticket; }
}

/* founding ticket: dashed arch = a spot waiting; solid arch = her spot */
.ticket {
  position: relative; background: var(--carbon); color: var(--text-on-dark);
  border-radius: var(--radius-card-lg); padding: 20px; display: grid;
  grid-template-columns: 76px 1fr; gap: 20px; align-items: center;
}
.ticket-mark { width: 76px; }
.ticket-mark svg { width: 100%; height: auto; }
.ticket-body { display: grid; gap: 2px; padding-left: 20px; border-left: 2px dashed var(--carbon-raised); }
.ticket-kicker { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-on-dark-secondary); }
.ticket-number { font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; }
.ticket-slot {
  display: inline-block; min-width: 3.1ch; border-bottom: 3px dashed var(--coral-accessible);
  height: 0.9em; transform: translateY(0.06em);
}
.ticket-of { font-size: 15px; line-height: 22px; color: var(--text-on-dark-secondary); font-weight: 500; }
.ticket-title { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.02em; }
.ticket-perks { grid-column: 1 / -1; display: none; gap: 6px; padding-top: 16px; border-top: 2px dashed var(--carbon-raised); font-size: 14px; line-height: 20px; color: var(--text-on-dark-secondary); }
.ticket-perks li { display: flex; gap: 10px; }
.ticket-perks li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--coral-accessible); }

/* hero film: the 3D phone and its controls live in inside.css (the landing page is the only page that has them) */

/* hero load: one orchestrated moment. Headline lines rise in turn, the old price is struck, ₹49 lands. */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > .eyebrow { animation: rise var(--t-slow) var(--ease) both; }
  .hero-title .line > span { animation: line-rise var(--t-narrative) var(--ease) both; }
  .hero-title .line:nth-child(2) > span { animation-delay: 140ms; }
  .hero-copy > .hero-brand { animation: rise var(--t-slow) var(--ease) 200ms both; }
  .hero-copy > .lead { animation: rise var(--t-slow) var(--ease) 260ms both; }
  .hero-copy > .price { animation: rise var(--t-slow) var(--ease) 320ms both; }
  .hero-copy > .price .price-was::after { animation: strike var(--t-slow) var(--ease) 560ms both; }
  .hero-copy > .price .price-now { animation: land var(--t-base) var(--ease) 840ms both; }
  .hero-copy > .reserve, .hero-copy > .counter, .hero-copy > .full-note { animation: rise var(--t-slow) var(--ease) 420ms both; }
  .hero-copy > .promise { animation: rise var(--t-slow) var(--ease) 480ms both; }
}
@keyframes line-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes land { from { transform: scale(0.92); } to { transform: none; } }
@keyframes turn-coral { from { fill: var(--carbon); } to { fill: var(--coral); } }

/* Scroll reveals (plan D4, §6 #14; recipes 4 and 5). CSS scroll-driven: content is visible by default, so with no
   script, an older browser or reduced motion everything shows complete. Where view() timelines run, each reveal plays
   as its element enters the screen, follows the scroll (it never moves while she reads), and is finished by the time
   the element is fully on screen. Each shows a change: the receipt prints and its total is struck, the figures
   arrive and one turns coral, the portraits arrive. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .receipt .receipt-row, .receipt .receipt-total { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .receipt-total { view-timeline: --total block; }
    .receipt .worth-was::after { animation: strike linear both; animation-timeline: --total; animation-range: entry 40% entry 100%; }
    .receipt .amount { animation: land linear both; animation-timeline: --total; animation-range: entry 70% entry 100%; }
    .cast > li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .cast > li:nth-child(2) { animation-range: entry 10% entry 70%; }
    .cast > li:nth-child(3) { animation-range: entry 20% entry 80%; }
    .cast > li:nth-child(4) { animation-range: entry 30% entry 90%; }
    .figures { view-timeline: --figures block; }
    .figures .figure { animation: rise linear both; animation-timeline: --figures; animation-range: entry 0% entry 60%; }
    .figures .figure.is-one { animation: rise linear both, turn-coral linear both; animation-timeline: --figures, --figures; animation-range: entry 0% entry 60%, entry 70% entry 100%; }
    .about-points > li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}

@media (min-width: 1024px) {
  .hero { padding-top: 40px; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .ticket { grid-template-columns: 1fr; padding: 32px; gap: 28px; margin-top: 8px; }
  .ticket-mark { width: 132px; }
  .ticket-body { padding-left: 0; border-left: 0; padding-top: 24px; border-top: 2px dashed var(--carbon-raised); }
  .ticket-number { font-size: 64px; line-height: 68px; }
  .ticket-title { font-size: 48px; line-height: 52px; }
  .ticket-perks { display: grid; font-size: 15px; line-height: 22px; }
}

/* ---------- sections ---------- */
.section { padding: var(--section) 0; }
.section-head { display: grid; gap: 12px; max-width: 40em; margin-bottom: 28px; align-content: start; }
.split { display: grid; }
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 64px;
    grid-template-areas: "head main" "aside main"; align-items: start;
  }
  .split > .section-head { grid-area: head; margin-bottom: 0; }
  .split > .split-main { grid-area: main; }
  .split > .split-aside { grid-area: aside; margin-top: 28px; }
}

/* receipt */
.receipt {
  background: var(--surface); border-radius: var(--radius-card); padding: 8px 20px 20px;
  box-shadow: inset 0 0 0 1px var(--border-soft); max-width: 760px;
}
.receipt-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px dashed var(--border-strong); }
.receipt-item { font-size: 17px; line-height: 24px; font-weight: 600; }
.receipt-detail { grid-column: 1 / 2; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.receipt-value { grid-row: 1 / 2; grid-column: 2 / 3; font-weight: 700; text-align: right; white-space: nowrap; }
.receipt-total { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; padding-top: 18px; }
.receipt-total .label { font-size: 17px; line-height: 24px; font-weight: 700; }
.receipt-total .worth { color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.receipt-total .amount { grid-row: 1 / 3; grid-column: 2 / 3; font-size: 40px; line-height: 44px; font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 768px) { .receipt { padding: 8px 32px 28px; } }
.receipt-total .amount { transform-origin: right 70%; }
/* the regular total is struck with a drawn line, the same strike as the hero price */
.worth-was { position: relative; display: inline-block; }
.worth-was::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px;
  background: currentColor; transform-origin: left center;
}

.band-dark { background: var(--carbon); color: var(--text-on-dark); }
.band-dark .muted { color: var(--text-on-dark-secondary); }

/* book one for yourself (light band): the sourced fact as six Her figures, one in coral */
.why { background: var(--surface); box-shadow: inset 0 1px 0 var(--border-soft), inset 0 -1px 0 var(--border-soft); }
.why-grid { display: grid; gap: 28px; }
.why-copy { display: grid; gap: 16px; max-width: 36em; }
.why-copy p { font-size: 17px; line-height: 26px; }
/* head and hormones: two short paragraphs, set like the why band's copy */
.hh-copy { display: grid; gap: 16px; max-width: 36em; }
.hh-copy p { font-size: 17px; line-height: 26px; }
/* how it works: one intro line on what Nily does before the five steps */
.how-intro { font-size: 17px; line-height: 26px; }
.fact { display: grid; gap: 10px; padding-top: 24px; border-top: 2px dashed var(--border-strong); max-width: 30em; }
.figures { width: 100%; max-width: 320px; height: auto; margin-bottom: 14px; overflow: visible; }
.figure { fill: var(--carbon); }
.figure.is-one { fill: var(--coral); }
.fact-line { font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; }
.fact-source { font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.anchor-line { font-size: 17px; line-height: 26px; color: var(--text); }
.anchor-line strong { color: var(--coral-700); font-weight: 700; }
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: start; }
  .fact { padding-top: 0; border-top: 0; padding-left: 32px; border-left: 2px dashed var(--border-strong); }
  .fact-line { font-size: 32px; line-height: 40px; }
}

/* journey */
.journey { display: grid; gap: 0; max-width: 760px; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 0 16px; padding-bottom: 24px; }
/* Static (no script, reduced motion): the whole line is drawn and every step is reached. With motion,
   motion.js sets --seg on each step as the page scrolls and marks .is-reached when the line gets there. */
.step::before {
  counter-increment: step; content: counter(step);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 16px; background: var(--indigo); color: var(--mineral);
  grid-row: 1 / 3;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.step.is-doctor::before { background: var(--carbon); color: var(--text-on-dark); }
.journey.is-live .step:not(.is-reached)::before { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--border-strong); }
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px;
  background:
    linear-gradient(var(--indigo), var(--indigo)) top left / 2px calc(var(--seg, 1) * 100%) no-repeat,
    repeating-linear-gradient(to bottom, var(--border-strong) 0 6px, transparent 6px 12px);
}
.step-who { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--indigo-700); padding-top: 2px; }
.step.is-doctor .step-who { color: var(--carbon); }
.step-what { font-size: 16px; line-height: 24px; }
.journey-notes { display: grid; gap: 12px; margin-top: 8px; max-width: 760px; }
.note {
  padding: 16px 18px; border-radius: var(--radius-card); background: var(--surface-subtle);
  font-size: 15px; line-height: 22px;
}
.note strong { font-weight: 700; }

/* questions */
.faq { max-width: 760px; border-top: 1px solid var(--border-soft); }
.faq details { border-bottom: 1px solid var(--border-soft); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; min-height: 44px; font-weight: 600; font-size: 17px; line-height: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2px solid var(--carbon); border-bottom: 2px solid var(--carbon);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq .answer { padding: 0 0 20px; display: grid; gap: 10px; max-width: 40em; color: var(--text); }
/* Every <details> on the site (the FAQs here and on /learn) opens and closes smoothly where the browser can animate
   details content (recipe 9); elsewhere, and under reduced motion, it opens at once. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    :root { interpolate-size: allow-keywords; }
    details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size var(--t-slow) var(--ease), content-visibility var(--t-slow) var(--ease) allow-discrete;
    }
    details[open]::details-content { block-size: auto; }
  }
}

/* stories link band: four portraits, no price in this band */
.cast { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .cast { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.cast-card {
  display: grid; gap: 10px; padding: 8px; border-radius: var(--radius-card); text-decoration: none; color: var(--text);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cast-card img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-control); background: var(--surface-subtle); }
.cast-card:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: translateY(-2px); }
.cast-card:active { transform: scale(0.98); transition-duration: var(--t-instant); }
.cast-name { padding: 0 4px 4px; font-size: 16px; line-height: 22px; font-weight: 700; }
.cast-more { margin-top: 24px; font-weight: 600; }
/* links on a line of their own get the 24 px minimum target (WCAG 2.2 2.5.8); links inside sentences are exempt */
.cast-more a, .about-parent a { display: inline-flex; align-items: center; min-height: 24px; }

/* closing call to action */
.band-coral { background: var(--coral-tint); }
.closing { display: grid; gap: 18px; max-width: 40em; }

/* footer (dark, kit §5) */
.site-footer { padding: 48px 0 56px; background: var(--carbon); font-size: 14px; line-height: 20px; color: var(--text-on-dark-secondary); }
.site-footer :focus-visible { outline-color: var(--indigo-accessible); }
.footer-grid { display: grid; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; color: var(--text-on-dark); font-size: 16px; line-height: 24px; font-weight: 700; }
.footer-brand img { width: 36px; height: auto; margin-left: -9px; }
.footer-nily { max-width: 30em; margin-top: -8px; color: var(--text-on-dark); font-size: 15px; line-height: 22px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links a { display: inline-block; padding: 10px 0; color: var(--text-on-dark-secondary); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer-links a:hover { color: var(--text-on-dark); text-decoration: underline; text-decoration-thickness: 2px; }
.footer-legal { display: grid; gap: 6px; max-width: 46em; }
.footer-legal a { color: var(--text-on-dark); }

/* ---------- /founding (30 Oct): the Founding 1,000 page. A quiet top (the offer and the founding card), one bold moment
   (the ten perks on the dark band), then the side-by-side table, the steps, the questions and the closing band. In the
   perks a solid arch and a solid rule mark what is yours from the day you reserve; a dashed arch and a dashed rule, what
   arrives as Nari 1 opens (the founding card's own language: dashed = a spot waiting, solid = hers). ---------- */
.founding-top { padding: 24px 0 var(--section); }
.founding-top-grid { display: grid; gap: 32px; }
.founding-copy { display: grid; gap: 20px; align-content: start; }
.founding-copy .crumbs { margin-bottom: -4px; }
.founding-copy .lead { margin-top: -4px; }
@media (min-width: 1024px) {
  .founding-top { padding-top: 40px; }
  .founding-top-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
}

.perks-head { display: grid; gap: 16px; max-width: 40em; margin-bottom: 40px; }
.perks-title { color: var(--text-on-dark); }
.perks-intro { font-size: 17px; line-height: 26px; color: var(--text-on-dark-secondary); max-width: 34em; }
.perks-group { font-size: 15px; line-height: 22px; font-weight: 700; color: var(--coral-accessible); margin-bottom: 4px; }
.perk-list { display: grid; column-gap: 32px; margin-bottom: 48px; }
.perk-list:last-child { margin-bottom: 0; }
.perk {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start;
  padding: 22px 0 26px; border-top: 2px dashed var(--text-on-dark-secondary);
}
.perk-list.is-now .perk { border-top: 2px solid var(--mineral); }
.perk-mark { grid-row: 1 / 3; width: 24px; height: 40px; margin-top: 2px; }
.perk-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-on-dark); }
.perk p { font-size: 15px; line-height: 22px; color: var(--text-on-dark-secondary); max-width: 32em; }
@media (min-width: 768px) {
  .perk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .perk-list.is-now { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 64px; }
  .perk-list.is-later { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .perk-list.is-now .perk-title { font-size: 24px; line-height: 30px; }
}

/* the side-by-side table: a real table at every width (short row names, two short values each) */
.compare-wrap { max-width: 860px; }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; table-layout: fixed; }
.compare th, .compare td { padding: 14px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-soft); }
.compare th:first-child { width: 38%; padding-left: 0; }
.compare thead th { font-weight: 700; border-bottom: 2px solid var(--carbon); }
.compare thead .is-founding { background: var(--carbon); color: var(--text-on-dark); border-radius: var(--radius-control) var(--radius-control) 0 0; border-bottom-color: var(--carbon); }
.compare tbody th { font-weight: 600; }
.compare td.is-founding { background: var(--surface); color: var(--indigo-700); font-weight: 700; }
.compare tbody tr:last-child td.is-founding { border-radius: 0 0 var(--radius-control) var(--radius-control); }
.compare td.is-no { color: var(--text-secondary); }
.compare-note { margin-top: 16px; max-width: 40em; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
@media (min-width: 768px) {
  .compare { font-size: 16px; line-height: 24px; }
  .compare th, .compare td { padding: 16px 20px; }
}

/* how it works: the care journey's numbered line, with her own two steps first (coral) */
.step.is-start::before { background: var(--coral); color: var(--carbon); }
.step.is-start .step-who { color: var(--coral-700); }

/* cross-links to /founding: a link on a line of its own (24 px target); on the dark founding band, light text */
.founding-link { font-weight: 600; }
.founding-link a { display: inline-flex; align-items: center; min-height: 24px; }
.on-dark .founding-link a { color: var(--text-on-dark); }
.on-dark .founding-link a:hover { color: var(--mineral); }

/* ---------- policy pages ---------- */
.doc { padding: 24px 0 var(--section); }
.doc .wrap > * { max-width: 44em; }
.doc h1 { margin-bottom: 8px; }
.doc .updated { color: var(--text-secondary); font-size: 14px; line-height: 20px; margin-bottom: 32px; }
.doc h2 { font-size: 22px; line-height: 30px; font-weight: 700; margin: 36px 0 10px; }
.doc p, .doc li { font-size: 16px; line-height: 26px; }
.doc p + p { margin-top: 12px; }
.doc ul.bullets { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin-top: 10px; }
.doc ol.numbered { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; margin-top: 10px; }
.doc address { font-style: normal; }
.doc .crumbs li { font-size: 14px; line-height: 20px; }
.fill { background: var(--coral-tint); color: var(--carbon); padding: 1px 6px; border-radius: 4px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--coral); }

/* ---------- about ---------- */
.about-hero { padding: 16px 0 var(--section); }
.about-hero-grid { display: grid; gap: 28px; }
.about-hero-copy { display: grid; gap: 20px; align-content: start; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; color: var(--text-secondary); }
.crumbs a:hover { color: var(--indigo-700); }
.about-hero .eyebrow { margin-bottom: -8px; }
.about-brand { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--indigo-700); max-width: 30em; }
/* Her figure inside the ring that joins mood, sleep, energy and cycle: one picture. Drawn on once at load when
   motion is allowed; complete and static otherwise. */
.about-art { width: 100%; max-width: 360px; height: auto; justify-self: center; overflow: visible; }
.about-art .art-disc { fill: var(--surface); stroke: var(--border-soft); stroke-width: 2; }
.about-art .art-ring { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 6 8; }
.about-art .art-orbit { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; }
.about-art .art-node { fill: var(--indigo); }
.about-art .art-node.is-coral { fill: var(--coral); }
.about-art .art-label { font: 600 20px/1 var(--font); fill: var(--text); }
.about-art .art-arch { fill: var(--carbon); }
.about-art .art-head { fill: var(--coral); }
.about-art .art-dot { fill: var(--mineral); }
.about-art .art-point { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .about-hero-copy > .about-brand { animation: rise var(--t-slow) var(--ease) 120ms both; }
  .about-hero-copy > .lead { animation: rise var(--t-slow) var(--ease) 200ms both; }
  .about-art .art-orbit { stroke-dasharray: 1; animation: draw var(--t-narrative) var(--ease) 200ms both; }
  .about-art .art-point { animation: rise var(--t-slow) var(--ease) 360ms both; }
  .about-art .art-point:nth-of-type(2) { animation-delay: 420ms; }
  .about-art .art-point:nth-of-type(3) { animation-delay: 480ms; }
  .about-art .art-point:nth-of-type(4) { animation-delay: 540ms; }
}
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.about-copy { display: grid; gap: 16px; max-width: 36em; }
.about-copy p { font-size: 17px; line-height: 26px; }
.about-band { background: var(--surface); box-shadow: inset 0 1px 0 var(--border-soft), inset 0 -1px 0 var(--border-soft); }
.about-points { display: grid; gap: 12px; max-width: 760px; }
.about-points li {
  display: grid; grid-template-columns: 12px 1fr; gap: 14px; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--mineral); box-shadow: inset 0 0 0 1px var(--border-soft); font-size: 16px; line-height: 24px;
}
.about-points li::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--indigo); margin-top: 6px; }
.about-points li:nth-child(even)::before { background: var(--coral); }
.about-people { display: grid; gap: 16px; }
.person-card { display: grid; gap: 10px; align-content: start; padding: 20px; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); }
.person-card p { font-size: 16px; line-height: 24px; }
.person-card .h3 { display: flex; align-items: center; gap: 10px; }
.person-card .chip-figure { margin: 0; fill: var(--indigo); }
.person-card.is-doctor .chip-figure { fill: var(--carbon); }
.about-company address { font-style: normal; font-size: 16px; line-height: 26px; }
.about-parent { font-weight: 600; }
@media (min-width: 768px) {
  .about-people { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .about-hero { padding-top: 40px; }
  .about-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
  .about-art { max-width: 440px; justify-self: end; }
}

/* ---------- stories ---------- */
.stories-hero { padding: 24px 0 var(--section); }
.stories-hero-grid { display: grid; gap: 24px; }
.stories-hero-copy { display: grid; gap: 20px; align-content: start; }
.portrayed {
  max-width: 34em; padding: 16px 18px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); font-size: 15px; line-height: 22px;
}
.chapter-index { display: flex; flex-wrap: wrap; gap: 8px; }
.chapter-index a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px;
  color: var(--text); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--border-soft); background: var(--surface);
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chapter-index a:hover { box-shadow: inset 0 0 0 1px var(--border-strong); transform: translateY(-2px); }
.chapter-index a:active { transform: scale(0.98); transition-duration: var(--t-instant); }
.chip-figure { width: 14px; height: 24px; margin: 0 8px 0 -4px; fill: var(--indigo); }
/* /stories name chips: her face, small and round, so each chip says who before the name does */
.chip-face { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; margin: 0 8px 0 -6px; flex: none; box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 1024px) {
  .stories-hero { padding-top: 56px; }
  .stories-hero-grid { gap: 28px; max-width: 760px; }
}

.chapter { padding: var(--section) 0; box-shadow: inset 0 1px 0 var(--border-soft); }
.chapter:nth-of-type(even) { background: var(--surface); }
/* Phones and tablets: a small face-first portrait beside her name, as a member card; the story runs below. */
.chapter-grid {
  display: grid; gap: 20px 16px; align-items: center;
  grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr); grid-template-areas: "figure head" "beats beats";
}
.chapter-head { grid-area: head; display: grid; gap: 8px; max-width: 34em; }
.chapter-figure { grid-area: figure; display: grid; gap: 6px; }
.chapter-frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card-lg); background: var(--surface-subtle); }
.chapter-img { width: 100%; height: 100%; object-fit: cover; }
/* the cast are drawn, not photographed: no grain or colour filter, only a hairline edge so the cream art sits on the page like a card (decorative, above the images) */
.chapter-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border-soft);
}
/* Phones and tablets show one image per chapter; the others are not displayed, so lazy loading never fetches them. */
.chapter-img:not(:first-child) { display: none; }
.beats { grid-area: beats; display: grid; gap: 28px; max-width: 34em; }
.beat { display: grid; gap: 6px; }
.beat-title { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--indigo-700); }
.beat p { font-size: 17px; line-height: 27px; }
@media (min-width: 1024px) {
  .chapter-grid {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "figure head" "figure beats";
    column-gap: 64px; row-gap: 40px; align-items: start;
  }
  .chapter-figure { position: sticky; top: calc(var(--header-h) + 24px); }
  .chapter-frame { max-height: calc(100vh - var(--header-h) - 48px); }
  .beats { grid-area: beats; gap: 0; }
  .beat { min-height: 36vh; align-content: start; padding-bottom: 32px; }
  .beat:last-child { min-height: 0; padding-bottom: 0; }
  /* The pinned portrait crossfades between her four images as each part of her week crosses the middle. */
  .chapter-img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
  .chapter-img:not(:first-child) { display: block; }
  .chapter-img.is-active { opacity: 1; }
}

.share { display: grid; gap: 12px; max-width: 40em; }

/* ---------- thanks ---------- */
.thanks { padding: 24px 0 var(--section); }
.thanks-grid { display: grid; gap: 28px; align-items: start; }
.thanks-copy { display: grid; gap: 18px; align-content: start; max-width: 36em; }
.thanks-status { display: grid; gap: 12px; }
.thanks .ticket .ticket-number { min-height: 44px; }
.arch-fill { transition: fill-opacity 600ms ease, stroke-opacity 600ms ease; }
@media (min-width: 1024px) {
  .thanks { padding-top: 48px; }
  .thanks-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; }
  .thanks .ticket .ticket-number { min-height: 68px; }
}
.next-steps { display: grid; gap: 12px; counter-reset: next; }
.next-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.next-steps li::before {
  counter-increment: next; content: counter(next);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 2px var(--carbon);
}

/* ---------- spot illustrations: /contact, the policy pages, /thanks and 404 ----------
   One small Her figure (recipe 5's figure: arch, head and dot, brand paths) and one drawn line per page that says
   what the page is for (recipe 2: a drawn line, pathLength 1 + stroke-dashoffset, as the /about ring). Decorative
   (aria-hidden). The line draws once at load in 360 ms when motion is allowed; complete and static otherwise. */
.spot-art { display: block; width: 168px; height: auto; margin: 8px 0 12px; overflow: visible; }
.spot-art.is-small { width: 104px; margin: 0; }
.spot-art.is-large { width: 240px; }
.spot-art .s-arch { fill: var(--carbon); }
.spot-art .s-head { fill: var(--coral); }
.spot-art .s-dot { fill: var(--carbon); }
.spot-art .s-line { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.spot-art .s-line.is-coral { stroke: var(--coral); }
.spot-art .s-rule { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-linecap: round; }
.spot-art .s-dash { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; }
.spot-art .s-node { fill: var(--indigo); }
.spot-art .s-node.is-coral { fill: var(--coral); }
.spot-art .s-node.is-carbon { fill: var(--carbon); }
.spot-art .s-spot { fill: var(--coral); }
@media (prefers-reduced-motion: no-preference) {
  .spot-art .s-line { stroke-dasharray: 1; animation: draw var(--t-slow) var(--ease) both; }
}

/* ---------- app pill (plan D7, §6 #18): text only, a generic phone icon; no store glyph or badge ---------- */
.app-pill {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; justify-self: start; width: fit-content;
  min-height: 40px; padding: 8px 16px 8px 12px; border-radius: 20px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-soft); color: var(--text); font-size: 14px; line-height: 20px; font-weight: 600;
}
.app-pill-icon { width: 20px; height: 20px; flex: none; color: var(--indigo); }
.app-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.app-link {
  display: inline-flex; align-items: center; min-height: 24px; color: var(--indigo-700);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-fast) var(--ease);
}
.app-link:hover { text-decoration-thickness: 2px; }
.app-link:active { color: var(--indigo); }

/* ---------- 404 ---------- */
.lost { padding: 24px 0 var(--section); }
.lost-copy { display: grid; gap: 20px; align-content: start; max-width: 36em; }
.lost-links { display: grid; gap: 4px; margin-top: 4px; }
.lost-links li:first-child { margin-bottom: 8px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 1024px) { .lost { padding-top: 56px; } }

/* ---------- page transitions (plan D3): native cross-document View Transitions, only when motion is allowed.
   Links work the same with them off (no script, no router). The header stays in place while the page crossfades. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation-duration: var(--t-base); animation-timing-function: var(--ease-exit); }
  ::view-transition-new(root) { animation-duration: var(--t-base); animation-timing-function: var(--ease); }
}

/* ---------- interaction states (standard dim 3; kit §9: hover 180 ms, press 120 ms at scale 0.98) ----------
   Every link and control has a hover state, the focus ring above, and a pressed state. Underlined text links
   thicken on hover and again when pressed; controls scale to 0.98 when pressed. */
a:active { text-decoration-thickness: 3px; }
.btn { transition: background-color var(--t-fast) var(--ease), transform var(--t-instant) var(--ease); }
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: scale(0.98); }
.brand { border-radius: var(--radius-control); transition: opacity var(--t-fast) var(--ease), transform var(--t-instant) var(--ease); }
.brand:hover { opacity: 0.8; }
.brand:active { transform: scale(0.98); }
.site-nav a:active { color: var(--indigo); text-decoration: underline; text-decoration-thickness: 3px; }
.skip-link:hover { text-decoration: underline; }
.skip-link:active { transform: scale(0.98); }
.faq summary { transition: color var(--t-fast) var(--ease); }
.faq summary:hover { color: var(--indigo-700); }
.faq summary:hover::after { border-color: var(--indigo-700); }
.faq summary:active { color: var(--indigo); }
.crumbs a { transition: color var(--t-fast) var(--ease); }
.crumbs a:active { color: var(--indigo); }
.footer-links a:active { color: var(--mineral); text-decoration: underline; text-decoration-thickness: 3px; }
.footer-legal a { transition: color var(--t-fast) var(--ease); }
.footer-legal a:hover { color: var(--mineral); }
.footer-legal a:active { color: var(--text-on-dark-secondary); }
.text-link:active { color: var(--indigo); }

/* ---------- depth (29 Oct, "held in the hand"): with a fine pointer and motion allowed, motion.js adds .has-depth and
   the surface tilts a few degrees toward the pointer (--rx, --ry), then settles back on leave. Cards keep their 2 px
   lift and 0.98 press inside the same transform. The founding card catches the light where the pointer is; the
   1,000-spot field is lit around it. Touch gets one moment: the founding card turns up into place as it scrolls in.
   Nothing moves on its own and nothing loops; reduced motion gets none of it. Colours are the brand tokens. ---------- */
@keyframes card-in { from { rotate: x 18deg; translate: 0 32px; } to { rotate: x 0deg; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .has-depth[data-depth], .has-depth[data-depth]:hover, .has-depth[data-depth]:active {
    transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) scale(var(--press, 1));
  }
  .has-depth[data-depth] { transition: transform var(--t-slow) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .has-depth[data-depth].is-tilting { transition: transform var(--t-instant) linear, box-shadow var(--t-fast) var(--ease); }
  .has-depth[data-depth="card"]:hover { --lift: -2px; }
  .has-depth[data-depth="card"]:active { --press: 0.98; transition-duration: var(--t-instant); }
  .has-depth[data-depth="card"].is-tilting { box-shadow: inset 0 0 0 1px var(--border-strong), 0 24px 40px -28px color-mix(in srgb, var(--carbon) 45%, transparent); }
  .has-depth[data-depth="surface"].is-tilting { box-shadow: inset 0 0 0 1px var(--border-soft), 0 24px 44px -30px color-mix(in srgb, var(--carbon) 40%, transparent); }
  .ticket.has-depth::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), color-mix(in srgb, var(--indigo-accessible) 24%, transparent),
      color-mix(in srgb, var(--coral-accessible) 9%, transparent) 45%, transparent 72%);
    transition: opacity var(--t-base) var(--ease);
  }
  .ticket.has-depth.is-tilting::after { opacity: 1; }
  .ticket.has-depth.is-tilting { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--indigo-accessible) 40%, transparent); }
  .field { position: relative; }
  .field::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(150px circle at var(--fx, 50%) var(--fy, 50%), color-mix(in srgb, var(--mineral) 18%, transparent), transparent 70%);
    transition: opacity var(--t-base) var(--ease);
  }
  .field.is-lit::before { opacity: 1; }
  @supports (animation-timeline: view()) {
    .spots-grid { perspective: 1200px; }
    .spots-grid > .ticket { animation: card-in linear backwards; animation-timeline: view(); animation-range: entry 5% entry 85%; }
  }
}

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