/* GENERATED by scripts/site/brand-tokens.ts from Loom Base's Selvedge tokens (packages/base/tokens).
   Do not edit: change a role in apps/showcase/site/brand/brand.ts, or a value in Loom Base.
   The rules for using these tokens: apps/showcase/site/BRAND.md. */

/* Fonts (SIL OFL, self-hosted; licences in /fonts/OFL-*.txt). */
@font-face { font-family: "Archivo"; src: url(/fonts/archivo-var.woff2) format("woff2"); font-weight: 400 900; font-stretch: 88% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Martian Mono"; src: url(/fonts/martian-mono-var.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Loom JP Display"; src: url(/fonts/noto-sans-jp-900-display.woff2) format("woff2"); font-weight: 900; font-style: normal; font-display: optional; }
@font-face { font-family: "Archivo Wide Fallback"; src: local("Arial Black"), local("Arial Bold"), local("Arial"), local("Liberation Sans"); size-adjust: 104%; ascent-override: 88%; descent-override: 22%; }
@font-face { font-family: "Atkinson Fallback"; src: local("Verdana"), local("Arial"), local("Liberation Sans"); size-adjust: 96%; ascent-override: 92%; descent-override: 24%; }

:root {
  --cotton: #f3eee3;
  --surface: #fbf8f1;
  --surface-2: #ebe4d6;
  --surface-3: #e2d9c8;
  --ink: #17140f;
  --ink-2: #4a443a;
  --line: #d1c6b2;
  --line-strong: #716856;
  --focus: #1e2a78;
  --link: #1e2a78;
  --indigo: #1e2a78;
  --madder: #b02a1e;
  --saffron: #e9a21b;
  --teal: #0b6b66;
  --field-ink: #17140f;
  --on-dye: #f3eee3;
  --on-dye-2: #e2d9c8;
  --on-saffron: #17140f;
  --on-saffron-2: #26221c;
  --indigo-ink: #1e2a78;
  --madder-ink: #b02a1e;
  --teal-ink: #0b6b66;
  --saffron-ink: #7a5206;
  --indigo-2: #6f7fe0;
  --madder-2: #d4574a;
  --saffron-2: #f3bb4c;
  --teal-2: #1d948c;
  --indigo-soft: #eceefa;
  --madder-soft: #fbecea;
  --saffron-soft: #fdf4e1;
  --teal-soft: #e3f3f1;
  --band-woven: #1e2a78;
  --band-holding: #0b6b66;
  --band-shape: #9e6b08;
  --band-loose: #b02a1e;
  --ai: #826bab;
  --ai-ink: #4d386f;
  --term-bg: #17140f;
  --term-fg: #ebe4d6;
  --term-muted: #b3a892;
  --term-accent: #c3c9ef;
  --term-add: #94d1ca;
  --term-del: #efb3ab;
  --sample-1: #0d1c58;
  --sample-2: #3f6bdc;
  --sample-3: #f5ab77;
  --sample-4: #f6f1e7;
  --sample-on: #ffffff;
  --font-display: Archivo, "Archivo Wide Fallback", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Fallback", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-display-ja: "Loom JP Display", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-sample: "Helvetica Neue", "Segoe UI", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --fs-display: clamp(2.25rem, 7.2vw, 6rem);
  --fs-h2: clamp(1.875rem, 4.4vw, 3.5rem);
  --fs-h3: clamp(1.25rem, 1.2rem + .4vw, 1.5rem);
  --fs-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;
  --type-display: expanded 900 var(--fs-display)/0.9 var(--font-display);
  --ls-display: -0.02em;
  --type-h1: expanded 900 var(--fs-display)/0.9 var(--font-display);
  --ls-h1: -0.02em;
  --type-h2: expanded 800 var(--fs-h2)/1 var(--font-display);
  --ls-h2: -0.02em;
  --type-h3: semi-expanded 800 var(--fs-h3)/1.2 var(--font-display);
  --ls-h3: -0.01em;
  --type-lede: normal 400 var(--fs-h3)/1.4 var(--font-text);
  --ls-lede: 0em;
  --type-body: normal 400 var(--fs-body)/1.6 var(--font-text);
  --ls-body: 0em;
  --type-strong: normal 700 var(--fs-body)/1.4 var(--font-text);
  --ls-strong: 0em;
  --type-small: normal 400 var(--fs-small)/1.5 var(--font-text);
  --ls-small: 0em;
  --type-small-strong: normal 700 var(--fs-small)/1.4 var(--font-text);
  --ls-small-strong: 0em;
  --type-label: normal 600 var(--fs-label)/1.4 var(--font-mono);
  --ls-label: 0em;
  --type-figure: normal 500 var(--fs-small)/1.6 var(--font-mono);
  --ls-figure: 0em;
  --weight-strong: 700;
  --weight-heavy: 800;
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --columns: 12;
  --w-max: 1240px;
  --w-text: 720px;
  --w-narrow: 560px;
  --gutter: 16px;
  --grid-gap: 24px;
  --header-h: 64px;
  --section: clamp(64px, 10vw, 160px);
  --radius: 2px;
  --radius-round: 9999px;
  --radius-sample: 6px;
  --rule-hair: 2px;
  --rule: 4px;
  --rule-frame: 6px;
  --rule-heavy: 8px;
  --shadow-float: 0px 16px 48px 0px #13110f1f;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --dur-fast: 100ms;
  --dur-moderate: 160ms;
  --dur-slow: 240ms;
  --dur-weave: 360ms;
  --stagger: 60ms;
  --selvedge-row: 6px;
  --selvedge-square: 12px;
  --selvedge-height: 18px;
  color-scheme: light;
}
@media (min-width: 960px) {
  :root {
    --header-h: 80px;
    --gutter: 40px;
    --grid-gap: 32px;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --cotton: #17140f;
    --surface: #26221c;
    --surface-2: #0d0b08;
    --surface-3: #38332b;
    --ink: #ebe4d6;
    --ink-2: #b3a892;
    --line: #38332b;
    --line-strong: #8f8571;
    --focus: #9aa5e6;
    --link: #9aa5e6;
    --field-ink: #0d0b08;
    --indigo-ink: #9aa5e6;
    --madder-ink: #e3877a;
    --teal-ink: #94d1ca;
    --saffron-ink: #f3bb4c;
    --indigo-soft: #151d55;
    --madder-soft: #4c110b;
    --saffron-soft: #3a2603;
    --teal-soft: #042a28;
    --ai: #a18bca;
    --ai-ink: #dfd0ff;
    --term-bg: #0d0b08;
    --shadow-float: 0px 16px 48px 0px #00000099;
    color-scheme: dark;
  }
}

