/* d-tailed.com. One stylesheet for every page: the d-tailed root, the 404,
   and PartNeur's landing and legal pages.
   Display type is Outfit (the app's own face, self-hosted from /assets/fonts,
   OFL); body text is the platform's UI face. The drawing motif is the
   companion's: stroke-only, round caps, one line weight. */

@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/assets/fonts/outfit-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --paper: #f4f6f2;
  --paper-raised: #fbfcfa;
  --paper-sunk: #e9eee9;
  --ink: #142320;
  --ink-soft: #4d5e59;
  --ink-faint: #7d8b86;
  --line: #d6ded9;
  /* The partner's growth sheets are drawn in the two accents: change one and
     update `_inks` in tool/site_companion/companion_frames_test.dart, then
     re-run scripts/dev/site_companion.sh. */
  --accent: #0b6e63;
  --on-accent: #ffffff;

  /* The app's five kinds, one colour each, used the same way the app uses
     them: a thing's colour says what kind of thing it is. */
  --kind-task: #3f8fd6;
  --kind-habit: #4f9e5f;
  --kind-goal: #df6352;
  --kind-idea: #e0a92f;
  --kind-mood: #9a63c0;

  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 22px;
  --radius-sm: 12px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}

/* Dark, keyed on the one switch theme.js always sets (the system theme
   until the visitor picks one with the header toggle). */
:root[data-theme="dark"] {
  --paper: #0f1513;
  --paper-raised: #161e1b;
  --paper-sunk: #0b100e;
  --ink: #e7ede9;
  --ink-soft: #a3b2ac;
  --ink-faint: #74837d;
  --line: #26322e;
  --accent: #5bc4b0;
  --on-accent: #0b1512;
  --kind-task: #7fb8ec;
  --kind-habit: #8dcb98;
  --kind-goal: #f09485;
  --kind-idea: #f0c86a;
  --kind-mood: #c49ae0;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2.5px; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { left: 8px; }

/* ── Header ─────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 68px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark img { width: 30px; height: auto; }
.wordmark b { font-weight: 700; color: var(--accent); }

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
}
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav .nav-cta {
  color: var(--on-accent);
  background: var(--accent);
  padding: 9px 16px;
  border-radius: 999px;
}
.nav .nav-cta:hover { color: var(--on-accent); filter: brightness(1.08); }

@media (max-width: 760px) {
  .nav { gap: 14px; }
  .nav li:not(:last-child):not(.keep) { display: none; }
}

/* Theme toggle: a sun in light, a moon in dark. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper-raised);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.theme-toggle .sun, .theme-toggle .rays { transition: opacity 0.25s ease, transform 0.35s ease; transform-origin: 12px 12px; }
.theme-toggle .moon { opacity: 0; transform: rotate(-40deg) scale(0.6); transform-origin: 12px 12px; transition: opacity 0.25s ease, transform 0.35s ease; }
[data-theme="dark"] .theme-toggle .sun, [data-theme="dark"] .theme-toggle .rays { opacity: 0; transform: rotate(60deg) scale(0.5); }
[data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none; }

/* One image per theme, switched by the same data-theme attribute. */
.themed { display: contents; }
.themed .dk { display: none; }
:root[data-theme="dark"] .themed .lt { display: none; }
:root[data-theme="dark"] .themed .dk { display: block; }

/* ── Shared section rhythm: label, short headline, one sentence ─────── */

section { padding: clamp(72px, 11vw, 136px) 0; }
section + section { border-top: 1px solid var(--line); }

.label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* A synapse: two terminals and the gap between them. */
.label::before {
  content: "";
  width: 22px;
  height: 8px;
  background:
    radial-gradient(circle at 4px 4px, currentColor 3px, transparent 3.5px),
    radial-gradient(circle at 18px 4px, transparent 2px, currentColor 2.2px, currentColor 3px, transparent 3.5px);
}

@media (max-width: 520px) { .label { font-size: 11.5px; letter-spacing: 0.1em; gap: 8px; } }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 64px); }
.section-head h2 { font-size: clamp(34px, 5.2vw, 56px); }
.section-head p { margin-top: 18px; font-size: 19px; color: var(--ink-soft); max-width: 600px; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 112px); }

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
}

.hero h1 {
  font-size: clamp(48px, 8.4vw, 98px);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.scribble { position: relative; white-space: nowrap; }
.scribble svg {
  position: absolute;
  left: -3%;
  bottom: -0.14em;
  width: 106%;
  height: 0.32em;
  overflow: visible;
  pointer-events: none;
}
.scribble path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 1.1s 0.35s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero .lede {
  margin-top: 28px;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--ink-soft);
  max-width: 540px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 36px;
}
.play-badge { display: inline-block; margin-left: -10px; line-height: 0; }
.play-badge img { width: 196px; }
.cta-note { font-size: 15px; color: var(--ink-faint); }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  color: var(--ink-soft);
}
.facts li { display: inline-flex; align-items: center; gap: 8px; }
.facts li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}

