/* ---------- Fonts ----------
   Served from assets/fonts/ (no request to Google). Latin and Latin Extended subsets from Google Fonts, SIL Open Font License
   (see assets/fonts/OFL.txt). Raleway and Geist Mono are variable files (one per subset) covering the weights used. To add a weight or font, download its woff2 from
   the Google Fonts CSS (fonts.googleapis.com/css2?family=…) and add a rule here. */
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(assets/fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(assets/fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/lexend-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/lexend-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/raleway-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(assets/fonts/raleway-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ----------
   One palette: warm neutrals with the chromnil teal. Text uses --text, --text-2 and --muted, the accent --acc.
   build.py reads the hex colours of :root for the theme colour, the e-mail templates and the image tools (css_tokens in checks.py).
   Each colour value is written once: a token that is the same colour under another name points at it (--text: var(--ink)).
   Breakpoints: 640px (phones, the "Mobile layer" at the end), 760px (the nav menu), 900px (stacked layouts). The scripts read
   the same three, and reduced motion, from CHROMNIL_MQ in motion.js, and the arrow-key handling of tab rows from CHROMNIL_ROVE there.
   Dark bands (hero card, key facts, use cases, the benchmark card, chromnil one, press boxes, footer) sit on --ink and
   carry .on-ink, which points the same tokens at their light counterparts, so a component reads correctly on both. */
:root {
  --bg: #FAF8F4;
  --surface: var(--white);
  --raised: #F1EDE6;
  --light-warm: #F1E6DA;
  --nav-bg: rgba(250, 248, 244, .85);
  --overlay: rgba(250, 248, 244, .8);
  /* Text: headings and emphasis, body copy, labels and secondary text */
  --text: var(--ink);
  --text-2: #2C4B4E;
  --muted: #4F5F60;
  /* The brand's dark teal: dark bands, plates and fills */
  --ink: #113537;
  --ink-rgb: 17, 53, 55;
  /* Lines: text colour at alpha a × 1.4 */
  --line-rgb: var(--ink-rgb);
  --line-k: 1.4;
  --line: rgba(var(--line-rgb), calc(.08 * var(--line-k)));
  --line-2: rgba(var(--line-rgb), calc(.1 * var(--line-k)));
  --teaser-stroke: rgba(var(--ink-rgb), .6);
  /* Accent: the teal for text, fills and focus (--teal stays the teal inside dark bands); the bright glow on dark bands */
  --teal: #0B6468;
  --acc: var(--teal);
  --acc-rgb: 11, 100, 104;
  --acc-tint: #DDEFF0;
  --on-acc: var(--white);
  --focus: var(--teal);
  --glow: #7FD3D6;
  --glow-rgb: 127, 211, 214;
  /* The faint grid on the dark plates: two layers, each plate sets the cell size */
  --plate-grid: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  /* Text and rules on the dark bands, read through .on-ink */
  --on-dark: #E8EFEE;
  --on-dark-hi: var(--white);
  --on-dark-2: #B8CCD0;
  --on-dark-muted: #9DB6BA;
  --on-dark-line: rgba(var(--on-dark-rgb), .18);
  /* Warning (the plate's amber): on dark bands, and a darker shade that keeps 4.5:1 on light backgrounds */
  --warn: #EDC46E;
  --warn-rgb: 237, 196, 110;
  --warn-ink: #8A5A00;
  /* Other colours: plain white (and its rgb for transparent white on the dark bands), the dark bands' text colour
     as rgb, the UV light on the plates, the 404 page's red, the form placeholder and the dialog backdrop */
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --on-dark-rgb: 232, 239, 238;
  --uv: #3D6FD1;
  --uv-deep: #2B4FA6;
  --red: #C94B4B; /* a deeper shade of the plate's red compound #DE7C7C */
  --placeholder: #8FA3A6;
  --backdrop: rgba(8, 26, 28, .72);
  /* Hover: ghost buttons and rows get this tint; links and controls change colour over --hover-dur */
  --hover-tint: rgba(var(--ink-rgb), .06);
  --hover-dur: .2s;
  /* The slower fades and slides (cards, plates, the rotating word) and the one easing curve */
  --reveal-dur: .6s;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* Type scale: every fixed text size on the site is one of these steps (headings use clamp() sizes of their own) */
  --fs-1: 11px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 14px;
  --fs-5: 15px;
  --fs-6: 16px;
  --fs-7: 17px;
  --fs-8: 18px;
  --fs-9: 19px;
  --fs-10: 20px;
  --fs-11: 22px;
  --fs-12: 24px;
  --fs-13: 26px;
  --fs-14: 28px;
  /* Page headline (the h1 at the top of every subpage, .page-head__title): always larger than the section titles below */
  --fs-page-title: clamp(44px, 5.4vw, 68px);
  /* Section titles: one size for every main section heading on every page */
  --fs-section-title: clamp(36px, 4.6vw, 64px);
  /* Small uppercase labels: size and letter-spacing of the regular and the larger label (nav links, band labels) */
  --label-size: var(--fs-2);
  --label-track: .12em;
  --label-track-tight: .1em;
  --label-lg-size: var(--fs-3);
  --label-lg-track: .08em;
  /* Corners: two sizes for the whole site. --radius-sm for controls and small frames (buttons, fields, tabs, plates,
     tooltips, focus rings), --radius-lg for cards, panels and dialogs; --radius-pill for toggles, chips and badges,
     50% for round dots and icon buttons. The 1-3px corners of the plate bands are drawing details, not UI corners. */
  --radius-sm: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  /* Keyboard focus ring: thickness and the usual gap (the colour is --focus) */
  --focus-width: 2px;
  --focus-offset: 3px;
  /* Vertical padding of sections and bands: large, medium, small (phones: see the Mobile layer) */
  --section-pad: 120px;
  --section-pad-md: 112px;
  --section-pad-sm: 96px;
  /* Space between the nav and the top of every page head (subpages, press releases): one value so the headline always starts at the same height */
  --page-head-top: 48px;
  /* Space between the small label above a page headline (eyebrow, back link) and the headline */
  --page-head-gap: 16px;
  /* Step tabs in a row (home process, technology steps): name size (smaller below 960px, see the media query further down), weight and number size */
  --fs-step-tab: var(--fs-9);
  --step-tab-weight: 500;
  --step-tab-weight-active: 600;
  --fs-step-num: var(--fs-2);
  /* Buttons: one shape for every action button. .btn on the pages, in the nav (.btn--sm), the phone menu and the
     simulator, and the e-mail buttons (build.py reads these values into the e-mail templates). Colours follow
     --acc and --text, so the buttons also read correctly on the dark bands. Phones get the smaller size at the end. */
  --btn-radius: var(--radius-sm);
  --btn-pad-y: 15px;
  --btn-pad-x: 26px;
  --btn-font-size: 16px;
  --btn-weight: 500;
  --btn-sm-pad-y: 9px;
  --btn-sm-pad-x: 16px;
  --btn-sm-font-size: 13px;
  /* The live dot (.dot): the glowing, pulsing status dot. The other pulsing marks (.hero__zone, .logo-pulse) share the pulse. */
  --dot-size: 8px;
  --dot-glow: 12px;
  --pulse-dur: 1.4s;
  --pulse-dim: .25;
  --f-sans: 'Raleway', system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;
}
/* Dark bands: the text, line and accent tokens switch to their light counterparts */
.on-ink {
  color: var(--text);
  --text: var(--on-dark); --text-2: var(--on-dark-2); --muted: var(--on-dark-muted);
  --line-rgb: var(--glow-rgb); --line: rgba(var(--glow-rgb), .18); --line-2: rgba(var(--glow-rgb), .24);
  --acc: var(--glow); --acc-rgb: var(--glow-rgb); --on-acc: var(--ink); --focus: var(--glow);
  --hover-tint: rgba(var(--white-rgb), .06);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
[id] { scroll-margin-top: 64px; }
/* One pager and technology page: gentle snap. "proximity" only pulls when a scroll ends near a snap point.
   Sections with a heading snap so the heading (not the section's top padding) sits 24px under the 65px nav: the
   negative margin trims the snap area by the 120px section padding minus 9px (80px scroll-padding + 9px = 89px).
   The whole section stays the snap area, so in sections taller than the viewport (comparison, origin)
   browsers let you scroll freely inside instead of pulling back to the heading. The rest snap flush under the nav.
   Only with a mouse or trackpad on a tall enough screen: on touch and short screens most sections outgrow the
   viewport and snapping fights momentum scrolling. Off for reduced motion too. */
@media (pointer: fine) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html:has(#main > .hero), html:has(#main.tech) { scroll-snap-type: y proximity; }
}
#main > .hero, #main > section { scroll-snap-align: start; scroll-margin-top: -15px; }
#main > section:has(.section-head) { scroll-margin-top: calc(9px - var(--section-pad)); }
/* The specs strip shares the first screen with the hero; its own snap point would catch short scrolls just below it */
#main > #specs { scroll-snap-align: none; }
/* The footer ends the page with its own snap point, or snapping pulls the view back to the last section */
.footer { scroll-snap-align: end; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-sans); font-variant-numeric: lining-nums; letter-spacing: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--text); text-decoration: none; transition: color var(--hover-dur); }
a:hover { color: var(--acc); }
img { max-width: 100%; }
::selection { background: var(--acc); color: var(--on-acc); }
.brand-word { color: var(--acc); }
:where(button) { font: inherit; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
[tabindex="-1"]:focus { outline: none; }
/* Fold-out titles on phones (home-sections.js, motion.js): the focus ring goes round the whole title row instead */
@supports selector(:has(a)) { .fold__btn:focus-visible { outline: none; } }

/* Screen-reader-only text */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Skip link: hidden until focused */
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; border-radius: var(--btn-radius); background: var(--text); color: var(--bg); font-weight: 600; transform: translateY(-200%); transition: transform var(--hover-dur); }
.skip-link:focus { transform: none; color: var(--bg); }

.mono { font-family: var(--f-mono); }
.acc { color: var(--acc); }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); display: flex; flex-direction: column; gap: 56px; }
.balance { text-wrap: balance; }

/* Labels: small uppercase mono text in three sizes, each with one letter-spacing. Components only add colour. */
:where(.eyebrow, .hero__eyebrow, .stat__label, .contact__meta, .supporters__label .mono, .footer__label, .legal__foot, .tech-tag, .tech-specs th, .more-link, .page-head__date, .legal__defs dt, .imprint__label, .member__role, .press-contact__label, .press__count, .release-row__meta, .press-contact-row__label, .release-head__back, .release__date, .release__label, .release__files a) { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; }
:where(.nf__plate-head, .steps__counter, .origin__hint, .hotspot__name, .origin__status, .origin__figure figcaption, .bench4__label, .bench4__axis, .bench4__sig .mono, .cmp__legend, .footer__heading, .footer__meta, .sim__view, .dens__head, .sim__zones th, .tech-metric__better, .tech-conditions dt, .media-file__meta) { font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; }
:where(.nav__links, .teaser__pill, .nav__sheet-motion, .nf__link) { font-size: var(--label-lg-size); letter-spacing: var(--label-lg-track); text-transform: uppercase; }
.eyebrow { color: var(--acc); }
.h2 { margin: 0; font-weight: 600; font-size: var(--fs-section-title); line-height: 1.04; letter-spacing: -.025em; }
.display { margin: 0; font-weight: 600; font-size: clamp(76px, 11vw, 168px); line-height: .92; letter-spacing: -.03em; }
.section-head { display: flex; flex-direction: column; gap: 24px; }
.section-head--narrow { max-width: 900px; }
@media (min-width: 720px) { .section-head--narrow .h2--oneline { width: max-content; max-width: none; white-space: nowrap; } }
.lead-dark { margin: 0; color: var(--text-2); font-weight: 400; max-width: 62ch; text-wrap: pretty; }

/* The live dot: size, glow and pulse from the tokens (--dot-*, --pulse-*). --dot-color changes the colour of one
   dot (default the accent); .dot--still keeps the glow without the pulse. */
.dot { width: var(--dot-size); height: var(--dot-size); border-radius: 50%; flex: none; background: var(--dot-color, var(--acc)); box-shadow: 0 0 var(--dot-glow) var(--dot-color, var(--acc)); animation: pulse var(--pulse-dur) ease-in-out infinite; }
.dot--still { animation: none; }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

/* ---------- Buttons ---------- */
/* Shape and type from the tokens (--btn-*); the variants only set colours. Works on <a> and <button>. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-pad-y) var(--btn-pad-x); border: 0; border-radius: var(--btn-radius); background: none; font-size: var(--btn-font-size); font-weight: var(--btn-weight); cursor: pointer; transition: background var(--hover-dur), border-color var(--hover-dur), color var(--hover-dur), text-decoration-color var(--hover-dur); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn--sm { padding: var(--btn-sm-pad-y) var(--btn-sm-pad-x); font-size: var(--btn-sm-font-size); }
/* Filled in the accent */
.btn--primary { background: var(--acc); color: var(--on-acc); }
.btn--primary:hover { background: var(--text); color: var(--on-acc); }
/* The secondary action is an underlined text link next to the button, not a second box */
.btn--ghost { padding: 10px 0; min-height: 44px; color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: rgba(var(--line-rgb), .45); }
.btn--ghost:hover { color: var(--text); text-decoration-color: var(--acc); }
/* Filled in the text colour: the nav, the phone menu, the chromnil one band and the simulator */
.btn--light { background: var(--text); color: var(--on-acc); }
.btn--light:hover { background: var(--acc); color: var(--on-acc); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: var(--nav-bg); border-bottom: 1px solid var(--line); }
.nav__inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__brand .logo { height: 28px; width: 28px; display: block; flex: none; }
.nav__brand span { font-weight: 600; font-size: var(--fs-9); letter-spacing: -.02em; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__link { color: var(--text-2); }
.nav__link[aria-current="page"] { color: var(--text); }
/* The same page in the other language (DE / EN): stays in the bar on phones, beside the Menu button */
.nav__lang { color: var(--text-2); transition: color var(--hover-dur); }
.nav__lang:hover { color: var(--text); }
.motion-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: transparent; color: var(--text-2); cursor: pointer; transition: background var(--hover-dur), color var(--hover-dur); }
.motion-toggle:hover { background: var(--hover-tint); color: var(--text); }
.motion-toggle[hidden] { display: none; }
.motion-toggle[aria-pressed="false"] .icon-play, .motion-toggle[aria-pressed="true"] .icon-pause { display: none; }

/* ---------- Hero ---------- */
/* Hero + stats bar fill the first viewport below the sticky nav (--nav-h and --stats-h are measured in home-hero.js), the hero at least 520px */
.hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: max(520px, calc(100svh - var(--nav-h, 65px) - var(--stats-h, 150px))); border-bottom: 1px solid var(--line); overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--line-rgb), calc(.045 * var(--line-k))) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--line-rgb), calc(.045 * var(--line-k))) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.hero__inner { position: relative; width: 100%; padding-top: 56px; padding-bottom: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero__copy { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 28px; container-type: inline-size; }
/* "chromnil" is ~4.2em wide: also cap by column width so it never runs into the card */
.hero__copy .display { font-size: min(clamp(76px, 11vw, 168px), 21cqi); }
.hero__eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); }
/* The eyebrow mark: the logo with its fifth step (the result) pulsing like a zone lighting up on the plate */
.logo-pulse { display: block; flex: none; color: var(--text); }
.logo-pulse__step { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px rgba(var(--acc-rgb), .8)); animation: pulse var(--pulse-dur) ease-in-out infinite; }
/* The eyebrow mark as a zone: a short band in the accent that lights up and fades like an active zone on the plate */
.hero__zone { display: block; flex: none; width: 18px; height: 4px; border-radius: 1px; background: var(--acc); box-shadow: 0 0 var(--dot-glow) var(--acc); animation: pulse var(--pulse-dur) ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .logo-pulse__step, .hero__zone { animation: none; } }
/* The h1 holds the wordmark and the lead, spaced like the rest of the column */
.hero__title { margin: 0; display: flex; flex-direction: column; gap: inherit; font-size: inherit; font-weight: inherit; }
.hero__lead { margin: 0; max-width: 30ch; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; color: var(--text-2); font-weight: 400; text-wrap: pretty; }
/* hero.style: claim in home.yaml: a sentence as the heading instead of the wordmark */
.hero__claim { margin: 0; max-width: 14ch; font-size: clamp(44px, 5.4vw, 80px); font-weight: 600; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.hero__visual { flex: 1 1 400px; max-width: 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* Copy and card stay side by side down to the mobile layout (the wordmark scales with its column) */
.hero__visual--result { flex: 1 1 380px; max-width: 460px; }

/* ---------- Hero result card ----------
   Always dark (.on-ink). home-hero.js places the bands and plays the loop through data-phase:
   -1 reset, 0 separate, 1 test for effect, 2 read the answer. Without JS or with reduced motion it shows phase 2. */
.hero-result { background: var(--ink); border: 1px solid rgba(var(--white-rgb), .08); border-radius: var(--radius-lg); padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 20px; max-width: 460px; width: 100%; }
.hero-result__label { margin: 0 0 -8px; font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; color: var(--glow); }
.hero-result__q { margin: 0; font-size: var(--fs-7); line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.hero-result__q strong { color: var(--text); font-weight: 600; }
/* The plate is a crop of the process plate (.plate) from the start line to the front: same surface,
   10 % grid, pencil start line, glowing solvent front and zones in the compound colours (--z, --a from
   home-hero.js). The effect look (.fx-layer, .fx-zone) is the one of the incubated plate. */
.hero-result__plate { position: relative; container-type: inline-size; height: 210px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid rgba(var(--white-rgb), .14);
  background: var(--plate-grid), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ink), var(--white) 7%), color-mix(in oklab, var(--ink) 80%, black));
  background-size: 10% 10%, 10% 10%, auto; }
