/*
  Verbale v4 "Inchiostro ed evidenziatore": public pages (server rendered, no framework).
  docs/DESIGN-V4.md (identity, sections 2 to 5) on the DESIGN-V3 structure.

  How the backend serves these files
  - Serve the folder public-pages/pub/ at /pub/ (public.css, site.js, wave.svg, favicon.svg, fonts/).
    The pages link public.css and site.js with ?v=<n>: bump it in every page when either file changes
    (/pub is cached for an hour, a new page with an old stylesheet would break the layout).
  - Render the .html files in public-pages/ as templates (backend verbale/api/templates.py, autoescape on) at:
      /                      index.html            (logged out visitors only, must answer 200)
      /login                 login.html
      /password-dimenticata  password-dimenticata.html
      /reimposta-password    reimposta-password.html
      /privacy               privacy.html
      /termini               termini.html
      404 responses          404.html
      500 responses          errore.html

  Template placeholders (all optional, an undefined value renders as empty)
  - {{ csrf_token }}  every form: hidden input name="csrf_token" (double submit with cookie verbale_csrf)
  - {{ error }}       form pages: Italian message shown in the role="alert" region,
                      rendered only inside {% if error %} ... {% endif %}
  - {{ msg }}         login: neutral info line (e.g. "Password aggiornata: puoi accedere")
  - {{ email }}       login and password-dimenticata: prefill of the email field
  - {{ next }}        login: path to go back to after the login (hidden input name="next")
  - {{ token }}       reimposta-password: reset token (hidden input name="token")
  - sent              password-dimenticata: true after the POST, shows the confirmation
  - token_invalid     reimposta-password: true when the link is expired or already used
  - google_signin     login: true to show the "Accedi con Google" button (GET /api/auth/google/start)
  - request_id        errore.html: support code shown to the person

  Form fields posted (same names as v1)
  - POST /login                 email, password, remember ("1" when checked), next, csrf_token
  - POST /password-dimenticata  email, csrf_token
  - POST /reimposta-password    token, password, conferma, csrf_token

  Scripts: one tiny inline line per page (adds the "js" class before first paint; the backend
  hashes it into the CSP) and /pub/site.js (deferred): scroll reveals, highlighter draw-ins, scenes,
  counters, password reveal, table of contents. Everything works without it.

  Design: v4 tokens (same values as frontend/src/styles/index.css, DESIGN-V4 section 3). Flat and solid:
  no gradients, no halos, no translucent panels, no texture. Ink (dark) by default; the home is ink only.
  Privacy, termini, 404, errore and the auth pages follow prefers-color-scheme (html.theme-auto, light =
  "Carta"); the left side of the auth pages stays ink (.ink).
  Signature: the highlighter (.hl, .mark: solid --hl block, ink text, drawn in once), the red and blue
  pencil (3 px rules and margin notes in Geist italic small caps, .pn), the stamp grade (.stamp),
  the speaker timeline (pen colors, shape markers, yellow playhead).
  Fonts self hosted, latin subset: Bricolage Grotesque (opsz 14..48, wght 400..800), Geist (UI and
  reading), Geist Mono (times, scores, numbers). Display type uses the --track-* and --lh-* tokens.
*/

@font-face {
  font-family: 'Bricolage Grotesque V';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/bricolage-grotesque-latin-opsz.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist V';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin-wght.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono V';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono-latin-wght.woff2') format('woff2');
}

/* metric-matched fallbacks: the swap to the web fonts moves no line (no layout shift) */
@font-face {
  font-family: 'Bricolage Fallback';
  font-weight: 800;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Neue Bold');
  size-adjust: 92.4%; ascent-override: 100.6%; descent-override: 29.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica Neue');
  size-adjust: 104.7%; ascent-override: 96%; descent-override: 28.2%; line-gap-override: 0%;
}

@property --ph { syntax: '<number>'; inherits: true; initial-value: 0.62; }

/* ------------------------------------------------------------------ tokens */

/* Inchiostro (dark, default). .ink forces it on a block inside a light page (auth side). */
:root, .ink {
  color-scheme: dark;
  --bg: #0e0f12;
  --surface: #15171c;
  --surface-2: #1b1e24;
  --surface-3: #23272f;
  --border: #2a2e37;
  --border-strong: #3b404c;
  --text: #f3f2ee;
  --text-2: #d2d0c9;
  --muted: #9e9c95;

  --hl: #ffe14a;
  --hl-hover: #f0d446;
  --hl-ink: #141414;
  --sent-tint: rgb(243 242 238 / 0.07); /* the sentence playing: neutral, never yellow */
  --red: #f2555a;
  --red-text: #f2555a;
  --blue: #6b8bff;
  --green: #3fbf80;
  --orange: #f38b3a;
  --focus: var(--hl);
  --shadow: none;

  /* speaker pen set: --pN fill, --pN-edge the darker outline used for "their side" */
  --p-blue: #6b8bff;   --p-blue-edge: #2d53d2;
  --p-red: #f2555a;    --p-red-edge: #d3363b;
  --p-green: #3fbf80;  --p-green-edge: #1e8a58;
  --p-orange: #f38b3a; --p-orange-edge: #c2610f;
  --p-teal: #2ec4b6;   --p-teal-edge: #0e8c80;
  --p-brown: #c08b5c;  --p-brown-edge: #8a5a2e;
  --p-slate: #94a3b8;  --p-slate-edge: #4b5563;
  --p-pink: #e879a6;   --p-pink-edge: #b83f72;
}
:root {
  --font-display: 'Bricolage Grotesque V', 'Bricolage Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Geist V', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono V', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* display type: tracking by size (heavy weights never touch), line heights that keep È, à, g, p */
  --track-hero: -0.03em;
  --track-xl: -0.024em;
  --track-lg: -0.018em;
  --track-md: -0.012em;
  --track-sm: -0.004em;
  --lh-hero: 1.02;
  --lh-display: 1.06;
  --lh-head: 1.14;
  /* the highlighter tip: slightly irregular corners */
  --hl-radius: 3px 7px 4px 8px / 6px 3px 8px 4px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-draw: cubic-bezier(0.55, 0.05, 0.3, 1);
  --wrap: 1200px;
}

/* Carta (light) for the pages that follow the system theme */
@media (prefers-color-scheme: light) {
  .theme-auto {
    color-scheme: light;
    --bg: #f6f6f3;
    --surface: #ffffff;
    --surface-2: #f0f0ec;
    --surface-3: #e7e7e1;
    --border: #e2e2dc;
    --border-strong: #cfcfc8;
    --text: #121318;
    --text-2: #2e3038;
    --muted: #5c606a;
    --sent-tint: #ebeae5;
    --red: #d3363b;
    --red-text: #c22f34;
    --blue: #2d53d2;
    --green: #1e8a58;
    --orange: #c2610f;
    --focus: var(--blue);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px -12px rgb(0 0 0 / 0.18);
  }
}

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text-2);
  font: 400 16px/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 600; color: var(--text); }