/* Loom brand · site component library.
   Reads only the generated tokens (tokens.css, from Loom Base Selvedge). Every page template, the health
   check, the contact page, the wow pages, the 404 and the product tour shell use these components; page
   stylesheets add layout, never new values. Rules and examples: apps/showcase/site/BRAND.md.
   Contents: base · type · layout · selvedge edge · buttons and links · label and status word · fields ·
   header · drawer · footer · section · card · figure frame · stat · table · callout · form controls ·
   breadcrumbs · index rows · FAQ · motion. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--cotton); color: var(--ink);
  font: var(--type-body); letter-spacing: var(--ls-body); font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; }
h1 { hyphens: auto; }
p, li { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-2); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-small); overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius); }
main:focus, h1:focus, h2:focus { outline: none; }
::selection { background: var(--saffron); color: var(--on-saffron); }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: var(--space-5); top: calc(-1 * var(--space-13)); z-index: 100; padding: var(--space-5) var(--space-6); background: var(--ink); color: var(--cotton); font: var(--type-strong); text-decoration: none; }
.skip-link:focus { top: var(--space-5); }
:lang(ja) { line-break: strict; word-break: auto-phrase; overflow-wrap: anywhere; font-synthesis: weight; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { letter-spacing: 0; font-stretch: normal; word-break: keep-all; overflow-wrap: anywhere; }
:lang(ja) em { font-style: normal; }

/* ---------- Type roles (six sizes: display, h2, h3, body, small, label) ---------- */
h1, .display { font: var(--type-h1); letter-spacing: var(--ls-h1); }
h2, .h2 { font: var(--type-h2); letter-spacing: var(--ls-h2); }
h3, .h3 { font: var(--type-h3); letter-spacing: var(--ls-h3); }
h4, h5 { font: var(--type-strong); }
.lede { font: var(--type-lede); letter-spacing: var(--ls-lede); max-width: 46ch; }
.small, .note-small, .source { font: var(--type-small); color: var(--ink-2); }
.note-small a, .source a { color: var(--ink); }
.label { font: var(--type-label); letter-spacing: var(--ls-label); }
.figure-num { font: var(--type-figure); font-variant-numeric: tabular-nums; }
strong, b { font-weight: var(--weight-strong); }
:lang(ja) h1, :lang(ja) .display { font-weight: var(--weight-heavy); line-height: 1.2; }