.hero-result__line { position: absolute; left: 4%; right: 4%; }
.hero-result__line--start { bottom: 10%; border-top: 1px dashed rgba(var(--white-rgb), .38); }
/* Solvent front: climbs from the start line with the zones, then stays as a faint trace (like the process plate) */
.hero-result__line--front { left: 0; right: 0; bottom: 90%; height: 1px; background: linear-gradient(90deg, transparent, var(--glow) 12%, var(--glow) 88%, transparent);
  opacity: .22; transition: bottom 1.3s var(--ease), opacity var(--reveal-dur) var(--ease); }
[data-phase="0"] .hero-result__line--front { opacity: 1; box-shadow: 0 0 12px var(--glow); }
[data-phase="-1"] .hero-result__line--front { bottom: 10%; opacity: 1; }
/* Applied sample band on the start line, one per lane */
.hero-result__sample { position: absolute; bottom: 10%; width: 11%; height: 4px; margin-bottom: -2px; border-radius: 1px; background: color-mix(in srgb, var(--glow) calc(var(--a) * 100%), transparent); opacity: .35; box-shadow: 0 0 6px rgba(var(--glow-rgb), .5); transition: opacity var(--reveal-dur) var(--ease); }
.hero-result__band { position: absolute; width: 11%; height: 5px; margin-bottom: -2px; border-radius: 1px; bottom: 10%;
  background: color-mix(in srgb, var(--z) calc(40% + var(--a) * 60%), transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--z) calc(var(--a) * 60%), transparent); opacity: .8;
  transition: bottom 1.3s var(--ease), opacity var(--reveal-dur) var(--ease); }
.hero-result__fx { opacity: 0; transition: opacity var(--reveal-dur) var(--ease); }
/* Testing for an effect: the cell layer comes up and the other zones step back, as on the incubated plate */
:is([data-phase="1"], [data-phase="2"]) :is(.hero-result__band:not(.is-active), .hero-result__sample) { opacity: .15; }
:is([data-phase="1"], [data-phase="2"]) .hero-result__fx { opacity: 1; }
.hero-result__band.is-active { opacity: 0; transition: opacity var(--reveal-dur) var(--ease); }
.hero-result__tag { position: absolute; transform: translateY(30%); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--glow); color: var(--ink);
  font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; opacity: 0; transition: opacity var(--reveal-dur) var(--ease) .2s; }
.hero-result__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero-result__steps li { border-top: 1px solid rgba(var(--glow-rgb), .18); font-size: var(--fs-2); font-weight: 500; line-height: 1.3; color: var(--muted); transition: color .4s, border-color .4s; }
/* Each step title jumps to that step (home-hero.js); the button fills the cell so the line above counts as well */
.hero-result__step { display: block; width: 100%; margin: 0; padding: 10px 0 4px; border: 0; background: none; color: inherit; font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.hero-result__steps li { cursor: pointer; }
.hero-result__steps li:hover { color: var(--text); }
.hero-result__step:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-sm); }
.hero-result__steps li.is-done { color: var(--text-2); border-top-color: var(--glow); }
.hero-result__steps li.is-now { color: var(--on-dark-hi); border-top-color: var(--glow); }
/* One caption per step, stacked in one cell so the card keeps its height */
.hero-result__caption { margin: -6px 0 0; display: grid; font-size: var(--fs-4); line-height: 1.4; color: var(--text-2); }
.hero-result__caption > span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .4s ease, transform .4s ease; }
/* home-hero.js marks the current caption (a step without text keeps the previous one); without JS the last one with text */
.hero-result__caption > .is-now, html:not(.js) .hero-result__caption > :not(:empty):not(:has(~ :not(:empty))) { opacity: 1; transform: none; }
.hero-result__answer { margin: 0; padding-top: 18px; border-top: 1px solid rgba(var(--glow-rgb), .18); display: flex; align-items: baseline; gap: 10px;
  font-size: var(--fs-7); font-weight: 600; opacity: 0; transition: opacity var(--reveal-dur) var(--ease); }
.hero-result__value { font-size: 36px; letter-spacing: -.03em; line-height: 1; color: var(--glow); }
[data-phase="1"] .hero-result__band.is-active, [data-phase="2"] .hero-result__band.is-active { opacity: 1; }
[data-phase="2"] .hero-result__tag, [data-phase="2"] .hero-result__answer { opacity: 1; }
/* The reset between loops jumps instead of fading */
[data-phase="-1"] :is(.hero-result__band, .hero-result__sample, .hero-result__fx, .hero-result__tag, .hero-result__answer, .hero-result__steps li, .hero-result__line--front) { transition: none; }
/* No JS: the finished result */
html:not(.js) .hero-result__answer { opacity: 1; }
/* Desktop: hero + stats bar share the first view, so the card scales with the viewport height */
@media (min-width: 901px) {
  .hero { min-height: max(440px, calc(100svh - var(--nav-h, 65px) - var(--stats-h, 150px))); }
  .hero__inner { padding-top: clamp(24px, 4vh, 40px); padding-bottom: clamp(24px, 4vh, 40px); }
  .hero-result { gap: 16px; padding: 20px 24px 22px; }
  .hero-result__plate { height: clamp(140px, 22vh, 210px); }
  .hero-result__answer { padding-top: 14px; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .hero-result { gap: 12px; }
  .hero-result__value { font-size: 30px; }
  .hero__copy { gap: 20px; }
  .hero-result__caption { font-size: var(--fs-3); }
}
/* Mobile: no hero animation; the hero copy and the key facts fill the first screen (see "Mobile layer" at the end) */
@media (max-width: 640px) {
  .hero__visual { display: none !important; }
}


/* ---------- Plate ----------
   10 × 10 cm plate: 1 mm = 1 % (1cqw). Geometry and timing come from plate.js, which generates the
   @keyframes per plate family (.plate--home, .plate--sim) and mode. The base styles below are each
   step's finished state, which is also the still shown when animations are paused or reduced, when
   a single run (.plate--once) has ended and on a still (.plate--still). */
.plate { position: relative; width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ink), var(--white) 7%), var(--ink)); border: 1px solid rgba(var(--white-rgb), .14); box-shadow: 0 30px 80px -30px rgba(var(--acc-rgb), .35); container-type: inline-size; isolation: isolate; }
.plate__grid { position: absolute; inset: 0; background-image: var(--plate-grid); background-size: 10% 10%; }
/* Start line, 10 mm from the bottom (pencil line, drawn in at the start of the application) */
.plate__start { position: absolute; left: 5%; right: 5%; bottom: 10%; border-top: 1px dashed rgba(var(--white-rgb), .38); transform-origin: left; }
.plate--application .plate__start { animation: draw .5s var(--ease) both; }
.plate__run { position: absolute; inset: 0; animation: run var(--dur) linear infinite both; }
.plate--once .plate__run { animation: none; }
.plate--still *, .plate--still *::before, .plate--still *::after { animation: none !important; }
.plate__run > * { position: absolute; }
/* Sample bands 8 mm × 1 mm on the start line, sprayed in two passes; --a is the band's strength */
.plate__area { bottom: 10%; width: 8%; height: 1%; border-radius: 1px; --c: color-mix(in srgb, var(--glow) calc(var(--a) * 100%), transparent); background: repeating-linear-gradient(to top, var(--c) 0 .42cqw, color-mix(in srgb, var(--c) 70%, transparent) .42cqw .5cqw); box-shadow: 0 0 6px color-mix(in srgb, var(--glow) calc(var(--a) * 50%), transparent); }
.plate__area { opacity: .35; }
.plate--application .plate__area { opacity: 1; }
.plate--detection .plate__area { opacity: 1; }
/* Separated zones (position set in home-hero.js); --z is the compound's own colour, --a its strength */
.plate__zone { width: 8.4%; height: 1.2%; border-radius: 1px; background: color-mix(in srgb, var(--z) calc(var(--a) * 100%), transparent); box-shadow: 0 0 6px color-mix(in srgb, var(--z) calc(var(--a) * 60%), transparent); opacity: .7; transform-origin: center; }
.plate--detection .plate__zone { opacity: 1; }
/* Overlays, so the animations can fade them in: the zones' and bands' glow under UV */
.plate__area::after, .plate__zone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
.plate__area::after { background: color-mix(in srgb, var(--glow) calc(var(--a) * 85%), transparent); box-shadow: 0 0 8px color-mix(in srgb, var(--glow) calc(var(--a) * 70%), transparent); }
.plate__zone::after { background: color-mix(in srgb, color-mix(in srgb, var(--z) 70%, var(--white)) calc(var(--a) * 100%), transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--z) calc(var(--a) * 100%), transparent); }
.plate--detection .plate__zone::after { box-shadow: 0 0 12px var(--z); }
.plate--detection :is(.plate__area, .plate__zone)::after { opacity: 1; }
/* Solvent front at 50 mm: bright while developing, a faint trace afterwards */
.plate__front { left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow) 12%, var(--glow) 88%, transparent); box-shadow: 0 0 12px var(--glow); transform: translateY(-80cqw); }
.plate:not(.plate--development) .plate__front { opacity: .22; box-shadow: none; }
.plate__wet { left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to top, color-mix(in srgb, var(--glow) 11%, transparent), color-mix(in srgb, var(--glow) 5%, transparent)); transform-origin: bottom; transform: scaleY(.8); }
/* Top view of the nozzle: a ring over the spray spot */
.plate__nozzle { left: 0; bottom: 0; width: 3.2%; height: 3.2%; margin: 0 0 -1.6% -1.6%; border-radius: 50%; border: 1px solid rgba(var(--on-dark-rgb), .9); background: radial-gradient(circle, var(--white) 0 18%, rgba(var(--acc-rgb), .6) 30%, transparent 70%); box-shadow: 0 0 10px rgba(var(--on-dark-rgb), .5); opacity: 0; }
/* Nebulizer aerosol: an uneven haze over the whole plate at once (the droplets are far too small to
   see), and the even wet coat underneath. The step ends nebulous, so that is also its still. */
.plate__mist { inset: -8%; opacity: 0; background: radial-gradient(ellipse 60% 45% at 30% 35%, rgba(var(--on-dark-rgb), .2), transparent), radial-gradient(ellipse 55% 50% at 72% 68%, rgba(var(--on-dark-rgb), .16), transparent), radial-gradient(ellipse 45% 40% at 60% 25%, rgba(var(--on-dark-rgb), .1), transparent), rgba(var(--on-dark-rgb), .18); filter: blur(2px); }
.plate__film { inset: 0; background: rgba(var(--on-dark-rgb), .08); opacity: 0; }
.plate--derivatization .plate__film, .plate--derivatization .plate__mist { opacity: 1; }
/* Incubation and the effect view: the glowing twin of a zone with an effect (.fx-zone below) */
.plate__fxz { width: 8.4%; height: 1.2%; }
.plate__heat { inset: 0; background: radial-gradient(circle at 50% 55%, rgba(233, 165, 107, .42), transparent 70%); opacity: .3; }
/* Detection: UV illumination, camera frame, line-by-line read-out with a densitogram per track */
/* UV light: a deep blue mixed from the plate's petrol, so it reads as UV but stays in the page palette */
.plate__uv { inset: 0; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--ink) 45%, var(--uv)), color-mix(in srgb, var(--ink) 62%, var(--uv-deep))); }
.plate__frame { inset: 5%; opacity: .85; --l: var(--on-dark); background: linear-gradient(var(--l), var(--l)) left top / 8% 2px, linear-gradient(var(--l), var(--l)) left top / 2px 8%, linear-gradient(var(--l), var(--l)) right top / 8% 2px, linear-gradient(var(--l), var(--l)) right top / 2px 8%, linear-gradient(var(--l), var(--l)) left bottom / 8% 2px, linear-gradient(var(--l), var(--l)) left bottom / 2px 8%, linear-gradient(var(--l), var(--l)) right bottom / 8% 2px, linear-gradient(var(--l), var(--l)) right bottom / 2px 8%; background-repeat: no-repeat; }
.plate__flash { inset: 0; background: var(--white); opacity: 0; }
.plate__scan { left: 0; right: 0; bottom: 0; height: 1px; background: rgba(var(--white-rgb), .8); box-shadow: 0 0 10px rgba(var(--white-rgb), .7); opacity: 0; }
.plate__trace { inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate__trace-line { fill: none; stroke: var(--white); stroke-width: 1.1; stroke-linejoin: round; opacity: .75; }

/* ---------- Biological effect ----------
   One look on every plate (hero card, process plate, simulator): active zones glow, everything else
   steps back. Follows --glow / --glow-rgb, so it changes with the accent. */
:root { --fx-glow: color-mix(in srgb, var(--glow) 70%, var(--white)); }
.fx-layer { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 40% 45%, rgba(var(--glow-rgb), .08), transparent), rgba(var(--glow-rgb), .07); }
.fx-zone { border-radius: 1px; background: var(--fx-glow); box-shadow: 0 0 14px 2px rgba(var(--glow-rgb), .6); }
/* Doubled so it wins over a step's own zone opacity; the keyframes still animate it */
.fx-dim.fx-dim { opacity: .15; }

