@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/pt-sans-latin-400.5f81586551e5.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: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/pt-sans-latin-ext-400.707577b546ff.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;
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/pt-sans-latin-700.38d3aa3b6c9c.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: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/pt-sans-latin-ext-700.94a9333684b6.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;
}

/* GENERATED from @verysafe/ui-tokens — do not edit by hand. */
:root {
  --vs-bg: #FFFFFF;
  --vs-surface: #F9FAFB;
  --vs-text: #191919;
  --vs-text-muted: #6B7280;
  --vs-border: #E5E7EB;
  --vs-border-strong: #8C8C8C;
  --vs-chip: #EEF2EF;
  --vs-accent: #0F4B2C;
  --vs-accent-text: #FFFFFF;
  --vs-success: #1B7F4D;
  --vs-warning: #B45309;
  --vs-danger: #B42318;
  --vs-info: #0F4B2C;
  --vs-glass-ground: #F9FAFB;
  --vs-glass-panel: rgba(255, 255, 255, 0.75);
  --vs-glass-panel-strong: rgba(255, 255, 255, 0.92);
  --vs-glass-border: rgba(15, 75, 44, 0.14);
  --vs-glass-border-strong: rgba(15, 75, 44, 0.28);
  --vs-glass-highlight: rgba(255, 255, 255, 0.90);
  --vs-glass-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -10px rgba(15, 75, 44, 0.16);
  --vs-glass-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.04), 0 24px 56px -20px rgba(15, 75, 44, 0.28);
  --vs-glass-glow-a: rgba(44, 220, 130, 0.55);
  --vs-glass-glow-b: rgba(15, 75, 44, 0.85);
  --vs-space-xs: 4px;
  --vs-space-sm: 8px;
  --vs-space-md: 16px;
  --vs-space-lg: 24px;
  --vs-space-xl: 32px;
  --vs-space-xxl: 48px;
  --vs-radius-sm: 6px;
  --vs-radius-md: 8px;
  --vs-radius-lg: 12px;
  --vs-radius-full: 9999px;
  --vs-text-display-size: 32px;
  --vs-text-display-weight: 700;
  --vs-text-h1-size: 28px;
  --vs-text-h1-weight: 700;
  --vs-text-h2-size: 22px;
  --vs-text-h2-weight: 700;
  --vs-text-h3-size: 18px;
  --vs-text-h3-weight: 700;
  --vs-text-body-size: 16px;
  --vs-text-body-weight: 400;
  --vs-text-body-small-size: 14px;
  --vs-text-body-small-weight: 400;
  --vs-text-caption-size: 12px;
  --vs-text-caption-weight: 400;
  --vs-text-overline-size: 11px;
  --vs-text-overline-weight: 700;
  --vs-text-overline-tracking: 1.2px;
  --vs-elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --vs-elev-2: 0 4px 10px rgba(0, 0, 0, 0.08);
  --vs-elev-3: 0 12px 28px rgba(0, 0, 0, 0.14);
  --vs-motion-fast: 120ms;
  --vs-motion-standard: 200ms;
  --vs-motion-slow: 320ms;
  --vs-font-sans: 'PT Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --vs-blur-panel: 18px;
  --vs-blur-chrome: 28px;
}
[data-theme="dark"] {
  --vs-bg: #191919;
  --vs-surface: #242424;
  --vs-text: #FFFFFF;
  --vs-text-muted: #9CA3AF;
  --vs-border: #3A3A3A;
  --vs-border-strong: #757575;
  --vs-chip: #2C2C2C;
  --vs-accent: #2CDC82;
  --vs-accent-text: #0A3721;
  --vs-success: #2CDC82;
  --vs-warning: #F59E0B;
  --vs-danger: #F87171;
  --vs-info: #2CDC82;
  --vs-glass-ground: #141414;
  --vs-glass-panel: rgba(255, 255, 255, 0.06);
  --vs-glass-panel-strong: rgba(255, 255, 255, 0.10);
  --vs-glass-border: rgba(255, 255, 255, 0.12);
  --vs-glass-border-strong: rgba(255, 255, 255, 0.24);
  --vs-glass-highlight: rgba(255, 255, 255, 0.10);
  --vs-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 24px -10px rgba(0, 0, 0, 0.65);
  --vs-glass-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.55), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
  --vs-glass-glow-a: rgba(44, 220, 130, 0.60);
  --vs-glass-glow-b: rgba(15, 75, 44, 0.90);
  --vs-elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
  --vs-elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.55);
  --vs-elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  :root { --vs-motion-fast: 0ms; --vs-motion-standard: 0ms; --vs-motion-slow: 0ms; }
}