/* ---------- Layout: one frame, a 12-column grid, fixed content widths ---------- */
.wrap { width: 100%; max-width: calc(var(--w-max) + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
@media (min-width: 960px) {
  .grid { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); }
  .grid > * { grid-column: span var(--span, 12); }
}
.measure { max-width: var(--w-text); }
.measure-narrow { max-width: var(--w-narrow); }

/* ---------- The selvedge edge: the one woven motif. Same size everywhere: three rows, 12px squares. ----------
   Where: the foot of a colour field (the fell, a field card, the call to action) and the top of the footer.
   Never under the header, never as a divider inside text, never as filler. Its colour is the next thread. */
.selvedge {
  --edge: var(--madder);
  display: block; height: var(--selvedge-height); background-color: var(--cotton);
  background-image:
    repeating-linear-gradient(90deg, var(--edge) 0 var(--selvedge-square), transparent 0 calc(2 * var(--selvedge-square))),
    repeating-linear-gradient(90deg, transparent 0 var(--selvedge-square), var(--edge) 0 calc(2 * var(--selvedge-square))),
    repeating-linear-gradient(90deg, var(--edge) 0 var(--selvedge-square), transparent 0 calc(2 * var(--selvedge-square)));
  background-size: 100% var(--selvedge-row);
  background-position: 0 0, 0 var(--selvedge-row), 0 calc(2 * var(--selvedge-row));
  background-repeat: no-repeat;
}
.selvedge[data-next="indigo"] { --edge: var(--indigo); }
.selvedge[data-next="madder"] { --edge: var(--madder); }
.selvedge[data-next="saffron"] { --edge: var(--saffron); }
.selvedge[data-next="teal"] { --edge: var(--teal); }
.selvedge[data-next="ink"] { --edge: var(--ink); }
@media (forced-colors: active) { .selvedge { display: none; } }

/* ---------- Buttons and links ---------- */
/* Primary: ink with the saffron shuttle bar on its leading edge. Ghost: a 2px outline in currentColor. */
.btn {
  --bar: var(--space-3); position: relative; display: inline-flex; align-items: center; gap: var(--space-4); max-width: 100%;
  min-height: 48px; padding: var(--space-4) var(--space-7) var(--space-4) calc(var(--bar) + var(--space-6));
  border: 0; border-radius: var(--radius); font: var(--type-strong); font-stretch: semi-expanded; text-align: left; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--cotton); box-shadow: inset var(--bar) 0 0 var(--saffron);
  transition: box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background-color var(--dur-moderate) var(--ease-standard);
}
.btn .arrow { transition: transform var(--dur-slow) var(--ease-standard); }
.btn:active { transform: scale(.97); }
@media (hover: hover) { .btn:hover { --bar: var(--space-5); } .btn:hover .arrow { transform: translateX(3px); } }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 var(--rule-hair) currentColor; padding-left: var(--space-7); }
@media (hover: hover) { .btn-ghost:hover { box-shadow: inset 0 0 0 3px currentColor; } }
.btn-small { min-height: 40px; font: var(--type-small-strong); padding-right: var(--space-6); padding-left: calc(var(--bar) + var(--space-5)); }
.btn-ghost.btn-small { padding-left: var(--space-6); }
.btn-block { width: 100%; justify-content: center; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; }
.text-link { font-weight: var(--weight-strong); }
.arrow-link { display: inline-flex; gap: var(--space-4); align-items: center; font-weight: var(--weight-strong); text-underline-offset: var(--space-2); }
.link-button { min-height: 44px; padding: var(--space-4) var(--space-1); background: none; border: 0; font: inherit; font-weight: var(--weight-strong); color: inherit; text-decoration: underline; text-underline-offset: var(--space-2); cursor: pointer; }
.arrow { width: 1em; height: 1em; flex: none; }
@media (max-width: 599px) { .btn { width: 100%; justify-content: center; } .actions .btn { width: auto; flex: 1 1 auto; } }

/* ---------- Label and provenance ---------- */
/* No status chips (owner, 26 Oct 2026): pages say only what runs today, plans sit under "Coming next", and
   /product/status/ carries every state. A demo says where its data comes from in one quiet line. */
.demo-source { display: inline-block; font: var(--type-small-strong); color: var(--ink-2); }
.tag, .sample-tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); margin-left: var(--space-3); border-radius: var(--radius);
  font: var(--type-small-strong); vertical-align: middle; box-shadow: inset 0 0 0 var(--rule-hair) currentColor; white-space: nowrap; }
.sample-tag { margin-left: 0; }
.tag-concept, .tag-planned { color: var(--ink-2); }