/* ---------- 01 Process ---------- */
.process { padding-bottom: var(--section-pad-sm); gap: 40px; }
/* The "Technical details" link sits beside the lead (on the baseline of its last line) so the heading and the step box fit one screen */
.process__head { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px 48px; }
.process__head .more-link { align-self: auto; }
.steps { display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.steps__tabs { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.steps__list { display: flex; flex-direction: column; }
.step-tab { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 24px 28px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); text-align: left; cursor: pointer; transition: color .45s var(--ease), background .45s var(--ease); }
.step-tab:hover { color: var(--text); background: var(--hover-tint); }
/* List numbers (process tabs, use cases, the technology page) share one style: mono, 12px, accent when active */
.step-tab__n { transition: color .45s var(--ease); }
.step-tab__name { font-size: var(--fs-12); font-weight: var(--step-tab-weight); letter-spacing: -.015em; }
.step-tab__arrow { margin-left: auto; font-family: var(--f-mono); color: var(--acc); opacity: 0; transform: translateX(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.step-tab.is-active { background: var(--raised); color: var(--text); }
.step-tab.is-active .step-tab__n { color: var(--acc); }
.step-tab.is-active .step-tab__name { font-weight: var(--step-tab-weight-active); }
.step-tab.is-active .step-tab__arrow { opacity: 1; transform: none; }
.steps__counter { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.steps__body { flex: 2 1 520px; min-width: 0; display: flex; flex-wrap: wrap; gap: 40px; padding: 40px; }
/* The counter sits under the plate (desktop only, see the 640px rules) */
.steps__visual { flex: 1 1 260px; max-width: clamp(240px, 100svh - 580px, 360px); min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.steps__text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.steps__title { margin: 0; font-size: var(--fs-14); font-weight: 600; letter-spacing: -.015em; line-height: 1; }
.steps__drop { display: none; }
.steps__desc { margin: 0; font-size: var(--fs-7); line-height: 1.6; color: var(--text-2); font-weight: 400; text-wrap: pretty; }
.steps__plate, .steps__text { transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
.steps__plate.is-leaving, .steps__text.is-leaving { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
.steps__plate.is-entering { animation: stepIn .7s var(--ease) both; }
.steps__text.is-entering { animation: stepIn .7s var(--ease) .08s both; }

/* ---------- Stats: the dark lead cell ("a + b") with two mini plates, then the numbers ---------- */
.stats { border-bottom: 1px solid var(--line); background: var(--surface); }
.stats__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; padding-block: 14px; }
.stat { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 24px; border-right: 1px solid var(--line); }
.stat:nth-child(2) { padding-left: 48px; }
.stat:last-child { padding-right: 0; border-right: 0; }
.stat__num { font-size: clamp(44px, 4.6vw, 64px); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.stat__unit { font-size: .45em; color: var(--acc); }
.stat__label { color: var(--muted); }
.stat--combo { margin-right: 24px; padding: 24px 32px; border-right: 0; border-radius: var(--radius-lg); background: var(--ink); }
.stat__bio { color: var(--glow); }
/* Headline + mini plate pair: compounds on the left, the same zones after the bioassay on the right */
.sl { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.sl__line { font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--text); text-wrap: balance; }
.sl__viz { display: flex; align-items: center; gap: 14px; flex: none; }
.sl__arrow { font-size: var(--fs-6); line-height: 1; color: var(--muted); }
.sl__plate { position: relative; width: clamp(64px, 6.5vw, 100px); aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid rgba(var(--white-rgb), .14);
  background: var(--plate-grid), rgba(var(--white-rgb), .03); background-size: 20% 20%; }
.sl__plate::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 10%; border-top: 1px dashed rgba(var(--white-rgb), .3); }
.sl__plate i { position: absolute; left: var(--x); bottom: var(--y); width: 18%; height: 4px; margin-bottom: -2px; border-radius: 1px; background: var(--c); opacity: .9; }
.sl__plate--fx i { background: rgba(var(--white-rgb), .12); opacity: 1; }
.sl__plate--fx i.is-fx { background: color-mix(in srgb, var(--glow) 70%, var(--white)); box-shadow: 0 0 10px 2px rgba(var(--glow-rgb), .6); animation: slGlow 3.2s ease-in-out infinite; }
@keyframes slGlow { 0%, 100% { box-shadow: 0 0 6px 1px rgba(var(--glow-rgb), .45); } 50% { box-shadow: 0 0 14px 3px rgba(var(--glow-rgb), .75); } }
@media (max-width: 480px) { .sl { flex-direction: column; align-items: flex-start; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .sl__plate--fx i.is-fx { animation: none; } }
/* Tablets: the combo card spans the row, the other two facts sit side by side under it */
@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 16px 0; }
  .stat--combo { grid-column: 1 / -1; margin: 0 0 8px; }
  .stat:nth-child(2) { padding-left: 0; padding-right: 20px; }
  .stat:nth-child(3) { padding-left: 20px; padding-right: 0; }
}
@media (max-width: 480px) {
  .stat--combo { padding: 24px; }
}

/* ---------- 02 Applications ---------- */
.apps { --app-dur: var(--reveal-dur); display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.apps__list { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.app-row { display: flex; align-items: baseline; gap: 20px; padding: 26px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer; color: var(--muted); transition: color var(--app-dur) ease; }
.app-row__n { width: 22px; transition: color var(--app-dur) ease; }
.app-row__label { flex: 1; font-size: clamp(20px, 1.9vw, 24px); font-weight: 500; letter-spacing: -.015em; line-height: 1.1; }
.app-row__arrow { font-family: var(--f-mono); font-size: var(--fs-10); line-height: 1; opacity: 0; transition: opacity var(--app-dur) ease; }
.app-row.is-active { color: var(--text); }
.app-row.is-active .app-row__n { color: var(--acc); }
.app-row.is-active .app-row__arrow { opacity: 1; }
.apps__panel { flex: 1 1 380px; min-width: 0; align-self: stretch; background: var(--ink); border-radius: var(--radius-lg); padding: 24px 40px 32px; display: grid; }
.app-panel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; opacity: 0; visibility: hidden; }
.app-panel.is-active { opacity: 1; visibility: visible; }
.app-panel__list { margin: 0; padding: 0; list-style: none; }
.app-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-8); line-height: 1.45; text-wrap: pretty; }
.app-item::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--glow); margin-top: .5em; }
.app-panel.is-active.animate .app-item { animation: appRow var(--app-dur) ease both; animation-delay: calc(var(--i) * 50ms); }

/* ---------- 03 What you get: benefits + package as two lists of items (home-sections.js builds the items) ---------- */
.section.offer { row-gap: 0; }
.offer .section-head { margin-bottom: 48px; }
@media (min-width: 901px) {
  .offer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
  .offer .section-head { grid-column: 1 / -1; }
}
.offer__group { display: flex; flex-direction: column; align-items: stretch; }
.offer__label { padding: 0 0 16px; border-bottom: 2px solid var(--text); }
.offer__label h3 { margin: 0; font-size: var(--fs-11); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: var(--text); }
.offer__grid { display: flex; flex-direction: column; }
/* One item: title beside its text; the number only shows on phones, where the items fold out */
.offer__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-2); transition: opacity .9s var(--ease), transform .35s var(--ease); }
.offer__n { display: none; }
.offer__item h4 { margin: 0; font-size: var(--fs-9); font-weight: 600; line-height: 1.3; color: var(--text); }
.offer__item p { margin: 0; font-size: var(--fs-5); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 900px) {
  .offer__group + .offer__group { margin-top: 48px; }
  .offer__item { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 05 Origin ---------- */
/* Text and figure in two columns, stacked below 900px */
.origin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.origin__text { min-width: 0; padding-top: 4px; display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-8); line-height: 1.6; color: var(--text-2); font-weight: 400; }
.origin__text p { margin: 0; text-wrap: pretty; }
.origin__figure { position: relative; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.origin__figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); }
/* The stage keeps its 16:10 box; the canvas reaches above it (home-model.js), so the model is not cut off */
.origin__stage { position: relative; isolation: isolate; flex: none; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.origin__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: grab; opacity: 0; transition: opacity var(--reveal-dur) var(--ease); }
.origin__canvas:active { cursor: grabbing; }
.origin__canvas:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
.origin__stage[data-model-state="ready"] .origin__canvas { opacity: 1; }
.origin__hint { position: absolute; left: 0; top: calc(var(--cap-y, 0px) + 20px); line-height: 16px; color: var(--muted); pointer-events: none; transition: opacity var(--reveal-dur) var(--ease); }
.origin__hint-touch { display: none; }
@media (hover: none) { .origin__hint-fine { display: none; } .origin__hint-touch { display: inline; } }
/* Plain scroll over the model: show how to zoom (home-model.js) */
.origin__stage.is-zoom-hint .origin__hint { opacity: 1; color: var(--text); transition-duration: var(--hover-dur); }
/* Reset: the only button, bottom right, shown on hover (always on touch screens) */
.origin__reset { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(var(--line-rgb), .2); border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .3s var(--ease), color var(--hover-dur), border-color var(--hover-dur); }
.origin__stage:hover .origin__reset, .origin__reset:focus-visible { opacity: 1; }
@media (hover: none) { .origin__reset { opacity: .8; } }
.origin__reset:hover { color: var(--text); border-color: rgba(var(--line-rgb), .45); }
/* Hotspots: positioned in 3D, projected to the canvas every frame */
.origin__hotspots { position: absolute; inset: 0; pointer-events: none; }
.hotspot { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .3s var(--ease); }
.hotspot.is-hidden { opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.hotspot__btn { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; pointer-events: auto; }
/* White ring + dark halo so the dot stands out on both the dark body and the light aluminium. */
.hotspot__btn::before, .hotspot__btn::after { content: ""; position: absolute; left: 9px; top: 9px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.hotspot__btn::before { background: var(--acc); border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .45); z-index: 1; transition: transform var(--hover-dur) var(--ease); }
.hotspot__btn::after { border: 2px solid #fff; box-shadow: 0 0 0 1px var(--acc); animation: hotspot 2s ease-out infinite; }
.hotspot__btn:hover::before, .hotspot.is-open .hotspot__btn::before { transform: scale(1.2); }
.hotspot__btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -4px; }
@keyframes hotspot { 0% { transform: scale(1); opacity: 1 } 100% { transform: scale(2.6); opacity: 0 } }
.hotspot__label { position: absolute; left: 18px; top: 0; transform: translateY(-50%); width: max-content; max-width: 240px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--nav-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--text-2); font-size: var(--fs-3); line-height: 1.4; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--hover-dur) var(--ease), visibility 0s var(--hover-dur); z-index: 2; }
.hotspot.is-left .hotspot__label { left: auto; right: 18px; }
.hotspot:hover .hotspot__label, .hotspot.is-open .hotspot__label, .hotspot__btn:focus-visible + .hotspot__label { opacity: 1; visibility: visible; transition-delay: 0s; }
.hotspot:hover, .hotspot.is-open { z-index: 3; }
.hotspot__name { color: var(--text); }
.hotspot__step { font-size: var(--fs-2); letter-spacing: .06em; color: var(--acc); }
/* 3D model states: idle (not requested yet), loading, ready, failed.
   Loading shows a faint outline; idle and failed show the render. */
/* Poster: a render of the device, the same size and place as the 3D model's default view */
.origin__figure .origin__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 12%; border-radius: 0; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .12)); transition: opacity var(--reveal-dur) var(--ease); }
.origin__stage[data-model-state="loading"] .origin__poster, .origin__stage[data-model-state="ready"] .origin__poster { opacity: 0; pointer-events: none; }
.origin__outline { position: absolute; left: 50%; top: 50%; height: 78%; transform: translate(-50%, -50%); fill: none; stroke: var(--line-2); stroke-width: .35; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--reveal-dur) var(--ease); pointer-events: none; }
.origin__outline path { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.origin__outline-back { stroke-dasharray: 3 4; opacity: .6; }
.origin__stage[data-model-state="loading"] .origin__outline { opacity: 1; }
.origin__stage:not([data-model-state="ready"]) :is(.origin__reset, .origin__hint, .origin__hotspots) { display: none; }
.origin__status { position: absolute; left: 14px; bottom: 14px; color: var(--muted); }
.origin__status > * { display: none; }
.origin__status-loading { align-items: center; gap: 8px; }
.origin__stage[data-model-state="loading"] .origin__status-loading { display: inline-flex; }
.origin__stage[data-model-state="failed"] .origin__status-failed { display: inline; }
/* Failed: the note sits just below the render, above the caption (which moves down to make room) */
.origin__stage[data-model-state="failed"] .origin__status { left: 0; bottom: auto; top: calc(100% + 12px); line-height: 16px; }
.origin__figure:has(> .origin__stage[data-model-state="failed"]) figcaption { padding-top: 24px; }
.origin__stage[data-model-state="idle"] .origin__load { display: inline-flex; align-items: center; }
.origin__load { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--text-2); background: var(--overlay); backdrop-filter: blur(6px); border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 7px 12px; cursor: pointer; transition: background var(--hover-dur), color var(--hover-dur); }
.origin__load:hover { background: var(--raised); color: var(--text); }
.origin__figure figcaption { color: var(--muted); }
/* With the model on screen the caption sits 12px below the device (--cap-y is set by home-model.js). */
.origin__figure:has(> .origin__stage[data-model-state="ready"]) figcaption { position: absolute; left: 0; top: var(--cap-y, 100%); pointer-events: none; transition: opacity .3s var(--ease); }
.origin__figure.is-covered figcaption, .origin__figure.is-covered .origin__hint { opacity: 0; }
#main > #origin { overflow-anchor: none; overflow-x: clip; }
/* The line closing the Origin section, linking to the benchmark on technology.html#validation */
.bench-proof { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.bench-proof__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.bench-proof__tag { font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; color: var(--acc); }
.bench-proof__claim { font-size: var(--fs-11); font-weight: 600; line-height: 1.3; }
.bench-proof__link { font-size: var(--label-lg-size); letter-spacing: var(--label-lg-track); text-transform: uppercase; color: var(--acc); transition: color var(--hover-dur); }
.bench-proof:hover .bench-proof__link { color: var(--text); }

/* ---------- Benchmark: lane scrubber (technology.html, Fig. 3), an ink card inside the article ---------- */
.bench4 {
  display: flex; flex-direction: column; gap: 32px; padding: 40px; border-radius: var(--radius-lg); background: var(--ink);
  /* .on-ink sets the text and accent tokens; the readout sits on a deeper ink */
  --bg: color-mix(in oklab, var(--ink), black 18%); --surface: color-mix(in oklab, var(--ink), black 18%);
}
.regression { width: 100%; height: auto; display: block; overflow: visible; }
.regression .ax { stroke: rgba(var(--line-rgb), calc(.25 * var(--line-k))); }
.regression .grid { stroke: rgba(var(--line-rgb), calc(.07 * var(--line-k))); }
.regression .tick { fill: var(--muted); font: 11px var(--f-mono); }
.regression .axlabel { fill: var(--muted); font: 11px var(--f-mono); letter-spacing: .08em; }
.regression .fit--acc { stroke: var(--acc); stroke-width: 2; }
.regression .fit--ref { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.regression .pt--acc { fill: var(--acc); stroke: var(--bg); stroke-width: 1.5; }
.regression .pt--ref { fill: none; stroke: var(--muted); stroke-width: 1.2; }
.bench4__m { display: none; } /* phone-only lane slider, shown in the max-width: 640px block */
.bench4__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 40px; }
.bench4__titles { display: flex; flex-direction: column; gap: 14px; }
.bench4__title { margin: 0; font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -.015em; line-height: 1; }
.bench4__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bench4__key { display: grid; grid-template-columns: 12px auto auto; gap: 10px; align-items: center; white-space: nowrap; font-size: var(--fs-6); font-weight: 500; color: var(--muted); }
.bench4__key .mono { padding-left: 6px; font-size: var(--fs-3); }
.bench4__key--acc { font-weight: 600; color: var(--text); }
.bench4__key--acc .mono { color: var(--acc); }
.bench4__dot { width: 11px; height: 11px; flex: none; box-sizing: border-box; border: 1.5px solid var(--muted); }
.bench4__key--acc .bench4__dot, .bench4__plate-wrap:not(.bench4__plate-wrap--ref) .bench4__dot { border: 0; border-radius: 50%; background: var(--acc); }
.bench4__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: stretch; }
.bench4__plates { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bench4__plate-wrap { display: flex; flex-direction: column; gap: 8px; }
.bench4__label { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.bench4__plate-wrap:not(.bench4__plate-wrap--ref) .bench4__label { color: var(--acc); }
.bench4__plate { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1518 / 520; background: var(--surface); }
.bench4__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.bench4__lanes { position: absolute; inset: 0; }
.bench4__lane { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; background: transparent; cursor: pointer; transition: background var(--hover-dur) ease, box-shadow var(--hover-dur) ease; }
.bench4__lane:hover { background: rgba(var(--glow-rgb), .1); }
.bench4__lane.is-on { background: rgba(var(--glow-rgb), .22); box-shadow: inset 0 0 0 2px var(--glow); }
.bench4__lane:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
.bench4__amounts { display: grid; grid-template-columns: repeat(12, 1fr); row-gap: 2px; font-size: var(--fs-2); color: var(--muted); text-align: center; container-type: inline-size; }
/* Too narrow for 12 labels in one line (the card beside the contents list, phones): every second label drops to a
   second line, each staying under its lane (bench4.js gives every label its column) */
@container (max-width: 380px) { .bench4__amounts > :nth-child(even) { grid-row: 2; } }
.bench4__amounts .is-on { color: var(--acc); font-weight: 600; }
.bench4__axis { color: var(--muted); text-align: center; }
.bench4__chart { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; }
.bench4__readout { display: grid; grid-template-columns: auto 1fr 1fr; gap: 18px; align-items: baseline; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line); }
.bench4__amt { font-size: var(--fs-13); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bench4__sig { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-7); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.bench4__sig .mono { font-weight: 400; }
.bench4__sig--acc { color: var(--text); }
.bench4__sig--acc .mono { color: var(--acc); }
.bench4__svg { width: 100%; height: auto; overflow: visible; }
.bench4__guide { stroke: var(--acc); stroke-width: 1; stroke-dasharray: 3 4; opacity: .6; }
.bench4 .regression .pt--acc, .bench4 .regression .pt--ref { transition: r var(--hover-dur), stroke-width var(--hover-dur); }
.bench4 .regression .pt--acc.is-on { r: 7.5; }
.bench4 .regression .pt--ref.is-on { stroke-width: 2.4; stroke: var(--text); }
.bench4__rep { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-4); color: var(--muted); }
.bench4__rep strong { color: var(--text); font-weight: 600; }
.bench4__rep span[title] { cursor: help; text-decoration: underline dotted rgba(var(--line-rgb), .5); text-underline-offset: 3px; }
@media (max-width: 900px) {
  .bench4__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .bench4 { padding: 24px 20px; }
  .bench4__readout { grid-template-columns: 1fr 1fr; }
  .bench4__amt { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .origin { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
/* Sized in em so the icon scales with the text it follows and sits on its baseline, at cap height */
.ext-link { display: inline; margin-left: .2em; white-space: nowrap; text-decoration: none !important; transition: opacity var(--hover-dur); }
.ext-link svg { display: inline-block; width: .85em; height: .85em; vertical-align: -.08em; }
.ext-link:hover { opacity: .75; }

/* ---------- 06 Comparison ----------
   One table for both modes: a method tab hides every column but chromnil and the picked method (home-compare.js).
   Without JS all methods and all explanations are shown. */
.cmp { --cmp-us: color-mix(in srgb, var(--acc) 9%, transparent); --cmp-us-open: color-mix(in srgb, var(--acc) 15%, transparent); --cmp-open: var(--hover-tint); gap: 32px; }
.cmp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 24px; }
.cmp__body { display: flex; flex-direction: column; gap: 32px; }
.cmp__tabs { display: none; }
/* The tabs sit directly on the table: their ink rule replaces the table's top rule, and the negative margin cancels .cmp__body's gap */
.js .cmp__tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: -32px; border-bottom: 2px solid var(--text); }
.cmp__tabs + .cmp__scroll .cmp__table { border-top: 0; }
.cmp__tabs button { border: 0; padding: 9px 14px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; cursor: pointer; font-size: var(--fs-4); font-weight: 600; color: var(--muted); transition: background var(--hover-dur), color var(--hover-dur); }
.cmp__tabs button:hover { background: var(--hover-tint); color: var(--text); }
.cmp__tabs button[aria-pressed="true"] { background: var(--cmp-us); color: var(--text); }
/* position: relative keeps the absolutely positioned .sr-only labels inside the scroller, which would otherwise widen the page between 641 and 900px */
.cmp__scroll { overflow-x: auto; position: relative; }
.cmp__scroll:focus-visible { outline-offset: 2px; border-radius: var(--radius-sm); }
.cmp__table { width: 100%; min-width: 900px; border-collapse: collapse; table-layout: fixed; border-top: 2px solid var(--text); }
.cmp[data-mode="one"] .cmp__table { min-width: 0; }
.cmp__table thead td:first-child { width: 20%; }
.cmp[data-mode="one"] .cmp__table thead td:first-child { width: 40%; }
.cmp__table .is-off { display: none; }
.cmp__table th, .cmp__table td { padding: 10px 8px; border-bottom: 1px solid rgba(var(--ink-rgb), .1); text-align: center; vertical-align: middle; font-weight: inherit; }
.cmp__table .is-us { background: var(--cmp-us); }
.cmp__table thead th { padding: 16px 8px; font-size: var(--fs-4); font-weight: 700; }
.cmp__table abbr { text-decoration: none; }
.cmp__row { cursor: pointer; transition: background var(--hover-dur); }
.cmp__row:hover, .cmp__group.is-open .cmp__row { background: var(--cmp-open); }
.cmp__row th { text-align: left; padding: 0; }
.cmp__toggle { display: flex; align-items: baseline; gap: 10px; width: 100%; min-height: 58px; padding: 16px 8px; border: 0; background: transparent; color: var(--text); font-size: var(--fs-5); font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.cmp[data-mode="one"] .cmp__toggle { font-size: var(--fs-7); }
.cmp__chev { flex: none; width: 14px; font-size: var(--fs-4); color: var(--acc); }
.cmp__group.is-open .cmp__chev::after { transform: rotate(90deg); }
html:not(.js) .cmp__chev { display: none; }
.cmp__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: var(--fs-5); font-weight: 700; border: 1.5px solid; }
.cmp__mark--yes { background: var(--acc); border-color: var(--acc); color: var(--acc-tint); }
/* Harvey balls: full = yes, half = partly, empty ring = no */
.cmp__mark--partly { border-color: var(--acc); background: linear-gradient(90deg, var(--acc) 50%, transparent 50%); }
.cmp__mark--no { border-color: rgba(var(--ink-rgb), .6); }
.cmp__mark--sm { width: 18px; height: 18px; font-size: var(--fs-1); border-width: 1.5px; }
/* The explanations sit in one cell spanning the row; its grid repeats the table's column widths */
.cmp__detail > td { padding: 0; background: var(--cmp-open); }
.cmp__notes { display: grid; grid-template-columns: 20% repeat(var(--cmp-n), minmax(0, 1fr)); }
.cmp[data-mode="one"] .cmp__notes { grid-template-columns: 40% repeat(2, minmax(0, 1fr)); }
.cmp__notes > p { margin: 0; padding: 4px 10px 22px; font-size: var(--fs-3); line-height: 1.45; color: var(--text-2); text-align: left; text-wrap: pretty; }
.cmp[data-mode="one"] .cmp__notes > p { font-size: var(--fs-5); }
.cmp__notes > .is-us { background: var(--cmp-us-open); color: var(--text); }
.cmp__notes > .cmp__why { padding-left: 32px; font-size: var(--fs-4); color: var(--muted); }
.cmp__note-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:is(.cmp__group.is-open, .cmp__group.is-closing) .cmp__row > * { border-bottom-color: transparent; }
.js .cmp__group:not(.is-open, .is-closing) .cmp__detail { display: none; }
.cmp__group.is-open.animate .cmp__notes > p { animation: appRow .35s var(--ease) both; }
.cmp__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: var(--fs-2); letter-spacing: .04em; line-height: 1.5; color: var(--muted); }
.cmp__legend { display: flex; gap: 16px; }
.cmp__legend > span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Teaser ---------- */
.teaser { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.teaser__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 60%, rgba(var(--acc-rgb), .16), transparent 60%); }
.teaser__inner { position: relative; padding-top: 140px; padding-bottom: var(--section-pad); display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.teaser__pill { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(var(--acc-rgb), .4); border-radius: var(--radius-pill); color: var(--acc); }
.teaser__word {
  position: relative; margin: -.1em -.15em; padding: .1em .15em; font-weight: 600; font-size: clamp(64px, 12vw, 184px); line-height: .92; letter-spacing: -.03em;
  color: transparent;
  background-image: linear-gradient(100deg, transparent 35%, var(--text) 48%, var(--acc) 52%, transparent 65%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text;
  animation: shimmer 5s ease-in-out infinite;
}
/* Outline drawn around the merged letter shapes (SVG filter), so the font's overlapping contours don't show at the joins */
.teaser__word::after {
  content: attr(data-text) / ""; position: absolute; inset: 0; padding: inherit; pointer-events: none;
  color: #000; filter: url(#teaser-outline);
}
.teaser-outline__ink { flood-color: var(--teaser-stroke); }
.sr-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.teaser__sub { margin: 0; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; color: var(--text-2); font-weight: 400; max-width: 32ch; }

/* Home band: left-aligned, the wordmark between two rules, text left and button right */
#one .teaser__glow { display: none; }
#one .teaser__inner { align-items: stretch; gap: 0; text-align: left; padding-top: 104px; padding-bottom: var(--section-pad-md); }
#one .teaser__pill { align-self: flex-start; gap: 16px; padding: 0 0 28px; border: 0; border-radius: 0; }
#one .teaser__word {
  margin: 0; padding: .32em 0 .26em; border-block: 1px solid var(--line);
  color: var(--text); background: none; animation: none;
}
#one .teaser__word::after { content: none; }
#one .teaser__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; padding-top: 52px; flex-wrap: wrap; }
#one .teaser__sub { font-weight: 300; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; max-width: 42ch; }

/* ---------- 06 Contact ---------- */
.contact { padding-bottom: var(--section-pad-sm); }
.contact__h { line-height: 1.02; display: flex; flex-wrap: wrap; column-gap: .28em; }
.rot { display: inline-block; overflow: hidden; white-space: nowrap; padding-bottom: .08em; color: var(--acc); transition: width var(--reveal-dur) var(--ease); vertical-align: bottom; }
.rot__word { display: inline-block; }
.rot__word.in { animation: wordIn var(--reveal-dur) var(--ease) both; }
.contact__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); overflow: hidden; }
.contact__card { background: var(--bg); padding: 36px 32px; display: flex; flex-direction: column; gap: 40px; color: var(--text); transition: background var(--hover-dur); }
.contact__card:hover { background: var(--raised); color: var(--text); }
.contact__meta { display: flex; justify-content: space-between; color: var(--muted); }
.contact__arrow { font-size: var(--fs-4); }
.contact__value { display: flex; align-items: center; gap: 14px; font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.03em; }
.contact__value--wrap { display: block; overflow-wrap: anywhere; }
.contact__in { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid var(--text); border-radius: var(--radius-sm); font-size: var(--fs-10); font-weight: 700; letter-spacing: 0; flex: none; }
.supporters { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding-top: 8px; }
.supporters__label { display: flex; flex-direction: column; gap: 6px; }
.supporters__label .mono { color: var(--muted); }
.supporters__title { font-size: var(--fs-11); font-weight: 500; letter-spacing: -.01em; }
.supporters__logos { display: flex; flex-wrap: wrap; gap: 12px; }
.supporters__tile { background: var(--raised); border-radius: var(--radius-sm); padding: 14px 20px; display: flex; align-items: center; }
.supporters__tile--tight { padding: 10px 16px; }
.supporters__tile img { display: block; width: auto; }
a.supporters__tile { transition: transform .35s var(--ease); }
a.supporters__tile:hover { transform: translateY(-4px); }