/* GENERATED by apps/marketing/src/build.ts from the [data-theme="dark"] block above.
   Applies the same declarations from the system preference unless the visitor chose
   light with the theme button. Do not edit by hand. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vs-bg: #191919;
    --vs-surface: #242424;
    --vs-text: #FFFFFF;
    --vs-text-muted: #9CA3AF;
    --vs-border: #3A3A3A;
    --vs-border-strong: #757575;
    --vs-chip: #2C2C2C;
    --vs-accent: #2CDC82;
    --vs-accent-text: #0A3721;
    --vs-success: #2CDC82;
    --vs-warning: #F59E0B;
    --vs-danger: #F87171;
    --vs-info: #2CDC82;
    --vs-glass-ground: #141414;
    --vs-glass-panel: rgba(255, 255, 255, 0.06);
    --vs-glass-panel-strong: rgba(255, 255, 255, 0.10);
    --vs-glass-border: rgba(255, 255, 255, 0.12);
    --vs-glass-border-strong: rgba(255, 255, 255, 0.24);
    --vs-glass-highlight: rgba(255, 255, 255, 0.10);
    --vs-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 8px 24px -10px rgba(0, 0, 0, 0.65);
    --vs-glass-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.55), 0 24px 56px -20px rgba(0, 0, 0, 0.8);
    --vs-glass-glow-a: rgba(44, 220, 130, 0.60);
    --vs-glass-glow-b: rgba(15, 75, 44, 0.90);
    --vs-elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.5);
    --vs-elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 10px rgba(0, 0, 0, 0.55);
    --vs-elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.6);
  }
}

/*
 * Site styles (the EU relaunch, 2026-09-26). Appended to
 * @verysafe/ui-tokens/tokens.css by the build, which also emits the
 * prefers-color-scheme bridge — see build.ts darkThemeBridge.
 *
 * Every colour is a token. Contrast is a build gate (CLAUDE.md rule 5) and the
 * tokens pass their own policy; a hex here is how that guarantee gets quietly
 * lost, so `check:styles` forbids literals (pure black/white alpha excepted)
 * and fails any `var(--vs-…)` the token file does not emit.
 *
 * ── Themes and bands ───────────────────────────────────────────────────────
 *
 * The page follows the system theme, or the visitor's choice from the theme
 * button (`data-theme` on <html>). Some bands stay dark in BOTH themes — the
 * header, the hero, the AI-agents band, the procurement band, the closing band
 * and the footer — by carrying `data-theme="dark"` themselves: tokens.css keys
 * the dark palette on that attribute, so every token inside the band resolves
 * dark without a second palette here. Code panels do the same.
 *
 * ── The one rule about gradients ───────────────────────────────────────────
 *
 * `a11y-marketing.mjs` counts axe's `incomplete` as a failure, and axe returns
 * `incomplete` whenever a GRADIENT is behind text — it cannot compute a
 * contrast ratio through one. So: every surface behind text is a flat token
 * colour, and the only gradient on the site is `.demo-glow`, which holds no
 * text and sits under faces that are all opaque.
 */

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

/* `hidden` must win over any class that sets display — the theme button and
   the demo controls render hidden and are revealed by the script. */
