/* ═══════════════════════════════════════════════════════════════════════════
   ubenotes.com

   The palette is the product's own (apps/web/app/globals.css): every colour is
   measured off a real purple yam. FLESH is the violet interior, CREAM the pale
   ring under the skin, SKIN the brown peel that supplies every neutral. Nothing
   here is a pure grey and nothing is a blue-violet.

   Three rules this page adds on top of the app's system:
     · Tagalog is never italicised. English and Tagalog share one roman, one
       weight and one colour, because to Ube they are one sentence. The single
       italic on the page is the product's own: the Minutes draft line.
     · Kalamansi means a hole in a transcript, here as in the app. It marks the
       other transcriber's "(Speaking in foreign language)" and nothing else.
     · One violet field. The page is cream, opens once into deep flesh (the
       cut), and ends in soil.

   THEME CONTRACT, as in the app: the bare :root is the complete light palette;
   the dark blocks only re-point semantic tokens at primitives defined here.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 360 680;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Georgia resized to Newsreader's text cut (computed from both fonts' hmtx and
   hhea tables), so the swap does not move the page. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 91.5%;
  ascent-override: 80.3%;
  descent-override: 28.95%;
  line-gap-override: 0%;
}

/* ── LAYER 0 · PRIMITIVES ─────────────────────────────────────────────────── */
:root {
  --ube-50:  #f9f3fa;
  --ube-100: #f1e5f4;
  --ube-200: #e3cde8;
  --ube-300: #cfacd7;
  --ube-400: #b585c0;
  --ube-500: #9865a4;
  --ube-600: #764981;
  --ube-700: #5f3768;
  --ube-800: #482a4f;
  --ube-900: #321d37;
  --ube-950: #1d0f21;

  --cream-0:   #ffffff;
  --cream-50:  #faf7f9;
  --cream-100: #f3eef2;
  --cream-200: #e9e1e8;

  --skin-100: #efe9e5;
  --skin-200: #e2d9d4;
  --skin-300: #cfc4bd;
  --skin-500: #8d7e76;
  --skin-600: #6e6058;
  --skin-700: #574a45;
  --skin-900: #2a2220;
  --skin-950: #191412;

  --night-bg:          #171219;
  --night-surface:     #201a23;
  --night-elevated:    #29222c;
  --night-line:        #372e3b;
  --night-line-2:      #4b3f50;
  --night-control:     #86768e;
  --night-ink:         #f0eaee;
  --night-ink-2:       #c0b4bd;
  --night-ink-3:       #9c8f9a;
  --night-accent-soft: #351e3a;

  --kal-100: #f7efd8;
  --kal-300: #e0c164;
  --kal-500: #a8861f;
  --kal-700: #7a5d12;
  --kal-950: #241d10;

  --sili-300: #ff9a70;

  --pula-300: #e06e80;
  --pula-700: #8f1e33;

  --dahon-300: #7cc99b;
}

