/* OneStep landing page.
   Tokens mirror lib/core/theme/app_colors.dart: charcoal grounds, warm
   off-white text, copper as the one accent; rose only for urgent help, sage
   only for "ready"/settled meaning. Dark by design, like the app.

   The page is one day. The sun rises in the opening, stands over the
   ordinary day (Check-in), sets when things get harder (Support), is below
   the horizon for the plan and the tools, and rises again at the close.
   Landscapes are always drawn behind content, never over an app screen. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ground: #101112;
  --ground-deep: #0b0c0d;
  --surface: #1a1b1d;
  --surface-2: #222426;
  --surface-3: #2d3032;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ink: #f3efe7;
  --ink-2: #b8b3ab;
  --ink-3: #a19d95;

  --copper: #e7b18a;
  --copper-strong: #d4976b;
  --copper-light: #f2cdaf;
  --on-copper: #1b130d;
  --on-sun-accent: #7a4423;

  --rose: #ec97a2;
  --rose-soft: #2e1d22;
  --sage: #a6c3a8;

  --gutter: clamp(18px, 5vw, 64px);
  --content: 1160px;
  --measure: 32rem;
  --r-control: 999px;
  --r-card: 20px;

  --t-body: 1.0625rem;
  --t-lead: clamp(1.12rem, 1.04rem + 0.4vw, 1.3rem);
  --t-h3: clamp(1.3rem, 1.12rem + 0.7vw, 1.65rem);
  --t-h2: clamp(2.15rem, 1.35rem + 2.8vw, 3.75rem);
  --t-h1: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  --section-y: clamp(96px, 12vw, 168px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Restrained film grain for the night sections' grounds (img-src data:). */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}
html.i18n-pending body { visibility: hidden; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--copper); text-underline-offset: 0.2em; }
a:hover { color: var(--copper-light); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 6px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; left: var(--gutter); top: -100px; z-index: 50;
  padding: 10px 16px; background: var(--ink); color: var(--ground);
  border-radius: var(--r-control); text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }

/* --- Brand lockup ----------------------------------------------------------
   One geometry, in em, for every OneStep wordmark on the page: the header,
   the opening, the static hero and the close. Because the opening's
   wordmark and the header's are the same shape at different sizes, the
   opening can scale its wordmark exactly onto the header's and hand over
   there, so two logos are never seen apart. */
.lockup-row {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-weight: 700; letter-spacing: -0.035em; line-height: 1;
}
.lockup-mark { width: 1.62em; height: 1.62em; margin: 0 -0.2em 0 -0.32em; flex: none; overflow: visible; }
.lockup-mark .bar-a { fill: currentColor; }
.lockup-mark .bar-b { fill: var(--copper); }
.lockup-name > span { color: var(--copper); }

/* --- Top bar ---------------------------------------------------------------
   Fixed, so navigation, language and privacy stay reachable through the
   intro. Its ink follows what is behind it (site.js sets data-on-sun while
   the sun still covers the bar). */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
  padding: 12px var(--gutter);
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  color: var(--ink);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.topbar[data-solid] {
  background: rgba(16, 17, 18, 0.8);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.topbar[data-on-sun] { color: var(--on-copper); }
.brand {
  display: inline-flex; align-items: center; min-height: 40px;
  color: inherit; text-decoration: none; font-size: 1.15rem;
}
.brand:hover { color: inherit; }
.topbar[data-on-sun] .lockup-name > span, .topbar[data-on-sun] .lockup-mark .bar-b { color: var(--on-sun-accent); fill: var(--on-sun-accent); }
.topnav { display: flex; align-items: center; gap: 14px; }
.sitenav { display: none; list-style: none; margin: 0 6px 0 0; padding: 0; gap: 4px; }
.sitenav a {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px;
  color: inherit; opacity: 0.78; text-decoration: none; font-size: 0.9rem; font-weight: 550;
  transition: opacity 160ms var(--ease);
}
.sitenav a:hover { opacity: 1; color: inherit; }
.sitenav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 6px; height: 1.5px;
  background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease);
}
.sitenav a[aria-current] { opacity: 1; }
.sitenav a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 1180px) { .sitenav { display: flex; } }
/* Eight sections fit beside the controls from 1180 px with a little less air. */
@media (min-width: 1180px) and (max-width: 1279px) {
  .sitenav { margin-right: 0; gap: 2px; }
  .sitenav a { padding: 0 6px; }
  .sitenav a::after { left: 6px; right: 6px; }
}

.lang { display: inline-flex; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--r-control); }
.topbar[data-on-sun] .lang { border-color: rgba(27, 19, 13, 0.3); }
.lang button {
  appearance: none; border: 0; background: transparent; color: inherit; opacity: 0.8;
  font: inherit; font-size: 0.8rem; font-weight: 650; min-width: 40px; min-height: 34px;
  border-radius: var(--r-control); cursor: pointer;
}
/* The visible pill stays small; the touch area reaches 44 px tall. */
.lang button { position: relative; }
.lang button::after { content: ""; position: absolute; inset: -5px -2px; }
.lang button[aria-pressed="true"] { opacity: 1; color: var(--ground); background: var(--ink); }
.topbar[data-on-sun] .lang button[aria-pressed="true"] { color: var(--copper-light); background: var(--on-copper); }

/* Sections menu: everything the desktop bar lists, plus the rest, for any
   screen narrower than the full bar. */