/* The meta line: a step count or a read time in a task flow, the only small line allowed above a heading.
   Never a section label; sentence case, the text face, secondary ink. */
.meta, .eyebrow { font: var(--type-small-strong); color: var(--ink-2); }

/* ---------- Fields: a quiet cotton band by default; ink for the footer; a dye only when it states a health, a
   state or the one action ---------- */
/* A field sets its own ground and text; children read --field-bg, --field-fg, --field-fg-2. */
.field-indigo { --field-bg: var(--indigo); --field-fg: var(--on-dye); --field-fg-2: var(--on-dye-2); --thread: var(--indigo); }
.field-madder { --field-bg: var(--madder); --field-fg: var(--on-dye); --field-fg-2: var(--on-dye-2); --thread: var(--madder); }
.field-saffron { --field-bg: var(--saffron); --field-fg: var(--on-saffron); --field-fg-2: var(--on-saffron-2); --thread: var(--saffron); }
.field-teal { --field-bg: var(--teal); --field-fg: var(--on-dye); --field-fg-2: var(--on-dye-2); --thread: var(--teal); }
.field-quiet { --field-bg: var(--surface-2); --field-fg: var(--ink); --field-fg-2: var(--ink-2); --thread: var(--ink); }
.field-ink { --field-bg: var(--field-ink); --field-fg: var(--on-dye); --field-fg-2: var(--on-dye-2); --thread: var(--field-ink); }
.on-field, .fell-field, .field-card, .section-cta, .l-cta, .l-problem, .l-founder { background: var(--field-bg); color: var(--field-fg); }
:where(.on-field, .fell-field, .field-card, .section-cta, .l-cta, .l-problem, .l-founder) :focus-visible { outline-color: currentColor; }
:where(.on-field, .fell-field, .section-cta, .l-cta, .l-problem, .l-founder) a:not(.btn) { color: inherit; }
:where(.on-field, .fell-field, .section-cta, .l-cta, .l-problem, .l-founder) :is(.small, .source) { color: var(--field-fg-2); }
/* Buttons on a field: the primary takes the field's text colour; the shuttle bar stays saffron
   (on saffron it turns cotton so it still shows). */
:where(.field-indigo, .field-madder, .field-teal, .field-ink) .btn { background: var(--field-fg); color: var(--field-bg); }
.field-saffron .btn { background: var(--on-saffron); color: var(--saffron); box-shadow: inset var(--bar) 0 0 var(--on-dye); }
.field-saffron .btn-ghost { background: transparent; color: var(--on-saffron); box-shadow: inset 0 0 0 var(--rule-hair) currentColor; }
:where(.field-indigo, .field-madder, .field-teal, .field-ink, .field-saffron) .btn-ghost { background: transparent; color: var(--field-fg); box-shadow: inset 0 0 0 var(--rule-hair) currentColor; }

/* ---------- Header ---------- */
/* Two variants, one look: the full bar (the same five sections as the footer, language, one action) on
   every page, and the focused bar (the lockup, the task's name, one way out) on the health check, survey
   and contact pages. */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cotton); border-bottom: var(--rule) solid var(--ink); }
