/* Hallmark · theme: custom (brand Corexia, inherited) · idea: "un agente que trabaja y una persona que decide, todo convergiendo en el núcleo" · vibe: "nocturno, preciso, técnico sin frialdad" · posture: restrained · paper: midnight and ice, alternating · accent: electric blue 254 · faces: Montserrat (display, wordmark), Inter (body) · genre: atmospheric · hero: copy bottom-left over the brand core image · nav: sticky bar, wordmark, three links and one quiet action · footer: wordmark with one line, three links · signature: the order demo and the threshold sorter */
/* critique: the brand dictates near-black with one electric accent and Montserrat with Inter (corexia-ebooks/src/estilo.css); kept over the spent list because the brand already exists and is inherited, never re-themed */
/* Hallmark · waive 29 · .nav backdrop · the atmospheric genre licenses one blurred nav over the canvas */
/* motion: the owner asked to always see the animation (05-11-2026), so one particle core stays fixed behind the whole page and a second WebGL pass inverts it inside the light zones; it eases to a stop with the pause control and stays still under reduced motion */

/* Fonts are served from the site, not from Google, so no visitor IP leaves for a third party (OFL, latin subset). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600-latin.woff2") format("woff2");
}

:root {
  --color-paper: oklch(14.9% 0.017 260);
  --color-paper-2: oklch(18.6% 0.024 260);
  --color-paper-3: oklch(22.4% 0.03 259);
  --color-rule: oklch(30% 0.036 257);
  --color-rule-strong: oklch(40% 0.04 257);
  --color-ink: oklch(97.5% 0.006 255);
  --color-ink-2: oklch(86.7% 0.03 253);
  --color-muted: oklch(70% 0.034 257);
  --color-accent: oklch(73.7% 0.138 254);
  --color-accent-ink: oklch(14.9% 0.017 260);
  --color-accent-hover: oklch(80% 0.12 254);
  --color-accent-soft: oklch(73.7% 0.138 254 / 0.14);
  --color-focus: oklch(76% 0.16 254);
  --color-ok: oklch(78% 0.13 160);
  --color-ok-soft: oklch(78% 0.13 160 / 0.14);
  --color-nav: oklch(14.9% 0.017 260 / 0.92);
  --color-nav-rule: oklch(30% 0.036 257 / 0.6);
  --color-veil-0: oklch(14.9% 0.017 260 / 0);
  --color-veil-70: oklch(14.9% 0.017 260 / 0.7);
  --color-veil-94: oklch(14.9% 0.017 260 / 0.94);
  --color-log: oklch(22.4% 0.03 259 / 0.6);

  --light-paper: oklch(97.5% 0.006 255);
  --light-paper-2: oklch(99.2% 0.003 255);
  --light-paper-3: oklch(94.6% 0.01 255);
  --light-rule: oklch(86% 0.016 255);
  --light-rule-strong: oklch(72% 0.026 255);
  --light-ink: oklch(19% 0.025 260);
  --light-ink-2: oklch(31% 0.03 258);
  --light-muted: oklch(39% 0.036 257);
  --light-accent: oklch(51.5% 0.15 254);
  --light-accent-hover: oklch(45% 0.15 254);
  --light-accent-soft: oklch(51.5% 0.15 254 / 0.1);
  --light-ok: oklch(45% 0.11 160);
  --light-ok-soft: oklch(45% 0.11 160 / 0.12);
  --light-nav: oklch(97.5% 0.006 255 / 0.92);
  --light-nav-rule: oklch(86% 0.016 255 / 0.7);
  --light-log: oklch(94.6% 0.01 255 / 0.7);
  --dark-muted: oklch(74% 0.03 257);

  --plate-card: oklch(17.4% 0.022 260);

  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: clamp(2rem, 3.2vw, 2.75rem);
  --text-display: clamp(2.75rem, 6.4vw, 5.5rem);

  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 144px;

  --radius-control: 999px;
  --radius-card: 14px;
  --radius-inner: 8px;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 68px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
  --dur-reveal: 900ms;
}

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

html {
  overflow-x: clip;
  background: var(--color-paper);
  color-scheme: dark;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
  margin: 0;
  color: var(--color-ink-2);
  font: 400 var(--text-md) / 1.6 var(--font-body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html,
textarea,
input {
  scrollbar-color: var(--color-rule-strong) var(--color-paper);
  caret-color: var(--color-accent);
}

::selection {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
  overflow-wrap: break-word;
  min-width: 0;
}

h1 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 14ch;
}

h2 {
  font-size: var(--text-2xl);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 22ch;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  transition: none;
}

.skip {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  z-index: 400;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-control);
  background: var(--color-ink);
  color: var(--color-paper);
}

.skip:focus-visible {
  top: var(--space-md);
}

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

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 300;
  height: var(--nav-h);
  background: var(--color-nav);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--color-nav-rule);
  transition: background-color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out);
}

.nav .wordmark,
.nav .brand,
.nav .brand-sub,
.nav .btn {
  transition: color var(--dur-long) var(--ease-out), border-color var(--dur-long) var(--ease-out);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
  border-radius: var(--radius-inner);
}

.brand svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: 0.13em;
  color: var(--color-ink);
}

.brand-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--color-rule-strong);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.nav-links a {
  color: var(--color-muted);
  text-decoration: none;
  border-radius: 4px;
  transition: color var(--dur-long) var(--ease-out);
}

.nav-links a:hover {
  color: var(--color-ink);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: 600 var(--text-sm) / 1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-short) var(--ease-out),
    color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"],
.play:disabled,
.chapters button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

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

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

.btn-quiet {
  min-height: 40px;
  padding: 0 var(--space-md);
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.btn-quiet:hover {
  border-color: var(--color-accent);
}

.link {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  transition: text-decoration-color var(--dur-short) var(--ease-out);
  border-radius: 4px;
}

.link:hover {
  text-decoration-color: var(--color-accent);
}

/* Hero */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(calc(100svh - var(--nav-h)), 860px);
  padding-block: var(--space-3xl) var(--space-2xl);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.hero-media img {
  position: absolute;
  top: 0;
  left: 24%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-veil-94) 0%, var(--color-veil-70) 34%, var(--color-veil-0) 62%);
  mask-image: linear-gradient(0deg, transparent 0%, var(--color-paper) 22%);
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, var(--color-paper) 22%);
}

