/* Nesteia marketing site — shared styles.
   Palette tokens from App/Design/Palette.swift. Tide is the single action accent (CTAs, links, ring).
   Sand is warm (Strata, Pro card), dusk is cool (stages, confidence). Ember appears only beside safety copy.
   Flat fills only: no images, no blended fills. At most one secondary tone per section, with one amendment (app Ruling 13b,
   22 Sep 2026): the Strata page alone uses all three, one per badge family group (layers sand, Firsts tide, the five families dusk). */

:root {
  color-scheme: light dark;
  --surface: #F4F3EE;
  --ink: #171B1D;
  --stone: #666E72;
  --hairline: #DDDBD3;
  --tide: #236A76;
  --ember: #AC5335;
  --on-tide: #F4F3EE;
  --sand: #775F31;
  --dusk: #585E8E;
  --tide-soft: color-mix(in srgb, var(--tide) 12%, transparent);
  --sand-soft: color-mix(in srgb, var(--sand) 12%, transparent);
  --dusk-soft: color-mix(in srgb, var(--dusk) 12%, transparent);
  --ember-soft: color-mix(in srgb, var(--ember) 12%, transparent);
  --raise: color-mix(in srgb, var(--ink) 4%, var(--surface));
  --tide-strong: color-mix(in srgb, var(--tide) 84%, var(--ink));
  --sand-strong: color-mix(in srgb, var(--sand) 84%, var(--ink));
  --dusk-strong: color-mix(in srgb, var(--dusk) 84%, var(--ink));
  --stone-soft: color-mix(in srgb, var(--stone) 30%, transparent);
  /* Strata materials: gleam is the brightest tone of the mode, shade the darkest; rims are per material. */
  --gleam: var(--surface);
  --shade: var(--ink);
  --rim-clay: var(--sand);
  --rim-stone: var(--stone);
  --rim-glass: var(--tide);
  /* Clay in another family's tone (Strata page only): the Firsts' tide rim and the five families' dusk rim. */
  --rim-tide: var(--tide);
  --rim-dusk: var(--dusk);
  /* Spacing sits on a 4/8 px scale: 0.125 / 0.25 / 0.5 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 / 2.25 rem. */

  --serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
  --sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --measure: 62ch;
  --wrap: 1040px;
  --gutter: 16px;
  --head-h: 56px;
  --ring-track: 1px;
  --ring-arc: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0E1315;
    --ink: #E9E7E0;
    --stone: #8C9498;
    --hairline: #232B2E;
    --tide: #5CB5C1;
    --ember: #E38A66;
    --on-tide: #0E1315;
    --sand: #D1B07A;
    --dusk: #A3A9E0;
    --gleam: var(--ink);
    --shade: var(--surface);
    --rim-clay: color-mix(in srgb, var(--sand) 78%, var(--surface));
    --rim-stone: color-mix(in srgb, var(--stone) 85%, var(--surface));
    --rim-glass: color-mix(in srgb, var(--tide) 72%, var(--surface));
    --rim-tide: color-mix(in srgb, var(--tide) 78%, var(--surface));
    --rim-dusk: color-mix(in srgb, var(--dusk) 78%, var(--surface));
  }
}
:root[data-theme="dark"] {
  --surface: #0E1315;
  --ink: #E9E7E0;
  --stone: #8C9498;
  --hairline: #232B2E;
  --tide: #5CB5C1;
  --ember: #E38A66;
  --on-tide: #0E1315;
  --sand: #D1B07A;
  --dusk: #A3A9E0;
  --gleam: var(--ink);
  --shade: var(--surface);
  --rim-clay: color-mix(in srgb, var(--sand) 78%, var(--surface));
  --rim-stone: color-mix(in srgb, var(--stone) 85%, var(--surface));
  --rim-glass: color-mix(in srgb, var(--tide) 72%, var(--surface));
  --rim-tide: color-mix(in srgb, var(--tide) 78%, var(--surface));
  --rim-dusk: color-mix(in srgb, var(--dusk) 78%, var(--surface));
}

/* Fallback faces sized to the web fonts' widths over this site's own copy (Inter/Arial 106.4 %, Instrument Serif/Times 83.2 %),
   so the swap from the local face to the loaded one reflows almost nothing. Overrides are divided by size-adjust, as the spec requires. */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica Neue"); size-adjust: 106.4%; ascent-override: 91%; descent-override: 22.5%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; src: local("Times New Roman"), local("Times"); size-adjust: 83.2%; ascent-override: 119%; descent-override: 37%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  overflow-x: hidden;
}

svg { max-width: 100%; }
a { color: var(--tide); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.15; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 1rem + 1.5vw, 1.9rem); letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
p { margin: 0; max-width: var(--measure); }
p + p { margin-top: 0.75em; }
.lede { font-size: 1.05rem; color: var(--stone); max-width: 52ch; }
.small { font-size: 0.875rem; color: var(--stone); }
.eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tide);
  margin-bottom: 0.5rem;
}
.num, time, .price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ember { color: var(--ember); }
ul { margin: 0; padding-left: 1.2em; }
li + li { margin-top: 0.3em; }

/* ---------- Header ---------- */
.site-head {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--head-h);
}
/* Shrunk: the flow box keeps its 56 px (so nothing below it shifts); the header slides up 12 px and its row re-centres in the
   visible 44 px, both by transform, so neither move is a layout shift. */
.site-head.shrunk { transform: translateY(-12px); box-shadow: 0 1px 0 var(--hairline); }
.site-head.shrunk .wrap { transform: translateY(6px); }
.site-head.shrunk .wordmark { transform: scale(0.82); }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  transform-origin: left center;
}
.meniscus { width: 22px; height: 22px; display: block; }
.meniscus .arc { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.meniscus .line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.site-nav { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.site-nav a {
  color: var(--stone);
  text-decoration: none;
  font-size: 0.875rem;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active, .site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--tide); }
@media (max-width: 640px) {
  .site-nav .opt { display: none; }
  .site-nav { gap: 0.75rem; flex-wrap: nowrap; }
  .site-nav a { font-size: 0.78rem; }
  .site-head .wrap { gap: 0.5rem; }
  .wordmark { font-size: 1.3rem; }
  .theme-toggle { width: 32px; height: 32px; }
}
.theme-toggle {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle path { fill: currentColor; }
.theme-toggle:hover { border-color: var(--tide); color: var(--tide); }
.theme-toggle[aria-pressed="true"] svg { transform: scaleX(-1); }

/* ---------- Sections ---------- */
.section { padding-block: 1.75rem; border-top: 1px solid var(--hairline); scroll-margin-top: calc(var(--head-h) + 8px); }
@media (min-width: 900px) { .section { padding-block: 2rem; } }
/* Below-fold sections skip layout until they approach the viewport; --cis is each one's 375 px height. */
.cv { content-visibility: auto; contain-intrinsic-size: auto var(--cis, 900px); }
#safety.cv { --cis: 330px; } #pricing.cv { --cis: 680px; } #privacy.cv { --cis: 360px; } #faq.cv { --cis: 620px; }
.section-head { margin-bottom: 1.5rem; max-width: var(--measure); }
.section-head h2 { max-width: 32ch; }
/* A subpage opens with its section title as the page title, set like the legal pages' h1. */
.section-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.01em; max-width: 24ch; }
.section-head p { margin-top: 0.75rem; }
/* Home-page teasers end with one ghost action and a quiet line about what the full page holds. */
.more { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; margin-top: 1.25rem; max-width: none; }
.teaser .section-head { margin-bottom: 1rem; }
.teaser .tiers { max-width: 560px; }
.teaser .price-card .summary { margin-top: 0.75rem; max-width: 40ch; }
.teaser .price-card.pro .summary { color: var(--ink); }
/* Stages and Strata teasers share one band from 900 px; Safety is a single row of head + copy. */
@media (min-width: 900px) {
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .duo .section .wrap { padding-inline: 0; }
  .duo .section { display: flex; flex-direction: column; min-width: 0; }
  .duo .section .wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; }
  .duo .section .more { margin-top: auto; padding-top: 1.25rem; }
  .teaser-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1rem 3rem; align-items: start; }
  .teaser-row .section-head { margin-bottom: 0; }
  .teaser-row .lede { margin-top: 0.25rem; }
}
.grid { display: grid; gap: 1.25rem 2rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Reveal on scroll: visible at rest, JS only marks below-fold sections pending. */
.reveal { opacity: 1; transform: none; }
.reveal.pending { opacity: 0; transform: translateY(8px); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Buttons: one recipe, three fills (tide, ghost, sand); chips are the small variant ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--tide);
  background: var(--tide);
  color: var(--on-tide);
  font: 500 0.9rem/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--tide-strong); border-color: var(--tide-strong); }