code, kbd { font-family: var(--font-mono); }
button, input { font: inherit; }
::selection { background: var(--hl); color: var(--hl-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ic { width: 16px; height: 16px; flex: none; }

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 18px; border-radius: 10px;
  background: var(--hl); color: var(--hl-ink);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 14px; }

/* ------------------------------------------------------------------ signature: highlighter and pencil */

/* inline marker for running text: solid block, ink text, irregular tip */
.hl {
  background: var(--hl); color: var(--hl-ink);
  border-radius: var(--hl-radius); padding: 0 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* the sentence playing: a neutral tint; the solid marker stays on the current word only */
.sent {
  background: var(--sent-tint); color: inherit;
  border-radius: var(--hl-radius); padding: 0 0.12em; margin: 0 -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* display marker: <span class="mark" data-mark="word">word</span>. The block (::before, a tiny skew)
   and the ink copy of the word (::after) are drawn in together from left to right, once. The copy has
   empty alternative text, so the word is read once. */
.mark { position: relative; display: inline-block; padding: 0 0.14em; margin: 0 -0.02em; isolation: isolate; }
.mark::before, .mark::after { position: absolute; clip-path: inset(-20% -4% -20% -4%); }
.mark::before {
  content: ''; inset: 0.07em -0.01em 0.01em; z-index: 1;
  background: var(--hl); border-radius: 5px 12px 7px 14px / 10px 6px 14px 8px; transform: skewX(-0.6deg) rotate(-0.6deg);
}
.mark::after {
  content: attr(data-mark); content: attr(data-mark) / ''; inset: 0; z-index: 2;
  padding: inherit; color: var(--hl-ink); white-space: nowrap;
}

/* the same marker on running text (one line): line box of its own, no skew */
.mark-sm { line-height: 1.32; padding: 0 0.16em; margin: 0 -0.06em; }
.mark-sm::before { inset: 0.04em 0 0.02em; border-radius: var(--hl-radius); transform: none; }

/* pencil margin notes: Geist italic small caps, red for problems, blue for our side and decisions */
.pn {
  display: inline-block; font: italic 600 16px/1.1 var(--font-ui); font-variant-caps: all-small-caps;
  letter-spacing: 0.04em; color: var(--blue); white-space: nowrap;
}
/* red notes use the text-safe red (light paper: AA for small text) */
.pn-red { color: var(--red-text); }
.pn-green { color: var(--green); }

/* the stamp (timbro): grade letter in a double ring, rotated, color by grade */
.stamp {
  --s: 64px; --c: var(--blue);
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s);
  border: 2px solid var(--c); border-radius: 50%; color: var(--c); transform: rotate(-6deg);
}
.stamp::before { content: ''; position: absolute; inset: calc(var(--s) * 0.075); border: 2px solid var(--c); border-radius: 50%; }
.stamp > b { font: 800 calc(var(--s) * 0.5)/1 var(--font-display); color: inherit; letter-spacing: 0; margin-top: -0.04em; }
.stamp-c { --c: var(--text); }
.stamp-d { --c: var(--red); }

/* ------------------------------------------------------------------ type */

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px;
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; flex: none; background: var(--text); }
.eyebrow-num { font: 500 12px/1 var(--font-mono); letter-spacing: 0.02em; color: var(--text); }
.eyebrow-center { display: flex; justify-content: center; }

.h-sec {
  font-family: var(--font-display); font-weight: 780;
  font-size: clamp(36px, 5vw, 72px); line-height: var(--lh-display); letter-spacing: var(--track-xl);
  color: var(--text); text-wrap: balance;
}
.dim { color: var(--muted); }
.lead {
  margin-top: 24px; max-width: 54ch;
  font-size: clamp(17px, 1.3vw, 19px); line-height: 1.62; color: var(--text-2);
}
.lead a, .revoke a, .legal-col a, .doc a, .auth-foot a, .field-row a, .auth-after a, .foot-grid p a {
  color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.lead a:hover, .revoke a:hover, .legal-col a:hover, .doc a:hover, .auth-foot a:hover,
.field-row a:hover, .auth-after a:hover, .foot-grid p a:hover { color: var(--text); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ buttons */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent;
  font: 600 15px/1 var(--font-ui); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer; color: var(--text); background: transparent;
  transition: background-color 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
}
.btn .ic { transition: transform 0.3s var(--ease-out); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--hl); color: var(--hl-ink); }
.btn-primary:hover { background: var(--hl-hover); }
.btn-secondary { border-color: var(--border-strong); background: transparent; color: var(--text); }
.btn-secondary:hover { border-color: var(--muted); background: var(--surface-2); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }
.btn-sm { height: 38px; padding: 0 15px; font-size: 14px; }
.btn-block { width: 100%; height: 50px; }
.btn svg:not(.ic) { width: 18px; height: 18px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--bg); border-bottom: 1px solid transparent;
  transition: border-color 0.25s;
}
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav-bar { display: flex; align-items: center; gap: 20px; height: 68px; }
.brand {
  display: inline-flex; align-items: baseline; flex: none;
  font: 700 26px/1 var(--font-display); letter-spacing: -0.028em; color: var(--text); text-decoration: none;
}
/* the period of the wordmark: the highlighter tip */
.brand-dot { display: inline-block; width: 0.2em; height: 0.2em; margin-left: 0.05em; background: var(--hl); border-radius: 1px; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a {
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  font: 500 14.5px/1 var(--font-ui); color: var(--text-2); transition: color 0.15s, background-color 0.15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a[aria-current='page'] { color: var(--text); text-decoration: underline; text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.nav-bar > .btn { margin-left: 8px; }
/* home: the nav button stays an outline while the hero shows its own primary (one primary per view) */
.nav.cta-on .nav-cta { background: var(--hl); color: var(--hl-ink); border-color: transparent; }
.nav.cta-on .nav-cta:hover { background: var(--hl-hover); }
.nav-bar > .nav-end { margin-left: auto; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-bar { height: 60px; }
  .nav-bar > .btn { margin-left: auto; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; padding: clamp(150px, 19vh, 196px) 0 0; }
.hero-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--font-ui); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
}
.rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--red); }
.kicker .rec-word { font: 600 11px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--red); }
.kicker .sep { width: 1px; height: 12px; background: var(--border-strong); }
.hero-title {
  margin-top: 34px;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(50px, 8.6vw, 128px); line-height: var(--lh-hero); letter-spacing: var(--track-hero);
  color: var(--text);
}
.hero-title .ln { display: block; }
.hero-sub {
  margin-top: 32px; max-width: 40ch;
  font-size: clamp(18px, 1.55vw, 22px); line-height: 1.5; color: var(--text-2); text-wrap: balance;
}
.hero-cta { justify-content: center; margin-top: 40px; }

/* ------------------------------------------------------------------ product mock (flat) */