/* ── LAYER 1 · SEMANTIC (light) ───────────────────────────────────────────── */
:root {
  --bg:               var(--cream-50);
  --bg-sunken:        var(--cream-100);
  --surface:          var(--cream-0);

  --hairline:         var(--skin-200);
  --hairline-control: var(--skin-500);

  --ink:        var(--skin-900);
  --ink-2:      var(--skin-700);
  --ink-3:      var(--skin-600);
  --ink-invert: var(--cream-0);

  --accent:        var(--ube-600);
  --accent-hover:  var(--ube-700);
  --accent-active: var(--ube-800);
  --accent-strong: var(--ube-700);
  --settle-tint:   var(--ube-100);

  --gap-ink:  var(--kal-700);
  --gap-line: var(--kal-500);
  --gap-fill: var(--kal-100);

  --stop: var(--pula-700);

  --focus-ring: var(--ube-600);

  /* The two fields that are the same in both themes. */
  --cut:  var(--ube-900);
  --soil: var(--skin-950);

  --ff-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", Palatino, Georgia, serif;
  --ff-sans:  system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono:  ui-monospace, "SF Mono", Menlo, monospace;

  /* The spec's ramp was 2.9rem + 1.6rem + 5.6vw. "Gets ka ni Ube." needs 6.57px
     of line per px of type (measured), so at 320px it wanted 286px of a 280px
     column and broke in two. Same 5.75rem cap, same size from 1186px up; a
     flatter approach so the tagline holds one line down to 320. */
  --fs-h1:    clamp(2.4rem, 1.375rem + 5.9vw, 5.75rem);
  --fs-h2:    clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
  --fs-said:  clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  --fs-lede:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body:  1.1875rem;
  --fs-small: 0.9375rem;
  --fs-ui:    0.8125rem;

  --wrap:   1180px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --rhythm: clamp(4.5rem, 10vw, 9rem);

  --shadow-1: 0 1px 2px -1px rgb(25 20 18 / 0.08), 0 1px 1px rgb(25 20 18 / 0.04);
  --shadow-2: 0 8px 24px -8px rgb(25 20 18 / 0.18), 0 2px 6px -2px rgb(25 20 18 / 0.08);
  --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-draw: 900ms;
  --dur-settle: 900ms;
  --stagger: 140ms;
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── LAYER 1b · DARK — reassignment only, twice, byte-identical ───────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:               var(--night-bg);
    --bg-sunken:        var(--ube-950);
    --surface:          var(--night-surface);
    --hairline:         var(--night-line);
    --hairline-control: var(--night-control);
    --ink:        var(--night-ink);
    --ink-2:      var(--night-ink-2);
    --ink-3:      var(--night-ink-3);
    --ink-invert: var(--ube-950);
    --accent:        var(--ube-300);
    --accent-hover:  var(--ube-200);
    --accent-active: var(--ube-100);
    --accent-strong: var(--ube-200);
    --settle-tint:   var(--night-accent-soft);
    --gap-ink:  var(--kal-300);
    --gap-line: var(--kal-500);
    --gap-fill: var(--kal-950);
    --stop: var(--pula-300);
    --focus-ring: var(--ube-300);
    --shadow-1: 0 1px 2px -1px rgb(0 0 0 / 0.5), 0 1px 1px rgb(0 0 0 / 0.3);
    --shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.65), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  }
}
:root[data-theme="dark"] {
  --bg:               var(--night-bg);
  --bg-sunken:        var(--ube-950);
  --surface:          var(--night-surface);
  --hairline:         var(--night-line);
  --hairline-control: var(--night-control);
  --ink:        var(--night-ink);
  --ink-2:      var(--night-ink-2);
  --ink-3:      var(--night-ink-3);
  --ink-invert: var(--ube-950);
  --accent:        var(--ube-300);
  --accent-hover:  var(--ube-200);
  --accent-active: var(--ube-100);
  --accent-strong: var(--ube-200);
  --settle-tint:   var(--night-accent-soft);
  --gap-ink:  var(--kal-300);
  --gap-line: var(--kal-500);
  --gap-fill: var(--kal-950);
  --stop: var(--pula-300);
  --focus-ring: var(--ube-300);
  --shadow-1: 0 1px 2px -1px rgb(0 0 0 / 0.5), 0 1px 1px rgb(0 0 0 / 0.3);
  --shadow-2: 0 8px 24px -8px rgb(0 0 0 / 0.65), 0 2px 6px -2px rgb(0 0 0 / 0.4);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Author display rules (grid, flex) outrank the UA's [hidden]; this restores it. */
[hidden] { display: none !important; }

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }

h1 {
  font-size: var(--fs-h1);
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 16ch;
  text-wrap: balance;
}

/* The tagline and its descriptor, set as the brand guide sets them: the
   tagline in Newsreader 500 in the mark's violet, and beneath it the
   plain-English descriptor in the interface sans, tertiary ink, "always the
   quieter of the two". */
.tagline { display: block; font-weight: 500; color: var(--accent); }
.descriptor {
  display: block; margin-top: 1rem;
  font: 400 var(--fs-lede)/1.35 var(--ff-sans); letter-spacing: 0; color: var(--ink-3);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 440;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 20ch;
  text-wrap: balance;
}

strong { font-weight: 640; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
a:focus-visible,
button:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 3px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  padding: 0.6rem 0.9rem; border-radius: 8px;
  background: var(--accent); color: var(--ink-invert);
  font: 600 var(--fs-small)/1.3 var(--ff-sans); text-decoration: none;
}
.skip:focus { top: 0.75rem; color: var(--ink-invert); }
/* main carries tabindex="-1" only so the skip link can land on it; the jump
   itself is the feedback, and a ring round the whole page is not. */
#main:focus { outline: none; }