.btn.ghost { background: transparent; color: var(--tide); }
.btn.ghost:hover { background: var(--tide-soft); border-color: var(--tide); }
.btn.sand { background: var(--sand); border-color: var(--sand); color: var(--surface); }
.btn.sand:hover { background: var(--sand-strong); border-color: var(--sand-strong); }
.btn:focus-visible, .plan-switch button:focus-visible, .chips button:focus-visible { outline-offset: 3px; border-radius: 999px; }
.btn.sand:focus-visible, .chips.sand button:focus-visible { outline-color: var(--sand); }

/* ---------- Hero ---------- */
.hero { padding-block: 1.5rem 1.75rem; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "demo" "lock";
  gap: 1.5rem 3rem;
  align-items: start;
}
.hero-copy { grid-area: copy; }
.demo { grid-area: demo; }
.lock-preview { grid-area: lock; }
/* From 820 px: copy left, the demo phone right, both on one top line; the Lock Screen card sits under the CTA in the copy column. */
@media (min-width: 820px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-template-rows: auto 1fr; grid-template-areas: "copy demo" "lock demo"; gap: 1.25rem 3rem; }
  .hero .demo { gap: 0.5rem; }
  .hero .demo .cap { display: none; } /* the sub-line already states the ceiling */
}
@media (min-width: 900px) { .hero { padding-bottom: 2rem; } }
.hero-word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 1.5rem + 3.5vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.hero-promise {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.05rem + 1.6vw, 2rem);
  line-height: 1.2;
  max-width: 22ch;
}
.hero-sub { margin-top: 0.75rem; color: var(--stone); max-width: 46ch; }
.hero-cta { margin-top: 1.25rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  border: 1px solid var(--ink);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
}
.store-badge:hover { background: var(--raise); }
.store-badge .apple { width: 20px; height: 24px; fill: currentColor; }
.store-badge small { display: block; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.store-badge span { font-size: 1.05rem; font-weight: 500; }
.hero-note { font-size: 0.8rem; color: var(--stone); max-width: 24ch; }

/* Timer demo: the phone takes the width the hero gives it (--phone-w), the ring scales with the screen. */
.demo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.demo .phone { --phone-w: 280px; }
@media (min-width: 820px) { .demo .phone { --phone-w: 236px; } } /* wide enough for "Day 5 of 5 · 120-hour fast" beside the wordmark */
.plan-switch, .chips { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.plan-switch { justify-content: center; }
.plan-switch button, .chips button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--stone) 55%, transparent);
  background: transparent;
  color: var(--stone);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.plan-switch button:hover, .chips button:hover { color: var(--ink); border-color: var(--stone); background: var(--raise); }
.plan-switch button[aria-pressed="true"] { background: var(--tide-soft); border-color: var(--tide); color: var(--tide); }
.chips button[aria-pressed="true"] { background: var(--dusk-soft); border-color: var(--dusk); color: var(--dusk); }
.demo-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }
/* Count and seconds, the two timer options from Settings ▸ Fasting; tide, since this is Today's screen. */
.demo-options { display: flex; align-items: center; justify-content: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.switch.tide input:checked + .track { background: var(--tide); border-color: var(--tide); }
.switch.tide input:focus-visible + .track { outline-color: var(--tide); }
.demo .cap { text-align: center; color: var(--stone); font-size: 0.8rem; }
.stop-link { text-decoration: none; }
.phone .stop-link { color: var(--ember); } /* the app's stop link is ember; .phone .secondary would otherwise win on specificity */
.stop-link:hover { text-decoration: underline; }

/* ---------- Phone frames (pure CSS) ---------- */
.phone {
  --phone-w: 280px;
  width: var(--phone-w);
  max-width: 100%;
  aspect-ratio: 9 / 19.2;
  border: 1px solid var(--hairline);
  border-radius: 42px;
  padding: 10px;
  background: var(--surface);
  box-shadow: inset 0 0 0 6px var(--ink);
  margin: 0 auto;
}
.phone.sm { --phone-w: 230px; border-radius: 36px; padding: 8px; }
.phone.sm .screen { border-radius: 28px; padding: 14px 12px 12px; gap: 8px; }
.phone.sm .row { padding: 3px 0; }
.phone .screen {
  height: 100%;
  border-radius: 32px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  font-size: 0.72rem;
  color: var(--ink);
}
.phone .status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding-inline: 6px;
}
.phone .island { width: 76px; height: 20px; border-radius: 12px; background: var(--ink); }
.phone .title { font-size: 0.95rem; font-weight: 600; }
.phone .sub { color: var(--stone); font-size: 0.68rem; }
/* Today's header is one row: the wordmark at the leading edge, the plan chip (stone on a hairline capsule) trailing. */
.phone .today-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 24px; }
.phone .mark { font-family: var(--serif); font-size: 1.05rem; line-height: 1; color: var(--ink); }
.phone .chip { font-size: 0.56rem; line-height: 1.2; color: var(--stone); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 7px; white-space: nowrap; }