.stage { position: relative; width: min(1120px, 100% - 40px); margin: clamp(72px, 9vw, 112px) auto 0; }
.app {
  position: relative; overflow: hidden; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: 13px; color: var(--text-2); text-align: left;
}
.m-bar {
  display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 18px;
  border-bottom: 1px solid var(--border); background: var(--bg);
}
.m-bar .brand { font-size: 17px; }
.m-crumb { font-size: 13px; color: var(--muted); }
.m-crumb b { margin: 0 6px; color: var(--border-strong); font-weight: 400; }
.m-search {
  margin-left: auto; display: inline-flex; align-items: center; gap: 22px; height: 30px; padding: 0 6px 0 12px;
  border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 12.5px;
}
kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--surface-2);
  font-size: 10.5px; color: var(--text-2); font-weight: 500;
}
.m-head { display: flex; align-items: center; gap: 14px; padding: 22px 24px 18px; }
.m-logo {
  --c: var(--p-brown);
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
  background: var(--c); color: var(--hl-ink); font: 760 15px/1 var(--font-display); letter-spacing: 0;
}
.m-logo-sm { width: 28px; height: 28px; border-radius: 7px; font-size: 11px; }
.m-logo-b { --c: var(--p-slate); }
.m-logo-c { --c: var(--p-teal); }
.m-titles { min-width: 0; }
.m-title { font: 720 25px/1.16 var(--font-display); letter-spacing: var(--track-md); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-meta { margin-top: 7px; font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--muted); }
.m-meta i { font-style: normal; color: var(--border-strong); margin: 0 3px; }
.m-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; flex: none;
  border-radius: 7px; border: 1px solid var(--border-strong); background: var(--surface);
  font: 500 12px/1 var(--font-ui); color: var(--text-2); white-space: nowrap;
}
.m-head .m-chip-ok { margin-left: 22px; }
.m-chip-ok i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

/* speaker timeline: flat lanes, pen colors, shape markers, yellow playhead */
.m-tl {
  --lab: 118px;
  position: relative; display: grid; grid-template-columns: var(--lab) 1fr; row-gap: 10px; align-items: center;
  margin: 0 18px; padding: 18px 16px 12px; border-radius: 12px;
  background: var(--bg); border: 1px solid var(--border);
}
.m-row { display: contents; }
.m-who { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.av {
  --c: var(--p-blue);
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c); color: var(--hl-ink);
  font: 650 9.5px/1 var(--font-ui); letter-spacing: 0.02em; font-style: normal;
}
.av-lg { width: 42px; height: 42px; font-size: 13px; }
.spk1 { --c: var(--p-blue); --e: var(--p-blue-edge); }
.spk2 { --c: var(--p-orange); --e: var(--p-orange-edge); }
.spk3 { --c: var(--p-teal); --e: var(--p-teal-edge); }
.spk4 { --c: var(--p-pink); --e: var(--p-pink-edge); }
.m-lane, .lane { position: relative; display: block; height: 14px; border-radius: 4px; background: var(--surface-2); }
.m-lane b, .lane b {
  position: absolute; top: 1px; bottom: 1px; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%);
  border-radius: 4px; background: var(--c); border: 1.5px solid var(--e);
}
/* our side: filled, no outline */
.is-us b { border-color: var(--c); }
.m-marks, .m-axis { grid-column: 2; position: relative; }
.m-marks { height: 14px; }
.mk { position: absolute; top: 2px; left: calc(var(--l) * 1%); width: 10px; height: 10px; margin-left: -5px; }
.mk-dec { background: var(--blue); border-radius: 1px; }
.mk-risk { width: 12px; margin-left: -6px; background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mk-step { background: var(--text); border-radius: 50%; }
.m-axis { display: flex; justify-content: space-between; font: 500 10.5px/1 var(--font-mono); color: var(--muted); }
.m-playhead {
  position: absolute; top: 12px; bottom: 30px; width: 2px; margin-left: -1px;
  left: calc(16px + var(--lab) + (100% - 32px - var(--lab)) * var(--ph));
  background: var(--hl);
}
.m-playhead em {
  position: absolute; top: -2px; left: 50%; transform: translate(-50%, -100%);
  padding: 3px 6px; border-radius: 4px; background: var(--hl); color: var(--hl-ink);
  font: 600 10.5px/1 var(--font-mono); font-style: normal;
}

.m-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; margin-top: 18px; border-top: 1px solid var(--border); }
.m-main { padding: 18px 24px 24px; min-width: 0; }
.m-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); }
.m-tabs span { padding: 4px 0 11px; margin-bottom: -1px; font-size: 13px; font-weight: 500; color: var(--muted); }
.m-tabs .is-on { color: var(--text); border-bottom: 2px solid var(--text); }
.m-h { margin: 18px 0 8px; font: 600 10.5px/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.m-p { font-size: 14.5px; line-height: 1.7; color: var(--text); max-width: 64ch; }
.ev {
  display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 7px; margin-left: 2px; vertical-align: 1px;
  border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface-2);
  font: 500 11.5px/1 var(--font-mono); color: var(--text-2); white-space: nowrap;
}
.ev svg { width: 9px; height: 9px; }
.ev-on { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); }
/* moments with the pencil: a rule, the note in the margin */
.m-moments { display: grid; gap: 8px; }
.m-mo {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  padding: 7px 0 7px 12px; font-size: 14px; line-height: 1.5; color: var(--text);
}
.m-mo .pn { font-size: 15.5px; }
/* the line playing now: sentence tinted, word under the marker */
.m-now {
  display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center;
  margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border);
}
.m-now .mono { font-size: 11.5px; color: var(--muted); }
.m-now-t { font: 600 16px/1.5 var(--font-display); letter-spacing: var(--track-sm); color: var(--text); }
.m-now-t .sent { padding: 0.05em 0.12em; }
.kw { border-radius: var(--hl-radius); padding: 0.02em 0.1em; margin: 0 -0.1em; }
.kw-on { background: var(--hl); color: var(--hl-ink); }

.m-rail { padding: 18px; border-left: 1px solid var(--border); display: grid; gap: 12px; align-content: start; }
.m-card { display: grid; gap: 10px; padding: 14px 15px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.m-score { grid-template-columns: auto 1fr; align-items: center; gap: 16px; }
.m-score .stamp { --s: 54px; }
.m-score-n { font: 500 30px/1 var(--font-mono); letter-spacing: -0.03em; color: var(--text); }
.m-score-n small { margin-left: 4px; font-size: 11px; letter-spacing: 0; color: var(--muted); }
.m-k, .panel-k {
  display: block; font: 600 10.5px/1.2 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.panel-k i { font-style: normal; margin: 0 4px; color: var(--border-strong); }
.m-v { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--text); }
.m-s { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.m-ratio { display: flex; gap: 2px; height: 8px; border-radius: 3px; overflow: hidden; }
.m-ratio i { flex: var(--w); background: var(--c); }
.m-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; color: var(--text-2); }
.m-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); }

/* dock: play, waveform (played part in ink white, unplayed in border), time */
.m-dock {
  display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg);
}
.m-play {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--text); color: var(--bg);
}
.m-play svg { width: 14px; height: 14px; margin-left: 2px; }
.m-time { font: 500 12.5px/1 var(--font-mono); color: var(--text); white-space: nowrap; }
.m-time i { font-style: normal; color: var(--muted); }
.m-speed { font: 600 11.5px/1 var(--font-mono); color: var(--text); padding: 5px 7px; border-radius: 5px; border: 1px solid var(--border-strong); }
.wave { position: relative; flex: 1; height: 28px; min-width: 60px; }
.wave::before, .wave::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask: url('wave.svg') left center / 384px 100% repeat-x; mask: url('wave.svg') left center / 384px 100% repeat-x;
}
.wave::before { background: var(--border-strong); }
.wave::after { background: var(--text); clip-path: inset(0 calc(100% - var(--ph) * 100%) 0 0); }
.wave > i { position: absolute; top: -3px; bottom: -3px; left: calc(var(--ph) * 100%); width: 2px; margin-left: -1px; background: var(--hl); }