.hero-copy {
  display: grid;
  gap: var(--space-lg);
  max-width: 40rem;
}

.hero-lede {
  font-size: var(--text-lg);
  line-height: 1.5;
  color: var(--color-ink-2);
  max-width: 34ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xs);
}

/* Sections */

.section {
  padding-block: var(--space-4xl) 0;
}

.section-head {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.section-head p {
  max-width: 54ch;
  color: var(--color-muted);
  font-size: var(--text-md);
}

/* Demo (a seekable composition, after hyperframes) */

.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  overflow: hidden;
  min-height: 430px;
}

.pane {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
}

.pane-title {
  font-size: var(--text-xs);
  color: var(--color-muted);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-rule);
}

.mail,
.draft {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-inner);
  background: var(--color-paper-3);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.mail-meta {
  display: grid;
  gap: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.mail-meta b {
  color: var(--color-ink);
  font-weight: 600;
}

.mark {
  position: relative;
  color: var(--color-ink);
}

.mark::after {
  content: "";
  position: absolute;
  inset: -1px -3px;
  border-radius: 4px;
  background: var(--color-accent-soft);
  box-shadow: inset 0 -2px 0 var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--mark, 0));
  z-index: -1;
}

.mail p {
  position: relative;
  z-index: 0;
  color: var(--color-ink-2);
}

.tag {
  justify-self: start;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-control);
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--color-ok-soft);
  color: var(--color-ok);
}

.agent {
  position: relative;
  align-content: start;
}

.agent-core {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--text-sm);
}

.agent-core svg {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: var(--color-accent);
}

.log {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.log li {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-accent);
  background: var(--color-log);
  border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
  font-size: var(--text-sm);
  color: var(--color-ink);
}

