/* Time Machine site: fonts, tokens, base type, header, footer and shared parts.
   Every page links this file first. Look: design/SITE_V3_DIRECTION.md, current monochrome update.
   Paper and charcoal, Newsreader display, Inter body, Geist Mono labels. Neutral controls and links.
   Green and red mean Works and Broken and nothing else. Motion uses transform and opacity only. */

/* Fonts, self hosted. Licences (SIL OFL 1.1) sit next to the files in assets/fonts/.
   Newsreader is subset to Latin, weight 280 to 500 and optical size 16 (24 italic) to 72. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 280 500;
  font-display: swap;
  src: url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 280 460;
  font-display: swap;
  src: url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2-variations"), url("fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
}
/* Metric-matched stand-ins while the web fonts load, so headlines and body text keep their line breaks
   when the web fonts swap in (no layout shift). Tuned by comparing line breaks of the home h1 (Newsreader
   weight 340, optical size 72) and lead (Inter) at 22 widths from 320 to 1600 px, with and without the web fonts. */
@font-face {
  font-family: "Newsreader fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 97.5%;
  ascent-override: 75%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-opsz-normal.woff2") format("woff2-variations"), url("fonts/inter-latin-opsz-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
}

:root {
  --font-display: "Newsreader", "Newsreader fallback", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(52px, 2.6rem + 5.4vw, 124px);
  --fs-h2: clamp(40px, 1.9rem + 3.4vw, 80px);
  --fs-h3: clamp(20px, 1rem + .8vw, 26px);
  --fs-lead: clamp(18px, 1rem + .4vw, 22px);
  --fs-body: 17px;
  --fs-small: 14px;

  --section: clamp(96px, 12vw, 176px);
  --gutter: clamp(16px, 4vw, 64px);
  --max-page: 1200px;
  --max-text: 640px;
  --top-h: 64px;

  /* One theme: warm dark, like paper under a desk lamp. Charcoal #1a1918 and ivory #faf9f5,
     clay as a signature mark, and verdict colours that mean only Works and Broken.
     Text steps on --paper: ink 16.7, ink-2 11.7, ink-3 7.1, ink-4 5.4. On --card, ink-4 is 4.8. */
  --paper: #1a1918;
  --card: #24231f;
  --mist: #2e2d29;
  --hairline: #3a3833;
  --line: rgba(250, 249, 245, .1);
  --line-2: rgba(250, 249, 245, .2);
  --ink: #faf9f5;
  --ink-2: #d6d3c8;
  --ink-3: #a8a59a;
  --ink-4: #918e86;
  --glass: rgba(26, 25, 24, .94);
  --glass-line: rgba(250, 249, 245, .12);

  /* Links and focus stay ivory. The main action is paper with charcoal text (16.7:1). Clay is a mark. */
  --accent: #faf9f5;
  --accent-ink: #ffffff;
  --accent-tint: #33312b;
  --accent-btn: #d97757;
  --accent-btn-hover: #e2896b;
  --on-accent: #141413;
  --clay: #d97757;

  /* Verdicts: the only meaningful colour on the site besides the main action. */
  --works-fg: #4ade80; --works-bg: #12261a; --works-dot: #22c55e;
  --broken-fg: #f87171; --broken-bg: #2e1513; --broken-dot: #ef4444;
  --couldnt-fg: #facc15; --couldnt-bg: #2b2208; --couldnt-dot: #eab308;

  --term-bg: #141413;
  --term-ink: #ecebe5;
  --term-dim: #9a978d;
  --term-line: rgba(250, 249, 245, .09);
  --t-pass: #4ade80;
  --t-fail: #f87171;

  --r-chip: 8px; --r-btn: 999px; --r-card: 20px; --r-window: 14px;
  --shadow-card: 0 0 0 1px rgba(250, 249, 245, .06), 0 10px 30px -14px rgba(0, 0, 0, .7);
  --shadow-lift: 0 0 0 1px rgba(250, 249, 245, .09), 0 22px 44px -18px rgba(0, 0, 0, .85);
  --shadow-window: 0 0 0 1px rgba(250, 249, 245, .09), 0 34px 80px -26px rgba(0, 0, 0, .9);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.64, 0, .78, 0);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --spring-card: cubic-bezier(.22, 1, .36, 1);
  --spring-verdict: cubic-bezier(.34, 1.4, .64, 1);
  --dur-reveal: .6s;
  --rise: 24px;

  color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  /* Paper grain: one static tile painted with the page. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--mist); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); padding: 0 18px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 10px; }
.wrap { max-width: var(--max-page); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.mono, code, kbd, samp { font-family: var(--font-mono); font-variant-ligatures: none; }
code { font-size: max(.92em, 13px); }
em { font-style: italic; }
::selection { background: var(--accent-tint); }

/* Brand: the product's own mark, the same image on every page. */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 15px; letter-spacing: -.015em; text-decoration: none; color: var(--ink); }
.brand img { flex: none; width: 28px; height: 28px; border-radius: 7px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px;
  border-radius: var(--r-btn); border: 0; font: 500 16px/1 var(--font-body); letter-spacing: -.01em; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), opacity .2s;
}
.btn:active { transform: scale(.97); transition-duration: .14s; }
/* The main action, as Claude does it on paper, inverted for dark: warm paper fill, charcoal text, no glow.
   Clay stays a mark (the logo, the active save point) and rings this button on keyboard focus (5.9:1). */