.prose { max-width: 62ch; color: var(--ink-2); text-wrap: pretty; }
.prose + .prose { margin-top: 1rem; }
h2 + .prose { margin-top: 1.5rem; }

.footnote {
  max-width: 62ch;
  margin-top: 1.5rem;
  font: 400 var(--fs-ui)/1.5 var(--ff-sans);
  color: var(--ink-3);
}

/* Sections own their rhythm. `.continues` joins a section to the one above
   when both sit on the same field, so the gap is one rhythm, not two. */
main > section { padding-block: var(--rhythm); }
main > .continues { padding-top: 0; }

.band--ring { background: var(--bg-sunken); }
.band--cut  { background: var(--cut);  color: var(--night-ink); }
.band--soil { background: var(--soil); color: var(--night-ink); border-top: 1px solid var(--night-line); }
.band--cut .prose { color: var(--night-ink-2); }

/* ── HEADER ───────────────────────────────────────────────────────────────── */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }

/* Inline flow, not flex: vertical-align actually seats the mark on the
   baseline (see UbeWordmark in apps/web/app/UbeMark.tsx). */
.wordmark {
  font-size: 1.5rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  color: var(--accent-strong); text-decoration: none; white-space: nowrap;
}
.wordmark:hover { color: var(--accent-strong); }
/* Brand guide: two violets. The mark with the word is ube-700 (above); the
   mark alone is ube-600 (the strokes, the favicon); on dark both are ube-200. */
.wordmark--invert,
.wordmark--invert:hover { color: var(--ube-200); }
.mark { display: inline-block; flex: none; width: 1em; height: 1em; }
.wordmark .mark { vertical-align: -0.1417em; margin-right: 0.32em; }

.bar__link { font: 600 var(--fs-small)/1 var(--ff-sans); text-decoration: none; }
.bar__link:hover { text-decoration: underline; }

/* ── BUTTON ───────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.875rem; padding: 0 1.35rem;
  border: 0; border-radius: 8px;
  background: var(--accent); color: var(--ink-invert);
  font: 600 var(--fs-small)/1.3 var(--ff-sans); text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.button:hover { background: var(--accent-hover); color: var(--ink-invert); }
.button:active { background: var(--accent-active); transform: translateY(1px); }
.button:focus-visible { border-radius: 8px; }
.button[disabled] { opacity: 0.7; cursor: default; transform: none; }

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(2.5rem, 7vh, 5rem); }

.lede {
  max-width: 40rem; margin-top: 1.5rem;
  font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-2);
  text-wrap: pretty;
}
/* The heading is two voices; the lede is a third. With the same 1.5rem it used
   between the tagline and its descriptor, all three read as one block. */
.hero .lede { margin-top: 2.5rem; }

.cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem;
  margin-top: 2rem;
  font: 400 var(--fs-small)/1.3 var(--ff-sans); color: var(--ink-3);
}

/* The stage. Left ends spread, right ends tight: the mark's own geometry. */
/* The middle column is the drawing's whole width, so it has to be wide enough
   for the steepest diagonal to keep the mark's angle (site.js measures it).
   A share of the stage rather than a share of the viewport: the stage stops
   growing at 1180px and the drawing should stop with it.

   The left share carries the right one. Widening only the drawing narrows the
   utterances, which adds lines, which spreads the three moments further apart,
   which makes the jog longer again — the long run never catches up. Widening
   both (1.6 and 0.9, from 1.3 and 0.5) holds the utterances at the same line
   counts and leaves the drawing a long run about twice its jog: 142 against 77
   at 1180, 166 against 77 at 1440, at the mark's 49° in both. The record pays
   for it in width, which suits a record meant to be small and exact. */
.stage {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(9rem, 0.9fr) minmax(0, 1fr);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* One row of three. Each caption is inside the side it labels, so it keeps the
   same gap above the utterances and above the card; centring the kept side as
   a whole then carries its caption down with it. (The card lands in exactly
   the place it did when it was centred on its own, so the geometry below is
   unchanged — only the caption moved.) */
.stage__side { min-width: 0; }
.stage__side--kept { align-self: center; }
/* A clear gap before the strokes begin, whatever the last line happens to
   reach: the drawing should never look as if it grew out of a word. */
.stage__side--said { padding-right: 1rem; }

.stage__cap { margin-bottom: 1.25rem; font: 400 var(--fs-ui)/1.3 var(--ff-sans); color: var(--ink-3); }

/* The gap sets how far apart the three moments sit, and so how steep the
   strokes have to be to reach them. Loose enough to be three moments, tight
   enough that the drawing is not a cliff. */
.said { display: grid; gap: clamp(1.5rem, 2.4vw, 2rem); padding: 0; list-style: none; }
.said__item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0.75rem; align-items: baseline; }
.said__text { font-size: var(--fs-said); line-height: 1.3; letter-spacing: -0.005em; text-wrap: pretty; }