.menu-toggle {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; min-width: 40px; padding: 0 14px 0 12px; border-radius: var(--r-control);
  border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: inherit;
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.menu-toggle[hidden] { display: none; }
.menu-toggle:hover { border-color: var(--copper); }
.topbar[data-on-sun] .menu-toggle { border-color: rgba(27, 19, 13, 0.3); }
.menu-icon { position: relative; width: 14px; height: 10px; flex: none; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
.menu-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
.menu-toggle[aria-expanded="true"] .menu-icon { border-color: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: rotate(45deg); box-shadow: none; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: currentColor; transform: rotate(-45deg); }
@media (min-width: 1180px) { .menu-toggle { display: none !important; } }
.sitemenu {
  position: absolute; top: calc(100% - 4px); right: var(--gutter); z-index: 31;
  width: min(300px, calc(100vw - 2 * var(--gutter)));
  padding: 8px; border-radius: 18px; border: 1px solid var(--line-strong);
  background: rgba(22, 23, 24, 0.97); color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.sitemenu[hidden] { display: none; }
.sitemenu ul { list-style: none; margin: 0; padding: 0; display: grid; }
.sitemenu a {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px;
  border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.97rem;
}
.sitemenu a:hover { background: var(--surface-2); color: var(--ink); }
.sitemenu a[aria-current] { color: var(--ink); }
.sitemenu a[aria-current]::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.sitemenu li:last-child { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }

/* --- Shared bits -------------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 18px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--copper-light);
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: 0.6; }
.status-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong);
  background: rgba(16, 17, 18, 0.55); color: var(--ink); font-weight: 650; font-size: 0.98rem;
}
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); }
.text-link { font-weight: 650; }
.button-quiet {
  appearance: none; font: inherit; font-weight: 650; font-size: 0.92rem; color: var(--ink);
  min-height: 44px; padding: 0 18px; border-radius: var(--r-control);
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
}
.button-quiet:hover { border-color: var(--copper); }
.fineprint { font-size: 0.86rem; color: var(--ink-3); line-height: 1.5; }
.feature-lede { margin-top: 20px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; max-width: 31rem; }

/* --- 1. Intro: inside the sun --------------------------------------------
   .intro is ~2.6 viewports tall; .intro-stage sticks for that distance and
   site.js maps the scroll position onto the scene (0 = inside the sun,
   1 = final hero). Without JS, or with Reduce Motion, the stage is one
   screen showing the final composition, with the brand above the title. */
.intro { position: relative; height: 100svh; min-height: 620px; }
html.intro-live .intro { height: 260svh; }
.intro-stage {
  position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden;
  background:
    radial-gradient(40% 38% at 60% 52%, rgba(242, 205, 175, 0.55), rgba(231, 177, 138, 0.12) 55%, transparent 75%),
    linear-gradient(#0b0c0d, #16120f 66%, var(--ground) 66%);
}
html.intro-live .intro-stage, html.intro-drawn .intro-stage { background: var(--ground); }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The opening wordmark: two inks of one lockup, masked by site.js to their
   side of the sun's edge. The sun ink is in the flow and sizes the box; the
   sky ink lies exactly over it. */
.intro-lockup {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: none;
  font-size: clamp(3rem, 1.7rem + 6.2vw, 7.6rem);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  pointer-events: none;
}
html.intro-live .intro-lockup { display: block; }
.lockup-ink { display: flex; }
.lockup-ink--sun { color: var(--on-copper); }
.lockup-ink--sun .lockup-name > span { color: var(--on-sun-accent); }
.lockup-ink--sun .lockup-mark .bar-b { fill: var(--on-sun-accent); }
.lockup-ink--sky { position: absolute; inset: 0; color: var(--ink); }

.intro-cue {
  position: absolute; left: 50%; bottom: max(26px, env(safe-area-inset-bottom, 0px));
  z-index: 2; transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 8px;
  color: var(--on-copper); font-size: 0.92rem; font-weight: 650; text-align: center; white-space: nowrap;
}
html.intro-live .intro-cue { display: flex; }
.intro-cue-line { width: 1.5px; height: 34px; background: currentColor; opacity: 0.6; transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.intro-skip { color: inherit; font-size: 0.86rem; opacity: 0.85; padding: 12px 14px; min-height: 44px; display: inline-flex; align-items: center; }
.intro-skip:hover { color: inherit; opacity: 1; }
.after-intro { height: 0; outline: none; }

.intro-copy {
  position: absolute; z-index: 3;
  left: var(--gutter); top: 50%; transform: translateY(-46%);
  width: min(36rem, 50vw);
  will-change: opacity, translate;
}
.intro-copy h1 { font-size: var(--t-h1); font-weight: 640; letter-spacing: -0.035em; line-height: 1.02; }
.intro-copy .lede { margin-top: 22px; max-width: var(--measure); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.intro-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.intro-note { color: var(--ink-3); font-size: 0.93rem; max-width: 19rem; }
/* The static composition carries the brand itself. */
.hero-brand { display: block; margin-bottom: clamp(20px, 3vh, 34px); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); color: var(--ink); }
html.intro-live .hero-brand { display: none; }

/* The phone settles where it stays: site.js only fades and scales it in
   (no vertical travel), and the scene lines are drawn behind it. */
.intro .intro-clip {
  position: absolute; z-index: 2; margin: 0;
  right: calc(var(--gutter) + 3vw); left: auto; top: 50%;
  width: min(310px, 24vw, calc((100svh - 160px) * 0.479));
  max-width: none;
  transform: translateY(-48%);
  will-change: opacity, scale;
}

@media (max-width: 899px) {
  .intro-copy { left: var(--gutter); right: var(--gutter); width: auto; top: calc(84px + env(safe-area-inset-top, 0px)); transform: none; }
  .intro-copy h1 { font-size: clamp(2.2rem, 9.2vw, 3.4rem); }
  .intro-copy .lede { margin-top: 14px; font-size: 1.04rem; }
  .intro-actions { margin-top: 18px; gap: 10px 16px; }
  .intro-note { font-size: 0.86rem; }
  .hero-brand { font-size: 1.5rem; margin-bottom: 16px; }
  /* The phone stands in the landscape at the bottom of the screen. */
  .intro .intro-clip { left: 50%; right: auto; top: auto; bottom: 0; width: min(56vw, 240px); transform: translate(-50%, 44%); }
  .intro-lockup { font-size: clamp(2.6rem, 13.5vw, 4.4rem); }
}
@media (min-width: 600px) and (max-width: 899px) {
  .intro .intro-clip { width: min(42vw, 330px); transform: translate(-50%, 36%); }
  .intro-copy { max-width: 36rem; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .intro .intro-clip { width: min(46vw, 200px); transform: translate(-50%, 56%); }
  .intro-note { display: none; }
  .hero-brand { display: none; }
}

/* --- Phones: our own device frame around bare screen recordings ----------
   Geometry matches scripts/render-device-frames.mjs (the tool stills): a
   1206 x 2622 screen, 34 px bezel, 14 px titanium rim, 176 px screen radius,
   so every phone on the page has one shape. The screen is opaque and sits
   above everything around it: no mask, gradient or scene line ever crosses
   it. Percentages are of the phone's own width (left/right) and height
   (top/bottom). Phones never move with the scroll. */
.stage { margin: 0; position: relative; display: grid; justify-items: center; gap: 14px; width: 100%; }
.stage figcaption { position: relative; z-index: 1; font-size: 0.88rem; color: var(--ink-3); text-align: center; max-width: 22rem; }
.phone {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 1302 / 2718;
  border-radius: 17.2% / 8.24%;
  background: linear-gradient(135deg, #5d5a55 0%, #2f2d2b 18%, #45423e 50%, #2a2826 82%, #56534e 100%);
  box-shadow: 0 42px 70px -34px rgba(0, 0, 0, 0.8), 0 18px 34px -20px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.phone::before {
  content: ""; position: absolute; inset: 0.515% 1.075%; border-radius: 16.48% / 7.81%;
  background: #050505; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.phone::after {
  /* The side button. */
  content: ""; position: absolute; right: -0.55%; top: 28%; width: 0.8%; height: 11%; border-radius: 0 4px 4px 0;
  background: linear-gradient(270deg, #3a3835, #6a6660);
}
.phone-screen {
  position: absolute; inset: 1.766% 3.687%; border-radius: 14.59% / 6.71%;
  overflow: hidden; isolation: isolate; transform: translateZ(0); background: #0f0f0f;
}
.phone-island {
  position: absolute; z-index: 3; left: 50%; top: 3.311%; width: 28.88%; height: 4.047%;
  transform: translateX(-50%); border-radius: 999px; background: #000;
}
.clip-media { position: absolute; inset: 0; }
.clip-media[hidden] { display: none; }
.clip-media video, .clip-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: opacity 150ms var(--ease);
}
.clip-poster { z-index: 1; }
/* Until the manifest has said which version each slot shows, keep posters
   back so the previous version's frame never flashes up first. */
.js:not([data-slots-ready]) .clip-poster { opacity: 0; }
.clip-media.is-live .clip-poster { opacity: 0; }
/* Moving within a recording, or to another one: a short dip to the
   screen's own background, never two interfaces over each other. */
.clip-media.is-dipping video, .clip-media.is-dipping .clip-poster { opacity: 0; }
.phone--still .phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Older footage that already contains a phone (a version restored in the
   Studio): no second frame; the feather only touches its studio backdrop. */
.phone[data-frame="footage"] { aspect-ratio: 720 / 1280; background: none; box-shadow: none; border-radius: 0; }
.phone[data-frame="footage"]::before, .phone[data-frame="footage"]::after, .phone[data-frame="footage"] .phone-island { display: none; }
.phone[data-frame="footage"] .phone-screen {
  inset: 0; border-radius: 0; background: transparent;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}

/* A failed recording keeps its poster; the message sits under the phone. */
.clip-fail {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  font-size: 0.9rem; color: var(--ink-2);
}
.clip-fail[hidden] { display: none; }
.clip-retry {
  font: inherit; font-weight: 650; min-height: 40px; padding: 0 16px; border-radius: var(--r-control);
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
}
.clip-retry:hover { border-color: var(--copper); }

/* The landscape behind a phone (site.js draws one per data-scene: morning,
   night, water, hold, weeks). Decoration only: it sits under the phone
   (z-index 0), fades out before it reaches the text column, and only its
   layers move with the scroll. */
.scene {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 190%; height: 122%; transform: translate(-50%, -50%);
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
}
.scene svg { width: 100%; height: 100%; max-width: none; }
/* Scenes and their glow reach past the column on purpose; clip them at the
   page edge (overflow-x: clip keeps the intro's sticky stage working,
   unlike hidden). */
main { overflow-x: clip; }
[data-par] { will-change: transform; }

/* --- Devices: framed still screenshots (transparent PNG/WebP) ----------- */
.device { margin: 0; width: 100%; max-width: 300px; justify-self: center; }
.device img { width: 100%; height: auto; }

/* --- Tabs over one phone (Insights) --------------------------------------- */
.stage-wrap { display: grid; justify-items: center; gap: 18px; width: 100%; }
.stage-tabs {
  position: relative; z-index: 2;
  display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-control);
  background: var(--surface); border: 1px solid var(--line);
}
.stage-tabs button {
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.92rem; font-weight: 600;
  min-height: 40px; padding: 0 18px; border-radius: var(--r-control); cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.stage-tabs button:hover { color: var(--ink); }
.stage-tabs button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.stage-tabs button:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }

/* --- Motion control (top bar) ---------------------------------------------- */
.motion-toggle {
  appearance: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-control);
  border: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: inherit;
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: var(--copper); }
.topbar[data-on-sun] .motion-toggle { border-color: rgba(27, 19, 13, 0.3); }
.motion-icon { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.9; }
/* On: a small sun with its horizon; off: two bars (paused). */
.motion-icon::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--copper); transition: transform 160ms var(--ease); }
.motion-toggle[aria-pressed="false"] .motion-icon::before {
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 0; background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.motion-state { min-width: 2.2em; text-align: left; color: var(--copper-light); }
.topbar[data-on-sun] .motion-state { color: var(--on-sun-accent); }
.motion-toggle[aria-pressed="false"] .motion-state { color: inherit; opacity: 0.75; }
@media (max-width: 560px) {
  .topnav { gap: 8px; }
  .motion-toggle { padding: 0 10px 0 8px; gap: 6px; font-size: 0.8rem; }
  .motion-state { min-width: 0; }
  .menu-toggle { padding: 0; width: 40px; justify-content: center; }
  .menu-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brand { font-size: 1.05rem; }
}
@media (max-width: 440px) {
  .motion-name { display: none; }
}

/* --- Feature sections: shared --------------------------------------------- */
.feature { padding: var(--section-y) var(--gutter); position: relative; }
.feature-inner {
  max-width: var(--content); margin: 0 auto;
  display: grid; gap: clamp(28px, 6vw, 96px); align-items: center;
}
.feature-copy { max-width: 36rem; }
.feature-copy h2, .what-head h2, .map-head h2, .tools-head h2, .support-head h2, .carekit-head h2, .privacy-head h2, .join h2, .faq h2 {
  font-size: var(--t-h2); letter-spacing: -0.032em; line-height: 1.04;
}
.feature-copy > p:not(.eyebrow):not(.fineprint):not(.feature-lede) { margin-top: 14px; color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; }
.detail { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 10px; }
.detail summary {
  cursor: pointer; font-weight: 650; color: var(--ink); list-style: none;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
}
.detail summary::-webkit-details-marker { display: none; }
.detail summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(-45deg); transition: transform 200ms var(--ease); }
.detail[open] summary::before { transform: rotate(45deg); }
.detail p { margin-top: 4px; color: var(--ink-2); font-size: 0.98rem; }

/* Phones keep one size per layout and never move with the scroll; only
   the landscape behind them does. */
.feature .phone, .grounding .phone, .carekit .phone, .support .phone { width: min(310px, 74vw, calc((100svh - 170px) * 0.479)); min-width: 220px; }
@media (max-width: 899px) {
  .feature-inner { justify-items: center; grid-template-columns: minmax(0, 1fr); }
  .feature-copy { justify-self: stretch; max-width: 40rem; margin: 0 auto; }
  .feature .phone, .grounding .phone, .carekit .phone, .support .phone { width: min(280px, 68vw); }
}

/* --- 1b. What is OneStep? ---------------------------------------------------
   The first plain answer after the opening. The opening's horizon carries
   on behind it (.what-sky, parallax only); three moments sit on one rising
   path; one anchored phone shows the chosen moment's real screen.
   Pre-animation states apply only under .what.is-live (script + Motion on +
   no Reduce Motion), so without them every element is in its finished
   place: the static composition is the default, not a fallback. */
.what { position: relative; padding: clamp(72px, 9vw, 128px) var(--gutter) clamp(64px, 8vw, 112px); overflow: clip; }
/* The opening's horizon carried on: full-bleed lines at the path's own
   level, behind the moments' drawings and above their words, so no line
   ever crosses text. Only these layers move with the scroll. */
.what-sky {
  position: absolute; z-index: 0; left: 50%; width: 100vw; transform: translateX(-50%); top: 0; height: 150px; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.what-strata { position: absolute; inset: 0; width: 100%; height: 100%; }
.what-inner { position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; }
.what-head h2 { max-width: 17ch; }
.what-lede { margin-top: 22px; max-width: 38rem; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.55; }
.what-choice { margin-top: 14px; max-width: 38rem; color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.5; }

.what-stage { position: relative; display: grid; gap: 28px; margin-top: clamp(36px, 5vw, 64px); }
.what-land { position: relative; }
.what-path { display: none; }
.what-path-base { fill: none; stroke: rgba(243, 239, 231, 0.2); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.what-path-lit { fill: none; stroke: var(--copper-light); stroke-opacity: 0.75; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.what-glow {
  position: absolute; z-index: 0; top: 56px; left: var(--gx, 16.67%); width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(242, 205, 175, 0.16), rgba(231, 177, 138, 0.05) 60%, transparent);
  transition: left 620ms var(--ease);
}

.what-moments { position: relative; z-index: 1; display: grid; gap: 10px; }
.what-m {
  appearance: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer;
  display: grid; gap: 12px; padding: 14px 16px 18px; border-radius: var(--r-card);
  border: 1px solid transparent; background: transparent;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), transform 160ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.what-m:hover { border-color: var(--line-strong); }
.what-m:active { transform: scale(0.985); }
.what-m:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.what-m[aria-selected="true"] { border-color: rgba(231, 177, 138, 0.5); background: rgba(31, 29, 27, 0.72); }
.what-art { display: block; height: 112px; }
.what-art svg { height: 112px; width: 160px; overflow: visible; }
.what-m-text { display: grid; gap: 4px; }
.what-m-when { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.what-m[aria-selected="true"] .what-m-when { color: var(--copper-light); }
.what-m-n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; letter-spacing: 0;
  border: 1.5px solid currentColor; font-size: 0.72rem; font-variant-numeric: tabular-nums;
}
.what-m[aria-selected="true"] .what-m-n { background: var(--copper-light); border-color: var(--copper-light); color: var(--on-copper); }
.what-m-name { font-size: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; }
.what-m-line { font-size: 0.98rem; line-height: 1.5; color: var(--ink-2); }

/* The art: line drawings in the page's own inks. Inactive moments keep
   their drawing in its finished state, a little quieter; text never dims. */
.what-art svg * { vector-effect: non-scaling-stroke; }
.wa-line { fill: none; stroke: rgba(243, 239, 231, 0.22); stroke-width: 1.4; stroke-linecap: round; }
.wa-notches path { fill: none; stroke: rgba(243, 239, 231, 0.32); stroke-width: 2; stroke-linecap: round; }
.wa-notches .wa-chosen { stroke: var(--copper-light); stroke-width: 2.4; }
.wa-sun { fill: var(--copper-light); }
.wa-ring { fill: none; stroke: var(--copper-light); stroke-opacity: 0.45; stroke-width: 1.4; }
.wa-bar { fill: rgba(243, 239, 231, 0.14); stroke: rgba(243, 239, 231, 0.3); stroke-width: 1.2; }
.wa-bar--3 { fill: var(--copper); stroke: var(--copper-light); }
.wa-kit { fill: none; stroke: rgba(243, 239, 231, 0.42); stroke-width: 1.8; stroke-linecap: round; }
.wa-item--1 { fill: var(--copper-light); }
.wa-item--2 { fill: rgba(243, 239, 231, 0.2); stroke: rgba(243, 239, 231, 0.45); stroke-width: 1.2; }
.wa-item--3 { fill: var(--copper); fill-opacity: 0.75; stroke: var(--copper-light); stroke-width: 1.2; }
.what-art svg { opacity: 0.62; transition: opacity 260ms var(--ease); }
.what-m[aria-selected="true"] .what-art svg, .what-m:hover .what-art svg { opacity: 1; }

/* Each moment's one movement, played once when it is revealed or chosen. */
.wa-settle, .wa-ring, .wa-bar, .wa-step-sun, .wa-item, .wa-kit { transform-box: fill-box; transform-origin: center; }
.wa-bar { transform-origin: 50% 100%; }
.what.is-live .what-m:not(.is-on) .wa-settle { transform: translate(-52px, -34px) scale(0.6); opacity: 0; }
.what.is-live .what-m:not(.is-on) .wa-ring { transform: scale(0.4); opacity: 0; }
.what.is-live .what-m:not(.is-on) .wa-chosen { stroke: rgba(243, 239, 231, 0.32); }
.what.is-live .what-m:not(.is-on) .wa-bar { transform: scaleY(0.04); }
.what.is-live .what-m:not(.is-on) .wa-step-sun { transform: translateY(14px); opacity: 0; }
.what.is-live .what-m:not(.is-on) .wa-kit { opacity: 0.3; }
.what.is-live .what-m:not(.is-on) .wa-item--1 { transform: translate(-30px, -50px); opacity: 0; }
.what.is-live .what-m:not(.is-on) .wa-item--2 { transform: translate(8px, -64px) rotate(14deg); opacity: 0; }
.what.is-live .what-m:not(.is-on) .wa-item--3 { transform: translate(36px, -48px) rotate(-12deg); opacity: 0; }
.what.is-live .what-m.is-on .wa-settle { transition: transform 900ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 300ms var(--ease); }
.what.is-live .what-m.is-on .wa-ring { transition: transform 600ms var(--ease) 620ms, opacity 400ms var(--ease) 620ms; }
.what.is-live .what-m.is-on .wa-chosen { transition: stroke 300ms var(--ease) 700ms; }
.what.is-live .what-m.is-on .wa-bar { transition: transform 560ms cubic-bezier(0.3, 1.25, 0.6, 1); }
.what.is-live .what-m.is-on .wa-bar--2 { transition-delay: 170ms; }
.what.is-live .what-m.is-on .wa-bar--3 { transition-delay: 340ms; }
.what.is-live .what-m.is-on .wa-step-sun { transition: transform 600ms var(--ease) 760ms, opacity 400ms var(--ease) 760ms; }
.what.is-live .what-m.is-on .wa-kit { transition: opacity 500ms var(--ease); }
.what.is-live .what-m.is-on .wa-item { transition: transform 700ms cubic-bezier(0.3, 1.2, 0.6, 1), opacity 300ms var(--ease); }
.what.is-live .what-m.is-on .wa-item--2 { transition-delay: 160ms; }
.what.is-live .what-m.is-on .wa-item--3 { transition-delay: 320ms; }

.what-detail { max-width: 40rem; outline: none; }
.what-d[hidden] { display: none; }
.what-d p { color: var(--ink-2); font-size: 1.04rem; line-height: 1.55; }
html.js .what-d:not([hidden]) { animation: panel-in 240ms var(--ease) both; }
.what-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; }
.what-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--copper-light); text-underline-offset: 4px; }
.what-detail:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 6px; border-radius: 6px; }

.what-preview { margin: 0; display: grid; justify-items: center; gap: 14px; }
.what-preview .phone { width: min(230px, 60vw); }
.what-preview figcaption { font-size: 0.84rem; color: var(--ink-3); text-align: center; max-width: 17rem; }
.what-shot { opacity: 0; transition: opacity 150ms var(--ease); }
.what-shot.is-active { opacity: 1; transition-delay: 150ms; }
.what-not {
  margin: 0; max-width: 40rem; padding: 2px 0 2px 16px;
  border-left: 2px solid rgba(231, 177, 138, 0.5); color: var(--ink-2); font-size: 0.98rem; line-height: 1.55;
}

/* Phones and tablets: the moments read top to bottom on a vertical path
   (each with its own ground line); the chosen one's detail follows right
   under them, then its screen. */
@media (max-width: 959px) {
  .what-moments::before {
    content: ""; position: absolute; left: 52px; top: 40px; bottom: 40px; width: 0;
    border-left: 1.5px dashed rgba(243, 239, 231, 0.18);
  }
  .what-m { grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 12px; }
  .what-art { height: 76px; position: relative; z-index: 1; }
  .what-art svg { height: 76px; width: 104px; }
  .what-glow { display: none; }
  .what-sky { display: none; }
  .what-m[aria-selected="true"] { background: rgba(31, 29, 27, 0.92); }
}
@media (min-width: 600px) and (max-width: 959px) {
  .what-stage { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 32px; }
  .what-land, .what-detail, .what-not { grid-column: 1; }
  .what-preview { grid-column: 2; grid-row: 1 / span 3; }
  .what-preview .phone { width: min(220px, 30vw); }
}

/* Desktop: the three moments across one landscape, sitting on the path;
   the phone stands at the path's end, anchored. */
@media (min-width: 960px) {
  .what-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); column-gap: 64px; align-items: end; }
  .what-head .eyebrow, .what-head h2 { grid-column: 1; }
  .what-lede { grid-column: 1; }
  .what-choice { grid-column: 2; grid-row: 2 / span 2; align-self: end; margin: 0 0 4px; padding-left: 18px; border-left: 2px solid var(--copper); }
  .what-stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 5vw, 80px); row-gap: 24px; align-items: start; }
  .what-not { grid-column: 1; grid-row: 3; align-self: end; margin-left: 16px; }
  .what-land { grid-column: 1; grid-row: 1; padding-top: 24px; }
  .what-detail { grid-column: 1; grid-row: 2; padding-left: 16px; }
  .what-preview { grid-column: 2; grid-row: 1 / span 3; }
  .what-preview .phone { width: min(250px, calc((100svh - 240px) * 0.479)); }
  .what-path { display: block; position: absolute; z-index: 0; left: -24px; right: calc(-1 * clamp(40px, 5vw, 80px)); top: 38px; height: 112px; width: auto; overflow: visible; }
  .what-moments { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .what-m { align-content: start; }
  .what-art { display: flex; justify-content: center; }
  .wa-line { display: none; }
}