.log small {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.log .done {
  border-left-color: var(--color-ok);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.chip {
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-control);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  font-size: var(--text-xs);
}

.bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-rule);
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--fill, 0));
}

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

.draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.fake-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--space-md);
  border-radius: var(--radius-control);
  font-size: var(--text-xs);
  font-weight: 600;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
}

.fake-btn.go {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.fake-btn .sent {
  display: none;
}

.stage[data-sent] .fake-btn.go {
  background: var(--color-ok);
}

.stage[data-sent] .fake-btn.go .send {
  display: none;
}

.stage[data-sent] .fake-btn.go .sent {
  display: inline;
}

.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 40px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  will-change: transform;
}

.cursor path {
  fill: var(--color-ink);
  stroke: var(--color-paper);
  stroke-width: 1.5;
}

.player {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.play {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-rule-strong);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out);
}

.play:hover {
  border-color: var(--color-accent);
}

.play svg {
  width: 16px;
  height: 16px;
  display: block;
  margin: auto;
  fill: currentColor;
}

.play .i-play {
  display: none;
}

.play[aria-pressed="false"] .i-play {
  display: block;
}

.play[aria-pressed="false"] .i-pause {
  display: none;
}

.chapters {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.chapters button {
  position: relative;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: var(--color-muted);
  font: 400 var(--text-xs) / 1.2 var(--font-body);
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.chapters button:hover {
  color: var(--color-ink);
  background: var(--color-paper-2);
}

.chapters button[aria-current="step"] {
  color: var(--color-ink);
}

.chapters button::after {
  content: "";
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
}

.caption {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* Processes */

.processes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.processes th {
  padding: 0 var(--space-lg) var(--space-sm) 0;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-rule-strong);
  white-space: nowrap;
}

.processes td {
  padding: var(--space-lg) var(--space-lg) var(--space-lg) 0;
  vertical-align: top;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink-2);
}

.processes td:first-child {
  width: 26%;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.processes td:last-child {
  color: var(--color-muted);
}

/* Flows: one worked example per sector */

.flows {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}

.flows[data-ready] {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
}

.flow-tabs {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-md);
  border-right: 1px solid var(--color-rule);
}

.flow-tabs[hidden] {
  display: none;
}

.flow-tabs button {
  min-height: 44px;
  padding: var(--space-xs) var(--space-md);
  border: 0;
  border-radius: var(--radius-inner);
  background: transparent;
  color: var(--color-muted);
  font: 400 var(--text-sm) / 1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.flow-tabs button:hover {
  color: var(--color-ink);
  background: var(--color-paper-3);
}

.flow-tabs button[aria-selected="true"] {
  color: var(--color-paper);
  background: var(--color-ink);
  font-weight: 600;
}

.flows[data-ready] .flow-panels {
  display: grid;
}

/* Every panel shares one cell, so the section keeps its height when the sector changes. */
.flows[data-ready] .flow-panel {
  grid-area: 1 / 1;
  visibility: hidden;
}

.flows[data-ready] .flow-panel[data-on] {
  visibility: visible;
}

.flow-panel {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-width: 0;
  padding: var(--space-xl);
}

.flow-panel + .flow-panel {
  border-top: 1px solid var(--color-rule);
}

.flows[data-ready] .flow-panel + .flow-panel {
  border-top: 0;
}

.flow-sector {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* With tabs the sector is already named: the label only serves the stacked version. */
.flows[data-ready] .flow-sector {
  display: none;
}

.flow-panel h3 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-xl);
}

.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-md);
  margin: var(--space-xl) 0;
  padding: 0;
  list-style: none;
}

/* The rail the work travels along. */
.flow::before,
.flow::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: var(--color-rule-strong);
}

.flow::after {
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.flow-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-top: var(--space-xl);
}

.flow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-rule-strong);
  border-radius: 50%;
  background: var(--color-paper-2);
}

.flow-step[data-kind="agent"]::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.flow-step[data-kind="person"]::before {
  border-color: var(--color-ok);
  background: var(--color-ok);
  box-shadow: 0 0 0 var(--space-2xs) var(--color-ok-soft);
}