/* Today screen */
.ring-wrap { position: relative; width: min(186px, 100%); margin: 2px auto 0; }
.ring { display: block; width: 100%; height: auto; }
.ring .track { fill: none; stroke: var(--hairline); stroke-width: var(--ring-track); }
.ring .arc { fill: none; stroke: var(--tide); stroke-width: var(--ring-arc); stroke-linecap: butt; }
.ring .tick { stroke: var(--hairline); stroke-width: 1; }
.ring .tick.done { stroke: var(--tide); }
.ring-centre {
  position: absolute; inset: 0;
  padding-inline: 14%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-align: center;
}
.hero-timer {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
/* The numeral flips the count (Elapsed ↔ Remaining) when tapped, as the app's timer does. */
.flip { all: unset; display: block; cursor: pointer; border-radius: 6px; max-width: 100%; }
.flip:focus-visible { outline: 2px solid var(--tide); outline-offset: 4px; }
.hero-timer .d, .lock-elapsed .d { display: inline-block; width: 0.48em; text-align: center; }
.hero-timer .c, .lock-elapsed .c { display: inline-block; width: 0.24em; text-align: center; }
.ring-plan { color: var(--stone); font-size: 0.66rem; line-height: 1.25; }
.ring-centre .stage-now { color: var(--tide); font-size: 0.68rem; font-weight: 500; line-height: 1.3; margin-top: 2px; text-wrap: balance; }
.demo.complete .ring-centre .stage-now { color: var(--ink); }
.phone .primary {
  margin-top: auto;
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: 999px;
  background: var(--tide);
  color: var(--on-tide);
  font-weight: 500;
  font-size: 0.8rem;
}
/* Hard stop: the ring settles once and the "Logged" button dims once; both keyframes live in the motion block. */
.demo.complete .phone .primary { background: var(--tide-soft); color: var(--tide); }
.demo.complete .ring { transform-origin: 50% 50%; }
.phone .secondary { text-align: center; color: var(--stone); font-size: 0.7rem; }
.phone .reflection { margin: 0 auto; max-width: 26ch; text-align: center; color: var(--stone); font-size: 0.68rem; line-height: 1.35; text-wrap: balance; }
.phone .supervised { margin: 0 auto; text-align: center; font-size: 0.64rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.phone .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--hairline);
}
.phone .row:first-of-type { border-top: 0; }
.phone .row b { font-weight: 500; }
.phone .row .hrs { color: var(--stone); font-size: 0.66rem; }
.phone .row .conf { display: flex; align-items: center; gap: 4px; color: var(--stone); font-size: 0.64rem; margin-top: 1px; white-space: nowrap; }
.phone .row .conf .meter { width: 11px; height: 8px; color: var(--dusk); }
.phone .row.now b { color: var(--tide); }
.phone .row.locked { color: var(--stone); }
.phone .lock { display: block; font-size: 0.64rem; color: var(--stone); margin-top: 1px; }
/* Stages phone: dusk tone */
.phone.dusk .row.now b { color: var(--dusk); }
.phone.dusk .row.now { background: var(--dusk-soft); margin-inline: -6px; padding-inline: 6px; border-radius: 6px; border-top-color: transparent; }
.phone.dusk .row.now + .row { border-top-color: transparent; }
.phone.dusk .row.now .conf, .phone.dusk .row.now .hrs { color: var(--ink); }
.phone.dusk .title { color: var(--dusk); }
/* The compact timeline: the current stage pinned as a card with a 3 px dusk bar, the next stage under it, then the
   catalogue by day (the current day open), the explainer cards side by side and the Sources row. */
.phone .now-card { border-left: 3px solid var(--dusk); background: var(--dusk-soft); border-radius: 0 6px 6px 0; padding: 5px 8px 6px; display: grid; gap: 1px; }
.phone .now-card .lbl { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); }
.phone .now-card b { font-weight: 500; font-size: 0.74rem; }
.phone .now-card .conf { display: flex; align-items: center; gap: 4px; color: var(--ink); font-size: 0.6rem; white-space: nowrap; }
.phone .now-card .conf .meter { width: 11px; height: 8px; color: var(--dusk); }
.phone .next { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 0.62rem; color: var(--stone); padding: 0 2px; }
.phone .next b { font-weight: 500; color: var(--ink); }
.phone .next .chev, .phone .day .chev { width: 8px; height: 8px; flex: none; fill: none; stroke: var(--stone); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.phone .day { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 0 3px; border-top: 1px solid var(--hairline); font-size: 0.6rem; color: var(--stone); }
.phone .day b { font-weight: 500; color: var(--ink); }
.phone .day.open b { color: var(--dusk); }
.phone .day.open .chev { transform: rotate(180deg); }
.phone .day + .row { border-top: 0; }
.phone .rows { display: grid; }
.phone .rows .row { padding: 3px 0 3px 2px; }
.phone.dusk .rows .row.now { border-left: 3px solid var(--dusk); margin-inline: 0; padding-left: 6px; border-radius: 0 6px 6px 0; }
.phone .also { font-size: 0.62rem; font-weight: 600; margin-top: 2px; }
.phone .cards { display: flex; gap: 6px; overflow: hidden; }
.phone .card { flex: 0 0 76px; border: 1px solid var(--hairline); border-radius: 8px; padding: 5px 6px; font-size: 0.58rem; display: grid; gap: 2px; align-content: start; }
.phone .card b { font-weight: 500; color: var(--ink); }
.phone .card .conf { display: flex; align-items: center; gap: 3px; color: var(--stone); white-space: nowrap; }
.phone .card .conf .meter { width: 10px; height: 7px; color: var(--dusk); }
.phone .sources { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--hairline); padding-top: 5px; font-size: 0.62rem; color: var(--dusk); font-weight: 500; }
.phone .sources .chev { width: 8px; height: 8px; fill: none; stroke: var(--dusk); stroke-width: 1.6; stroke-linecap: round; transform: rotate(-90deg); }