/* --- 2. The product map ------------------------------------------------------
   One landscape across the full width, one path, four places; below it the
   chosen place's words on the left, its real screen in the middle tucked
   into the bottom of the landscape, and the way on to the next place on the
   right. Narrow screens: the places become a set of numbered tabs and the
   screen follows them. Without JavaScript every panel shows, in order. */
.map { position: relative; padding: var(--section-y) var(--gutter) calc(var(--section-y) * 0.75); }
.map-inner { max-width: var(--content); margin: 0 auto; }
.map-head { display: grid; gap: 18px 64px; align-items: end; }
.map-head h2 { max-width: 15ch; }
.map-head-side p { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; max-width: 26rem; }
.map-head-side .map-hint { margin-top: 12px; font-size: 0.92rem; color: var(--ink-3); display: flex; align-items: center; gap: 10px; }
.map-hint::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 0 4px rgba(242, 205, 175, 0.16); }
html:not(.js) .map-hint { display: none; }
@media (min-width: 900px) { .map-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }

.map-land { position: relative; margin-top: clamp(36px, 5vw, 64px); aspect-ratio: 1000 / 300; width: 100%; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-path { fill: none; stroke: rgba(243, 239, 231, 0.22); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.map-path-lit { fill: none; stroke: url(#map-path-grad); stroke-width: 2.8; stroke-linecap: round; }
.map-link { fill: none; stroke: var(--copper-light); stroke-opacity: 0.6; stroke-width: 1.4; stroke-linecap: round; }
html:not(.js) .map-path-lit, html:not(.js) .map-link, html:not(.js) .map-marker, html:not(.js) .map-ring { display: none; }
.map-dot { fill: var(--ground); stroke: var(--ink-3); stroke-width: 2; transition: stroke 200ms var(--ease), fill 200ms var(--ease); }
.map-dot.is-reached { stroke: var(--copper); }
.map-dot.is-active { fill: var(--copper-light); stroke: var(--copper-light); }
.map-marker-core { fill: var(--copper-light); }
.map-ring { fill: none; stroke: var(--copper-light); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map-ring.is-pulsing { animation: ring 900ms var(--ease) 1; }
@keyframes ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }

.map-nodes { position: absolute; inset: 0; }
.map-node {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, calc(-100% - 14px));
  display: grid; justify-items: center; gap: 2px; text-align: center;
  min-width: 44px; min-height: 44px; padding: 6px 12px 7px; border-radius: 12px;
  appearance: none; border: 1px solid var(--line); background: rgba(16, 17, 18, 0.82); color: var(--ink-2);
  font: inherit; cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.map-node--1 { --x: 6%; --y: 79.33%; transform: translate(-22px, calc(-100% - 14px)); justify-items: start; text-align: left; }
.map-node--2 { --x: 33.6%; --y: 63.33%; }
.map-node--3 { --x: 66.4%; --y: 72%; }
.map-node--4 { --x: 94%; --y: 56%; transform: translate(calc(-100% + 22px), calc(-100% - 14px)); justify-items: end; text-align: right; }
/* The hit area reaches down over the dot. */
.map-node::after { content: ""; position: absolute; left: 50%; bottom: -36px; width: 44px; height: 40px; transform: translateX(-50%); }
.map-node--1::after { left: 22px; }
.map-node--4::after { left: auto; right: 0; transform: none; }
.map-num { display: none; }
.map-label { display: grid; gap: 1px; }
.map-when { font-size: 0.76rem; color: var(--ink-3); white-space: nowrap; }
.map-name { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.015em; color: inherit; white-space: nowrap; }
.map-node:hover { color: var(--ink); border-color: var(--line-strong); }
.map-node[aria-selected="true"] { color: var(--ink); background: #1f1d1b; border-color: rgba(231, 177, 138, 0.55); }
.map-node[aria-selected="true"] .map-when { color: var(--copper-light); }
.map-node:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
html:not(.js) .map-nodes { display: none; }

.map-body { position: relative; display: grid; gap: 28px; }
.map-panels { display: grid; gap: 28px; }
.map-panel { max-width: 30rem; outline: none; }
.map-panel[hidden] { display: none; }
html.js .map-panel:not([hidden]) { animation: panel-in 240ms var(--ease) both; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
.map-kicker { display: flex; align-items: baseline; gap: 12px; color: var(--copper-light); font-size: 0.86rem; font-weight: 650; }
.map-count { font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 600; }
html:not(.js) .map-count { display: none; }
.map-panel h3 { margin-top: 8px; font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.3rem); }
.map-panel > p:not(.map-kicker) { margin-top: 12px; color: var(--ink-2); font-size: 1.06rem; line-height: 1.55; }
.map-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.map-points li { position: relative; padding: 9px 0 9px 22px; color: var(--ink); font-size: 0.97rem; border-bottom: 1px solid var(--line); }
.map-points li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--copper); }
.map-panel > p.map-benefit { margin-top: 12px; color: var(--ink); font-size: clamp(1.12rem, 1.04rem + 0.35vw, 1.28rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.map-panel > p.map-benefit + p { margin-top: 8px; }
.map-panel > p.map-detail { margin-top: 14px; padding: 2px 0 2px 14px; border-left: 2px solid rgba(231, 177, 138, 0.5); color: var(--ink-3); font-size: 0.95rem; line-height: 1.5; }
.map-more {
  display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; margin-top: 20px; min-height: 48px; padding: 6px 44px 6px 16px; position: relative;
  border-radius: 14px; border: 1px solid rgba(231, 177, 138, 0.45); color: var(--ink); text-decoration: none; font-weight: 650;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.map-more:hover { color: var(--ink); border-color: var(--copper); background: rgba(231, 177, 138, 0.06); }
.map-more-k { font-size: 0.82rem; font-weight: 600; color: var(--ink-3); }
.map-more::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg); }
.eyebrow-n { font-variant-numeric: tabular-nums; color: var(--ink-3); letter-spacing: 0.08em; margin-right: 2px; }

.map-preview { margin: 0; position: relative; display: grid; justify-items: center; gap: 14px; }
.map-preview .phone { width: min(260px, 64vw); }
.map-preview figcaption { font-size: 0.84rem; color: var(--ink-3); text-align: center; max-width: 17rem; }
.map-shot { opacity: 0; transition: opacity 150ms var(--ease); }
.map-shot.is-active { opacity: 1; transition-delay: 150ms; }
html:not(.js) .map-shot:first-child { opacity: 1; }

.map-step { display: flex; }
html:not(.js) .map-step { display: none; }
.map-next {
  appearance: none; display: grid; gap: 2px; text-align: left; min-height: 56px; padding: 10px 52px 10px 18px; position: relative;
  border-radius: 16px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.map-next:hover { border-color: var(--copper); background: rgba(231, 177, 138, 0.06); }
.map-next::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--copper); border-top: 2px solid var(--copper); transform: rotate(45deg); transition: transform 200ms var(--ease); }
.map-next:hover::after { transform: translateX(3px) rotate(45deg); }
.map-next-k { font-size: 0.78rem; color: var(--ink-3); font-weight: 600; }
.map-next-name { font-weight: 650; }

@media (min-width: 960px) {
  .map-body {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 0 clamp(32px, 4.5vw, 72px);
    /* The phone tucks into the bottom of the landscape (site.js draws the
       line from the chosen place down to its top edge). */
    margin-top: calc(min(var(--content), 100vw - 2 * var(--gutter)) * -0.042);
  }
  .map-panels { padding-top: clamp(56px, 6vw, 88px); }
  .map-step { padding-top: clamp(56px, 6vw, 88px); justify-content: flex-end; }
  .map-preview .phone { width: min(260px, calc((100svh - 220px) * 0.479)); }
}
@media (max-width: 959px) {
  .map-land { aspect-ratio: auto; }
  .map-svg { position: relative; inset: auto; height: auto; aspect-ratio: 1000 / 300; }
  .map-link { display: none; }
  html.js .map-nodes { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
  .map-node, .map-node--1, .map-node--4 {
    position: relative; left: auto; top: auto; transform: none; justify-items: start; text-align: left;
    grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; min-height: 58px; padding: 8px 10px;
    background: var(--surface); border-color: var(--line);
  }
  .map-node::after { display: none; }
  .map-num {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    border: 1.5px solid var(--ink-3); font-size: 0.8rem; font-weight: 700; color: var(--ink-2);
  }
  .map-node[aria-selected="true"] .map-num { background: var(--copper-light); border-color: var(--copper-light); color: var(--on-copper); }
  .map-name { white-space: normal; font-size: 0.95rem; line-height: 1.2; }
  .map-when { white-space: normal; line-height: 1.25; }
  .map-body { margin-top: 24px; justify-items: center; }
  /* The chosen place's words come straight after the places, so a tap
     changes what is right under it; its screen follows. */
  .map-panels { order: -1; }
  .map-panels, .map-step { width: 100%; max-width: 34rem; }
  .map-preview .phone { width: min(220px, 56vw); }
}
@media (max-width: 599px) {
  html.js .map-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 3. Check-in: the phone on the left, the steps as one timeline -------- */
.feature--checkin .feature-copy h2 { max-width: 13ch; }
.chapters { position: relative; margin-top: 30px; display: grid; }
.ch {
  position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: center;
  width: 100%; min-height: 52px; padding: 10px 8px 10px 0; border-radius: 12px;
  appearance: none; border: 0; background: transparent; color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer;
  transition: color 160ms var(--ease);
}
/* The rail joins the steps; it fills, step by step, as each one plays. */
.ch::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: var(--line-strong); }
.ch:first-child::before { top: 50%; }
/* The rail runs to "Change one answer"; if the recording on the page has no
   such part (an older version restored in the Studio), it ends at the result. */
.ch--change::before, .ch--result:has(+ .ch--change[hidden])::before { bottom: 50%; }
.ch--task::before { display: none; }
.ch:hover { color: var(--ink); }
.ch[aria-selected="true"] { color: var(--ink); }
.ch:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.ch-num {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ink-3); background: var(--ground);
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-2);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.ch[aria-selected="true"] .ch-num { border-color: var(--copper); color: var(--copper-light); box-shadow: 0 0 0 5px rgba(231, 177, 138, 0.12); }
.ch--result .ch-num::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.ch--change .ch-num::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; }
.ch--task { margin-top: 18px; padding: 14px 16px 14px 12px; grid-template-columns: 20px 1fr; border: 1px solid var(--line); background: rgba(26, 27, 29, 0.6); }
.ch--task[aria-selected="true"] { border-color: rgba(231, 177, 138, 0.45); }
.ch--task .ch-num { width: 20px; height: 20px; border: 0; background: none; }
.ch--task .ch-num::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }
.ch--scan { margin-top: 10px; }
.ch--scan .ch-num::before { background: none; box-shadow: inset 0 0 0 2px var(--copper); }
.ch-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 600; font-size: 1.02rem; }
.ch-meta { font-size: 0.84rem; font-weight: 500; color: var(--ink-3); }
.ch-kicker { flex-basis: 100%; font-size: 0.78rem; font-weight: 650; color: var(--copper-light); }
/* While a step's part plays, its stretch of the rail fills downwards. */
.ch-bar { position: absolute; left: 13px; top: 50%; width: 2px; height: 100%; background: var(--copper); transform-origin: top; transform: scaleY(var(--p, 0)); opacity: 0; }
.ch--result .ch-bar, .ch--change .ch-bar, .ch--task .ch-bar { display: none; }
.ch.is-playing .ch-bar, .ch.is-done .ch-bar { opacity: 1; }
.ch.is-done[aria-selected="true"] .ch-num { background: var(--copper); border-color: var(--copper); color: var(--on-copper); }
.feature-after { max-width: 31rem; }
.aside-note {
  margin-top: 26px; padding: 4px 0 4px 18px;
  border-left: 2px solid rgba(231, 177, 138, 0.5);
}
.aside-note h3 { font-size: 1rem; letter-spacing: -0.01em; }
.aside-note p { margin-top: 4px; color: var(--ink-2); font-size: 0.97rem; }
.feature-copy > .fineprint { margin-top: 18px; }
@media (min-width: 900px) {
  .feature--checkin .feature-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .feature--checkin .stage { order: -1; }
  .feature--checkin .feature-copy { justify-self: end; }
}