/* ---------- Footer ----------
   A full-bleed brand-teal band (fixed colours, not themed): the shadow and clip-path paint the teal to the
   viewport edges while the content stays in .wrap. */
.footer { display: flex; flex-direction: column; gap: 32px; padding-top: 64px; padding-bottom: 28px; background: var(--ink); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); }
.footer a { color: var(--on-dark); }
.footer a:hover { color: var(--glow); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 64px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.footer__col { display: flex; flex-direction: column; gap: 4px; min-width: 130px; }
.footer__heading { color: var(--on-dark-muted); padding-bottom: 8px; }
.footer__link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 30px; font-family: var(--f-sans); font-size: var(--fs-4); font-weight: 500; }
.footer__badge { margin-left: 10px; padding: 2px 8px; border: 1px solid rgba(var(--acc-rgb), .4); border-radius: var(--radius-pill); font-family: var(--f-mono); font-size: var(--fs-2); letter-spacing: .06em; color: var(--acc); }
.footer a.footer__link[aria-current="page"] { color: var(--on-dark-hi); }
.footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer a.footer__brand { display: flex; align-items: center; gap: 12px; align-self: flex-start; margin-bottom: 18px; color: var(--on-dark-hi); }
.footer__brand .logo { width: 28px; height: 28px; display: block; flex: none; opacity: .9; }
.footer__label { color: var(--on-dark-muted); }
.footer a.footer__mail { font-family: var(--f-sans); font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; color: var(--on-dark-hi); }
.footer a.footer__mail:hover { color: var(--glow); }
.footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--on-dark-line); color: var(--on-dark-muted); }
/* The legal links are underlined, so they read as links and the copyright doesn't */
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.footer__legal a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: underline; text-decoration-color: rgba(var(--on-dark-rgb), .4); text-underline-offset: 4px; transition: color var(--hover-dur), text-decoration-color var(--hover-dur); }
.footer__legal a[aria-current="page"] { color: var(--on-dark-hi); text-decoration-color: var(--on-dark-hi); }
.footer__legal a:hover { color: var(--glow); text-decoration-color: var(--glow); }
/* LinkedIn: at the end of the legal line */
.footer a.footer__in { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-right: -8px; font-family: var(--f-sans); font-size: var(--fs-6); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--on-dark-hi); }
.footer a.footer__in:hover { color: var(--glow); }
.footer__meta .footer__legal { margin-left: auto; margin-right: 8px; }

/* Phones: e-mail and LinkedIn first, then the two link columns side by side, the brand, and the legal lines stacked */
@media (max-width: 640px) {
  .footer.wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 16px; padding: 56px 24px 32px; }
  .footer__top, .footer__contact { display: contents; }
  .footer__label { grid-column: 1 / -1; grid-row: 1; letter-spacing: .12em; }
  .footer a.footer__mail { justify-self: start; grid-column: 1 / -1; grid-row: 2; margin-top: 10px; font-size: var(--fs-11); overflow-wrap: anywhere; }
  .footer__meta .footer__legal { grid-column: 1; grid-row: 1; margin: 0; }
  .footer a.footer__in { grid-column: 2; grid-row: 1; width: 44px; height: 44px; margin-right: -12px; font-size: var(--fs-10); }
  .footer__meta > span { grid-column: 1 / -1; grid-row: 2; margin-top: 8px; }
  .footer__nav { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--on-dark-line); }
  .footer__col { min-width: 0; }
  .footer__link { font-size: var(--fs-7); }
  .footer a.footer__brand { grid-column: 1 / -1; grid-row: 4; margin: 40px 0 0; }
  .footer__meta { grid-column: 1 / -1; grid-row: 5; display: grid; grid-template-columns: 1fr auto; align-items: center; margin-top: 40px; padding-top: 20px; }
}
/* Hover: the mark turns once (motion.js adds .is-turning; the turn plays to the end and never reverses), until it
   looks the same again: the triangle a third of a turn anticlockwise, the five steps (LOGO = "steps" in build.py) a full turn clockwise. The
   mark and wordmark keep their colours (the two rules below override the general link hover). */
.logo--triangle { --turn: -120deg; }
.logo--steps { --turn: 360deg; }
.is-turning .logo, .logo-resume .nav__brand .logo { animation: logoTurn .9s var(--ease) var(--turn-delay, 0s); }
@media (prefers-reduced-motion: reduce) { .is-turning .logo, .logo-resume .nav__brand .logo { animation: none; } }
a.nav__brand:hover { color: var(--text); }
.footer a.footer__brand:hover { color: var(--on-dark-hi); }

/* ---------- Scroll reveal ---------- */
.js [data-reveal].reveal-pending { opacity: 0; transform: translateY(16px); }
.js [data-reveal].reveal-armed { transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: opacity, transform; }

/* ---------- Keyframes ---------- */
@keyframes run { 0% { opacity: 0 } 5%, 93% { opacity: 1 } 100% { opacity: 0 } }
@keyframes draw { from { transform: scaleX(0) } to { transform: none } }
@keyframes pulse { 50% { opacity: var(--pulse-dim) } }
@keyframes shimmer { 0% { background-position: 120% 0 } 100% { background-position: -20% 0 } }
@keyframes wordIn { 0% { transform: translateY(105%); opacity: 0 } 100% { transform: translateY(0); opacity: 1 } }
@keyframes appRow { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); filter: blur(3px) } to { opacity: 1; transform: none; filter: none } }
@keyframes logoTurn { from { transform: none } to { transform: rotate(var(--turn, 360deg)) } }

/* Looping animations pause while their section is offscreen (set in home-reveal.js) */
.is-offscreen, .is-offscreen *, .is-offscreen *::after { animation-play-state: paused !important; }
/* "Pause animations" in the nav stops every looping animation (set in motion.js, remembered) */
/* Instead of freezing mid-frame, the plates jump to their finished still (the base styles above).
   Same still as prefers-reduced-motion below; resuming restarts the loops from the beginning. */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; }
