/* tokens.css */
/* Fuentio design tokens. Light theme only for now: a dark theme is one more block here. */
:root {
  /* Colour (brief §4.1). Three shades darkened a touch so every text pair passes WCAG AA,
     including on --spring-wash: muted #6B7486 → #626B7D, ok #1E7A4C → #1B7247, warn #9A6A00 → #8F6200. */
  --paper: #FBFAF7;
  --surface: #FFFFFF;
  --ink: #0E1A2B;
  --ink-hover: #1F3049;
  --text: #36435A;
  --muted: #626B7D;
  --rule: #E3DFD5;
  --spring: #0B6B6F;
  --spring-wash: #E8F2F1;
  --ok: #1B7247;
  --warn: #8F6200;
  --stop: #A23B32;

  /* Type (brief §4.2) */
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --measure: 68ch;

  /* Space and shape */
  --gutter: 16px;
  --wrap: 1160px;
  --radius: 3px;
  --radius-card: 6px;
  --shadow-card: 0 1px 0 rgba(14, 26, 43, 0.03), 0 22px 50px -22px rgba(14, 26, 43, 0.22);

  /* Motion (brief §4.5): transform and opacity only, 150–300 ms, ease-out */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 160ms;
  --slow: 260ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; }
}

/* fonts.css */
/* Self-hosted, SIL Open Font Licence (licences in /static/fonts). Latin subset: covers EN, FR, ES. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* Arial tuned to Inter's metrics, so text does not jump when Inter arrives. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.1%;
  ascent-override: 90.4%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* base.css */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p, ul, ol, figure { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; }

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

a {
  color: var(--spring);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(11, 107, 111, 0.4);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--spring);
  outline-offset: 3px;
  border-radius: 2px;
}
main:focus { outline: none; }

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

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
pre code { font-size: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* layout.css */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* A thin double rule, like the border of a certificate. */
.double-rule {
  height: 4px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---------------------------------------------------------------- Seal */
.seal {
  flex: none;
  width: 32px;
  height: 32px;
  overflow: visible;
}
.seal * { vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--paper);
}
.header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.brand .seal--header { width: 30px; height: 30px; }
.wordmark {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.015em;
  padding-bottom: 2px;
}

.main-nav { display: none; }
.main-nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
}
.main-nav a,
.footer-col a {
  position: relative;
  color: var(--text);
  text-decoration: none;
}
.main-nav a {
  display: inline-block;
  white-space: nowrap;
  padding-block: 8px;
  font-size: 0.9375rem;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--spring);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: var(--ink); }

.header-tools {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.header-tools .lang-switch { display: none; }

.lang-switch {
  display: flex;
  align-items: center;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.lang-switch li + li::before {
  content: "·";
  margin-inline: 7px;
  color: var(--muted);
}
.lang-switch a,
.lang-switch span {
  display: inline-block;
  padding-block: 6px;
  color: var(--text);
  text-decoration: none;
}
.lang-switch a:hover { color: var(--spring); }
.lang-switch [aria-current="true"] {
  color: var(--ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--spring);
  text-underline-offset: 0.35em;
}
.lang-switch .is-unavailable { color: var(--muted); cursor: default; }

/* Mobile menu: <details>, so it works without JavaScript. */
.menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius);
}
.menu summary::-webkit-details-marker { display: none; }
.menu-icon,
.menu-icon::before {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--ink);
  transition: transform var(--slow) var(--ease);
}
.menu-icon { position: relative; transform: translateY(-3px); }
.menu-icon::before { content: ""; position: absolute; top: 6px; }
.menu[open] .menu-icon { transform: translateY(0) rotate(45deg); }
.menu[open] .menu-icon::before { transform: translateY(-6px) rotate(-90deg); }
.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: 4px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 24px 40px -28px rgba(14, 26, 43, 0.25);
}
.menu-links { list-style: none; margin-bottom: 18px; }
.menu-links a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  text-decoration: none;
}
.menu-links a[aria-current="page"] { color: var(--spring); }

@media (max-width: 380px) {
  .header-bar .btn--small { padding-inline: 11px; font-size: 0.8125rem; }
  .wordmark { font-size: 1.375rem; }
}

@media (min-width: 1180px) {
  .header-bar { min-height: 76px; gap: 32px; }
  .main-nav { display: block; margin-left: auto; }
  .header-tools { margin-left: 0; }
  .header-tools .lang-switch { display: flex; }
  .menu { display: none; }
}

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(40px, 7vw, 96px);
}
.hero-inner { position: relative; }

/* Banknote guilloché: two faint rosettes turning in opposite directions. Each has 24-fold
   symmetry, so a 15° turn in 60 s loops without a seam. */
.guilloche {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}
.guilloche-layer {
  position: absolute;
  left: 96%;
  top: 150px;
  width: 1200px;
  max-width: none;
  height: 1200px;
  margin: -600px 0 0 -600px;
  will-change: transform;
}
.guilloche-layer--1 { opacity: 0.08; animation: guilloche-turn 60s linear infinite; }
.guilloche-layer--2 { opacity: 0.06; animation: guilloche-turn-back 60s linear infinite; }
@keyframes guilloche-turn { to { transform: rotate(15deg); } }
@keyframes guilloche-turn-back { to { transform: rotate(-15deg); } }
@media (min-width: 900px) {
  .guilloche-layer { left: 80%; top: 46%; }
}
@media (prefers-reduced-motion: reduce) {
  .guilloche-layer { animation: none; }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--spring);
}

.display {
  max-width: 15.5em;
  margin-top: 22px;
  font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.022em;
}
/* French and Spanish headlines run about 30% longer: a little smaller and wider, so the demo
   box stays above the fold. */
:lang(fr) .display, :lang(es) .display { max-width: 19em; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.5rem); }
.display-line { display: block; }
.display-line--second { margin-top: 0.08em; }
.display em {
  color: var(--spring);
  font-style: italic;
  font-weight: 450;
}
.fn-mark {
  position: relative;
  top: -1.55em;
  margin-left: 0.06em;
  padding: 0.2em 0.18em;
  color: var(--spring);
  font-family: var(--font-mono);
  font-size: 0.3em;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
}
.fn-mark:hover { text-decoration: underline; }

