/* ClippyNote website
   Layout concept: the page sits on ClippyNote's own ground. Product panels float on it with no
   browser chrome, so the site and the product read as one object.
   Tokens are transcribed from packages/ui/src/tokens.css (ADR-046). Orange is the next step, never decoration. */

@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("fonts/Satoshi-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* Surfaces: a ground, and white panels that float on it */
  --ground: #f1f1f3;
  --stage: #e7e7eb;
  --panel: #ffffff;
  --inset: #f7f7f9;
  --hover: #f5f5f7;
  --selected: #eef0f3;
  --line: #ededf0;
  --line-strong: #e1e1e6;
  --scrim: rgba(14, 14, 16, 0.18);

  /* Ink ramp */
  --ink: #0e0e10;
  --ink-hover: #2a2a30;
  --ink-2: #33333a;
  --muted: #6b6b73;
  --faint: #6f6f78;
  --ghost: #c9c9d0;
  --word-dim: #c5c5cc;
  --on-ink: #ffffff;

  /* Graphite carries structure. Orange is the next step. */
  --graphite: #55606e;
  --graphite-surface: #eef0f2;
  --ring-halo: rgba(85, 96, 110, 0.18);
  --accent: #ff5a1f;
  --accent-hover: #ef4a10;
  --accent-text: #c7420d;
  --accent-surface: #ffece4;
  --on-accent: #ffffff;

  /* The accent family. Orange is the next step; on this site it also carries emphasis.
     --signal-display is the brand orange nudged to clear 3:1 for large type on the ground. */
  --signal: #ff5a1f;
  --signal-text: #c7420d;
  --signal-display: #f5501a;
  --signal-surface: #ffece4;
  --signal-line: rgba(255, 90, 31, 0.5);
  --marker: rgba(255, 90, 31, 0.34);
  --stmt-lit: var(--ink);
  /* Ink plate (option C) */
  --plate: #0e0e10;
  --plate-shadow: 0 1px 2px rgba(16, 16, 20, 0.08), 0 50px 90px -40px rgba(16, 16, 20, 0.5);
  --plate-dot: rgba(255, 90, 31, 0.3);
  --plate-line: rgba(255, 255, 255, 0.1);
  --plate-field: rgba(255, 255, 255, 0.07);
  --on-plate: #f3f3f5;
  --on-plate-2: rgba(243, 243, 245, 0.72);
  --plate-ink: #0e0e10;
  --plate-err: #ffb4a2;

  /* Status (chips, board columns) */
  --st-neutral-t: #5f5f67; --st-neutral-b: #f1f1f3;
  --st-info-t: #4a3fa8;    --st-info-b: #edebff;
  --st-warn-t: #8a6318;    --st-warn-b: #fdf0d9;
  --st-pos-t: #2e6a45;     --st-pos-b: #e3f3e9;
  --st-danger-t: #9c4433;  --st-danger-b: #fde6e2;

  /* People and covers */
  --av-dana: #2f5c8a;
  --av-rami: #8a6318;
  --av-amal: #2e6a45;
  --av-client: #67449f;
  --tint-blue: #e3eefa;  --tint-blue-t: #2f5c8a;
  --tint-teal: #e0f2ef;  --tint-teal-t: #1f6b60;
  --tint-purple: #f0e9fb; --tint-purple-t: #67449f;
  --tint-yellow: #fbf3d3; --tint-yellow-t: #75601a;
  --tint-pink: #fbe8f1;  --tint-pink-t: #9c3970;
  --tint-brown: #f2ebe4; --tint-brown-t: #77543a;

  /* Code card */
  --code-bg: #141417;
  --code-ink: #e6e6ea;
  --code-dim: #8a8a93;
  --code-key: #c3bcff;
  --code-str: #9fd6b3;

  /* Depth: hairlines first, shadows only for things that float */
  --shadow-panel: 0 1px 2px rgba(16, 16, 20, 0.05);
  --shadow-lift: 0 1px 2px rgba(16, 16, 20, 0.05), 0 12px 30px rgba(16, 16, 20, 0.07);
  --shadow-overlay: 0 2px 4px rgba(16, 16, 20, 0.05), 0 30px 70px rgba(16, 16, 20, 0.2);
  --shadow-stage: 0 1px 2px rgba(16, 16, 20, 0.04), 0 50px 90px -40px rgba(16, 16, 20, 0.28);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 18px -8px rgba(16, 16, 20, 0.45);

  /* Type */
  --font-sans: "Satoshi", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-ar: "IBM Plex Sans Arabic", "SF Arabic", "Geeza Pro", Tahoma, sans-serif;

  /* Shape: pills for actions and chips, 10 rows, 14 inner boxes, 18 panels, 24 stages */
  --r-xs: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-panel: 18px;
  --r-stage: 24px;
  --r-pill: 999px;

  /* Motion: the brand curve for UI, a stronger ease-out for entrances */
  --ease-brand: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1200px;
  --nav-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #08080a; --stage: #0f0f12; --panel: #141417; --inset: #1b1b20; --hover: #1f1f25; --selected: #23262c;
    --line: #232329; --line-strong: #2e2e36; --scrim: rgba(0, 0, 0, 0.45);
    --ink: #f3f3f5; --ink-hover: #ffffff; --ink-2: #c9c9cf; --muted: #9a9aa2; --faint: #8a8a93; --ghost: #3d3d45; --word-dim: #34343b; --on-ink: #0e0e10;
    --graphite: #93a0af; --graphite-surface: #1f242a; --ring-halo: rgba(147, 160, 175, 0.22);
    --accent: #ff6b33; --accent-hover: #ff8352; --accent-text: #ff8352; --accent-surface: #331a10;
    --signal: #ff6b33; --signal-text: #ff8352; --signal-display: #ff6b33; --signal-surface: #331a10; --signal-line: rgba(255, 107, 51, 0.55); --marker: rgba(255, 107, 51, 0.42);
    --plate: #17171b; --plate-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 50px 100px -40px rgba(0, 0, 0, 0.85);
    --st-neutral-t: #b6b6be; --st-neutral-b: #26262c;
    --st-info-t: #c3bcff;    --st-info-b: #26214a;
    --st-warn-t: #d6a94e;    --st-warn-b: #2a2418;
    --st-pos-t: #6fbf8e;     --st-pos-b: #1e2a22;
    --st-danger-t: #e09a89;  --st-danger-b: #2a1d1b;
    --av-dana: #4f7fb3; --av-rami: #a67a26; --av-amal: #3f8a5e; --av-client: #8a68c4;
    --tint-blue: #1b2633; --tint-blue-t: #9cc0e8;
    --tint-teal: #16282a; --tint-teal-t: #84cfc2;
    --tint-purple: #241d33; --tint-purple-t: #c7aef0;
    --tint-yellow: #2a2614; --tint-yellow-t: #e0c768;
    --tint-pink: #2d1a24; --tint-pink-t: #ec9cc3;
    --tint-brown: #29211b; --tint-brown-t: #d2ad8f;
    --code-bg: #0c0c0f;
    --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.4);
    --shadow-overlay: 0 2px 4px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.6);
    --shadow-stage: 0 1px 2px rgba(0, 0, 0, 0.5), 0 50px 100px -40px rgba(0, 0, 0, 0.8);
    --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 18px -8px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #08080a; --stage: #0f0f12; --panel: #141417; --inset: #1b1b20; --hover: #1f1f25; --selected: #23262c;
  --line: #232329; --line-strong: #2e2e36; --scrim: rgba(0, 0, 0, 0.45);
  --ink: #f3f3f5; --ink-hover: #ffffff; --ink-2: #c9c9cf; --muted: #9a9aa2; --faint: #8a8a93; --ghost: #3d3d45; --word-dim: #34343b; --on-ink: #0e0e10;
  --graphite: #93a0af; --graphite-surface: #1f242a; --ring-halo: rgba(147, 160, 175, 0.22);
  --accent: #ff6b33; --accent-hover: #ff8352; --accent-text: #ff8352; --accent-surface: #331a10;
  --signal: #ff6b33; --signal-text: #ff8352; --signal-display: #ff6b33; --signal-surface: #331a10; --signal-line: rgba(255, 107, 51, 0.55); --marker: rgba(255, 107, 51, 0.42);
  --plate: #17171b; --plate-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 50px 100px -40px rgba(0, 0, 0, 0.85);
  --st-neutral-t: #b6b6be; --st-neutral-b: #26262c;
  --st-info-t: #c3bcff;    --st-info-b: #26214a;
  --st-warn-t: #d6a94e;    --st-warn-b: #2a2418;
  --st-pos-t: #6fbf8e;     --st-pos-b: #1e2a22;
  --st-danger-t: #e09a89;  --st-danger-b: #2a1d1b;
  --av-dana: #4f7fb3; --av-rami: #a67a26; --av-amal: #3f8a5e; --av-client: #8a68c4;
  --tint-blue: #1b2633; --tint-blue-t: #9cc0e8;
  --tint-teal: #16282a; --tint-teal-t: #84cfc2;
  --tint-purple: #241d33; --tint-purple-t: #c7aef0;
  --tint-yellow: #2a2614; --tint-yellow-t: #e0c768;
  --tint-pink: #2d1a24; --tint-pink-t: #ec9cc3;
  --tint-brown: #29211b; --tint-brown-t: #d2ad8f;
  --code-bg: #0c0c0f;
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 30px rgba(0, 0, 0, 0.4);
  --shadow-overlay: 0 2px 4px rgba(0, 0, 0, 0.5), 0 30px 70px rgba(0, 0, 0, 0.6);
  --shadow-stage: 0 1px 2px rgba(0, 0, 0, 0.5), 0 50px 100px -40px rgba(0, 0, 0, 0.8);
  --shadow-btn: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 18px -8px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: color-mix(in srgb, var(--signal) 24%, transparent); }