/* --- 4. Support: dusk, centred ------------------------------------------- */
.support {
  position: relative; padding: var(--section-y) var(--gutter); overflow: hidden;
  background: var(--grain), linear-gradient(var(--ground), #141010 30%, #151110 70%, var(--ground));
}
.support-inner { position: relative; max-width: var(--content); margin: 0 auto; display: grid; justify-items: center; }
.support-head { max-width: 42rem; text-align: center; display: grid; justify-items: center; }
.support-head .feature-lede { max-width: 34rem; }
.support-stage { margin-top: clamp(40px, 5vw, 64px); }
/* The setting sun stands behind the phone; its horizon crosses at about
   two thirds of the phone's height, wider than the page column. */
.support-sky {
  position: absolute; z-index: 0; left: 50%; top: -24%; width: 100vw; height: 148%; transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
.support-sky svg { width: 100%; height: 100%; max-width: none; }
.facts {
  list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; width: 100%;
  display: grid; gap: 28px clamp(24px, 4vw, 56px);
}
.facts li { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.facts h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
.facts p { margin-top: 8px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; }
.facts li:last-child { border-top-color: rgba(231, 177, 138, 0.55); }
.support-detail { width: 100%; max-width: 40rem; justify-self: start; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- 5. Safety plan: night; an index of the seven parts beside the phone -- */
.feature--plan { background: var(--grain), linear-gradient(var(--ground), var(--ground-deep) 40%, var(--ground-deep) 70%, var(--ground)); }
.plan-modes {
  margin-top: 26px; display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-control);
  background: var(--surface); border: 1px solid var(--line); max-width: 100%;
}
.plan-modes button {
  border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.95rem; font-weight: 650;
  min-height: 44px; padding: 0 18px; border-radius: var(--r-control); cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.plan-modes button:hover { color: var(--ink); }
.plan-modes button[aria-selected="true"] { background: var(--ink); color: var(--ground); }
.plan-modes button:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.plan-body { margin-top: 22px; display: grid; gap: 18px; align-items: start; }
.plan-parts { display: grid; border-top: 1px solid var(--line); }
.plan-part {
  position: relative; appearance: none; font: inherit; font-size: 0.95rem; text-align: left;
  display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center;
  min-height: 46px; padding: 8px 10px 8px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--ink-2); cursor: pointer;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.plan-part::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--copper); transform: scaleY(0); transition: transform 200ms var(--ease); }
.plan-part-n { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.plan-part:hover { color: var(--ink); background: rgba(255, 255, 255, 0.02); }
.plan-part[aria-pressed="true"] { color: var(--ink); font-weight: 600; background: rgba(231, 177, 138, 0.06); }
.plan-part[aria-pressed="true"]::before { transform: scaleY(1); }
.plan-part[aria-pressed="true"] .plan-part-n { color: var(--copper-light); }
.plan-part:focus-visible { outline: 2px solid var(--copper-light); outline-offset: -2px; border-radius: 6px; }
html:not(.js) .plan-modes, html:not(.js) .plan-sample { display: none; }
html:not(.js) .plan-part { cursor: default; }
.plan-sample {
  min-height: 8em; padding: 16px 18px 18px; border-radius: 4px 16px 16px 4px;
  background: rgba(26, 27, 29, 0.7); border-left: 2px solid var(--copper);
}
.plan-sample-h { font-weight: 650; color: var(--ink); }
.plan-sample p:not(.plan-sample-h) { margin-top: 6px; color: var(--ink-2); font-size: 0.96rem; }
.plan-sample ul { margin: 8px 0 0; padding: 0 0 0 18px; color: var(--ink-2); }
.plan-sample li + li { margin-top: 2px; }
.plan-sample ul[hidden], .plan-sample p[hidden] { display: none; }
@media (min-width: 900px) {
  .feature--plan .feature-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .feature--plan .feature-copy { max-width: 42rem; }
}
@media (min-width: 1100px) {
  .plan-body { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
  .plan-sample { position: sticky; top: 96px; }
}

/* Narrow screens (Check-in and the plan): the controls sit directly above a
   smaller phone, as one scrolling strip, so a choice and its screen are in
   view together. */
@media (max-width: 899px) {
  .feature--checkin .feature-copy, .feature--plan .feature-copy, .feature--plan .plan-body { display: contents; }
  .feature--checkin .feature-inner > *, .feature--plan .feature-inner > * { width: 100%; max-width: 40rem; justify-self: center; }
  .feature--checkin .feature-inner, .feature--plan .feature-inner { row-gap: 0; grid-template-columns: minmax(0, 1fr); }
  .feature--checkin .eyebrow, .feature--plan .eyebrow { order: 0; justify-self: start; }
  .feature--checkin h2, .feature--plan h2, .feature--checkin .feature-lede, .feature--plan .feature-lede, .feature--checkin .feature-after { justify-self: start; max-width: 40rem; }
  .feature--checkin h2, .feature--plan h2 { order: 1; }
  .feature--checkin .feature-lede, .feature--plan .feature-lede { order: 2; }
  .feature--checkin .chapters, .feature--plan .plan-modes { order: 3; }
  .feature--plan .plan-parts { order: 4; }
  .feature--checkin .stage, .feature--plan .stage { order: 5; margin-top: 18px; }
  .feature--checkin .feature-after { order: 6; margin-top: 26px; }
  .feature--checkin .aside-note, .feature--plan .plan-sample { order: 7; }
  .feature--plan .plan-sample { margin-top: 20px; }
  .feature--checkin .fineprint, .feature--plan .fineprint { order: 8; }
  .feature--checkin .phone, .feature--plan .phone { width: min(230px, 60vw); min-width: 0; }
  .feature--plan .plan-modes { justify-self: start; width: auto; }
  .chapters, .plan-parts {
    display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none; border-top: 0;
    margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 4px var(--gutter);
    width: auto; max-width: none; min-width: 0; justify-self: stretch;
  }
  .chapters { margin-top: 22px; }
  .plan-parts { margin-top: 14px; }
  .chapters::-webkit-scrollbar, .plan-parts::-webkit-scrollbar { display: none; }
  .chapters .ch {
    flex: 0 0 auto; width: auto; max-width: min(250px, 72vw); min-height: 48px; padding: 8px 14px 8px 10px; gap: 10px;
    grid-template-columns: 26px auto; scroll-snap-align: start;
    border: 1px solid var(--line); background: var(--surface); border-radius: 14px;
  }
  .chapters .ch[aria-selected="true"] { border-color: rgba(231, 177, 138, 0.5); background: #1f1d1c; }
  .ch::before, .ch-bar { display: none; }
  .ch-num { width: 26px; height: 26px; }
  .chapters .ch-text { font-size: 0.92rem; line-height: 1.3; }
  .chapters .ch-kicker { display: none; }
  .ch--task, .ch--scan { margin-top: 0; }
  .ch--task .ch-num { width: 26px; height: 26px; }
  .plan-part {
    flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; grid-template-columns: auto auto;
    min-height: 42px; padding: 0 14px 0 12px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface);
  }
  .plan-part::before { display: none; }
  .plan-part[aria-pressed="true"] { color: var(--on-copper); background: var(--copper-light); border-color: var(--copper-light); }
  .plan-part[aria-pressed="true"] .plan-part-n { color: var(--on-copper); }
}

/* --- 6. Tools: an explorer ------------------------------------------------- */
.tools {
  position: relative; padding: var(--section-y) var(--gutter);
  background: var(--grain), linear-gradient(var(--ground), #0e0f10 18%, #0e0f10 82%, var(--ground));
}
.tools-inner { max-width: var(--content); margin: 0 auto; }
.tools-head { display: grid; gap: 18px 64px; align-items: end; }
.tools-head h2 { max-width: 12ch; }
.tools-head > p { color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; max-width: 26rem; }
@media (min-width: 900px) { .tools-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }

.tx { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 28px clamp(28px, 4vw, 64px); align-items: start; }
.tx-list { display: grid; border-top: 1px solid var(--line); }
.tx-tab {
  position: relative; appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center;
  min-height: 68px; padding: 10px 12px 10px 14px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink-2);
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.tx-tab::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--copper); transform: scaleY(0); transition: transform 220ms var(--ease); }
.tx-tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.025); }
.tx-tab[aria-selected="true"] { color: var(--ink); background: rgba(231, 177, 138, 0.06); }
.tx-tab[aria-selected="true"]::before { transform: scaleY(1); }
.tx-tab:focus-visible { outline: 2px solid var(--copper-light); outline-offset: -2px; border-radius: 8px; }
.tx-thumb { width: 64px; height: 48px; border-radius: 9px; opacity: 0.7; transition: opacity 200ms var(--ease); }
.tx-tab[aria-selected="true"] .tx-thumb, .tx-tab:hover .tx-thumb { opacity: 1; }
.tx-text { display: grid; gap: 1px; }
.tx-tab .tool-name { font-weight: 650; font-size: 1.02rem; letter-spacing: -0.012em; }
.tx-meta { font-size: 0.82rem; color: var(--ink-3); }
html.js .tx-tab .tool-desc { display: none; }
html:not(.js) .tx-tab .tool-desc { grid-column: 2; color: var(--ink-2); font-size: 0.95rem; }
html:not(.js) .tx-stage { display: none; }

.tx-stage { display: grid; }
.tx-art {
  position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: #151617; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.tx-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 260ms var(--ease); }
.tx-scene.is-active { opacity: 1; }
.tx-svg { width: 100%; height: 100%; }
.tx-copy { padding: 22px 2px 0; display: grid; gap: 8px; justify-items: start; }
.tx-kicker { display: flex; gap: 14px; font-size: 0.84rem; font-weight: 650; color: var(--copper-light); }
.tx-kicker [data-tx-count] { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tx-name { font-size: var(--t-h3); }
.tx-desc { color: var(--ink-2); font-size: 1.04rem; max-width: 32rem; }
.tx-open {
  margin-top: 8px; appearance: none; display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 0 20px 0 22px; border-radius: var(--r-control);
  border: 1px solid var(--copper); background: transparent; color: var(--ink);
  font: inherit; font-weight: 650; font-size: 0.96rem; cursor: pointer;
  transition: background-color 180ms var(--ease), color 180ms var(--ease);
}
.tx-open::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease); }
.tx-open:hover { background: var(--copper); color: var(--on-copper); }
.tx-open:hover::after { transform: translateX(3px) rotate(45deg); }
@media (min-width: 900px) {
  .tx { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .tx-stage { position: sticky; top: 92px; }
}
@media (max-width: 899px) {
  .tx-stage { order: -1; }
  .tx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 8px; }
  .tx-tab { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; min-height: 60px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; }
  .tx-tab::before { display: none; }
  .tx-tab[aria-selected="true"] { border-color: rgba(231, 177, 138, 0.5); }
  .tx-thumb { width: 44px; height: 33px; border-radius: 7px; }
  .tx-tab .tool-name { font-size: 0.92rem; line-height: 1.25; }
  .tx-meta { display: none; }
  .tx-art { border-radius: 18px; }
  .tx-copy { padding-top: 16px; }
}

/* Tool landscapes: each one moves the way its tool works, once, when it is
   chosen, then rests in its final state. Off with Motion off or Reduce
   Motion. */
.tx-svg * { transform-box: fill-box; transform-origin: center; }
.tx-scene.is-playing .t-sun { animation: t-sun 2.4s var(--ease) 1; }
.tx-scene.is-playing .t-glow { animation: t-glow 2.4s var(--ease) 1; }
@keyframes t-sun { 50% { transform: scale(1.06); } }
@keyframes t-glow { 50% { transform: scale(1.14); opacity: 0.85; } }
/* Settle: the water slows and flattens. */
.tx-scene--settle.is-playing .t-wave { animation: t-settle 2.6s var(--ease) 1 both; }
.tx-scene--settle.is-playing .t-wave:nth-of-type(odd) { animation-delay: 120ms; }
@keyframes t-settle { 0% { transform: translateY(8px) scaleY(2.4); } 55% { transform: translateY(-1px) scaleY(0.92); } 100% { transform: none; } }
.tx-scene--settle.is-playing .t-refl, .tx-scene--reflect.is-playing .t-refl { animation: t-refl 2.4s var(--ease) 1 both; }
@keyframes t-refl { 0% { transform: scaleX(0.4) translateX(8px); opacity: 0.2; } 40% { transform: scaleX(1.1) translateX(-4px); } 100% { transform: none; opacity: 1; } }
/* Clear my head: the scattered thoughts go quiet; one path stays. */
.tx-scene--clear.is-playing .t-noise { animation: t-quiet 1.6s var(--ease) 1 both; }
.tx-scene--clear .t-noise:nth-of-type(3n) { animation-delay: 160ms; }
.tx-scene--clear .t-noise:nth-of-type(3n + 1) { animation-delay: 320ms; }
@keyframes t-quiet { 0% { opacity: 1; } 100% { opacity: 0.12; transform: scale(0.6); } }
.tx-scene--clear .t-path { stroke-dasharray: 150; }
.tx-scene--clear.is-playing .t-path { animation: t-draw 1.6s var(--ease) 600ms 1 both; }
@keyframes t-draw { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
/* Take a small step: one step up. */
.tx-scene--step.is-playing .t-dot { animation: t-hop 1.4s var(--ease) 300ms 1 both; }
@keyframes t-hop { 0% { transform: none; } 45% { transform: translate(46px, -62px); } 100% { transform: translate(92px, -38px); } }
.tx-scene--step .t-steps { stroke-dasharray: 700; }
.tx-scene--step.is-playing .t-steps { animation: t-steps 1.6s steps(6, end) 1 both; }
@keyframes t-steps { from { stroke-dashoffset: 700; } to { stroke-dashoffset: 0; } }
/* Pause before I text: write, pause, then decide. */
.tx-scene--pause .t-text { transform-origin: left center; }
.tx-scene--pause.is-playing .t-text-1 { animation: t-type 0.9s var(--ease) 1 both; }
.tx-scene--pause.is-playing .t-bar { animation: t-hold 1.4s var(--ease) 0.8s 1 both; }
.tx-scene--pause.is-playing .t-text-2 { animation: t-type 0.9s var(--ease) 2.1s 1 both; }
.tx-scene--pause.is-playing .t-text-3 { animation: t-type 0.7s var(--ease) 2.7s 1 both; }
@keyframes t-type { from { transform: scaleX(0.05); } to { transform: none; } }
@keyframes t-hold { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0.35; } }
/* 5-4-3-2-1: the five points light in turn. */
.tx-scene--senses .t-sense { opacity: 1; }
.tx-scene--senses.is-playing .t-sense { animation: t-notice 1.2s var(--ease) 1 both; }
.tx-scene--senses.is-playing .t-sense-2 { animation-delay: 260ms; }
.tx-scene--senses.is-playing .t-sense-3 { animation-delay: 520ms; }
.tx-scene--senses.is-playing .t-sense-4 { animation-delay: 780ms; }
.tx-scene--senses.is-playing .t-sense-5 { animation-delay: 1040ms; }
@keyframes t-notice { 0% { opacity: 0.2; transform: scale(0.6); } 45% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
/* Slow breathing: one slow breath, the sun rising and falling on its arc. */
.tx-scene--breathing .t-breath { transform-box: view-box; transform-origin: 320px 282px; }
.tx-scene--breathing .t-breath * { transform-box: view-box; }
.tx-scene--breathing.is-playing .t-breath { animation: t-breath 6s ease-in-out 1; }
@keyframes t-breath { 0% { transform: rotate(-58deg); } 45% { transform: rotate(0deg); } 55% { transform: rotate(0deg); } 100% { transform: rotate(58deg); } }
/* Care Kit: the hands gather in around what is kept. */
.tx-scene--carekit.is-playing .t-hold { animation: t-gather 1.6s var(--ease) 1 both; }
.tx-scene--carekit.is-playing .t-hold-2 { animation-delay: 120ms; }
@keyframes t-gather { 0% { transform: scale(1.22); opacity: 0.2; } 100% { transform: none; opacity: 1; } }
.tx-scene--carekit.is-playing .t-item { animation: t-keep 1s var(--ease) 1 both; }
.tx-scene--carekit.is-playing .t-item-1 { animation-delay: 500ms; }
.tx-scene--carekit.is-playing .t-item-2 { animation-delay: 650ms; }
.tx-scene--carekit.is-playing .t-item-3 { animation-delay: 800ms; }
@keyframes t-keep { 0% { opacity: 0; transform: translateY(-26px); } 100% { opacity: 1; transform: none; } }

/* Try a small moment: a demonstration band below the explorer. The words
   and controls on the left, one landscape on the right that the breath
   moves (site.js); on narrow screens the landscape sits between the
   introduction and the controls, so both are in view while it runs. */
.moment {
  margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line);
  display: grid; gap: 28px clamp(28px, 5vw, 80px); align-items: start;
}
.moment-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--copper-light); }
.moment-kicker::before { content: ""; width: 26px; height: 1.5px; background: currentColor; opacity: 0.6; }
.moment-copy h3 { margin-top: 16px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.028em; max-width: 16ch; }
.moment-lede { margin-top: 14px; color: var(--ink-2); font-size: 1.04rem; max-width: 31rem; }
.moment-nojs { margin-top: 14px; color: var(--ink-3); font-size: 0.95rem; }
.moment.is-ready .moment-nojs { display: none; }
html:not(.js) .moment-choose, html:not(.js) .moment-stage-foot { display: none; }
.moment [hidden] { display: none !important; }
.moment-label { font-size: 0.8rem; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.moment-choose { margin-top: 26px; display: grid; gap: 18px; justify-items: start; }
.moment-options { display: grid; gap: 8px; width: 100%; max-width: 31rem; }
.moment-option {
  appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
  min-height: 64px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(26, 27, 29, 0.6); color: var(--ink-2);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.moment-option:hover { color: var(--ink); border-color: var(--line-strong); }
.moment-option[aria-checked="true"] { color: var(--ink); border-color: rgba(231, 177, 138, 0.55); background: rgba(231, 177, 138, 0.06); }
.moment-option:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.moment-option-mark { width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: grid; place-items: center; }
.moment-option[aria-checked="true"] .moment-option-mark { border-color: var(--copper); }
.moment-option[aria-checked="true"] .moment-option-mark::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--copper-light); }
.moment-option-text { display: grid; gap: 2px; }
.moment-option-name { font-weight: 650; font-size: 1.02rem; }
.moment-option-desc { font-size: 0.92rem; color: var(--ink-3); line-height: 1.45; }
.moment-option[aria-checked="true"] .moment-option-desc { color: var(--ink-2); }
.moment-start, .moment-btn--primary {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: var(--r-control);
  border: 1px solid var(--copper-light); background: var(--copper-light); color: var(--on-copper);
  font: inherit; font-weight: 700; font-size: 0.98rem; cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.moment-start:hover, .moment-btn--primary:hover { background: var(--copper); border-color: var(--copper); }
.moment-start:focus-visible, .moment-btn:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.moment-run, .moment-done { margin-top: 26px; display: grid; gap: 10px; justify-items: start; max-width: 31rem; }
.moment-cue { margin: 0; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; min-height: 1.2em; }
.moment-cue:focus { outline: none; }
.moment-cue:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 4px; }
.moment-help { color: var(--ink-2); font-size: 1rem; line-height: 1.55; }
.moment-run .moment-help { min-height: 3.1em; }
.moment-marks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.moment-mark {
  appearance: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--ink-3); background: transparent; position: relative;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.moment-mark::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--ink-3); opacity: 0.5; }