.header-inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-h); }
.header-brand { display: inline-flex; align-items: center; margin-right: auto; min-width: 0; }
.header-brand .wordmark { margin-right: 0; }
.wordmark { display: inline-flex; align-items: center; margin-right: auto; padding: var(--space-3) 0; color: var(--ink); text-decoration: none; }
.logo { display: block; height: 26px; width: auto; flex: none; }
.wordmark-task { display: none; padding-left: var(--space-5); margin-left: var(--space-5); border-left: var(--rule-hair) solid var(--ink); font: var(--type-small-strong); }
@media (min-width: 560px) { .wordmark-task { display: inline-block; } }
.header-link { display: none; font: var(--type-small-strong); padding: var(--space-4) var(--space-2); }
@media (min-width: 560px) { .header-link { display: inline-block; } }
.mega { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch { display: inline-flex; border: var(--rule-hair) solid var(--ink); border-radius: var(--radius); }
.lang-switch > a, .lang-switch > button { display: inline-grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 var(--space-4); border: 0; background: transparent; color: var(--ink); font: var(--type-label); text-decoration: none; white-space: nowrap; }
.lang-switch > :is(a[aria-current="true"], button[aria-pressed="true"]) { background: var(--ink); color: var(--cotton); }
.header-cta { display: none; }
@media (min-width: 1000px) {
  .mega { display: flex; align-items: stretch; align-self: stretch; gap: var(--space-1); margin-right: var(--space-4); }
  .mega > details { position: static; display: flex; }
  .mega summary { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5); font: var(--type-strong); font-family: var(--font-display); font-stretch: semi-expanded; list-style: none; cursor: pointer; }
  .mega summary::-webkit-details-marker { display: none; }
  .mega summary::after { content: ""; width: 8px; height: 8px; border-right: var(--rule-hair) solid currentColor; border-bottom: var(--rule-hair) solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-moderate) var(--ease-standard); }
  .mega details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .mega summary::before { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); bottom: calc(-1 * var(--rule)); height: var(--rule); background: var(--saffron); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-standard); }
  .mega details[open] > summary::before, .mega summary[aria-current="true"]::before { transform: scaleX(1); }
  @media (hover: hover) { .mega summary:hover::before { transform: scaleX(1); } }
  .mega summary:focus-visible { outline-offset: -3px; }
  .mega-panel { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--rule); background: var(--surface); box-shadow: var(--shadow-float); border-top: var(--rule-frame) solid var(--ink); }
  .mega-panel .wrap { display: grid; grid-template-columns: minmax(220px, 1fr) 3fr; gap: var(--space-10); padding-top: var(--space-9); padding-bottom: var(--space-9); }
  .mega-intro .h2 { color: var(--ink); }
  .mega-intro p { margin-top: var(--space-4); color: var(--ink-2); max-width: 30ch; }
  .mega-intro a { display: inline-flex; margin-top: var(--space-6); font-weight: var(--weight-strong); }
  .mega-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-8); align-content: start; }
  .mega-links a { display: grid; grid-template-columns: var(--rule-frame) 1fr; gap: 0 var(--space-5); padding: var(--space-5) var(--space-5) var(--space-5) 0; text-decoration: none; border-radius: var(--radius); }
  .mega-links a::before { content: ""; grid-row: span 2; border-radius: var(--radius); background: var(--ink); transition: transform var(--dur-slow) var(--ease-standard); transform-origin: top; transform: scaleY(.55); }
  .mega-links a:hover::before, .mega-links a:focus-visible::before, .mega-links a[aria-current="page"]::before { transform: scaleY(1); }
  .mega-links b { font: var(--type-strong); }
  .mega-links span { font: var(--type-small); color: var(--ink-2); }
  .mega-links a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: var(--space-2); }
  .header-cta { display: inline-flex; }
  .drawer { display: none; }
}
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .mega details[open] .mega-panel { animation: panel-in var(--dur-slow) var(--ease-enter); }
  @keyframes panel-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}
/* Simple header (switchable in nav.json): five plain links */
.simple-nav { display: none; }
@media (min-width: 1000px) { .simple-nav { display: block; margin-left: auto; margin-right: var(--space-4); } }
.simple-nav ul { display: flex; gap: var(--space-2) var(--space-8); padding: 0; margin: 0; list-style: none; }
.simple-nav a { display: inline-block; padding: var(--space-4) 0; font: var(--type-strong); text-decoration: none; color: var(--ink); border-bottom: 3px solid transparent; }
.simple-nav a:hover { border-bottom-color: currentColor; }
.simple-nav a[aria-current="page"] { border-bottom-color: var(--saffron); }
.review-banner, .lang-banner { margin: 0; padding: var(--space-4) var(--gutter); background: var(--saffron); color: var(--on-saffron); font: var(--type-small-strong); text-align: center; }
.lang-note { padding: var(--space-4) var(--gutter); background: var(--surface-2); font: var(--type-small); text-align: center; }