.flow-step[data-kind="out"]::before {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

.flow-kind {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.flow-step[data-kind="person"] .flow-kind {
  color: var(--color-ok);
}

.flow-step p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.flow-limit {
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* Choosing a sector runs the work along the rail once. */

.flows[data-in] .flow-panel[data-run] .flow::after {
  animation: flow-rail 1.5s var(--ease-in-out) both;
}

.flows[data-in] .flow-panel[data-run] .flow-step {
  animation: flow-step 700ms var(--ease-out) calc(var(--n) * 240ms + 80ms) both;
}

@keyframes flow-rail {
  to { transform: scaleX(1); }
}

@keyframes flow-step {
  from { opacity: 0; transform: translate3d(0, var(--space-sm), 0); }
}

html[data-still] .flow::after {
  transform: none;
}

html[data-still] .flows[data-in] .flow-panel[data-run] .flow::after,
html[data-still] .flows[data-in] .flow-panel[data-run] .flow-step {
  animation: none;
}

/* Figure: the threshold sorter, three flat steps */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr);
  gap: var(--space-2xl);
  align-items: center;
}

.split .section-head {
  margin-bottom: 0;
}

.threshold {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
  max-width: 24rem;
}

.threshold label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.threshold output {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.threshold input {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.plate {
  position: relative;
  margin: 0;
  padding: var(--space-2xl) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--plate-card);
  border: 1px solid var(--color-rule);
}

.plate-corner {
  position: absolute;
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.plate-corner[data-corner="fig"] { top: var(--space-md); left: var(--space-lg); color: var(--color-ink-2); }
.plate-corner[data-corner="title"] { top: var(--space-md); right: var(--space-lg); }
.plate-corner[data-corner="hint"] { bottom: var(--space-md); left: var(--space-lg); }
.plate-corner[data-corner="readout"] { bottom: var(--space-md); right: var(--space-lg); color: var(--color-ink); }

.plate-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
  min-height: 44px;
}

.text-btn {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 7.5rem;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font: 600 var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out);
}

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

.narration {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.threshold-hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.sorter {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sorter-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-inner);
  background: var(--color-paper-2);
  transition: border-color var(--dur-short) var(--ease-out);
}

.sorter-step[data-on] {
  border-color: var(--color-accent);
}

/* The arrow between two steps sits in the gap, pointing at the next one. */
.sorter-step + .sorter-step::before {
  content: "";
  position: absolute;
  top: calc(var(--space-md) + 0.6em);
  left: calc(-1 * var(--space-lg) + 4px);
  width: calc(var(--space-lg) - 8px);
  height: 12px;
  background: var(--color-rule-strong);
  clip-path: polygon(0 42%, 55% 42%, 55% 0, 100% 50%, 55% 100%, 55% 58%, 0 58%);
}

.sorter-head {
  display: flex;
  gap: var(--space-xs);
  min-height: 2.6em;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.sorter-head span {
  flex-shrink: 0;
  font-family: var(--font-display);
  color: var(--color-accent);
}

.doc {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-sm) var(--space-xl);
  border-radius: 6px;
  background: var(--light-paper-2);
  color: var(--light-ink);
  box-shadow: 0 6px 18px oklch(5% 0.01 260 / 0.45);
}

.doc b {
  font-size: var(--text-sm);
}

.doc span {
  font-size: var(--text-xs);
  color: var(--light-muted);
}

.doc::after {
  content: "";
  position: absolute;
  left: var(--space-sm);
  right: 30%;
  bottom: var(--space-sm);
  height: 14px;
  background: repeating-linear-gradient(var(--light-rule) 0 2px, transparent 2px 6px);
}

.meter {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-lg);
}

.meter-track {
  display: block;
  height: 14px;
  border-radius: var(--radius-control);
  background: var(--color-paper-3);
  overflow: hidden;
}

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

.meter[data-pass] .meter-fill {
  background: var(--color-accent);
}

.meter-line {
  position: absolute;
  top: var(--space-sm);
  left: var(--line);
  width: 2px;
  height: calc(var(--space-sm) + 14px + 6px);
  background: var(--color-ink);
  transform: translateX(-50%);
  transition: left var(--dur-short) var(--ease-out);
}