[hidden] {
  display: none !important;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

:root[data-theme="dark"],
[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}

body {
  margin: 0;
  background: var(--vs-bg);
  color: var(--vs-text);
  font-family: var(--vs-font-sans);
  font-size: var(--vs-text-body-size);
  line-height: 1.6;
  /* Long words in legal prose and German compounds, at 390px. */
  overflow-wrap: break-word;
}

a {
  color: var(--vs-accent);
  text-underline-offset: 2px;
}

a:hover {
  opacity: 0.85;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.1;
  font-weight: 700;
  text-wrap: balance;
}

code,
pre,
.mono-sm,
.step-n,
.api-m {
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ── Focus: one visible treatment everywhere, never removed ──────────────── */

:focus-visible {
  outline: 3px solid var(--vs-accent);
  outline-offset: 2px;
  border-radius: var(--vs-radius-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--vs-space-sm);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--vs-space-sm) var(--vs-space-md);
  background: var(--vs-accent);
  color: var(--vs-accent-text);
  border-radius: var(--vs-radius-md);
  z-index: 40;
}

.skip:focus {
  left: var(--vs-space-md);
}

.sr-only,
.seg input,
.tab input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout primitives ───────────────────────────────────────────────────── */

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.narrow {
  max-width: 760px;
}

.section {
  padding-block: clamp(56px, 9vw, 88px);
}

.section-flush {
  padding-top: 0;
}

/* A dark band: the ground is the flat dark glass ground, never a gradient. */
.band {
  background: var(--vs-glass-ground);
  color: var(--vs-text);
}

.band-surface {
  background: var(--vs-surface);
  border-block: 1px solid var(--vs-border);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}

.split-top {
  align-items: start;
}

.split-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.display {
  font-size: clamp(32px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.5px;
}

.display-2 {
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.05;
}

.display-3 {
  font-size: clamp(32px, 4.4vw, 44px);
  line-height: 1.08;
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 680px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.sec-head h2 {
  font-size: clamp(30px, 3.4vw, 40px);
}

.split h2,
.proc h2,
.card-form h2 {
  font-size: clamp(26px, 2.8vw, 32px);
}

.lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--vs-text-muted);
  text-wrap: pretty;
}

.lead-hero {
  font-size: 19px;
  max-width: 560px;
}

.muted {
  color: var(--vs-text-muted);
}

.overline {
  font-size: var(--vs-text-overline-size);
  font-weight: 700;
  letter-spacing: var(--vs-text-overline-tracking);
  text-transform: uppercase;
  color: var(--vs-text-muted);
}

.mono-sm {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--vs-text-muted);
}

.prose {
  max-width: 68ch;
}

.prose p + p {
  margin-top: var(--vs-space-md);
}

.sub-h {
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 48px 0 12px;
}

.icon {
  flex: none;
  vertical-align: middle;
}

/* ── Buttons and links ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--vs-radius-full);
  border: 1px solid transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.btn:active {
  opacity: 0.85;
}

.btn-primary {
  background: var(--vs-accent);
  color: var(--vs-accent-text);
}

.btn-ghost {
  background: transparent;
  color: var(--vs-accent);
  border-color: var(--vs-glass-border-strong);
}

.btn-block {
  width: 100%;
}

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

.after-cards {
  margin-top: 32px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  text-decoration: none;
}

.arrow-link:hover span {
  text-decoration: underline;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--vs-glass-border-strong);
  border-radius: var(--vs-radius-full);
  background: var(--vs-glass-panel);
  font-size: 13px;
  font-weight: 700;
  align-self: flex-start;
}

.eyebrow .icon {
  color: var(--vs-accent);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: var(--vs-radius-full);
  background: var(--vs-success);
  flex: none;
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--vs-radius-full);
  background: var(--vs-chip);
  color: var(--vs-accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-no {
  color: var(--vs-text);
}

/* ── Header ──────────────────────────────────────────────────────────────── */

/*
 * Opaque, not frosted: the header is a dark band in both themes, and a
 * translucent dark bar over a light page composites to a mid-grey that the
 * muted language codes fail on. The frosting was never worth that.
 */
.site-head {
  background: var(--vs-glass-ground);
  color: var(--vs-text);
  border-bottom: 1px solid var(--vs-glass-border);
  position: relative;
  z-index: 20;
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  padding-block: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--vs-text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  flex: none;
}

[data-theme="dark"] .vs-dark-half {
  fill: currentColor;
}

.nav-inline {
  flex: 1;
  min-width: 0;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--vs-radius-md);
  color: var(--vs-text);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover {
  opacity: 1;
  background: var(--vs-glass-panel-strong);
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--vs-accent);
}

.lang ul {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--vs-glass-border-strong);
  border-radius: var(--vs-radius-full);
}

.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--vs-radius-full);
  color: var(--vs-text-muted);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.lang a:hover {
  opacity: 1;
  color: var(--vs-text);
}

.lang a[aria-current="true"] {
  background: var(--vs-accent);
  color: var(--vs-accent-text);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: var(--vs-radius-full);
  border: 1px solid var(--vs-glass-border-strong);
  background: none;
  color: var(--vs-text);
  cursor: pointer;
}

.theme-toggle .t-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .t-sun {
  display: block;
}

:root[data-theme="dark"] .theme-toggle .t-moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .t-sun {
    display: block;
  }

  :root:not([data-theme="light"]) .theme-toggle .t-moon {
    display: none;
  }
}