img, svg { display: block; }
main > section { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-weight: 700; font-size: 14px;
  transform: translateY(-160%); transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.i { width: 1em; height: 1em; flex: none; fill: currentColor; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Type scale (ratio ~1.33) ---------- */
.display {
  font-weight: 900;
  font-size: clamp(46px, 7.2vw, 92px);
  line-height: 0.95;
  letter-spacing: -0.052em;
  text-wrap: balance;
}
.h2 {
  font-weight: 900;
  font-size: clamp(34px, 4.7vw, 62px);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.h3 {
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}
.body { font-size: 16px; line-height: 1.6; color: var(--ink-2); max-width: 38em; text-wrap: pretty; }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.label {
  font: 500 11.5px/1.2 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding-inline: 22px;
  border-radius: var(--r-pill);
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em; line-height: 1;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-brand), box-shadow 200ms var(--ease-brand), color 200ms var(--ease-brand);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--ink); color: var(--on-ink); padding-inline: 22px 6px; box-shadow: var(--shadow-btn); }
.btn-primary .badge {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 17px;
  transition: background-color 200ms var(--ease-brand);
}
.btn-primary .badge .i { transition: transform 260ms var(--ease-out); }
.btn-secondary { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-panel); }
.btn-secondary .i { font-size: 16px; color: var(--muted); transition: transform 260ms var(--ease-out), color 200ms; }
.btn-quiet { height: 36px; padding-inline: 12px; font-weight: 500; font-size: 14px; color: var(--ink-2); }
.btn-sm { height: 40px; font-size: 14px; padding-inline: 16px; gap: 10px; }
.btn-sm.btn-primary { padding-inline: 16px 5px; }
.btn-sm .badge { width: 30px; height: 30px; font-size: 15px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--ink-hover); }
  .btn-primary:hover .badge { background: var(--accent-hover); }
  .btn-primary:hover .badge .i { transform: translateX(2px); }
  .btn-secondary:hover { background: var(--hover); }
  .btn-secondary:hover .i { color: var(--signal-text); transform: translateY(2px); }
  .btn-quiet:hover { background: var(--hover); color: var(--ink); }
}
.btn[aria-busy="true"] { pointer-events: none; }
.btn .spinner { display: none; }
.btn[aria-busy="true"] .spinner { display: block; }
.btn[aria-busy="true"] .badge .i { display: none; }
.spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Small control button used inside demos */
.ctl {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 200ms var(--ease-brand), color 200ms, transform 160ms var(--ease-out);
}
.ctl .i { font-size: 15px; color: var(--muted); }
.ctl:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ctl:hover { background: var(--hover); color: var(--ink); } }

/* Segmented control */
.seg {
  position: relative;
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg-thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n, 2));
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line);
  transform: translateX(calc(var(--k, 0) * 100%));
  transition: transform 320ms var(--ease-brand);
}
.seg button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding-inline: 14px;
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  white-space: nowrap;
  transition: color 200ms var(--ease-brand);
}
.seg button[aria-pressed="true"], .seg button[aria-checked="true"] { color: var(--ink); font-weight: 700; }

/* ---------- Product primitives (shared by every mockup) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding-inline: 8px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: var(--st-neutral-b); color: var(--st-neutral-t);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.plain::before { display: none; }
.chip.info { background: var(--st-info-b); color: var(--st-info-t); }
.chip.warn { background: var(--st-warn-b); color: var(--st-warn-t); }
.chip.pos { background: var(--st-pos-b); color: var(--st-pos-t); }
.chip.danger { background: var(--st-danger-b); color: var(--st-danger-t); }

.av {
  --size: 22px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-grid; place-items: center; flex: none;
  font: 700 calc(var(--size) * 0.42)/1 var(--font-sans); letter-spacing: 0.02em;
  color: #fff; background: var(--graphite);
}
.av.dana { background: var(--av-dana); }
.av.rami { background: var(--av-rami); }
.av.amal { background: var(--av-amal); }
.av.client { background: var(--av-client); }
.avs { display: inline-flex; }
.avs .av { box-shadow: 0 0 0 2px var(--panel); }
.avs .av + .av { margin-inline-start: -4px; }

.kbd {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 20px; padding-inline: 5px;
  border-radius: var(--r-xs);
  font: 400 11px/1 var(--font-mono);
  color: var(--faint); background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line);
}
.plabel { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

.panel {
  background: var(--panel);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line);
}
.stage {
  position: relative;
  padding: 10px;
  border-radius: var(--r-stage);
  background: var(--stage);
  box-shadow: var(--shadow-stage), inset 0 0 0 1px var(--line-strong);
}
.savepill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding-inline: 9px 11px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; color: var(--muted);
  background: var(--inset);
  white-space: nowrap;
}
.savepill .i { font-size: 14px; }
.savepill[data-state="saved"] .i { color: var(--st-pos-t); }
.savepill[data-state="local"] { color: var(--st-warn-t); background: var(--st-warn-b); }
.savepill .spinner { display: none; width: 11px; height: 11px; border-width: 1.6px; }
.savepill.is-saving .spinner { display: block; }
.savepill.is-saving .i { display: none; }

.tag-example {
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint);
}

/* ---------- Reveal (progressive: content is visible without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 80ms);
  }
  .js [data-reveal].is-primed { opacity: 0; transform: translateY(22px); }
  .js [data-reveal="text"].is-primed { filter: blur(6px); }
  .js [data-reveal="rise"].is-primed { transform: translateY(48px) scale(0.985); }
}

/* ---------- Nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); }
.nav-bg {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: inset 0 -1px 0 var(--line);
  opacity: 0;
  transition: opacity 320ms var(--ease-brand);
}
.nav.is-scrolled .nav-bg, .nav.is-open .nav-bg { opacity: 1; }
.nav-inner { position: relative; height: var(--nav-h); display: flex; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.025em; }
.brand-tile {
  width: 30px; height: 30px; flex: none;
  border-radius: 8.4px;
  display: grid; place-items: center;
  background: var(--ink); color: var(--on-ink);
}
.brand-tile svg { width: 13px; height: auto; }
.brand-tile.sm { width: 26px; height: 26px; border-radius: 7.3px; }
.brand-tile.sm svg { width: 11px; }
.nav-links { display: flex; gap: 2px; margin-inline-start: 12px; }
.nav-links a {
  display: inline-flex; align-items: center; height: 36px; padding-inline: 12px;
  border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; color: var(--muted);
  transition: color 200ms var(--ease-brand), background-color 200ms var(--ease-brand);
}
.nav-links a[aria-current="true"] { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: var(--hover); } }
.nav-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.nav-menu { display: none; position: relative; width: 40px; height: 40px; border-radius: 50%; }
.nav-menu span {
  position: absolute; left: 12px; right: 12px; height: 1.6px; border-radius: 2px; background: var(--ink);
  transition: transform 300ms var(--ease-brand);
}
.nav-menu span:first-child { transform: translateY(-3.5px); }
.nav-menu span:last-child { transform: translateY(3.5px); }
.nav-menu[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.nav-sheet { position: relative; }
.nav-sheet-inner { display: grid; padding-block: 4px 24px; }
.nav-sheet-inner a {
  display: block; padding-block: 12px;
  font-size: 26px; font-weight: 900; letter-spacing: -0.04em;
}
@media (max-width: 860px) {
  .nav-links, .nav-signin { display: none; }
  .nav-menu { display: block; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(36px, 6vw, 84px)); padding-bottom: clamp(96px, 11vw, 160px); }
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1100px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 62%, var(--panel), transparent 70%);
  opacity: 0.75;
}
.hero-copy { display: grid; justify-items: start; gap: 22px; }
.hero-eyebrow { color: var(--muted); }
.display .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.display .line > span { display: inline-block; }
.display .hl { font-style: normal; }
.stop { color: var(--signal-display); }
.hero-sub { max-width: 31em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-stage-wrap { margin-top: clamp(48px, 6vw, 84px); perspective: 2200px; }
.hero-stage { transform-origin: 50% 0%; }

@media (prefers-reduced-motion: no-preference) {
  [data-hero] { animation: hero-in 1000ms var(--ease-out) both; }
  [data-hero="0"] { animation-delay: 60ms; }
  [data-hero="1"], [data-hero="2"] { animation-name: line-in; animation-duration: 1100ms; }
  [data-hero="1"] { animation-delay: 120ms; }
  [data-hero="2"] { animation-delay: 210ms; }
  [data-hero="3"] { animation-delay: 360ms; }
  [data-hero="4"] { animation-delay: 450ms; }
  [data-hero="5"] { animation-name: stage-in; animation-duration: 1500ms; animation-delay: 520ms; }
}
@keyframes hero-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes line-in { from { transform: translateY(108%); } }
@keyframes stage-in { from { opacity: 0; transform: translateY(70px); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .hero-stage {
      animation: stage-settle linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 48%;
    }
  }
}
@keyframes stage-settle {
  from { transform: rotateX(13deg) scale(0.955); }
  to { transform: none; }
}

.stage-play {
  position: absolute; right: 18px; bottom: 18px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--muted); background: var(--panel);
  box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line);
  transition: color 200ms, transform 160ms var(--ease-out);
}
.stage-play .i { font-size: 14px; }
.stage-play:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .stage-play:hover { color: var(--ink); } }

/* ---------- App mockup (shared by hero) ---------- */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 10px; height: 664px; }
.app-side { display: flex; flex-direction: column; gap: 1px; padding: 10px 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); overflow: hidden; }
.side-ws { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.side-ws-name { display: grid; gap: 1px; line-height: 1.15; }
.side-ws-name b { font-size: 14px; color: var(--ink); }
.side-ws-name .plabel { font-size: 9.5px; letter-spacing: 0.16em; }
.side-caret { margin-inline-start: auto; font-size: 13px; color: var(--faint); }
.side-row { display: flex; align-items: center; gap: 10px; height: 32px; padding-inline: 10px; border-radius: 9px; white-space: nowrap; }
.side-row .i { font-size: 16px; color: var(--muted); }
.side-row.is-on { background: var(--selected); color: var(--ink); font-weight: 700; }
.side-row .kbd, .side-row .count { margin-inline-start: auto; }
.count { min-width: 20px; height: 18px; padding-inline: 6px; border-radius: var(--r-pill); display: grid; place-items: center; font: 500 11px/1 var(--font-mono); color: var(--muted); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.side-label { margin: 16px 10px 5px; }
.side-foot { margin-top: auto; display: grid; gap: 1px; }

.app-main { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.app-top { flex: none; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 16px 14px; border-bottom: 1px solid var(--line); }
.crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 13px; color: var(--muted); }
.crumbs i { font-style: normal; color: var(--ghost); }
.crumbs b { color: var(--ink); font-weight: 700; }
.ws-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding-inline: 8px; margin-inline-start: 4px; border-radius: var(--r-pill); background: var(--inset); font-size: 12px; font-weight: 500; }
.ws-chip .i { font-size: 13px; }
.app-top-r { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; flex: none; }
.top-ic { font-size: 16px; color: var(--muted); }

.page { padding: 34px clamp(20px, 5.5vw, 72px) 24px; overflow: hidden; }
.app .page-title { margin-top: 0; }
.page-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--muted); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.page-title { font-weight: 900; font-size: 38px; line-height: 1.08; letter-spacing: -0.045em; margin: 12px 0 14px; }
.props { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; font-size: 13.5px; }
.prop-k { display: flex; align-items: center; gap: 8px; height: 30px; color: var(--muted); white-space: nowrap; }
.prop-k .i { font-size: 15px; }
.prop-v { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); }
.props.sm { grid-template-columns: 84px minmax(0, 1fr); font-size: 12.5px; }
.props.sm .prop-k { height: 27px; }
.relink {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--signal-line); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  white-space: nowrap;
}
.relink .i { font-size: 14px; color: var(--muted); }
.page-h { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin: 24px 0 10px; }
.callout { position: relative; display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--r-lg); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.callout p { min-height: 1.6em; }
.callout-ic { font-size: 18px; color: var(--graphite); margin-top: 3px; }
.anchor { border-radius: 3px; transition: background-color 500ms var(--ease-brand), box-shadow 500ms var(--ease-brand); }
.anchor.is-on { background: var(--accent-surface); box-shadow: inset 0 -2px 0 var(--accent); }
.caret { display: inline-block; width: 2px; height: 1.15em; margin-inline-start: 1px; vertical-align: -0.2em; background: var(--av-rami); opacity: 0; }
.caret.is-on { opacity: 1; animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.db { margin-top: 24px; }
.db-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; font-size: 13px; }
.db-head > b { font-size: 15px; margin-inline-end: 10px; }
.db-tab { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 9px; border-radius: 8px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.db-tab .i { font-size: 14px; }
.db-tab.is-on { color: var(--ink); font-weight: 700; background: var(--inset); }
.db-table { border-top: 1px solid var(--line); font-size: 13.5px; }
.tr { display: grid; grid-template-columns: minmax(0, 1.7fr) 118px 64px 64px; gap: 10px; align-items: center; height: 40px; padding-inline: 6px; border-bottom: 1px solid var(--line); }
.tr.th { height: 34px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.tn { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.tn .i { flex: none; font-size: 15px; color: var(--muted); }
.swap { display: inline-block; padding-inline: 3px; margin-inline: -3px; border-radius: 5px; transition: background-color 600ms var(--ease-brand); }
.swap.flash { background: var(--st-warn-b); }

.cursor {
  position: absolute; left: 0; top: 0; z-index: 4;
  display: flex; align-items: flex-start;
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--cx, 520px), var(--cy, 470px));
  transition: transform 1100ms var(--ease-move), opacity 300ms var(--ease-brand);
}
.cursor.is-on { opacity: 1; }
.cursor svg { width: 18px; height: 18px; fill: var(--av-rami); stroke: var(--panel); stroke-width: 1.4; }
.cursor span { margin-top: 15px; margin-inline-start: -2px; padding: 3px 7px; border-radius: var(--r-pill); background: var(--av-rami); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.1; }

.comment {
  position: absolute; z-index: 3; right: 12px; top: calc(100% + 10px);
  width: 252px; padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--panel);
  box-shadow: var(--shadow-overlay), inset 0 0 0 1px var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  transform-origin: 85% 0;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.comment[data-show="false"] { opacity: 0; transform: translateY(6px) scale(0.97); }
.comment-h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.comment-h b { color: var(--ink); font-size: 13.5px; }
.comment-h .mono { margin-inline-start: auto; font-size: 11px; color: var(--faint); }
.comment-h::before { content: ""; order: 9; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); height: 560px; }
  .app-side { display: none; }
}
@media (max-width: 640px) {
  .hero-stage { padding: 6px; border-radius: 20px; }
  .app { height: 520px; }
  .ws-chip, .top-share, .top-ic, .crumbs span:first-child, .crumbs i:first-of-type { display: none; }
  .page { padding: 20px 18px; }
  .page-title { font-size: 28px; }
  .props { grid-template-columns: 96px minmax(0, 1fr); }
  .tr { grid-template-columns: minmax(0, 1fr) 104px 52px; }
  .c-owner { display: none; }
  .comment { width: 210px; right: 6px; }
  .stage-play { right: 12px; bottom: 12px; }
}