.moment-mark[aria-pressed="true"] { border-color: var(--copper-light); background: rgba(242, 205, 175, 0.14); }
.moment-mark[aria-pressed="true"]::before { background: var(--copper-light); opacity: 1; }
.moment-mark:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.moment-controls { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.moment-btn {
  appearance: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: inherit; font-weight: 650; font-size: 0.95rem; cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.moment-btn:hover { border-color: var(--copper); }
.moment-btn--quiet { border-color: transparent; color: var(--ink-2); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: rgba(243, 239, 231, 0.3); }
.moment-btn--quiet:hover { color: var(--ink); border-color: transparent; }
.moment-btn.moment-btn--primary { padding: 0 24px; border-color: var(--copper-light); background: var(--copper-light); color: var(--on-copper); font-weight: 700; }
.moment-btn.moment-btn--primary:hover { background: var(--copper); border-color: var(--copper); }
.moment-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 44px; font-weight: 650; text-decoration: none; }
.moment-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

.moment-stage { display: grid; gap: 12px; }
.moment-art {
  position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden;
  background: #151617; box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0, 0, 0, 0.9);
}
.moment-art svg { width: 100%; height: 100%; }
.moment-art::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.m-core { fill: #6f6b65; transition: fill 600ms var(--ease); }
.m-halo { opacity: 0; transition: opacity 600ms var(--ease); }
.m-pt.is-lit .m-core { fill: var(--copper-light); }
.m-pt.is-lit .m-halo { opacity: 1; }
.m-pt.is-off { display: none; }
.moment.is-paused .moment-art svg { opacity: 0.72; transition: opacity 300ms var(--ease); }
.moment-stage-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.moment-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--r-control);
  border: 1px solid var(--line-strong); font-size: 0.8rem; font-weight: 650; color: var(--ink-2);
}
.moment-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--copper); }
.moment-motion {
  appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer;
}
.moment-motion:hover { border-color: var(--copper); }
.moment-motion:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.moment-motion-state { color: var(--copper-light); min-width: 2.2em; }
.moment-motion[aria-pressed="false"] .moment-motion-state { color: var(--ink-2); }
.moment-fine { font-size: 0.86rem; color: var(--ink-3); line-height: 1.5; max-width: 40rem; }
@media (min-width: 900px) {
  .moment { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .moment-stage { position: sticky; top: 92px; }
}
@media (max-width: 899px) {
  .moment { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .moment-copy { display: contents; }
  .moment-kicker, .moment-copy h3, .moment-lede, .moment-nojs { order: 0; }
  .moment-stage { display: contents; }
  .moment-art { order: 1; margin-top: 22px; }
  .moment-stage-foot { order: 1; margin-top: 12px; }
  .moment-choose, .moment-run, .moment-done { order: 2; margin-top: 22px; }
  .moment-fine { order: 3; margin-top: 22px; }
  .moment-art { border-radius: 18px; }
  .moment-cue { margin: 0; font-size: 1.45rem; }
}

/* My Reset: a band below the explorer, phone on the left. */
.reset-feature {
  margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line);
  display: grid; gap: clamp(28px, 5vw, 80px); align-items: center;
}
.reset-feature .phone { width: min(270px, 64vw); }
.reset-copy h3 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -0.028em; max-width: 16ch; }
.reset-copy > p:not(.eyebrow) { margin-top: 14px; color: var(--ink-2); max-width: 30rem; font-size: 1.04rem; }
/* My Reset's choices: real radio groups. Selected is filled ivory with a
   tick, not colour alone; the plan below and the note under the choices
   change with them. */