.btn-head {
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
}

/* The compact menu. Hidden on wide screens, where the inline nav shows. */
.menu {
  display: none;
}

.menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--vs-radius-full);
  border: 1px solid var(--vs-glass-border-strong);
  color: var(--vs-text);
  font-size: 14px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.menu > summary::-webkit-details-marker {
  display: none;
}

.menu[open] .m-open,
.menu:not([open]) .m-close {
  display: none;
}

.menu-panel {
  border-top: 1px solid var(--vs-glass-border);
  margin-top: 10px;
  padding: 8px 0 12px;
}

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

.menu-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 4px;
  border-bottom: 1px solid var(--vs-glass-border);
  color: var(--vs-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.menu-list a[aria-current="page"] {
  color: var(--vs-accent);
}

.menu-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

/*
 * Below 64rem the inline nav, the inline switcher and the header button give
 * way to the menu. The summary is pinned into the header row's right edge and
 * the open panel takes the full width IN FLOW, pushing the page down — an
 * overlay made axe report the hero text it covered (2026-09-10), and a menu
 * that pushes is also the one that never traps focus behind it.
 */
@media (max-width: 63.99rem) {
  .nav-inline,
  .lang-inline,
  .btn-head {
    display: none;
  }

  .head-row {
    position: relative;
    padding-right: 150px;
  }

  .theme-toggle {
    margin-left: auto;
  }

  /* The row reserves 150px on the right for the pinned summary; the open
     panel reaches back into that space so the list spans the full width. */
  .menu {
    display: block;
    flex-basis: calc(100% + 130px);
    margin-right: -130px;
    order: 10;
  }

  .menu > summary {
    position: absolute;
    top: 10px;
    right: 20px;
  }
}

@media (min-width: 64rem) {
  /*
   * Sticky on wide screens, so anything scrolled into view — by a fragment
   * link, a keyboard focus move (WCAG 2.2 "focus not obscured"), or axe
   * scrolling an element in to measure it — must land BELOW the header.
   * `scroll-padding-top` on the scroll container does that for all three.
   * Without it the gate reported the demo's text "overlapped by another
   * element": the header, sitting on top of what axe had just scrolled to.
   */
  html {
    scroll-padding-top: 80px;
  }

  .site-head {
    position: sticky;
    top: 0;
  }

  .lang-inline {
    margin-left: auto;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(40px, 8vw, 72px) 0 clamp(40px, 6vw, 56px);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 48px;
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-page .hero-copy {
  gap: 20px;
}

/* The four facts under the hero. Opaque cells; the gaps are the dividers. */
.strip {
  list-style: none;
  margin: clamp(40px, 6vw, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: var(--vs-glass-border);
  border: 1px solid var(--vs-glass-border);
  border-radius: var(--vs-radius-lg);
  overflow: hidden;
}

.strip li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--vs-glass-ground);
}

.strip .icon {
  color: var(--vs-accent);
  margin-top: 2px;
}

.strip strong {
  display: block;
  font-size: 15px;
}

.strip strong + span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vs-text-muted);
}

/* ── The demo ────────────────────────────────────────────────────────────── */

.demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.demo-head,
.demo-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.demo-stage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
}

/*
 * The only gradient on the site. Decorative, textless, and UNDER the stage
 * only: every face over it (phone, code panel, verdict) is opaque, so axe's
 * contrast walk stops before it reaches the glow.
 *
 * It is behind them by DOM ORDER — first child, positioned, and the phone and
 * the side column positioned after it — not by `z-index: -1`. The first
 * version used a negative z-index inside an isolated stage with a blur
 * filter; browsers painted it correctly, but axe's own stacking model put it
 * ON TOP of the phone and reported every word in the demo as "overlapped by
 * another element". Plain paint order is the one both agree on.
 */
.demo-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 80% 15%, var(--vs-glass-glow-b), transparent 70%),
    radial-gradient(
      45% 45% at 25% 85%,
      color-mix(in srgb, var(--vs-glass-glow-a) 25%, transparent),
      transparent 70%
    );
}

.demo-stage > .phone,
.demo-stage > .demo-side {
  position: relative;
}

/* Frames: hidden unless the demo's step says otherwise. */
.demo [data-step-show] {
  display: none;
}

.demo[data-step="0"] [data-step-show="0"],
.demo[data-step="1"] [data-step-show="1"],
.demo[data-step="2"] [data-step-show="2"],
.demo[data-step="3"] [data-step-show="3"] {
  display: var(--show, block);
}

