/* knownprint.com: the design system for the homepage, the demo page and the subpages. Light only,
   with navy bands for the hero, the early access band and the footer (palette.md section 0). Every
   colour is a palette token on :root. The CSP allows only this file: scripts change classes and
   set the few dynamic values as custom properties (element.style.setProperty).

   Hooks for demo.js
   4, the scan: #demo-scan (and #lab-scan) fills its arches and sweeps while shown;
     #demo-scan-ms takes the millisecond text; swap #demo-scan-label between `scan-swap-a` and
     `scan-swap-b` on each change (a 150 ms cross-fade); a `p.scan-slow` appended fades in.
   5, the beat: `beat-enter` on a new li.beat rises 16px and fades in over 420 ms, `.beat-head`
     at 80 ms, `.beat-facts` at 160 ms, a `.match-likely` 150 ms after.
   6, the confidence: span.conf > span.conf-track > span.conf-fill with `--conf` (0 to 1), then
     span.conf-num; the fill grows over 900 ms.
   7, the stamp: `verdict-stamp` beside `verdict verdict-<allow|challenge|deny|none>` scales from
     1.3 to 1 over 280 ms, 250 ms after the beat.
   Others: #demo-cta slides up 730 ms after it shows; `is-flash` and `is-fading` fade a status
     line; `is-busy` on a .btn adds a spinner and keeps its fill and label; `span.deciding` pulses;
     td[data-label] shows its label on a narrow card, tr.is-current tints this run's row;
     `.btn-link-danger` is a text button in action.danger; `p.notice-line` is the one-line notice;
     #demo carries `data-state` (idle, running, shown, wiping, banning, unbanning, deleting, error)
     and `container-name: demo`.
   The panel: swap #demo-body between `panel-in-a` and `panel-in-b` each time a run fills it; its
     new `.tile`, `li.recent-row` (`--row` from 0; `is-recognised` or `is-new`, `is-current`),
     `.fact` and `.verdict-lines li` rise in after it, a `.verdict-lg.verdict-stamp` stamps at
     480 ms and `span.why-text` fades in. demo.js counts up `span.tile-num`; `span.tile-word`
     stands in for it. `.verdict-why.is-missing`, with `feedback-error` and the alert icon, is the
     check that did not answer; `#demo-controls.is-confirm` holds the deletion's confirm;
     `p.reread-line` holds Try again for a missed read. `data-hold` on #demo pauses every
     animation inside it until the panel is in view. #demo-notice and #lab-wait ship hidden.
   Under prefers-reduced-motion: reduce nothing moves: every animation and transition lives in one
   no-preference block at the end. */

/* Archivo, variable on the weight axis, self-hosted (OFL, assets/fonts/OFL.txt). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-wght.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-ext-wght.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Tokens. Light column first, then the navy band (Dark column), then code. */
:root {
  --page: #f4f7fc;
  --card: #ffffff;
  --hover: #eef3ff;
  --sunken: #e8eef8;
  --text: #0b1b33;
  --text-2: #475569;
  --text-off: #94a3b8;
  --primary: #2451e6;
  --primary-hover: #1b3fbf;
  --on-fill: #ffffff;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --border: #d9e1ec;
  --border-strong: #64748b;
  --cyan: #0e7490;
  --allow: #15803d;
  --allow-bg: #f0fdf4;
  --challenge: #b45309;
  --challenge-bg: #fffbeb;
  --deny: #b91c1c;
  --deny-bg: #fef2f2;
  --none: #475569;
  --disabled-bg: #e2e8f0;

  --navy: #0b1b33;
  --d-text: #f4f7fc;
  --d-text-2: #a9b8cf;
  --d-link: #7fa6ff;
  --d-link-hover: #a9c3ff;
  --d-card: #132a4d;
  --d-hover: #2a4470;
  --d-border: #243b5e;
  --d-border-strong: #8396b0;
  --d-cyan: #22c4e0;
  --d-error: #fca5a5;
  --d-error-bg: #7f1d1d;
  --d-ok: #4ade80;

  --code-text: #f4f7fc;
  --code-comment: #a9b8cf;
  --code-keyword: #7fa6ff;
  --code-string: #a9c3ff;
  --code-lines: #8396b0;

  /* The only alphas: shadow.raised, selection, accent.glow and the outline hover and press. */
  --shadow: 0 8px 24px rgba(11, 27, 51, 0.16);
  --selection: rgba(36, 81, 230, 0.24);
  --outline-hover: rgba(244, 247, 252, 0.12);
  --outline-press: rgba(244, 247, 252, 0.22);

  --ring: var(--primary);
  --font:
    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-spring: cubic-bezier(0.3, 1.4, 0.5, 1);
  --gutter: 16px;
  --max: 1200px;
  --header-h: 64px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 32px;
  }
}

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

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1rem;
  line-height: 1.3;
}

a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--primary-hover);
}

strong {
  font-weight: 700;
}