.motion-paused .teaser__word { background-position: 50% 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .steps__tabs { border-right: 0; border-bottom: 1px solid var(--line); }
  .apps__list { flex-basis: 100%; }
  .apps__list .apps__panel { margin: 0 0 24px; }
  .apps__list .app-row.is-active { border-bottom-color: transparent; }
  .apps__list .app-panel:not(.is-active) { display: none; }
  .apps__panel[hidden] { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section { gap: 40px; }
  .section, #main > section { --section-pad: 88px; --section-pad-sm: 88px; }
  /* The process plate is hidden on mobile (the hero card too, see "Hero result card") */
  .steps__visual { display: none; }
  .nav__inner { gap: 12px; }
  .nav__links { gap: 12px; }
  .step-tab { padding: 18px 20px; }
  .step-tab__name { font-size: var(--fs-10); }
  .steps__body { padding: 24px 20px; gap: 28px; }
  .steps__title { font-size: var(--fs-12); }
  /* Each step's text opens under its own tab (.steps__drop, see home-sections.js); the shared body and counter are desktop only */
  .steps__tabs { border-bottom: 0; }
  .steps__body, .steps__counter { display: none; }
  .steps__drop.is-open { display: block; padding: 4px 20px 28px; border-bottom: 1px solid var(--line); background: var(--raised); }
  .apps__list, .apps__panel { flex-basis: 100%; }
  .apps__panel { padding: 24px 24px 20px; }
  .app-item { font-size: var(--fs-6); padding: 18px 0; gap: 16px; }
  .cmp__head { margin-bottom: 8px; }
  .cmp[data-mode="one"] .cmp__toggle { font-size: var(--fs-5); }
  /* Head-to-head on a phone: the explanations stack under the row instead of in narrow columns */
  .cmp[data-mode="one"] .cmp__notes { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 8px 20px; }
  .cmp[data-mode="one"] .cmp__notes > p { padding: 14px 16px; border-radius: var(--radius-sm); font-size: var(--fs-5); background: rgba(var(--ink-rgb), .04); }
  .cmp[data-mode="one"] .cmp__notes > .is-us { background: var(--cmp-us-open); }
  .cmp[data-mode="one"] .cmp__notes > .cmp__why { padding: 0 0 4px 24px; background: none; font-size: var(--fs-4); }
  .cmp[data-mode="one"] .cmp__note-name { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; margin-bottom: 6px; font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; color: var(--muted); }
  .cmp[data-mode="one"] .is-us .cmp__note-name { color: var(--acc); }
  .teaser__inner { padding-top: 100px; padding-bottom: 88px; }
  .contact__card { padding: 28px 24px; gap: 28px; }
}

/* ---------- Windows high contrast / forced colours ---------- */
@media (forced-colors: active) {
  .step-tab.is-active, .app-row.is-active { outline: var(--focus-width) solid Highlight; outline-offset: -2px; }
  .cmp__tabs button[aria-pressed="true"], .tsteps__tab[aria-selected="true"], .sim__chip[aria-pressed="true"] { outline: var(--focus-width) solid Highlight; }
  .dot, .plate, .cmp__mark, .hero-result__plate, .bench4__dot, .hotspot__btn { forced-color-adjust: none; }
  .bench4__lane.is-on { outline: var(--focus-width) solid Highlight; outline-offset: -2px; }
  .teaser__word { color: CanvasText; -webkit-text-stroke: 0; background: none; }
  .teaser__word::after { content: none; }
  .btn:not(.btn--ghost), .contact__card { border: 1px solid CanvasText; }
}

/* Below 760px the text links and the Contact pill give way to the "Menu" button (Contact is in the sheet) */
@media (max-width: 760px) {
  .nav__link, .nav__links .btn { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .teaser__word { background-position: 50% 0; }
  .js [data-reveal].reveal-pending { opacity: 1; transform: none; }
}

/* ---------- Wordmark: Lexend 500 ---------- */
:root { --f-wordmark: 'Lexend', system-ui, sans-serif; }
:is(.nav__brand span, .footer__brand span, .hero .display, .teaser__word, .wordmark) { font-family: var(--f-wordmark); font-weight: 500; font-stretch: normal; }
/* "chromnil one" inside running text and headings (the wordmark filter in build.py) */
.wordmark { letter-spacing: -.02em; white-space: nowrap; }
:is(.nav__brand span, .hero .display) { letter-spacing: -.03em; }
.teaser__word { letter-spacing: -.035em; }
.footer__brand span { text-transform: none; letter-spacing: -.01em; font-size: var(--fs-11); }

/* ---------- Process: top tabs · Use cases: counter + title ---------- */
@media (min-width: 641px) {
  .steps { flex-direction: column; flex-wrap: nowrap; }
  .steps__tabs { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps__list { flex-direction: row; }
  .step-tab { flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 4px 12px; padding: 22px; border-bottom: 0; border-right: 1px solid var(--line); }
  .step-tab:last-child { border-right: 0; }
  .step-tab__name { font-size: var(--fs-step-tab); letter-spacing: -.01em; }
  .step-tab__arrow { display: none; }
  .step-tab.is-active { box-shadow: inset 0 2px 0 var(--acc); }
  .steps__body { flex: none; }
}
/* Five tabs in a row get narrow before the stacked mobile layout takes over */
@media (min-width: 641px) and (max-width: 960px) {
  .steps__list { overflow-x: auto; scrollbar-width: none; }
  .steps__list::-webkit-scrollbar { display: none; }
  .step-tab { flex: 1 0 auto; padding: 18px 16px; }
}
@media (max-width: 960px) {
  :root { --fs-step-tab: var(--fs-7); }
}
.app-panel.is-active.animate { animation: stepIn .7s var(--ease) both; }
.app-panel.is-active.animate .app-item { animation: none; }

/* ---------- Home page: section backgrounds ---------- */
/* Sequence: page → white (key facts) → warm (use cases) → white (process) → page (comparison)
   → white + dark band (origin) → warm (what you get) → dark (chromnil one) → page (contact) */
#product { background: var(--surface); }
#product .steps { background: var(--bg); }
#comparison { background: var(--bg); }
#main > #origin { background: var(--surface); }
#applications, #package { background: var(--light-warm); }

/* chromnil one: dark accent, colours from the accent (also the band on the waitlist confirmation page) */
#one, .wl-band {
  background: var(--ink); border-bottom: 0;
  --bg: var(--ink); --teaser-stroke: rgba(var(--glow-rgb), .7);
}

/* ---------- Technology page (technology.html) ---------- */
/* Full-width sections like the home page: head and lead, Which compound causes the effect? (three columns),
   Run an analysis in five steps (white: step tabs, the live plate, the result), For the lab (tabs).
   The numbers 01–05 belong to the five process steps. */
html:has(.tech) { scroll-padding-top: 0; }
.tech p { margin: 0; text-wrap: pretty; }
/* A section link puts the head (not the section's top padding) 89px from the top, under the 65px nav;
   "#main > section" so this beats the home page rule, which counts on an 80px scroll padding */
#main > section.tsec { scroll-margin-top: calc(89px - var(--section-pad)); }
/* Snap (see "One pager" at the top): the page head is the first snap point (at the very top, its offset the height of the sticky nav, so it never slides under it), then each section's head */
#main.tech > .page-head { scroll-snap-align: start; scroll-margin-top: var(--nav-h, 65px); }
.tsec--steps { background: var(--surface); }
.tsec__head { gap: 20px; }
.tsec__title { margin: 0; max-width: 20ch; font-size: var(--fs-section-title); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
/* Head row: title and intro on the left, a tag on the right */
.tsec__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; }

/* Lead under the page head, then a hairline over the first section */
.tech-top { padding-top: 48px; }
.tech-lead { color: var(--text); max-width: 720px; }
.tech-lead p { max-width: 62ch; }
.tsec--principle > .section { position: relative; padding-top: 56px; margin-top: 56px; }
.tsec--principle > .section::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: var(--line-2); }
@media (max-width: 640px) {
  .tsec--principle > .section { padding-top: 40px; margin-top: 40px; }
  .tsec--principle > .section::before { left: 16px; right: 16px; }
}

.tech-tag { color: var(--muted); }
.tech-intro { max-width: 62ch; color: var(--text-2); }
.tech-note { max-width: 62ch; font-size: var(--fs-5); line-height: 1.6; color: var(--muted); }
.tech-split { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.tech-prose { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; color: var(--text-2); }
.tech-prose strong { color: var(--text); }
.tech-rule { border-top: 2px solid var(--text); }
.tech ol, .tech ul { list-style: none; margin: 0; padding: 0; }

/* Figures and captions: "Fig. n" / "Table n" in ink */
.tech-fig { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tech-cap { font-size: var(--fs-2); line-height: 1.6; color: var(--muted); }
caption.tech-cap { caption-side: bottom; text-align: left; padding-top: 12px; }
.tech-cap__label { color: var(--text); }

/* Which compound causes the effect? Three questions: chemical analysis | bioassay | both on one plate.
   The mini plates are the key facts' .sl__plate (home page); in the third, the zones with an effect glow. */
.tprin { gap: 48px; }
.tprin .tsec__title { max-width: 24ch; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.12; }
.tprin__head { display: flex; flex-wrap: wrap; align-items: last baseline; justify-content: space-between; gap: 24px 48px; }
.tprin__head .more-link { align-self: auto; }
.tech .tq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tq__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tq__viz { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin-bottom: 10px; border-radius: var(--radius-lg); background: var(--ink); }
.tq__plate { width: 34%; }
.tq__plate--both i { opacity: .3; }
.tq__plate--both i.is-fx { opacity: 1; background: color-mix(in srgb, var(--glow) 70%, var(--white)); box-shadow: 0 0 10px 2px rgba(var(--glow-rgb), .65); animation: slGlow 3.2s ease-in-out infinite; }
/* The bioassay: one well, the whole sample glowing at once */
.tq__well { width: 26%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(var(--white-rgb), .18); background: radial-gradient(circle, rgba(var(--glow-rgb), .75), rgba(var(--glow-rgb), .25) 60%, rgba(var(--glow-rgb), .08)); box-shadow: 0 0 24px 4px rgba(var(--glow-rgb), .3); }
.tq__label { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.tq__item--ours .tq__label { color: var(--acc); }
.tq__q { margin: 0; font-size: var(--fs-11); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.tq__a { font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); }
.tech .tq__gap { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: var(--fs-5); line-height: 1.5; color: var(--muted); }
.tq__gap--ok { color: var(--acc); font-weight: 600; }
@media (max-width: 900px) {
  .tech .tq { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tq__viz { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) { .tq__plate--both i.is-fx { animation: none; } }

/* Drawings (Fig. 2): inline SVGs from site/assets/figures/ (figure_svg in build.py), so the labels are in
   Geist Mono; tech.js scales them up (--fig-u) where the drawing is narrower than its 320 units */
.tech-svg { display: block; width: 100%; height: auto; }
/* Data tab, Fig. 2: one zone from plate to result in three panels, each a drawing, label, heading and text */
.tflow { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.tech .tflow__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin: 0; padding: 0; list-style: none; }
.tflow__item { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tflow__item .tech-svg { margin-bottom: 10px; }
.tflow__label { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--acc); }
.tflow__title { margin: 0; font-size: var(--fs-11); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tflow__text { margin: 0; font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
@media (max-width: 900px) { .tech .tflow__list { grid-template-columns: minmax(0, 1fr); } .tflow__item .tech-svg { max-width: 480px; } }

/* Run an analysis in five steps: the step tabs and Run over one card. The card holds the live plate (left), the
   current step's panel (right) and, in step 05 only, the result across both (tech.js). */
.tsteps { gap: 32px; }
.tsteps__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 40px; }
.tsteps__bar[hidden] { display: none; }
/* The Run button drops under the tabs once the five tabs would get narrower than their names */
.tsteps__bar .tsteps__tabs { flex: 1 1 800px; min-width: 0; }
.tsteps__run { flex: none; min-width: 210px; }
.tsteps__card { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px 64px; align-items: start; padding: 40px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.sim__fig { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sim__fig [data-sim-caption][hidden] { display: none; }
.tsteps__body { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.tsteps__panel { display: flex; flex-direction: column; gap: 20px; }
.tsteps__panel[hidden] { display: none; }
.tsteps__name { margin: 0; font-size: var(--fs-10); font-weight: 600; }
.tsteps__name .mono { font-size: var(--fs-4); font-weight: 400; color: var(--acc); }
.tsteps__summary { font-size: var(--fs-11); font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--text); }
.tsteps__text { font-size: var(--fs-7); line-height: 1.65; color: var(--text-2); }

/* Step tabs, here and over the details: a 3px rule over each, accent for the current step, a lighter accent for the
   steps already done */
.tsteps__tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.tsteps__tabs[hidden] { display: none; }
.tsteps__tab { display: flex; align-items: baseline; gap: 10px; padding: 18px 0 4px; border: 0; border-top: 3px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: var(--fs-step-tab); font-weight: var(--step-tab-weight); letter-spacing: -.01em; text-align: left; cursor: pointer; transition: border-color .3s var(--ease); }
.tsteps__tab > * { transition: opacity .3s var(--ease); }
.tsteps__tab .mono { font-size: var(--fs-step-num); font-weight: 400; color: var(--acc); }
.tsteps__tab[aria-selected="false"] { color: rgba(var(--ink-rgb), .55); }
.tsteps__tab[aria-selected="false"] .mono { color: var(--muted); opacity: .8; }
.tsteps__tab.is-done { border-top-color: rgba(var(--acc-rgb), .45); }
.tsteps__tab[aria-selected="true"] { border-top-color: var(--acc); font-weight: var(--step-tab-weight-active); }
.tsteps__tab:hover { color: var(--text); }
.tsteps__tab:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 4px; border-radius: var(--radius-sm); }
@media (max-width: 768px) {
  .tsteps__tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: max-content; }
  .tsteps__tab { min-width: 150px; }
}

/* With JS the tabs carry the names (tech.js: is-tabbed) */
.is-tabbed .tsteps__name, .is-tabbed .tdet__title { display: none; }

/* The plate itself is built by plate.js (.plate--sim); tech.js lays the tracks' hit areas and labels
   over it. --l is the left edge of a track's band, from the same geometry as the home page plate. */
.sim-plate { position: relative; container-type: inline-size; }
.sim-tracks { position: absolute; inset: 0; pointer-events: none; }
.sim-track, .sim-track > * { position: absolute; }
.sim-track { inset: 0; }
.sim-track__hit { top: 0; bottom: 0; left: calc(var(--l) - 1.5%); width: 11%; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; pointer-events: auto; transition: background var(--hover-dur) var(--ease); }
.sim-track__hit:hover { background: rgba(var(--white-rgb), .04); }
.sim-track__hit:focus-visible { outline: var(--focus-width) solid var(--glow); outline-offset: -2px; }
.sim-track.is-on .sim-track__hit { background: rgba(var(--white-rgb), .05); box-shadow: inset 0 0 0 1.5px rgba(var(--glow-rgb), .55); }
.sim-track__label { left: calc(var(--l) - 1.5%); width: 11%; bottom: 3%; text-align: center; font-size: var(--fs-2); letter-spacing: .06em; color: rgba(var(--white-rgb), .6); }
.sim-track.is-on .sim-track__label { color: var(--glow); }
/* The selected track's trace on the plate stands out */
.sim-plate .plate__trace-line { opacity: .4; transition: opacity var(--reveal-dur) var(--ease); }
.sim-plate .plate__trace-line.is-on { opacity: 1; stroke: var(--fx-glow); }
/* Detection: chemical (UV) image or effect view, above the plate in step 05 only */
.sim__views { display: flex; gap: 4px; align-self: flex-start; padding: 3px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .2); }
.sim__views[data-off] { display: none; }
.sim__view { padding: 6px 12px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; transition: background var(--hover-dur) var(--ease), color var(--hover-dur) var(--ease); }
.sim__view:hover { background: var(--hover-tint); }
.sim__view[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

/* Read the result: hint and sample buttons | densitogram and zone table */
.tres { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px 64px; padding-top: 32px; border-top: 1px solid var(--line-2); }
.tres[hidden] { display: none; }
.tres__intro { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tres__title { margin: 0; font-size: var(--fs-11); font-weight: 600; letter-spacing: -.01em; }
.tres__hint { font-size: var(--fs-5); line-height: 1.55; color: var(--text-2); }
.tres__controls { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; min-width: 0; }
.tres__label { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.tres__data { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tres:not([hidden]) { animation: tresIn var(--reveal-dur) var(--ease) both; }
@keyframes tresIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .tres:not([hidden]) { animation: none; } }
.sim__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sim__chip { padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(var(--ink-rgb), .2); background: transparent; color: var(--text); font-size: var(--fs-3); cursor: pointer; transition: background var(--hover-dur), color var(--hover-dur), border-color var(--hover-dur); }
.sim__chip:hover { background: var(--hover-tint); }
.sim__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
@media (max-width: 900px) {
  .tsteps__card, .tres { grid-template-columns: minmax(0, 1fr); }
  .tsteps__card { padding: 24px; gap: 28px; }
  .tsteps__card .sim__fig { max-width: 420px; }
}

/* Densitogram: grey chemical trace from stage 3 (derivatization), accent effect trace from stage 4 */
.dens { display: flex; flex-direction: column; gap: 6px; }
.dens__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--muted); }
.dens__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dens__grid { stroke: rgba(var(--ink-rgb), .08); }
.dens__tick, .dens__axis { font-family: var(--f-mono); font-size: calc(11px * var(--dens-u, 1)); fill: var(--muted); }
.dens__axis { letter-spacing: 1px; }
.dens__base { stroke: rgba(var(--ink-rgb), .4); }
.dens__bio-area { fill: rgba(var(--glow-rgb), .35); stroke: none; }
.dens__bio { fill: none; stroke: var(--acc); stroke-width: 2; }
.dens__chem { fill: none; stroke: rgba(var(--ink-rgb), .55); stroke-width: 1.5; }
.dens__bio-area, .dens__bio, .dens__chem { transition: opacity var(--reveal-dur); }
.dens__svg[data-chem="false"] .dens__chem, .dens__svg[data-bio="false"] :is(.dens__bio, .dens__bio-area) { opacity: 0; }
.dens__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-2); color: var(--muted); }
.dens__legend > span { display: flex; align-items: center; gap: 6px; }
.dens__key { width: 16px; }
.dens__key--chem { height: 0; border-top: 1.5px solid rgba(var(--ink-rgb), .55); }
.dens__key--bio { height: 8px; background: rgba(var(--glow-rgb), .35); border-top: 2px solid var(--acc); }
.sim__zones { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
.sim__zones th { padding: 6px 0; font-weight: 400; text-align: left; color: var(--muted); border-bottom: 1px solid rgba(var(--ink-rgb), .2); }
.sim__zones td { padding: 7px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .08); color: var(--muted); }
.sim__zones tr.is-active td { color: var(--text); }
.sim__zones tr.is-strong td { font-weight: 600; }
.sim__dot { --dot-color: var(--glow); display: inline-block; margin-right: 8px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) {
  .tsteps__card * { transition: none !important; }
}

/* For the lab: the step tabs (.tsteps__tabs) over five panels */
.tdet__panel { display: flex; flex-direction: column; gap: 32px; }
.tdet__panel[hidden] { display: none; }
.tdet__panel:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 8px; border-radius: var(--radius-sm); }
.tdet__title { margin: 0; font-size: var(--fs-14); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.tdet__panel--sources { gap: 56px; }
.tdet__block { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 96px; }
.tdet__sub { margin: 0; font-size: var(--fs-11); font-weight: 600; letter-spacing: -.01em; }

/* ---------- Sideways rows up to 768px: one behaviour everywhere ----------
   The step tabs (five steps, details) and the result's sample chips (like the home page comparison tabs up to
   640px) stay on one line and scroll sideways. They run out to the edge of their surface (the screen, or the steps
   card), fade at the cut-off edge while there is more to see, and keep the selected item in view (motion.js). */
@media (max-width: 768px) {
  .tsteps__tabs, .sim__chips {
    --row-bleed: 32px;
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 2px;
  }
  /* Only a row that doesn't fit runs out to the edge; its content box stays the same width, so this can't flip back */
  :is(.tsteps__tabs, .sim__chips).is-scrollable { margin-right: calc(-1 * var(--row-bleed)); padding-right: var(--row-bleed); }
  :is(.tsteps__tabs, .sim__chips)::-webkit-scrollbar { display: none; }
  /* In the steps card the edge is the card's own padding */
  .sim__chips { --row-bleed: 24px; }
  :is(.tsteps__tab, .sim__chip) { flex: none; min-height: 44px; white-space: nowrap; }
  /* The cut-off edge fades while there is more to see (is-scrollable / is-start / is-end from motion.js) */
  .is-scrollable:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
  .is-scrollable.is-end:not(.is-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  .is-scrollable:not(.is-start):not(.is-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 56px), transparent); }
}
@media (max-width: 640px) {
  .tsteps__tabs { --row-bleed: 16px; }
  .tsteps__run { flex: 1 1 auto; }
}

/* Hardware tab */
.tech-fig--hw { flex: 1 1 360px; min-width: 0; }
.tech-fig__frame { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); }
.tech-fig__frame img { display: block; width: 100%; height: auto; }
.tech .tech-modules { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; }
.tech-modules li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.tech-modules__name { font-size: var(--fs-7); font-weight: 600; }
.tech-modules__text { font-size: var(--fs-5); line-height: 1.55; color: var(--text-2); }

/* Tables: Table 1 (specifications) and Origin */
.tech-specs, .tech-origin { border-collapse: collapse; }
.tech-specs { width: 100%; font-size: var(--fs-6); }
.tech-specs tbody { border-top: 2px solid var(--text); }
.tech-specs th { width: 38%; padding: 14px 16px 14px 0; text-align: left; vertical-align: top; font-weight: 400; color: var(--muted); border-bottom: 1px solid var(--line-2); }
.tech-specs td { padding: 14px 0; line-height: 1.5; border-bottom: 1px solid var(--line-2); }
/* Desktop: the rows fill two columns, top to bottom (--rows: half the rows, set in the template) */
@media (min-width: 901px) {
  .tech-specs { display: flex; flex-direction: column; }
  .tech-specs caption { order: 1; display: block; }
  .tech-specs tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: 48px; }
  .tech-specs tr { display: grid; grid-template-columns: 38% minmax(0, 1fr); }
  .tech-specs th { width: auto; }
}
/* Validation tab: the two results side by side, "What this means", then the benchmark (Fig. 3) */
/* Key markers as in the benchmark chart below: filled dot = 2LabsToGo, ring = status quo */
.tech-key { flex: none; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--muted); }
.is-ours > * > .tech-key { border: 0; background: var(--acc); }
.tech-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 48px; }
.tech-metric { display: flex; flex-direction: column; gap: 20px; }
.tech-metric__head { display: flex; flex-direction: column; gap: 6px; }
.tech-metric__title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tech-metric__unit { margin-left: 6px; font-size: var(--fs-2); font-weight: 400; letter-spacing: .06em; color: var(--muted); }
.tech-metric__note { font-size: var(--fs-5); line-height: 1.5; color: var(--text-2); }
.tech-metric__vals { margin: 0; display: flex; flex-direction: column; border-top: 2px solid var(--text); }
.tech-metric__vals > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.tech-metric__vals dt { display: flex; align-items: center; gap: 10px; font-size: var(--fs-5); color: var(--muted); }
.tech-metric__vals dd { margin: 0; font-size: var(--fs-14); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--muted); }
.tech-metric__vals .is-ours dt { font-weight: 600; color: var(--text); }
.tech-metric__vals .is-ours dd { color: var(--acc); }
.tech-metric__better { color: var(--muted); }
.tech-meaning { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; }
.tech-meaning__title { margin: 0; font-size: var(--fs-9); font-weight: 600; }
.tech .tech-meaning__list { display: flex; flex-direction: column; gap: 10px; }
.tech-meaning__list li { font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); }
.tech-meaning__list strong { color: var(--text); }
.tech-conditions { margin: 0; padding-bottom: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 32px; }
.tech-conditions > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid rgba(var(--ink-rgb), .08); font-size: var(--fs-4); line-height: 1.5; }
.tech-conditions dt { color: var(--muted); padding-top: 2px; }
.tech-conditions dd { margin: 0; color: var(--text-2); }
.tech-origin thead :is(th, td) { padding: 10px 12px 10px 0; font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-track-tight); text-transform: uppercase; text-align: left; color: var(--muted); border-bottom: 2px solid var(--text); }
.tech-origin thead th:last-child { padding-right: 0; }
.tech-origin thead .is-ours { color: var(--acc); }
.tech-origin { flex: 1 1 320px; min-width: 0; font-size: var(--fs-5); }
.tech-origin tbody :is(th, td) { padding: 11px 12px 11px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.tech-origin tbody td:last-child { padding-right: 0; }
.tech-origin tbody th { font-weight: 600; }
.tech-origin__a { color: var(--muted); }

/* References (Method & sources tab) */
.tech-refs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-5); line-height: 1.6; }
.tech-refs__n { color: var(--acc); }