/* ---------- How it works ---------- */
.feature h3 { margin-bottom: 0.25rem; }
.feature p { color: var(--stone); font-size: 0.92rem; }
.feature .k { font-family: var(--serif); font-size: 1.8rem; line-height: 1; display: block; margin-bottom: 0.5rem; color: var(--tide); }
.feature .k-ring svg { width: 1.8rem; height: 1.8rem; display: block; }
.feature .k-ring .track { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.feature .k-ring .arc { fill: none; stroke: var(--tide); stroke-width: 4; }
.feature .k-trend .track { stroke-width: 1.5; stroke-linecap: round; }
.feature .k-bell .track { stroke-width: 1.5; stroke-linecap: round; }
.feature .k-bell .arc { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feature .k-trend .arc { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.facts { margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.75rem 2rem; border-top: 1px solid var(--hairline); padding-top: 1rem; }
.facts div { display: grid; gap: 0.125rem; align-content: start; }
.facts-head { margin: 2rem 0 0; font-size: 1rem; font-weight: 600; }
.facts dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); }
.facts dd { margin: 0; font-size: 0.9rem; color: var(--stone); }
.facts.confidence { margin-top: 1.5rem; }
.facts.confidence dt { color: var(--dusk); }
.facts.families { margin-top: 0.75rem; }
.facts.families dt { color: var(--dusk); }
.facts.families dd b { font-weight: 500; color: var(--ink); }
.families-lede { margin-top: 0.5rem; max-width: 60ch; }

/* ---------- Timer styles (tide only: this is Today's screen) ---------- */
.styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1.25rem 1.5rem; align-items: start; }
.style-card { margin: 0; display: grid; gap: 0.75rem; justify-items: center; }
.style-card figcaption { font-size: 0.875rem; color: var(--stone); max-width: 30ch; justify-self: start; }
.style-card figcaption b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 0.125rem; }
/* A cropped Today screen: the top of the phone, the one-row header and the instrument, nothing under it. */
.mini {
  width: 100%; max-width: 212px;
  border: 5px solid var(--ink); border-bottom: 0;
  border-radius: 30px 30px 0 0;
  padding: 6px 6px 0;
  background: var(--surface);
  position: relative;
}
.mini::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -1px; height: 1px; background: var(--hairline); }
.mini .screen {
  border: 1px solid var(--hairline); border-bottom: 0;
  border-radius: 22px 22px 0 0;
  padding: 10px 12px 0;
  display: grid; gap: 8px;
  font-size: 0.66rem; color: var(--ink);
  overflow: hidden;
}
.mini .status { display: flex; justify-content: space-between; align-items: center; font-size: 0.58rem; font-weight: 600; padding-inline: 4px; }
.mini .island { width: 56px; height: 16px; border-radius: 10px; background: var(--ink); }
.mini .today-head { min-height: 22px; }
.mini .mark { font-size: 0.95rem; }
.mini .chip { font-size: 0.56rem; padding: 2px 7px; }
.mini .ring-wrap { width: 100%; margin: 0; }
.mini .ring-centre { gap: 1px; padding-inline: 16%; }
.mini .hero-timer { font-size: 1.35rem; }
.mini .ring-plan { font-size: 0.58rem; }
.mini .ring-centre .stage-now { font-size: 0.6rem; margin-top: 1px; }
/* Dial: a 270° gauge open at the bottom, its tick scale 10 units inside the track, the numerals set low in the dial. */
.dial-wrap { position: relative; width: 100%; }
.dial { display: block; width: 100%; height: auto; }
.dial .track { fill: none; stroke: var(--hairline); stroke-width: 1; }
.dial .minor { fill: none; stroke: var(--hairline); stroke-width: 4; stroke-dasharray: 3.2 6.8; stroke-dashoffset: 1.6; }
.dial .major { fill: none; stroke: var(--stone); stroke-width: 8; stroke-dasharray: 3.2 46.8; stroke-dashoffset: 1.6; }
.dial .arc { fill: none; stroke: var(--tide); stroke-width: 6; stroke-linecap: round; }
.dial .tick { stroke: var(--tide); stroke-width: 1; }
.dial .end { font-family: var(--sans); font-size: 7px; fill: var(--stone); font-variant-numeric: tabular-nums; }
.dial-centre { position: absolute; left: 16%; right: 16%; top: 46%; display: grid; justify-items: center; gap: 1px; text-align: center; }
.dial-centre .hero-timer { font-size: 1.25rem; }
.dial-centre .ring-plan { font-size: 0.58rem; }
.dial-centre .stage-now { color: var(--tide); font-size: 0.6rem; font-weight: 500; }
/* Minimal: the numerals alone over a 2 px progress line (tide over hairline, a tick at each stage boundary), the stage's name beneath. */
.minimal { display: grid; justify-items: center; gap: 6px; padding: 26% 6px 24%; text-align: center; } /* the same height as the ring and the dial at every width */
.minimal .hero-timer { font-size: 1.7rem; }
.minimal .ring-plan { font-size: 0.6rem; }
.mline { position: relative; width: 100%; height: 2px; border-radius: 999px; background: var(--hairline); margin-top: 6px; }
.mline .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--tide); }
.mline .fill { width: 79.2%; }   /* 12:40 of 16 h */
.mline .tk { position: absolute; top: -2px; width: 1px; height: 6px; background: var(--tide); }
.mline .t4 { left: 25%; } .mline .t12 { left: 75%; }
.minimal .stage-now { color: var(--tide); font-size: 0.62rem; font-weight: 500; }
@media (max-width: 640px) {
  .styles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1rem; }
  .style-card figcaption { max-width: none; }
}

/* ---------- Stages ---------- */
.stages-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; margin-bottom: 1.25rem; }
.stages-head .section-head { margin-bottom: 0; }
.chips { margin-top: 1rem; }
.stages-head .phone.sm { --phone-w: 250px; } /* the compact timeline holds more rows than the old list; the frame grows with its width */
@media (max-width: 720px) { .stages-head { grid-template-columns: minmax(0, 1fr); } .stages-head .phone { display: none; } }

.strip-scroll {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  padding-bottom: 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.strip-scroll::-webkit-scrollbar { display: none; }
.strip-scroll.scrubbing { scroll-snap-type: none; }
.strip {
  list-style: none;
  padding: 2.25rem 0 0;
  margin: 0;
  display: flex;
  gap: 0.5rem;
  min-width: max-content;
  position: relative;
}
.strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 2.25rem;
  height: 1px;
  background: var(--hairline);
}
.stage {
  position: relative;
  flex: 0 0 196px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 10px 10px;
  padding: 0.75rem;
  margin: 0;
}
.stage[hidden] { display: none; }
.stage::before {
  content: "";
  position: absolute;
  left: 0.75rem; top: -1px;
  width: 22px; height: 3px;
  background: var(--stone);
}
.stage.open { background: var(--dusk-soft); border-color: var(--dusk); }
.stage.open::before { background: var(--dusk); }
.stage.open .range, .stage.active .range, .stage.open .tag, .stage.active .tag, .stage.open .hour small, .stage.active .hour small { color: var(--ink); }
.stage[data-tier="free"].open .tag, .stage[data-tier="free"].active .tag { color: var(--tide); }
.stage-btn {
  all: unset;
  display: grid;
  gap: 0.125rem;
  cursor: pointer;
  border-radius: 6px;
}
.stage-btn:focus-visible { outline: 2px solid var(--dusk); outline-offset: 4px; }
.stage .hour {
  position: absolute;
  top: -2.125rem; left: 0.75rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1;
  color: var(--ink);
}
.stage .hour small { font-family: var(--sans); font-size: 0.7rem; color: var(--stone); margin-left: 2px; }
.stage .name { font-size: 0.92rem; font-weight: 500; line-height: 1.2; }
.stage.open .name { color: var(--dusk); }
.stage .range { font-size: 0.74rem; color: var(--stone); }
/* Confidence: a three-bar meter and the level word on one line that never wraps; the evidence source sits beneath in stone.
   Bars fill per level (high 3, moderate to high 2.5, moderate 2, low 1). Dusk is the stages tone. */
.stage .conf {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.375rem;
  align-items: center;
  margin-top: 0.5rem;
  color: var(--dusk);
  white-space: nowrap;
}
.conf .meter { width: 14px; height: 10px; flex: 0 0 14px; fill: currentColor; }
.conf .meter rect { fill: currentColor; }
.conf.mid-high .b3hi, .conf.mid .b3hi, .conf.mid .b3lo, .conf.low .b2, .conf.low .b3hi, .conf.low .b3lo {
  fill: color-mix(in srgb, currentColor 22%, transparent);
}
.stage .conf .lvl { grid-row: 1; grid-column: 2; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.01em; line-height: 1.3; }
.stage .conf .src { grid-row: 2; grid-column: 2; font-size: 0.66rem; color: var(--stone); line-height: 1.3; }
.stage.open .conf .lvl, .stage.active .conf .lvl, .stage.open .conf .src, .stage.active .conf .src { color: var(--ink); }
/* The note opens by growing its grid row from 0fr to 1fr; padding (not margin) so a closed row is truly 0. */
.note-wrap { display: grid; grid-template-rows: 1fr; }
.note-wrap > .note { min-height: 0; overflow: hidden; margin: 0; padding: 0; font-size: 0.8rem; color: var(--ink); }
.note-wrap > .note::before { content: ""; display: block; height: 0.5rem; } /* the gap lives inside the clipped box, so closed is truly 0 */
.js .stage:not(.open) .note-wrap { grid-template-rows: 0fr; visibility: hidden; }
.stage .tag { margin-top: auto; padding-top: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.stage[data-tier="free"] .tag { color: var(--tide); }
.stage.beyond .hour, .stage.beyond .name { color: var(--stone); }
.stage.beyond .tag { font-style: italic; }

.scrubber { margin-top: 0.5rem; }
.scrubber input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  background: var(--hairline);
  border-radius: 999px;
  outline-offset: 6px;
  cursor: pointer;
}
.scrubber input::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 14px; border-radius: 999px; background: var(--dusk); border: 0; cursor: grab; }
.scrubber input::-moz-range-thumb { width: 56px; height: 14px; border-radius: 999px; background: var(--dusk); border: 0; cursor: grab; }
.scrubber input:focus-visible { outline-color: var(--dusk); }
.strip-foot { margin-top: 0.5rem; }