.meter-line span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  padding-bottom: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-ink);
  white-space: nowrap;
  transform: translateX(-50%);
}

.meter-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.meter-read {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.meter-read b {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.outcome {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm);
  border: 1px solid var(--color-rule);
  border-radius: 6px;
  transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}

.outcome svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.outcome[data-out="review"] svg {
  color: var(--color-ink);
}

.outcome p {
  display: grid;
  font-size: var(--text-sm);
  line-height: 1.3;
}

.outcome b {
  color: var(--color-ink);
  font-weight: 600;
}

.outcome small {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.outcome output {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.outcome[data-out="auto"][data-hit] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.outcome[data-out="review"][data-hit] {
  border-color: var(--color-ink);
  background: oklch(97.5% 0.006 255 / 0.08);
}

@media (max-width: 60rem) {
  .sorter {
    grid-template-columns: minmax(0, 1fr);
  }

  .sorter-head {
    min-height: 0;
  }

  .sorter-step + .sorter-step::before {
    top: calc(-1 * var(--space-lg) + 4px);
    left: calc(50% - 6px);
    width: 12px;
    height: calc(var(--space-lg) - 8px);
    clip-path: polygon(42% 0, 58% 0, 58% 55%, 100% 55%, 50% 100%, 0 55%, 42% 55%);
  }
}

/* Phases */

.phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: phase;
  border-top: 1px solid var(--color-rule-strong);
}

.phases li {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-xl) var(--space-xl) 0 0;
  counter-increment: phase;
}

.phases li + li {
  padding-left: var(--space-xl);
  border-left: 1px solid var(--color-rule);
}

.phases li::before {
  content: counter(phase);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent);
}

.phases p {
  color: var(--color-muted);
}

.phases .gets {
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-rule);
}

/* Refusals */

.refusals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-2xl);
  margin: 0;
}

.refusals div {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}

.refusals dt {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

.refusals dd {
  margin: 0;
  color: var(--color-muted);
}

/* Contact */

.contact {
  position: relative;
  margin-top: var(--space-4xl);
  padding-block: var(--space-4xl);
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--color-rule);
}

.contact .wrap {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}

.contact h2 {
  font-size: var(--text-display);
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 16ch;
}

.contact p {
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--color-ink-2);
}

.contact .contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
  gap: var(--space-2xl);
  align-items: start;
  justify-items: stretch;
}

.contact-copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
}

.contact .contact-mail {
  font-size: var(--text-md);
}

.contact-form {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}

.contact-form .trap {
  display: none;
}

.field {
  display: grid;
  gap: var(--space-2xs);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.field label span {
  font-weight: 400;
  color: var(--color-muted);
}

.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-inner);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-md) / 1.4 var(--font-body);
  transition: border-color var(--dur-short) var(--ease-out);
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-muted);
}

.field input:hover,
.field textarea:hover {
  border-color: var(--color-accent);
}

.contact .form-note {
  font-size: var(--text-xs);
  color: var(--color-muted);
}

.contact-form .btn {
  justify-self: start;
}

.contact .form-status {
  font-size: var(--text-sm);
}

.contact .form-status:empty {
  display: none;
}

.form-status[data-tone="ok"] {
  color: var(--color-ok);
}

.form-status[data-tone="error"] {
  color: var(--color-ink);
}

@media (max-width: 60rem) {
  .contact .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-form {
    padding: var(--space-lg);
  }
}

/* Legal pages and the first-layer notice. A gap still to fill is loud on purpose. */

.pending {
  padding: 0 var(--space-2xs);
  border: 1px dashed var(--color-accent);
  border-radius: 4px;
  color: var(--color-accent);
}

.form-note a {
  color: var(--color-ink-2);
}

.legal-doc {
  max-width: 50rem;
  padding-block: var(--space-3xl) var(--space-4xl);
}

.legal-doc h1 {
  font-size: var(--text-2xl);
}

.legal-doc h1,
.legal-doc h2 {
  max-width: none;
}