/* Orientation aids (orientation: in technology.yaml), each in the markup only when switched on */
.tsec__n { font-size: var(--label-size); letter-spacing: var(--label-track); color: var(--acc); }
.tsec__next { align-self: flex-start; }
.tsteps > .tsec__next { margin-top: 8px; }
/* Reading bar: 2px along the bottom edge of the sticky nav, filled by tech.js */
.readbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--acc); transform: scaleX(0); transform-origin: left; }
/* Section links in the nav, once the page head has scrolled under it (tech.js: is-past-head) */
.nav__sections { display: flex; gap: 24px; margin-right: auto; margin-left: 40px; font-family: var(--f-mono); font-size: var(--label-lg-size); letter-spacing: var(--label-lg-track); text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity var(--hover-dur), visibility var(--hover-dur); }
.is-past-head .nav__sections { opacity: 1; visibility: visible; }
.nav__sections a { color: var(--muted); padding-block: 6px; border-bottom: 2px solid transparent; text-decoration: none; }
.nav__sections a:hover { color: var(--text); }
.nav__sections a.is-current { color: var(--text); border-bottom-color: var(--acc); }
@media (max-width: 900px) { .nav__sections { display: none; } }

/* Links from the home page to technology.html */
.more-link { display: inline-flex; align-items: baseline; gap: 8px; align-self: flex-start; padding-block: 14px; margin-block: -14px; font-family: var(--f-mono); color: var(--acc); text-decoration: none; }
.more-link:hover { color: var(--text); }

/* ---------- Subpages: contents list (Privacy) ----------
   Sticky beside the article; below 1000px one title per row above it, and on phones (html.legal-acc)
   hidden, as the sections fold out there. */
.toc { flex: 0 0 240px; min-width: 0; position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; font-size: var(--fs-3); line-height: 1.35; }
.toc__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line-2); }
.toc__list a { display: flex; gap: 10px; padding: 7px 0 7px 14px; color: var(--text-2); }
.toc a:hover { color: var(--acc); }
@media (max-width: 999px) {
  .toc { flex: 1 1 100%; position: static; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
  .toc__list { gap: 0; border-left: 0; }
  .toc__list a { gap: 12px; padding: 8px 0; }
}

/* Numbers: contents 11px, list items 12px, section titles 13px; mono, tabular, accent when they mark a section */
.toc__list .mono { flex: none; width: 22px; font-size: var(--fs-2); color: var(--acc); }
:is(.step-tab__n, .app-row__n) { flex: none; font-family: var(--f-mono); font-size: var(--fs-step-num); font-weight: 400; font-variant-numeric: tabular-nums; }
.step-tab__n { color: var(--muted); }
.legal__n { flex: none; font-size: var(--fs-3); font-variant-numeric: tabular-nums; color: var(--acc); }

/* Running text on the subpages: one lead and one body size; links in it are accent and underlined */
:where(.lead-dark, .nf__lead, .tech-lead, .legal__intro) { font-size: var(--fs-9); line-height: 1.55; }
:where(.faq__a, .faq__more, .tech-intro, .tech-prose, .legal__body, .about__col p, .release__text > p, .press-about p) { font-size: var(--fs-7); line-height: 1.65; }
:is(.about__col .about__lead, .release__text > .release__lead) { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.5; font-weight: 500; color: var(--text); }
:is(.tech :is(p, li, dd, td) a, .faq__a a, .faq__more a, .legal__link, .imprint__mail) { color: var(--acc); text-decoration: underline; text-underline-offset: 3px; }
:is(.tech :is(p, li, dd, td) a, .faq__a a, .faq__more a, .legal__link, .imprint__mail):hover { color: var(--text); }

/* Term / value lists (Privacy definitions, Legal notice) */
:is(.legal__defs, .imprint__list) { margin: 0; display: flex; flex-direction: column; }
:is(.legal__defs, .imprint__list) > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 8px 32px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
:is(.legal__defs dt, .imprint__label) { font-family: var(--f-mono); font-weight: 400; color: var(--muted); padding-top: 3px; }
:is(.legal__defs, .imprint__list) dd { margin: 0; text-wrap: pretty; }
@media (max-width: 900px) { :is(.legal__defs, .imprint__list) > div { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Subpages: About, Privacy, Legal notice ---------- */
/* Page header (page_head in _macros.html): eyebrow, title and date over an ink rule; on the press page
   the contact box sits beside the title. The 404 page borrows the title style. */
.page-head__inner { padding-top: var(--page-head-top); display: flex; flex-direction: column; gap: 36px; }
.page-head__inner::after { content: ""; height: 2px; background: var(--text); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 64px; }
.page-head__text { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: var(--page-head-gap); }
.page-head__title { margin: 0; font-weight: 600; font-size: var(--fs-page-title); line-height: 1; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.page-head__date { color: var(--muted); }

/* Privacy */
.legal { padding-top: 48px; padding-bottom: var(--section-pad-md); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px 64px; }
.legal__body { flex: 1 1 440px; min-width: 0; max-width: 720px; display: flex; flex-direction: column; font-weight: 400; color: var(--text-2); }
.legal__body p { margin: 0; text-wrap: pretty; }
.legal__intro { padding-bottom: 40px; display: flex; flex-direction: column; gap: 18px; color: var(--text); }
.legal__sec { padding: 40px 0; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line-2); scroll-margin-top: 96px; }
.legal__title { display: flex; align-items: baseline; gap: 14px; }
.legal__title h2 { flex: 1; min-width: 0; }
.legal__sec h2 { margin: 0; font-size: var(--fs-13); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.legal__defs { border-top: 2px solid var(--text); }
.legal__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.legal__list li { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.legal__list li::before { content: ""; width: 6px; height: 6px; margin-top: .6em; border-radius: 2px; background: var(--acc); }
.legal__defs > div:last-child, .legal__list li:last-child { border-bottom: 0; }
.legal__link { word-break: break-all; }
.legal__mail { align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid var(--line-2); border-radius: var(--btn-radius); font-size: var(--fs-7); font-weight: 500; transition: border-color var(--hover-dur), background var(--hover-dur), color var(--hover-dur); }
.legal__mail:hover { border-color: var(--acc); background: rgba(var(--acc-rgb), .08); color: var(--text); }
.legal__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 2px solid var(--text); color: var(--muted); }
/* Guides (templates/guide.html): the short answer in a tinted box, terms as readable headings, links to read next */
.guide__answer { padding: 24px 28px; margin-bottom: 40px; gap: 10px; border-left: 3px solid var(--acc); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; background: rgba(var(--acc-rgb), .06); font-size: var(--fs-8); }
.guide__answer-label { margin: 0; font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--acc); }
.guide__terms > div { scroll-margin-top: 96px; }
.guide__terms dt { font-family: inherit; font-size: var(--fs-7); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); padding-top: 0; }
.guide__terms > div:target { background: rgba(var(--acc-rgb), .06); box-shadow: -12px 0 0 rgba(var(--acc-rgb), .06), 12px 0 0 rgba(var(--acc-rgb), .06); }
.guide-cmp { display: flex; flex-direction: column; gap: 12px; }
.guide-cmp table { width: 100%; border-collapse: collapse; font-size: var(--fs-5); }
.guide-cmp :is(th, td) { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.guide-cmp thead th { padding-top: 0; border-bottom: 2px solid var(--text); font-family: var(--f-mono); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.guide-cmp thead th.is-us { color: var(--acc); }
.guide-cmp tbody th { width: 30%; font-weight: 600; color: var(--text); }
.guide-cmp td.is-us { background: rgba(var(--acc-rgb), .05); }
.guide-cmp__why { display: block; margin-top: 4px; font-size: var(--fs-3); font-weight: 400; color: var(--muted); }
.guide-cmp__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; color: var(--text); }
.guide-cmp__foot { font-size: var(--fs-3); color: var(--muted); }
@media (max-width: 759px) {
  .guide-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .guide-cmp :is(tr, th, td) { display: block; width: auto; }
  .guide-cmp tbody tr { padding: 8px 0; border-bottom: 1px solid var(--line-2); }
  .guide-cmp tbody :is(th, td) { border: 0; padding: 8px 12px; }
  .guide-cmp tbody th { width: auto; padding-left: 0; }
  .guide-cmp td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
  .guide-cmp td.is-us::before { color: var(--acc); }
}
.guide__related { padding: 40px 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 16px; }
.guide__related-title { margin: 0; font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.guide__related ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.guide__related a { display: inline-flex; gap: 10px; padding: 10px 18px; border: 1px solid var(--line-2); border-radius: var(--btn-radius); font-weight: 500; transition: border-color var(--hover-dur), background var(--hover-dur); }
.guide__related a:hover { border-color: var(--acc); background: rgba(var(--acc-rgb), .08); }

/* Legal notice */
.imprint { padding-top: 48px; padding-bottom: var(--section-pad-md); }
.imprint__list { max-width: 880px; }
.imprint__row dd { font-size: var(--fs-8); line-height: 1.55; color: var(--text); }
:is(.imprint__addr, .legal__addr) { font-style: normal; display: flex; flex-direction: column; }
:is(.imprint__addr, .legal__addr) strong { font-weight: 600; }
.imprint__uid { font-size: var(--fs-6); }

/* About: one reading column, then the team with its heading in a narrow column beside the photos */
.about { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(56px, 8vw, 96px); }
.about__col { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.about__col p { margin: 0; color: var(--text-2); text-wrap: pretty; }

.about-team { display: flex; flex-wrap: wrap; gap: 16px 64px; padding-bottom: clamp(80px, 10vw, 120px); }
.about-team__title { flex: 0 0 240px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: var(--fs-11); font-weight: 600; }
.team { flex: 1 1 480px; min-width: 0; list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line-2);
        display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.member { display: flex; flex-direction: column; gap: 8px; }
.member__photo { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border: 1px solid var(--line-2); }
.member__name { margin: 0; padding-top: 4px; font-size: var(--fs-8); font-weight: 600; }
.member__role { margin: 0; color: var(--muted); }
/* Phones: all three photos stay in one row */
@media (max-width: 640px) {
  .team { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .member { gap: 6px; }
  .member__name { font-size: var(--fs-6); }
  .member__role { letter-spacing: .08em; }
}

/* Accordion (FAQ, media materials): native <details>, "+" / "−" in front of or after the title */
div.acc { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.acc__item { border-bottom: 1px solid var(--line-2); }
.acc__sum { list-style: none; display: flex; cursor: pointer; font-weight: 600; color: var(--text); }
.acc__sum::-webkit-details-marker { display: none; }
.acc__icon { flex: none; width: 14px; font-size: var(--fs-4); color: var(--acc); }
details.acc__item[open]:not(.is-closing) > summary .acc__icon::after { transform: rotate(90deg); }
/* Drawn "+" that turns into "−": the hidden glyph keeps size and baseline, the span's background is the
   horizontal bar, ::after the vertical bar that rotates flat when open */
:is(.acc__icon, .cmp__chev) { position: relative; background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat; }
:is(.acc__icon, .cmp__chev)::before { content: "+"; visibility: hidden; }
:is(.acc__icon, .cmp__chev)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.5px; height: 10px; margin: -5px 0 0 -.75px; background: currentColor; transition: transform .3s var(--ease); }
/* Fold-outs on phones (motion.js foldOut: Privacy, "What you get"; also the process steps and use
   cases in home-sections.js): the same drawn icon at the end of the title row, "−" while open */
.fold__icon { display: none; margin-left: auto; }
@media (max-width: 640px) {
  .fold__head .fold__icon { display: inline-block; }
  .fold:not(.is-closed) > .fold__head .fold__icon::after { transform: rotate(90deg); }
  .fold__head:has(.fold__btn:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
}

/* FAQ */
.faq { padding-top: 56px; padding-bottom: var(--section-pad); display: flex; flex-direction: column; gap: 48px; }
.faq__list { max-width: 900px; }
.faq__q { justify-content: space-between; align-items: baseline; gap: 24px; padding: 24px 0; font-size: var(--fs-10); line-height: 1.35; }
.faq__h { margin: 0; font: inherit; color: inherit; }
.faq__a { margin: 0; padding: 0 0 28px; max-width: 64ch; color: var(--text-2); text-wrap: pretty; }
.faq__more { margin: 0; color: var(--text-2); }

/* Press */
.press-contact { flex: 0 1 380px; min-width: 260px; background: var(--ink); padding: 32px; display: flex; flex-direction: column; gap: 12px; color: var(--on-dark-hi); text-decoration: none; transition: background var(--hover-dur); }
/* Dark boxes hover to the accent teal; their muted labels turn white there to keep 4.5:1 */
.press-contact:hover { background: var(--teal); color: var(--on-dark-hi); }
.press-contact:hover .press-contact__label { color: var(--on-dark-hi); }
.press-contact__label { color: var(--muted); }
.press-contact__mail { font-size: var(--fs-13); font-weight: 600; color: var(--on-dark-hi); overflow-wrap: anywhere; }
.press { padding-top: 40px; padding-bottom: var(--section-pad); display: flex; flex-direction: column; gap: 88px; }
.press [hidden] { display: none; }
.press-panel, .press-about { scroll-margin-top: calc(var(--nav-h, 65px) + 72px); }
.press-panel[role="tabpanel"]:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 8px; }
/* Tabs: text labels, the selected one underlined in ink on the bar's hairline; sticky under the nav (press.js sets --nav-h) */
.press-tabs:not([hidden]) { display: block; position: sticky; top: var(--nav-h, 65px); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line-2); }
.press-tabs__list { display: flex; gap: 56px; }
.press-tabs__tab { display: inline-flex; align-items: baseline; min-height: 64px; margin-bottom: -1px; padding: 18px 0 0; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 22px var(--f-sans); color: var(--muted); cursor: pointer; transition: color var(--hover-dur), border-color var(--hover-dur); }
.press-tabs__tab:hover { color: var(--text); }
.press-tabs__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); }
.press-tabs__tab:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.press-tabs__short { display: none; }
/* On desktop the tab labels name the sections, so the section titles above the lists are left out */
@media (min-width: 761px) {
  .press-tabs:not([hidden]) ~ .press :is(.press__row-head, #media-title) { display: none; }
  .press-tabs:not([hidden]) ~ .press .releases { margin-top: 0; }
  /* Tabs 22px, then group and box headings 18–20px, file names 16px */
  .press-about .press__h2 { font-size: var(--fs-10); }
}
.press__h2 { margin: 0; font-size: var(--fs-12); font-weight: 600; line-height: 1.2; }
.press__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.press__count { color: var(--muted); font-weight: 400; }
.press-releases { display: flex; flex-direction: column; gap: 8px; }
#releases:not([hidden]) { display: flex; flex-direction: column; gap: 56px; }
.releases { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.releases li { border-bottom: 1px solid var(--line-2); }
.release-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px; padding: 24px 0; color: var(--text); }
.release-row:hover { color: var(--acc); }
.release-row__meta { flex: none; color: var(--muted); }
.release-row__title { flex: 1 1 360px; min-width: 0; font-size: var(--fs-11); font-weight: 600; line-height: 1.3; text-wrap: balance; }
/* Arrows are sized like the text beside them (Geist Mono draws → small) */
.release-row__arrow { flex: none; font-size: var(--fs-11); line-height: 1; color: var(--acc); transition: transform var(--hover-dur) var(--ease); }
.release-row:hover .release-row__arrow { transform: translateX(3px); }
.media { display: flex; flex-direction: column; gap: 16px; }
.media__head { display: flex; flex-direction: column; gap: 12px; }
.media__note { margin: 0; font-size: var(--fs-5); line-height: 1.55; color: var(--text-2); }
/* Media groups: name and count over an ink rule (the summary collapses the group; on phones every group stays
   open, press.js), the files as tiles */
.media-sets { display: flex; flex-direction: column; gap: 40px; margin-top: 16px; }
.media-set { border-bottom: 0; }
.media-set__sum { align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--text); transition: color var(--hover-dur); }
.media-set__name { flex: 1; font-size: var(--fs-11); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.media-set__sum:hover { color: var(--acc); }
.media-set__sum:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 4px; }
.media-files { list-style: none; margin: 0; padding: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 24px 20px; }
/* One file: preview over name, role and format, with ↓ download. The link covers the whole tile, so hovering
   anywhere on a file gives feedback and starts the download */
.media-file { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 8px; align-items: start; min-width: 0; }
.media-file__thumb { grid-column: 1 / -1; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: filter var(--hover-dur); }
.media-file__thumb--portrait { object-position: 50% 30%; }
/* Logos centred on a tile, symbol and the wide logo at one height; white files on the ink tile */
.media-file__thumb--logo { display: flex; align-items: center; justify-content: center; background: var(--raised); }
.media-file__thumb--logo img { height: 40%; width: auto; max-width: 70%; object-fit: contain; }
.media-file__thumb--on-ink { background: var(--ink); }
/* Renders have a transparent background: shown whole on the same tile as the logo */
.media-file__thumb--render { background: var(--raised); object-fit: contain; }
.media-file__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.media-file__name { font-size: var(--fs-6); font-weight: 600; color: var(--text); transition: color var(--hover-dur); }
.media-file__meta { color: var(--muted); }
.media-file__dl { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px 0 0; font-size: var(--fs-6); color: var(--acc); }
.media-file__dl::after { content: ""; position: absolute; inset: 0; }
.media-file__dl > span[aria-hidden] { transition: transform var(--hover-dur) var(--ease); }
.media-file__dl:focus-visible { outline: none; }
.media-file:has(.media-file__dl:focus-visible) { outline: var(--focus-width) solid var(--focus); outline-offset: 4px; }
.media-file:hover .media-file__thumb { filter: brightness(.92); }
.media-file:hover .media-file__name { color: var(--acc); }
.media-file:hover .media-file__dl > span[aria-hidden] { transform: translateY(3px); }
.press-about { max-width: 820px; background: var(--light-warm); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.press-about p { margin: 0; color: var(--text-2); text-wrap: pretty; }

/* Press on phones: short tab labels, the releases as cards, every media group open with one row per file,
   and a plain contact row under the lead in place of the dark contact box */
.press-contact-row, .press-tabs { display: none; }
@media (max-width: 760px) {
  .press-contact { display: none; }
  .press-contact-row { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; color: var(--text); }
  .press-contact-row__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .press-contact-row__label { color: var(--muted); }
  .press-contact-row__mail { font-size: var(--fs-10); font-weight: 600; overflow-wrap: anywhere; }
  .press-contact-row__arrow { flex: none; font-size: var(--fs-10); line-height: 1; color: var(--acc); transition: transform var(--hover-dur) var(--ease); }
  .press-contact-row:hover { color: var(--acc); }
  .press-contact-row:hover .press-contact-row__arrow { transform: translateX(3px); }
  .press-contact-row:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }

  .press-tabs__list { gap: 36px; padding-top: 4px; }
  .press-tabs__tab { min-height: 48px; padding: 0; align-items: center; font-size: var(--fs-8); }
  .press-tabs__long { display: none; }
  .press-tabs__short { display: inline; }

  .press { padding-top: 32px; padding-bottom: 48px; gap: 48px; }
  .press__h2 { font-family: var(--f-mono); font-size: var(--label-size); font-weight: 400; letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
  .press-releases { gap: 16px; }
  .press-panel[role="tabpanel"]:focus-visible { outline-offset: 4px; }
  .media { gap: 20px; }
  .media__head { gap: 8px; }

  /* Releases as cards: date over the title, the → beside them */
  .releases { display: flex; flex-direction: column; gap: 12px; margin: 0; border-top: 0; }
  .releases li { border-bottom: 0; }
  .release-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 20px 16px 22px 20px; background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--hover-dur); }
  .release-row__title { font-size: var(--fs-10); text-wrap: pretty; }
  .release-row__arrow { grid-column: 2; grid-row: 1 / span 2; font-size: var(--fs-10); }
  .release-row:hover { color: var(--text); border-color: rgba(var(--line-rgb), .32); }
  .release-row:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }

  /* Media groups stay open (press.js): the summary is a plain heading, the files one row each */
  .media-sets { gap: 24px; }
  .media-set__sum { pointer-events: none; padding-bottom: 8px; }
  .media-set__sum .acc__icon { display: none; }
  .media-set__name { font-size: var(--fs-6); }
  .media-files { display: flex; flex-direction: column; gap: 0; padding: 0; }
  .media-file { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
  .media-file__thumb { grid-column: auto; width: 48px; height: 48px; aspect-ratio: auto; }
  .media-file__thumb--logo img { height: 50%; max-width: 80%; }
  .media-file__dl { width: 44px; height: 44px; margin: 0 -12px 0 0; }

  #releases:not([hidden]) { gap: 32px; }
  .press-about { padding: 22px; gap: 10px; }
}

/* Press release */
.release-head { background: var(--ink); }
.release-head__inner { padding-top: var(--page-head-top); padding-bottom: 72px; display: flex; flex-direction: column; gap: var(--page-head-gap); }
.release-head__back { align-self: flex-start; color: var(--text); }
.release-head__title { margin: 0; font-weight: 600; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; color: var(--on-dark-hi); }
.release { padding-top: 72px; padding-bottom: var(--section-pad); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 64px 80px; }
.release__text { flex: 2 1 520px; min-width: 0; max-width: 66ch; display: flex; flex-direction: column; gap: 22px; }
.release__text > p { margin: 0; color: var(--text-2); text-wrap: pretty; }
.release__date { color: var(--muted); }
.release__about { margin-top: 24px; background: var(--light-warm); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.release__about h2 { margin: 0; font-size: var(--fs-10); font-weight: 600; line-height: 1.2; }
.release__about p { margin: 0; font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.release__side { flex: 1 1 280px; min-width: 0; max-width: 360px; display: flex; flex-direction: column; gap: 28px; }
.release__pdf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 28px; background: var(--ink); color: var(--on-dark-hi); font-size: var(--fs-10); font-weight: 600; text-decoration: none; transition: background var(--hover-dur); }
.release__pdf:hover { background: var(--teal); color: var(--on-dark-hi); }
.release__pdf-tag { flex: none; font-size: var(--fs-5); font-weight: 500; letter-spacing: .1em; color: var(--acc); transition: color var(--hover-dur); }
.release__pdf:hover .release__pdf-tag { color: var(--on-dark-hi); }
.release__contact { display: flex; flex-direction: column; gap: 8px; padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
.release__label { margin: 0; font-weight: 500; color: var(--muted); }
.release__mail { font-size: var(--fs-10); font-weight: 600; }
.release__images { display: flex; flex-direction: column; gap: 12px; }
.release__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.release__thumbs img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; display: block; }
.release__thumb { display: block; cursor: pointer; }
.release__thumb img { transition: opacity var(--hover-dur); }
.release__thumb:hover img { opacity: .8; }
.release__note { margin: 16px 0 0; font-size: var(--fs-4); line-height: 1.5; color: var(--text-2); }
.release__files { list-style: none; margin: 0; padding: 0; }
.release__files li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-2); }
.release__files span { font-size: var(--fs-5); font-weight: 600; color: var(--text); }
.release__files a { white-space: nowrap; }

/* ==========================================================================
   Mobile layer (≤640px unless noted). Desktop (≥641px) is unchanged.
   Signifiers: + / − = opens here, → = internal link, ↗ = external.
   ========================================================================== */

/* ---------- Nav: "Menu" opens a full-screen list (≤760px, see motion.js) ---------- */
.nav__menu, .nav__sheet, .bench4__m { display: none; }
@media (max-width: 760px) {
  /* Burger: three bars that turn into an × while the sheet is open */
  .nav__menu { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .nav__menu:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
  .nav__burger { position: relative; width: 22px; height: 14px; }
  .nav__burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; background: currentColor; transition: transform .25s var(--ease), opacity var(--hover-dur), top .25s var(--ease); }
  .nav__burger i:nth-child(1) { top: 0; }
  .nav__burger i:nth-child(2) { top: 6px; }
  .nav__burger i:nth-child(3) { top: 12px; }
  .nav__menu[aria-expanded="true"] .nav__burger i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .nav__menu[aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; }
  .nav__menu[aria-expanded="true"] .nav__burger i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
  .nav .motion-toggle { display: none; }
  .nav__lang { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; }
  .nav__sheet:not([hidden]) { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 100%); background: var(--bg); border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; }
  /* Opening and closing: one short fade of the whole sheet (opacity only, so it stays smooth);
     motion.js keeps it shown until the fade-out has run */
  .nav__sheet { opacity: 0; transition: opacity .15s ease-in; will-change: opacity; }
  .nav__sheet.is-open { opacity: 1; transition: opacity var(--hover-dur) ease-out; }
  .nav__sheet-inner { display: flex; flex-direction: column; gap: 24px; padding-top: 8px; padding-bottom: 32px; }
  .nav__sheet-list { display: flex; flex-direction: column; }
  .nav__sheet-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; border-bottom: 1px solid var(--line); font-family: var(--f-sans); font-size: var(--fs-11); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
  .nav__sheet-mark { flex: none; font-family: var(--f-mono); font-size: var(--fs-11); line-height: 1; font-weight: 400; color: var(--muted); }
  .nav__sheet-link[aria-current="page"], .nav__sheet-link[aria-current="page"] .nav__sheet-mark { color: var(--acc); }
  .nav__sheet-cta { min-height: 52px; font-size: var(--fs-7); }
  html.nav-open { overflow: hidden; }
  /* Pause animations as a small text button (the icon in the bar is hidden here); aria-pressed="true" = paused */
  .nav__sheet-motion { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--muted); cursor: pointer; }
  .nav__sheet-motion[hidden], .nav__sheet-play, .nav__sheet-motion[aria-pressed="true"] .nav__sheet-pause { display: none; }
  .nav__sheet-motion[aria-pressed="true"] { color: var(--acc); }
  .nav__sheet-motion[aria-pressed="true"] .nav__sheet-play { display: inline; }
  .nav__sheet-link:focus-visible, .nav__sheet-motion:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: -2px; }
  .nav__sheet-cta:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav__sheet { transition: none; }
}