/* Scenario: the attribute (set by the script) and :has() (no script needed). */
.demo[data-scenario="ok"] .only-bad,
.demo[data-scenario="bad"] .only-ok {
  display: none;
}

.demo:has(.seg input[value="bad"]:checked) .only-ok,
.demo:has(.seg input[value="ok"]:checked) .only-bad {
  display: none;
}

.demo:has(.seg input[value="bad"]:checked)[data-step="3"] .only-bad {
  display: var(--show, block);
}

.phone {
  width: 250px;
  height: 500px;
  flex: none;
  margin: 0 auto;
  border-radius: 40px;
  border: 8px solid rgba(0, 0, 0, 0.92);
  background: var(--vs-bg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}

.phone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.online {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--vs-radius-full);
  border: 1px solid var(--vs-glass-border-strong);
  background: var(--vs-glass-panel-strong);
  font-size: 12px;
}

.screen {
  --show: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.screen-center {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.screen strong {
  font-size: 17px;
}

.scan-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  border: 1px solid var(--vs-glass-border);
  background: var(--vs-glass-panel-strong);
  color: var(--vs-accent);
}

.qr-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 176px;
  height: 176px;
  border-radius: 16px;
  border: 2px solid var(--vs-accent);
  background: rgba(0, 0, 0, 0.55);
  color: var(--vs-text);
}

.rp {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--vs-accent);
  color: var(--vs-accent-text);
  font-weight: 700;
}

.screen .req-title {
  font-size: 19px;
  line-height: 1.2;
}

.attr {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--vs-glass-border);
  border-radius: var(--vs-radius-lg);
  background: var(--vs-glass-panel-strong);
  color: var(--vs-accent);
}

.attr > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--vs-text);
}

.attr strong {
  font-size: 14.5px;
}

.phone-buttons {
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--vs-radius-full);
  font-size: 15px;
  font-weight: 700;
}

.pb-quiet {
  border: 1px solid var(--vs-glass-border-strong);
}

.pb-primary {
  background: var(--vs-accent);
  color: var(--vs-accent-text);
}

.ok-mark {
  color: var(--vs-accent);
}

.demo-side {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-code {
  background: var(--vs-glass-ground);
  color: var(--vs-text);
  border: 1px solid var(--vs-glass-border);
  border-radius: var(--vs-radius-lg);
  overflow: hidden;
}

.frame-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vs-glass-border);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--vs-text-muted);
}

.frame-m {
  color: var(--vs-accent);
  font-weight: 700;
  white-space: nowrap;
}

.demo-code pre,
.code-panel pre {
  margin: 0;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.demo-code pre {
  min-height: 150px;
}

.verdict {
  background: var(--vs-surface);
  border: 1px solid var(--vs-glass-border-strong);
  border-radius: var(--vs-radius-lg);
  padding: 18px 20px;
}

.verdict-state {
  font-size: var(--vs-text-overline-size);
  font-weight: 700;
  letter-spacing: var(--vs-text-overline-tracking);
  text-transform: uppercase;
  color: var(--vs-accent);
}

.verdict-bad .verdict-state {
  color: var(--vs-danger);
}

.verdict-q {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
  font-size: 19px;
  font-weight: 700;
}

.verdict-q strong {
  color: var(--vs-accent);
}

.verdict-reason {
  margin: 6px 0 12px;
  font-size: 17px;
  font-weight: 700;
}

.verdict-checks {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--vs-glass-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.verdict-checks li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.verdict-checks .icon {
  color: var(--vs-accent);
}

.demo-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.demo-steps button,
.demo-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--vs-radius-full);
  border: 1px solid var(--vs-glass-border-strong);
  background: transparent;
  color: var(--vs-text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.demo-steps .n {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.demo-steps button[aria-pressed="true"] {
  background: var(--vs-accent);
  border-color: var(--vs-accent);
  color: var(--vs-accent-text);
}

.demo-play > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.demo[data-playing="true"] .when-paused,
.demo:not([data-playing="true"]) .when-playing {
  display: none;
}

.seg-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.seg span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--vs-radius-md);
  border: 1px solid var(--vs-glass-border-strong);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.seg input:checked + span {
  border-color: var(--vs-accent);
  background: var(--vs-glass-panel-strong);
}

.seg input:focus-visible + span,
.tab input:focus-visible + span {
  outline: 3px solid var(--vs-accent);
  outline-offset: 2px;
}

/* ── Steps ───────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 2px solid var(--vs-accent);
}

.step-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--vs-accent);
}

.step h3 {
  font-size: 22px;
}

.step p {
  color: var(--vs-text-muted);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.cards-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.cards-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.cards-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
}

.band-surface .card,
.cards-on-surface .card {
  background: var(--vs-bg);
}

.card h3,
.card-h {
  font-size: 19px;
  line-height: 1.25;
}

.card > p,
.card-top p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--vs-text-muted);
  text-wrap: pretty;
}

.card-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.card-top > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.card-top .mono-sm {
  font-size: 12.5px;
  color: var(--vs-text-muted);
}

.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  background: var(--vs-chip);
  color: var(--vs-accent);
}

.card-dp {
  padding: 28px;
  gap: 16px;
}

.card-dp h3 {
  font-size: 22px;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--vs-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15.5px;
  line-height: 1.45;
}

.checklist .icon {
  color: var(--vs-accent);
  margin-top: 2px;
}

.card-tier {
  padding: 28px;
  gap: 10px;
}

/* `.card` prefixes: `.card h3` and `.card > p` would otherwise win. */
.card .tier-name {
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--vs-text-muted);
}

.card .tier-price {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vs-accent);
}

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