/* ---------- Strata (sand; on strata.html one tone per family group, app Ruling 13b) ---------- */
/* Family headers: the layers in sand, the Firsts in tide, the five families in dusk, each with a small Clay disc in its tone. */
.fam { display: flex; align-items: center; gap: 0.625rem; }
.fam-sand { --fam: var(--sand); }
.fam-tide { --fam: var(--tide); }
.fam-dusk { --fam: var(--dusk); }
.facts.families.fam-dusk dt { color: var(--dusk); display: flex; align-items: center; gap: 0.5rem; }
.disc.mini { --d: 32px; font-size: calc(var(--d) * 0.4); flex: none; margin: 0; vertical-align: middle; }
.disc .sym { width: 44%; height: 44%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.disc .sym .fill { fill: currentColor; stroke: none; }
.strata-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
@media (max-width: 720px) { .strata-grid { grid-template-columns: minmax(0, 1fr); } }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; overflow-x: clip; }
.tier { text-align: center; position: relative; }
.tier h3 { margin-top: 0.75rem; font-size: 1rem; }
.tier p { margin-top: 0.25rem; margin-inline: auto; color: var(--stone); font-size: 0.82rem; }
.tip {
  --tx: -50%;
  position: absolute;
  left: 50%; top: calc(var(--d, 88px) + 4px);
  transform: translate(var(--tx), -4px);
  width: max-content; max-width: min(180px, calc(100vw - 2 * var(--gutter)));
  background: var(--ink);
  color: var(--surface);
  font-size: 0.74rem;
  line-height: 1.35;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  opacity: 0; visibility: hidden;
  pointer-events: none;
  z-index: 3;
}
.tier:first-child .tip { --tx: 0; left: 0; }
.tier:last-child .tip { --tx: 0; left: auto; right: 0; }
.disc:hover + .tip, .disc:focus-visible + .tip, .tip.show { opacity: 1; visibility: visible; transform: translate(var(--tx), 0); }

.disc {
  --d: 88px;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: calc(var(--d) * 0.38);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  position: relative;
  margin-inline: auto;
  padding: 0;
  cursor: default;
  overflow: hidden;
  border: 2px solid transparent;
}
button.disc { cursor: pointer; }
.disc:focus-visible { outline-color: var(--tone); outline-offset: 4px; }
/* Materials: same disc, one engraved glyph, only the material changes. Flat fills and palette tokens only, nothing blended.
   Geometry is shared: an 88 px box, a 2 px border band (transparent on Glass = the clear gap), a 1 px outer rim drawn as a
   spread shadow so it sits in the same place on all three, a 2 px drop shadow so the disc rests on the page.
   Optional layers, each fading on its own so the morph crossfades:
     ::before = Clay speckle (fine feTurbulence tinted sand)      ::after = Stone striations (anisotropic feTurbulence tinted ink)
     .mat     = one inline SVG: Clay's hand-thrown rim (a wobbling path), Stone's cut facets and hairline fracture,
                Glass's refractive band (feDisplacementMap on the band only) and specular arc.
   Keep-out: nothing with a visible edge enters the central 60 % of the disc (smallest radius used is 34.75 of 50). */