.btn-primary { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--term-ink); }
}
.btn-primary:focus-visible { outline-color: var(--clay); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
}
.btn[disabled] { opacity: .5; cursor: default; transform: none; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
section[id], h1[id], h2[id] { scroll-margin-top: 84px; }
:root:not(.js) [data-sound], :root:not(.js) [data-ambient], :root:not(.js) [data-dev] { display: none; }

/* Header, the same on every page. Markup:
   header.top > .wrap.top-in > a.brand (img + name), nav.nav (How it works, Security, The story, Company),
   a.top-signin[data-checkout-open][hidden] (Sign in), a.btn.btn-ghost.btn-sm.top-cta. Mark the current page's link with aria-current="page".
   Every page loads assets/checkout.js, which shows Sign in once checkout is open. */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 1px 0 var(--line);
}
.top-in { display: flex; align-items: center; gap: 8px 20px; min-height: var(--top-h); }
.top .brand { margin-right: auto; }
.nav { display: flex; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.nav a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; text-decoration: none; transition: background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: var(--mist); color: var(--ink); }
}
.nav a:active { background: var(--mist); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--mist); }
/* Sign in: a quiet text link before the button, a full 44 px target at every width. It ships hidden and
   checkout.js shows it only once checkout is open, so the closed state needs no script. */
.top-signin { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; color: var(--ink-2); font-size: 14.5px; text-decoration: none; transition: background .2s, color .2s; }
@media (hover: hover) and (pointer: fine) { .top-signin:hover { background: var(--mist); color: var(--ink); } }
.top-signin[aria-current="page"] { color: var(--ink); }
/* Anything marked data-checkout-open (Sign in links) stays hidden until checkout.js sees checkout open. */
[data-checkout-open][hidden] { display: none; }
.top-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.top-progress i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); opacity: .6; }
/* Narrower screens: two rows, brand, Sign in (when shown) and button, then the four links. Not sticky, so stories get the full screen. */
@media (max-width: 860px) {
  .top { position: relative; }
  .top-in { flex-wrap: wrap; row-gap: 0; padding-top: 6px; padding-bottom: 2px; }
  .nav { order: 3; width: 100%; justify-content: space-between; margin: 0 -10px; width: calc(100% + 20px); font-size: 14px; }
  .nav a { padding: 0 10px; }
  .top-progress { display: none; }
}
@media (max-width: 420px) {
  .top-in { column-gap: 8px; }
  .top .brand { gap: 8px; font-size: 14px; }
  .top-signin { padding: 0 8px; font-size: 13.5px; }
  .top-cta { padding: 0 14px; font-size: 13.5px; }
}
/* The smallest phones keep the mark and drop the visible name; the link is still named "Time Machine". */
@media (max-width: 370px) { .nav a { padding: 0 7px; font-size: 13.5px; } .top .brand { font-size: 0; gap: 0; } }
@media (prefers-reduced-transparency: reduce) { .top { background: var(--paper); } }