@media (max-width: 640px) {
  /* Page titles start closer to the nav on phones */
  :root { --page-head-top: 32px; }
  .release-head__inner { padding-bottom: 48px; }
  .release { padding-top: 32px; padding-bottom: 88px; gap: 48px; }
  /* ---------- First screen: hero + key facts fill exactly one viewport (--nav-h, --stats-h from home-hero.js) ---------- */
  .hero { min-height: calc(100svh - var(--nav-h, 65px) - var(--stats-h, 0px)); }
  .hero__inner { gap: 24px; }
  .hero__copy { gap: 16px; }
  .hero__lead { margin: 0; font-size: var(--fs-9); line-height: 1.4; }
  .hero__claim { max-width: none; font-size: 40px; line-height: 1.05; }
  .hero__ctas { gap: 10px 24px; }
  :root { --btn-pad-y: 13px; --btn-pad-x: 22px; --btn-font-size: 15px; }

  /* ---------- Key facts: combo card first (plates across, headline below), the other two side by side ---------- */
  #specs { border-top: 0; }
  .stats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding-top: 24px; padding-bottom: 16px; }
  .stat--combo { grid-column: 1 / -1; padding: 20px; margin: 0 0 8px; border: 0; border-radius: var(--radius-lg); }
  .stat--combo .sl { flex-direction: column-reverse; align-items: stretch; gap: 18px; }
  .stat--combo .sl__line { font-size: var(--fs-11); line-height: 1.15; text-wrap: balance; }
  .stat--combo .sl__viz { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding-bottom: 22px; }
  .stat--combo .sl__plate { width: 100%; aspect-ratio: 5 / 3; }
  .stat--combo .sl__plate i { height: 5px; margin-bottom: -2.5px; }
  .stat--combo .sl__plate::after { content: attr(data-label); position: absolute; left: 0; top: calc(100% + 8px); font-family: var(--f-mono); font-size: var(--label-size); letter-spacing: var(--label-track-tight); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .stat--combo .sl__plate--fx::after { color: var(--glow); }
  .stat:not(.stat--combo) { padding: 14px 0 16px; border: 0; gap: 6px; align-items: center; text-align: center; }
  .stat:not(.stat--combo) + .stat { border-left: 1px solid var(--line); }
  .stat:not(.stat--combo) .stat__num { font-size: 34px; }
  .stat:not(.stat--combo) .stat__label { letter-spacing: .08em; }

  /* ---------- Process: plain list (number, name, + / −), all closed, no card ---------- */
  #product .steps { border: 0; border-radius: 0; background: transparent !important; overflow: visible; }
  #product .steps__tabs { border: 0; }
  #product .steps__list { flex-direction: column; overflow: visible; border-top: 1px solid var(--line-2); }
  #product .step-tab { flex: none; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line-2); background: transparent; box-shadow: none; color: var(--text); }
  #product .step-tab__n { width: 22px; color: var(--muted); }
  #product .step-tab__name { font-size: var(--fs-11); font-weight: 500; }
  #product .step-tab__arrow { display: none; }
  #product .step-tab .fold__icon { display: inline-block; margin-left: auto; }
  #product .step-tab[aria-expanded="true"] .fold__icon::after { transform: rotate(90deg); }
  #product .step-tab[aria-expanded="true"] .step-tab__n { color: var(--acc); }
  #product .step-tab[aria-expanded="true"] { border-bottom-color: transparent; }
  #product .steps__drop.is-open { padding: 0 0 24px 38px; background: transparent; border-bottom: 1px solid var(--line-2); }
  #product .steps__drop .steps__desc { margin: 0; font-size: var(--fs-6); line-height: 1.6; color: var(--text-2); }

  /* ---------- Comparison: head-to-head only, tabs scroll sideways and fade at the edge ---------- */
  .js .cmp__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .cmp__tabs::-webkit-scrollbar { display: none; }
  .cmp__tabs button { flex: none; min-height: 44px; white-space: nowrap; }
  .cmp__tabs [data-cmp-tab="all"] { display: none; }
  .cmp__table { min-width: 0; }
  .cmp__toggle { min-height: 52px; font-size: var(--fs-4); }
  .cmp__foot { flex-direction: column; gap: 14px; margin-top: 20px; font-size: var(--fs-2); line-height: 1.6; }
  .cmp__legend { gap: 18px; }

  /* ---------- Origin: the photo; 3D only on tap, no orbit hints ---------- */
  .origin__hint, .origin__hotspots { display: none; }

  /* ---------- Benchmark: slider under the plates drives the lane (bench4.js), one-line readout above it ---------- */
  .bench4__m { display: flex; flex-direction: column; gap: 6px; grid-column: 1 / -1; margin-top: 16px; }
  .bench4__m-read { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; font-size: var(--fs-3); color: var(--text-2); }
  .bench4__m-amt { font-family: var(--f-sans); font-size: var(--fs-11); font-weight: 600; color: var(--text); margin-right: 2px; }
  .bench4__m-a, .bench4__m-b { display: inline-flex; align-items: center; gap: 6px; }
  .bench4__m-a { color: var(--glow); }
  .bench4__m-a i { width: 8px; height: 8px; border-radius: 50%; background: var(--glow); }
  .bench4__m-b i { width: 8px; height: 8px; border: 1.5px solid currentColor; }
  .bench4__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
  .bench4__slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(var(--glow-rgb), .28); }
  .bench4__slider::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(var(--glow-rgb), .28); }
  .bench4__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--glow); border: 3px solid var(--ink); box-shadow: 0 0 0 1px rgba(var(--glow-rgb), .6), 0 0 16px rgba(var(--glow-rgb), .5); }
  .bench4__slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--glow); border: 3px solid var(--ink); box-shadow: 0 0 16px rgba(var(--glow-rgb), .5); }
  .bench4__slider:focus-visible { outline: var(--focus-width) solid var(--glow); outline-offset: 2px; border-radius: var(--radius-sm); }
  .bench4__readout { display: none; }

  /* ---------- What you get: each item folds out (number, title, + / −), all closed (home-sections.js) ---------- */
  #package .offer__grid { border-top: 1px solid var(--line-2); }
  #package .offer__label + .offer__grid { border-top: 0; }
  #package .offer__item { grid-template-columns: 22px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 0; }
  #package .offer__n { display: block; grid-column: 1; grid-row: 1; font-size: var(--fs-2); color: var(--muted); }
  #package .offer__item:not(.is-closed) .offer__n { color: var(--acc); }
  #package .offer__item > h4 { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0; font-size: var(--fs-9); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  #package .offer__item > p { grid-column: 2; margin: 0 0 20px; }
  #package .is-closed > p { display: none; }
  #package .offer__group + .offer__group { margin-top: 40px; }

  /* ---------- chromnil one: thinner outline, where the word is smaller ---------- */
  .teaser__word::after { filter: url(#teaser-outline-thin); }

  .sim__view { min-height: 36px; }
}

/* ---------- Use cases (≤900px): they fold out, so + / − instead of the rotating arrow ---------- */
@media (max-width: 900px) {
  .app-row__arrow { display: none; }
  .app-row .fold__icon { display: inline-block; align-self: center; }
  .app-row.is-active .fold__icon::after { transform: rotate(90deg); }
}

/* ---------- Privacy fold-outs (html.legal-acc ≤640px, motion.js): all closed, contents list hidden ---------- */
html.legal-acc .toc { display: none; }
html.legal-acc .legal__intro { padding-bottom: 24px; }
html.legal-acc .legal__sec { padding: 0; gap: 0; }
html.legal-acc .legal__title { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
html.legal-acc .legal__title h2 { font-size: var(--fs-9); line-height: 1.3; }
html.legal-acc .legal__sec:not(.is-closed) { gap: 16px; padding-bottom: 28px; }
html.legal-acc .legal__sec.is-closed > :not(.legal__title) { display: none !important; }

/* ---------- Touch targets: phones and touch screens get at least 44px to tap, without changing the look ---------- */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .nav__brand, .nav__links .btn, a.ext-link { position: relative; }
  .nav__brand::after, .nav__links .btn::after, a.ext-link::after { content: ""; position: absolute; }
  .nav__brand::after { inset: -8px 0; }
  .nav__links .btn::after { inset: -5px 0; }
  a.ext-link::after { inset: -10px; }
  .footer__link, .footer__legal a { min-height: 44px; }
  .footer__col { gap: 0; }
  .footer__legal { gap: 0 24px; }
  .footer__meta { row-gap: 0; }
  .hero-result__step { padding: 14px 0; }
  .origin__load, .sim__view { min-height: 44px; }
}

/* ---------- Benchmark chart on phones: the SVG is scaled down to about 60%, so its labels are drawn larger ---------- */
@media (max-width: 640px) {
  .regression :is(.tick, .axlabel) { font-size: var(--fs-8); }
}

/* ---------- 404 page ---------- */
.nf { padding-top: var(--section-pad-md); padding-bottom: 128px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 64px 80px; align-items: center; }
.nf__copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nf__lead { margin: 0; max-width: 34em; color: var(--text-2); text-wrap: pretty; }
.nf__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.nf__links { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: 32px; border-top: 2px solid var(--text); }
.nf__link { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-2); color: var(--text); transition: color var(--hover-dur); }
.nf__link:hover { color: var(--acc); }
.nf__visual { justify-self: center; width: 100%; max-width: 520px; }
/* Phones: the animated plate is hidden (.hero__visual at 640px) and not built (not-found.js);
   a small still strip sits above the eyebrow instead */