.legal-doc h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  font-size: var(--text-lg);
  scroll-margin-top: calc(var(--nav-h) + var(--space-md));
}

.legal-doc p,
.legal-doc li {
  color: var(--color-ink-2);
  max-width: 68ch;
}

.legal-doc p + p,
.legal-doc ul + p,
.legal-doc p + ul {
  margin-top: var(--space-sm);
}

.legal-doc ul {
  display: grid;
  gap: var(--space-xs);
  padding-left: var(--space-lg);
}

.legal-doc b {
  color: var(--color-ink);
}

.legal-doc a {
  color: var(--color-ink);
}

.legal-date {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
}

.legal-doc .legal-date {
  color: var(--color-muted);
}

.legal-summary {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
}

.legal-facts {
  display: grid;
  margin: var(--space-md) 0;
  border-top: 1px solid var(--color-rule);
}

.legal-facts div {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--color-rule);
}

.legal-facts dt {
  font-weight: 600;
  color: var(--color-ink);
}

.legal-facts dd {
  margin: 0;
  color: var(--color-ink-2);
}

.table-scroll {
  margin-block: var(--space-md);
  overflow-x: auto;
}

.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal-table th,
.legal-table td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--color-rule);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  color: var(--color-ink);
  font-weight: 600;
}

.legal-table td {
  color: var(--color-ink-2);
}

@media (max-width: 30rem) {
  .legal-facts div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }
}

/* Footer */

.footer {
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--color-rule);
}

.footer .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xl);
  align-items: end;
}

.footer p {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: 48ch;
}

.footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
}

.footer a {
  color: var(--color-ink-2);
  border-radius: 4px;
}

.footer .legal {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
}

/* One reveal (visible by default; only armed when scripting runs) */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 90ms),
    transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 90ms);
}

.js [data-reveal][data-in] {
  opacity: 1;
  transform: none;
}

/* Headings: each word rises from behind its own mask. */

.word {
  display: inline-block;
  overflow: hidden;
  margin-block: -0.14em -0.24em;
  padding-block: 0.14em 0.24em;
  vertical-align: top;
}

.word-in {
  display: inline-block;
  text-shadow: none;
}

.js .word-in {
  transform: translate3d(0, 145%, 0);
  transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms + var(--w, 0) * 65ms);
}

.js [data-in] .word-in,
.js [data-in].word-in {
  transform: none;
}

/* Rows slide in; panels open from a narrower window. */

.js .processes tr[data-reveal],
.js .refusals [data-reveal] {
  transform: translate3d(calc(var(--space-xl) * -1), 0, 0);
}

.js .processes tr[data-reveal][data-in],
.js .refusals [data-reveal][data-in] {
  transform: none;
}

.js [data-panel] {
  opacity: 0;
  clip-path: inset(10% 6% 10% 6% round var(--radius-card));
  transform: translate3d(0, var(--space-2xl), 0) scale(0.98);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    clip-path 1.3s var(--ease-out),
    transform 1.3s var(--ease-out);
}

.js [data-panel][data-in] {
  opacity: 1;
  clip-path: inset(calc(var(--space-lg) * -1));
  transform: none;
}

@media (hover: hover) {
  .js .processes tbody tr[data-reveal] {
    transition:
      opacity var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 90ms),
      transform var(--dur-reveal) var(--ease-out) calc(var(--i, 0) * 90ms),
      background-color var(--dur-long) var(--ease-out),
      box-shadow var(--dur-long) var(--ease-out);
  }

  .processes tbody td {
    transition: color var(--dur-long) var(--ease-out);
  }

  .processes tbody tr:hover {
    background: var(--color-ink);
    box-shadow: calc(var(--space-md) * -1) 0 0 var(--color-ink), var(--space-md) 0 0 var(--color-ink);
  }

  .processes tbody tr:hover td {
    color: var(--color-paper);
    text-shadow: none;
  }
}


/* Core: one fixed canvas behind the page */

.core-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

.has-core .core-canvas {
  display: block;
}

.has-core .hero-media img {
  display: none;
}