/* ── The device: a phone in 3D ─────────────────────────────────────── */
/* A front face (the frame and the screen), a solid body behind it built from
   stacked slabs (site.js adds them; without script the phone is flat), side
   buttons, a camera hole and a glass glare. --ry / --rx set the resting
   angle; the hero's follows the pointer. The frame stays dark in both
   themes, like a real phone. */

.device { perspective: 1700px; perspective-origin: 50% 40%; }

.phone {
  --ry: -18deg;
  --rx: 7deg;
  --rz: 1.5deg;
  --frame: #1b2120;
  --body: #2c3533;
  --body-edge: #0e1312;
  /* The frame around the screen, and the screen's own corner. */
  --bezel: 10px;
  /* The screenshots' status bars are padded inside this corner
     (STATUS_BAR_INSET in scripts/dev/site_screenshots.sh): change both. */
  --screen-radius: 39px;
  position: relative;
  border-radius: calc(var(--screen-radius) + var(--bezel) - 1px);
  padding: var(--bezel);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.16), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.08)),
    var(--frame);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.18),
    inset 0 0 0 4px #070a09;
  transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz));
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phone img {
  position: relative;
  border-radius: var(--screen-radius);
  width: 100%;
  aspect-ratio: 9 / 20;
  object-fit: cover;
  object-position: top;
  background: var(--paper-sunk);
  transform: translateZ(0.5px);
}
/* Glass: a soft diagonal glare and the punch-hole camera. */
.phone::after {
  content: "";
  position: absolute;
  inset: var(--bezel);
  border-radius: var(--screen-radius);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 2.7%, #050707 0 5.5px, rgba(120, 140, 135, 0.35) 6px 6.8px, transparent 7.3px),
    linear-gradient(118deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 100%);
  transform: translateZ(1px);
}
/* The body's back plate and the ground shadow. */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--body), var(--body-edge));
  transform: translateZ(-15px);
  box-shadow: 0 60px 90px -36px rgba(8, 18, 15, 0.55), 0 24px 40px -24px rgba(8, 18, 15, 0.4);
}
.phone .slab {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, var(--body), var(--body-edge));
  transform: translateZ(var(--z));
  pointer-events: none;
}
.phone .key {
  position: absolute;
  width: 4px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b4643, #121716);
  transform: translateZ(-7.5px);
}
.phone .key.power { right: -3px; top: 27%; height: 8%; }
.phone .key.vol { right: -3px; top: 15%; height: 10%; }
.phone .key.l1 { left: -3px; top: 18%; height: 6%; }

/* The hero phone, with the companion's line floating in front of it. */
.hero-visual { position: relative; justify-self: center; width: min(100%, 360px); }
.hero-visual .phone { --ry: -20deg; --rx: 8deg; --rz: 2deg; }

.bubble {
  position: absolute;
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 12px 16px;
  max-width: 230px;
  box-shadow: 4px 4px 0 var(--ink);
}

/* Anchored by its tip over the partner's head. In the dashboard screenshot
   the partner is perched, out of its card, which is where it talks in the
   app (720x1600: the head's top-centre at x 196, y 1161, printed by
   scripts/dev/site_screenshots.sh; re-measure when the shot is regenerated).
   The bubble rises from the head and spills past the phone's left edge.
   --tip is the tip's distance from the bubble's left edge; left is a share
   of the phone's width and top a share of its height, so the head's x
   (196 / 720) and y (1161 / 1600) are placed directly, and the bubble then
   lifts by its own height plus the tip. Lifted off the glass in Z so it
   moves with the phone but floats in front of it. */
.hero-visual .bubble {
  --tip: 150px;
  --head-x: calc(var(--bezel) + 0.272 * (100% - 2 * var(--bezel)));
  left: calc(var(--head-x) - var(--tip));
  top: calc(var(--bezel) + 0.726 * (100% - 2 * var(--bezel)));
  width: max-content;
  transform: translateZ(70px) translateY(calc(-100% - 14px));
}
.hero-visual .bubble::after {
  content: "";
  position: absolute;
  left: var(--tip);
  bottom: -10px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: var(--paper-raised);
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { width: min(76%, 320px); margin-top: 56px; }
  /* Spill past the phone, but never past the 16px page gutter. */
  .hero-visual .bubble { --tip: 60px; font-size: 14px; max-width: 190px; padding: 10px 12px; }
}

/* ── Capture: one sentence, sorted ──────────────────────────────────── */

.capture-demo {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 44px);
  display: grid;
  gap: 28px;
}