.lede {
  max-width: 40em;
  margin-top: 22px;
  color: var(--text);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.demo-slot {
  max-width: 860px;
  margin-top: clamp(28px, 4vw, 44px);
}

.footnote {
  display: flex;
  gap: 10px;
  max-width: 52em;
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.fn-num {
  flex: none;
  color: var(--spring);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.9;
}
.footnote a { white-space: nowrap; }

.guilloche-band {
  height: 22px;
  margin-top: clamp(56px, 8vw, 96px);
  background: url("/static/img/guilloche-band.svg") repeat-x center;
  opacity: 0.5;
}

/* ---------------------------------------------------------------- Sections */
.section {
  padding-block: clamp(44px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}
.hero + .section { border-top: 0; }
.section-num {
  color: var(--spring);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}
.section-title {
  margin-top: 8px;
  font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
}
.section-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- Simple pages */
.page-head { padding-top: clamp(48px, 9vw, 112px); }
.page-head .title {
  max-width: 18em;
  margin-top: 18px;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-head .lede + p { margin-top: 24px; }
.page-head--center { text-align: center; }
.page-head--center .eyebrow { justify-content: center; }
.page-head--center .title,
.page-head--center .lede { margin-inline: auto; }
.seal-404 { display: flex; justify-content: center; margin-bottom: 28px; color: var(--spring); }
.seal-404 .seal { width: 112px; height: 112px; stroke-width: 1.2px; }
.link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 22px;
  list-style: none;
}

/* ---------------------------------------------------------------- Footer */
.site-footer { margin-top: clamp(72px, 10vw, 128px); }
.footer-grid {
  display: grid;
  gap: 36px 24px;
  grid-template-columns: 1fr 1fr;
  padding-block: 48px 36px;
}
.footer-brand { grid-column: 1 / -1; }
.footer-brand .seal--footer { width: 28px; height: 28px; }
.footer-brand .wordmark { font-size: 1.375rem; }
.footer-brand p {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9375rem;
}
.footer-heading {
  margin-bottom: 14px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-col ul { display: grid; gap: 4px; list-style: none; }
.footer-col a { display: inline-block; padding-block: 5px; font-size: 0.9375rem; }
.footer-col a:hover { color: var(--spring); text-decoration: underline; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 32px;
  padding-block: 22px 44px;
  background: linear-gradient(var(--rule), var(--rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-claim {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
}
.footer-claim .seal--tiny { width: 22px; height: 22px; color: var(--spring); }
.footer-copy { margin-left: auto; }

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-claim { flex-basis: auto; }
}
@media (min-width: 1100px) {
  .footer-grid { grid-template-columns: 1.6fr 1fr 1.3fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

/* Language hint: fixed at the bottom, so it never moves the page. */
.lang-hint {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 16px;
  background: var(--ink);
  border-radius: 999px;
  box-shadow: 0 12px 30px -12px rgba(14, 26, 43, 0.5);
  font-size: 0.875rem;
  animation: hint-in 260ms var(--ease);
}
.lang-hint[hidden] { display: none; }
.lang-hint a { color: var(--paper); text-decoration: none; font-weight: 550; }
.lang-hint a:hover { text-decoration: underline; }
.lang-hint-close {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  font-size: 1.125rem;
  cursor: pointer;
}
.lang-hint-close:hover { background: rgba(251, 250, 247, 0.12); }
.lang-hint :focus-visible { outline-color: var(--paper); }
@keyframes hint-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* components.css */
/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--small { padding: 10px 14px; font-size: 0.875rem; }

/* demo.css */
/* ---------------------------------------------------------------- Demo box (brief W1 §6) */
.demo-slot--center { margin: 48px auto 0; text-align: left; }
.demo {
  position: relative;
  padding: clamp(16px, 2.6vw, 28px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.demo-label {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.demo-input-row { display: flex; gap: 8px; }
.demo-field { position: relative; flex: 1; min-width: 0; }
.demo-field input {
  width: 100%;
  height: 58px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.3rem;
  -webkit-appearance: none;
  appearance: none;
}
.demo-field input::placeholder { color: var(--muted); opacity: 1; }
.demo-field input::-webkit-search-cancel-button { display: none; }
.demo-field input:focus { outline: none; border-color: var(--spring); background: var(--surface); }
.demo-field input:focus-visible { outline: 2px solid var(--spring); outline-offset: 2px; }
/* Loading: a thin line traces the bottom of the input. */
.demo-progress {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 2px;
  background: var(--spring);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.is-busy .demo-progress { animation: demo-trace 420ms var(--ease) forwards; }
@keyframes demo-trace {
  from { transform: scaleX(0); opacity: 1; }
  to { transform: scaleX(1); opacity: 1; }
}
.demo-submit { height: 58px; padding-inline: 22px; font-size: 1rem; }

.demo-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-top: 14px;
}
.demo-countries { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.875rem;
}
.chip input:checked + span { border-color: var(--spring); background: var(--spring-wash); color: var(--ink); font-weight: 550; }
.chip input:focus-visible + span { outline: 2px solid var(--spring); outline-offset: 2px; }
.chip--planned { cursor: not-allowed; align-items: center; gap: 6px; }
.chip--planned span { border-style: dashed; color: var(--muted); }
.chip--planned small { color: var(--muted); font-size: 0.75rem; }

.demo-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; color: var(--muted); font-size: 0.8125rem; }
.demo-examples > span { margin-right: 6px; }
.demo-example {
  padding: 6px 8px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--spring);
  font: inherit;
  font-family: var(--font-mono);
  text-decoration: underline;
  text-decoration-color: rgba(11, 107, 111, 0.35);
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.demo-example:hover { text-decoration-color: currentColor; }
.demo-hint { margin-top: 10px; color: var(--muted); font-size: 0.8125rem; }

.demo-status:empty { display: none; }
.demo-status { margin-top: 18px; color: var(--text); font-size: 0.9375rem; }
.demo-status.is-note,
.demo-status.is-warn { padding: 12px 14px; border-left: 2px solid var(--spring); background: var(--spring-wash); color: var(--ink); }
.demo-status.is-warn { border-left-color: var(--warn); background: #FBF5E8; }

.demo-mode {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
}
.demo-mode a { white-space: nowrap; }

/* ---------------------------------------------------------------- Result rows */
.demo-list { margin-top: 12px; list-style: none; border-top: 1px solid var(--rule); }
.demo-list li { border-bottom: 1px solid var(--rule); }
.demo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 6px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.demo-row:hover { background: var(--paper); }
.demo-row-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.demo-row-name { color: var(--ink); font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.25; }
.demo-row-meta { color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px 10px 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 550;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--active { color: var(--ok); }
.pill--inactive, .pill--in_liquidation { color: var(--warn); }
.pill--dissolved, .pill--struck_off { color: var(--stop); }
.pill--unknown { color: var(--muted); }
.pill--unknown::before { background: transparent; border: 1px solid currentColor; }

/* ---------------------------------------------------------------- Record card */
.record { margin-top: 16px; }
.back {
  margin: 0 0 10px -6px;
  padding: 6px;
  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--spring);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.record-head { padding-bottom: 14px; border-bottom: 4px double var(--rule); }
.record-id { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.record-name {
  margin-top: 6px;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.mono { font-family: var(--font-mono); font-size: 0.92em; }

.views {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-top: 16px;
  padding: 3px;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.views [role="tab"] {
  flex: none;
  padding: 7px 14px;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.views [aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 550; box-shadow: 0 1px 2px rgba(14, 26, 43, 0.12); }

/* The ledger: a margin rail on the left; every field sits on it, the seal closes it. */
.ledger { position: relative; padding-left: 30px; }
.ledger::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 22px;
  bottom: 34px;
  width: 1px;
  background: var(--rule);
}
.trace {
  position: absolute;
  left: 11px;
  width: 1px;
  background: var(--spring);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--slow) var(--ease);
  pointer-events: none;
}
.is-tracing .trace { transform: scaleY(1); }
.record:not(.is-readable) .ledger { padding-left: 0; }
.record:not(.is-readable) .ledger::before { display: none; }
.record:not(.is-readable) .stamp { margin-left: 0; }

.fields { margin: 0; }
.field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 2px;
  cursor: default;
}
.field:focus { outline: none; }
.field:focus-visible { outline: 2px solid var(--spring); outline-offset: 2px; }
.field::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 17px;
  width: 7px;
  height: 7px;
  background: var(--surface);
  border: 1px solid #C9C3B5;
  border-radius: 50%;
}
.field.is-traced::before { background: var(--spring); border-color: var(--spring); }
.field dt { color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.field dd { display: grid; justify-items: start; gap: 3px; margin: 0; color: var(--ink); font-size: 0.9375rem; overflow-wrap: anywhere; }
.field .sub { color: var(--muted); font-size: 0.8125rem; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) {
  .field { grid-template-columns: 11rem minmax(0, 1fr); gap: 16px; align-items: baseline; }
}

.timeline { margin-top: 22px; }
.timeline-title { font-size: 1.125rem; }
.timeline-note { margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
.timeline ol { margin-top: 8px; list-style: none; }
.act { grid-template-columns: 6.5rem minmax(0, 1fr) !important; gap: 12px !important; }
.act-date { color: var(--muted); font-size: 0.75rem; padding-top: 2px; }
.act-body { display: grid; justify-items: start; gap: 2px; font-size: 0.9375rem; color: var(--ink); }
.act-original { color: var(--muted); font-size: 0.8125rem; font-style: italic; font-family: var(--font-serif); }
.act-link { font-size: 0.8125rem; }
.act-meta { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.more {
  margin-top: 10px;
  padding: 8px 14px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--spring);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.more:hover { border-color: var(--spring); }

/* The source stamp: thin double rule, small caps, the seal. It presses in when it appears. */
.stamp {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0 -30px;
  padding: 12px 4px 12px 0;
  border-block: 3px double var(--spring);
  color: var(--spring);
  animation: stamp-press 250ms var(--ease) both;
}
.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--spring-wash);
  opacity: 0;
  transition: opacity var(--slow) var(--ease);
}
.record { position: relative; isolation: isolate; }
.is-tracing .stamp::before { opacity: 1; }
.stamp .seal { width: 24px; height: 24px; color: var(--spring); background: var(--surface); border-radius: 50%; }
.stamp-text { font-size: 0.75rem; line-height: 1.6; letter-spacing: 0.02em; }
.stamp-k { font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
.stamp-sep { color: rgba(11, 107, 111, 0.55); }
.stamp a { color: inherit; font-weight: 550; white-space: nowrap; }
.fresh {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px dotted currentColor;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
@keyframes stamp-press {
  from { transform: scale(1.04); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.trace-hint { margin-top: 10px; color: var(--muted); font-size: 0.75rem; }
.record:not(.is-readable) .trace-hint { visibility: hidden; }

/* JSON and agent views */
.view { padding-top: 14px; }
.view--json, .view--agent { padding-bottom: 4px; }
.view-note { color: var(--muted); font-size: 0.8125rem; }
.view-k { margin-top: 14px; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.json, .agent-call {
  margin: 10px 0 0;
  padding: 14px 16px;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}
.json { max-height: 26rem; }
.j-key { color: var(--ink); }
.j-val { color: var(--spring); }
.agent-call { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-summary {
  margin: 10px 0 0;
  padding: 14px 16px;
  border-left: 2px solid var(--spring);
  background: var(--spring-wash);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.view--agent .view-note { margin-top: 10px; }
.soon {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
}

@media (max-width: 520px) {
  .demo-input-row { flex-direction: column; }
  .demo-submit { width: 100%; height: 50px; }
  .demo-field input { height: 54px; font-size: 1.2rem; }
  .ledger { padding-left: 24px; }
  .ledger::before, .trace { left: 8px; }
  .field::before { left: -19px; }
  .stamp { margin-left: -24px; }
  .stamp .seal { width: 18px; height: 18px; }
  .act { grid-template-columns: 1fr !important; gap: 2px !important; }
  .views { width: 100%; }
  .views [role="tab"] { flex: 1 1 auto; padding: 7px 6px; font-size: 0.78rem; }
  .record-id { font-size: 0.6875rem; }
}

/* workshop.css */
/* ---------------------------------------------------------------- The Workshop (addendum A) */
.workshop-title { max-width: 18em; }
.counter {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* Use-case finder: one line of chips, scrolls sideways on small screens. */
.finder { margin-top: 32px; }
.finder-label {
  margin-bottom: 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.125rem;
}
.use-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.use-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.use-chip:hover { border-color: var(--spring); color: var(--ink); }
.use-chip[aria-pressed="true"] { border-color: var(--spring); background: var(--spring-wash); color: var(--ink); font-weight: 550; }
@media (max-width: 720px) {
  .use-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .use-chips::-webkit-scrollbar { display: none; }
}
.workshop-status:empty { display: none; }
.workshop-status { margin-top: 14px; color: var(--muted); font-size: 0.875rem; }

/* The sheet: an album page with hairline guides. */
.sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 14px;
  margin-top: 22px;
  padding: 26px 14px 30px;
  list-style: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(227, 223, 213, 0.55) 39px 40px),
    #F7F4EE;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
@media (min-width: 760px) {
  .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; padding: 36px 30px 40px; }
}
@media (min-width: 1100px) {
  .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sheet[data-mode="featured"] .stamp-wrap:not(.is-featured) { display: none; }

/* A stamp: perforated edge (CSS mask), thin inner frame, value in the corner. */
.stamp-wrap {
  --tilt: 0deg;
  --nudge: 0px;
  position: relative;
  transform: rotate(var(--tilt)) translateY(var(--nudge));
  transition: transform 150ms var(--ease), opacity 220ms var(--ease);
  filter: drop-shadow(0 1px 1px rgba(14, 26, 43, 0.07)) drop-shadow(0 6px 12px rgba(14, 26, 43, 0.05));
}
.stamp-wrap::after {
  content: "";
  position: absolute;
  inset: 14px 10px 0;
  z-index: -1;
  box-shadow: 0 16px 26px -12px rgba(14, 26, 43, 0.4);
  opacity: 0;
  transition: opacity 150ms var(--ease);
}
.stamp-wrap:hover, .stamp-wrap:focus-within { transform: rotate(var(--tilt)) translateY(calc(var(--nudge) - 2px)); }
.stamp-wrap:hover::after, .stamp-wrap:focus-within::after { opacity: 1; }
.stamp-wrap.is-entering { opacity: 0; transform: rotate(var(--tilt)) translateY(calc(var(--nudge) + 8px)); }
.tilt-0 { --tilt: -0.9deg; --nudge: 0px; }
.tilt-1 { --tilt: 0.5deg; --nudge: 6px; }
.tilt-2 { --tilt: -0.3deg; --nudge: -3px; }
.tilt-3 { --tilt: 0.8deg; --nudge: 3px; }
.tilt-4 { --tilt: -0.6deg; --nudge: -5px; }
.tilt-5 { --tilt: 0.25deg; --nudge: 4px; }
.tilt-6 { --tilt: 0.9deg; --nudge: -2px; }
.tilt-7 { --tilt: -0.4deg; --nudge: 4px; }
@media (prefers-reduced-motion: reduce) {
  .stamp-wrap, .stamp-wrap::after { transition: none; }
}

.stamp-tile {
  --hole: 4px;
  --step: 13px;
  display: block;
  height: 100%;
  /* The edge band must stay narrower than (step - hole), or a second row of holes shows. */
  padding: 8px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  -webkit-mask:
    radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + 0.5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round,
    linear-gradient(#000 0 0) content-box;
  mask:
    radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + 0.5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round,
    linear-gradient(#000 0 0) content-box;
}
.stamp-tile:focus { outline: none; }
.stamp-tile:focus-visible .stamp-frame { outline: 2px solid var(--spring); outline-offset: 2px; }
.stamp-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 232px;
  padding: 11px 12px 52px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.stamp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.stamp-nr { padding-top: 3px; color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.04em; white-space: nowrap; }
.stamp-value { display: grid; justify-items: end; min-width: 0; text-align: right; line-height: 1.05; }
.stamp-value--text .stamp-value-main { font-size: 1.125rem; white-space: nowrap; }
.stamp-value-pre, .stamp-value-post { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.04em; }
.stamp-value-pre { text-transform: uppercase; letter-spacing: 0.12em; }
.stamp-value-main { color: var(--ink); font-family: var(--font-serif); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
.stamp-name {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.22;
}
.stamp-line { color: var(--text); font-size: 0.8125rem; line-height: 1.45; }
.stamp-soon {
  align-self: flex-start;
  padding: 2px 9px;
  border: 1px dashed var(--muted);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* Platform marks: round postmarks with fine cancellation waves (our own text, never logos). */
.stamp-marks {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  color: var(--spring);
  pointer-events: none;
}
.stamp-marks:not(:empty)::after {
  content: "";
  width: 52px;
  height: 20px;
  margin-right: -6px;
  background: url("/static/img/cancel-wave.svg") no-repeat center / contain;
  opacity: 0.55;
}
.cancel {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-left: -3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3px currentColor;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  opacity: 0.85;
  transform: rotate(-14deg);
}
.cancel:nth-child(2) { transform: rotate(9deg) translateY(-6px); }
.cancel:nth-child(3) { transform: rotate(-4deg) translateY(4px); }
.cancel--rapidapi { font-size: 0.42rem; letter-spacing: 0.02em; }
.cancel--apimarket { font-size: 0.42rem; letter-spacing: 0; text-align: center; line-height: 1.15; padding: 0 5px; }
.cancel--x402 { color: var(--ink); }
.cancel--soon { width: auto; height: auto; padding: 4px 8px; border-radius: 999px; box-shadow: none; border-style: dashed; transform: rotate(-6deg); }

/* Fuentio's own stamp: the company data, framed in the accent. */
.stamp-wrap--own .stamp-frame { background: var(--spring-wash); border-color: rgba(11, 107, 111, 0.45); }
.stamp-wrap--own .stamp-nr { color: var(--spring); }
.stamp-wrap--own .stamp-value-main { font-size: 1.0625rem; }
.stamp-seal { color: var(--spring); }
.stamp-seal .seal { width: 30px; height: 30px; }

@media (max-width: 520px) {
  .stamp-tile { --hole: 3.5px; --step: 11px; padding: 7px; }
  .stamp-frame { min-height: 214px; padding: 9px 9px 48px; }
  .stamp-name { font-size: 0.9375rem; }
  .stamp-line { font-size: 0.75rem; }
  .stamp-value-main { font-size: 1.125rem; }
  .stamp-top { flex-wrap: wrap; row-gap: 4px; }
  .stamp-value--text .stamp-value-main { font-size: 0.9375rem; }
  .stamp-value-pre { letter-spacing: 0.06em; }
  .stamp-wrap--own .stamp-top { flex-direction: column; }
  .stamp-wrap--own .stamp-value { justify-items: start; text-align: left; }
  .stamp-marks:not(:empty)::after { display: none; }
  .cancel { width: 40px; height: 40px; margin-left: -6px; }
  .cancel--rapidapi { font-size: 0.37rem; }
}

.sheet-foot { margin-top: 18px; }
.see-all { font-weight: 550; }

/* Recipe: stamps joined by the same fine teal line as field-to-source tracing. */
.recipe {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.recipe-title { margin-top: 12px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.recipe-flow {
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 22px;
  list-style: none;
}
.recipe-flow::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 24px;
  bottom: 24px;
  width: 1px;
  background: var(--spring);
}
.recipe-step { position: relative; display: grid; gap: 6px; padding-left: 40px; }
.recipe-step::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--spring);
}
.mini-stamp {
  --hole: 3px;
  --step: 12px;
  display: grid;
  gap: 2px;
  justify-self: start;
  max-width: 100%;
  padding: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  filter: drop-shadow(0 1px 1px rgba(14, 26, 43, 0.08));
  -webkit-mask: radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + 0.5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round, linear-gradient(#000 0 0) content-box;
  mask: radial-gradient(circle, #0000 var(--hole), #000 calc(var(--hole) + 0.5px)) calc(var(--step) / -2) calc(var(--step) / -2) / var(--step) var(--step) round, linear-gradient(#000 0 0) content-box;
}
.mini-stamp > span { padding-inline: 6px; }
.mini-stamp > span:first-child { padding-top: 2px; }
.mini-stamp > span:last-child { padding-bottom: 2px; }
.mini-stamp .mono { color: var(--muted); font-size: 0.6875rem; }
.mini-name { font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.25; }
.mini-stamp--own { background: var(--spring-wash); }
.mini-stamp--own .mono { color: var(--spring); }
.recipe-text { color: var(--text); font-size: 0.875rem; }
@media (min-width: 900px) {
  .recipe-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  .recipe-flow::before { left: 24px; right: 24px; top: 30px; bottom: auto; width: auto; height: 1px; }
  .recipe-step { padding-left: 0; align-content: start; }
  .recipe-step::before { display: none; }
  .mini-stamp { min-height: 62px; }
}
.recipe-note { margin-top: 20px; color: var(--muted); font-size: 0.875rem; }

/* Agent-ready strip */
.agent-strip {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  padding: 18px 20px;
  border-block: 3px double rgba(11, 107, 111, 0.5);
  color: var(--text);
}
.agent-strip > .seal { width: 26px; height: 26px; color: var(--spring); margin-top: 2px; }
.agent-strip-title { color: var(--ink); font-family: var(--font-serif); font-size: 1.125rem; }
.agent-strip ul { display: grid; gap: 8px; margin-top: 10px; list-style: none; font-size: 0.875rem; }
.agent-strip li { position: relative; padding-left: 16px; }
.agent-strip li::before { content: "·"; position: absolute; left: 4px; color: var(--spring); font-weight: 700; }
.agent-strip code {
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* workshop-page.css */
/* ---------------------------------------------------------------- The Workshop page (step 5) */
.names-line { max-width: 44em; margin-top: 10px; color: var(--muted); font-size: 0.875rem; }
.names-line em { color: var(--ink); font-style: italic; font-family: var(--font-serif); font-size: 1.05em; }
.platform-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.platform-label { margin-right: 6px; color: var(--muted); font-size: 0.8125rem; }
.platform-chip {
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-decoration: none;
}
.platform-chip:hover { border-color: var(--spring); color: var(--ink); }
.platform-chip[aria-pressed="true"] { border-color: var(--spring); background: var(--spring-wash); color: var(--ink); }
.open-hint { margin-top: 8px; color: var(--muted); font-size: 0.8125rem; }
.workshop-clear {
  margin-left: 8px;
  padding: 3px 10px;
  background: none;
  border: 1px solid var(--spring);
  border-radius: 999px;
  color: var(--spring);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.terms-note { margin-top: 28px; }
.recipe + .recipe { margin-top: 36px; }
@media (min-width: 900px) {
  .recipe-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The drawer: a side panel on wide screens, a sheet from the bottom on phones. */
.drawer {
  width: min(760px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--rule);
  background: var(--paper);
  color: var(--text);
  box-shadow: -24px 0 60px -30px rgba(14, 26, 43, 0.35);
}
.drawer::backdrop { background: rgba(14, 26, 43, 0.32); }
.drawer[open] { animation: drawer-in 240ms var(--ease); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drawer-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-inner { height: 100%; overflow-y: auto; padding: 0 clamp(18px, 3vw, 32px) 32px; }
.drawer-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 calc(-1 * clamp(18px, 3vw, 32px)) 18px;
  padding: 12px clamp(18px, 3vw, 32px);
  background: var(--paper);
  border-bottom: 4px double var(--rule);
  font-size: 0.875rem;
}
.drawer-close {
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.drawer-close:hover { border-color: var(--ink); }
.drawer-nr { color: var(--spring); font-size: 0.75rem; letter-spacing: 0.04em; }
.drawer-name { margin-top: 6px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
.drawer-summary { margin-top: 10px; color: var(--text); }
@media (max-width: 720px) {
  .drawer { width: 100vw; height: 92dvh; margin: auto 0 0; border-left: 0; border-top: 1px solid var(--rule); border-radius: 12px 12px 0 0; }
  .drawer[open] { animation-name: drawer-up; }
}
.tool-for { margin-top: 12px; color: var(--text); font-size: 0.9375rem; }
.tool-for-k { display: block; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }

/* "In → Out": the input card, a fine teal line, the output card. Stacked in the drawer,
   side by side on a wide tool page. */
.tool-detail { margin-top: 22px; }
.inout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
.io { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.io-k { color: var(--muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.io-sub { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; }
.io-code {
  max-height: 22rem;
  margin: 10px 0 0;
  padding: 12px 14px;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.55;
}
.io-fields { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; list-style: none; }
.io-fields code { display: inline-block; padding: 3px 8px; background: var(--spring-wash); border-radius: 2px; color: var(--ink); font-size: 0.75rem; }
.io-line { position: relative; display: block; justify-self: center; width: 1px; height: 28px; background: var(--spring); transform-origin: top; }
.io-line::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--spring);
  border-bottom: 1px solid var(--spring);
  transform: rotate(45deg);
}
@media (min-width: 900px) {
  .tool-page-detail .inout { grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: start; }
  .tool-page-detail .io-line { align-self: center; width: 100%; height: 1px; transform-origin: left; }
  .tool-page-detail .io-line::after { left: auto; right: 0; bottom: -3px; transform: rotate(-45deg); }
}
/* The animation plays when the drawer opens, or once on a tool page. */
.tool-detail .io { transition: opacity 260ms var(--ease), transform 260ms var(--ease); }
.tool-detail .io-line { transition: transform 240ms var(--ease) 180ms; }
.tool-detail:not(.is-playing) .io--in { opacity: 0; transform: translateX(-14px); }
.tool-detail:not(.is-playing) .io--out { opacity: 0; transform: translateX(14px); }
.tool-detail .io--out { transition-delay: 380ms; }
.drawer .tool-detail:not(.is-playing) .io-line { transform: scaleY(0); }
.tool-page-detail .io--in { animation: io-in 260ms var(--ease) both; }
.tool-page-detail .io-line { animation: io-line 240ms var(--ease) 180ms both; }
.tool-page-detail .io--out { animation: io-out 260ms var(--ease) 380ms both; }
@keyframes io-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes io-out { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes io-line { from { transform: scale(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tool-detail .io, .tool-detail .io-line { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
}

.tool-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
@media (min-width: 900px) {
  .tool-page-detail .tool-blocks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tool-block { min-width: 0; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.tool-prices { display: grid; gap: 6px; margin-top: 10px; list-style: none; color: var(--ink); font-size: 0.9375rem; }
.tool-prices li { padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.tool-prices code { padding: 0 4px; background: var(--paper); border: 1px solid var(--rule); border-radius: 2px; font-size: 0.8125rem; }
.tool-notes { display: grid; gap: 4px; margin-top: 10px; padding-left: 16px; color: var(--muted); font-size: 0.8125rem; }
.tool-notes-text { margin-top: 8px; color: var(--muted); font-size: 0.8125rem; }
.tool-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tool-buttons .btn { white-space: normal; }
.btn--disabled { border: 1px dashed var(--muted); color: var(--muted); background: transparent; cursor: not-allowed; }
.tool-block .soon { margin-top: 12px; }
.tool-legal { display: grid; gap: 4px; margin-top: 16px; color: var(--muted); font-size: 0.8125rem; }

/* Tool page */
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.tool-grid > * { min-width: 0; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: minmax(0, 1fr) 280px; } }
.crumbs { margin-bottom: 18px; color: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; }
.crumbs a { color: var(--spring); }
.sheet--single { grid-template-columns: minmax(0, 260px) !important; justify-content: center; margin-top: 0; }
.related { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; list-style: none; }
.back-link { margin-top: 24px; }

/* home.css */
/* ---------------------------------------------------------------- Home sections */
.section-num { letter-spacing: 0.02em; }
.section-lede {
  max-width: 44em;
  margin-top: 14px;
  color: var(--text);
  font-size: 1.0625rem;
}
.btn--quiet { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--quiet:hover { background: var(--ink); color: var(--paper); }

/* § 03 What's in every answer: the record with numbered markers, the notes beside it. */
.answer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 32px; align-items: start; }
@media (min-width: 960px) {
  .answer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; }
}
.record--static {
  margin: 0;
  padding: clamp(16px, 2.4vw, 26px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.record--static .record-name {
  margin-top: 6px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
}
.record--static .ledger { margin-top: 6px; }
.record--static .stamp { animation: none; }
.has-marker::before { display: none; }
.marker {
  position: absolute;
  left: -28px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--spring);
  color: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0;
}
.marker--stamp { left: auto; right: 0; top: -10px; }
@media (max-width: 520px) {
  .marker { left: -24px; }
  .marker--stamp { left: auto; }
}

.answer-notes { display: grid; gap: 18px; list-style: none; counter-reset: note; }
.answer-notes li { position: relative; padding-left: 34px; counter-increment: note; }
.answer-notes li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--spring);
  border-radius: 50%;
  color: var(--spring);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
.note-title { color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.note-text { margin-top: 2px; color: var(--text); font-size: 0.9375rem; }
.answer-spain { margin-top: 24px; color: var(--muted); font-size: 0.875rem; }

/* § 04 Coverage */
.coverage-grid { display: grid; gap: 16px; margin-top: 28px; list-style: none; }
@media (min-width: 860px) {
  .coverage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cov {
  padding: 20px 20px 22px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px double var(--spring);
  border-radius: 2px;
}
.cov--planned { background: transparent; border-style: dashed; border-top: 3px double var(--rule); }
.cov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cov-country { color: var(--ink); font-family: var(--font-serif); font-size: 1.5rem; }
.cov-level { margin-top: 6px; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cov-text { margin-top: 10px; color: var(--text); font-size: 0.9375rem; }

/* § 05 For AI agents */
.agents-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.agents-grid > *, .answer-grid > * { min-width: 0; }
@media (min-width: 960px) {
  .agents-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
}
.tools-title { margin-top: 26px; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.mcp-tools { display: grid; gap: 10px; margin-top: 10px; list-style: none; }
.mcp-tools li { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.mcp-tools code { color: var(--spring); font-size: 0.875rem; }
.mcp-tools span { color: var(--text); font-size: 0.9375rem; }
.agents-more { margin-top: 18px; }
.snippets {
  padding: clamp(16px, 2.4vw, 24px);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
.snippet-label { margin-top: 16px; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.snippets .soon + .snippet-label { margin-top: 14px; }
.snippet {
  margin: 8px 0 0;
  padding: 12px 14px;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.55;
}
.snippet-note { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; }

/* § 06 Founding Pro: a certificate */
.certificate {
  max-width: 760px;
  margin-inline: auto;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-card);
}
.certificate-inner {
  position: relative;
  padding: clamp(48px, 6vw, 60px) clamp(18px, 5vw, 56px) clamp(52px, 6vw, 60px);
  border: 4px double rgba(11, 107, 111, 0.55);
  text-align: center;
  background:
    url("/static/img/guilloche-band.svg") repeat-x top 10px center,
    url("/static/img/guilloche-band.svg") repeat-x bottom 10px center;
}
.certificate-seal { display: flex; justify-content: center; margin-bottom: 18px; color: var(--spring); }
.certificate-seal .seal { width: 64px; height: 64px; stroke-width: 1.1px; }
.certificate .section-title { margin-top: 8px; }
.price { margin-top: 18px; color: var(--ink); }
.price-amount { font-family: var(--font-serif); font-size: clamp(3rem, 2.2rem + 3vw, 4.25rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.price-per { color: var(--muted); font-size: 1rem; }
.certificate-terms { display: grid; gap: 8px; max-width: 30em; margin: 22px auto 0; list-style: none; }
.certificate-terms li { padding-bottom: 8px; border-bottom: 1px solid var(--rule); color: var(--text); font-size: 0.9375rem; }
.certificate-terms li:last-child { border-bottom: 0; color: var(--spring); font-style: italic; font-family: var(--font-serif); font-size: 1rem; }
.certificate-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: 22px; }
.certificate-vat { margin-top: 14px; color: var(--muted); font-size: 0.75rem; }

/* § 07 Custom work */
.custom-inner .btn { margin-top: 20px; }

/* "Also from us": one quiet line to the tools page, right after the hero. */
.also { padding-block: 22px; border-bottom: 1px solid var(--rule); }
.also-line { font-size: 0.9375rem; }
.also-line a { color: var(--text); text-decoration-color: rgba(11, 107, 111, 0.4); }
.also-line a:hover { color: var(--spring); }
.also + .section { border-top: 0; }

/* pages.css */
/* ---------------------------------------------------------------- Product pages (step 4) */
.page-head--wide .title { max-width: 22em; }
.page-head--wide .lede { max-width: 44em; }
.section--first { border-top: 0; }
.section-title--small { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.section-title--small + .demo-slot { margin-top: 16px; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 56px; }
@media (min-width: 900px) {
  .two-col { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: start; }
}
.two-col > * { min-width: 0; }

/* Tables: a printed register, hairlines only. */
.table-wrap { margin-top: 24px; overflow-x: auto; border-top: 2px solid var(--ink); }
.fields-table, .side-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fields-table th, .fields-table td, .side-table th, .side-table td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.fields-table thead th, .side-table thead th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fields-table tbody th, .side-table tbody th { color: var(--ink); font-weight: 600; }
.fields-table td { color: var(--text); }
.fields-table .c { width: 7.5rem; text-align: center; }
.group-row th {
  padding-top: 22px;
  color: var(--spring) !important;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tick { color: var(--ok); font-weight: 700; }
.dash { color: var(--muted); font-size: 0.8125rem; }
.table-note { margin-top: 12px; color: var(--muted); font-size: 0.8125rem; }
.side-table td { color: var(--text); }
.side-table thead th:not(:first-child) { color: var(--ink); font-family: var(--font-serif); font-size: 1.125rem; letter-spacing: 0; text-transform: none; }
.sub { display: block; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
@media (max-width: 640px) {
  .fields-table thead { display: none; }
  .fields-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .fields-table th, .fields-table td { padding: 2px 0; border: 0; }
  .fields-table tbody th, .fields-table td:nth-child(2) { grid-column: 1 / -1; }
  .fields-table .c { width: auto; text-align: left; font-size: 0.8125rem; }
  .fields-table td.c:nth-child(3)::before { content: "FR · "; color: var(--muted); font-family: var(--font-mono); }
  .fields-table td.c:nth-child(4)::before { content: "ES · "; color: var(--muted); font-family: var(--font-mono); }
  .group-row { display: block !important; }
}

/* Identifier cards */
.id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 24px; list-style: none; }
.id-card { padding: 18px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px double var(--spring); }
.id-name { color: var(--ink); font-weight: 600; }
.id-country { margin-left: 6px; color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.id-format { margin-top: 4px; color: var(--text); font-size: 0.875rem; }
.id-example { margin-top: 12px; color: var(--spring); font-size: 1rem; letter-spacing: 0.04em; }

/* Lists */
.rule-list { display: grid; list-style: none; border-top: 1px solid var(--rule); }
.rule-list li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--rule); color: var(--text); }
.rule-list li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 7px; height: 7px; border: 1px solid var(--spring); border-radius: 50%; }
.rule-list--soon li::before { border-style: dashed; border-color: var(--muted); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 24px; list-style: none; }
.plain-card { padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: 2px; color: var(--text); font-size: 0.9375rem; }
.plain-card-title { margin-bottom: 6px; color: var(--ink); font-family: var(--font-serif); font-size: 1.1875rem; }
.steps { display: grid; gap: 14px; margin-top: 24px; list-style: none; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { position: relative; padding: 52px 20px 20px; background: var(--surface); border: 1px solid var(--rule); counter-increment: step; color: var(--text); font-size: 0.9375rem; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 16px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--spring);
  border-radius: 50%;
  color: var(--spring);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.step-title { margin-bottom: 4px; color: var(--ink); font-weight: 600; }

.cta-band { background: var(--surface); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 18px; }

/* Agents page */
.notice { max-width: 44em; margin-top: 24px; padding: 14px 18px; border-left: 2px solid var(--muted); background: var(--surface); color: var(--text); font-size: 0.9375rem; }
.notice-title { margin-bottom: 6px; }
.setup-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; list-style: none; }
@media (min-width: 900px) { .setup-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.setup { min-width: 0; padding: 18px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); }
.setup-name { color: var(--ink); font-family: var(--font-serif); font-size: 1.1875rem; }
.setup-note { margin-top: 2px; color: var(--muted); font-size: 0.8125rem; }
.tool-list { display: grid; margin-top: 20px; list-style: none; border-top: 1px solid var(--rule); }
.tool-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tool-sig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 2px; }
.tool-name { color: var(--spring); font-size: 1rem; font-weight: 500; }
.tool-args { color: var(--muted); font-size: 0.8125rem; overflow-wrap: anywhere; }
.tool-cost { margin-left: auto; padding: 1px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--text); font-size: 0.75rem; }
.tool-text { margin-top: 4px; color: var(--text); font-size: 0.9375rem; }
.sees { max-width: 760px; margin-top: 18px; }
.error-list { display: grid; border-top: 1px solid var(--rule); }
.error-list > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.error-list dt code { color: var(--ink); font-size: 0.875rem; }
.error-list dd { margin: 0; color: var(--text); font-size: 0.9375rem; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; list-style: none; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.plan--founding { border: 4px double rgba(11, 107, 111, 0.6); background: linear-gradient(var(--spring-wash), var(--surface) 55%); }
.plan-seal { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--spring); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.plan-seal .seal { width: 22px; height: 22px; }
.plan-name { font-size: 1.375rem; }
.plan-price { margin-top: 10px; color: var(--ink); }
.plan-amount { font-family: var(--font-serif); font-size: 2.25rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.plan-per { color: var(--muted); font-size: 0.875rem; }
.plan-units { margin-top: 8px; color: var(--ink); font-size: 0.9375rem; font-weight: 550; }
.plan-note { margin-top: 6px; color: var(--text); font-size: 0.875rem; }
.plan-cta { margin-top: auto; padding-top: 18px; }
.plan-cta .btn { width: 100%; white-space: normal; text-align: center; }
.pricing-notes { display: grid; gap: 8px; margin-top: 22px; }
.units-line { color: var(--ink); }
.stamp-line-note { display: flex; align-items: center; gap: 8px; color: var(--spring); font-family: var(--font-serif); font-style: italic; }
.stamp-line-note .seal { width: 20px; height: 20px; }
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  position: relative;
  padding: 16px 36px 16px 0;
  color: var(--ink);
  font-weight: 550;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 13px; color: var(--spring); font-size: 1.25rem; transition: transform var(--fast) var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 36px 18px 0; color: var(--text); font-size: 0.9375rem; }

/* Sources page */
.source-block { margin-top: 28px; padding: clamp(18px, 3vw, 30px); background: var(--surface); border: 1px solid var(--rule); border-top: 3px double var(--spring); }
.source-country { color: var(--spring); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.source-name { margin-top: 6px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); }
.source-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; font-size: 0.875rem; }
.source-facts { display: grid; margin-top: 18px; border-top: 1px solid var(--rule); }
.source-facts > div { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .source-facts > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 18px; } }
.source-facts dt { color: var(--muted); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 3px; }
.source-facts dd { margin: 0; color: var(--text); font-size: 0.9375rem; }
.source-facts ul { display: grid; gap: 4px; padding-left: 18px; }
.not-list { list-style: "– "; }
.ref-table th a { font-weight: 600; }
.ref-table thead th:not(:first-child) { color: var(--muted); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Form */
.form-wrap { max-width: 760px; }
.contact-form { margin-top: 24px; padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.form-founding { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 14px; background: var(--spring-wash); border-left: 2px solid var(--spring); color: var(--ink); font-size: 0.9375rem; }
.form-founding .seal { width: 22px; height: 22px; color: var(--spring); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 18px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-field--wide { grid-column: 1 / -1; } }
.form-field { display: grid; gap: 6px; }
.form-field label { color: var(--ink); font-size: 0.875rem; font-weight: 550; }
.opt { color: var(--muted); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--spring); outline-offset: 1px; border-color: var(--spring); background: var(--surface); }
.form-field [aria-invalid="true"] { border-color: var(--stop); }
.form-hint { color: var(--muted); font-size: 0.8125rem; }
.form-error:empty { display: none; }
.form-error { color: var(--stop); font-size: 0.875rem; font-weight: 550; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { margin-top: 18px; color: var(--text); font-size: 0.875rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.form-note { color: var(--muted); font-size: 0.8125rem; }
.form-alert:empty { display: none; }
.form-alert { margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--warn); background: #FBF5E8; color: var(--ink); font-size: 0.875rem; }
.cf-turnstile { margin-top: 16px; }
.form-thanks { display: grid; gap: 6px; color: var(--text); }
.form-thanks:focus { outline: none; }
.form-thanks-title { color: var(--ink); font-family: var(--font-serif); font-size: 1.5rem; }

/* Legal pages: a printed document, comfortable to read. */
.legal { max-width: 46em; color: var(--text); }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); letter-spacing: -0.02em; }
.legal h1 + p { margin-top: 8px; color: var(--muted); font-size: 0.875rem; }
.legal h2 { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 1.5rem; }
.legal p, .legal ul { margin-top: 14px; }
.legal ul { display: grid; gap: 6px; padding-left: 20px; }
.legal-note { padding: 12px 14px; border-left: 2px solid var(--spring); background: var(--spring-wash); color: var(--ink); font-size: 0.9375rem; }
.pending { padding: 1px 6px; background: #FBF1D9; border: 1px dashed var(--warn); border-radius: 2px; color: var(--ink); font-size: 0.9em; }