.chips li {
  padding: 8px 14px;
  border-radius: var(--vs-radius-full);
  background: var(--vs-chip);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}

.chips-sm {
  margin: 0;
  gap: 6px;
}

.chips-sm li {
  padding: 4px 10px;
  font-size: 12.5px;
  white-space: nowrap;
}

.dates {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.dates li {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--vs-border);
}

.date-when {
  font-size: 17px;
  font-weight: 700;
  color: var(--vs-accent);
}

.date-what {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--vs-text-muted);
}

/* ── Code panels: always dark, whatever the page theme ───────────────────── */

.code-panel {
  margin: 0;
  background: var(--vs-glass-ground);
  color: var(--vs-text);
  border: 1px solid var(--vs-glass-border);
  border-radius: var(--vs-radius-lg);
  overflow: hidden;
  min-width: 0;
}

.code-panel figcaption,
.panel-sep {
  padding: 10px 14px;
  border-bottom: 1px solid var(--vs-glass-border);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--vs-text-muted);
}

.code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin-top: 24px;
}

.code-tabs .tabbar {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-bottom: 1px solid var(--vs-glass-border);
  min-width: 0;
}

.tab span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--vs-radius-sm);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vs-text-muted);
  cursor: pointer;
}

.tab input:checked + span {
  background: var(--vs-glass-panel-strong);
  color: var(--vs-text);
}

.code-tabs .tab-panel {
  display: none;
  min-height: 170px;
}

.code-tabs .tab-curl {
  display: block;
}

.code-tabs[data-tab="node"] .tab-curl,
.code-tabs[data-tab="python"] .tab-curl,
.code-tabs:has(input[value="node"]:checked) .tab-curl,
.code-tabs:has(input[value="python"]:checked) .tab-curl {
  display: none;
}

.code-tabs[data-tab="node"] .tab-node,
.code-tabs[data-tab="python"] .tab-python,
.code-tabs:has(input[value="node"]:checked) .tab-node,
.code-tabs:has(input[value="python"]:checked) .tab-python {
  display: block;
}

.panel-sep {
  border-bottom: 0;
  border-top: 1px solid var(--vs-glass-border);
}

.code-tabs .resp {
  padding-top: 0;
  color: var(--vs-accent);
}

/* ── Developers ──────────────────────────────────────────────────────────── */

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  overflow: hidden;
}

.rows li {
  background: var(--vs-surface);
  border-bottom: 1px solid var(--vs-border);
}

.rows li:last-child {
  border-bottom: 0;
}

.api-list li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 2px 14px;
  padding: 14px 16px;
  align-items: baseline;
}

.api-m {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vs-accent);
}

.api-body {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  min-width: 0;
}

.api-p {
  font-size: 14.5px;
  font-weight: 700;
  word-break: break-all;
}

.api-d {
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--vs-text-muted);
}

.reasons li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  font-size: 15px;
}

.reasons .icon {
  color: var(--vs-danger);
}

.card-form {
  padding: clamp(20px, 4vw, 28px);
  gap: 14px;
}

.res-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.res-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 16px 0;
  border-bottom: 1px solid var(--vs-border);
  color: var(--vs-text);
  text-decoration: none;
}