/* Clay takes its family's tone (default sand, the layers); Stone is always ink on stone-soft and Glass always tide, as in the app. */
.disc { --tone: var(--sand); --tone-soft: var(--sand-soft); --tone-strong: var(--sand-strong); --rim-tone: var(--rim-clay); }
.disc.tide, .fam-tide .disc { --tone: var(--tide); --tone-soft: var(--tide-soft); --tone-strong: var(--tide-strong); --rim-tone: var(--rim-tide); }
.disc.dusk, .fam-dusk .disc { --tone: var(--dusk); --tone-soft: var(--dusk-soft); --tone-strong: var(--dusk-strong); --rim-tone: var(--rim-dusk); }
.disc { isolation: isolate; border-width: 2px; background-clip: padding-box; }
.disc::before, .disc::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}
.disc::before { background: var(--tone); filter: url(#nx-clay); }
.disc::after { background: var(--ink); filter: url(#nx-stone); }
.disc .mat {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.disc .mat g { opacity: 0; }
.disc .g-clay path { stroke: var(--rim-tone); stroke-width: 2; }
.disc .g-stone .facet { stroke: color-mix(in srgb, var(--shade) 16%, transparent); stroke-width: 0.8; }
.disc .g-stone .lit { stroke: color-mix(in srgb, var(--gleam) 95%, transparent); stroke-width: 1.4; }
.disc .g-stone .dim { stroke: color-mix(in srgb, var(--shade) 30%, transparent); stroke-width: 1.4; }
.disc .g-stone .crack { stroke: color-mix(in srgb, var(--shade) 42%, transparent); stroke-width: 0.8; }
.disc .g-stone .crack-hi { stroke: color-mix(in srgb, var(--gleam) 70%, transparent); stroke-width: 0.8; transform: translate(0.7px, 0.7px); }
.disc .g-glass .band { stroke: color-mix(in srgb, var(--tide) 32%, transparent); stroke-width: 2.5; filter: url(#nx-glass); }
.disc .g-glass .gleam { stroke: var(--gleam); stroke-width: 2.6; }
/* Clay: matte, warm, rough. Sand-soft fill, soft outer edge, a hand-thrown glaze line inside it, a shallow pressed centre,
   visible warm speckle, engraved sand numeral (1 px gleam below = deboss). */
.disc.clay {
  background-color: var(--tone-soft);
  border-color: color-mix(in srgb, var(--tone) 10%, transparent);
  color: var(--tone-strong);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--gleam) 80%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rim-tone) 55%, transparent),
              0 2px 3px color-mix(in srgb, var(--shade) 14%, transparent),
              inset 0 3px 5px color-mix(in srgb, var(--shade) 9%, transparent),
              inset 0 -1px 1px color-mix(in srgb, var(--gleam) 70%, transparent),
              inset 0 0 0 0 transparent,
              inset 0 0 0 0 transparent;
}
.disc.clay::before { opacity: 0.42; }
.disc.clay .g-clay { opacity: 1; }
/* Stone: cut mineral. Denser, cooler stone-soft fill, crisp two-shadow bevel, fine striations, an octagon of facets lit from
   the top-left, one hairline fracture in the lower right, numeral in ink. */
.disc.stone {
  background-color: var(--stone-soft);
  border-color: var(--stone-soft);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 0 0 1px var(--rim-stone),
              0 2px 3px color-mix(in srgb, var(--shade) 16%, transparent),
              inset 1px 1px 0 color-mix(in srgb, var(--gleam) 90%, transparent),
              inset -1px -1px 0 color-mix(in srgb, var(--shade) 24%, transparent),
              inset 0 0 0 0 transparent,
              inset 0 0 0 0 transparent;
}
.disc.stone::after { opacity: 0.11; }
.disc.stone .g-stone { opacity: 1; }
/* Glass: a lens. Double rim with a clear 2 px gap (the transparent border), the tide tint stepped deeper towards the rim
   with stacked inset spreads, a displaced refractive band, one bright specular arc top-left, numeral in tide. */
.disc.glass {
  background-color: var(--tide-soft);
  border-color: transparent;
  color: var(--tide-strong);
  text-shadow: none;
  box-shadow: 0 0 0 1px var(--rim-glass),
              0 2px 3px color-mix(in srgb, var(--shade) 12%, transparent),
              inset 0 0 0 1px var(--rim-glass),
              inset 0 0 0 4px color-mix(in srgb, var(--tide) 30%, transparent),
              inset 0 0 0 8px color-mix(in srgb, var(--tide) 18%, transparent),
              inset 0 0 0 0 transparent;
}
.disc.glass .g-glass { opacity: 1; }

.morph {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1rem;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 1rem 1rem;
  background: var(--sand-soft);
}
.morph .disc { --d: 64px; grid-row: span 2; }
.morph .small { color: var(--ink); }
.morph-copy { display: grid; }
.morph-copy b { font-weight: 500; }
.morph .btn { justify-self: start; }
.strata-facts { margin-top: 1.5rem; }
.strata-facts h3 + p { margin-top: 0.25rem; }
.strata-facts p + h3 { margin-top: 1rem; }

/* Rhythm strip demo */
.rhythm-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 36px; height: 20px; border-radius: 999px; border: 1px solid var(--stone); position: relative; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--stone); }
.switch input:checked + .track { background: var(--sand); border-color: var(--sand); }
.switch input:checked + .track::after { background: var(--surface); transform: translateX(16px); }
.switch input:focus-visible + .track { outline: 2px solid var(--sand); outline-offset: 3px; }
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 0.75rem; max-width: 300px; }
.tiles span, .tile-key i { display: block; aspect-ratio: 1; border: 1px solid var(--hairline); border-radius: 3px; }
.tiles .kept, .tile-key .kept { background: var(--tide); border-color: var(--tide); }
.tiles .adjusted, .tile-key .adjusted { background: var(--sand); border-color: var(--sand); }
.tiles .rested, .tile-key .rested { background: var(--sand-soft); border-color: var(--sand); }
.tiles .open, .tile-key .open { border-style: dashed; border-color: var(--stone); }
.tile-key { display: flex; gap: 0.75rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--stone); }
.tile-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.tile-key i { width: 10px; }
.rhythm #rhythm-copy { margin-top: 0.5rem; }

/* ---------- Safety (ember beside safety copy only) ---------- */
.safety-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: start; }
@media (max-width: 720px) { .safety-grid { grid-template-columns: minmax(0, 1fr); } }
.ledger { margin: 0; border-top: 1px solid var(--hairline); }
.ledger > div {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
}
.ledger dt { font-family: var(--serif); font-size: 1.35rem; line-height: 1.15; color: var(--ember); }
.ledger dd { margin: 0; font-size: 0.9rem; color: var(--stone); }
.ledger dd b { font-weight: 500; color: var(--ink); }
.stop-card {
  border: 1px solid var(--ember);
  background: var(--ember-soft);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.stop-card h3 { color: var(--ink); }
.stop-card p { margin-top: 0.5rem; color: var(--ink); }
.stop-card ul { columns: 2; column-gap: 1.5rem; margin-top: 0.5rem; font-size: 0.9rem; }
.stop-card li { break-inside: avoid; }
.stop-card ul + p { margin-top: 0.75rem; }
@media (max-width: 480px) { .stop-card ul { columns: 1; } }

/* ---------- Privacy ---------- */
.facts-line { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--hairline); }
.facts-line li { padding: 0.5rem 0; border-bottom: 1px solid var(--hairline); margin: 0; font-size: 0.95rem; color: var(--stone); max-width: var(--measure); }
.facts-line b { font-weight: 500; color: var(--ink); }

/* ---------- Pricing (sand on the Pro card) ---------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem 2rem; align-items: start; }
.price-card { border-top: 2px solid var(--hairline); padding-top: 1rem; }
/* The Pro card's fill is pulled out by its own padding so both cards' text sits on the same column edge. */
.price-card.pro { border-top-color: var(--sand); background: var(--sand-soft); padding: 1rem; border-radius: 0 0 12px 12px; }
@media (min-width: 700px) { .price-card.pro { margin-inline: -1rem; } .price-card .alts { min-height: 2.75em; } }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; min-height: 1.75rem; }
.price-card h3 { font-size: 1.2rem; line-height: 1.75rem; }
.pill { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--surface); background: var(--sand); border-radius: 999px; padding: 0.25rem 0.5rem; }
.price-card .price { font-family: var(--serif); font-size: 2.4rem; line-height: 1; margin-top: 0.5rem; }
.price-card.pro .price { color: var(--sand); }
.price-card .price small { font-family: var(--sans); font-size: 0.9rem; color: var(--stone); margin-left: 0.25rem; }
.price-card .alts { margin-top: 0.5rem; color: var(--stone); font-size: 0.9rem; }
.price-card ul { list-style: none; padding: 0; margin-top: 1rem; }
.price-card li { padding: 0.5rem 0; border-top: 1px solid var(--hairline); margin: 0; font-size: 0.92rem; }
.price-card li::before { content: "—"; color: var(--tide); margin-right: 0.5rem; }
.price-card.pro li::before { color: var(--sand); }
.price-card .foot { margin-top: 1rem; font-size: 0.78rem; color: var(--stone); }
/* M5: secondary text on the sand-soft Pro card */
.price-card.pro .price small, .price-card.pro .alts, .price-card.pro .foot { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { max-width: 44rem; border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 2rem 0.75rem 0;
  font-weight: 500;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute; right: 0.25rem; top: 0.7rem;
  color: var(--tide);
  font-size: 1.25rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 0 1rem; color: var(--stone); font-size: 0.95rem; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--hairline); padding-block: 1.75rem 2.25rem; font-size: 0.85rem; color: var(--stone); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: flex-start; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.site-foot a { color: var(--stone); }
.site-foot a:hover { color: var(--ink); }
.foot-mark { font-size: 1.25rem; }
.foot-mark .meniscus { width: 18px; height: 18px; }
.disclaimer { max-width: 60ch; margin-top: 0.75rem; font-size: 0.8rem; }
.site-foot .small { margin-top: 0.75rem; }

/* ---------- Legal pages ---------- */
.legal { padding-block: 2rem 3.5rem; max-width: 44rem; }
.legal h1 { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 2.9rem); font-weight: 400; }
.legal .meta { margin-top: 0.5rem; color: var(--stone); font-size: 0.9rem; }
.legal h2 { font-size: 1.15rem; margin-top: 1.75rem; }
.legal h2 + p, .legal h2 + ul { margin-top: 0.5rem; }
.legal p, .legal li { max-width: 68ch; font-size: 0.95rem; }
.legal ul { margin-top: 0.5rem; }