code {
  padding: 0.06em 0.28em;
  border-radius: 4px;
  background: var(--sunken);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

::selection {
  background: var(--selection);
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

[hidden] {
  display: none;
}

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

.skip {
  position: absolute;
  top: -120px;
  left: 12px;
  z-index: 60;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--d-text);
  font-weight: 650;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.skip:hover {
  color: var(--d-text);
}

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

/* Sprite symbols inherit this paint through use; a symbol states only what differs. */
.icon {
  display: inline-block;
  flex: none;
  width: 1.125em;
  height: 1.125em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nobr,
time {
  white-space: nowrap;
}

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

/* Navy surfaces take the Dark column; a card on them (the demo) the Light column again. */
.dark {
  --ring: var(--d-link);
  color: var(--d-text);
}

.dark a:not(.btn) {
  color: var(--d-link);
}

.dark a:not(.btn):hover {
  color: var(--d-link-hover);
}

.dark code {
  background: var(--d-border);
  color: var(--d-text);
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.dark .eyebrow {
  color: var(--d-text-2);
}

/* Buttons. One filled button per view; a busy button keeps its fill and label. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-fill);
}

.btn-primary:hover {
  background: var(--primary-hover);
  color: var(--on-fill);
}

.btn-danger {
  background: var(--danger);
  color: var(--on-fill);
}

.btn-danger:hover {
  background: var(--danger-hover);
  color: var(--on-fill);
}

.btn-secondary {
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secondary:hover,
.btn-secondary:active {
  background: var(--hover);
  color: var(--text);
}

.btn-outline {
  border: 2px solid var(--d-text);
  color: var(--d-text);
}

.btn-outline:hover {
  background: var(--outline-hover);
  color: var(--d-text);
}

.btn-outline:active {
  background: var(--outline-press);
}

.btn-link {
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.btn-link:hover {
  color: var(--primary-hover);
}

.dark .btn-link {
  color: var(--d-link);
}

.btn:disabled {
  border-color: transparent;
  background: var(--disabled-bg);
  color: var(--text-off);
  cursor: not-allowed;
}

.btn-link:disabled {
  color: var(--text-off);
  text-decoration: none;
  cursor: not-allowed;
}

/* A busy button (aria-disabled, never disabled) keeps its fill, label and focus. */
.btn-primary.is-busy,
.btn-primary.is-busy:hover {
  background: var(--primary);
  color: var(--on-fill);
  cursor: progress;
}

.btn-danger.is-busy,
.btn-danger.is-busy:hover {
  background: var(--danger);
  color: var(--on-fill);
  cursor: progress;
}

.btn-secondary.is-busy,
.btn-secondary.is-busy:hover {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text);
  cursor: progress;
}

.btn.is-busy::after,
.btn-link.is-busy::after {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.btn[aria-disabled="true"] {
  cursor: progress;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 2px solid var(--border-strong);
  background: var(--page);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 6px 0;
  color: var(--primary);
  text-decoration: none;
}

.brand:hover {
  color: var(--primary);
}

.mark {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mark-frame {
  stroke: var(--primary);
}

.mark-lines {
  stroke: var(--cyan);
}

.wordmark {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.nav {
  display: none;
}

.nav-links,
.nav-menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links {
  display: flex;
  gap: 2px;
}

.nav-links a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 550;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.nav-cta {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.nav-menu-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
}

.nav-menu-button::-webkit-details-marker {
  display: none;
}

.nav-menu-button:hover {
  background: var(--hover);
}

.burger,
.burger::before,
.burger::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
}

.burger {
  position: relative;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger::before {
  top: -6px;
}

.burger::after {
  top: 6px;
}

.nav-menu[open] .burger {
  background: transparent;
}

.nav-menu[open] .burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-menu[open] .burger::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-menu-panel {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  left: 0;
  padding: 4px var(--gutter) 20px;
  border-bottom: 2px solid var(--border-strong);
  background: var(--page);
  box-shadow: var(--shadow);
}

.nav-menu-list a:not(.btn) {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.nav-menu-list a:not(.btn):hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.nav-menu-cta {
  display: none;
  padding-top: 16px;
}

.nav-menu-cta .btn {
  width: 100%;
}

/* The menu repeats the call to action only where the header has no room for its own. */
@media (max-width: 359.98px) {
  .nav-cta {
    display: none;
  }

  .nav-menu-cta {
    display: list-item;
  }

  .wordmark {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }

  .nav-menu {
    display: none;
  }

  .header-bar {
    gap: 16px;
  }
}

/* Hero: the one accent.glow on the page, behind the heading, and the fingerprint line art. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 36px 0 64px;
  background:
    radial-gradient(640px circle at 14% 16%, rgba(34, 196, 224, 0.24), transparent 640px),
    var(--navy);
}

.hero-art {
  position: absolute;
  top: -24px;
  right: -200px;
  z-index: -1;
  width: 470px;
  height: auto;
  pointer-events: none;
}

/* Below two columns the art fades out before the sub-line, so no text runs over it. */
@media (max-width: 1023.98px) {
  .hero-art {
    -webkit-mask-image: linear-gradient(to bottom, var(--navy) 36%, transparent 58%);
    mask-image: linear-gradient(to bottom, var(--navy) 36%, transparent 58%);
  }
}

.hero-art path {
  fill: none;
  stroke: var(--d-border);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* The hero text spans the top, left-aligned; the visitor panel takes the full content width under
   it. */
.hero-grid {
  display: grid;
  gap: 32px;
}

/* Below 768px the homepage's panel follows the sub-line, before the invitation, so a phone sees
   its notice and scan on the first screen. */
@media (max-width: 767.98px) {
  .hero-grid-home {
    gap: 0;
  }

  .hero-grid-home .hero-text {
    display: contents;
  }

  .hero-grid-home .demo {
    order: 1;
    margin-top: 28px;
  }

  .hero-grid-home .hero-invite {
    order: 2;
    margin-top: 28px;
  }

  .hero-grid-home .hero-cta {
    order: 3;
  }
}

.hero-text {
  max-width: 47.5rem;
}

.hero-title {
  font-size: clamp(2.5rem, 1.2rem + 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.h1-line {
  display: block;
}

.hero-sub {
  margin-top: 20px;
  color: var(--d-text);
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.hero-invite {
  margin-top: 18px;
  color: var(--d-text-2);
  text-wrap: pretty;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 20px;
}

.hero-note {
  flex: 1 1 16rem;
  color: var(--d-text-2);
  font-size: 0.9375rem;
}

@media (min-width: 640px) {
  .hero {
    padding: 48px 0 80px;
  }

  .hero-art {
    right: -140px;
    width: 560px;
  }
}

/* From 640px the hero text runs wider under the art, so the art fades out sooner. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero-art {
    -webkit-mask-image: linear-gradient(to bottom, var(--navy) 28%, transparent 44%);
    mask-image: linear-gradient(to bottom, var(--navy) 28%, transparent 44%);
  }
}

@media (min-width: 1024px) {
  .hero {
    padding: 64px 0 104px;
  }

  /* The arches' crown shows beside the hero text; their legs fade out before the panel. */
  .hero-art {
    top: -60px;
    right: calc(50% - 860px);
    width: 640px;
    -webkit-mask-image: linear-gradient(to bottom, var(--navy) 50%, transparent 68%);
    mask-image: linear-gradient(to bottom, var(--navy) 50%, transparent 68%);
  }

  .hero-grid {
    gap: 40px;
  }

  .hero-title {
    font-size: clamp(3.25rem, 1rem + 3.6vw, 4.5rem);
  }

  .hero-sub {
    font-size: 1.1875rem;
  }
}

/* The demo card: the Light column in full on the navy hero, the page's one primary button. */
.demo {
  --ring: var(--primary);
  position: relative;
  min-width: 0;
  padding: 20px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--text);
  container: demo / inline-size;
}

.demo a:not(.btn) {
  color: var(--primary);
}

.demo a:not(.btn):hover {
  color: var(--primary-hover);
}

.demo code {
  background: var(--sunken);
  color: var(--text);
}

.demo .eyebrow {
  color: var(--text-2);
}

@media (min-width: 640px) {
  .demo {
    padding: 24px;
  }
}

.demo-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
}

.demo-title {
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.demo-live,
.tag-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 10px 2px 8px;
  border-radius: 6px;
  background: var(--hover);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.6;
}

.demo-live::before,
.tag-live::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.demo-notice {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.notice-line {
  margin-bottom: 12px;
  font-size: 0.875rem;
}

.demo-scan:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--page);
}

.scan-art {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
}

.scan-tracks path,
.scan-arc {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scan-tracks path {
  stroke: var(--border);
}

.scan-arc {
  stroke: var(--cyan);
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.scan-line {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
}

.scan-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-weight: 650;
}

.scan-ms {
  color: var(--text-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.scan-slow {
  flex-basis: 100%;
  color: var(--text-2);
  font-size: 0.875rem;
}

.beats {
  display: grid;
  gap: 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.beats:empty {
  display: none;
}

.beat {
  min-width: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.beat:first-child {
  padding-top: 0;
  border-top: 0;
}

.beat-step {
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.beat-kick {
  margin-top: 4px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.beat-head {
  margin-top: 6px;
  line-height: 1.5;
}

.beat-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}

.beat-verdict {
  display: contents;
}

.match {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}

.match .icon {
  width: 18px;
  height: 18px;
}

.match-recognised,
.match-likely {
  color: var(--primary);
}

.match-new {
  color: var(--text-2);
}

.match-refused {
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-2);
}

.conf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.conf-track {
  display: block;
  width: 88px;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.conf-fill {
  display: block;
  width: calc(var(--conf, 0) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--cyan);
}

.conf-num,
.ms {
  font-variant-numeric: tabular-nums;
}

.conf-num {
  font-weight: 650;
}

.ms {
  color: var(--text-2);
}

.tag,
.coming {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  background: var(--hover);
  color: var(--text-2);
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: nowrap;
}

.tag {
  padding: 1px 8px;
  font-weight: 550;
}

.tag .icon {
  width: 14px;
  height: 14px;
}

/* The word coming, always in this one chip: a hollow ring, nothing that reads as live. */
.coming {
  padding: 0 8px 0 7px;
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  vertical-align: 0.12em;
}

.coming::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.dark .coming,
.code .coming {
  background: var(--d-hover);
  color: var(--d-text-2);
}

.demo .coming {
  background: var(--hover);
  color: var(--text-2);
}

.demo .btn-link {
  color: var(--primary);
}

.demo .btn-link:hover {
  color: var(--primary-hover);
}

.btn-link-danger,
.demo .btn-link-danger {
  color: var(--danger);
}

.btn-link-danger:hover,
.demo .btn-link-danger:hover {
  color: var(--danger-hover);
}

.demo .btn-link:disabled {
  color: var(--text-off);
}

/* Verdicts: the badge pair, an icon and the word, never colour alone. */
.verdict,
.bot-bad {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 10px 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.verdict .icon,
.bot-bad .icon {
  width: 15px;
  height: 15px;
}

.verdict-allow {
  background: var(--allow-bg);
  color: var(--allow);
}

.verdict-challenge {
  background: var(--challenge-bg);
  color: var(--challenge);
}

.verdict-deny,
.bot-bad {
  background: var(--deny-bg);
  color: var(--deny);
}

.verdict-none {
  border-color: var(--border);
  background: transparent;
  color: var(--none);
}

.demo-cta:not([hidden]) {
  display: block;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--hover);
  font-weight: 600;
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 18px;
}

.demo-actions:empty {
  display: none;
}

.demo-actions .btn {
  flex: 1 1 auto;
}

@container demo (min-width: 440px) {
  .demo-actions .btn {
    flex: 0 1 auto;
  }
}

.demo-more:not([hidden]) {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.demo-more > .btn-link {
  justify-self: start;
}

.demo-status {
  margin-top: 12px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.demo-status:empty {
  margin-top: 0;
}

.rec {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.rec > summary,
.qa > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
}

.rec > summary::-webkit-details-marker,
.qa > summary::-webkit-details-marker {
  display: none;
}

.rec > summary::after,
.qa > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0.35em 4px 0 0;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg);
}

.rec[open] > summary::after,
.qa[open] > summary::after {
  transform: translateY(5px) rotate(225deg);
}

.rec > summary {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 650;
}

.rec > summary:hover {
  background: var(--hover);
}

.rec-group {
  padding: 12px 14px;
  font-size: 0.875rem;
  border-top: 1px solid var(--border);
}

.rec-title {
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.kv,
.visits {
  width: 100%;
  border-collapse: collapse;
}

.kv {
  font-size: 0.875rem;
}

.kv th,
.kv td {
  padding: 7px 0;
  text-align: left;
  vertical-align: top;
}

.kv th {
  width: 42%;
  padding-right: 12px;
  color: var(--text-2);
  font-weight: 500;
}

.kv td {
  overflow-wrap: anywhere;
}

/* An icon before a value's word (availability) keeps a gap from it. */
.kv .icon {
  margin-inline-end: 0.35em;
}

.kv tr + tr > * {
  border-top: 1px solid var(--border);
}

.visits {
  font-size: 0.8125rem;
}

.visits th,
.visits td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.visits th {
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
}

.visits td {
  overflow-wrap: anywhere;
}

.is-current > td {
  background: var(--hover);
}

@container demo (max-width: 420px) {
  .kv tr {
    display: block;
    padding: 7px 0;
  }

  .kv tr + tr {
    border-top: 1px solid var(--border);
  }

  .kv th,
  .kv td {
    display: block;
    width: auto;
    padding: 0;
  }

  .kv tr + tr > * {
    border-top: 0;
  }
}

@container demo (max-width: 500px) {
  .visits thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .visits,
  .visits tbody,
  .visits tr,
  .visits td {
    display: block;
  }

  .visits tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }

  .visits td {
    padding: 1px 0;
    border: 0;
  }

  .visits td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-2);
  }
}

.ev {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.ev code {
  margin-left: 6px;
  font-size: 0.8125rem;
}

.transport,
.note {
  color: var(--text-2);
  font-size: 0.875rem;
}

.transport {
  margin-top: 6px;
}

.note {
  margin-top: 8px;
}

.prompt {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page);
}

.prompt-title {
  font-weight: 650;
}

.prompt-outcome {
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.feedback-error,
.feedback-warning,
.feedback-success {
  margin-top: 10px;
  padding: 10px 12px 10px 14px;
  border-left: 3px solid currentColor;
  border-radius: 10px;
  font-size: 0.9375rem;
}

.feedback-error {
  background: var(--deny-bg);
  color: var(--deny);
}

.feedback-warning {
  background: var(--challenge-bg);
  color: var(--challenge);
}

.feedback-success {
  background: var(--allow-bg);
  color: var(--allow);
}

.deciding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
}

.deciding::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
}

.demo label {
  font-size: 0.875rem;
  font-weight: 600;
}

/* The visitor panel (#demo.demo-panel): two columns from 860px inside, tiles four across from
   600px. */
.demo-panel {
  padding: 20px 18px 22px;
}

@media (min-width: 640px) {
  .demo-panel {
    padding: 28px;
  }
}

@media (min-width: 1024px) {
  .demo-panel {
    padding: 32px 36px 34px;
  }
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.panel-hello {
  min-width: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.panel-hello code {
  padding: 0.04em 0.24em;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 0.08em;
  word-break: break-all;
}

.panel-timing {
  color: var(--text-2);
  font-size: 0.875rem;
}

.panel-timing:not(:empty) {
  margin-top: 6px;
}

.demo-panel .demo-notice {
  margin-top: 14px;
  padding: 9px 12px 10px 14px;
  border-left: 3px solid var(--border);
  border-radius: 8px;
  background: var(--page);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* On a phone the notice keeps every word in less room. */
@media (max-width: 639.98px) {
  .demo-panel .demo-notice {
    margin-top: 10px;
    padding: 7px 10px 8px 11px;
    font-size: 0.75rem;
    line-height: 1.45;
  }
}

.panel-gate:not([hidden]) {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 18px;
}

.gate-why {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.demo-panel .demo-scan:not([hidden]) {
  gap: 18px;
  margin-top: 18px;
  padding: 20px 22px;
}

.demo-panel .scan-art {
  width: 72px;
  height: 72px;
}

.demo-panel .scan-text {
  font-size: 1.125rem;
}

.panel-grid:not([hidden]) {
  display: grid;
  gap: 24px;
  margin-top: 22px;
}

.panel-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

@container demo (min-width: 860px) {
  .panel-grid:not([hidden]) {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
  }
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@container demo (min-width: 600px) {
  .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tile {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px 14px;
  border-radius: 12px;
  background: var(--page);
}

.tile dt {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.tile dd {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.tile-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.tile-num {
  color: var(--primary);
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.tile-unit {
  font-weight: 650;
}

.tile-word {
  display: inline-flex;
  align-items: center;
  min-height: 2.2rem;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.2;
}

.tile-hint {
  color: var(--text-2);
  font-size: 0.75rem;
  line-height: 1.35;
}

.tile .coming {
  margin: 9px 0 5px;
}

.recent-title {
  font-size: 1rem;
  letter-spacing: 0;
}

.recent {
  margin-top: 10px;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.recent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.recent-row.is-current {
  background: var(--hover);
}

.recent-icon {
  grid-row: span 3;
  padding-top: 1px;
  color: var(--text-2);
}

.recent-icon .icon {
  width: 18px;
  height: 18px;
}

.recent-how {
  color: var(--text-2);
  font-weight: 650;
}

.is-recognised .recent-icon,
.is-recognised .recent-how {
  color: var(--primary);
}

.recent-when,
.recent-meta {
  grid-column: 2;
  color: var(--text-2);
  font-size: 0.875rem;
}

.recent-this {
  font-weight: 600;
}

.recent-problem {
  padding: 4px 0 10px;
}

@container demo (min-width: 560px) {
  .recent-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .recent-icon {
    grid-row: span 2;
  }

  .recent-when {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
  }

  .recent-meta {
    grid-column: 2 / 4;
  }
}

.recent-more {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.reread-line {
  flex-basis: 100%;
}

.facts {
  display: grid;
  border-top: 1px solid var(--border);
}

.fact {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.fact dt {
  color: var(--text-2);
}

.fact dd {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fact-ip {
  font-family: var(--mono);
  font-size: 0.875rem;
}

.fact .bot-bad {
  white-space: normal;
}

.fact-bot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.panel-side {
  min-width: 0;
  padding: 18px 18px 20px;
  border-radius: 14px;
  background: var(--page);
}

.side-title {
  margin-bottom: 12px;
}

.verdict-big {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.verdict-lg {
  gap: 10px;
  padding: 6px 20px 6px 14px;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.verdict-lg .icon {
  width: 28px;
  height: 28px;
}

.verdict-why {
  margin-top: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.verdict-why.is-missing {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.is-missing .icon {
  margin-top: 3px;
}

.why-text {
  display: block;
}

.verdict-lines {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.verdict-lines li {
  display: grid;
  gap: 1px;
}

.line-label {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 600;
}

.line-value {
  font-size: 0.9375rem;
}

.panel-side .note {
  margin-top: 16px;
}

.panel-foot:not([hidden]) {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.panel-next {
  display: grid;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}

.panel-next:not(:has(> :not([hidden]))) {
  display: none;
}

.remembered {
  font-weight: 600;
  text-wrap: pretty;
}

.panel-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 20px;
}

.panel-controls.is-confirm {
  display: grid;
  gap: 10px;
}

.panel-controls .note {
  margin-top: 0;
}

.confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

@container demo (min-width: 700px) {
  .panel-foot:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
  }

  .panel-controls.is-confirm {
    grid-column: 1 / -1;
  }
}

/* Selects: the arrow drawn with two gradients in text.secondary, since img-src allows no data:
   URL. */
.select,
.field-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 15px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

.select {
  min-height: 40px;
  padding: 7px 38px 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background-color: var(--card);
  color: var(--text);
  font-size: 0.9375rem;
  cursor: pointer;
}

.select:hover {
  border-color: var(--text);
}

/* Sections. Light sections alternate surface.page and surface.card. */
.section {
  padding: 72px 0;
}

.section-card {
  background: var(--card);
}

.section-head {
  max-width: 46rem;
  margin-bottom: 40px;
}

.lead {
  max-width: 44rem;
  margin-top: 16px;
  color: var(--text-2);
  font-size: 1.125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.h-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 40px;
}

.next-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: var(--primary);
  font-weight: 650;
  text-decoration: none;
}

.next-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.squares,
.legend,
.plan-shape {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.squares > li,
.legend > li,
.plan-shape > li {
  position: relative;
  padding-left: 22px;
}

.squares > li::before,
.legend > li::before,
.plan-shape > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 2px;
  width: 7px;
  height: 7px;
  background: var(--primary);
}

@media (min-width: 1024px) {
  .section {
    padding: 112px 0;
  }

  .section-head {
    margin-bottom: 56px;
  }
}

/* Use cases: the reader's problem, what knownprint does, the verdict. */
.uses {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.use {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.use-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.use-head h3 {
  font-size: 1.1875rem;
}

.use-icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  background: var(--hover);
  color: var(--primary);
}

.use-problem {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.use-outcome {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  list-style: none;
}

.use-outcome > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--text-2);
}

@media (min-width: 768px) {
  .uses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .use:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .use {
    padding: 28px;
  }
}

/* How it works */
.steps {
  display: grid;
  gap: 48px;
  padding: 0;
  list-style: none;
}

/* Each step stacks on its own, so the connector runs behind a phone's code blocks. */
.step {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
}

.step:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 44px;
  bottom: -40px;
  left: 17px;
  width: 2px;
  background: var(--border-strong);
  transform-origin: top;
}

.step-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-fill);
  font-weight: 700;
}

.step-body {
  min-width: 0;
}

.step-body > :not(:first-child) {
  margin-top: 12px;
}

.step-body > p:not(.step-label) {
  max-width: 44rem;
}

.step-label {
  padding-top: 6px;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.step-label + h3 {
  margin-top: 4px;
}

@media (max-width: 767.98px) {
  .step-body > .code {
    position: relative;
    margin-left: -50px;
  }
}

@media (min-width: 768px) {
  .step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 24px;
  }

  .step:not(:last-child)::after {
    top: 56px;
    left: 23px;
  }

  .step-num {
    width: 48px;
    height: 48px;
    font-size: 1.125rem;
  }

  .step-label {
    padding-top: 12px;
  }
}

/* The homepage's steps carry no code: three across from 900px. */
@media (min-width: 900px) {
  .steps-plain {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .steps-plain .step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 4px;
  }

  .steps-plain .step:not(:last-child)::after {
    top: 23px;
    right: -28px;
    bottom: auto;
    left: 60px;
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  .steps-plain .step-label {
    padding-top: 10px;
  }
}

/* Code blocks on surface.code with the code tokens. */
.code {
  min-width: 0;
  margin-top: 16px;
  border-radius: 12px;
  background: var(--navy);
  color: var(--code-text);
}

.code-label {
  padding: 10px 16px;
  border-bottom: 1px solid var(--d-border);
  color: var(--code-comment);
  font-size: 0.8125rem;
  font-weight: 600;
}

.code pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}

.code pre:focus-visible {
  outline-color: var(--d-link);
  outline-offset: -2px;
}

.code code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}

.tk-c {
  color: var(--code-comment);
}

.tk-k {
  color: var(--code-keyword);
}

.tk-s {
  color: var(--code-string);
}

@media (min-width: 640px) {
  .code pre {
    font-size: 0.875rem;
  }
}

.returns {
  display: grid;
  gap: 24px;
  margin-top: 72px;
}

.returns-caption {
  max-width: 44rem;
  margin-top: 10px;
  color: var(--text-2);
}

.returns .code-json {
  margin: 0;
}

.legend {
  font-size: 0.9375rem;
}

@media (min-width: 1024px) {
  .returns {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "code legend";
    gap: 24px 40px;
    margin-top: 96px;
  }

  .returns-head {
    grid-area: head;
  }

  .returns .code-json {
    grid-area: code;
  }

  .returns-legend {
    grid-area: legend;
    padding-top: 8px;
  }
}

/* Two ways */
.ways {
  display: grid;
  gap: 20px;
}

.way {
  min-width: 0;
  padding: 28px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--page);
}

.way h3 {
  font-size: 1.5rem;
}

.way-lead {
  margin: 6px 0 14px;
  font-size: 1.125rem;
  font-weight: 600;
}

.way-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 14px;
  font-size: 0.9375rem;
}

.ticks {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 0;
  list-style: none;
}

.way-sub + .ticks {
  margin-top: 0;
}

.ticks > li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
}

.ticks .icon {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--primary);
}

.ticks-later .icon {
  color: var(--text-2);
}

.ways-line {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  max-width: 60rem;
  margin-top: 28px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  background: var(--page);
  font-weight: 550;
}

.ways-line .icon {
  width: 22px;
  height: 22px;
  color: var(--primary);
}

@media (min-width: 900px) {
  .ways {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }

  .way {
    padding: 32px;
  }
}

/* What you get */
.group-title,
.later-title {
  margin-bottom: 16px;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.signal-grid + .group-title {
  margin-top: 48px;
}

.signal-grid {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.signal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.signal-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .signal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .signal:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .signal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .signal:last-child:nth-child(4n + 3) {
    grid-column: span 2;
  }

  .signal:last-child:nth-child(4n + 1) {
    grid-column: span 4;
  }

  .signal:last-child:nth-child(4n + 2),
  .signal:nth-last-child(2):nth-child(4n + 1) {
    grid-column: span 2;
  }
}

.signal-icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

/* Palette section 9: the device cluster's link icon is the one accent.cyan icon here. */
.signal-icon.is-cluster {
  color: var(--cyan);
}

.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  font-size: 0.9375rem;
}

.later {
  margin-top: 48px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  max-width: 100%;
  padding: 6px 7px 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--page);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.chip .coming {
  border-radius: 999px;
}

/* On a phone the chips stack as a list, and a chip stays on its label's first line. */
@media (max-width: 639.98px) {
  .chips {
    display: grid;
  }

  .chip {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    border-radius: 12px;
  }

  .chip .coming {
    flex: none;
  }
}

/* The homepage's plain cards (.signal.benefit), on surface.card. */
.benefit {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-content: start;
  gap: 2px 14px;
  padding: 18px;
  background: var(--page);
}

.benefit .signal-icon {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  background: var(--hover);
}

.benefit h4 {
  font-size: 1.0625rem;
}

.benefit p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

.section-card .later {
  background: var(--page);
}

.section-card .chip {
  background: var(--card);
}

@media (min-width: 1024px) {
  .benefit {
    display: flex;
    gap: 8px;
    padding: 22px;
  }

  .benefit .signal-icon {
    margin-bottom: 6px;
  }
}

/* Proof */
.proof-block {
  margin-top: 64px;
}

.section-head + .proof-block {
  margin-top: 0;
}

.proof-block > h3,
.proof-block > .h-row {
  margin-bottom: 18px;
}

.ladder {
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.rung {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.rung-level {
  color: var(--primary);
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.rung-tag {
  grid-column: 2;
  justify-self: start;
}

.targets {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.targets > li {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--page);
}

.targets-line {
  margin-top: 16px;
  font-weight: 650;
}

.stats {
  border-top: 1px solid var(--border);
}

.stat {
  display: grid;
  gap: 10px 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.stat-figure,
.stat-label,
.stat-num,
.stat-text {
  display: block;
}

.stat-label {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.stat-num {
  margin-top: 6px;
  color: var(--primary);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.stat-unit {
  display: inline-block;
  color: var(--text-2);
  line-height: 1.2;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* The homepage's short proof. */
.proof-cards {
  display: grid;
  gap: 16px;
  padding: 0;
  list-style: none;
}

.proof-card {
  min-width: 0;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--page);
}

.proof-stat > span {
  display: block;
}

.proof-word {
  margin-top: 6px;
  color: var(--primary);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.proof-card .stat-num {
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 2.75rem);
}

.proof-text {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

@media (min-width: 900px) {
  .proof-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .proof-card {
    padding: 28px;
  }
}

.switches {
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--page);
}

.switches > .h-row {
  margin-bottom: 10px;
}

.switches-lead {
  max-width: 46rem;
  color: var(--text-2);
}

.switch-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.switch-name {
  font-weight: 700;
}

@media (min-width: 768px) {
  .rung {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 8px 24px;
  }

  .rung-tag {
    grid-column: 3;
  }

  .stat {
    grid-template-columns: 19rem minmax(0, 1fr);
    align-items: start;
  }

  .stat-text {
    padding-top: 4px;
  }

  .switches {
    padding: 32px;
  }
}

/* Before you ask */
.faq {
  border-top: 1px solid var(--border);
}

.qa {
  border-bottom: 1px solid var(--border);
}

.qa > summary {
  padding: 20px 0;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.35;
}

.qa > summary:hover .qa-q {
  color: var(--primary-hover);
}

.qa-body {
  padding-bottom: 22px;
}

.qa-body p {
  max-width: 46rem;
}

@media (min-width: 1024px) {
  .ask-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    column-gap: 64px;
  }

  .ask-grid > .section-head {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    margin-bottom: 0;
  }

  .ask-grid > .next {
    grid-column: 2;
  }
}

/* Compare: a table that collapses to stacked rows below 720px. */
.compare-wrap {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.compare th,
.compare td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
}

.compare thead tr > * {
  border-bottom: 1px solid var(--border);
}

.compare thead th {
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compare tbody th {
  width: 18%;
  font-weight: 700;
}

.compare tbody tr + tr > * {
  border-top: 1px solid var(--border);
}

.compare-source {
  max-width: 60rem;
  margin-top: 14px;
  color: var(--text-2);
  font-size: 0.875rem;
}

@media (max-width: 719.98px) {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }

  .compare tbody th {
    width: auto;
    padding-bottom: 2px;
    font-size: 1.0625rem;
  }

  .compare td {
    padding-top: 10px;
    padding-bottom: 6px;
  }

  .compare td:last-child {
    padding-bottom: 18px;
  }

  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--text-2);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .compare tbody tr + tr > td {
    border-top: 0;
  }
}

/* Pricing and the early access band (navy, no glow). */
.pricing-grid {
  display: grid;
  gap: 8px;
}

.pricing-grid > .section-head {
  margin-bottom: 24px;
}

.plan-shape {
  max-width: 46rem;
}

@media (min-width: 1024px) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }

  .pricing-grid > .section-head {
    margin-bottom: 0;
  }

  .plan-shape {
    padding-top: 40px;
  }
}

.band {
  padding: 64px 0 72px;
  background: var(--navy);
}

.band-inner {
  display: grid;
  gap: 20px;
}

.band-form-view:not([hidden]) {
  display: grid;
  gap: 28px;
}

.band-title {
  color: var(--d-text);
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.band-sub {
  margin-top: 12px;
  font-size: 1.125rem;
  text-wrap: pretty;
}

.band-line {
  margin-top: 8px;
  color: var(--d-text-2);
}

.band-form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 0.9375rem;
  font-weight: 600;
}

.field-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background-color: var(--card);
  color: var(--text);
  font-size: 1rem;
  caret-color: var(--primary);
}

.field-input::placeholder {
  color: var(--text-off);
  opacity: 1;
}

.field-input:hover {
  border-color: var(--text);
}

.field-input[aria-invalid="true"] {
  padding: 9px 13px;
  border: 2px solid var(--deny);
}

.field-select {
  padding-right: 40px;
  cursor: pointer;
}

.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.band-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 4px;
}

.band-note {
  color: var(--d-text-2);
  font-size: 0.875rem;
}

.band-done-view:not([hidden]) {
  display: grid;
  gap: 12px;
  max-width: 44rem;
}

.band-done-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.band-ok {
  width: 34px;
  height: 34px;
  color: var(--d-ok);
}

.band-email {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.band-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  justify-self: start;
  max-width: 44rem;
  border-radius: 10px;
}

.band-status-icon {
  display: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.band-status.is-error {
  padding: 10px 14px;
  background: var(--d-error-bg);
  color: var(--d-error);
}

.band-status.is-ok {
  color: var(--d-text);
}

.band-status.is-ok .band-status-icon {
  color: var(--d-ok);
}

.band-status.is-error .band-status-icon,
.band-status.is-ok .band-status-icon {
  display: block;
}

@media (min-width: 640px) {
  .band-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-email,
  .band-submit-row {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .band {
    padding: 96px 0;
  }

  .band-form-view:not([hidden]) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 64px;
  }
}

/* Privacy on the homepage */
.privacy-grid {
  display: grid;
}

.keeps {
  padding: 8px 20px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--page);
}

.keeps-text {
  max-width: 46rem;
  padding-top: 16px;
}

.keeps-links {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .privacy-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    column-gap: 64px;
  }

  .keeps {
    padding: 8px 32px 32px;
  }
}

/* Footer */
.site-footer {
  padding: 48px 0;
  background: var(--navy);
}

.footer-inner {
  display: grid;
  gap: 20px;
}

.site-footer .brand {
  justify-self: start;
  margin-right: 0;
}

.dark a.brand,
.dark a.brand:hover {
  color: var(--on-fill);
}

.dark .mark-frame {
  stroke: var(--on-fill);
}

.dark .mark-lines {
  stroke: var(--d-cyan);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
  list-style: none;
}

.footer-links a:not(.btn) {
  display: inline-block;
  padding: 6px 0;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.footer-links a:not(.btn):hover {
  text-decoration: underline;
}

.copyright {
  color: var(--d-text-2);
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .footer-inner {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 48px;
  }

  .footer-links {
    justify-content: flex-end;
  }

  .copyright {
    grid-column: 1 / -1;
  }
}

/* The demo page (body.page-demo): the way back, the navy band, the playground under it. */
.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 6px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.nav-back:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.nav-back .icon {
  transform: scaleX(-1);
}

/* Below 420px the header holds the wordmark, which links back too, and Early access only. */
.nav-back-long {
  display: none;
}

@media (max-width: 419.98px) {
  .nav-back {
    display: none;
  }
}

@media (min-width: 560px) {
  .nav-back-long {
    display: inline;
  }
}

/* The demo page's section links need the room until 1280px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-back-long {
    display: none;
  }
}

.demo-hero .hero-title {
  font-size: clamp(2.25rem, 1.3rem + 4vw, 4rem);
}

.demo-hero .hero-sub {
  max-width: 40rem;
  margin-top: 14px;
}

.lab-band {
  padding: 40px 0 72px;
}

.lab-lede,
.lab .beat-head,
.lab .note,
.lab .prompt,
.lab .demo-cta {
  max-width: 52rem;
}

.lab-lede {
  color: var(--text-2);
}

.lab-wait {
  margin-top: 14px;
}

@media (min-width: 1024px) {
  .demo-hero {
    padding-bottom: 80px;
  }

  .lab-band {
    padding: 56px 0 104px;
  }

  .lab {
    padding: 32px 36px;
  }
}

/* Motion: everything that moves (SPEC-design section 4 numbers), off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* 1. Hero entrance, staggered 90 ms. */
  .hero-eyebrow,
  .h1-line,
  .hero-sub,
  .hero .demo,
  .hero-invite,
  .hero-cta {
    animation: rise-in 700ms var(--ease-out) both;
  }

  .h1-line:first-child {
    animation-delay: 90ms;
  }

  .h1-line:last-child {
    animation-delay: 180ms;
  }

  .hero-sub {
    animation-delay: 270ms;
  }

  /* The panel rises in early, so its scan is seen while the run is still under way. */
  .hero .demo {
    animation-name: card-in;
    animation-delay: 180ms;
  }

  .hero-invite {
    animation-delay: 360ms;
  }

  .hero-cta {
    animation-delay: 450ms;
  }

  .demo-hero .h1-line {
    animation-delay: 60ms;
  }

  .demo-hero .hero-sub {
    animation-delay: 150ms;
  }

  .demo-hero .demo {
    animation-delay: 120ms;
  }

  .lab {
    animation: card-in 700ms var(--ease-out) 360ms both;
  }

  /* 2 and 3. The arches draw in from the centre outward, then a highlight travels out through
     them every 7 s. */
  .hero-art path {
    animation:
      ridge-draw 1.6s var(--ease-out) both,
      ridge-ripple 7s linear infinite;
  }

  .hero-art .ridge:nth-child(1) path {
    animation-delay: 0ms, 2600ms;
  }

  .hero-art .ridge:nth-child(2) path {
    animation-delay: 110ms, 2690ms;
  }

  .hero-art .ridge:nth-child(3) path {
    animation-delay: 220ms, 2780ms;
  }

  .hero-art .ridge:nth-child(4) path {
    animation-delay: 330ms, 2870ms;
  }

  .hero-art .ridge:nth-child(5) path {
    animation-delay: 440ms, 2960ms;
  }

  .hero-art .ridge:nth-child(6) path {
    animation-delay: 550ms, 3050ms;
  }

  .hero-art .ridge:nth-child(7) path {
    animation-delay: 660ms, 3140ms;
  }

  .hero-art .ridge:nth-child(8) path {
    animation-delay: 770ms, 3230ms;
  }

  .hero-art .ridge:nth-child(9) path {
    animation-delay: 880ms, 3320ms;
  }

  .hero-art .ridge:nth-child(10) path {
    animation-delay: 990ms, 3410ms;
  }

  /* 4. The scan, only while #demo-scan is shown. */
  .scan-arc {
    animation: scan-fill 1.8s var(--ease-out) infinite both;
  }

  .scan-fill .scan-arc:nth-child(2) {
    animation-delay: 140ms;
  }

  .scan-fill .scan-arc:nth-child(3) {
    animation-delay: 280ms;
  }

  .scan-fill .scan-arc:nth-child(4) {
    animation-delay: 420ms;
  }

  .scan-fill .scan-arc:nth-child(5) {
    animation-delay: 560ms;
  }

  .scan-line {
    opacity: 1;
    animation: scan-sweep 700ms ease-in-out infinite alternate;
  }

  .scan-swap-a {
    animation: swap-a 150ms ease-out;
  }

  .scan-swap-b {
    animation: swap-b 150ms ease-out;
  }

  .scan-slow {
    animation: fade-in 300ms ease-out both;
  }

  /* 5. A new beat rises and fades in; its parts follow. */
  .beat-enter {
    animation: beat-in 420ms var(--ease-out) both;
  }

  .beat-enter .beat-head {
    animation: fade-up 420ms var(--ease-out) 80ms both;
  }

  .beat-enter .beat-facts {
    animation: fade-up 420ms var(--ease-out) 160ms both;
  }

  .beat-enter .match-likely {
    animation: fade-in 220ms ease-out 150ms both;
  }

  /* 6. The confidence bar grows to its value. */
  .conf-fill {
    animation: conf-grow 900ms var(--ease-out) 200ms both;
  }

  /* 7. The verdict stamp. */
  .verdict-stamp {
    animation: stamp 280ms var(--ease-spring) 250ms both;
  }

  .demo-cta:not([hidden]) {
    animation: fade-up 420ms var(--ease-out) 730ms both;
  }

  .demo-status.is-flash {
    animation: fade-in 150ms ease-out both;
  }

  .demo-status.is-fading {
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  .deciding::before {
    animation: pulse 1.2s ease-in-out infinite;
  }

  /* 14. The panel: the body rises, the tiles follow 60 ms apart, the recent visits slide in
     (--row), the facts follow, the verdict stamps and the foot comes last; all of it paused at its
     first frame while #demo carries data-hold. */
  #demo[data-hold] * {
    animation-play-state: paused;
  }

  .panel-in-a {
    animation: panel-in-a 520ms var(--ease-out) both;
  }

  .panel-in-b {
    animation: panel-in-b 520ms var(--ease-out) both;
  }

  .tile {
    animation: rise-in 520ms var(--ease-out) 80ms both;
  }

  .tile:nth-child(2) {
    animation-delay: 140ms;
  }

  .tile:nth-child(3) {
    animation-delay: 200ms;
  }

  .tile:nth-child(4) {
    animation-delay: 260ms;
  }

  .recent-row {
    animation: slide-in 460ms var(--ease-out) both;
    animation-delay: calc(300ms + var(--row, 0) * 70ms);
  }

  .fact {
    animation: fade-up 420ms var(--ease-out) 420ms both;
  }

  .fact:nth-child(2) {
    animation-delay: 470ms;
  }

  .fact:nth-child(3) {
    animation-delay: 520ms;
  }

  .fact:nth-child(4) {
    animation-delay: 570ms;
  }

  .fact:nth-child(5) {
    animation-delay: 620ms;
  }

  .panel-side {
    animation: fade-up 520ms var(--ease-out) 180ms both;
  }

  .verdict-big .verdict-stamp {
    animation-delay: 480ms;
  }

  .why-text {
    animation: fade-in 420ms ease-out 600ms both;
  }

  .verdict-lines li {
    animation: fade-up 420ms var(--ease-out) 680ms both;
  }

  .verdict-lines li + li {
    animation-delay: 740ms;
  }

  .panel-timing:not(:empty) {
    animation: fade-in 300ms ease-out both;
  }

  .panel-foot:not([hidden]) {
    animation: fade-up 460ms var(--ease-out) 700ms both;
  }

  .remembered:not([hidden]) {
    animation: fade-up 460ms var(--ease-out) 820ms both;
  }

  /* 8. Buttons: filled buttons lift 1px on hover; the busy ring turns. */
  .btn,
  .btn-link,
  .field-input,
  .nav-menu-button,
  .rec > summary {
    transition:
      background-color 160ms ease-out,
      border-color 160ms ease-out,
      color 160ms ease-out,
      box-shadow 160ms ease-out,
      transform 160ms var(--ease-out);
  }

  .btn-primary:hover,
  .btn-danger:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
  }

  .btn-primary:active,
  .btn-danger:active,
  .btn.is-busy:hover {
    box-shadow: none;
    transform: none;
  }

  .btn.is-busy::after,
  .btn-link.is-busy::after {
    animation: spin 800ms linear infinite;
  }

  .next-link .icon {
    transition: transform 160ms var(--ease-out);
  }

  .next-link:hover .icon {
    transform: translateX(3px);
  }

  /* 9. Scroll reveal: site.js marks what starts below the fold, then shows it on entry. */
  .reveal-pending {
    opacity: 0;
    transform: translateY(24px);
  }

  .reveal-pending.is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity 600ms var(--ease-out) var(--reveal-delay, 0ms),
      transform 600ms var(--ease-out) var(--reveal-delay, 0ms);
  }

  /* 10. The step connector draws as the section enters. */
  .steps.draw-pending .step::after {
    transform: scaleY(0);
  }

  .steps.draw-pending.is-drawn .step::after {
    transform: scaleY(1);
    transition: transform 900ms var(--ease-out);
  }

  .steps.draw-pending.is-drawn .step:nth-child(2)::after {
    transition-delay: 500ms;
  }

  /* 12. Accordions: the chevron turns, and the answer opens where ::details-content exists. */
  .rec > summary::after,
  .qa > summary::after {
    transition: transform 200ms var(--ease-out);
  }

  .qa {
    interpolate-size: allow-keywords;
  }

  .qa::details-content {
    block-size: 0;
    overflow: clip;
    transition:
      block-size 200ms var(--ease-out),
      content-visibility 200ms allow-discrete;
  }

  .qa[open]::details-content {
    block-size: auto;
  }

  /* 13. The header shadow fades in once the page scrolls. */
  .site-header {
    transition: box-shadow 200ms ease-out;
  }

  .nav-menu-panel {
    animation: fade-up 180ms var(--ease-out) both;
  }
}

/* 10, sideways, for the homepage's steps. */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .steps-plain.draw-pending .step::after {
    transform: scaleX(0);
  }

  .steps-plain.draw-pending.is-drawn .step::after {
    transform: scaleX(1);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
}

@keyframes ridge-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes ridge-ripple {
  0%,
  17%,
  100% {
    stroke: var(--d-border);
  }

  8.5% {
    stroke: var(--d-cyan);
  }
}

@keyframes scan-fill {
  0% {
    stroke-dashoffset: 1;
  }

  45%,
  70% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -1;
  }
}

@keyframes scan-sweep {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(52px);
  }
}

@keyframes swap-a {
  from {
    opacity: 0;
  }
}

@keyframes swap-b {
  from {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes panel-in-a {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes panel-in-b {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes beat-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes conf-grow {
  from {
    width: 0;
  }
}

@keyframes stamp {
  from {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* Sub-pages (body.page-sub): light only, in the text tokens; nothing here moves. */
.page-sub {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.page-sub > main {
  flex: 1 0 auto;
}

.page-head {
  padding: 44px 0 36px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.page-title {
  max-width: 46rem;
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.page-updated {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 0.9375rem;
}

.page-intro {
  display: grid;
  gap: 12px;
  max-width: 46rem;
  margin-top: 22px;
  font-size: 1.125rem;
  line-height: 1.55;
}

.page-intro p {
  text-wrap: pretty;
}

/* The long-form body: a contents list beside the text from 1024px, above it on phones. */
.doc-grid {
  display: grid;
  gap: 32px;
  padding: 36px 0 72px;
}

.doc {
  min-width: 0;
  max-width: 46rem;
}

.toc {
  padding: 16px 20px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.toc-title {
  margin-bottom: 6px;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.toc-list {
  display: grid;
  padding: 0;
  list-style: none;
}

.toc-list a {
  display: block;
  padding: 7px 0;
  color: var(--text);
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
}

.toc-list a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.toc-list .toc-sub a {
  padding-left: 14px;
  color: var(--text-2);
  font-weight: 400;
}

.toc-list .toc-sub a:hover {
  color: var(--primary-hover);
}

.doc-section > :not(:first-child) {
  margin-top: 14px;
}

.doc-section + .doc-section {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.doc h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.doc h3 {
  font-size: 1.1875rem;
}

.doc-section > h3:not(:first-child),
.doc-section > .remove-card:not(:first-child) {
  margin-top: 32px;
}

.doc .squares {
  gap: 8px;
}

.controller {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.remove-card {
  display: grid;
  gap: 14px;
  padding: 22px 20px 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
}

.inline-form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.doc-note {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@media (min-width: 560px) {
  .inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .inline-form .btn {
    min-height: 48px;
  }

  .remove-card {
    padding: 26px 28px 28px;
  }
}

@media (min-width: 1024px) {
  .page-head {
    padding: 80px 0 56px;
  }

  .doc-grid {
    grid-template-columns: 220px minmax(0, 46rem);
    align-items: start;
    column-gap: 72px;
    padding: 72px 0 112px;
  }

  .doc-grid-single {
    grid-template-columns: minmax(0, 46rem);
  }

  .toc {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    padding: 2px 0 2px 18px;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: none;
  }
}

/* The 404 and result pages: one button, one link, the line art beside them from 900px. */
.status-page {
  display: grid;
  align-items: center;
  padding: 56px 0 72px;
}

.status {
  display: grid;
  align-items: center;
  gap: 40px;
}

.status-text {
  max-width: 36rem;
}

.status-line {
  margin-top: 18px;
  color: var(--text-2);
  font-size: 1.125rem;
  line-height: 1.55;
}

.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 30px;
}

.status-art {
  display: none;
}

.status-art path {
  fill: none;
  stroke: var(--border);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.status-art .ridge-accent path {
  stroke: var(--cyan);
}

@media (min-width: 900px) {
  .status {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    gap: 64px;
  }

  .status-art {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to bottom, var(--navy) 62%, transparent 96%);
    mask-image: linear-gradient(to bottom, var(--navy) 62%, transparent 96%);
  }
}

@media (min-width: 1024px) {
  .status-page {
    padding: 96px 0 112px;
  }
}