/* ---------- Drawer (< 1000px) ---------- */
.drawer > summary { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; padding: 0 var(--space-5); border: var(--rule-hair) solid var(--ink); border-radius: var(--radius); font: var(--type-strong); list-style: none; cursor: pointer; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer-icon { position: relative; width: 18px; height: 12px; border-top: var(--rule-hair) solid currentColor; border-bottom: var(--rule-hair) solid currentColor; }
.drawer-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: var(--rule-hair) solid currentColor; transform: translateY(-50%); }
.drawer[open] .drawer-icon { border-color: transparent; }
.drawer[open] .drawer-icon::after { transform: translateY(-50%) rotate(45deg); }
.drawer[open] .drawer-icon::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: var(--rule-hair) solid currentColor; transform: translateY(-50%) rotate(-45deg); }
.drawer-panel { position: fixed; left: 0; right: 0; top: calc(var(--header-h) + var(--rule)); bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); padding: var(--space-4) 0 var(--space-10); box-shadow: var(--shadow-float); }
.drawer-panel details { border-bottom: var(--rule-hair) solid var(--line); }
.drawer-panel summary { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 var(--gutter); font: var(--type-h3); font-stretch: expanded; list-style: none; cursor: pointer; border-left: var(--rule-heavy) solid var(--ink); }
.drawer-panel summary::-webkit-details-marker { display: none; }
.drawer-panel summary::after { content: "+"; font: var(--type-h3); font-weight: 400; }
.drawer-panel details[open] > summary::after { content: "−"; }
.drawer-panel ul { list-style: none; margin: 0; padding: 0 var(--gutter) var(--space-6) calc(var(--gutter) + var(--space-4)); }
.drawer-panel li a { display: block; padding: var(--space-4) 0; text-decoration: none; }
.drawer-panel li b { display: block; font: var(--type-strong); }
.drawer-panel li span { display: block; font: var(--type-small); color: var(--ink-2); }
.drawer-panel li a[aria-current="page"] b { text-decoration: underline; text-underline-offset: var(--space-2); }
.drawer-foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-8) var(--gutter) 0; }
.drawer-simple { list-style: none; margin: 0; padding: var(--space-4) 0; }
.drawer-simple a { display: block; padding: var(--space-6) var(--gutter); font: var(--type-h3); font-stretch: expanded; text-decoration: none; color: inherit; border-left: var(--rule-heavy) solid var(--ink); }
.drawer-simple li + li { margin-top: var(--space-3); }
@media (prefers-reduced-motion: no-preference) {
  .drawer[open] .drawer-panel { animation: drawer-in var(--dur-slow) var(--ease-enter); }
  @keyframes drawer-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
}
@media (max-width: 440px) {
  .drawer > summary { padding: 0 var(--space-4); }
  .drawer > summary .drawer-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 380px) {
  .header-inner { gap: var(--space-3); }
  .lang-switch > a, .lang-switch > button { min-width: 40px; padding: 0 var(--space-3); }
  .logo { height: 22px; }
}

/* ---------- Footer: the selvedge ---------- */
/* Full: an ink field with the woven edge on top, the site map and the small print. Compact (task pages):
   the same field and edge with one or two lines of small print. */
.site-footer { --field-bg: var(--field-ink); --field-fg: var(--on-dye); --field-fg-2: var(--on-dye-2); position: relative; background: var(--field-bg); color: var(--field-fg); padding: 0 0 var(--space-10); }
.site-footer > .selvedge { --edge: var(--field-ink); margin-bottom: var(--space-12); }
.site-footer a { color: inherit; }
.site-footer :focus-visible { outline-color: currentColor; }
.footer-top { display: grid; gap: var(--space-10); }
@media (min-width: 960px) { .footer-top { grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); gap: var(--grid-gap); } .footer-brand { grid-column: span 3; } .footer-map { grid-column: 4 / -1; } }
.footer-name { display: flex; align-items: center; color: var(--field-fg); }
.footer-name .logo { height: 34px; }
.footer-brand p { margin-top: var(--space-5); color: var(--field-fg-2); max-width: 32ch; }
.footer-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-9) var(--space-8); align-items: start; }
@media (min-width: 700px) { .footer-map { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.footer-map h2 { font: var(--type-small-strong); color: var(--field-fg-2); margin-bottom: var(--space-5); }
.footer-map ul { padding: 0; margin: 0; list-style: none; display: grid; gap: var(--space-2); }
.footer-map a { display: inline-block; padding: var(--space-2) 0; text-decoration: none; font: var(--type-small); }
.footer-map a:hover { text-decoration: underline; }
.footer-note { margin-top: var(--space-11); font: var(--type-small); color: var(--field-fg-2); max-width: 80ch; }
.footer-small { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-top: var(--space-6); padding-top: var(--space-7); border-top: var(--rule-hair) solid color-mix(in srgb, var(--field-fg) 20%, transparent); font: var(--type-small); color: var(--field-fg-2); }
.footer-small a { color: var(--field-fg); }
.site-footer.is-compact > .selvedge { margin-bottom: var(--space-9); }
.site-footer.is-compact .footer-note { margin-top: 0; }
.site-footer.is-compact .footer-small { border-top: 0; padding-top: 0; }

/* ---------- Section ---------- */
.section { padding-block: var(--section); }
.section-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-11); max-width: var(--w-text); }
.section-cta { position: relative; padding: var(--section) 0 0; }
.section-cta > .wrap { display: grid; gap: var(--space-7) var(--space-11); align-items: end; padding-bottom: var(--section); }
@media (min-width: 900px) { .section-cta > .wrap { grid-template-columns: 1fr auto; } }
.section-cta h2 { max-width: 18ch; }
.section-cta p { margin-top: var(--space-7); max-width: 46ch; color: var(--field-fg-2); }