/* ---------- Motion (reduced-motion respected) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wordmark, .site-head, .site-head .wrap { transition: transform 200ms var(--ease); }
  .reveal.in { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
  .site-nav a, .site-foot a, .theme-toggle { transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
  .theme-toggle svg { transition: transform 300ms var(--ease); }
  .ring .arc { transition: stroke-dashoffset 900ms var(--ease); }
  .demo.playing .ring .arc { transition: none; }
  .ring .tick { transition: stroke 300ms ease; }
  .demo.complete .ring { animation: ring-settle 700ms var(--ease); }
  .demo.complete .phone .primary { animation: logged-dim 600ms ease both; }
  .note-wrap { transition: grid-template-rows 240ms var(--ease), visibility 240ms; }
  /* Theme switch: the toggle stamps html.theming for 250 ms so every colour eases instead of snapping. */
  html.theming, html.theming *, html.theming *::before, html.theming *::after {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, fill 200ms ease, stroke 200ms ease, box-shadow 200ms ease !important;
  }
  .disc { transition: background-color 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease), color 400ms var(--ease); }
  .disc::before, .disc::after, .disc .mat g { transition: opacity 400ms ease; }
  .tip { transition: opacity 150ms ease, transform 150ms var(--ease), visibility 150ms; }
  .switch .track, .switch .track::after { transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease); }
  .faq .a { transition: opacity 180ms ease; }
}
@keyframes note-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ring-settle { 0% { transform: scale(1); } 45% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes logged-dim { from { background-color: var(--tide); color: var(--on-tide); } to { background-color: var(--tide-soft); color: var(--tide); } }

/* ======================================================================
   Dynamic additions: scroll progress, back-to-top, lock-screen preview,
   stage explorer, rhythm scenarios, safety rails, plan comparison, FAQ filter.
   Tokens only; motion lives in the reduced-motion block at the end.
   ====================================================================== */

/* Scroll progress hairline under the header */
.progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--tide);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Back-to-top pill, shown after two screens */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--tide);
  background: var(--surface);
  color: var(--tide);
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 0 var(--hairline);
}
.to-top svg { width: 14px; height: 14px; }
.to-top path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top:hover { background: var(--tide-soft); }

/* Lock Screen preview: a small card under the CTA, never wider than 360 px (tide only) */
.lock-preview { max-width: 360px; }
.lock-screen {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 0.75rem 1rem 1rem;
  background: var(--raise);
  display: grid;
  gap: 0.5rem;
}
.lock-clock {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lock-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.lock-ring { width: 40px; height: 40px; display: block; }
.lock-ring .track { fill: none; stroke: var(--hairline); stroke-width: 1.5; }
.lock-ring .arc { fill: none; stroke: var(--tide); stroke-width: 4; }
.lock-copy { display: grid; line-height: 1.25; min-width: 0; }
.lock-app { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--stone); }
.lock-elapsed { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; color: var(--ink); }
.lock-stage { font-size: 0.74rem; color: var(--tide); font-weight: 500; overflow-wrap: anywhere; }
.lock-preview.complete .lock-stage { color: var(--ink); }
.lock-preview .cap { margin-top: 0.5rem; font-size: 0.8rem; color: var(--stone); }
/* 641–819 px: the mirror follows the demo, as wide as the phone and centred under it. */
@media (max-width: 819px) {
  .lock-preview { width: 280px; max-width: 100%; margin-inline: auto; }
  .lock-preview .cap { text-align: center; }
}
/* At phone width the Lock Screen mirror duplicates the demo directly above it. */
@media (max-width: 640px) {
  .lock-preview { display: none; }
}

/* Stage-by-hour explorer (dusk) */
.strip-marker {
  position: absolute;
  top: calc(2.25rem - 5px);
  left: 0;
  width: 11px; height: 11px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--dusk);
  box-shadow: 0 0 0 3px var(--surface);
  pointer-events: none;
  z-index: 1;
}
.stage.active { background: var(--dusk-soft); border-color: var(--dusk); }
.stage.active::before { background: var(--dusk); }
.stage.active .name { color: var(--dusk); }
.explorer {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.25rem 1rem;
  align-items: center;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.explorer-label { font-size: 0.9rem; font-weight: 500; white-space: nowrap; }
.explorer-label output { color: var(--dusk); font-family: var(--serif); font-size: 1.25rem; line-height: 1; margin-inline: 0.125rem; display: inline-block; min-width: 1.1em; text-align: center; }
.explorer input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 8px 0;
  background: var(--hairline);
  border-radius: 999px;
  outline-offset: 6px;
  cursor: pointer;
}
.explorer input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--dusk); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--dusk); cursor: grab; }
.explorer input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--dusk); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--dusk); cursor: grab; }
.explorer input:focus-visible { outline-color: var(--dusk); }
.explorer-out { grid-column: 1 / -1; font-size: 0.88rem; color: var(--ink); max-width: none; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.explorer-out .tag {
  flex: none;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  color: var(--dusk); border: 1px solid var(--dusk); border-radius: 999px; padding: 0.125rem 0.5rem;
}
.explorer-out .tag.free { color: var(--tide); border-color: var(--tide); }

/* Rhythm scenarios (sand chips) */
.chips.sand button[aria-pressed="true"] { background: var(--sand-soft); border-color: var(--sand); color: var(--ink); }
.rhythm-actions { margin-top: 0.5rem; }
.tiles span.wobble { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--sand); }

/* Safety rails: expandable rows with a small ember glyph */
.ledger .rail { cursor: pointer; }
.rail-btn {
  all: unset;
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ember);
  cursor: pointer;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.rail-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.rail-btn::after { content: "+"; font-family: var(--sans); font-size: 0.8rem; color: var(--stone); margin-left: 0.25rem; vertical-align: 0.35em; }
.rail.open .rail-btn::after { content: "–"; }
.rail-more {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--ember-soft);
  color: var(--ink);
}
.rail-more .rule { font-size: 0.85rem; }
.glyph { width: 32px; height: 32px; display: block; }
.glyph line, .glyph path, .glyph circle, .glyph rect { fill: none; stroke: var(--ember); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.glyph .g-track { stroke: var(--hairline); }
.glyph .g-dot, .glyph .g-fill { fill: var(--ember); stroke: none; }
.glyph .g-late { fill: none; }
.glyph .g-draw, .glyph .g-ring { stroke-dasharray: 1; stroke-dashoffset: 0; }
.glyph .g-ring { stroke-width: 2.4; stroke-linecap: butt; }

/* Plan comparison (sand for the Pro column) */
.compare { margin-top: 1.5rem; max-width: 52rem; }
.compare-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.compare-head h3 { font-size: 1.05rem; }
.table-wrap { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.compare-table th, .compare-table td { text-align: left; padding: 0.5rem 0.5rem 0.5rem 0; border-top: 1px solid var(--hairline); vertical-align: top; }
.compare-table thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); border-top: 0; padding-top: 0; }
.compare-table thead th.pro-col { color: var(--sand); }
.compare-table tbody th { font-weight: 500; color: var(--ink); width: 38%; }
.compare-table td { color: var(--stone); }
.compare-table td:nth-child(3) { color: var(--ink); }
.compare-table.hide-free th:nth-child(2), .compare-table.hide-free td:nth-child(2) { display: none; }
.compare-table.hide-pro th:nth-child(3), .compare-table.hide-pro td:nth-child(3) { display: none; }
.per-week { margin-top: 0.5rem; }
@media (max-width: 480px) {
  .compare-table { font-size: 0.82rem; }
  .compare-table tbody th { width: 42%; }
  .compare-table th, .compare-table td { padding-block: 0.375rem; }
}
.per-week b { font-weight: 500; color: var(--ink); }