.res-list a > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.res-list strong {
  font-size: 17px;
}

.res-list .muted {
  font-size: 14px;
}

.res-list .icon {
  color: var(--vs-accent);
}

/* ── Forms ───────────────────────────────────────────────────────────────── */

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: 0 14px;
  border-radius: var(--vs-radius-md);
  border: 1.5px solid var(--vs-border-strong);
  background: var(--vs-bg);
  color: var(--vs-text);
  /* 16px, not the design's 15.5: below 16 iOS zooms the page on focus. */
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}

.field textarea {
  padding: 12px 14px;
  resize: vertical;
}

.hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--vs-text-muted);
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.45;
}

.consent input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex: none;
  accent-color: var(--vs-accent);
}

.consent-link {
  font-size: 14px;
  font-weight: 700;
  margin-top: -6px;
}

/* The honeypot: off-screen, out of the tab order and the accessibility tree. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.contact-intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.other-ways {
  padding-top: 20px;
  border-top: 1px solid var(--vs-border);
}

.other-ways .card-h {
  font-size: 15px;
}

.ways {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ways li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.ways .icon {
  color: var(--vs-accent);
  margin-top: 2px;
}

.ways li > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  line-height: 1.5;
}

.ways .muted {
  font-size: 13px;
}

.ways a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
}

/* ── Trust ───────────────────────────────────────────────────────────────── */

.trust-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
  align-items: end;
  margin-bottom: 40px;
}

.trust-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cert-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  background: var(--vs-bg);
}

.hero .cert-box {
  border-color: var(--vs-glass-border-strong);
  background: var(--vs-surface);
}

/* The mark is a transparent PNG with dark lettering: on a dark band it needs
   its own light plate, or "OpenID" all but disappears. */
.cert-box img {
  height: 64px;
  width: auto;
  flex: none;
  padding: 4px;
  border-radius: var(--vs-radius-sm);
  background: rgba(255, 255, 255, 1);
}

.cert-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.cert-name {
  font-size: 15px;
  font-weight: 700;
}

.cert-text a {
  font-size: 14px;
  font-weight: 700;
}

.cert-fine {
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--vs-text-muted);
}

.note {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--vs-border-strong);
  border-radius: var(--vs-radius-lg);
  background: var(--vs-surface);
  font-size: 14.5px;
  line-height: 1.5;
}

.table-wrap {
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  overflow: hidden;
}

.claims {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  line-height: 1.45;
}

.claims th,
.claims td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--vs-border);
}

.claims tbody tr:last-child > * {
  border-bottom: 0;
}

.claims thead th {
  background: var(--vs-surface);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--vs-text-muted);
}

.claims td:last-child {
  color: var(--vs-text-muted);
  overflow-wrap: anywhere;
}

/*
 * On a phone the table becomes one block per row, with each cell's header
 * printed before it. The column headers stay in the accessibility tree
 * (visually hidden, not display:none), and no scrolling region is involved —
 * a horizontally scrolled region at 390px is where axe reported overlapping
 * content on the old code samples.
 */
@media (max-width: 47.99rem) {
  .claims thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .claims tr {
    display: block;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vs-border);
  }

  .claims tbody tr:last-child {
    border-bottom: 0;
  }

  .claims th,
  .claims td {
    display: block;
    padding: 2px 0;
    border: 0;
  }

  .claims td::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: var(--vs-text);
  }
}

.proc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.proc > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 620px;
}

/* ── Product page ────────────────────────────────────────────────────────── */

.evidence {
  padding: clamp(20px, 3vw, 28px);
  background: var(--vs-surface);
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cert-box + .evidence {
  margin-top: 16px;
}

.evidence h3 {
  font-size: 19px;
}

.facts {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 10px 20px;
  margin: 0;
}

.facts dt {
  font-weight: 700;
  font-size: 14px;
  color: var(--vs-text-muted);
}

.facts dd {
  margin: 0;
  font-size: 15px;
}

/* The register link in the evidence list: a list value, not a sentence, so it
   gets the full 44px target rather than the inline-text exemption. */
.facts dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.plain,
.limits {
  margin: 0;
  padding-left: 1.2em;
}

.plain {
  list-style: none;
  padding-left: 0;
}

.limits {
  color: var(--vs-text-muted);
  font-size: 15px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 40rem) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .facts dd {
    margin-bottom: 10px;
  }
}

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