/* ---------- Problem: four places, then one page ---------- */
.problem { padding-block: clamp(24px, 4vw, 48px) clamp(72px, 9vw, 120px); }
.problem-grid { display: grid; gap: 40px; }
.problem-copy { display: grid; gap: 36px; }
.pstep { display: grid; gap: 14px; max-width: 30em; }
.pbars { display: none; }
.problem-stage { display: grid; gap: 32px; }
.frags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.frag { min-width: 0; padding: 14px 16px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.frag-tool { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.frag-tool .i { font-size: 13px; }
.frag-chan { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.msg { display: flex; gap: 10px; }
.msg-h { display: flex; align-items: baseline; gap: 8px; }
.msg-h b { color: var(--ink); font-size: 13.5px; }
.msg-h .mono { font-size: 11px; color: var(--faint); }
.doc-title { font-size: 16px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 10px; }
.sk { display: block; height: 7px; width: var(--w, 80%); margin-block: 8px; border-radius: 4px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.doc-line { margin-block: 10px; font-weight: 500; color: var(--ink); }
.sheet { display: grid; grid-template-columns: 1.4fr 0.9fr 0.6fr; font-size: 11.5px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.sheet span { padding: 6px 8px; border-top: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet span:nth-child(3n+2), .sheet span:nth-child(3n) { border-inline-start: 1px solid var(--line); }
.sheet .sh { border-top: 0; background: var(--inset); color: var(--faint); }
.trk-col { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--st-info-t); margin-bottom: 8px; }
.trk-col .mono { font-weight: 400; color: var(--faint); }
.trk-card { display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line-strong); }
.trk-card b { color: var(--ink); font-size: 14px; }
.trk-meta { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; }
mark { background: none; color: inherit; border-radius: 4px; padding-inline: 3px; margin-inline: -3px; }
mark.stale { background-color: var(--st-danger-b); color: var(--st-danger-t); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
mark.fresh { background-color: var(--signal-surface); color: var(--signal-text); font-weight: 700; }

.clipped { position: relative; width: 100%; max-width: 440px; margin-inline: auto; padding-top: 30px; }
.sheet-under { position: absolute; inset: 30px 0 0; border-radius: var(--r-panel); background: var(--panel); box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line); }
.sheet-under.s1 { --fan: rotate(-3.2deg) translate(-8px, 8px); transform: var(--fan); }
.sheet-under.s2 { --fan: rotate(2.6deg) translate(10px, 4px); transform: var(--fan); }
.cn-page { position: relative; padding: 22px 24px 18px; box-shadow: var(--shadow-lift), inset 0 0 0 1px var(--line); }
.cn-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.cn-title { font-size: 23px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: 10px; }
.cn-body { margin: 12px 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.cn-tasks { display: grid; gap: 2px; font-size: 13px; font-weight: 500; }
.cn-tasks span { display: flex; align-items: center; gap: 8px; height: 30px; padding-inline: 8px; border-radius: 8px; background: var(--inset); }
.cn-tasks .i { font-size: 15px; color: var(--muted); }
.cn-tasks em { margin-inline-start: auto; font-style: normal; font-size: 12px; color: var(--muted); }
.cn-hist { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cn-hist .i { font-size: 14px; flex: none; }
.clip-mark { position: absolute; z-index: 2; top: -6px; right: 52px; width: 50px; color: var(--ink); filter: drop-shadow(0 2px 2px rgba(16, 16, 20, 0.12)); }
.clip-mark svg { width: 100%; height: auto; }

/* Without scroll-driven animation the scene reads top to bottom: claim, evidence, claim, answer. */
.problem-copy, .problem-stage { display: contents; }
.pstep-1 { order: 1; }
.frags { order: 2; }
.pstep-2 { order: 3; }
.pstep-3 { order: 4; }
.clipped { order: 5; margin-top: 8px; }
.problem-grid { gap: 36px; }
@media (max-width: 520px) {
  .frags { grid-template-columns: minmax(0, 1fr); }
}

@supports (animation-timeline: view()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .problem { padding-block: 0; }
    .problem-track { height: 330vh; view-timeline: --problem block; }
    .problem-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
    .problem-grid { width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 56px; }
    .problem-copy { position: relative; display: block; height: 320px; }
    .problem-stage { display: block; }
    .clipped { margin-top: 0; }
    .pstep { position: absolute; inset: 0 0 auto 0; animation: linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    .pstep-1 { animation-name: p1; }
    .pstep-2 { animation-name: p2; }
    .pstep-3 { animation-name: p3; }
    .pbars { position: absolute; left: 0; bottom: 0; display: flex; gap: 6px; }
    .pbars span { width: 44px; height: 3px; border-radius: 2px; overflow: hidden; background: var(--line-strong); }
    .pbars i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; animation: linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    .pbars span:nth-child(1) i { animation-name: bar1; }
    .pbars span:nth-child(2) i { animation-name: bar2; }
    .pbars span:nth-child(3) i { animation-name: bar3; }

    .problem-stage { position: relative; display: block; height: min(640px, 84vh); }
    .frags { position: absolute; inset: 0; display: block; }
    .frag { position: absolute; left: 50%; top: 50%; width: var(--w); translate: -50% -50%; animation: frag-move linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    .frag-chat { --w: 300px; --x0: -150px; --y0: -175px; --x1: -168px; --y1: -196px; --r0: -2.5deg; }
    .frag-doc { --w: 246px; --x0: 160px; --y0: -150px; --x1: 176px; --y1: -168px; --r0: 2.2deg; }
    .frag-sheet { --w: 300px; --x0: -145px; --y0: 128px; --x1: -164px; --y1: 146px; --r0: 1.8deg; }
    .frag-tracker { --w: 228px; --x0: 172px; --y0: 148px; --x1: 190px; --y1: 166px; --r0: -2.2deg; }
    mark.stale { animation: stale linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    mark.fresh { animation: fresh linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }

    .clipped { position: absolute; left: 50%; top: 50%; width: 420px; max-width: none; margin: 0; translate: -50% -48%; animation: clipped-in linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    .sheet-under { animation: fan linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
    .clip-mark { animation: clip-on linear both; animation-timeline: --problem; animation-range: contain 0% contain 100%; }
  }
}
@keyframes p1 { 0%, 24% { opacity: 1; transform: none; } 32%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes p2 { 0%, 27% { opacity: 0; transform: translateY(24px); } 35%, 58% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-24px); } }
@keyframes p3 { 0%, 63% { opacity: 0; transform: translateY(24px); } 71%, 100% { opacity: 1; transform: none; } }
@keyframes bar1 { 0% { transform: scaleX(0); } 31%, 100% { transform: scaleX(1); } }
@keyframes bar2 { 0%, 31% { transform: scaleX(0); } 64%, 100% { transform: scaleX(1); } }
@keyframes bar3 { 0%, 64% { transform: scaleX(0); } 92%, 100% { transform: scaleX(1); } }
@keyframes frag-move {
  0% { transform: translate(var(--x0), var(--y0)) rotate(var(--r0)); opacity: 1; }
  60% { transform: translate(var(--x1), var(--y1)) rotate(var(--r0)); opacity: 1; }
  75%, 100% { transform: translate(0, 24px) scale(0.72); opacity: 0; }
}
@keyframes stale {
  0%, 29% { background-color: transparent; color: inherit; text-decoration-color: transparent; }
  36%, 100% { background-color: var(--st-danger-b); color: var(--st-danger-t); text-decoration-color: currentColor; }
}
@keyframes fresh {
  0%, 29% { background-color: transparent; color: inherit; }
  36%, 100% { background-color: var(--signal-surface); color: var(--signal-text); }
}
@keyframes clipped-in { 0%, 63% { opacity: 0; transform: translateY(48px) scale(0.95); } 76%, 100% { opacity: 1; transform: none; } }
@keyframes fan { 0%, 72% { transform: none; } 84%, 100% { transform: var(--fan); } }
@keyframes clip-on { 0%, 79% { opacity: 0; transform: translateY(-44px); } 89%, 100% { opacity: 1; transform: none; } }

/* ---------- Statement ---------- */
.statement { padding-block: clamp(96px, 12vw, 180px) clamp(80px, 10vw, 150px); }
.statement-text { display: grid; gap: 0.06em; color: var(--stmt-lit); font-weight: 900; font-size: clamp(40px, 6.6vw, 92px); line-height: 1; letter-spacing: -0.05em; }
.sl { display: block; }
.statement-sub { margin-top: 32px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement { view-timeline: --stmt block; }
    .w { animation: word-lit linear both; animation-timeline: --stmt; animation-range: cover calc(22% + var(--i) * 2.6%) cover calc(27% + var(--i) * 2.6%); }
  }
}
@keyframes word-lit { from { color: var(--word-dim); } to { color: var(--stmt-lit); } }

/* ---------- Section heads ---------- */
.sec-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.br-wide { display: none; }
@media (min-width: 720px) { .br-wide { display: inline; } }

/* ---------- How it works ---------- */
.how { padding-block: clamp(72px, 9vw, 130px) clamp(64px, 8vw, 110px); }

.peek-app { position: relative; display: flex; flex-direction: column; height: 540px; overflow: hidden; }
.peek-body { padding: 26px clamp(18px, 4vw, 52px); }
.dbpage-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dbpage-head .page-title { margin: 0; font-size: 32px; }
.dbpage-meta { font-size: 13px; color: var(--muted); }
.views-line { padding-bottom: 6px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.peek-table { border-top: 0; }
.peek-table .tr { grid-template-columns: minmax(0, 1.9fr) 118px 64px 78px; height: 48px; font-size: 14px; }
.row-btn { width: 100%; text-align: start; border-radius: 0; transition: background-color 160ms var(--ease-brand); }
.row-btn[aria-expanded="true"] { background: var(--selected); }
.open-hint { margin-inline-start: 10px; padding: 3px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 500; color: var(--muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong); opacity: 0; transition: opacity 160ms var(--ease-brand); }
.row-btn:focus-visible { outline-offset: -2px; }
.row-btn:focus-visible .open-hint { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .row-btn:hover { background: var(--hover); }
  .row-btn:hover .open-hint { opacity: 1; }
}
.peek-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease-brand); }
[data-peek-open] .peek-scrim { opacity: 1; pointer-events: auto; cursor: pointer; }
.peek {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2;
  width: min(560px, 64%);
  overflow: auto; overscroll-behavior: contain;
  background: var(--panel);
  box-shadow: var(--shadow-overlay), inset 1px 0 0 var(--line);
  transform: translateX(104%);
  visibility: hidden;
  transition: transform 460ms var(--ease-out), visibility 0s linear 460ms;
}
.peek[data-open="true"] { transform: none; visibility: visible; transition: transform 460ms var(--ease-out), visibility 0s; }
.peek-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 0 22px; }
.peek-hint { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.peek-icons { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 16px; }
.peek-x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; transition: background-color 160ms; }
@media (hover: hover) and (pointer: fine) { .peek-x:hover { background: var(--hover); color: var(--ink); } }
.peek-content { padding: 12px clamp(20px, 3vw, 36px) 32px; }
.peek-title { margin-bottom: 14px; font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -0.04em; text-wrap: balance; }
.rels { flex-wrap: wrap; gap: 2px 12px; padding-block: 5px; }
.peek-text { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.peek-sub { margin-top: 20px; font-size: 14px; font-weight: 700; }
.peek-comment { display: flex; gap: 10px; margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.peek-comment .av { --size: 26px; }
.peek-updates { display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-top: 20px; padding-inline: 10px; border-radius: var(--r-pill); background: var(--inset); font-size: 13px; font-weight: 700; color: var(--ink-2); }
.peek-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; margin-top: 26px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.peek-notes b { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) {
  .peek-app { height: 560px; }
  .peek-table .tr { grid-template-columns: minmax(0, 1fr) 104px; }
  .peek-table .c-owner, .peek-table .c-date { display: none; }
  .peek { width: 100%; }
  .peek-notes { grid-template-columns: minmax(0, 1fr); }
  .views-line .db-tab:nth-child(3) { display: none; }
}

/* One database, many views */
.views { margin-top: clamp(96px, 12vw, 160px); }
.views-head { display: grid; gap: 12px; max-width: 640px; margin-bottom: 28px; }
.views-panel { padding-bottom: 22px; }
.views-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; padding: 10px 18px 0; border-bottom: 1px solid var(--line); }
.vtabs { position: relative; display: flex; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.vtabs::-webkit-scrollbar { display: none; }
.vtabs button {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  height: 44px; padding-inline: 12px;
  font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color 200ms var(--ease-brand);
}
.vtabs button .i { font-size: 16px; }
.vtabs button[aria-selected="true"] { color: var(--ink); font-weight: 700; }
.vtabs button:focus-visible { outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .vtabs button:hover { color: var(--ink); } }
.vtab-ink { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; transform-origin: 0 50%; transform: translateX(var(--x, 0px)) scaleX(var(--s, 0.8)); background: var(--line-strong); transition: transform 420ms var(--ease-brand); }
.vtab-ink i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; }
.views-also { padding-bottom: 12px; font-size: 13px; color: var(--faint); }
.views-canvas { position: relative; margin: 16px 18px 0; height: var(--vh, 320px); }
.vc-guides > div { position: absolute; left: 0; right: 0; top: 0; opacity: 0; transition: opacity 280ms var(--ease-brand); }
[data-layout="table"] .g-table, [data-layout="board"] .g-board, [data-layout="timeline"] .g-time { opacity: 1; }
.g-table { display: grid; grid-template-columns: minmax(0, 1fr) 128px 70px 70px; gap: 12px; align-items: center; height: 34px; padding-inline: 10px; border-bottom: 1px solid var(--line); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.g-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.g-board > span { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 4px; }
.g-board i { font-style: normal; }
.g-board em { font: 400 11.5px/1 var(--font-mono); font-style: normal; color: var(--faint); }
.g-time > span { flex: 0 0 20%; }
.g-time { display: flex; height: 30px; padding-inline: 2px; font: 400 11px/30px var(--font-mono); color: var(--faint); border-bottom: 1px dashed var(--line-strong); }
.vc-items { position: absolute; inset: 0; }
.vc { position: absolute; left: 0; top: 0; }
.vc-bg { position: absolute; inset: 0; transform-origin: 0 0; border-radius: var(--vc-r, 0); background: var(--vc-fill, transparent); box-shadow: var(--vc-shadow, none); }
.vc-in { position: relative; height: 100%; display: grid; align-items: center; gap: 12px; padding-inline: 10px; min-width: 0; font-size: 13.5px; }
.vc-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.vc-due { font-size: 12.5px; color: var(--muted); }
.vc-cover { display: none; place-items: center; color: var(--muted); }
.vc[data-tint="blue"] { --t-bg: var(--tint-blue); --t-fg: var(--tint-blue-t); }
.vc[data-tint="teal"] { --t-bg: var(--tint-teal); --t-fg: var(--tint-teal-t); }
.vc[data-tint="purple"] { --t-bg: var(--tint-purple); --t-fg: var(--tint-purple-t); }
.vc[data-tint="yellow"] { --t-bg: var(--tint-yellow); --t-fg: var(--tint-yellow-t); }
.vc[data-tint="pink"] { --t-bg: var(--tint-pink); --t-fg: var(--tint-pink-t); }
.vc[data-tint="brown"] { --t-bg: var(--tint-brown); --t-fg: var(--tint-brown-t); }

[data-layout="table"] .vc { --vc-shadow: inset 0 -1px 0 var(--line); }
[data-layout="table"] .vc-in { grid-template-columns: minmax(0, 1fr) 128px 70px 70px; }
[data-layout="table"] .vc-in > .av { justify-self: start; }

[data-layout="list"] .vc { --vc-r: 10px; --vc-fill: var(--inset); }
[data-layout="list"] .vc-in { grid-template-columns: 18px minmax(0, 1fr) auto auto; padding-inline: 12px; }
[data-layout="list"] .vc-cover { display: grid; font-size: 16px; }
[data-layout="list"] .vc-in > .chip { display: none; }
[data-layout="list"] .vc-due { order: 9; }

[data-layout="board"] .vc { --vc-r: 12px; --vc-fill: var(--panel); --vc-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line-strong); }
[data-layout="board"] .vc-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; row-gap: 10px; padding: 12px; }
[data-layout="board"] .vc-name { grid-column: 1 / -1; font-weight: 700; }
[data-layout="board"] .vc-in > .chip { justify-self: start; }
[data-layout="board"] .vc-due { display: none; }

[data-layout="gallery"] .vc { --vc-r: 14px; --vc-fill: var(--panel); --vc-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line-strong); }
[data-layout="gallery"] .vc-in { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: 1fr auto auto; align-items: center; row-gap: 8px; padding: 0 0 12px; }
[data-layout="gallery"] .vc-cover { display: grid; grid-column: 1 / -1; align-self: stretch; margin: 5px 5px 2px; border-radius: 10px; font-size: 26px; background: var(--t-bg); color: var(--t-fg); }
[data-layout="gallery"] .vc-name { grid-column: 1 / -1; padding-inline: 12px; font-weight: 700; }
[data-layout="gallery"] .vc-in > .chip { margin-inline-start: 12px; justify-self: start; }
[data-layout="gallery"] .vc-in > .av { margin-inline-end: 4px; }
[data-layout="gallery"] .vc-due { padding-inline-end: 12px; }

[data-layout="timeline"] .vc { --vc-r: 8px; --vc-fill: var(--t-bg); }
[data-layout="timeline"] .vc-in { grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding-inline: 4px 10px; font-size: 12.5px; color: var(--t-fg); }
[data-layout="timeline"] .vc-in > .av { --size: 20px; order: -1; }
[data-layout="timeline"] .vc-name { font-weight: 700; }
[data-layout="timeline"] .vc-in > .chip, [data-layout="timeline"] .vc-due { display: none; }

@media (max-width: 640px) {
  .views-bar { padding-inline: 8px; }
  .views-also { padding-inline: 10px; }
  .views-canvas { margin-inline: 10px; }
  .g-table { grid-template-columns: minmax(0, 1fr) 112px; }
  .g-table span:nth-child(n+3) { display: none; }
  [data-layout="table"] .vc-in { grid-template-columns: minmax(0, 1fr) 112px; }
  [data-layout="table"] .vc-in > .av, [data-layout="table"] .vc-due { display: none; }
  [data-layout="board"] .vc-in { padding: 10px; }
  [data-layout="board"] .vc-in > .av, [data-layout="board"] .vc-in > .chip { display: none; }
  [data-layout="board"] .vc-name { white-space: normal; font-size: 13px; line-height: 1.25; }
  .g-board { gap: 8px; }
  .g-board > span { padding-inline: 0; }
  .g-board i { font-size: 11px; padding-inline: 6px; gap: 4px; }
  .g-board em { display: none; }
}

/* Fields */
.fields { margin-top: clamp(96px, 12vw, 160px); }
.fields-head { display: grid; gap: 12px; max-width: 640px; margin-bottom: 26px; }
.fields-scroll { overflow-x: auto; border-radius: var(--r-panel); background: var(--panel); box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.fields-scroll:focus-visible { outline-offset: 4px; }
.fields-row { display: grid; grid-template-columns: 190px repeat(6, minmax(152px, 1fr)); min-width: 1100px; }
.fcol { display: grid; grid-template-rows: 42px 58px auto; }
.fcol + .fcol { box-shadow: inset 1px 0 0 var(--line); }
.fh { display: flex; align-items: center; gap: 7px; padding-inline: 16px; border-bottom: 1px solid var(--line); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.fh .i { font-size: 14px; }
.fv { display: flex; align-items: center; gap: 8px; padding-inline: 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; white-space: nowrap; }
.fv b { font-weight: 700; }
.fcol-name .fv b { font-size: 15px; }
.fc { padding: 12px 16px 16px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ring {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--st-pos-t) calc(var(--v) * 360deg), var(--line-strong) 0);
  -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px);
  mask: radial-gradient(circle, transparent 4.5px, #000 5px);
}

/* ---------- Trust ---------- */
.trust { padding-block: clamp(56px, 7vw, 100px) clamp(96px, 12vw, 160px); }
.trust-grid { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 14px; }
.toc ol { display: grid; gap: 2px; box-shadow: inset 1px 0 0 var(--line-strong); }
.toc a { position: relative; display: block; padding: 7px 0 7px 16px; font-size: 14px; color: var(--muted); transition: color 200ms var(--ease-brand); }
.toc a i { position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--signal); transform: scaleY(0); transition: transform 320ms var(--ease-brand); }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.toc a[aria-current="true"] i { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--ink); } }
.chapters { display: grid; gap: clamp(96px, 11vw, 150px); min-width: 0; }
.chapter { display: grid; gap: 24px; scroll-margin-top: calc(var(--nav-h) + 32px); min-width: 0; }
.chapter-copy { display: grid; gap: 10px; max-width: 620px; }
.demo { overflow: hidden; min-width: 0; }
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; min-height: 54px; padding: 9px 12px 9px 18px; border-bottom: 1px solid var(--line); }
.demo-crumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.demo-crumb i { font-style: normal; color: var(--ghost); }
.demo-crumb b { color: var(--ink); font-weight: 700; }
.demo-crumb .i { font-size: 15px; }
.demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.demo-foot .small { max-width: 44em; }
@media (max-width: 960px) {
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}

/* Import */
.imp { display: grid; gap: 16px; padding: 18px; }
.imp-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.imp-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 20px; color: var(--graphite); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.imp-meta { display: grid; min-width: 0; flex: 1 1 200px; }
.imp-meta b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; }
.imp-meta span { font-size: 12.5px; color: var(--muted); }
.imp-progress { display: none; gap: 8px; }
.imp-track { height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); }
.imp-track i { display: block; height: 100%; background: var(--signal); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
[data-phase="running"] .imp-progress { display: grid; }
.imp-out { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
.imp-tree { display: grid; gap: 1px; }
.imp-tree li { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.imp-tree li.in1 { padding-inline-start: 30px; }
.imp-tree .i { font-size: 15px; color: var(--muted); }
.imp-tree span { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--faint); }
.receipt { padding: 14px 16px; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line-strong); }
.receipt-sum { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); font-size: 13.5px; color: var(--muted); }
.receipt-sum b { margin-inline-end: 4px; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.receipt-h { margin: 12px 0 8px; font-size: 14px; font-weight: 700; }
.receipt-list { display: grid; gap: 9px; }
.receipt-list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.receipt-list .i { flex: none; margin-top: 2px; font-size: 15px; color: var(--muted); }
.imp-state { transition: opacity 240ms var(--ease-brand); }
[data-phase="idle"] .imp-state, [data-phase="running"] .imp-state { opacity: 0; }
.imp-tree li, .receipt, .receipt-list li { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
[data-phase="idle"] .imp-out, [data-phase="running"] .imp-out { display: none; }
[data-phase="enter"] .imp-tree li, [data-phase="enter"] .receipt-list li { opacity: 0; transform: translateY(6px); }
[data-phase="enter"] .receipt { opacity: 0; }
[data-phase="done"] .imp-tree li { transition-delay: calc(var(--n) * 70ms); }
[data-phase="done"] .receipt { transition-delay: 300ms; }
[data-phase="done"] .receipt-list li { transition-delay: calc(500ms + var(--n) * 90ms); }
@media (max-width: 640px) { .imp-out { grid-template-columns: minmax(0, 1fr); } }

/* Safe change */
.co { display: grid; gap: 14px; padding: 18px; }
.co-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.co-type { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding-inline: 10px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.co-type.is-to { color: var(--signal-text); box-shadow: inset 0 0 0 1.5px var(--signal); }
.co-table { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.co-tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; height: 42px; padding-inline: 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.co-tr > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.co-th { height: 34px; border-top: 0; background: var(--inset); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.co-old { color: var(--ink); font-size: 13px; }
.co-new { color: var(--muted); font-size: 13px; transition: opacity 240ms var(--ease-brand); }
.co-warn { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; background: var(--st-danger-b); color: var(--st-danger-t); }
.co-warn .i { flex: none; margin-top: 2px; font-size: 16px; }
.co-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ctl-danger { color: var(--panel); background: var(--st-danger-t); box-shadow: none; }
.ctl-danger .spinner { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .ctl-danger:hover { color: var(--panel); background: color-mix(in srgb, var(--st-danger-t) 88%, var(--ink)); } }
.co-done { display: none; gap: 12px; }
[data-state="done"] .co-done, [data-state="restored"] .co-done { display: grid; }
[data-state="done"] .co-warn, [data-state="done"] .co-actions, [data-state="restored"] .co-warn, [data-state="restored"] .co-actions { display: none; }
[data-state="done"] .co-new, [data-state="restored"] .co-new { opacity: 0.35; }
.co-done-msg { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--st-pos-t); }
.co-done-msg .i { font-size: 18px; }
.co-version { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.co-version > .i { font-size: 18px; color: var(--muted); }
.co-version > span { display: grid; font-size: 13.5px; }
.co-version .mono { font-size: 11.5px; color: var(--faint); }
.co-version .ctl { margin-inline-start: auto; }
.cell-swap { animation: cell-swap 420ms var(--ease-out); }
@keyframes cell-swap { from { opacity: 0; filter: blur(3px); transform: translateY(3px); } }

/* Save state */
.off-banner { display: none; align-items: flex-start; gap: 10px; padding: 11px 18px; font-size: 13.5px; line-height: 1.45; color: var(--st-warn-t); background: var(--st-warn-b); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.off-banner .i { flex: none; margin-top: 2px; font-size: 16px; }
[data-net="offline"] .off-banner { display: flex; }
@starting-style { [data-net="offline"] .off-banner { opacity: 0; transform: translateY(-6px); } }
.off-page { position: relative; min-height: 200px; padding: 24px clamp(18px, 4vw, 44px) 28px; }
.off-h { margin-bottom: 10px; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; }
.off-p { margin-bottom: 6px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.off-skel { position: absolute; inset: 24px clamp(18px, 4vw, 44px); display: none; align-content: start; gap: 12px; }
.off-skel span { height: 12px; border-radius: 6px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line); }
.off-skel span:first-child { width: 30%; height: 20px; }
.off-skel span:nth-child(2) { width: 70%; }
.off-skel span:nth-child(3) { width: 88%; }
[data-reloading] .off-skel { display: grid; }
[data-reloading] .off-page > p { visibility: hidden; }
.off-note { flex-basis: 100%; min-height: 1.5em; }
.off-note:empty { display: none; }
#t-save .demo-bar .savepill { transition: background-color 240ms var(--ease-brand), color 240ms var(--ease-brand); }

/* Arabic */
.ar-app { display: grid; grid-template-columns: 196px minmax(0, 1fr); min-height: 330px; transition: opacity 220ms var(--ease-brand), filter 220ms var(--ease-brand); }
.ar-app.is-switching { opacity: 0; filter: blur(4px); }
.ar-side { display: flex; flex-direction: column; gap: 1px; padding: 12px 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); background: var(--inset); box-shadow: inset -1px 0 0 var(--line); }
.ar-app[dir="rtl"] .ar-side { box-shadow: inset 1px 0 0 var(--line); }
.ar-page { padding: 24px clamp(18px, 3vw, 34px); min-width: 0; }
.ar-title { margin-bottom: 12px; font-size: 28px; font-weight: 900; letter-spacing: -0.035em; }
.ar-block { margin-top: 10px; margin-inline: -10px; padding: 8px 10px; border-radius: 8px; font-size: 15px; line-height: 1.7; color: var(--ink-2); background: transparent; }
.ar-block[data-t="b2"] { background: var(--inset); }
.ar-block::after { display: inline-block; margin-inline-start: 10px; padding: 2px 5px; border-radius: 4px; vertical-align: 1px; font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.1em; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ar-block:dir(ltr)::after { content: "LTR"; }
.ar-block:dir(rtl)::after { content: "RTL"; }
:lang(ar) { font-family: var(--font-ar); letter-spacing: 0 !important; }
.ar-app :lang(en) { font-family: var(--font-sans); }
.ar-app[lang="ar"] .ar-title { font-weight: 700; }
@media (max-width: 640px) {
  .ar-app { grid-template-columns: minmax(0, 1fr); }
  .ar-side { display: none; }
}

/* Permissions */
.qf { padding: 16px 18px 4px; }
.qf-input { display: flex; align-items: center; gap: 10px; height: 46px; padding-inline: 14px; border-radius: 12px; font-size: 15px; background: var(--inset); box-shadow: inset 0 0 0 1px var(--line-strong); }
.qf-input .i { font-size: 17px; color: var(--muted); }
.qf-input .kbd { margin-inline-start: auto; }
.qf-count { margin: 12px 6px 6px; }
.qf-list { display: grid; }
.qf-list li { display: flex; align-items: center; gap: 10px; min-height: 42px; padding-inline: 10px; border-radius: 9px; font-size: 14px; }
.qf-list li:first-child { background: var(--selected); }
.qf-list li .i { flex: none; font-size: 16px; color: var(--muted); }
.qf-list b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.qf-where { margin-inline-start: auto; flex: none; font-size: 12.5px; color: var(--faint); }
.hook { margin: 14px 18px 18px; overflow: hidden; border-radius: var(--r-lg); background: var(--code-bg); color: var(--code-ink); }
.hook-cap { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hook-cap .i { flex: none; font-size: 16px; color: var(--code-dim); }
.code { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font: 400 12.5px/1.7 var(--font-mono); color: var(--code-ink); tab-size: 2; }
.code:focus-visible { outline-offset: -3px; }
.c-dim { color: var(--code-dim); }
.c-key { color: var(--code-key); }
.c-str { color: var(--code-str); }

/* ---------- Outcome ---------- */
.outcome { padding-block: clamp(80px, 10vw, 150px) clamp(40px, 5vw, 72px); }
.chain { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.node { position: relative; z-index: 1; display: grid; align-content: start; gap: 10px; padding: 16px 16px 18px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line); }
.node-k { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.node-k .i { font-size: 14px; color: var(--signal-text); }
.node-v { font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.node-v.mono { font-size: 13.5px; font-weight: 500; letter-spacing: 0; }
.chain-line { position: absolute; z-index: 0; left: 6%; right: 6%; top: 50%; height: 2px; }
.chain-line i { display: block; height: 100%; transform-origin: 0 50%; background: repeating-linear-gradient(90deg, var(--signal) 0 6px, transparent 6px 12px); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .chain { view-timeline: --chain block; }
    .chain-line i { animation: draw-x linear both; animation-timeline: --chain; animation-range: cover 15% cover 45%; }
  }
}
@keyframes draw-x { from { transform: scaleX(0); } }
@keyframes draw-y { from { transform: scaleY(0); } }
@media (max-width: 900px) {
  .chain { grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 460px; margin-inline: auto; }
  .chain-line { left: 31px; right: auto; top: 20px; bottom: 20px; width: 2px; height: auto; }
  .chain-line i { width: 100%; height: 100%; transform-origin: 50% 0; background: repeating-linear-gradient(180deg, var(--signal) 0 6px, transparent 6px 12px); }
  @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .chain-line i { animation-name: draw-y; } } }
  .node { grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
}

/* ---------- Who ---------- */
.who { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 100px); }
.who-text { max-width: 25em; font-weight: 700; font-size: clamp(25px, 3.5vw, 46px); line-height: 1.34; letter-spacing: -0.035em; text-wrap: pretty; }
.pill { display: inline-block; padding: 0 0.36em 0.05em; border-radius: var(--r-pill); line-height: 1.22; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-panel); white-space: nowrap; }
.who-sub { max-width: 40em; margin-top: 22px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--muted); }
.ar-inline { font-weight: 700; color: var(--ink); }

/* ---------- Answers ---------- */
.answers { padding-block: clamp(80px, 10vw, 140px); }
.answers-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.answers-head { position: sticky; top: calc(var(--nav-h) + 48px); display: grid; gap: 14px; }
.acc { display: grid; gap: 4px; }
.acc-item { border-radius: var(--r-panel); transition: background-color 260ms var(--ease-brand), box-shadow 260ms var(--ease-brand); }
.acc-item[data-open="true"] { background: var(--panel); box-shadow: var(--shadow-panel), inset 0 0 0 1px var(--line); }
.acc h3 { font: inherit; }
.acc button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: var(--r-panel); text-align: start; font-size: clamp(17px, 1.5vw, 19px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.acc button:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .acc-item:not([data-open="true"]) button:hover { background: var(--hover); } }
.acc-ic { position: relative; width: 14px; height: 14px; flex: none; color: var(--muted); }
.acc-ic::before, .acc-ic::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.6px; margin-top: -0.8px; border-radius: 2px; background: currentColor; transition: transform 300ms var(--ease-brand); }
.acc-ic::after { transform: rotate(90deg); }
[data-open="true"] .acc-ic::after { transform: rotate(0deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 340ms var(--ease-out); }
.acc-panel > div { overflow: hidden; }
.acc-panel p { max-width: 36em; padding: 0 20px 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); opacity: 0; transition: opacity 240ms var(--ease-brand); }
[data-open="true"] .acc-panel { grid-template-rows: 1fr; }
[data-open="true"] .acc-panel p { opacity: 1; transition-delay: 80ms; }
@media (max-width: 860px) {
  .answers-grid { grid-template-columns: minmax(0, 1fr); }
  .answers-head { position: static; }
  .acc button { padding: 16px; }
  .acc-panel p { padding: 0 16px 18px; }
}

/* ---------- Access ---------- */
.access { padding-block: clamp(24px, 4vw, 48px) clamp(64px, 8vw, 100px); }
.access-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 28px; }
.access-copy { display: grid; align-content: start; gap: 16px; }
.access-form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; font-weight: 700; }
.field label span { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 0; border-radius: 12px;
  font-size: 16px; line-height: 1.4; color: var(--ink);
  background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: box-shadow 200ms var(--ease-brand), background-color 200ms var(--ease-brand);
  resize: vertical;
}
.field input { height: 48px; }
.field ::placeholder { color: var(--faint); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--graphite), 0 0 0 4px var(--ring-halo); }
.field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--st-danger-t); }
@media (hover: hover) and (pointer: fine) { .field input:hover:not(:focus), .field textarea:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--ghost); } }
.field-err { font-size: 13.5px; color: var(--st-danger-t); }
.form-submit { justify-self: start; }
.form-submit .badge .spinner { display: none; width: 14px; height: 14px; }
.form-submit[aria-busy="true"] .badge .spinner { display: block; }
.form-note:empty { display: none; }
.form-done { display: flex; gap: 12px; padding: 18px; border-radius: var(--r-lg); font-size: 15px; line-height: 1.5; background: var(--st-pos-b); color: var(--st-pos-t); }
.form-done:focus { outline: none; }
.form-done .i { flex: none; font-size: 22px; }
.form-done b { color: inherit; }
.access-signin { margin-top: 18px; }
.access-signin a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (max-width: 860px) { .access-card { grid-template-columns: minmax(0, 1fr); border-radius: 24px; } }