/* ---------- Card: a raised panel with a 6px rule on top (ink, or a dye that states a health) ---------- */
.card { display: grid; gap: var(--space-5); align-content: start; padding: var(--space-8); background: var(--surface); border-top: var(--rule-frame) solid var(--card-rule, var(--ink)); border-radius: var(--radius); min-width: 0; }
.card[data-state="woven"] { --card-rule: var(--band-woven); } .card[data-state="holding"] { --card-rule: var(--band-holding); }
.card[data-state="shape"] { --card-rule: var(--saffron); } .card[data-state="loose"] { --card-rule: var(--band-loose); }
.card h2, .card .card-title { font: var(--type-h3); letter-spacing: var(--ls-h3); }
.card.is-ink { background: var(--field-ink); color: var(--on-dye); border-top-color: var(--saffron); }
.card.is-ink :is(p, .small) { color: var(--on-dye-2); }
.card.is-ink a { color: var(--on-dye); }
@media (max-width: 560px) { .card { padding: var(--space-7); } }

/* ---------- Figure frame: every diagram, demo and product screenshot sits in one ---------- */
/* Imagery rule: a product screen is shown whole, square-cornered, on surface, under a 6px ink rule, with a
   caption that says what it is, where it came from and when. No device mock-ups, no tilt, no shadow. */
figure.visual, .shot { position: relative; margin: 0; }
.visual-frame, .shot-frame { position: relative; background: var(--surface); border-top: var(--rule-frame) solid var(--ink); padding: var(--space-8); min-width: 0; }
@media (max-width: 560px) { .visual-frame, .shot-frame { padding: var(--space-6); } }
.shot-frame img, .screen-shot img { display: block; width: 100%; height: auto; }
.visual figcaption, .visual-caption, .shot figcaption { margin-top: var(--space-5); font: var(--type-small); color: var(--ink-2); max-width: 70ch; }
.visual-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-4) var(--space-7); margin-bottom: var(--space-6); }
.visual-head h3 { font: var(--type-h3); }
.visual-placeholder { padding: var(--space-8); border: var(--rule-hair) dashed var(--ink-2); color: var(--ink-2); }

/* ---------- Stat: one number, its unit, what it measures ---------- */
.stat { display: grid; gap: var(--space-2); }
.stat b, .stat-value { font: var(--type-h2); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-h2); }
.stat span, .stat-label { font: var(--type-small); color: var(--ink-2); }
.on-field .stat span { color: var(--field-fg-2); }

/* ---------- Table ---------- */
.table-wrap { position: relative; overflow-x: auto; max-width: 100%; }
.table, .prose table { border-collapse: collapse; width: 100%; font: var(--type-small); }
.table th, .table td, .prose th, .prose td { text-align: left; padding: var(--space-4) var(--space-5); border-bottom: var(--rule-hair) solid var(--line); vertical-align: top; }
.table thead th, .prose thead th { border-bottom: var(--rule) solid var(--ink); font-weight: var(--weight-strong); }
.table .num, .prose .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Callout: a note, a notice or an error, on a quiet band with a rule on top ---------- */
.callout, .notice { padding: var(--space-5) var(--space-6); background: var(--surface-2); border-top: var(--rule) solid var(--callout-rule, var(--ink)); font: var(--type-small); }
.callout.is-notice, .notice { --callout-rule: var(--saffron); background: var(--saffron-soft); }
.callout.is-error { --callout-rule: var(--madder); background: var(--madder-soft); }
.callout.is-info, .deep-note { --callout-rule: var(--indigo); background: var(--indigo-soft); padding: var(--space-5) var(--space-6); border-top: var(--rule) solid var(--callout-rule); font: var(--type-small); }
.form-errors { padding: var(--space-5) var(--space-6); background: var(--madder-soft); border-top: var(--rule) solid var(--madder); font: var(--type-small); }
.form-errors ul { margin: var(--space-3) 0 0; padding-left: var(--space-7); }