.faq-item {
  border-bottom: 1px solid var(--vs-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--vs-accent);
  flex: none;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  padding-bottom: 18px;
  color: var(--vs-text-muted);
  line-height: 1.6;
  max-width: 70ch;
}

/* ── Legal ───────────────────────────────────────────────────────────────── */

.legal-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--vs-border);
}

.legal-item h2 {
  font-size: 19px;
}

.legal-item p {
  color: var(--vs-text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.narrow .overline + .note,
.narrow .overline + div,
.narrow h1 + .lead {
  margin-top: 16px;
}

/* ── Product captures (English-only pages) ───────────────────────────────── */

.shot {
  margin: var(--vs-space-xl) 0;
  max-width: 60rem;
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-lg);
}

.shot figcaption {
  margin-top: var(--vs-space-sm);
  font-size: var(--vs-text-body-small-size);
  color: var(--vs-text-muted);
  max-width: 68ch;
}

.phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--vs-space-lg);
  max-width: 52rem;
  margin: var(--vs-space-xl) 0;
}

.phones .shot {
  margin: 0;
}

.phones .shot img {
  border-radius: 1.5rem;
}

.prose + .cards {
  margin-top: var(--vs-space-xl);
}

.cards + .shot,
.cards + .btn-row,
.shot + .btn-row,
.prose + .btn-row {
  margin-top: var(--vs-space-xl);
}

/* ── Closing band and footer ─────────────────────────────────────────────── */

.band-cta {
  padding: clamp(56px, 9vw, 88px) 0 clamp(40px, 6vw, 56px);
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

.cta-inner h2 {
  font-size: clamp(30px, 3.6vw, 44px);
}

.cta-inner .lead {
  max-width: 560px;
}

.site-foot {
  background: var(--vs-glass-ground);
  color: var(--vs-text);
  padding: 8px 0 48px;
}

.site-foot .wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--vs-glass-border);
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.foot-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* "Terms" is 35px of text; the target is still 44 wide. */
  min-width: 44px;
  min-height: 44px;
  color: var(--vs-text-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.foot-links a:hover {
  opacity: 1;
  color: var(--vs-text);
}

.foot-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vs-text-muted);
}

.foot-addr {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--vs-text-muted);
}

.foot-addr a {
  color: var(--vs-text-muted);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */

/*
 * The hero copy rises in. TRANSFORM ONLY: an opacity fade once had axe measure
 * half-faded text mid-animation and fail the build on colours that exist
 * nowhere in the palette — a gate whose result depends on when the snapshot
 * lands is a flaky gate. `transform` moves pixels without recolouring them.
 * The demo switches frames with `display`, never a crossfade, for the same
 * reason.
 */
@keyframes vs-rise {
  from {
    transform: translateY(10px);
  }

  to {
    transform: none;
  }
}

.hero-copy > * {
  animation: vs-rise var(--vs-motion-slow) ease both;
}

.hero-copy > :nth-child(2) {
  animation-delay: 40ms;
}

.hero-copy > :nth-child(3) {
  animation-delay: 80ms;
}

.hero-copy > :nth-child(4) {
  animation-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > * {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */

@media (max-width: 40rem) {
  /* Stacked, the side column changes height between frames; reserving the
     tallest frame's height stops the page below from jumping every 2.8 s. */
  .demo-side {
    min-width: 0;
    flex-basis: 100%;
    min-height: 400px;
  }

  .lead-hero {
    font-size: 18px;
  }

  .btn-row .btn {
    flex: 1 1 auto;
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

/*
 * Procurement prints things. Dark bands and panels render as ink on paper, so
 * the print sheet strips everything back to text and rules, hides what only
 * works on screen, and prints link targets after the text — a printed page of
 * "read more" is a page with the evidence removed.
 */
@media print {
  body,
  .band,
  .band-surface,
  .site-foot,
  .code-panel,
  .demo-code,
  .card,
  .verdict,
  .evidence {
    background: none !important;
    color: black !important;
  }

  .site-head,
  .menu,
  .skip,
  .demo-controls,
  .demo-head,
  .demo-glow,
  .phone,
  .theme-toggle,
  .band-cta {
    display: none !important;
  }

  .card,
  .code-panel,
  .evidence,
  .verdict {
    border: 1pt solid black;
    break-inside: avoid;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  main a[href^="/"]::after {
    content: " (verysafe.id" attr(href) ")";
    font-size: 9pt;
  }

  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}