html:not(.has-core) .motion-toggle {
  display: none;
}

/* The core never leaves the page, so the control that stops it never does either. */
.motion-toggle {
  position: fixed;
  right: var(--gutter);
  bottom: var(--space-lg);
  z-index: 250;
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-control);
  background: var(--color-veil-94);
  color: var(--color-ink-2);
  font: 400 var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.motion-toggle:hover {
  color: var(--color-ink);
  border-color: var(--color-accent);
}

/* Themes: same tokens, other values */

.zone-light,
.nav[data-tone="light"] {
  --color-paper: var(--light-paper);
  --color-paper-2: var(--light-paper-2);
  --color-paper-3: var(--light-paper-3);
  --color-rule: var(--light-rule);
  --color-rule-strong: var(--light-rule-strong);
  --color-ink: var(--light-ink);
  --color-ink-2: var(--light-ink-2);
  --color-muted: var(--light-muted);
  --color-accent: var(--light-accent);
  --color-accent-ink: var(--light-paper);
  --color-accent-hover: var(--light-accent-hover);
  --color-accent-soft: var(--light-accent-soft);
  --color-focus: var(--light-accent);
  --color-ok: var(--light-ok);
  --color-ok-soft: var(--light-ok-soft);
  --color-nav: var(--light-nav);
  --color-nav-rule: var(--light-nav-rule);
  --color-log: var(--light-log);
  color: var(--color-ink-2);
  color-scheme: light;
}

.zone {
  --color-muted: var(--dark-muted);
  position: relative;
  padding-bottom: var(--space-4xl);
}

/* The band is the empty stretch where the pillars play out: the text never sits in it. */
.zone.zone-light {
  --color-muted: var(--light-muted);
}

.has-core .zone.zone-light {
  --band: 64svh;
  padding-block: var(--band) calc(var(--band) + var(--space-2xl));
}

.zone-light > .section:first-child {
  padding-top: var(--space-3xl);
}

/* The core paints light zones itself, per pixel. Until it confirms that, they carry a solid ground,
   so dark text never lands on the dark canvas: no WebGL2, forced colours, a lost context. */
html:not(.core-ready) .zone-light {
  background: var(--color-paper);
}

.zone + .contact {
  margin-top: 0;
}

/* Grid: a frame at the sides and an axis with marks where each section opens. */

.zone::before,
.contact::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(calc(var(--container) + var(--space-xl) * 2), calc(100% - var(--space-lg)));
  border-inline: 1px solid var(--color-rule);
  transform: translateX(-50%);
  pointer-events: none;
}

.zone > .section {
  position: relative;
}

.zone > .section::before {
  content: "";
  position: absolute;
  top: var(--space-2xl);
  left: 50%;
  width: min(calc(var(--container) + var(--space-xl) * 2), calc(100% - var(--space-lg)));
  height: 13px;
  transform-origin: 0 50%;
  background:
    linear-gradient(var(--color-rule), var(--color-rule)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 25% 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-rule-strong), var(--color-rule-strong)) 75% 0 / 1px 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}

.js .zone > .section::before {
  transform: translateX(-50%) scaleX(0);
  transition: transform 1.6s var(--ease-out);
}

.js .zone > .section[data-in]::before {
  transform: translateX(-50%) scaleX(1);
}

/* Text straight on the canvas keeps a shadow of the ground colour; panels do not need it. */
.has-core :is(.section, .contact, .footer) :is(h2, h3, p, dt, dd, th, td, li):not(.stage *, .plate *, .flows *, .contact-form *) {
  text-shadow: 0 0 14px var(--color-paper), 0 0 4px var(--color-paper);
}

/* Cursor: a dot that inverts itself with the ground */

.cx-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  width: var(--space-md);
  height: var(--space-md);
  margin: calc(var(--space-xs) * -1) 0 0 calc(var(--space-xs) * -1);
  border-radius: 50%;
  background: var(--color-ink);
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: opacity var(--dur-short) var(--ease-out), scale var(--dur-long) var(--ease-out);
}

.cx-dot[data-visible] {
  opacity: 1;
}