/* ---------- Footer ---------- */
.foot { padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); box-shadow: inset 0 1px 0 var(--line); }
.foot-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 32px; align-items: start; }
.foot-brand { display: grid; gap: 10px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 6px; font-size: 14.5px; color: var(--muted); }
.foot-links a { transition: color 200ms var(--ease-brand); }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--ink); } }
.foot-theme { display: flex; align-items: center; gap: 10px; }
.foot-theme .seg button { padding-inline: 10px; }
.foot-theme .seg .i { font-size: 15px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; }
@media (max-width: 760px) { .foot-inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reduced motion: keep state changes, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .peek, .cursor, .seg-thumb, .vtab-ink, .acc-panel, .nav-menu span { transition-duration: 0.01ms !important; }
}

/* ---------- Accent options (review) ----------
   A "Full stops": every headline ends on the CTA's orange dot; orange marks progress, links and active states.
   B "Marker":     A, plus an orange highlighter stroke on one key word per headline.
   C "Ember":      A, plus ink plates with an orange dot grid under the product and the invite, and orange display type. */

/* B: Marker */
:root[data-accent="marker"] .mk {
  background-image: linear-gradient(var(--marker), var(--marker));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 100% 0.34em;
  padding-inline: 0.05em;
  margin-inline: -0.05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1000ms var(--ease-out) 450ms;
}
:root[data-accent="marker"] .is-primed .mk { background-size: 0% 0.34em; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-accent="marker"] .hero .mk { animation: mk-in 1000ms var(--ease-out) 950ms both; }
}
@keyframes mk-in { from { background-size: 0% 0.34em; } }
:root[data-accent="marker"] mark.fresh { background-color: var(--marker); color: inherit; }
@keyframes fresh-mk { 0%, 29% { background-color: transparent; } 36%, 100% { background-color: var(--marker); } }
@supports (animation-timeline: view()) {
  @media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    :root[data-accent="marker"] mark.fresh { animation-name: fresh-mk; }
  }
}