.typed {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.typed .caret {
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.typed mark {
  background: none;
  color: inherit;
  border-bottom: 3px solid var(--k);
  padding-bottom: 1px;
}

.sorted {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.chip {
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--k) 13%, var(--paper-raised));
  border: 1.5px solid color-mix(in srgb, var(--k) 45%, transparent);
}
.chip small {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--k) 70%, var(--ink));
  margin-bottom: 6px;
}
.chip span { font-weight: 600; }
/* The kind's icon, in the kind's colour, before its label. */
.kind-icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.chip em { display: block; font-style: normal; color: var(--ink-soft); font-size: 15px; margin-top: 2px; }

@media (max-width: 760px) { .sorted { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.k-task { --k: var(--kind-task); }
.k-habit { --k: var(--kind-habit); }
.k-goal { --k: var(--kind-goal); }
.k-idea { --k: var(--kind-idea); }
.k-mood { --k: var(--kind-mood); }

/* ── Partner: growth and voices ─────────────────────────────────────── */

/* Each stage is one cell of a sprite sheet (scripts/dev/site_companion.sh:
   one row per stage, each the stage's BEGINNING). Every cell shares one box,
   so the drawing keeps its real size from stage to stage and the head sits
   at the same height in each. */
.growth {
  --growth-sheet: url("/partneur/img/companion-growth-teal.webp");
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 0;
  margin: 0 0 clamp(56px, 8vw, 88px);
  list-style: none;
  position: relative;
}
:root[data-theme="dark"] .growth { --growth-sheet: url("/partneur/img/companion-growth-mint.webp"); }
.growth::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 38px;
  border-bottom: 2px dashed var(--line);
  z-index: -1;
}
.growth li { flex: 1; display: grid; justify-items: center; gap: 14px; }
.growth .grow {
  display: block;
  width: min(100%, 170px);
  /* The cell size scripts/dev/site_companion.sh prints ("cells of WxH"). */
  aspect-ratio: 375 / 412;
  background-image: var(--growth-sheet);
  background-repeat: no-repeat;
  background-size: 100% 500%;
  background-position: 0 calc(var(--stage) * 25%);
}
.growth li > span:last-child {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-faint);
  background: var(--paper);
  padding: 0 8px;
}

@media (max-width: 600px) {
  .growth { gap: 4px; }
  .growth li > span:last-child { font-size: 12px; padding: 0 4px; }
}

.voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.voice {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 30px;
  display: grid;
  align-content: start;
  gap: 18px;
}
.voice h3 { font-size: 22px; }
.voice .bubble { position: static; max-width: none; font-size: 19px; }
.voice p { color: var(--ink-soft); font-size: 15px; }

@media (max-width: 860px) { .voices { grid-template-columns: 1fr; } }

/* The 404 page's sleeping partner and its "zzz", drawn as text like the
   app draws it: three glyphs rising and fading a third of a cycle apart. */
.sleeper { position: relative; display: block; }
.sleeper img { width: 100%; }
.zzz { position: absolute; left: 56%; top: -6%; font-family: var(--display); font-weight: 700; font-style: italic; color: var(--accent); }
.zzz i { position: absolute; font-style: inherit; opacity: 0; animation: zzz 3.6s linear infinite; }
.zzz i:nth-child(2) { animation-delay: -1.2s; }
.zzz i:nth-child(3) { animation-delay: -2.4s; }
@keyframes zzz {
  0% { opacity: 0; transform: translate(0, 0); font-size: 14px; }
  15% { opacity: 0.85; }
  65% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(12px, -46px); font-size: 22px; }
}

/* ── A day: alternating rows of real screens ────────────────────────── */

.tour { display: grid; gap: clamp(72px, 10vw, 120px); }

.tour-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.tour-row:nth-child(even) .tour-shot { order: -1; }

.tour-copy .when {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: color-mix(in srgb, var(--k, var(--accent)) 72%, var(--ink));
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.tour-copy .when::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--k, var(--accent));
}
.tour-copy h3 { font-size: clamp(30px, 4vw, 44px); }
.tour-copy p { margin-top: 16px; font-size: 18px; color: var(--ink-soft); max-width: 460px; }
.tour-copy ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tour-copy li { display: flex; gap: 12px; color: var(--ink-soft); }
.tour-copy li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 5px;
  border: 2px solid var(--k, var(--accent));
  border-radius: 50%;
}

.tour-shot {
  justify-self: center;
  width: min(100%, 330px);
  position: relative;
}
.tour-row .phone { --ry: -16deg; }
.tour-row:nth-child(even) .phone { --ry: 16deg; --rz: -1.5deg; }
/* Entering rows turn in from a steeper angle and settle. */
html:not(.no-js) .tour-row.reveal:not(.in) .phone { transform: rotateY(calc(var(--ry) * 2.2)) rotateX(calc(var(--rx) * 1.6)) rotateZ(var(--rz)) translateY(30px); }
.tour-shot::before {
  content: "";
  position: absolute;
  inset: 12% -16% -6% -16%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--k, var(--accent)) 16%, transparent);
  z-index: -1;
  filter: blur(2px);
}