/* ---------- Form controls ---------- */
.field { display: grid; gap: var(--space-3); }
.field > label, .field-label { font: var(--type-small-strong); }
.optional { margin-left: var(--space-3); font: var(--type-small); color: var(--ink-2); }
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="color"]):not([type="file"]), textarea, select {
  width: 100%; min-height: 48px; padding: var(--space-5); font: var(--type-body); color: var(--ink);
  background: var(--surface); border: var(--rule-hair) solid var(--ink); border-radius: var(--radius);
}
textarea { display: block; resize: vertical; min-height: 140px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--indigo-ink); }
input[type="range"] { accent-color: var(--ink); min-height: 44px; }
.field-check { grid-template-columns: auto 1fr; align-items: start; gap: var(--space-2) var(--space-5); }
.field-check input { width: 22px; height: 22px; margin: var(--space-1) 0 0; }
.field-check label { font: var(--type-small); }
.field-check .field-error { grid-column: 2; }
.field-error, .error-text { color: var(--madder-ink); font: var(--type-small-strong); }
[aria-invalid="true"] { border-color: var(--madder-ink) !important; box-shadow: inset 0 0 0 1px var(--madder-ink); }
/* Choice chips: a fieldset of radios shown as square chips; the chosen one is ink with a saffron weft. */
.q { margin: 0; padding: var(--space-6) var(--space-7) var(--space-7); min-width: 0; background: var(--surface); border: 0; border-top: var(--rule) solid var(--ink); border-radius: var(--radius); }
.q legend, .q-label { display: block; float: left; width: 100%; padding: 0; margin-bottom: var(--space-2); font: var(--type-strong); }
.q-help { clear: both; margin-bottom: var(--space-3); font: var(--type-small); color: var(--ink-2); }
.choices { clear: both; display: flex; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-4); }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-4) var(--space-6); border: var(--rule-hair) solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font: var(--type-small-strong); transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.choice:hover span { border-color: var(--ink); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cotton); box-shadow: inset 0 calc(-1 * var(--space-2)) 0 var(--saffron); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: var(--space-1); }
.choice-unsure span { border-style: dashed; }
.choice-na span { color: var(--ink-2); }
.choice-na input:checked + span { color: var(--cotton); }
@media (max-width: 560px) { .q { padding: var(--space-6); } .choice span { padding: var(--space-4) var(--space-5); } }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); padding: 0; margin: 0 0 var(--space-9); list-style: none; font: var(--type-small-strong); }
.crumbs li { display: inline-flex; gap: var(--space-5); align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; background: currentColor; border-radius: var(--radius-round); opacity: .8; }
.crumbs a { text-decoration: none; color: var(--ink-2); }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- Index rows: an ink thread, a title, one sentence, an arrow. Never a grid of identical cards. ---------- */
.rows { display: grid; }
.rows a { --t: var(--ink); position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-7); align-items: center; padding: var(--space-7) var(--space-4) var(--space-7) 0; text-decoration: none; border-top: var(--rule-hair) solid var(--line); }
.rows li:last-child a { border-bottom: var(--rule-hair) solid var(--line); }
.rows a::before { content: ""; grid-row: 1 / span 2; align-self: stretch; border-radius: var(--radius); background: var(--t); transition: transform var(--dur-weave) var(--ease-standard); }
.rows a > b { font: var(--type-h3); font-stretch: expanded; letter-spacing: var(--ls-h3); }
.rows a > span { grid-column: 2; color: var(--ink-2); max-width: 60ch; }
.rows a > svg { grid-row: 1 / span 2; grid-column: 3; width: 24px; height: 24px; transition: transform var(--dur-weave) var(--ease-standard); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .rows a:hover::before { transform: translateX(8px) scaleX(1.4); } .rows a:hover > svg { transform: translateX(6px); } }
.rows a:hover > b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: var(--space-3); }
.rows .tag { color: var(--ink-2); font-stretch: normal; }
@media (max-width: 599px) { .rows a { grid-template-columns: 8px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); padding: var(--space-6) var(--space-2) var(--space-6) 0; } }
.t-indigo { --t: var(--indigo); } .t-madder { --t: var(--madder); } .t-saffron { --t: var(--saffron); } .t-teal { --t: var(--teal); } .t-ink { --t: var(--ink); }

/* ---------- FAQ ---------- */
.faq { border-top: var(--rule) solid var(--ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0; font: var(--type-strong); font-family: var(--font-display); font-stretch: semi-expanded; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: var(--type-h3); font-weight: 400; transition: transform var(--dur-moderate) var(--ease-standard); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { padding-bottom: var(--space-6); max-width: 64ch; }

/* ---------- Motion: one easing set; what moves is feedback, the one authored moment, or a reveal ---------- */
.motion-ok .reveal { transform: translateY(20px); transition: transform var(--dur-weave) var(--ease-enter); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.motion-ok .reveal.is-in { transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .drawer, .mega, .skip-link { display: none !important; } }