.stamp {
  font: 400 0.75rem/1 var(--ff-mono); letter-spacing: 0.005em; color: var(--ink-3);
  font-variant-numeric: tabular-nums lining-nums;
}

.stage__strokes { align-self: stretch; position: relative; color: var(--accent); }
.stage__strokes svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* 3, not the mark's 2.4: at 2.4 the drawing was the same hairline as the 22px
   logo in the header, beside a 29px serif. The logo itself stays 2.4. */
.stage__strokes path {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  /* Hidden until drawn. opacity as well as the dash, because a fully offset
     dash still leaves a round cap's dot at the start of the path. */
  stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0;
}
.stage__strokes path:nth-child(2) { --i: 1; }
.stage__strokes path:nth-child(3) { --i: 2; }
.stage.is-drawn .stage__strokes path {
  stroke-dashoffset: 0; opacity: 1;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-settle), opacity 1ms linear;
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* ── PAPER (the record and the Minutes) ───────────────────────────────────── */
/* Old-style figures are the page's; a specimen is the product's own output, and
   the product sets lining tabular figures. */
.paper, .chat {
  font-variant-numeric: lining-nums tabular-nums;
}
.paper {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
}

.record { padding: 1.25rem 1.5rem 1.5rem; font-size: 1rem; line-height: 1.55; }

.paper__head {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--hairline);
  font: 400 0.75rem/1.3 var(--ff-sans); color: var(--ink-3);
}

.doc-h { margin: 1.1rem 0 0.4rem; font-size: 1.05rem; font-weight: 640; color: var(--accent-strong); }
.record .doc-h { margin-top: 0; }

.record__list { display: grid; gap: 0.6rem; padding-left: 1.25rem; }
.record__list li { margin-left: -0.25rem; padding: 0.1rem 0.25rem; border-radius: 4px; }
.record__list li:nth-child(2) { --i: 1; }
.record__list li:nth-child(3) { --i: 2; }

/* The app's idiom for text that has just landed. No fill mode on purpose:
   before its delay a line is untinted, then it tints and settles. */
@keyframes settle {
  from { background-color: var(--settle-tint); }
  to   { background-color: transparent; }
}
.stage.is-drawn .record__list li {
  animation: settle var(--dur-settle) var(--ease-settle);
  animation-delay: calc(var(--dur-draw) * 0.8 + var(--i, 0) * var(--stagger));
}

/* ── CONTRAST ─────────────────────────────────────────────────────────────── */
.versus {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: 3rem;
}
.versus__col figcaption { max-width: 34ch; margin-bottom: 1rem; font: 400 var(--fs-ui)/1.45 var(--ff-sans); color: var(--ink-3); }
/* 1.9 in both columns, not just the one with the gap marks: eight filled boxes
   need the leading, and the two transcripts have to share a baseline grid so
   the only difference between them is the words and the colour. */
.versus__text { font-size: 1.125rem; line-height: 1.9; }
.versus__col--other .versus__text { color: var(--ink-2); }