/* margin notes outside the mock: the editor's hand, on wide screens only */
.m-margin { position: absolute; display: flex; align-items: center; gap: 10px; transform: translateY(-50%); pointer-events: none; }
.m-margin .pn { font-size: 17px; }
.m-margin i { display: block; width: 26px; height: 0; border-top: 2px solid currentColor; }
.m-margin-l { right: calc(100% + 16px); color: var(--red); }
.m-margin-r { left: calc(100% + 16px); color: var(--blue); flex-direction: row-reverse; }

/* ------------------------------------------------------------------ sections */

.sec { position: relative; padding: clamp(96px, 11vw, 152px) 0; }
.sec-line { border-top: 1px solid var(--border); }
.sec-head { max-width: 900px; margin-bottom: clamp(52px, 6vw, 84px); }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head-center .eyebrow { justify-content: center; }
.sec-head-center .lead { margin-inline: auto; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); align-items: center; }
.split-rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.split-rev .split-text { order: 2; }
.split-text .h-sec { font-size: clamp(38px, 4.5vw, 64px); }
.split-art { position: relative; }
.ticks { list-style: none; margin-top: 30px; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--text); }
.ticks svg { width: 20px; height: 20px; flex: none; color: var(--green); }

.panel { position: relative; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.panel-raised { background: var(--surface-2); border-color: var(--border-strong); }

/* a transcript line, the shared motif: speaker, time, text, note in the margin */
.tl-line {
  display: grid; grid-template-columns: 24px 44px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 9px 0 9px 12px; border-left: 3px solid transparent; font-size: 14px; line-height: 1.5; color: var(--text);
}
.tl-line .av { align-self: start; width: 22px; height: 22px; font-size: 8.5px; }
.tl-line .mono { font-size: 11.5px; color: var(--muted); }
.tl-line .pn { display: block; margin-top: 4px; font-size: 15px; }

/* 1. flow: three steps, each one its live illustration with its explanation attached */
.flow {
  --gap: 56px;
  list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
  column-gap: var(--gap); row-gap: 0;
}
/* subgrid: the three illustrations share one height, the three texts start on one line */
.flow-step { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.flow-art {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 312px; padding: 18px 18px 14px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--border);
}
.flow-text { padding: 26px 4px 0; }
.flow-text h3 {
  display: flex; align-items: baseline; gap: 12px;
  font: 760 30px/var(--lh-head) var(--font-display); letter-spacing: var(--track-lg); color: var(--text);
}
.step-n { font: 500 13px/1 var(--font-mono); letter-spacing: 0.02em; color: var(--muted); }
.flow-text p { margin-top: 12px; max-width: 42ch; font-size: 16px; line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.meet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.meet-tile {
  position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 6px;
  min-height: 96px; padding: 12px 9px 8px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.meet-tile > span { justify-self: stretch; font-size: 10.5px; line-height: 1.25; color: var(--text-2); }
.meet-bot { background: var(--bg); border: 1.5px solid var(--text); }
.meet-bot > span { color: var(--text); }
.av-bot {
  position: relative; width: 42px; height: 42px; border-radius: 10px; background: var(--text); color: var(--bg);
  font: 800 19px/1 var(--font-display);
}
.av-bot::after { content: ''; position: absolute; right: 6px; bottom: 7px; width: 6px; height: 6px; background: var(--hl); }
.rec {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px;
  font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--red);
}
.rec::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.flow-cap { min-height: 18px; font: 500 12px/18px var(--font-mono); letter-spacing: 0.01em; color: var(--text-2); }
.flow-cap > span { display: inline-flex; align-items: center; gap: 8px; }
.ok-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.flow-cap svg { width: 14px; height: 14px; color: var(--green); }
/* the dashed rule between two illustrations, drawn in */
.flow-link { position: absolute; top: 50%; left: 100%; width: var(--gap, 56px); height: 10px; margin-top: -5px; }
.flow-link > i { position: absolute; left: 10px; right: 10px; top: 4px; border-top: 2px dashed var(--border-strong); transform-origin: 0 50%; }
.flow-link > i::after { content: ''; position: absolute; right: -2px; top: -6px; width: 8px; height: 8px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }
.lanes {
  position: relative; flex: 1; display: grid; align-content: center; gap: 14px; padding: 18px 14px 18px;
  border-radius: 10px; background: var(--bg); border: 1px solid var(--border);
}
.lane-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.lane { height: 16px; }
.scan { position: absolute; top: 8px; bottom: 8px; left: 50px; width: 2px; background: var(--hl); opacity: 0; }
.scan::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--hl); border-radius: 1px;
}
.paper {
  position: relative; flex: 1; padding: 14px 14px 10px 16px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
}
.paper-t { font: 680 15.5px/1.28 var(--font-display); letter-spacing: var(--track-sm); color: var(--text); padding-bottom: 8px; border-bottom: 1px solid var(--border-strong); }
.paper-h { margin: 11px 0 5px; font: 600 10px/1 var(--font-ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.paper-p { font-size: 13px; line-height: 1.62; color: var(--text); }
.paper-p > span { display: inline-block; }
.paper-li { display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 3px 0 3px 9px; font-size: 12.5px; color: var(--text); }
.paper-li .ev { margin-left: auto; height: 19px; font-size: 10.5px; }
.paper-h-note { display: flex; justify-content: space-between; align-items: baseline; }
.paper-h-note .pn { font-size: 14.5px; letter-spacing: 0.03em; }

.aside-note {
  display: flex; gap: 14px; align-items: flex-start; margin-top: clamp(40px, 5vw, 60px); padding: 18px 22px 18px 19px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--blue);
  font-size: 15.5px; line-height: 1.6; color: var(--text-2);
}
.aside-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; color: var(--blue); }
.aside-ic svg { width: 20px; height: 20px; }