/* Shared type */
.h1 { margin: 0; font: 330 var(--fs-hero)/.94 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.03em; text-wrap: balance; }
.h2 { margin: 16px 0 0; font: 340 var(--fs-h2)/1 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.028em; max-width: 16ch; text-wrap: balance; }
/* The italic half of a headline is the accent. */
:is(h1, h2, h3) :is(em, .dim) { font-style: italic; color: var(--accent); }
.h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.lead { margin: 22px 0 0; max-width: 56ch; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -.005em; text-wrap: pretty; }
.fine { margin: 20px 0 0; color: var(--ink-3); font-size: 14.5px; }
.prose { max-width: 68ch; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); }
.prose h2 { margin: 56px 0 0; font: 380 clamp(30px, 1.4rem + 1.4vw, 40px)/1.1 var(--font-display); font-variation-settings: "opsz" 48; letter-spacing: -.015em; color: var(--ink); }
.prose h3 { margin: 36px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.prose p, .prose ul, .prose ol { margin: 16px 0 0; }
.prose li { margin: 6px 0; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--ink); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--line); font-size: .86em; }
.prose blockquote { margin: 24px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); font: 400 italic 24px/1.35 var(--font-display); color: var(--ink); }

/* Status tags: Built, In development, Planned. Built gets a filled tint; shape tells the other two apart. */
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; margin: 0; border-radius: 999px; font: 500 13px/1 var(--font-body); white-space: nowrap; width: max-content; }
.tag-now { background: var(--accent-tint); color: var(--accent-ink); }
.tag-dev { box-shadow: inset 0 0 0 1px var(--ink-2); color: var(--ink); }
.tag-plan { border: 1px dashed var(--ink-3); color: var(--ink-2); }
/* Timestamps, durations and counters keep their digits aligned. */
time, .num { font-variant-numeric: tabular-nums; }

/* Copy button under a block of commands (copy.js shows the button and fills the status). */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; }
.copy-row .btn[hidden] { display: none; }
.copy-status { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.4; }

/* Verdict pills: word plus dot, never colour alone. */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font: 500 13px/1 var(--font-body); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-works { background: var(--works-bg); color: var(--works-fg); }
.pill-broken { background: var(--broken-bg); color: var(--broken-fg); }
.pill-none { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-3); }
.pill-couldnt { background: var(--couldnt-bg); color: var(--couldnt-fg); }
.pill-none::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Waitlist form, shared. Markup contract:
   form#waitlist[data-waitlist][novalidate].wl > .wl-field > label + .wl-row > input[name=email] + button.btn.btn-primary
   then label.wl-consent > input[name=consent] + span, input.wl-hp[name=company], p.wl-status[data-waitlist-status] */
.wl { display: grid; gap: 14px; max-width: 520px; text-align: left; }
.wl-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.wl-row { display: flex; gap: 10px; }
.wl input[type="email"] { flex: 1; min-width: 0; height: 52px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 16px var(--font-body); transition: border-color .2s, box-shadow .2s; }
.wl input[type="email"]::placeholder { color: var(--ink-3); }
.wl input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.wl-row .btn { min-height: 52px; }
/* The whole label is the hit area (44 px tall); the box itself is 24 px so it is a full target on its own too. */
.wl-consent { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding-top: 4px; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.wl-consent input { flex: none; width: 24px; height: 24px; margin: -1px 0 0; accent-color: var(--accent-btn); cursor: pointer; }
.wl-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wl-status { min-height: 1.5em; margin: 0; font-size: 15px; font-weight: 500; }
.wl-privacy { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.wl-privacy a { color: inherit; }
/* Form states, set by waitlist.js. Same rules as the home page. */
.wl-status:empty { min-height: 0; }
.wl-status[data-state] { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.45; }
.wl-status[data-state]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); background: var(--ink-3); }
.wl-status[data-state="ok"] { color: var(--works-fg); background: var(--works-bg); box-shadow: none; }
.wl-status[data-state="ok"]::before { background: var(--works-dot); }
.wl-status[data-state="error"] { color: var(--ink); }
.wl-status[data-state="error"]::before { background: var(--broken-dot); border-radius: 1px; transform: rotate(45deg) scale(.86); }
.wl-status[data-state="info"] { color: var(--ink-2); }
.wl-status[data-state="pending"] { color: var(--ink-3); }
.wl-status[data-state="pending"]::before { animation: wl-pulse 1s ease-in-out infinite; }
.wl-status a { color: inherit; font-weight: 600; text-decoration: underline; }
@keyframes wl-pulse { 50% { opacity: .25; } }
form[data-waitlist][data-state="pending"] .btn { opacity: .6; cursor: progress; }
form[data-waitlist][data-state="ok"] input[type="email"] { border-color: var(--works-dot); }
.wl input[aria-invalid="true"] { border-color: var(--broken-dot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--broken-dot) 18%, transparent); }