.gapmark {
  padding: 0.05em 0.3em; border-radius: 3px;
  background: var(--gap-fill); color: var(--gap-ink);
  border-bottom: 1px dashed var(--gap-line);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.pair {
  text-decoration: underline dotted var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 0.22em;
}

.aside { margin-top: 2.5rem; font-size: var(--fs-lede); line-height: 1.35; }

/* ── SPLIT (text beside a specimen) ───────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
/* The text comes first in the source, for phones and for screen readers, and
   moves to the right on a wide screen. */
.split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split--flip > .split__text { order: 2; }

/* ── MINUTES ──────────────────────────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 1.1rem 1.5rem 0; }
.tab {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline-control); border-radius: 6px;
  background: var(--surface); color: var(--ink);
  font: 400 var(--fs-ui)/1.3 var(--ff-sans); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.tab:hover { border-color: var(--accent); }
.tab:active { transform: translateY(1px); }
.tab:focus-visible { border-radius: 6px; }
.tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink-invert); font-weight: 600; }

@keyframes panel-in { from { opacity: 0; } }
.doc__body { padding: 1.25rem 1.5rem 1.75rem; font-size: 1rem; line-height: 1.6; animation: panel-in var(--dur-1) var(--ease-out); }
.doc__body:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); border-radius: 0 0 10px 10px; }

.doc-title { font-size: 1.3rem; font-weight: 680; line-height: 1.25; letter-spacing: 0.01em; }
/* The one italic on the page, because the product sets this line in italics. */
.draft-line { margin: 0.25rem 0 0.9rem; font-style: italic; color: var(--ink-3); }
.doc-field { margin: 0.2rem 0; }
.doc-list { display: grid; gap: 0.3rem; margin: 0.4rem 0; padding-left: 1.4rem; }
/* Three middle dots at body size read as dust on the paper; a little larger
   and they read as "something is left out here", which is their whole job. */
.doc-elide { margin: 1rem 0 0.25rem; font-size: 1.25rem; text-align: center; letter-spacing: 0.4em; color: var(--ink-3); }

/* ── THE CUT (Ask Ube) — night primitives, so it reads the same in both themes */
.chat {
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--night-surface); color: var(--night-ink);
  border: 1px solid var(--night-line-2); border-radius: 10px;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.55);
  font-size: 1rem; line-height: 1.6;
}
.chat__head {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
  font: 600 0.7rem/1 var(--ff-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ube-300);
}
.chat__head .mark { font-size: 0.95rem; }
.chat__q {
  width: fit-content; max-width: 85%; margin: 0 0 1.1rem auto; padding: 0.55rem 0.8rem;
  background: var(--night-accent-soft); border-radius: 10px;
  font: 400 var(--fs-small)/1.45 var(--ff-sans);
}
.chat__a p { margin-bottom: 0.6rem; }
.chat__a ul { display: grid; gap: 0.55rem; padding-left: 1.2rem; }
.chip {
  display: inline-block; padding: 0.1rem 0.5rem; vertical-align: 0.08em;
  background: var(--night-accent-soft); color: var(--ube-200);
  border: 1px solid var(--ube-700); border-radius: 999px;
  font: 400 0.75rem/1.2 var(--ff-sans); font-variant-numeric: tabular-nums lining-nums;
}

/* ── HOW IT WORKS ─────────────────────────────────────────────────────────── */
/* The specimen here is a 21rem popover, not a document: the wide column belongs
   to the three steps. (The shared 7/5 split gave the popover 638px to float in
   and squeezed the prose into 456px.) */
.how .split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
/* Flush with the page's left edge, and centred against the steps rather than
   pinned level with the heading: it is a specimen in its column, not a caption
   on the H2. */
.how .split__specimen { align-self: center; }

.steps { display: grid; gap: 1.75rem; margin: 2rem 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.5rem; counter-increment: step; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  /* The numeral's line box is taller than the title's, which dropped its
     baseline 4px below the words it numbers. */
  margin-top: -0.25rem;
  font-size: 1.5rem; line-height: 1.25; color: var(--accent); font-variant-numeric: lining-nums;
}
.steps h3 { font-size: var(--fs-body); font-weight: 640; line-height: 1.3; }
.steps p { margin-top: 0.25rem; color: var(--ink-2); }

/* The recorder, as macOS draws it: a dark popover hung from the menu bar.
   Night primitives in both themes; dahon green is the app's "healthy". */
.popover {
  position: relative; display: grid; gap: 0.7rem;
  width: min(100%, 21rem); margin: 0.75rem 0 0; padding: 1rem 1.1rem 1.1rem;
  background: var(--night-elevated); color: var(--night-ink);
  border: 1px solid var(--night-line-2); border-radius: 14px;
  box-shadow: var(--shadow-2);
  font: 400 0.875rem/1.4 var(--ff-sans);
}
.popover::before {
  content: ""; position: absolute; top: -7px; right: 2.25rem; width: 13px; height: 13px;
  background: var(--night-elevated);
  border-top: 1px solid var(--night-line-2); border-left: 1px solid var(--night-line-2);
  border-top-left-radius: 3px; transform: rotate(45deg);
}
.popover__title { font-size: 1rem; font-weight: 600; }
.popover__title .mark { vertical-align: -0.1417em; margin-right: 0.4em; color: var(--ube-200); }
.popover__rec { display: flex; align-items: center; gap: 0.55rem; font-size: 1.125rem; }
.popover__dot { flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--sili-300); }
.popover__ok { color: var(--dahon-300); }
.popover__link { color: var(--ube-300); }
.popover__button { margin-top: 0.3rem; padding: 0.6rem; border-radius: 8px; background: var(--night-line); text-align: center; font-weight: 600; }