/* C: Ember */
:root[data-accent="ember"] { --stmt-lit: var(--signal-display); }
:root[data-accent="ember"] .display .hl { color: var(--signal-display); }
:root[data-accent="ember"] .hero-stage,
:root[data-accent="ember"] .access-card {
  background-color: var(--plate);
  background-image: radial-gradient(var(--plate-dot) 1px, transparent 1.4px);
  background-size: 20px 20px;
  background-position: 10px 10px;
  box-shadow: var(--plate-shadow), inset 0 0 0 1px var(--plate-line);
}
:root[data-accent="ember"] .hero-stage { padding: clamp(6px, 2vw, 26px); border-radius: 28px; }
:root[data-accent="ember"] .access-card { color: var(--on-plate); }
:root[data-accent="ember"] .access-card .lede,
:root[data-accent="ember"] .access-card .field label span,
:root[data-accent="ember"] .access-card .form-note,
:root[data-accent="ember"] .access-card .access-signin { color: var(--on-plate-2); }
:root[data-accent="ember"] .access-card .field input,
:root[data-accent="ember"] .access-card .field textarea { color: var(--on-plate); background: var(--plate-field); box-shadow: inset 0 0 0 1px var(--plate-line); }
:root[data-accent="ember"] .access-card .field ::placeholder { color: var(--on-plate-2); opacity: 0.7; }
:root[data-accent="ember"] .access-card .field input:focus,
:root[data-accent="ember"] .access-card .field textarea:focus { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 0 4px rgba(255, 90, 31, 0.22); }
:root[data-accent="ember"] .access-card .field [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--plate-err); }
:root[data-accent="ember"] .access-card .field-err { color: var(--plate-err); }
:root[data-accent="ember"] .access-card :focus-visible { outline-color: var(--signal); }
:root[data-accent="ember"] .access-card .btn-primary { background: var(--accent); color: var(--plate-ink); box-shadow: 0 10px 24px -10px rgba(255, 90, 31, 0.6); }
:root[data-accent="ember"] .access-card .btn-primary .badge { background: var(--plate-ink); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  :root[data-accent="ember"] .access-card .btn-primary:hover { background: var(--accent-hover); }
  :root[data-accent="ember"] .access-card .btn-primary:hover .badge { background: var(--plate-ink); }
  :root[data-accent="ember"] .access-card .field input:hover:not(:focus),
  :root[data-accent="ember"] .access-card .field textarea:hover:not(:focus) { box-shadow: inset 0 0 0 1px var(--on-plate-2); }
}
:root[data-accent="ember"] .access-card .form-done { color: var(--on-plate); background: rgba(255, 255, 255, 0.08); }
:root[data-accent="ember"] .access-card .access-signin a { color: var(--on-plate); text-decoration-color: var(--signal-line); }