/* 2. evidence scene */
.ev-scene { position: relative; padding-bottom: 168px; }
.ev-card { padding: 20px 24px 10px; }
.ev-card .panel-k { margin-bottom: 6px; }
.ev-line { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 16.5px; line-height: 1.55; color: var(--text); }
.ev-line:last-child { border-bottom: 0; }
.ev-line-dim { color: var(--muted); }
.ev-line .ev { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.ev-pop { position: absolute; right: -22px; bottom: 0; width: min(440px, 94%); padding: 18px 20px 16px; z-index: 2; box-shadow: var(--shadow); }
.ev-who { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.ev-who .mono { margin-left: auto; font-size: 12px; color: var(--muted); }
.ev-quote { margin-top: 12px; font: 620 21px/1.42 var(--font-display); letter-spacing: var(--track-sm); color: var(--text); }
.ev-quote .ks { border-radius: var(--hl-radius); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0.04em 0; }
.ev-quote .k { border-radius: var(--hl-radius); padding: 0.02em 0.1em; margin: 0 -0.1em; }
.ev-verified { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--blue); }
.ev-verified .pn { font-size: 15.5px; }
.ev-verified svg { width: 14px; height: 14px; }
.ev-player { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ev-player .m-play { width: 32px; height: 32px; }
.ev-player .m-play svg { width: 12px; height: 12px; }
.ev-player .wave { --ph: 0.48; height: 26px; }
.ev-clock { font-size: 12px; color: var(--text-2); }

/* 3. ask scene */
.ask { display: grid; gap: 14px; }
.ask-q {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border-strong);
}
.ask-q p { flex: 1; font-size: 16.5px; line-height: 1.45; color: var(--text); }
.ask-q p > span { display: inline-block; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 3px; vertical-align: -0.18em; background: var(--text); }
.ask-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.ask-a { padding: 20px 22px 18px; }
.ask-a .panel-k { display: flex; align-items: center; gap: 9px; }
.ask-a .panel-k::before { content: ''; width: 8px; height: 8px; background: var(--text); }
.ask-p { margin-top: 12px; font-size: 16px; line-height: 1.75; color: var(--text); }
.cite {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 2px;
  border-radius: 4px; border: 1px solid var(--blue); color: var(--blue);
  font: 600 10.5px/1 var(--font-mono); vertical-align: 2px;
}
sup.cite { top: 0; }
.ask-src { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.ask-src li {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 11px; align-items: center;
  padding: 9px 10px 9px 11px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border);
  font-size: 14px; color: var(--text);
}
.ask-src li.rule-blue, .ask-src li.rule-red { border-left-width: 3px; border-left-color: var(--blue); border-radius: 2px 8px 8px 2px; }
.ask-src li.rule-red { border-left-color: var(--red); }
.ask-src li .cite { margin: 0; vertical-align: 0; }
.ask-src em { display: inline; margin-left: 8px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.ask-src .pn { margin-left: 10px; font-size: 15px; }

/* 4. coaching scene */
.coach { padding: 28px 28px 12px; }
.coach-top { display: flex; align-items: center; gap: 30px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.coach-stamp { display: flex; align-items: center; gap: 22px; flex: none; }
.coach-stamp .stamp { --s: 116px; }
.coach-num { display: grid; gap: 6px; }
.coach-num b { font: 450 64px/0.9 var(--font-mono); letter-spacing: -0.05em; color: var(--text); }
.coach-num em { font: 600 10.5px/1 var(--font-ui); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.coach-sum { flex: 1; min-width: 0; }
.coach-grade { margin-top: 10px; font: 760 30px/var(--lh-head) var(--font-display); letter-spacing: var(--track-lg); color: var(--text); }
.coach-sub { margin-top: 6px; font-size: 14.5px; color: var(--text-2); }
.talk { margin-top: 16px; }
.talk-bar { display: flex; gap: 2px; height: 10px; border-radius: 3px; overflow: hidden; }
.talk-bar i { display: block; }
.talk-us { flex: 41; background: var(--p-blue); }
.talk-them { flex: 59; background: var(--p-orange); }
.talk-leg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.talk-leg b { margin-left: 4px; font-weight: 500; }
.crit { list-style: none; }
.crit li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 0 12px 12px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; font-size: 15.5px; color: var(--text);
}
.crit li:last-child { border-bottom: 0; }
.crit li.rule-red { border-left-color: var(--red); }
.crit-ok { display: grid; place-items: center; width: 22px; height: 22px; color: var(--green); }
.crit-ok svg { width: 18px; height: 18px; }
.crit-no { display: grid; place-items: center; width: 22px; height: 22px; color: var(--red); }
.crit-no svg { width: 16px; height: 16px; }
.crit svg path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crit .pn { font-size: 15px; }
.crit-v { font: 500 13px/1 var(--font-mono); color: var(--text-2); }

/* 5. CRM scene */
.crm { display: grid; justify-items: start; }
.crm-src {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 7px 14px;
  width: min(360px, 86%); padding: 14px 16px; margin-left: 28px;
}
.crm-src .m-chip { grid-row: span 2; }
.crm-src-t { font: 680 16px/1.25 var(--font-display); letter-spacing: var(--track-sm); color: var(--text); }
.sk { display: block; width: 100%; height: 6px; border-radius: 2px; background: var(--surface-3); }
.crm-beam { position: relative; width: 12px; height: 52px; margin-left: 70px; }
.crm-beam > i { position: absolute; left: 5px; top: 4px; bottom: 6px; border-left: 2px dashed var(--border-strong); transform-origin: 50% 0; }
.crm-beam > i::after { content: ''; position: absolute; left: -6px; bottom: -2px; width: 8px; height: 8px; border-right: 2px solid var(--border-strong); border-bottom: 2px solid var(--border-strong); transform: rotate(45deg); }
.crm-card { width: 100%; padding: 18px 22px 8px; }
.crm-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.crm-head b { display: block; font-size: 16px; }
.crm-head em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); }
.crm-head em i { font-style: normal; margin: 0 3px; }
.crm-head .m-chip { margin-left: auto; }
.crm-rows > div {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.crm-rows > div:last-child { border-bottom: 0; }
.crm-rows dt { font: 600 10.5px/1.4 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.crm-rows dd { font-size: 14.5px; line-height: 1.55; color: var(--text); }
.crm-rows dd i { font-style: normal; color: var(--muted); margin: 0 3px; }
.crm-rows .pn { font-size: 15px; }
.crm-link { display: inline-flex; align-items: center; gap: 6px; color: var(--blue) !important; font-weight: 500; }
.crm-link svg { width: 14px; height: 14px; }

/* 6. numbers: big mono, a highlighter stroke under each */
.sec-stats { padding: clamp(88px, 10vw, 136px) 0; }
.sec-stats .eyebrow { margin-bottom: 40px; }
.stats {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong);
}
.stat { position: relative; display: flex; flex-direction: column; padding: 44px 30px 42px; border-left: 1px solid var(--border); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n {
  position: relative; align-self: flex-start; padding: 0 0.06em;
  font-size: clamp(72px, 8vw, 124px); font-weight: 400; line-height: 1; letter-spacing: -0.05em; color: var(--text);
}
.stat-n::after {
  content: ''; position: absolute; left: 0; right: -0.04em; bottom: -0.1em; height: 0.12em;
  background: var(--hl); border-radius: 2px 6px 3px 7px / 4px 2px 6px 3px; transform: rotate(-0.8deg);
}
.stat-l { margin-top: 36px; font-size: 18px; font-weight: 600; color: var(--text); }
.stat-s { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* 7. permissions */
.perms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.perm { padding: 30px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); transition: border-color 0.2s; }
.perm:hover { border-color: var(--border-strong); }
.perm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.perm-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
}
.perm-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scope { padding: 6px 10px; border-radius: 6px; font-size: 12.5px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); }
.perm h3 { margin: 24px 0 12px; font: 720 26px/var(--lh-head) var(--font-display); letter-spacing: var(--track-md); color: var(--text); }
.perm p { font-size: 15.5px; line-height: 1.72; color: var(--text-2); }
.revoke {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; padding: 18px 22px 18px 19px;
  border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid var(--blue); background: var(--surface);
  font-size: 15.5px; line-height: 1.65;
}
.revoke svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; }
.legal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: clamp(48px, 5vw, 64px); }
.legal-col h3 { margin-bottom: 12px; font: 720 24px/var(--lh-head) var(--font-display); letter-spacing: var(--track-md); color: var(--text); }
.legal-col p { font-size: 15.5px; line-height: 1.72; color: var(--text-2); }
.legal-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* 8. final */
.final { position: relative; padding: clamp(120px, 13vw, 190px) 0 clamp(120px, 12vw, 170px); text-align: center; border-top: 1px solid var(--border); }
.final-inner { display: flex; flex-direction: column; align-items: center; }
.h-final {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(46px, 7.4vw, 116px);
  line-height: var(--lh-hero); letter-spacing: var(--track-hero); color: var(--text); text-wrap: balance;
}
.final .lead { margin-top: 30px; }
.final .cta-row { justify-content: center; margin-top: 38px; }