/* FAQ filter */
.faq-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; max-width: 44rem; }
.faq-tools { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 260px; max-width: 20rem; }
.faq-tools input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.faq-tools input::placeholder { color: var(--stone); }
.faq-tools input:focus { border-color: var(--tide); }
.faq-tools #faq-count { flex: none; }
#faq-empty { margin-top: 0.75rem; }

/* Eyebrow underline: at rest it is present; motion grows it in */
.eyebrow { position: relative; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.25rem;
  width: 2rem;
  height: 2px;
  background: var(--tide);
  transform-origin: left center;
}

/* ---------- Motion for the additions (reduced-motion respected) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .progress { transition: transform 80ms linear; }
  .to-top { transition: opacity 200ms ease, transform 200ms var(--ease); }
  .to-top.entering { opacity: 0; transform: translateY(6px); }
  .lock-ring .arc { transition: stroke-dashoffset 900ms var(--ease); }
  .demo-playing .lock-ring .arc { transition: none; }
  .strip-marker { transition: transform 160ms var(--ease); }
  .stage { transition: background-color 200ms ease, border-color 200ms ease; }
  .btn:active, .plan-switch button:active, .chips button:active, .rail-btn:active, .to-top:active, .store-badge:active { transform: scale(0.97); }
  .btn, .plan-switch button, .chips button, .rail-btn, .store-badge { transition: transform 90ms ease, color 120ms ease, border-color 120ms ease, background-color 120ms ease; }
  .disc.glass:hover .g-glass .band, .disc.glass:focus-visible .g-glass .band { filter: url(#nx-glass-hover); }
  .explorer-label output.tweening { color: var(--ink); }
  .site-head .meniscus .arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: arc-fill 1600ms var(--ease) 150ms forwards; }
  .reveal .eyebrow::after { transform: scaleX(0); }
  .reveal.in .eyebrow::after { transform: scaleX(1); transition: transform 600ms var(--ease) 200ms; }
  .rail-more { animation: note-in 220ms var(--ease); }
  .rail.open .g-draw { animation: draw 700ms var(--ease) 120ms both; }
  .rail.open path.g-draw:nth-of-type(2) { animation-delay: 420ms; }
  .rail.open path.g-draw:nth-of-type(3) { animation-delay: 720ms; }
  .rail.open .g-ring { animation: draw 1400ms linear 120ms both; }
  .rail.open .g-dot { animation: appear 300ms ease both; }
  .rail.open .g-dot.d2 { animation-delay: 250ms; }
  .rail.open .g-dot.d3 { animation-delay: 500ms; }
  .rail.open .g-late { animation: appear 300ms ease 800ms both; }
  .compare-table.armed tbody tr { opacity: 0; transform: translateY(4px); }
  .compare-table.armed tbody tr.in { opacity: 1; transform: none; transition: opacity 260ms ease, transform 260ms var(--ease); }
  .tiles span { transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease; }
}
@keyframes arc-fill { to { stroke-dashoffset: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Compact phone layout for the home teasers (late in the cascade on purpose) ---------- */
@media (max-width: 640px) {
  .teaser .tier p { display: none; }
  .feature { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 0.75rem; align-items: start; }
  .feature .k { grid-row: span 2; margin: 0; font-size: 1.5rem; padding-top: 0.125rem; }
  .feature .k-ring svg { width: 1.5rem; height: 1.5rem; }
  .facts div { grid-template-columns: 6rem minmax(0, 1fr); gap: 0 0.75rem; }
  .facts.families div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}
/* The four free stages wrap (two or four across) instead of scrolling sideways, at every width. */
.teaser .strip-scroll { overflow: visible; }
.teaser .strip { flex-wrap: wrap; min-width: 0; gap: 2.75rem 0.5rem; }
.teaser .strip::before { display: none; }
.teaser .stage { flex: 1 1 160px; min-width: 0; padding-inline: 0.5rem; }
.teaser .stage .hour, .teaser .stage::before { left: 0.5rem; }
@media (max-width: 480px) {
  .phone, .demo .phone { --phone-w: 248px; border-radius: 38px; }
  .demo .cap { display: none; }
  .section { padding-block: 1.5rem; }
  .hero { padding-block: 1.5rem; }
  .teaser .more .small { display: none; }
  .facts dd { font-size: 0.875rem; }
}

/* ---------- Print (M6): everything visible and static, controls hidden, light palette ---------- */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --surface: #F4F3EE; --ink: #171B1D; --stone: #666E72; --hairline: #DDDBD3;
    --tide: #236A76; --ember: #AC5335; --on-tide: #F4F3EE; --sand: #775F31; --dusk: #585E8E;
  }
  @page { margin: 16mm; }
  .reveal, .reveal.pending, .reveal.in { opacity: 1 !important; transform: none !important; }
  .compare-table.armed tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-head { position: static; box-shadow: none; }
  .site-head.shrunk .wordmark { transform: none; }
  .progress, .to-top, .theme-toggle, .demo-controls, .scrubber, .plan-switch, .chips, .faq-tools, #faq-empty,
  .explorer input, .switch, .rhythm-actions, .morph .btn, .strip-marker, .stop-link { display: none !important; }
  .section { break-inside: avoid; }
  .strip-scroll { overflow: visible; }
  .strip { flex-wrap: wrap; min-width: 0; gap: 2.25rem 0.5rem; }
  .strip::before { display: none; }
  .stage { flex: 0 0 196px; border-top-color: var(--hairline); break-inside: avoid; }
  .js .stage .note-wrap { grid-template-rows: 1fr !important; visibility: visible !important; }
  .cv { content-visibility: visible; }
  .rail-more[hidden] { display: grid !important; }
  .rail-btn::after { display: none; }
  .tip { position: static; opacity: 1; visibility: visible; transform: none; display: block; max-width: none;
    margin: 0.25rem auto 0; padding: 0; background: transparent; color: var(--stone); }
  .disc::before, .disc::after { display: none; }
  .disc { box-shadow: none; border-color: var(--stone); }
  .table-wrap { overflow: visible; }
  .phone, .lock-screen, .lock-card { box-shadow: none; }
  .lock-preview .cap { display: block; }
  .stages-head .phone { display: block; }
  a, .site-nav a, .site-foot a, .facts-line a, .legal a, .stop-link { color: inherit; text-decoration: underline; }
  .site-nav a.active { border-bottom-color: transparent; }
}