/* Typing (motion.js). Text waits hidden until the script splits it, with a 3 s safety reveal
   in case the script never runs. Reduced motion: plain text, no typing. */
@media (prefers-reduced-motion: no-preference) {
  :root.js [data-type]:not(.tw) { visibility: hidden; animation: tw-safety 0s 3s forwards; }
}
@keyframes tw-safety { to { visibility: visible; } }
.tw-c { opacity: 0; }
.tw-c.on, .tw-done .tw-c { opacity: 1; }
.tw-caret { position: relative; }
.tw-caret::after { content: ""; position: absolute; top: .1em; bottom: .06em; right: -.1em; width: max(2px, .06em); background: var(--accent); animation: tw-blink .9s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.tw-term .tl { visibility: hidden; }
.tw-term .tl.on { visibility: visible; }
.wl-consent input[aria-invalid="true"] { outline: 2px solid var(--broken-dot); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wl-status[data-state="pending"]::before { animation: none; } }
@media (max-width: 520px) { .wl-row { flex-direction: column; } .wl input[type="email"] { flex: none; width: 100%; } .wl-row .btn { width: 100%; } }

/* Footer. Markup:
   footer.foot > .wrap > .foot-row > nav[aria-label=Footer] (links) + p.foot-note; then p.giant[aria-hidden] > span + span */
.foot { position: relative; border-top: 1px solid var(--line); padding-top: 36px; overflow: hidden; color: var(--ink-3); font-size: 14px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
.foot-row p { margin: 0; }
.foot-row p a { padding-block: 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
.foot nav a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot nav a:hover { color: var(--ink); text-decoration: underline; }
}
.giant { margin: clamp(32px, 6vw, 72px) 0 0; padding: .08em .06em .18em; font: 300 clamp(64px, 13vw, 200px)/1.05 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.04em; color: var(--ink); white-space: nowrap; text-align: center; user-select: none; }
.giant span:last-child { font-style: italic; color: var(--accent); }
@media (max-width: 640px) { .giant { font-size: 23vw; white-space: normal; line-height: 1.05; } .giant span { display: block; } .foot nav { gap: 0 16px; } }

/* Legal pages */
.legal .draftbar { position: sticky; top: 0; z-index: 5; background: var(--mist); color: var(--ink); box-shadow: 0 1px 0 var(--line-2); text-align: center; padding: 10px 16px; font: 500 13.5px/1.4 var(--font-body); }
.legal .wrap { max-width: 760px; }
.legal header.top { position: static; padding: 28px 0 0; background: none; box-shadow: none; }
.legal header.top:has(.top-in) { position: sticky; top: 40px; padding: 0; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 1px 0 var(--line); }
.legal main { padding: 64px 0 96px; }
.legal h1 { margin: 0; font: 330 clamp(44px, 7vw, 76px)/1 var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.028em; }
.legal .banner { margin: 32px 0 8px; padding: 20px 22px; border: 1.5px dashed var(--ink-3); border-radius: 14px; background: var(--card); }
.legal .banner strong { display: block; font-size: 18px; letter-spacing: -.01em; }
.legal .banner p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.legal article { font-size: 16.5px; line-height: 1.5; }
.legal h2 { margin: 52px 0 0; font: 380 30px/1.15 var(--font-display); font-variation-settings: "opsz" 36; letter-spacing: -.015em; }
.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal li::marker { color: var(--ink-3); }
.legal .ph { font-family: var(--font-mono); font-size: .86em; background: var(--mist); padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); }
.legal .tablewrap { margin-top: 16px; overflow-x: auto; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 12px 16px; border-top: 1px solid var(--line); }
.legal thead th { border-top: 0; font: 500 13px/1.3 var(--font-body); color: var(--ink-3); background: var(--mist); }
.legal footer:not(.foot) { border-top: 1px solid var(--line); padding: 32px 0 calc(32px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--ink-3); }
.legal footer:not(.foot) .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; }
@media (hover: hover) and (pointer: fine) {
  .legal footer a:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .btn, .nav a { transition: none !important; }
  .btn:hover, .btn:active { transform: none !important; }
}

/* Weak devices (data-tier="low", set in each page's head and by a short frame-time probe): no looping animation. */
:root[data-tier="low"] .wl-status[data-state="pending"]::before { animation: none; }
:root[data-tier="low"] .top { background: var(--paper); }
:root[data-tier="low"] body { background-image: none; }