.tour-crop { width: min(100%, 440px); perspective: 1400px; }
.tour-crop img {
  border-radius: 20px;
  box-shadow: 0 40px 70px -30px rgba(20, 35, 32, 0.45), 0 0 0 1px var(--line);
  transform: rotateY(14deg) rotateX(8deg) rotateZ(-2deg);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html:not(.no-js) .tour-row.reveal:not(.in) .tour-crop img { transform: rotateY(32deg) rotateX(14deg) rotateZ(-2deg) translateY(30px); }
.sunday-row { margin-top: clamp(56px, 8vw, 96px); }

@media (max-width: 820px) {
  .tour-row { grid-template-columns: 1fr; }
  .tour-row:nth-child(even) .tour-shot { order: 0; }
  .tour-shot { width: min(78%, 300px); }
}

/* ── Sunday: the four steps ─────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  border-top: 2px solid var(--ink);
}
.steps li {
  counter-increment: step;
  padding: 22px 24px 0 0;
}
.steps li::before {
  content: "0" counter(step);
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 10px;
}
.steps h3 { font-size: 24px; margin-bottom: 8px; }
.steps p { color: var(--ink-soft); font-size: 16px; }

@media (max-width: 820px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}



/* ── Privacy: plain facts ───────────────────────────────────────────── */

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ledger li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.ledger svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ledger h3 { font-size: 20px; margin-bottom: 4px; }
.ledger p { color: var(--ink-soft); font-size: 16px; }

@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } }

/* ── Maker note ─────────────────────────────────────────────────────── */

.note {
  max-width: 720px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.012em;
}
.note p + p { margin-top: 18px; }
.note .sig {
  margin-top: 26px;
  font-size: 16px;
  color: var(--ink-faint);
  font-weight: 500;
}

/* ── FAQ ────────────────────────────────────────────────────────────── */

.faq { max-width: 780px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg) translateY(-4px);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 680px; }

/* ── Closing call ───────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing img.companion { width: 170px; margin: 0 auto 28px; }
.closing h2 { font-size: clamp(38px, 6vw, 68px); }
.closing p { margin: 18px auto 0; color: var(--ink-soft); font-size: 19px; max-width: 520px; }
.closing .cta-row { justify-content: center; }
.closing .play-badge { margin-left: 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 40px 0 48px;
  font-size: 15px;
  color: var(--ink-faint);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px 32px;
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* ── Legal pages ────────────────────────────────────────────────────── */

.policy { max-width: 760px; padding-top: clamp(48px, 7vw, 88px); padding-bottom: 96px; }
.policy h1 { font-size: clamp(38px, 6vw, 56px); margin-bottom: 10px; }
.policy .updated { color: var(--ink-faint); font-size: 15px; margin-bottom: 44px; }
.policy h2 { font-size: 24px; margin: 48px 0 14px; }
.policy h3 { font-size: 18px; margin: 28px 0 8px; }
.policy p,
.policy li { color: var(--ink-soft); }
.policy p + p,
.policy p + ul,
.policy ul + p { margin-top: 14px; }
.policy ul,
.policy ol { padding-left: 22px; margin: 12px 0 0; }
.policy li + li { margin-top: 6px; }
.policy strong { color: var(--ink); }
.policy code { font-size: 0.92em; background: var(--paper-sunk); padding: 1px 6px; border-radius: 6px; }
.policy table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 15px; }
.policy th,
.policy td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.policy th { color: var(--ink); font-family: var(--display); font-weight: 600; }
.policy .back { display: inline-block; margin-top: 56px; font-family: var(--display); font-weight: 500; }

/* ── Entrance motion, opt-out respected ─────────────────────────────── */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone, .tour-crop img { transition: none; }
  html:not(.no-js) .tour-row.reveal:not(.in) .phone { transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz)); }
  html:not(.no-js) .tour-row.reveal:not(.in) .tour-crop img { transform: rotateY(14deg) rotateX(8deg) rotateZ(-2deg); }
  .scribble path { animation: none; stroke-dashoffset: 0; }
  .typed .caret { animation: none; }
  .zzz i { animation: none; opacity: 0.85; }
  .zzz i:nth-child(2) { transform: translate(6px, -20px); font-size: 17px; }
  .zzz i:nth-child(3) { transform: translate(12px, -40px); font-size: 20px; }
}

/* No script, no hidden content. */
.no-js .reveal { opacity: 1; transform: none; }