/* Review bar: lets you flip between the three options. Remove once one is chosen. */
.optbar {
  position: fixed; z-index: 60; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 24px);
  padding: 5px 5px 5px 14px;
  border-radius: var(--r-pill);
  background: var(--panel);
  box-shadow: var(--shadow-overlay), inset 0 0 0 1px var(--line-strong);
}
.optbar-label { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.optbar .seg button { gap: 7px; padding-inline: 12px; }
.optbar .seg b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; color: var(--on-accent); background: var(--accent); }
.optbar .seg button[aria-pressed="false"] b { color: var(--muted); background: var(--inset); box-shadow: inset 0 0 0 1px var(--line-strong); }
@media (max-width: 560px) {
  .optbar-name { display: none; }
  .optbar .seg button { padding-inline: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .optbar { animation: optbar-in 600ms var(--ease-out) 1200ms both; }
}
@keyframes optbar-in { from { opacity: 0; transform: translateY(16px); } }

/* ---------- Accent colour options (review) ----------
   Each option re-points the accent family. Orange stays available as the reference. */
:root { --on-accent-text: #0e0e10; }

:root[data-color="highlighter"] {
  --accent: #ffd21f; --accent-hover: #ffc800; --on-accent: #0e0e10; --on-accent-text: #0e0e10; --accent-surface: #fff6cc;
  --signal: #e8b400; --signal-text: #7a5c00; --signal-display: #9c7400; --signal-surface: #fff3c2; --signal-line: rgba(232, 180, 0, 0.7); --marker: rgba(255, 210, 31, 0.62);
}
:root[data-color="cobalt"] {
  --accent: #2b4bff; --accent-hover: #1d3bf0; --on-accent: #ffffff; --on-accent-text: #ffffff; --accent-surface: #e6ebff;
  --signal: #2b4bff; --signal-text: #2b4bff; --signal-display: #2b4bff; --signal-surface: #e6ebff; --signal-line: rgba(43, 75, 255, 0.45); --marker: rgba(43, 75, 255, 0.3);
}
:root[data-color="magenta"] {
  --accent: #f0287a; --accent-hover: #e0196b; --on-accent: #ffffff; --on-accent-text: #0e0e10; --accent-surface: #ffe4ef;
  --signal: #f0287a; --signal-text: #c2135d; --signal-display: #d81b6a; --signal-surface: #ffe4ef; --signal-line: rgba(240, 40, 122, 0.45); --marker: rgba(240, 40, 122, 0.32);
}
:root[data-color="lime"] {
  --accent: #b8f23a; --accent-hover: #a8e82a; --on-accent: #0e0e10; --on-accent-text: #0e0e10; --accent-surface: #effbd6;
  --signal: #8cc21a; --signal-text: #4a6f00; --signal-display: #5a8700; --signal-surface: #ecf9cf; --signal-line: rgba(140, 194, 26, 0.7); --marker: rgba(184, 242, 58, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root[data-color="highlighter"]:not([data-theme="light"]) { --accent: #ffd21f; --accent-hover: #ffdc4d; --accent-surface: #2e2708; --signal: #ffd21f; --signal-text: #ffd84d; --signal-display: #ffd21f; --signal-surface: #2e2708; --signal-line: rgba(255, 210, 31, 0.55); --marker: rgba(255, 210, 31, 0.34); }
  :root[data-color="cobalt"]:not([data-theme="light"]) { --accent: #4d69ff; --accent-hover: #6680ff; --accent-surface: #161e45; --signal: #7d93ff; --signal-text: #8ea2ff; --signal-display: #8ea2ff; --signal-surface: #161e45; --signal-line: rgba(125, 147, 255, 0.55); --marker: rgba(77, 105, 255, 0.45); }
  :root[data-color="magenta"]:not([data-theme="light"]) { --accent: #ff4f93; --accent-hover: #ff6ba5; --accent-surface: #3a1023; --signal: #ff4f93; --signal-text: #ff7bae; --signal-display: #ff5c9a; --signal-surface: #3a1023; --signal-line: rgba(255, 79, 147, 0.55); --marker: rgba(255, 79, 147, 0.42); }
  :root[data-color="lime"]:not([data-theme="light"]) { --accent: #b8f23a; --accent-hover: #c6f55e; --accent-surface: #1f2a0c; --signal: #b8f23a; --signal-text: #c6f55e; --signal-display: #b8f23a; --signal-surface: #1f2a0c; --signal-line: rgba(184, 242, 58, 0.5); --marker: rgba(184, 242, 58, 0.32); }
}
:root[data-theme="dark"][data-color="highlighter"] { --accent: #ffd21f; --accent-hover: #ffdc4d; --accent-surface: #2e2708; --signal: #ffd21f; --signal-text: #ffd84d; --signal-display: #ffd21f; --signal-surface: #2e2708; --signal-line: rgba(255, 210, 31, 0.55); --marker: rgba(255, 210, 31, 0.34); }
:root[data-theme="dark"][data-color="cobalt"] { --accent: #4d69ff; --accent-hover: #6680ff; --accent-surface: #161e45; --signal: #7d93ff; --signal-text: #8ea2ff; --signal-display: #8ea2ff; --signal-surface: #161e45; --signal-line: rgba(125, 147, 255, 0.55); --marker: rgba(77, 105, 255, 0.45); }
:root[data-theme="dark"][data-color="magenta"] { --accent: #ff4f93; --accent-hover: #ff6ba5; --accent-surface: #3a1023; --signal: #ff4f93; --signal-text: #ff7bae; --signal-display: #ff5c9a; --signal-surface: #3a1023; --signal-line: rgba(255, 79, 147, 0.55); --marker: rgba(255, 79, 147, 0.42); }
:root[data-theme="dark"][data-color="lime"] { --accent: #b8f23a; --accent-hover: #c6f55e; --accent-surface: #1f2a0c; --signal: #b8f23a; --signal-text: #c6f55e; --signal-display: #b8f23a; --signal-surface: #1f2a0c; --signal-line: rgba(184, 242, 58, 0.5); --marker: rgba(184, 242, 58, 0.32); }

/* Accent-derived details that used to be hard-coded orange */
:root { --plate-dot: color-mix(in srgb, var(--accent) 30%, transparent); }
:root[data-accent="ember"] .access-card .btn-primary { background: var(--accent); color: var(--on-accent-text); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
:root[data-accent="ember"] .access-card .btn-primary .badge { background: var(--on-accent-text); color: var(--accent); }
:root[data-accent="ember"] .access-card .field input:focus,
:root[data-accent="ember"] .access-card .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--signal), 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
@media (hover: hover) and (pointer: fine) {
  :root[data-accent="ember"] .access-card .btn-primary:hover .badge { background: var(--on-accent-text); }
}

/* Review bar: colour swatches + style letters */
.optbar { gap: 12px; padding: 6px 6px 6px 16px; }
.optbar-group { display: flex; align-items: center; gap: 10px; }
.optbar-sep { width: 1px; height: 22px; background: var(--line-strong); }
.swatches { display: flex; align-items: center; gap: 4px; }
.swatch {
  position: relative; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
}
.swatch::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(14, 14, 16, 0.12); transition: transform 200ms var(--ease-out); }
.swatch::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); opacity: 0; transform: scale(0.85); transition: opacity 200ms var(--ease-brand), transform 200ms var(--ease-out); }
.swatch[aria-pressed="true"]::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .swatch:hover::before { transform: scale(1.12); } }
.swatch-name { min-width: 76px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.optbar .seg button { padding-inline: 10px; }
@media (max-width: 640px) {
  .optbar { gap: 8px; padding-inline: 10px 5px; }
  .optbar-label, .swatch-name { display: none; }
  .swatch { width: 28px; height: 28px; }
  .optbar .seg button { padding-inline: 8px; }
}

/* Custom colour: a rainbow swatch that opens the system picker, plus a hex field */
.swatch-custom { cursor: pointer; }
.swatch-custom::before { background: conic-gradient(from 90deg, #ff3b30, #ffcc00, #34c759, #00c7be, #2b4bff, #af52de, #ff2d55, #ff3b30); }
.swatch-custom[data-has-color]::before { background: var(--sw); }
.swatch-custom[aria-pressed="true"]::after { opacity: 1; transform: none; }
.swatch-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.swatch-custom:focus-within::after { opacity: 1; transform: none; box-shadow: 0 0 0 2px var(--graphite); }
.hex-field {
  width: 86px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill);
  font: 500 12.5px/1 var(--font-mono); letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink); background: var(--inset);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.hex-field:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--graphite), 0 0 0 3px var(--ring-halo); }
.hex-field[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--st-danger-t); }
@media (max-width: 640px) { .hex-field { display: none; } }

/* ---------- Soft gradient: black forms melting into white ----------
   Drawn by app.js into canvases. With the effect off (or no JS) the page keeps its plain shadows. */
:root { --grain-ink: #0e0e10; --fog-max: 0.42; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --grain-ink: #f3f3f5; --fog-max: 0.12; } }
:root[data-theme="dark"] { --grain-ink: #f3f3f5; --fog-max: 0.12; }

.hero-top { position: relative; }
.grain-art {
  position: absolute; z-index: -1; pointer-events: none;
  top: -64px; right: calc(var(--gutter) * -1 - 40px);
  width: min(620px, 50vw); aspect-ratio: 1; height: auto;
  display: none;
}
.fogwrap { position: relative; isolation: isolate; }
.fog {
  position: absolute; z-index: -1; pointer-events: none;
  left: 3%; right: 3%; bottom: -118px; height: 236px;
  width: 94%;
  display: none;
}
.hero-stage-wrap .fog { left: calc(var(--gutter) + 2%); right: calc(var(--gutter) + 2%); width: auto; }

/* On: canvases show, and the soft gradient shadows replace the box shadows */
:root[data-grain="ink"] .grain-art, :root[data-grain="tint"] .grain-art,
:root[data-grain="ink"] .fog, :root[data-grain="tint"] .fog { display: block; }
:root[data-grain="ink"] .fogwrap > .stage, :root[data-grain="tint"] .fogwrap > .stage,
:root[data-grain="ink"] .fogwrap > .access-card, :root[data-grain="tint"] .fogwrap > .access-card { --shadow-stage: 0 1px 2px rgba(16, 16, 20, 0.05); --plate-shadow: 0 1px 2px rgba(16, 16, 20, 0.08); }

/* Parallax drift on the hero form */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grain-art { animation: art-drift linear both; animation-timeline: view(); animation-range: exit -20% exit 100%; }
  }
}
@keyframes art-drift { to { transform: translateY(-90px) scale(1.04); } }

/* Narrow screens: the form sits between the buttons and the product, never under text */
@media (max-width: 900px) {
  .hero-top { display: flex; flex-direction: column; }
  .grain-art { position: relative; order: 1; top: auto; right: auto; align-self: flex-end; width: min(78vw, 460px); margin: 4px -8vw -38% 0; }
}
@media (max-width: 560px) {
  .fog { bottom: -90px; height: 180px; }
}

/* Review bar may wrap on small screens now that it has three groups */
.optbar { flex-wrap: wrap; justify-content: center; row-gap: 6px; border-radius: 26px; }
@media (max-width: 760px) {
  .optbar .optbar-sep:last-of-type { display: none; }
}


/* Legal pages (privacy.html, terms.html) */
.legal-top { padding-block: 28px; }
.legal-top a { color: var(--ink); font-weight: 600; text-decoration: none; }
.legal { max-width: 720px; margin-inline: auto; padding: 24px var(--gutter) 96px; color: var(--ink); }
.legal h1 { font-size: 36px; line-height: 1.15; margin-bottom: 8px; }
.legal .updated { color: var(--muted); font-size: 14px; margin-bottom: 32px; }
.legal h2 { font-size: 21px; line-height: 1.3; margin: 36px 0 10px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink); }
.legal p + p { margin-top: 12px; }
.legal ul { padding-inline-start: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal a { color: var(--accent-text); }
.legal-foot { border-top: 1px solid var(--line); padding-block: 24px; color: var(--muted); font-size: 14px; }
.legal-foot a { color: var(--muted); margin-inline-end: 16px; }