.nf__mobile { display: none; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.nf__strip { position: relative; height: 132px; border-radius: var(--radius-sm); background: var(--ink); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 18px 18px 24px; }
.nf__strip-start { position: absolute; left: 12px; right: 12px; bottom: 16px; border-top: 1px dashed rgba(var(--white-rgb), .3); }
.nf__strip-track { position: relative; }
.nf__strip-track i { position: absolute; left: 0; right: 0; height: 5px; border-radius: 1px; }
.nf__strip-track--empty { margin: -6px -4px 0; border: 1px dashed var(--glow); border-radius: 3px; }
.nf__strip-nums { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 0 18px; font-size: var(--fs-2); text-align: center; color: var(--muted); }
.nf__lead-mob { display: none; }
@media (max-width: 640px) {
  .nf__grid { padding-top: 32px; padding-bottom: 72px; row-gap: 32px; }
  .nf__mobile { display: flex; }
  .nf__links { display: none; } /* the footer right below lists the same pages */
  .nf__lead-desk { display: none; }
  .nf__lead-mob { display: inline; }
}
/* The plate on the right (not-found.js): status line above, Rf scale beside it, lane numbers below */
.nf__plate-head { display: flex; justify-content: space-between; color: var(--muted); }
.nf__status { display: flex; align-items: center; gap: 8px; }
.nf__plate-wrap { padding-right: 36px; display: flex; flex-direction: column; gap: 10px; }
.nf__plate { position: relative; width: 100%; }
.nf__rf { position: absolute; top: 0; bottom: 0; left: calc(100% + 12px); width: 24px; font-size: var(--fs-2); color: var(--muted); }
.nf__rf span { position: absolute; left: 0; transform: translateY(50%); }
.nf__lanes { position: relative; height: 14px; font-size: var(--fs-2); color: var(--muted); }
.nf__lanes span { position: absolute; transform: translateX(-50%); }
.nf__dot { --dot-color: var(--red); }
.nf__slot { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--ink); }
.nf__lane-404 { color: var(--acc); font-weight: 500; }
.nf__clip { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-sm); pointer-events: none; }
/* Track 404: the box-shadow spread dims the rest of the plate */
.nf-col { position: absolute; z-index: 5; border: 1px dashed rgba(var(--glow-rgb), .85); border-radius: 3px;
  box-shadow: 0 0 0 200vmax color-mix(in srgb, var(--ink) 64%, transparent); }
.nf-tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -8px); font-family: var(--f-mono);
  font-size: var(--fs-1); letter-spacing: var(--label-track-tight); text-transform: uppercase; white-space: nowrap; color: var(--glow); }
.nf-seek { position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: var(--glow); box-shadow: 0 0 8px var(--glow);
  opacity: 0; animation: nf-seek 2.8s ease-in-out 0s infinite both; }
@keyframes nf-seek { 0% { bottom: 2%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { bottom: 98%; opacity: 0; } }

/* ---------- chromnil one waitlist ----------
   The sign-up dialog (waitlist_dialog in _macros.html, waitlist.js), the same form as a page (waitlist.html),
   the confirmation page (waitlist/confirmed.html: the teaser band in four versions, "What happens next")
   and the unsubscribed page. */
.wl-dialog { width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: none; color: var(--text); overflow: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55); }
.wl-dialog::backdrop { background: var(--backdrop); }
.wl-dialog[open] { animation: wlIn .35s var(--ease) both; }
@keyframes wlIn { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .wl-dialog[open] { animation: none; } }
html:has(.wl-dialog[open]) { overflow: hidden; }
/* --wl-pad: the panel's side padding; the ink head bleeds out to the panel's edges */
.wl-dialog__panel { --wl-pad: 40px; position: relative; padding: 0 var(--wl-pad) 40px; background: var(--bg); border-radius: inherit; overflow: hidden; }
.wl-dialog__x { position: absolute; z-index: 1; top: 28px; right: 26px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; color: var(--on-dark-hi); font-size: var(--fs-11); line-height: 1; cursor: pointer; transition: background var(--hover-dur), color var(--hover-dur); }
.wl-dialog__x:hover { background: rgba(var(--white-rgb), .1); }
.wl-dialog__x:focus-visible { outline: var(--focus-width) solid var(--glow); outline-offset: 2px; }
:is(.wl-form, .wl-sent) { display: flex; flex-direction: column; gap: 20px; }
:is(.wl-form, .wl-sent)[hidden] { display: none; }
.wl-sent { gap: 16px; }
/* Head: the ink of the chromnil one band, with its glow and launch label */
.wl-head {
  position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0 calc(-1 * var(--wl-pad)) 8px; padding: 40px var(--wl-pad) 32px;
  background: var(--ink);
}
.wl-head__eyebrow { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--acc); }
.wl-card__title { margin: 0; padding-right: 32px; font-size: 31px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; color: var(--on-dark-hi); text-wrap: balance; }
.wl-card__lead { margin: 0; font-size: var(--fs-7); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.wl-card__title:focus { outline: none; }
.wl-field { display: flex; flex-direction: column; gap: 8px; }
.wl-field__label { font-size: var(--fs-4); font-weight: 500; }
.wl-field__input { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(var(--line-rgb), calc(.2 * var(--line-k))); border-radius: var(--btn-radius); background: var(--surface); color: var(--text); font: inherit; font-size: var(--fs-6); transition: border-color var(--hover-dur), box-shadow var(--hover-dur); }
.wl-field__input::placeholder { color: var(--placeholder); }
.wl-field__input:hover { border-color: rgba(var(--line-rgb), calc(.32 * var(--line-k))); }
.wl-field__input:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(var(--acc-rgb), .18); }
.wl-field__input.is-invalid { border: 1.5px solid var(--warn-ink); padding: 13.5px 15.5px; }
:is(.wl-field__error, .wl-card__error) { margin: 0; font-size: var(--fs-4); line-height: 1.4; color: var(--warn-ink); }
.wl-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: -8px 0; padding: 12px 0; font-size: var(--fs-4); line-height: 1.45; color: var(--text-2); cursor: pointer; }
.wl-check input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--acc); }
.wl-card__submit { width: 100%; }
.wl-card__note { margin: 0; font-size: var(--fs-4); line-height: 1.5; color: var(--muted); text-align: center; text-wrap: balance; }
/* Text links of the waitlist pages and dialog: accent, underlined on hover (no pills, no ghost underline) */
:is(.wl-card__note a, .wl-link) { color: var(--acc); transition: color var(--hover-dur); }
:is(.wl-card__note a, .wl-link):hover { text-decoration: underline; text-underline-offset: 3px; }
.wl-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-6); }
.wl-rows dd .wl-link, .wl-band__text .wl-link { display: inline; min-height: 0; font-size: inherit; }
:is(.wl-card__note a, .wl-sent__change):hover { color: var(--text); }
.wl-sent__text { margin: 0; font-size: var(--fs-7); line-height: 1.55; color: var(--text-2); text-wrap: pretty; }
.wl-sent__text strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.wl-sent__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; }
.wl-sent__actions .btn { width: 100%; }
.wl-sent__change { align-self: center; justify-content: center; padding: 8px; border: 0; background: none; font: inherit; font-size: var(--fs-6); cursor: pointer; }
/* waitlist.html without JavaScript: the service redirects back to #sent, or to #wl-invalid / #wl-error */
.wl-sent:target { display: flex; }
.wl-card:has(.wl-sent:target) .wl-form { display: none; }
:is(.wl-field__error, .wl-card__error):target { display: block; }
.wl-field:has(.wl-field__error:target) .wl-field__input { border: 1.5px solid var(--warn-ink); padding: 13.5px 15.5px; }

/* The form as a page */
.wl-page__inner { padding-top: var(--section-pad-sm); padding-bottom: var(--section-pad); display: flex; justify-content: center; }
.wl-page__panel { width: 100%; max-width: 520px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); }

/* Confirmation page: the teaser band, a little shorter, with a heading instead of the wordmark */
/* The band: the flat ink head of the sign-up dialog, at page size. Left-aligned like the dialog. */
.wl-band { border-bottom: 0; }
.wl-band__inner { padding-top: var(--section-pad-md); padding-bottom: var(--section-pad-sm); align-items: flex-start; text-align: left; gap: 0; }
.wl-state { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.wl-state[hidden] { display: none; }
.wl-band.is-checking .wl-state { visibility: hidden; }
.wl-band__eyebrow { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--acc); }
.wl-state--expired .wl-band__eyebrow { color: var(--warn); }
.wl-state .btn { margin-top: 12px; }
.wl-band__title { margin: 0; font-size: clamp(40px, 6vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; color: var(--on-dark-hi); text-wrap: balance; }
.wl-band__text { margin: 0; max-width: 40ch; font-size: clamp(18px, 2vw, 21px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.wl-band__text .wordmark { color: var(--text); }

.wl-next { padding-top: 76px; padding-bottom: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px 64px; }
.wl-next[hidden] { display: none; }
.wl-next__head { display: flex; flex-direction: column; gap: 12px; }
.wl-next__title { margin: 0; font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.wl-rows { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.wl-rows > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 20px; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.wl-rows > div[hidden] { display: none; }
.wl-rows dt { padding-top: 4px; font-size: var(--label-size); letter-spacing: var(--label-lg-track); text-transform: uppercase; color: var(--acc); }
.wl-rows dd { margin: 0; font-size: var(--fs-7); line-height: 1.5; text-wrap: pretty; }
.wl-actions { padding-top: 32px; padding-bottom: 80px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.wl-next[hidden] + .wl-actions { padding-top: 64px; }

/* Unsubscribe: the same heading and text on the page background, one version per step (waitlist.js) */
.wl-unsub { padding-top: var(--section-pad); padding-bottom: 136px; text-align: center; }
.wl-unsub .wl-state { align-items: center; gap: 24px; }
.wl-unsub .wl-band__title { color: var(--text); }
.wl-unsub .wl-band__title:focus { outline: none; }
.wl-unsub__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 8px; }

@media (max-width: 640px) {
  .wl-dialog__panel { --wl-pad: 24px; padding-bottom: 28px; }
  .wl-head { padding-top: 32px; padding-bottom: 26px; }
  .wl-dialog__x { top: 20px; right: 12px; }
  .wl-card__title { font-size: var(--fs-14); }
  .wl-page__inner { padding-top: 40px; padding-bottom: 72px; }
  .wl-band__inner { padding-top: 80px; padding-bottom: 72px; }
  .wl-next { grid-template-columns: minmax(0, 1fr); padding-top: 56px; }
  .wl-rows > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 0; }
  .wl-rows dd { font-size: var(--fs-6); }
  .wl-actions { padding-bottom: 64px; }
  .wl-unsub { padding-top: 80px; padding-bottom: 96px; }
}

/* ---------- Cookie banner ---------- */
/* Only on the pages with COOKIE_BANNER = True in build.py (templates/_cookie.html, js/cookie.js). Floating card, bottom
   left; full width minus 12px on phones. z-index 90: above the nav (50), below the skip link (100). */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 90; width: 400px; max-width: calc(100vw - 24px); padding: 24px; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px rgba(var(--ink-rgb), .12), 0 18px 48px rgba(var(--ink-rgb), .18); }
.cookie[hidden] { display: none; }
.cookie__view { display: flex; flex-direction: column; gap: 14px; }
.cookie__view[hidden] { display: none; }
.cookie__label { font-size: var(--label-size); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--acc); }
.cookie__title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.cookie__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.cookie__text a, .cookie__policy { color: var(--acc); text-underline-offset: 3px; }
.cookie__text a:hover, .cookie__policy:hover { color: var(--text); }
.cookie__policy { align-self: flex-start; font-size: 13px; }
/* Both choices side by side, equal width: "Necessary only" must be as easy as "Accept all" */
.cookie__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.cookie__actions .btn { width: 100%; }
.cookie__btn--outline { box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .28); color: var(--text); }
.cookie__btn--outline:hover { background: var(--hover-tint); }
.cookie__more, .cookie__back { align-self: flex-start; padding: 4px 0; min-height: 32px; text-underline-offset: 6px; }
.cookie__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cookie__rows { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); }
.cookie__row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.cookie__row-text { display: flex; flex-direction: column; gap: 4px; }
.cookie__row-name { font-size: 15px; font-weight: 600; }
.cookie__row-desc { font-size: 13px; line-height: 1.5; color: var(--muted); }
.cookie__always { flex-shrink: 0; padding-top: 4px; font-size: var(--fs-1); letter-spacing: var(--label-track-tight); text-transform: uppercase; color: var(--muted); }
/* Switch: off = line colour, on = accent. 44 × 26, knob 20. */
.cookie__switch { flex-shrink: 0; position: relative; width: 44px; height: 26px; margin-top: 2px; padding: 0; border: 0; border-radius: var(--radius-pill); background: rgba(var(--ink-rgb), .24); cursor: pointer; transition: background var(--hover-dur); }
.cookie__switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--white); transition: transform var(--hover-dur) var(--ease); }
.cookie__switch[aria-checked="true"] { background: var(--acc); }
.cookie__switch[aria-checked="true"]::after { transform: translateX(18px); }
.cookie button:focus-visible, .cookie a:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
/* Entrance: fades and rises once; none when motion is off */
.cookie.is-in { animation: cookie-in var(--reveal-dur) var(--ease) both; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
/* The site's motion toggle (.motion-paused) already stops every animation */
@media (prefers-reduced-motion: reduce) { .cookie.is-in { animation: none; } }

/* "Cookie settings" in the footer's legal line: a button that looks like the links next to it */
.footer__cookie { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--on-dark); cursor: pointer; text-decoration: underline; text-decoration-color: rgba(var(--on-dark-rgb), .4); text-underline-offset: 4px; transition: color var(--hover-dur), text-decoration-color var(--hover-dur); }
.footer__cookie:hover { color: var(--glow); text-decoration-color: var(--glow); }

@media (max-width: 640px) {
  .cookie { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; padding: 20px; }
  .cookie__view { gap: 12px; }
  .cookie__title { font-size: 18px; }
  .cookie__text { font-size: 14px; }
  .cookie__actions .btn { min-height: 44px; font-size: 14px; }
  .cookie__more, .cookie__back { min-height: 44px; font-size: 14px; }
  .cookie__policy { font-size: 14px; }
}