.cx-dot[data-over] {
  scale: 2.6;
}

/* The sphere swallows the cursor: the dot shrinks while it is inside. */
html[data-in-core] .cx-dot:not([data-over]) {
  scale: 0.4;
}

/* Responsive */

@media (max-width: 60rem) {
  /* On narrow screens the control is an icon, so it does not sit on top of the text. */
  .motion-toggle {
    right: var(--space-sm);
    bottom: var(--space-sm);
    display: grid;
    place-content: center;
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .motion-toggle::before {
    content: "";
    width: var(--space-sm);
    height: var(--space-sm);
    border-inline: var(--space-2xs) solid currentColor;
  }

  html[data-still] .motion-toggle::before {
    width: 0;
    height: 0;
    border-block: 7px solid transparent;
    border-inline: var(--space-sm) solid transparent;
    border-inline-start-color: currentColor;
    transform: translateX(25%);
  }

  .nav-links li:not(:last-child) {
    display: none;
  }

  .hero-media img {
    left: 0;
    height: 62%;
    object-position: 50% 50%;
  }

  .hero-media::after {
    background: linear-gradient(0deg, var(--color-veil-94) 0%, var(--color-veil-70) 40%, var(--color-veil-0) 62%);
    mask-image: none;
    -webkit-mask-image: none;
  }

  .zone::before,
  .contact::after {
    display: none;
  }

  .flows[data-ready] {
    grid-template-columns: minmax(0, 1fr);
  }

  .flow-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0;
    border-bottom: 1px solid var(--color-rule);
  }

  .flow-panel {
    padding: var(--space-lg);
  }

  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .flow::before,
  .flow::after {
    top: 6px;
    bottom: 6px;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .flow::after {
    transform: scaleY(0);
    transform-origin: 50% 0;
  }

  .flow-step {
    padding-top: 0;
    padding-left: var(--space-xl);
  }

  @keyframes flow-rail {
    to { transform: scaleY(1); }
  }

  .has-core .zone.zone-light {
    --band: 46svh;
  }

  .brand-sub {
    display: none;
  }

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

  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }

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

  .phases li,
  .phases li + li {
    padding: var(--space-lg) 0;
    border-left: 0;
    border-bottom: 1px solid var(--color-rule);
  }

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

  .processes thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .processes,
  .processes tbody,
  .processes tr,
  .processes td {
    display: block;
    width: 100%;
  }

  .processes tr {
    padding-block: var(--space-lg);
    border-bottom: 1px solid var(--color-rule);
  }

  .processes td,
  .processes td:first-child {
    width: 100%;
    padding: var(--space-2xs) 0;
    border: 0;
  }

  .processes td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
  }

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

  .section {
    padding-top: var(--space-3xl);
  }
}

@media (max-width: 30rem) {
  .plate {
    padding: var(--space-xl) var(--space-xs) var(--space-xl);
  }

  .plate-corner[data-corner="title"] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-dot {
    display: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
  }

  .js [data-reveal],
  .js .word-in,
  .js .processes tr[data-reveal],
  .js .refusals [data-reveal],
  .js [data-panel] {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .flow::after {
    transform: none;
  }

  .flows .flow-panel .flow::after,
  .flows .flow-panel .flow-step {
    animation: none !important;
  }

  .js .zone > .section::before {
    transform: translateX(-50%);
  }

  .has-core .zone.zone-light {
    --band: var(--space-2xl);
  }
}

/* Printing shows everything, scrolled into view or not. */

@media print {
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .js [data-reveal],
  .js .processes tr[data-reveal],
  .js .refusals [data-reveal],
  .js [data-panel],
  .js .word-in {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .has-core .zone.zone-light {
    padding-block: var(--space-xl);
    background: var(--color-paper);
    clip-path: none !important;
  }

  .core-canvas,
  .motion-toggle,
  .cx-dot,
  .flow-tabs {
    display: none !important;
  }

  .flows[data-ready] {
    display: block;
  }

  .flows[data-ready] .flow-panels {
    display: block;
  }

  .flows[data-ready] .flow-panel {
    visibility: visible;
  }
}