/* footer */
.foot { position: relative; overflow: hidden; padding-top: 52px; border-top: 1px solid var(--border); }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px; }
.foot-grid p { margin-top: 14px; max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.foot-grid p a { color: var(--text-2); }
.foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-links a { font-size: 14.5px; color: var(--text-2); text-decoration: none; transition: color 0.15s; }
.foot-links a:hover { color: var(--text); }
/* the giant wordmark: Bricolage 800 outlined into pub/wordmark.svg (a drawing, not text), the square in --hl */
.foot-word { position: relative; width: 88vw; aspect-ratio: 3531 / 725; margin: 48px auto -0.5vw; }
.foot-word::before {
  content: ''; position: absolute; inset: 0; background: var(--surface-2);
  -webkit-mask: url('wordmark.svg') 0 0 / 100% 100% no-repeat; mask: url('wordmark.svg') 0 0 / 100% 100% no-repeat;
}
.foot-word i { position: absolute; left: 95.19%; bottom: 1.93%; width: 4.81%; aspect-ratio: 1; background: var(--hl); }

/* ------------------------------------------------------------------ auth pages (split screen) */

.page-auth { min-height: 100vh; }
.auth { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 100vh; }
.auth-side {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 30px clamp(32px, 4.4vw, 72px) 34px; background: var(--bg); color: var(--text-2);
  border-right: 1px solid var(--border);
}
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong);
  font-size: 14px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
.back-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s var(--ease-out); }
.back-link:hover { color: var(--text); border-color: var(--muted); }
.back-link:hover svg { transform: translateX(-3px); }
.auth-hero { max-width: 640px; }
.auth-statement {
  font: 800 clamp(46px, 5.2vw, 84px)/1.04 var(--font-display); letter-spacing: var(--track-hero); color: var(--text);
  text-wrap: balance;
}
.auth-sheet { margin-top: 48px; max-width: 520px; border-top: 1px solid var(--border-strong); }
.auth-sheet .tl-line { border-bottom: 1px solid var(--border); padding-top: 11px; padding-bottom: 11px; }
.auth-side-foot { font-size: 13px; color: var(--muted); }
.auth-main { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 56px 24px 32px; }
.auth-card {
  position: relative; width: min(440px, 100%); padding: 36px 34px 32px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.auth-card h1 { font: 760 34px/var(--lh-head) var(--font-display); letter-spacing: var(--track-lg); color: var(--text); }
.auth-card .sub { margin: 10px 0 28px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.auth-foot { margin-top: 28px; display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 13.5px; color: var(--muted); }
.auth-foot ul { list-style: none; display: flex; gap: 18px; }
.auth-foot ul a { color: var(--text-2); text-decoration: none; }
.auth-foot ul a:hover { color: var(--text); text-decoration: underline; }
.auth-after { margin-top: 20px; text-align: center; font-size: 14.5px; }

.field { margin-bottom: 18px; }
.field label, .field-row label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.field-row a { font-size: 13.5px; }
.input {
  width: 100%; height: 50px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--bg); color: var(--text);
  font-size: 16px; transition: border-color 0.15s;
}
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: var(--muted); }
.input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--text-2); }
/* autofill keeps the field colors (the browser fill is delayed forever, no inset shadow needed) */
.input:-webkit-autofill, .input:autofill { -webkit-text-fill-color: var(--text); caret-color: var(--text); transition: background-color 100000s 0s, color 100000s 0s; }
.password-wrap { position: relative; }
.password-wrap .input { padding-right: 104px; }
.reveal {
  position: absolute; top: 7px; right: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 6px;
  background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.reveal:hover { background: var(--surface-3); color: var(--text); }
.hint { margin-top: 8px; font-size: 13px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 11px; margin: 4px 0 24px; font-size: 14.5px; color: var(--text-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-size: 13px; color: var(--muted); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-strong); }
.alert {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px 14px 12px 12px; border-radius: 4px 10px 10px 4px;
  font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--surface-2); border-left: 3px solid var(--blue);
}
.alert svg { width: 20px; height: 20px; flex: none; color: var(--blue); }
.alert-error { border-left-color: var(--red); }
.alert-error svg { color: var(--red); }
.done-state { text-align: center; }
.done-state .sub { margin-bottom: 26px; }
.done-icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text);
}
.done-icon svg { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ legal documents */

.progress { position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--hl); transform-origin: 0 50%; transform: scaleX(0); }
.doc-hero { padding: clamp(140px, 18vh, 180px) 0 clamp(44px, 5vw, 64px); border-bottom: 1px solid var(--border); }
.doc-title { font: 800 clamp(40px, 6vw, 84px)/var(--lh-display) var(--font-display); letter-spacing: var(--track-xl); color: var(--text); text-wrap: balance; max-width: 16ch; }
.updated {
  display: inline-flex; margin-top: 26px; padding: 7px 11px; border-radius: 6px; border: 1px solid var(--border-strong);
  font: 500 12.5px/1 var(--font-mono); color: var(--text-2); background: var(--surface);
}
.doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); padding-top: clamp(40px, 5vw, 64px); padding-bottom: 120px; }
.toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 130px); overflow: auto; }
.toc-title { margin-bottom: 14px; font: 600 11.5px/1 var(--font-ui); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.toc-list { list-style: none; border-left: 1px solid var(--border); counter-reset: toc; }
.toc-list a {
  display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 3px solid transparent;
  font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
.toc-list a:hover { color: var(--text); }
.toc-list a.is-active { color: var(--text); border-left-color: var(--blue); }
.toc-num a { display: grid; grid-template-columns: 26px 1fr; }
.toc-num a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); padding-top: 3px; font: 500 11.5px/1 var(--font-mono); color: var(--muted); }
.toc-mobile { display: none; }
.doc { max-width: 70ch; font-size: 17px; line-height: 1.75; color: var(--text-2); }
.doc h2 {
  margin: 60px 0 14px; scroll-margin-top: 100px;
  font: 720 clamp(25px, 2.4vw, 31px)/1.2 var(--font-display); letter-spacing: var(--track-md); color: var(--text);
}
.doc > h2:first-child { margin-top: 0; }
.doc p { margin: 0 0 18px; }
.doc ul { margin: 0 0 18px; padding-left: 22px; }
.doc li { margin-bottom: 12px; padding-left: 4px; }
.doc li::marker { color: var(--muted); }
.doc code { padding: 2px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 0.84em; }

/* compact footer (errors) */
.foot-mini { padding: 30px 0 34px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); }
.foot-mini .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.foot-mini ul { list-style: none; display: flex; gap: 20px; }
.foot-mini a { color: var(--text-2); text-decoration: none; }
.foot-mini a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------------------------ 404 and errore: the editor's correction */