/* ── PLAIN ANSWERS ────────────────────────────────────────────────────────── */
.qa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 6vw, 6rem); margin-top: 2.5rem; }
.qa dt { margin-bottom: 0.35rem; font-weight: 640; }
.qa dd { max-width: 52ch; color: var(--ink-2); }

/* ── BOOK A DEMO ──────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; max-width: 28rem; }
.field-row { display: grid; gap: 0.35rem; }
.field-row label { font: 600 var(--fs-ui)/1.3 var(--ff-sans); color: var(--ink-2); }
.optional { font-weight: 400; color: var(--ink-3); }
.field-row input {
  width: 100%; min-height: 2.875rem; padding: 0.7rem 0.8rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline-control); border-radius: 8px;
  font: 400 1rem/1.3 var(--ff-sans);        /* 16px: iOS does not zoom */
  transition: border-color var(--dur-1) var(--ease-out);
}
.field-row input:hover { border-color: var(--accent); }
.field-row input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }
.field-row input[aria-invalid="true"] { border-color: var(--stop); }
.form__error { font: 400 var(--fs-ui)/1.4 var(--ff-sans); color: var(--stop); }
.form__note  { font: 400 var(--fs-ui)/1.45 var(--ff-sans); color: var(--ink-3); }
.form .button { justify-self: start; }
.hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }

.form-done { max-width: 28rem; }
.form-done:focus { outline: none; }
.form-done__line { margin-bottom: 1rem; font-size: var(--fs-lede); line-height: 1.35; overflow-wrap: anywhere; }
.linklike {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em;
  font: 400 var(--fs-small)/1.3 var(--ff-sans);
}
.linklike:hover { color: var(--accent-hover); }

/* ── FOOTER (soil) ────────────────────────────────────────────────────────── */
.band--soil { padding-block: var(--rhythm) 2.5rem; }
.signoff { max-width: 20ch; font-size: var(--fs-h2); font-weight: 440; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.signoff__fil { margin-top: 0.75rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); color: var(--night-ink-3); }
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 2rem;
  margin-top: clamp(3rem, 8vw, 6rem); padding-top: 1.5rem; border-top: 1px solid var(--night-line);
  font: 400 var(--fs-ui)/1.4 var(--ff-sans); color: var(--night-ink-3);
}
.foot a:not(.wordmark) { color: var(--night-ink-2); }
.foot a:not(.wordmark):hover { color: var(--night-ink); }
/* No `margin-right: auto`: pushing the notice and the address to the far edge
   is the one place the page stopped being left-aligned. */
.foot .wordmark { font-family: var(--ff-serif); }

/* ── ONE COLUMN ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Source order already reads caption, utterances, drawing, caption, card. */
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage__side--kept { align-self: start; }
  .stage__side--said { padding-right: 0; }
  /* Below 900 the drawing is a fixed figure, not a function of where the lines
     break, so the utterances can take a measure instead of the whole column. */
  .said__text { max-width: 38ch; }
  /* Square and left-aligned: the mark's own proportions only survive the turn
     downwards if the box is as wide as it is tall, and the page has one left
     edge. */
  .stage__strokes { justify-self: start; width: 5.5rem; height: 5.5rem; margin-block: 1.75rem 1.25rem; }
  /* `.how .split` has to be named here: it is two classes deep, so it outranks
     a bare `.split` and kept How it works in two columns on a phone, wrapping
     the steps to one word a line with the popover beside them. */
  .split,
  .split--flip,
  .how .split,
  .versus,
  .qa { grid-template-columns: minmax(0, 1fr); }
  .split--flip > .split__text { order: 0; }
  .popover { margin-inline: 0; }
  /* The nub stays top right at every width: that is where a macOS popover's
     arrow sits, under its menu-bar icon. */
}

/* ── STILLNESS ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage__strokes path { stroke-dashoffset: 0; opacity: 1; }
}

@media print {
  .bar__link, .cta-row, .demo, .skip { display: none; }
  .band--cut, .band--soil { background: none; color: inherit; }
}