.reset-pick { margin-top: 24px; display: grid; gap: 18px; }
html:not(.js) .reset-opts, html:not(.js) .reset-match { display: none; }
.reset-group { display: grid; gap: 8px; }
.reset-group-l { font-size: 0.8rem; font-weight: 650; color: var(--ink-3); }
.reset-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.reset-opt {
  appearance: none; font: inherit; font-size: 0.94rem; font-weight: 650; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.reset-opt:hover { color: var(--ink); border-color: var(--copper); }
.reset-opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); padding-left: 14px; }
.reset-opt[aria-checked="true"]::before { content: ""; width: 9px; height: 5px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.reset-opt:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.reset-plan { padding: 16px 18px 18px; border-left: 2px solid var(--copper); border-radius: 4px 16px 16px 4px; background: rgba(26, 27, 29, 0.7); display: grid; gap: 6px; }
.reset-plan-k { font-size: 0.78rem; font-weight: 650; color: var(--copper-light); }
.reset-plan-h { font-weight: 650; color: var(--ink); font-size: 1.04rem; }
.reset-plan-d { color: var(--ink-2); font-size: 0.96rem; }
.reset-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.reset-steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.reset-step-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--copper); color: var(--copper-light); font-size: 0.76rem; font-weight: 700; }
.reset-step-b { display: grid; gap: 1px; }
.reset-step-l { font-weight: 650; font-size: 0.94rem; color: var(--ink); }
.reset-step-o { font-size: 0.9rem; color: var(--ink-3); line-height: 1.45; }
.reset-match { font-size: 0.9rem; color: var(--ink-3); padding-left: 2px; }
.reset-pick.is-other .reset-match { color: var(--ink-2); }
.reset-pick.is-other .reset-match::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--copper); vertical-align: 1px; }
.reset-how { margin-top: 14px; color: var(--ink-3); font-size: 0.92rem; max-width: 30rem; }
.reset-cap { position: relative; z-index: 1; font-size: 0.86rem; color: var(--ink-3); text-align: center; max-width: 18rem; }
.reset-cap-k { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--copper-light); }
.reset-resume { margin-top: 18px; color: var(--ink-3); font-size: 0.95rem; max-width: 30rem; }
@media (min-width: 900px) { .reset-feature { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

/* Preview dialog */
.tool-preview {
  width: min(900px, calc(100vw - 24px)); max-height: calc(100svh - 24px);
  padding: 0; border: 1px solid var(--line-strong); border-radius: 26px;
  background: var(--surface); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.tool-preview::backdrop { background: rgba(8, 9, 10, 0.74); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tool-preview[open] { animation: rise 260ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.tool-preview-inner { position: relative; display: grid; gap: 20px; padding: clamp(18px, 3vw, 36px); }
.tool-preview-media { justify-self: center; width: min(290px, 64vw); }
.tool-preview-media .device { max-width: 290px; }
.tool-preview-media .phone { width: min(250px, 58vw); }
.tool-preview-kicker { color: var(--copper); font-weight: 650; font-size: 0.9rem; }
.tool-preview-copy h3 { margin-top: 6px; font-size: var(--t-h3); padding-right: 48px; }
.tool-preview-copy > p { margin-top: 12px; color: var(--ink-2); }
.tool-preview-copy > .tool-preview-note { font-size: 0.88rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 18px; }
.tool-preview-nav { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.tool-preview-close {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.tool-preview-close::before, .tool-preview-close::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; background: currentColor; }
.tool-preview-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.tool-preview-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
@media (min-width: 720px) {
  .tool-preview-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
}
@media (max-width: 719px) {
  .tool-preview-media { width: min(220px, 58vw); }
}

/* --- 7. Grounding: five points on one horizon ----------------------------- */
.grounding {
  position: relative; overflow: hidden;
  padding: var(--section-y) var(--gutter) calc(var(--section-y) + clamp(110px, 14vw, 200px));
  background: var(--grain), radial-gradient(60% 50% at 72% 45%, rgba(242, 205, 175, 0.07), transparent 70%), var(--ground-deep);
}
.grounding-inner { position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; display: grid; gap: clamp(28px, 6vw, 96px); align-items: center; justify-items: center; }
.grounding .feature-copy h2 { max-width: 12ch; }
.grounding-band { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; height: clamp(150px, 18vw, 260px); }
.g-core { fill: var(--ink-3); fill-opacity: 0.55; transition: fill 500ms var(--ease), fill-opacity 500ms var(--ease); }
.g-halo { opacity: 0; transition: opacity 700ms var(--ease); }
.grounding.is-lit .g-core { fill: var(--copper-light); fill-opacity: 1; }
.grounding.is-lit .g-halo { opacity: 1; }
.grounding.is-lit .g-pt:nth-child(2) * { transition-delay: 350ms; }
.grounding.is-lit .g-pt:nth-child(3) * { transition-delay: 700ms; }
.grounding.is-lit .g-pt:nth-child(4) * { transition-delay: 1050ms; }
.grounding.is-lit .g-pt:nth-child(5) * { transition-delay: 1400ms; }
@media (min-width: 900px) {
  .grounding-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .grounding .feature-copy { justify-self: start; }
}
@media (max-width: 899px) {
  .grounding .feature-copy { justify-self: stretch; max-width: 40rem; margin: 0 auto; }
}

/* --- 8. Care Kit: what is kept, gathered around one phone ----------------- */
.carekit { position: relative; padding: var(--section-y) var(--gutter); }
.carekit-inner { max-width: var(--content); margin: 0 auto; }
.carekit-head { max-width: 40rem; margin: 0 auto; text-align: center; display: grid; justify-items: center; }
.carekit-head .feature-lede { max-width: 30rem; }
.carekit-stage { --ck-gap: clamp(28px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 32px var(--ck-gap); align-items: center; justify-items: center; }
.kept { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; width: 100%; }
.kept li { position: relative; }
.kept h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
.kept p { margin-top: 6px; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
@media (min-width: 900px) {
  .carekit-stage { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .kept { gap: clamp(64px, 9vh, 120px); }
  .kept--a { text-align: right; }
  /* A hairline from each kept thing towards the phone. */
  .kept li::after { content: ""; position: absolute; top: 0.62em; width: calc(var(--ck-gap) * 0.7); height: 1px; background: linear-gradient(90deg, rgba(242, 205, 175, 0.5), rgba(242, 205, 175, 0.08)); }
  .kept li::before { content: ""; position: absolute; top: calc(0.62em - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); }
  .kept--a li { padding-right: 20px; }
  .kept--a li::before { right: 0; }
  .kept--a li::after { left: calc(100% + 8px); }
  .kept--b li { padding-left: 20px; }
  .kept--b li::before { left: 0; }
  .kept--b li::after { right: calc(100% + 8px); transform: scaleX(-1); }
}
@media (max-width: 899px) {
  .carekit-stage .stage { order: -1; }
  .kept { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; max-width: 40rem; }
  .kept li { padding-top: 14px; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 479px) { .kept { grid-template-columns: minmax(0, 1fr); } }

/* --- 9. Insights ------------------------------------------------------------ */
.ins-list { margin: 28px 0 0; display: grid; border-top: 1px solid var(--line); }
.ins-list div { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ins-list dt { font-weight: 650; }
.ins-list dd { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) {
  .feature--insights .feature-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .feature--insights .stage-wrap { order: -1; }
}
@media (max-width: 599px) { .ins-list div { grid-template-columns: minmax(0, 1fr); } }

/* --- 9b. Make it yours (Appearance) -------------------------------------------
   Three theme selectors beside one phone. The phone stays put; only the
   landscape behind it, the selected swatch and the selection mark take the
   chosen palette (the app's own accents), and the page's text keeps its
   ivory. The palette changes nothing outside this section. */
.feature--yours {
  --yc: #e7b18a; --yl: #f2cdaf;
  border-top: 1px solid var(--line);
}
.feature--yours[data-palette="lavender"] { --yc: #b8aceb; --yl: #dad2f7; }
.feature--yours[data-palette="ocean"] { --yc: #82c2c6; --yl: #c6e6e7; }
.feature--yours .eyebrow { color: var(--yl); transition: color 600ms var(--ease); }
.yours-picks { margin-top: 28px; display: grid; gap: 10px; max-width: 30rem; }
.yours-pick {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 14px;
  width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; border-radius: 14px;
  appearance: none; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease);
}
.yours-pick:hover { color: var(--ink); border-color: var(--line-strong); }
.yours-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.yours-pick[aria-selected="true"] { color: var(--ink); border-color: var(--yc); background: #1e1e1f; }
.yours-swatch {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.yours-swatch--copper { background: radial-gradient(circle at 50% 62%, #f2cdaf 0 34%, #e7b18a 35% 52%, #2c2826 53%); }
.yours-swatch--lavender { background: radial-gradient(circle at 50% 62%, #dad2f7 0 34%, #b8aceb 35% 52%, #2a2737 53%); }
.yours-swatch--ocean { background: radial-gradient(circle at 50% 62%, #c6e6e7 0 34%, #82c2c6 35% 52%, #232a2b 53%); }
/* Selected: a ring around the swatch and a tick, not colour alone. */
.yours-pick[aria-selected="true"] .yours-swatch { box-shadow: 0 0 0 2px var(--ground), 0 0 0 4px var(--yc); }
.yours-pick[aria-selected="true"] .yours-name::after {
  content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 0 3px 10px;
  border-left: 2px solid var(--yc); border-bottom: 2px solid var(--yc); transform: rotate(-45deg);
}
.yours-pick-text { display: grid; gap: 2px; }
.yours-name { font-weight: 650; font-size: 1.02rem; }
.yours-desc { font-size: 0.9rem; color: var(--ink-3); }
.yours-what { margin-top: 20px; color: var(--ink-2); max-width: 31rem; }
.feature--yours .fineprint { margin-top: 16px; max-width: 31rem; }
.yours-sky {
  position: absolute; z-index: 0; left: 50%; top: 50%; width: 190%; height: 122%; transform: translate(-50%, -50%);
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
}
.yours-sky svg { width: 100%; height: 100%; max-width: none; }
.yours-sun { fill: var(--yl); fill-opacity: 0.92; transition: fill 700ms var(--ease); }
.yours-stop { stop-color: var(--yl); transition: stop-color 700ms var(--ease); }
.yours-line { stroke: var(--yl); transition: stroke 700ms var(--ease); }
@media (min-width: 900px) {
  .feature--yours .feature-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
@media (max-width: 899px) {
  .feature--yours .feature-copy { display: contents; }
  .feature--yours .feature-inner { row-gap: 0; }
  .feature--yours .feature-inner > * { width: 100%; max-width: 40rem; justify-self: center; }
  .feature--yours .eyebrow, .feature--yours h2, .feature--yours .feature-lede { order: 0; }
  .feature--yours .yours-picks { order: 1; max-width: none; }
  .feature--yours .stage { order: 2; margin-top: 30px; }
  .feature--yours .yours-what { order: 3; margin-top: 30px; }
  .feature--yours .fineprint { order: 4; }
}
@media (max-width: 599px) {
  /* Keep the sun inside a narrow screen: up and in, over the horizon. */
  .yours-sun-at { transform: translate(92px, -40px) scale(0.8); transform-origin: 118px 300px; }
  .yours-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .yours-pick { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 8px; padding: 12px 6px; min-height: 0; }
  .yours-desc { display: none; }
  .yours-pick[aria-selected="true"] .yours-name::after { display: none; }
}

/* --- 10. Your data ----------------------------------------------------------
   One landscape, two places on it: the phone (lit, where everything is
   kept) and an optional account (quiet until the switch shows what it
   would hold; a dotted arc of light then joins them). Under it, how to
   look back, export and delete, as three plain lines, and what this
   website keeps. No hosting diagram: that is in the privacy note. */
.privacy { position: relative; padding: var(--section-y) var(--gutter); border-top: 1px solid var(--line); background: var(--grain), var(--ground); }
.privacy-inner { max-width: var(--content); margin: 0 auto; }
.privacy-head { max-width: 46rem; }
.privacy-head > p:not(.eyebrow) { margin-top: 18px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; }
.yd-land { position: relative; margin-top: clamp(40px, 5vw, 64px); }
.yd-horizon { display: block; width: calc(100% + 2 * var(--gutter)); max-width: none; height: clamp(84px, 9vw, 120px); margin: clamp(20px, 3vw, 32px) calc(-1 * var(--gutter)) 0; }
.yd-acc-pt { fill: var(--ground); stroke: var(--ink-3); stroke-width: 1.6; stroke-dasharray: 3 3; transition: fill 400ms var(--ease), stroke 400ms var(--ease); }
.privacy[data-account="on"] .yd-acc-pt { fill: var(--copper-light); stroke: var(--copper-light); stroke-dasharray: none; }
.yd-arc { opacity: 0; transition: opacity 500ms var(--ease); }
.privacy[data-account="on"] .yd-arc { opacity: 0.55; }
.yd-places { position: relative; display: grid; gap: 28px clamp(32px, 6vw, 96px); align-items: start; }
@media (min-width: 900px) { .yd-places { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); } }
.yd-place-k { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-light); }
.yd-place-k::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 0 5px rgba(242, 205, 175, 0.14); }
.yd-place--account .yd-place-k { color: var(--ink-3); }
.yd-place--account .yd-place-k::before { background: transparent; border: 1.5px dashed var(--ink-3); box-shadow: none; }
.privacy[data-account="on"] .yd-place--account .yd-place-k { color: var(--copper-light); }
.privacy[data-account="on"] .yd-place--account .yd-place-k::before { border-color: var(--copper-light); }
.yd-place h3 { margin-top: 10px; font-size: var(--t-h3); }
.yd-items { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.yd-item {
  appearance: none; font: inherit; font-size: 0.94rem; font-weight: 600; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 6px 16px 6px 13px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: var(--ground); color: var(--ink);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.yd-item:hover { border-color: var(--copper); }
.yd-item[aria-pressed="true"] { border-color: var(--copper-light); background: rgba(242, 205, 175, 0.1); }
.yd-item:focus-visible, .yd-switch:focus-visible, .yd-site-link:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 3px; }
.yd-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--copper-light); }
.yd-copied { font-size: 0.78rem; font-weight: 650; color: var(--ink-3); }
.yd-copied:empty { display: none; }
.privacy[data-account="on"] .yd-item[data-copied="yes"] .yd-copied { color: var(--copper-light); }
.privacy[data-account="on"] .yd-item[data-copied="no"] .yd-dot { box-shadow: 0 0 0 3px rgba(242, 205, 175, 0.18); }
.yd-acc-p { margin-top: 8px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; }
.yd-switch {
  margin-top: 18px; appearance: none; font: inherit; font-weight: 650; font-size: 0.95rem; color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 18px 0 10px;
  border-radius: var(--r-control); border: 1px solid var(--line-strong); background: transparent;
}
.yd-switch:hover { border-color: var(--copper); }
.yd-switch-track { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--surface-3); transition: background-color 200ms var(--ease); }
.yd-switch-knob { position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); transition: transform 200ms var(--ease); }
.yd-switch[aria-checked="true"] .yd-switch-track { background: var(--copper); }
.yd-switch[aria-checked="true"] .yd-switch-knob { transform: translateX(18px); background: var(--on-copper); }
.yd-acc-note { margin-top: 12px; font-size: 0.84rem; color: var(--ink-3); }
html:not(.js) .yd-switch, html:not(.js) .yd-detail { display: none; }
.yd-detail { position: relative; margin-top: 8px; min-height: 3.2em; padding: 14px 18px; border-left: 2px solid var(--copper); border-radius: 4px 14px 14px 4px; background: rgba(26, 27, 29, 0.72); color: var(--ink); font-size: 1rem; line-height: 1.55; max-width: 52rem; }
.yd-control { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; gap: 26px clamp(24px, 4vw, 56px); }
@media (min-width: 760px) { .yd-control { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.yd-control li { position: relative; padding-top: 18px; border-top: 1px solid var(--line-strong); }
.yd-n { position: absolute; top: -12px; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--copper); color: var(--copper-light); font-size: 0.76rem; font-weight: 700; }
.yd-control h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
.yd-control p { margin-top: 8px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; }
.yd-site { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); display: grid; gap: 18px 64px; }
@media (min-width: 900px) { .yd-site { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } .yd-site-link { grid-column: 2; } }
.yd-site-head h3 { margin-top: 10px; font-size: 1.3rem; letter-spacing: -0.02em; max-width: 20ch; }
.yd-site-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.yd-site-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.55; }
.yd-site-list li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--copper); }
.yd-site-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; text-decoration: none; justify-self: start; }
.yd-site-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }

/* ---------- FAQ ---------- */
.faq { padding: 0 var(--gutter) var(--section-y); }
.faq-inner { max-width: var(--content); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq h2 { text-wrap: balance; position: sticky; top: 96px; }
.faq-list { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 2px; font-size: 1.125rem; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--copper-light), var(--copper-light)) center / 14px 1.5px no-repeat,
              linear-gradient(var(--copper-light), var(--copper-light)) center / 1.5px 14px no-repeat;
  transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--copper-light); }
.faq-item summary:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; border-radius: 6px; }
.faq-item p { padding: 0 2px 22px; color: var(--ink-2); line-height: 1.6; max-width: 42rem; }
@media (max-width: 899px) {
  .faq-inner { grid-template-columns: 1fr; }
  .faq h2 { position: static; }
}

.limits { padding: 0 var(--gutter) var(--section-y); }
.limits-inner {
  max-width: var(--content); margin: 0 auto; padding: clamp(22px, 4vw, 44px);
  border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
  display: grid; gap: 14px;
}
.limits h2 { font-size: var(--t-h3); }
.limits p { color: var(--ink-2); max-width: 52rem; }
.limits .urgent { padding: 16px 18px; border-radius: 14px; background: var(--rose-soft); color: var(--ink); border-left: 3px solid var(--rose); }

/* --- 13. Close: sunrise, the bookend to the opening ------------------------- */
.join {
  --join-h: clamp(260px, 34vw, 500px);
  position: relative; padding: 0 var(--gutter) clamp(80px, 10vw, 136px); overflow: hidden; text-align: center;
  background: var(--grain), var(--ground);
}
.join-sky { height: var(--join-h); margin: 0 calc(-1 * var(--gutter)); }
.join-sky svg { width: 100%; height: 100%; max-width: none; }
.join-inner { position: relative; max-width: 60rem; margin: clamp(4px, 1vw, 16px) auto 0; display: grid; justify-items: center; }
.join-brand { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); color: var(--ink); margin-bottom: clamp(22px, 3vw, 34px); }
.join h2 { max-width: 18ch; }
.join-lede { margin-top: 18px; color: var(--ink-2); font-size: var(--t-lead); line-height: 1.5; max-width: 36rem; }
/* The map's four places again, on one horizon line: the day the page
   walked through, now laid out at sunrise. */
.join-path {
  list-style: none; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative;
}
.join-path::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 1px; background: linear-gradient(90deg, transparent, rgba(243, 239, 231, 0.3) 12%, rgba(243, 239, 231, 0.3) 88%, transparent); }
.join-path a {
  position: relative; display: grid; justify-items: center; gap: 2px; padding: 0 8px 12px; min-height: 44px;
  color: var(--ink-2); text-decoration: none; border-radius: 14px;
}
.join-n {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 50%;
  background: var(--ground); border: 1.5px solid rgba(231, 177, 138, 0.6); color: var(--copper-light);
  font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.join-when { font-size: 0.78rem; color: var(--ink-3); }
.join-name { font-weight: 650; color: var(--ink); }
.join-path a:hover .join-n { background: var(--copper-light); color: var(--on-copper); }
.join-path a:hover .join-name { color: var(--copper-light); }
.join-path a:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
/* The optional connected feature: off the day's line, dashed like an
   invitation that hasn't been taken up. */
.join-tc { margin-top: 22px; }
.join-tc a {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; min-height: 44px; padding: 8px 18px;
  border: 1px dashed rgba(242, 205, 175, 0.45); border-radius: var(--r-control); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; line-height: 1.35; text-align: center;
}
.join-tc a:hover { border-color: var(--copper); }
.join-tc a:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.join-tc-k { color: var(--copper-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.join-status { margin-top: clamp(40px, 5vw, 60px); display: grid; justify-items: center; gap: 14px; max-width: 34rem; }
.join-status p:not(.status-pill) { color: var(--ink-2); font-size: 1rem; }
.join-links { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.join-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-radius: var(--r-control); border: 1px solid var(--line); }
.join-links a:first-child { border-color: rgba(231, 177, 138, 0.55); }
.join-links a:hover { border-color: var(--copper); color: var(--ink); }
.join-media { margin-top: 30px; font-size: 0.86rem; color: var(--ink-3); max-width: 30rem; }
@media (max-width: 699px) {
  .join-path { grid-template-columns: minmax(0, 1fr); max-width: 22rem; justify-self: center; }
  .join-path::before { left: 21px; right: auto; top: 20px; bottom: 20px; width: 1px; height: auto; background: rgba(243, 239, 231, 0.24); }
  .join-path a { grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; text-align: left; column-gap: 14px; padding: 6px 8px 6px 0; }
  .join-n { grid-row: 1 / 3; margin: 0; }
  .join-when { align-self: end; }
  .join-name { align-self: start; }
}

.footer {
  display: flex; gap: 24px; justify-content: space-between;
  padding: 26px var(--gutter) calc(36px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.9rem;
}
.footer a { color: var(--ink-2); display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }

/* --- 5b. Trusted contacts -----------------------------------------------------
   Still night, after the plan: two people, each inside their own boundary on
   one horizon; the stretch of horizon between them is the connection.
   Four drawn states, one per stage, all plain CSS on data-stage (so Motion
   off and Reduce Motion show each one finished):
   1 the invitation path rises from Robin's side and stops at the code;
   2 the path reaches Alex's side and waits there as an open, dashed point;
   3 accepted: two lit lines meet in the middle, then Alex's boundary closes
     into a solid arch and two small points mark what is shared;
   4 ended: the line parts, the points go, Alex's boundary opens again.
   Each person's own boundary never changes shape: what is theirs stays
   theirs. Phones never move; only the drawing between them does, and only
   when the visitor picks a stage (or once, on arrival).
   --pw is the phone's width; the horizon sits at --pw * 1.4613 down the
   device, and the wire's own horizon is 44px down its 60px drawing. */
.tc {
  --pw: clamp(196px, min(21vw, calc((100svh - 220px) * 0.479)), 256px);
  --tc-h: calc(var(--pw) * 1.4613);
  position: relative; padding: var(--section-y) var(--gutter); overflow: clip;
  background: var(--grain), linear-gradient(var(--ground), var(--ground-deep) 30%, var(--ground-deep) 75%, var(--ground));
}
.tc-sky { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; }
.tc-sky svg { width: 100%; height: 100%; }
.tc-inner { position: relative; z-index: 1; max-width: var(--content); margin: 0 auto; display: grid; gap: 0; }
.tc-head { max-width: 46rem; }
.tc-head h2 { font-size: var(--t-h2); letter-spacing: -0.032em; line-height: 1.04; max-width: 16ch; text-wrap: balance; }
.tc-eyebrow-opt { color: var(--ink-3); letter-spacing: 0.08em; }
.tc-status { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.tc-status > span:last-child { flex: 1 1 22rem; }
/* What isn't built yet, said beside the status rather than in a footnote. */
.tc-todo { margin-top: 8px; max-width: 46rem; color: var(--ink-3); font-size: 0.88rem; line-height: 1.5; }
.tc-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 26px; padding: 0 11px;
  border: 1px dashed rgba(242, 205, 175, 0.55); border-radius: var(--r-control);
  color: var(--copper-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2;
}
.tc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; }

/* 1. At a glance: six answers, always on the page. */
.tc-glance {
  margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.tc-g { padding: 18px 0 20px; border-top: 1px solid var(--line-strong); }
.tc-g h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.tc-g p { margin-top: 6px; color: var(--ink-2); font-size: 0.98rem; line-height: 1.52; }
.tc-g:last-child h3 { color: var(--copper-light); }

/* 2. The journey. */
.tc-journey-h { margin-top: clamp(56px, 7vw, 96px); font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; }
.tc-stages {
  position: relative; margin-top: 22px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
}
.tc-stage {
  position: relative; appearance: none; font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 6px 10px 6px 0;
  background: transparent; border: 0; color: var(--ink-2); font-weight: 600; font-size: 0.98rem; line-height: 1.3;
  border-radius: 12px; transition: color 200ms var(--ease);
}
.tc-stage > span:last-child { padding-top: 12px; }
.tc-stage-n {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ground-deep); border: 1px solid var(--line-strong); color: var(--ink-2);
  font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.tc-stage:hover { color: var(--ink); }
.tc-stage:hover .tc-stage-n { border-color: var(--copper); }
.tc-stage:active .tc-stage-n { transform: scale(0.94); }
.tc-stage[aria-selected="true"] { color: var(--ink); }
.tc-stage[aria-selected="true"] .tc-stage-n { background: var(--copper-light); border-color: var(--copper-light); color: var(--on-copper); }
.tc-stage:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }

/* What each person does at this stage: always text, never only motion. */
.tc-panel { margin-top: 26px; outline: none; border-radius: 8px; }
.tc-panel:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 6px; }
.tc-say { display: grid; gap: 14px; }
.tc-say[hidden] { display: none; }
/* All four stages share one cell, so the panel keeps the tallest one's
   height and nothing below it (Next stage) moves when the stage changes. */
.js .tc-panel { display: grid; }
.js .tc-say { grid-area: 1 / 1; }
.js .tc-say[hidden] { display: grid; visibility: hidden; }
.tc-say p { display: grid; align-content: start; gap: 4px; max-width: 30rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.tc-say .tc-say-dev { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 46rem; font-size: 0.92rem; color: var(--ink-3); }
.tc-say .tc-say-dev > span:last-child { flex: 1 1 20rem; }
.tc-who { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--copper-light); }
.tc-who--them { color: var(--ink); }

/* Perspective switcher: phones only (one screen at a time). */
.tc-views { display: none; }

/* The two phones and the connection. */
.tc-land { position: relative; margin-top: clamp(28px, 4vw, 44px); display: flex; justify-content: center; align-items: flex-start; }
.tc-land::before {
  /* One faint horizon under both people, edge to edge. */
  content: ""; position: absolute; left: -50vw; right: -50vw; top: var(--tc-h); height: 1px;
  background: rgba(243, 239, 231, 0.07);
}
.tc-side { position: relative; margin: 0; flex: none; width: var(--pw); display: flex; flex-direction: column; }
.tc-side .tc-device { order: 1; }
.tc-side .tc-id { order: 2; margin-top: 22px; }
.tc-side .tc-fail { order: 3; }
.tc-id { display: grid; align-content: start; justify-items: center; text-align: center; gap: 2px; }
.tc-id-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.tc-id-sub { font-size: 0.86rem; color: var(--ink-2); }
.tc-side--you .tc-id-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--copper-light); vertical-align: 1px; }
.tc-side--them .tc-id-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--ink-2); vertical-align: 0; box-sizing: border-box; }
.tc[data-stage="3"] .tc-side--them .tc-id-name::before { background: var(--ink); border-color: var(--ink); }
/* What the phone holds: a recording, the app's example, or a drawing. */
.tc-kind {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 2px 10px;
  border-radius: var(--r-control); border: 1px dashed rgba(243, 239, 231, 0.28);
  font-size: 0.74rem; font-weight: 650; letter-spacing: 0.02em; color: var(--ink-2); line-height: 1.3; text-wrap: balance; text-align: center;
}
.tc-kind:empty { display: none; }
.tc-kind::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box; }
.tc-kind[data-kind="rec"], .tc-kind[data-kind="lapse"] { border-style: solid; border-color: rgba(242, 205, 175, 0.4); color: var(--copper-light); }
.tc-kind[data-kind="rec"]::before, .tc-kind[data-kind="lapse"]::before { background: currentColor; }
.tc-device { position: relative; }
.tc .phone { width: 100%; }
.tc-fail { margin-top: 12px; }

/* Each person's boundary: an arch over their own ground. */
.tc-bound { position: absolute; z-index: 0; left: -35%; top: 0; width: 170%; max-width: none; height: 100%; overflow: visible; pointer-events: none; }
.tc-bound * { vector-effect: non-scaling-stroke; }
.tc-bound-glow { fill: url(#tc-glow); opacity: 0.7; }
.tc-bound-arc { fill: none; stroke: var(--copper-light); stroke-opacity: 0.42; stroke-width: 1.6; }
.tc-bound-close { fill: none; stroke: var(--copper-light); stroke-opacity: 0.5; stroke-width: 1.6; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tc-bound-h { stroke: #F3EFE7; stroke-opacity: 0.24; stroke-width: 1.4; }
.tc-bound-strata { fill: none; stroke: #F2CDAF; stroke-opacity: 0.16; stroke-width: 2; stroke-linecap: round; }
.tc-bound--them .tc-bound-arc { stroke: var(--ink); stroke-opacity: 0.3; stroke-dasharray: 3 8; }
.tc-bound--them .tc-bound-glow { opacity: 0.32; }
.tc[data-stage="3"] .tc-bound--them .tc-bound-close { stroke-dashoffset: 0; }
.tc[data-stage="3"] .tc-bound--them .tc-bound-arc { stroke-opacity: 0.12; }
.tc[data-stage="3"] .tc-bound--them .tc-bound-glow { opacity: 0.7; }
.tc[data-stage="4"] .tc-bound--them .tc-bound-arc { stroke-opacity: 0.22; }

/* The connection: a stretch of horizon between the two boundaries. */
.tc-bridge {
  position: relative; flex: 1 1 0; min-width: 150px; max-width: 300px; height: 112px;
  margin: calc(var(--tc-h) - 44px) calc(var(--pw) * 0.234) 0;
}
.tc-wire { position: absolute; left: 0; top: 0; width: 100%; height: 60px; overflow: visible; }
.tc-wire * { vector-effect: non-scaling-stroke; fill: none; stroke-linecap: round; }
.tc-wire-base { stroke: #F3EFE7; stroke-opacity: 0.3; stroke-width: 1.5; stroke-dasharray: 4 6; }
.tc-wire-invite { stroke: var(--copper-light); stroke-opacity: 0.6; stroke-width: 1.5; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tc-wire-link { stroke: var(--copper-light); stroke-width: 2; stroke-dasharray: 100 100; stroke-dashoffset: 100; }
.tc-code, .tc-door, .tc-shared { position: absolute; transform: translate(-50%, -50%); opacity: 0; }
.tc-code {
  /* The code: a small outlined token at the top of the path, where Robin hands it on. */
  left: 50%; top: 15.5px; width: 13px; height: 13px; border: 1.5px solid var(--copper-light); border-radius: 3px;
  background: var(--ground-deep); transform: translate(-50%, -50%) rotate(45deg);
}
.tc-door {
  /* Waiting at Alex's side: open, hollow, dashed. */
  left: 100%; top: 44px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--copper-light); background: var(--ground-deep);
}
.tc-shared { top: 44px; width: 8px; height: 8px; border-radius: 50%; background: var(--copper-light); box-shadow: 0 0 10px rgba(242, 205, 175, 0.45); }
.tc-shared--1 { left: 34%; }
.tc-shared--2 { left: 66%; }
.tc-end { display: none; }
.tc-cap { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; font-size: 0.86rem; line-height: 1.35; color: var(--ink-2); opacity: 0; text-wrap: balance; }
.tc[data-stage="1"] .tc-cap[data-tc-cap="1"], .tc[data-stage="2"] .tc-cap[data-tc-cap="2"],
.tc[data-stage="3"] .tc-cap[data-tc-cap="3"], .tc[data-stage="4"] .tc-cap[data-tc-cap="4"] { opacity: 1; }

/* The four states. Without script the markup says stage 1, finished. */
.tc[data-stage="1"] .tc-wire-invite { stroke-dashoffset: 50; }
.tc[data-stage="1"] .tc-code { opacity: 1; }
.tc[data-stage="2"] .tc-wire-invite { stroke-dashoffset: 0; }
.tc[data-stage="2"] .tc-code { opacity: 0.35; }
.tc[data-stage="2"] .tc-door { opacity: 1; }
.tc[data-stage="3"] .tc-wire-base, .tc[data-stage="4"] .tc-wire-base { stroke-opacity: 0.12; }
.tc[data-stage="3"] .tc-wire-link { stroke-dashoffset: 0; }
.tc[data-stage="3"] .tc-shared { opacity: 1; }
.tc[data-stage="4"] .tc-wire-link { stroke-dashoffset: 64; stroke: var(--ink-3); stroke-opacity: 0.6; stroke-width: 1.5; }

/* Before the section has arrived (live only), nothing is drawn yet. */
.tc.is-live:not(.is-entered) .tc-wire-invite { stroke-dashoffset: 100; }
.tc.is-live:not(.is-entered) .tc-code, .tc.is-live:not(.is-entered) .tc-cap { opacity: 0; }

/* Live transitions: short, one per change. Acceptance is the one sequence:
   the open point goes, the two lines meet, then Alex's boundary closes and
   the shared points appear. Ending runs it back the other way, quickly. */
.tc.is-live .tc-wire-invite { transition: stroke-dashoffset 1000ms cubic-bezier(0.45, 0, 0.2, 1); }
.tc.is-live .tc-code { transition: opacity 360ms var(--ease) 520ms; }
.tc.is-live .tc-door { transition: opacity 320ms var(--ease); }
.tc.is-live[data-stage="2"] .tc-door { transition-delay: 760ms; }
.tc.is-live .tc-cap { transition: opacity 280ms var(--ease) 480ms; }
.tc.is-live .tc-wire-base { transition: stroke-opacity 400ms var(--ease); }
.tc.is-live .tc-wire-link { transition: stroke-dashoffset 700ms cubic-bezier(0.45, 0, 0.2, 1), stroke 400ms var(--ease), stroke-opacity 400ms var(--ease); }
.tc.is-live[data-stage="3"] .tc-wire-link { transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0, 0.2, 1) 240ms, stroke 300ms var(--ease), stroke-opacity 300ms var(--ease); }
.tc.is-live .tc-bound-close { transition: stroke-dashoffset 500ms var(--ease); }
.tc.is-live[data-stage="3"] .tc-bound-close { transition: stroke-dashoffset 900ms cubic-bezier(0.45, 0, 0.2, 1) 1050ms; }
.tc.is-live .tc-bound--them .tc-bound-arc, .tc.is-live .tc-bound--them .tc-bound-glow { transition: stroke-opacity 500ms var(--ease), opacity 600ms var(--ease); }
.tc.is-live[data-stage="3"] .tc-bound--them .tc-bound-glow { transition-delay: 1100ms; }
.tc.is-live .tc-shared { transition: opacity 300ms var(--ease); }
.tc.is-live[data-stage="3"] .tc-shared { transition: opacity 500ms var(--ease) 1500ms; }
.tc.is-live[data-stage="3"] .tc-shared--2 { transition-delay: 1700ms; }

/* Screens: a recording, or a drawing in HTML sized from the phone's width.
   One is visible at a time; a recording that can't load leaves its drawing. */
.phone--concept .phone-screen { container-type: inline-size; background: #111213; }
.tcs {
  position: absolute; inset: 0; padding: 17cqw 7.5cqw 8cqw; display: flex; flex-direction: column; gap: 3.2cqw;
  font-size: 4.5cqw; line-height: 1.35; color: var(--ink); opacity: 0; visibility: hidden;
  transition: opacity 220ms var(--ease), visibility 0s linear 220ms;
  background: radial-gradient(120% 50% at 50% 0%, rgba(242, 205, 175, 0.07), transparent 70%);
}
.tc[data-stage="1"] .tcs[data-tcs="1"], .tc[data-stage="2"] .tcs[data-tcs="2"],
.tc[data-stage="3"] .tcs[data-tcs="3"], .tc[data-stage="4"] .tcs[data-tcs="4"] { opacity: 1; visibility: visible; transition: opacity 220ms var(--ease) 120ms, visibility 0s; }
/* A stage with a recording shows it; its drawing waits behind as the fallback. */
.tc .tcs--fallback { display: none; }
/* data-fallback lists the stages whose recording failed on that phone. */
.tc-side[data-fallback~="1"] .tcs--fallback[data-tcs="1"], .tc-side[data-fallback~="2"] .tcs--fallback[data-tcs="2"],
.tc-side[data-fallback~="3"] .tcs--fallback[data-tcs="3"], .tc-side[data-fallback~="4"] .tcs--fallback[data-tcs="4"] { display: flex; }
.tc-side[data-fallback~="1"] .tcs--rec[data-tcs="1"], .tc-side[data-fallback~="2"] .tcs--rec[data-tcs="2"],
.tc-side[data-fallback~="3"] .tcs--rec[data-tcs="3"], .tc-side[data-fallback~="4"] .tcs--rec[data-tcs="4"] { display: none; }
.tcs--rec { padding: 0; background: none; }
.tcs p, .tcs ul { margin: 0; }
.tcs-tag {
  align-self: flex-start; padding: 0.6cqw 2.6cqw; border: 1px dashed rgba(242, 205, 175, 0.6); border-radius: 99px;
  font-size: 3.2cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper-light);
}
.tcs-title { font-size: 7cqw; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-top: 1cqw !important; }
.tcs-k { font-size: 3.5cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.tcs-note { font-size: 3.9cqw; color: var(--ink-2); line-height: 1.4; }
.tcs-code { display: grid; gap: 2cqw; padding: 4cqw; border-radius: 4.5cqw; border: 1px solid rgba(242, 205, 175, 0.22); background: rgba(242, 205, 175, 0.04); }
.tcs-dots { display: flex; gap: 2.2cqw; }
.tcs-dots i { width: 7.6cqw; height: 9.6cqw; border-radius: 2cqw; border: 1px solid rgba(243, 239, 231, 0.24); background: rgba(243, 239, 231, 0.04); }
.tcs-btn { display: grid; place-items: center; min-height: 11cqw; padding: 0 4cqw; border-radius: 99px; background: var(--copper); color: var(--on-copper); font-weight: 700; font-size: 4.2cqw; text-align: center; }
.tcs-btn--quiet { background: transparent; color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18); }
.tcs-btn--end { margin-top: auto; }
.tcs-row { display: flex; gap: 2.4cqw; margin-top: auto !important; }
.tcs-row .tcs-btn { flex: 1; }
.tcs-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 2cqw; padding: 1cqw 3cqw; border-radius: 99px; font-size: 3.8cqw; font-weight: 700; }
.tcs-pill::before { content: ""; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; box-sizing: border-box; }
.tcs-pill--pending { border: 1px dashed rgba(242, 205, 175, 0.7); color: var(--copper-light); }
.tcs-pill--pending::before { border: 1px solid currentColor; }
.tcs-pill--on { background: rgba(242, 205, 175, 0.14); color: var(--copper-light); }
.tcs-pill--on::before { background: currentColor; }
.tcs-pill--ended { border: 1px solid rgba(243, 239, 231, 0.22); color: var(--ink-2); }
.tcs-pill--ended::before { border: 1px solid currentColor; }
.tcs-quote { padding-left: 3cqw; border-left: 2px solid rgba(242, 205, 175, 0.5); color: var(--ink); }
.tcs-list { list-style: none; padding: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.tcs-list li { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 2.3cqw 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 3.7cqw; color: var(--ink-2); line-height: 1.3; }
.tcs-list li.is-on { color: var(--ink); }
.tcs-list b { flex: none; position: relative; width: 9cqw; height: 5.4cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.tcs-list b::after { content: ""; position: absolute; top: 0.7cqw; left: 0.7cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: #8d8983; }
.tcs-list li.is-on b { background: var(--copper); }
.tcs-list li.is-on b::after { left: 4.3cqw; background: var(--on-copper); }
.tcs-list--read li { flex-direction: column; align-items: flex-start; gap: 0.6cqw; }
.tcs-list--read span { font-size: 3.3cqw; color: var(--ink-3); }
.tcs-list--read em { font-style: normal; font-weight: 700; color: var(--ink); }
.tcs-points { padding: 0; list-style: none; display: grid; gap: 2cqw; font-size: 3.9cqw; color: var(--ink-2); }
.tcs-points li { display: flex; gap: 2.4cqw; align-items: baseline; }
.tcs-points li::before { content: ""; flex: none; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: var(--copper-light); transform: translateY(-0.4cqw); }
.tcs--quiet, .tcs--ended { justify-content: center; }
.tcs--quiet { align-items: center; text-align: center; gap: 4cqw; }
.tcs--quiet .tcs-tag, .tcs[data-tcs="4"].tcs--ended .tcs-tag { position: absolute; top: 17cqw; left: 7.5cqw; }
.tcs--quiet .tcs-title { font-size: 5.6cqw; color: var(--ink-2); }
.tcs--ended .tcs-pill { margin-top: 1cqw; }
.tc-side--them .tcs--ended { align-items: center; text-align: center; gap: 4cqw; }
.tc-side--them .tcs--ended .tcs-title { font-size: 5.8cqw; }
.tcs-pt { width: 3cqw; height: 3cqw; border-radius: 50%; border: 1px solid rgba(243, 239, 231, 0.45); }
.tcs-pt--ended { border-style: dashed; }

.tc-after { margin-top: 26px; display: grid; justify-items: center; gap: 14px; }
.tc-next {
  appearance: none; font: inherit; cursor: pointer; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px;
  min-height: 44px; padding: 8px 18px; border-radius: var(--r-control); border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); font-weight: 650; font-size: 0.95rem; line-height: 1.3;
}
.tc-next:hover { border-color: var(--copper); }
.tc-next:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
.tc-next-to { color: var(--ink-2); font-weight: 500; }
.tc-next-to:not(:empty)::before { content: "· "; }
html:not(.js) .tc-next { display: none; }
.tc-fine { max-width: 46rem; text-align: center; }

/* 3. What stays private, and what can be shared. The private things sit
   inside a closed boundary of their own; the switches are practice only. */
.tcp { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line-strong); }
.tcp-h { font-size: var(--t-h3); letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; text-wrap: balance; }
.tcp-lede { margin-top: 10px; max-width: 40rem; color: var(--ink-2); font-size: 1.02rem; line-height: 1.55; }
.tcp-grid { margin-top: clamp(26px, 4vw, 40px); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.95fr); gap: 28px clamp(20px, 3vw, 40px); align-items: start; }
.tcp-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tc-mark { flex: none; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; }
.tc-mark--on { background: var(--copper-light); box-shadow: 0 0 10px rgba(242, 205, 175, 0.5); }
.tc-mark--off { border: 1.5px solid var(--ink-3); }
.tc-mark--them { border: 1.5px dashed var(--ink-2); }
.tcp-private {
  /* A dome over its own ground: closed, solid, Robin's alone. */
  position: relative; padding: 58px clamp(18px, 2.4vw, 28px) 22px;
  border: 1.5px solid rgba(242, 205, 175, 0.4); border-bottom: 0; border-radius: 50% 50% 0 0 / 64px 64px 0 0;
  background: radial-gradient(120% 60% at 50% 100%, rgba(242, 205, 175, 0.07), transparent 70%);
}
.tcp-private::after { content: ""; position: absolute; left: -14px; right: -14px; bottom: 0; height: 1.5px; background: rgba(243, 239, 231, 0.24); }
.tcp-private .tcp-k { justify-content: center; text-align: center; }
.tcp-private ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; }
.tcp-private li { position: relative; padding: 8px 0 8px 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.96rem; line-height: 1.42; }
.tcp-private li:last-child { border-bottom: 0; }
.tcp-private li::before { content: ""; position: absolute; left: 1px; top: 1.02em; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.tcp-practice {
  display: inline-flex; align-items: center; min-height: 22px; padding: 0 9px; border-radius: var(--r-control);
  border: 1px dashed rgba(243, 239, 231, 0.3); color: var(--ink-2); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.tcp-switches { margin: 12px 0 0; padding: 0; list-style: none; display: grid; }
.tcp-sw {
  appearance: none; font: inherit; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 2px;
  background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 0.97rem; line-height: 1.38;
}
.tcp-sw b { flex: none; position: relative; width: 44px; height: 26px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.1); transition: background 200ms var(--ease); }
.tcp-sw b::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8d8983; transition: transform 200ms var(--ease), background 200ms var(--ease); }
.tcp-sw[aria-checked="true"] { color: var(--ink); }
.tcp-sw[aria-checked="true"] b { background: var(--copper); border-color: var(--copper); }
.tcp-sw[aria-checked="true"] b::after { transform: translateX(18px); background: var(--on-copper); }
.tcp-sw:hover b { border-color: rgba(242, 205, 175, 0.5); }
.tcp-sw:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; border-radius: 8px; }
.tcp-note { margin-top: 12px; color: var(--ink-3); font-size: 0.88rem; line-height: 1.45; }
.tcp-preview {
  padding: 20px clamp(16px, 2vw, 22px) 18px; border-radius: 22px; background: #111213;
  border: 1.5px dashed rgba(243, 239, 231, 0.2);
}
.tcp-lines { margin: 12px 0 0; padding: 0; list-style: none; display: grid; }
.tcp-lines li { position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 0.96rem; line-height: 1.4; }
.tcp-lines li[hidden] { display: none; }
.tcp-lines li::before { content: ""; position: absolute; left: 1px; top: 1.05em; width: 7px; height: 7px; border-radius: 50%; background: var(--copper-light); }
.tcp-preview.is-live .tcp-lines li { animation: tcp-in 260ms var(--ease); }
@keyframes tcp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tcp-empty { margin-top: 12px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.45; }
.tcp-empty[hidden], .tcp-plan-note[hidden] { display: none; }
.tcp-plan-note { margin-top: 10px; color: var(--ink-2); font-size: 0.88rem; line-height: 1.45; }
.tcp-illus { margin-top: 12px; color: var(--ink-3); font-size: 0.8rem; }
.tcp-foot { margin-top: 22px; max-width: 46rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.tc-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--copper-light); font-weight: 650; text-underline-offset: 4px; }
.plan-next, .sup-next { margin-top: 10px; font-size: 0.95rem; }
.plan-next a, .sup-next a { display: inline-flex; align-items: center; min-height: 44px; color: var(--copper-light); text-underline-offset: 4px; }

/* Desktop: the stage words sit under the two phones they describe. */
@media (min-width: 700px) {
  .tc-inner { grid-template-areas: "head" "glance" "jh" "stages" "land" "panel" "after" "tcp"; }
  .tc-head { grid-area: head; } .tc-glance { grid-area: glance; } .tc-journey-h { grid-area: jh; }
  .tc-stages { grid-area: stages; } .tc-land { grid-area: land; }
  .tc-panel { grid-area: panel; } .tc-after { grid-area: after; } .tcp { grid-area: tcp; }
  .tc-panel { justify-self: center; width: min(100%, calc(var(--pw) * 2.47 + 300px)); }
  .tc-say { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 8vw, 160px); }
  .tc-say .tc-say-them { justify-self: end; }
  .tc-say .tc-say-dev { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
}
@media (min-width: 700px) and (max-width: 1059px) {
  .tc { --pw: clamp(180px, 24vw, 230px); }
  .tc-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcp-private { grid-row: span 2; }
}

/* Phones: one screen at a time, chosen by whose it is; the connection
   becomes a strip between "Robin" and "Alex" above it. */
@media (max-width: 699px) {
  .tc { --pw: min(250px, 66vw); }
  .tc-glance { grid-template-columns: minmax(0, 1fr); }
  .tc-g { padding: 14px 0 16px; }
  .tc-stages { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tc-stages::before { content: ""; position: absolute; left: 22px; top: 22px; bottom: 22px; width: 1px; background: var(--line-strong); }
  .tc-views {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 28px; padding: 5px;
    border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(16, 17, 18, 0.6);
  }
  .tc-view {
    appearance: none; font: inherit; cursor: pointer; display: grid; gap: 1px; justify-items: center; text-align: center;
    min-height: 58px; padding: 8px 8px; border: 0; border-radius: 13px; background: transparent; color: var(--ink-2);
  }
  .tc-view-name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; }
  .tc-view-sub { font-size: 0.8rem; color: var(--ink-3); line-height: 1.3; }
  .tc-view[aria-selected="true"] { background: var(--ink); color: var(--ground); }
  .tc-view[aria-selected="true"] .tc-view-sub { color: #4a4744; }
  .tc-view:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
  .tc-land { flex-direction: column; align-items: center; margin-top: 18px; }
  .tc-land::before { display: none; }
  .tc-side { order: 2; }
  .tc-side .tc-id { margin-top: 16px; }
  .tc[data-view="you"] .tc-side--them, .tc[data-view="them"] .tc-side--you { display: none; }
  .tc.is-live .tc-side { animation: tc-side-in 240ms var(--ease); }
  .tc-bridge { order: 1; flex: none; width: 100%; max-width: 420px; min-width: 0; height: 96px; margin: 0 0 14px; }
  .tc-wire, .tc-cap { left: 72px; right: 72px; width: auto; }
  .tc-code { left: 50%; }
  .tc-door { left: calc(100% - 72px); }
  .tc-shared--1 { left: calc(72px + (100% - 144px) * 0.34); }
  .tc-shared--2 { left: calc(72px + (100% - 144px) * 0.66); }
  .tc-end { display: block; position: absolute; top: 44px; transform: translateY(-50%); width: 60px; overflow-wrap: anywhere; line-height: 1.2; font-size: 0.82rem; font-weight: 700; color: var(--ink-2); }
  .tc-end--you { left: 0; color: var(--copper-light); }
  .tc-end--them { right: 0; text-align: right; }
  .tc-cap { top: 62px; transform: none; max-width: none; }
  .tcp-grid { grid-template-columns: minmax(0, 1fr); }
  .tc-after { justify-items: stretch; }
  .tc-fine { text-align: left; }
}
@keyframes tc-side-in { from { opacity: 0; } to { opacity: 1; } }

html.motion-off .tc *, html.motion-off .tc { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tc *, .tc { transition: none !important; animation: none !important; }
}
/* Without script every stage's words show, in order; the phones show stage 1. */
html:not(.js) .tc-say[hidden] { display: grid; margin-top: 18px; }
html:not(.js) .tc-stage { cursor: default; }
html:not(.js) .tcp-sw { cursor: default; }

/* --- Privacy note page ------------------------------------------------------- */
.doc { max-width: 42rem; margin: 0 auto; padding: 140px var(--gutter) 96px; }
.doc h1 { font-size: var(--t-h2); }
.doc .updated { margin-top: 12px; color: var(--ink-3); font-size: 0.95rem; }
.doc h2 { margin-top: 48px; font-size: var(--t-h3); }
.doc p { margin-top: 12px; color: var(--ink-2); }
.doc .back { display: inline-block; margin-top: 56px; font-weight: 650; }

/* --- Motion off: the page-level control stops decorative movement too ----- */
html.motion-off .tx-scene *, html.motion-off .map-ring { animation: none !important; }
html.motion-off .g-core, html.motion-off .g-halo { transition: none; }

/* --- Reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .yours-sun, .yours-stop, .yours-line, .feature--yours .eyebrow { transition: none; }
  html.intro-live .intro { height: 100svh; }
  .intro-lockup, .intro-cue { display: none !important; }
  .intro-copy, .intro-clip { will-change: auto; }
  .intro-cue-line { animation: none; }
  .clip-media video, .clip-poster, .map-shot, .tx-scene { transition: none; }
  .map-shot.is-active { transition-delay: 0s; }
  html.js .map-panel:not([hidden]) { animation: none; }
  [data-par] { transform: none !important; }
  .tx-tab, .tx-tab::before, .tx-thumb, .tx-open, .tx-open::after, .plan-part::before, .sitenav a::after,
  .map-next::after, .detail summary::before, .topbar, .g-core, .g-halo { transition: none; }
  .tx-scene *, .map-ring, .faq-item summary::after { animation: none !important; transition: none !important; }
  .m-core, .m-halo, .moment.is-paused .moment-art svg, .moment-option, .moment-mark, .reset-opt, .yd-arc, .yd-acc-pt, .yd-item, .yd-switch-track, .yd-switch-knob { transition: none; }
}