.page-oops { display: flex; flex-direction: column; }
.oops { flex: 1; display: grid; place-items: center; padding: 140px 24px 90px; text-align: center; }
.oops-inner { display: flex; flex-direction: column; align-items: center; max-width: 660px; }
.oops-mark { position: relative; display: inline-block; }
.oops-code {
  font: 800 clamp(128px, 21vw, 260px)/0.9 var(--font-display); letter-spacing: -0.04em; color: var(--text);
  padding: 0 0.04em;
}
.oops-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--red); pointer-events: none; }
.oops-pen path { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.oops-pen-ring { inset: -10% -8%; width: 116%; max-width: none; height: 120%; }
.oops-pen-ring + .oops-note { top: -19%; right: -9%; }
.oops-note { position: absolute; right: -0.2em; top: -0.35em; font-size: 19px; transform: rotate(-4deg); }
.oops h1 { margin-top: 34px; font: 780 clamp(34px, 4.4vw, 52px)/var(--lh-display) var(--font-display); letter-spacing: var(--track-lg); color: var(--text); }
.oops h1 + p { margin-top: 16px; max-width: 46ch; font-size: 17.5px; line-height: 1.6; color: var(--text-2); }
.oops .cta-row { justify-content: center; margin-top: 34px; }
.oops .support { display: inline-flex; margin-top: 26px; padding: 7px 11px; border-radius: 6px; border: 1px solid var(--border-strong); font: 500 12.5px/1 var(--font-mono); color: var(--text-2); }

/* ------------------------------------------------------------------ pencil rules (last, so they win over the line they mark) */

.rule-blue, .rule-red, .rule-ink { border-left-width: 3px; border-left-style: solid; }
.rule-blue { border-left-color: var(--blue); }
.rule-red { border-left-color: var(--red); }
.rule-ink { border-left-color: var(--text); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1379px) {
  .m-margin { display: none; }
}
@media (max-width: 1100px) {
  .m-body { grid-template-columns: minmax(0, 1fr) 260px; }
  .ev-pop { right: 0; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split-rev .split-text { order: 0; }
  .flow { --gap: 0px; grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-inline: auto; }
  .flow-step { grid-row: auto; grid-template-rows: auto auto; }
  .flow-step + .flow-step { margin-top: 64px; }
  .flow-art { height: auto; min-height: 272px; }
  .flow-text { padding: 22px 4px 0; }
  .flow-link { display: none; }
  .meet-tile { min-height: 86px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
  .perms, .legal-cols { grid-template-columns: 1fr; }
  .m-rail { display: none; }
  .m-body { grid-template-columns: 1fr; }
  .m-chip-hide { display: none; }
  .doc-layout { grid-template-columns: 1fr; gap: 28px; }
  .toc { display: none; }
  .toc-mobile { display: block; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
  .toc-mobile summary {
    display: flex; align-items: center; justify-content: space-between; list-style: none;
    cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--text);
  }
  .toc-mobile summary::-webkit-details-marker { display: none; }
  .toc-mobile summary::after {
    content: ''; width: 8px; height: 8px; margin-top: -4px; border-right: 1.75px solid var(--muted); border-bottom: 1.75px solid var(--muted);
    transform: rotate(45deg); transition: transform 0.25s var(--ease-out), margin 0.25s;
  }
  .toc-mobile[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
  .toc-mobile .toc-list { margin: 0 18px 16px; }
  .auth { grid-template-columns: 1fr; }
  .auth-side { min-height: 0; border-right: 0; border-bottom: 1px solid var(--border); padding: 20px 20px 34px; gap: 34px; }
  .auth-statement { font-size: clamp(38px, 10.5vw, 60px); }
  .auth-sheet, .auth-side-foot { display: none; }
  .auth-main { padding: 32px 16px 28px; justify-content: flex-start; }
}
@media (max-width: 720px) {
  .wrap { width: calc(100% - 36px); }
  .hero { padding-top: 116px; }
  .kicker { font-size: 11px; letter-spacing: 0.12em; gap: 10px; }
  .hero-title { margin-top: 26px; }
  .hero-sub { margin-top: 22px; }
  .hero-cta { margin-top: 30px; width: 100%; }
  .hero-cta .btn { flex: 1 1 100%; }
  .stage { width: calc(100% - 24px); margin-top: 56px; }
  .app { border-radius: 14px; }
  .m-bar { height: 40px; padding: 0 12px; }
  .m-search, .m-chip-hide, .m-hide-sm, .m-crumb { display: none; }
  .m-head { padding: 14px 14px 28px; gap: 10px; flex-wrap: wrap; }
  .m-logo { width: 36px; height: 36px; border-radius: 8px; }
  .m-titles { flex: 1; }
  .m-title { font-size: 17px; white-space: normal; }
  .m-meta { font-size: 10px; }
  .m-head .m-chip-ok { display: none; }
  .m-tl { --lab: 78px; margin: 0 10px; padding: 14px 10px 10px; }
  .m-who { font-size: 11px; gap: 6px; }
  .m-who .av { width: 20px; height: 20px; font-size: 8px; }
  .m-playhead { left: calc(10px + var(--lab) + (100% - 20px - var(--lab)) * var(--ph)); top: 10px; bottom: 28px; }
  .m-axis span:nth-child(2n) { visibility: hidden; }
  .m-main { padding: 14px 14px 18px; }
  .m-tabs { gap: 16px; }
  .m-tabs span { font-size: 12px; }
  .m-tabs span:nth-child(4) { display: none; }
  .m-p { font-size: 13.5px; }
  .m-mo { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13px; }
  .m-mo .pn { grid-column: 1 / -1; }
  .m-now { grid-template-columns: auto 1fr; gap: 8px 10px; padding: 10px 12px; }
  .m-now .mono { display: none; }
  .m-now-t { font-size: 14.5px; }
  .m-dock { padding: 10px 12px; gap: 10px; }
  .m-speed { display: none; }
  .sec { padding: 96px 0; }
  .ev-scene { padding-bottom: 0; }
  .ev-pop { position: relative; right: auto; width: auto; margin: -24px 10px 0; }
  .ev-quote { font-size: 18px; }
  .coach { padding: 22px 18px 8px; }
  .coach-top { flex-direction: column; align-items: flex-start; gap: 20px; }
  .coach-stamp .stamp { --s: 92px; }
  .coach-num b { font-size: 52px; }
  .coach-sum { width: 100%; }
  .crit li { font-size: 14.5px; }
  .crm-src { margin-left: 12px; }
  .crm-beam { margin-left: 54px; height: 40px; }
  .crm-rows > div { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .crm-rows dt { grid-column: 1 / -1; }
  .crm-head .m-chip { display: none; }
  .ask-q { padding: 14px; }
  .ask-q kbd { display: none; }
  .ask-src li { grid-template-columns: auto auto 1fr; }
  .ask-src li .ev { display: none; }
  .ask-src em { display: block; margin-left: 0; }
  .ask-src .pn { margin-left: 0; }
  .stat { padding: 30px 16px 30px; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat-n { font-size: 64px; }
  .stat-l { margin-top: 26px; font-size: 16px; }
  .stat-s { font-size: 14px; }
  .perm { padding: 22px; }
  .perm-top { flex-wrap: wrap; }
  .perm h3 { font-size: 23px; }
  .auth-card { padding: 28px 22px 24px; }
  .auth-card h1 { font-size: 30px; }
  .oops-note { font-size: 15px; }
}

/* ------------------------------------------------------------------ motion (all of it off with reduced motion) */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .rec-dot, .rec::before { animation: blink 1.6s steps(1, end) infinite; }

  /* hero: the headline is the LCP and is never hidden; the marker draws over "scritta." once */
  .hero-title .mark::before, .hero-title .mark::after { animation: draw 0.38s var(--ease-draw) 0.45s both; }
  .kicker { animation: rise-in 0.7s var(--ease-out) both; }
  .hero-sub { animation: rise-in 0.8s var(--ease-out) 0.2s both; }
  .hero-cta { animation: rise-in 0.8s var(--ease-out) 0.3s both; }
  .stage { animation: rise-in 1s var(--ease-out) 0.35s both; }
  .m-margin { animation: note-in 0.35s var(--ease-out) 1.5s both; }
  .m-margin-r { animation-delay: 1.8s; }
  /* the static "current word" is for reduced motion only; with motion the loop moves the marker */
  .m-now .kw-on { background: transparent; color: inherit; }
  .m-now .kw { animation: word 6.6s linear infinite; animation-delay: calc(var(--i) * 0.42s + 1.2s); }
  .auth-statement .mark::before, .auth-statement .mark::after { animation: draw 0.38s var(--ease-draw) 0.35s both; }
  .auth-card { animation: rise-in 0.6s var(--ease-out) 0.05s both; }
  .oops-pen path { stroke-dasharray: 1; stroke-dashoffset: 0; animation: pen 0.5s var(--ease-draw) 0.35s both; }
  .oops-pen path + path { animation-delay: 0.7s; }
  .oops-note { animation: note-in 0.3s var(--ease-out) 1.05s both; }

  /* markers further down draw when they come into view (site.js adds .is-on) */
  .js .mark-io:not(.is-on)::before, .js .mark-io:not(.is-on)::after { clip-path: inset(-20% 104% -20% -4%); }
  .mark-io.is-on::before, .mark-io.is-on::after { animation: draw 0.38s var(--ease-draw) 0.15s both; }

  /* scroll reveals (only once the script runs, so nothing is hidden without it) */
  .js .rise { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(var(--rd, 0) * 90ms); }
  .js .rise.is-in { opacity: 1; transform: none; }
  .js .stat-n::after { clip-path: inset(-40% 100% -40% -2%); }
  .stat.is-in .stat-n::after { animation: draw 0.42s var(--ease-draw) calc(var(--rd, 0) * 90ms + 0.45s) both; }

  /* scenes: the script adds .play when a scene enters the viewport and replays it */
  .js [data-scene]:not(.play) .a,
  .js [data-scene]:not(.play) .lane b,
  .js [data-scene]:not(.play) .stamp,
  .js [data-scene]:not(.play) .pn-a { opacity: 0; }
  .js [data-scene]:not(.play) .mark-s::before, .js [data-scene]:not(.play) .mark-s::after { clip-path: inset(-20% 104% -20% -4%); }
  .js [data-scene]:not(.play) .draw-x { clip-path: inset(0 100% 0 0); }
  .js [data-scene]:not(.play) .draw-y { clip-path: inset(0 0 100% 0); }
  [data-scene].play .a { animation: rise-in 0.5s var(--ease-out) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .lane b { animation: grow 0.6s var(--ease-out) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .meet-bot { animation: draw 0.5s var(--ease-draw) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .draw-x { animation: draw 0.6s var(--ease-draw) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .draw-y { animation: draw-y 0.5s var(--ease-draw) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .scan { animation: scan 2.2s linear 1.5s both; }
  [data-scene].play .paper-p > .a, [data-scene].play .ask-q p > .a { animation-name: word-in; animation-duration: 0.35s; }
  [data-scene].play .mark-s::before, [data-scene].play .mark-s::after { animation: draw 0.38s var(--ease-draw) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .pn-a { animation: note-in 0.3s var(--ease-out) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .ks { animation: tint-in 0.2s linear 0.45s both; }
  [data-scene].play .k { animation: word-once calc(var(--d, 300) * 1ms) linear calc(var(--t, 0) * 1ms) none; }
  .js [data-scene] .k.kw-on { background: transparent; color: inherit; }
  [data-scene].play .k.kw-on { animation: word-hold calc(var(--d, 300) * 1ms) linear calc(var(--t, 0) * 1ms) forwards; }
  [data-scene].play .ev-play { animation: chip-play 4.4s steps(1, end) 0.2s both; }
  [data-scene].play .ev-player .wave { animation: wave-play 3.6s linear 0.4s both; }
  [data-scene].play .stamp { animation: stamp 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) calc(var(--t, 0) * 1ms) both; }
  [data-scene].play .caret { animation: blink 1s steps(1, end) infinite; }
  [data-scene].play .crit svg path { stroke-dasharray: 1; animation: pen 0.35s var(--ease-draw) calc(var(--t, 0) * 1ms + 0.15s) both; }
  .fx { transition: opacity 0.5s ease; }
  [data-scene].out .fx { opacity: 0; }
}

@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes word-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes note-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { clip-path: inset(-20% 104% -20% -4%); } to { clip-path: inset(-20% -4% -20% -4%); } }
@keyframes draw-y { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes grow { from { opacity: 0; transform: scaleX(0); transform-origin: 0 50%; } 1% { opacity: 1; } to { opacity: 1; transform: scaleX(1); transform-origin: 0 50%; } }
@keyframes scan { 0% { left: 50px; opacity: 1; } 99.9% { opacity: 1; } 100% { left: calc(100% - 16px); opacity: 0; } }
@keyframes tint-in { from { background-color: transparent; } to { background-color: var(--sent-tint); } }
@keyframes word-hold { from, to { background: var(--hl); color: var(--hl-ink); } }
@keyframes word-once { 0%, 99.9% { background: var(--hl); color: var(--hl-ink); } 100% { background: transparent; color: inherit; } }
/* the karaoke in the hero dock: each word holds the marker for its slot of the loop */
@keyframes word { 0%, 6.3% { background: var(--hl); color: var(--hl-ink); } 6.4%, 100% { background: transparent; color: inherit; } }
@keyframes chip-play {
  0% { background: var(--surface-2); color: var(--text-2); border-color: var(--border-strong); }
  4%, 92% { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); }
}
@keyframes wave-play { from { --ph: 0; } to { --ph: 1; } }
@keyframes stamp { from { opacity: 0; transform: rotate(-14deg) scale(1.35); } to { opacity: 1; transform: rotate(-6deg) scale(1); } }
@keyframes pen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

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

@media print {
  .nav, .progress, .toc, .toc-mobile, .foot-word { display: none !important; }
  body, .theme-auto { background: #fff; color: #000; }
  .doc-hero { padding-top: 24px; }
}

/* Partner host (api.brand_host): the partner logo on a light plate, readable on the ink side. */
.brand-partner { display: inline-flex; align-items: center; }
.brand-partner img { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain;
  background: #fff; padding: 8px 12px; border-radius: 10px; }
/* The partner's accent for the highlighter and the primary button, also on the ink side (.ink sets
   its own --hl, so the override must be as specific). */
.brand-host, .brand-host .ink { --hl: var(--brand-hl); --hl-hover: var(--brand-hl); --hl-ink: var(--brand-hl-ink);
  --focus: var(--brand-hl); }