/* ============================================================================
   Nakavision — site stylesheet
   ----------------------------------------------------------------------------
   Vendored from the approved design project d7f620ab-4166-4c59-85f7-ee4b54d58ada:

     _ds/modernist-3d255e72-…/styles.css   Modernist tokens + components
     index.html   <style>                  canonical page styles + DARK + Montserrat
     support.html <style>                  support-page styles
     contact.html <style>                  contact-page styles

   Changes made while vendoring, and why (docs/00-PLAN.md, Phase 1 step 2):
     1. Dropped  @import url('…fonts.googleapis.com/css2?family=Archivo…').
        Dead: index.html's trailing override sets --font-heading/--font-body to
        Montserrat, so no Archivo glyph was ever used. It also leaked every
        visitor's IP to Google on first paint.
     2. Self-hosted Montserrat as a variable woff2, latin AND latin-ext.
        latin-ext is not optional: ő U+0151 and ű U+0171 live only there
        (verified against the actual files — latin has 232 glyphs and none of
        ő ű Ő Ű; latin-ext has them). Subsetting to latin alone silently breaks
        every Hungarian long vowel.
     3. Folded the trailing "DARK THEME" and "Montserrat type" override blocks
        into the token block instead of re-declaring them with !important, so
        there is one value per token and the cascade stays predictable.
     4. Deduplicated .wrap/.nav/.rule2/.kicker/.sec-* which the three pages each
        declared identically.
     5. Added the text-box-trim fallback and the consent-banner styles.

   Changed in milestone 1b (B4), after being flagged since Phase 1:
     .kicker and .item-go used --color-accent-700 (#ae1800), which measures
     2.1:1 against the dark page — below WCAG AA. --color-kicker now points at
     #ff7358 (5.7:1), the design's own dark-mode link colour.
   ========================================================================== */

/* — Montserrat, self-hosted. Variable weight 400–800; no request ever leaves
     the box. unicode-range values are Google's own subset boundaries, so the
     browser fetches latin-ext only when it meets a character that needs it. — */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-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: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/montserrat-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 ═══════════════════════════════════════════════════════════════ */
:root {
  /* Ground — the dark override, folded in. */
  --color-bg: #23262a;
  --color-surface: #eae9e9;
  --color-text: #eef0f2;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: #3d4148;

  /* Dark-page link colours, from the design's override block. */
  --color-link: #ff7358;
  --color-link-hover: #ff9077;

  /* Eyebrow/kicker colour. Single indirection so the contrast finding above is
     a one-line change rather than a find-and-replace across nine rules. */
  --color-kicker: #ff7358;

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  --font-heading: 'Montserrat', system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: 'Montserrat', system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Page rhythm, from index.html. */
  --leading: 28px;
  --half: 14px;
  --edge: clamp(20px, 5vw, 72px);
  /* The height of the sticky bar, so html can reserve it for an anchor
     (see .nav and scroll-padding-top). 12px padding twice plus the tallest
     thing in the bar, which is the Shop button. */
  --nav-h: 62px;
  --measure: 58ch;
}

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

html {
  scroll-behavior: smooth;
  /* The bar is sticky (see .nav): without this every in-page link — the nav's
     own, the hero's, the footer's — would scroll its heading underneath it. */
  scroll-padding-top: calc(var(--nav-h) + var(--space-3));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  background-image: linear-gradient(168deg, #30343a 0%, #262a2f 44%, #1b1d21 100%);
  background-attachment: fixed;
  min-height: 100vh;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-link); text-underline-offset: 3px; }
a:hover { color: var(--color-link-hover); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.grayscale { filter: grayscale(1) contrast(1.08); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.skip-link:focus { top: var(--space-2); color: #fff; }

/* ══ components (Modernist) ═══════════════════════════════════════════════ */

/* — rules — */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); color: #fff; }
.btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
select.input option { color: #201e1d; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: #fff; }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
/* ── The bar stays (owner, 2026-09-16) ─────────────────────────────────────
   Sticky rather than a back-to-top button: every in-page link lands on a
   section, and the way back was a scroll. `z-index: 70` sits under the consent
   banner (90) and the skip link (100) and over everything in the page; the
   drawer's 80 is inside the stacking context this creates, so it still opens
   over the page.

   The background is the BODY'S OWN gradient, painted again here and anchored
   to the viewport exactly as the body's is. That is what makes the bar
   invisible: its slice of the gradient lines up with the page's at every
   scroll position, so a sticky bar looks like the transparent one did. Below
   880px the body's gradient scrolls instead (1b B7 — background-attachment:
   fixed is janky on iOS Safari), so there the bar takes the flat page colour,
   like the drawer. */
.nav {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
  background-color: var(--color-bg);
  background-image: linear-gradient(168deg, #30343a 0%, #262a2f 44%, #1b1d21 100%);
  background-attachment: fixed;
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
}
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }
.nav .btn-primary:hover { color: #fff; }

/* — language switcher —
   Owner change, 2026-07-26. It used to sit between the page links and the Shop
   button in the kicker's register (11px, uppercase, 0.08em). Beside four nav
   links in that key it read as two more destinations rather than as a control,
   which is exactly backwards.

   Now: last in the bar, past the Shop button, in a quieter key than anything
   else in the nav — smaller than the links, no uppercase, no letter-spacing, no
   2px rule. The kicker register and the 2px divider are the page's structural
   language, and borrowing them was what made a utility look like navigation.

   With two locales it is one word, so there is nothing to divide; the separator
   and the inert current-locale style only apply from three locales up. */
.nav-lang { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-3); }
.nav-lang > span[aria-current], .nav-lang > a {
  font-size: 12px; letter-spacing: normal; text-transform: none; white-space: nowrap;
}
.nav-lang > a {
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  border-bottom: 1px solid transparent;
  transition: color .12s linear, border-color .12s linear;
}
.nav-lang > a:hover,
.nav-lang > a:focus-visible {
  color: var(--color-text);
  border-bottom-color: color-mix(in srgb, var(--color-text) 35%, transparent);
}
.nav-lang > span[aria-current] { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.nav-lang-sep { width: 1px; height: 11px; background: var(--color-divider); }

/* — the drawer (milestone 1b, B4) —
   Without JavaScript the toggle stays `hidden` and the links wrap; nav.js sets
   data-nav="js" and the rules below take over at ≤720px. Shop and the
   switcher never leave the bar: the one is the point of the site and the
   other is the only way to change language. 44px targets in the drawer. */
.nav-menu { display: contents; }
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -8px 0; padding: 0;
  background: transparent; border: 1px solid var(--color-divider); color: var(--color-text); cursor: pointer;
}
.nav-toggle[hidden] { display: none; }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; background: currentColor; transition: transform .15s ease, opacity .15s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 721px) { .nav-toggle { display: none !important; } }
@media (max-width: 720px) {
  /* The bar may wrap to two rows here; an anchor gets the taller reserve. */
  :root { --nav-h: 108px; }
  .nav { flex-wrap: wrap; gap: var(--space-3); }
  .nav[data-nav="js"] .nav-menu { display: none; }
  .nav[data-nav="js"] .nav-menu.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%; z-index: 80;
    background: #1b1d21; border-bottom: 2px solid var(--color-divider);
    padding: var(--space-2) max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  }
  .nav[data-nav="js"] .nav-menu.is-open a {
    display: flex; align-items: center; min-height: 44px; font-size: 16px;
    border-top: 1px solid var(--color-divider);
  }
  .nav[data-nav="js"] .nav-menu.is-open a:first-child { border-top: 0; }
}

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ══ page shell ═══════════════════════════════════════════════════════════ */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
.rule2 { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

.kicker {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-kicker);
  font-feature-settings: "tnum" 1;
  margin: 0 0 calc(var(--leading) - var(--half));
}

/* — section head, shared by home and support — */
.sec-head { padding: calc(2.5 * var(--leading)) 0 calc(0.5 * var(--leading)); }
.sec-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 3.4vw, 44px); line-height: calc(1.6 * var(--leading));
  letter-spacing: -0.018em; margin: 0; margin-left: -0.04em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.sec-title + .sec-lead {
  font-size: 16px; line-height: var(--leading); max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0;
}

/* ══ home ═════════════════════════════════════════════════════════════════ */

/* — hero — */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--leading) clamp(24px, 5vw, 80px); align-items: center;
  padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading));
}
.display {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: clamp(44.5px, 6.57vw, 89px);
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.display .line { display: block; }
.hero .sub {
  font-size: 17px; line-height: var(--leading); max-width: 44ch;
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.hero .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }
/* No background: the camera is a transparent image (PNG with tRNS, WebP with
   alpha) and sits straight on the page's own gradient. A halo painted here
   showed as a lighter box around it (owner, 2026-09-26); bin/verify keeps it off. */
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; }
.hero-badges { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--leading); flex-wrap: wrap; }
.hero-badges .kicker { margin: 0; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } .hero-figure { order: -1; max-width: 460px; } }

/* — stat row — */
.stats { padding: calc(2.5 * var(--leading)) 0; }
.stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent); margin: 0; margin-left: -0.045em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: var(--half) 0 0;
}

/* — two-colour showcase — */
.showcase { padding: calc(1.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.showcase .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.finish { background: #2e323880; padding: calc(2 * var(--leading)) clamp(20px, 3vw, 44px) calc(1.5 * var(--leading)); }
.finish img { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto calc(1.5 * var(--leading)); }
.finish .kicker { margin-bottom: calc(0.5 * var(--half)); }
.finish h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); margin: 0; letter-spacing: -0.01em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.finish p { font-size: 15px; line-height: var(--leading); margin: var(--half) 0 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.finish.finish-light { background: #f3f2f2; }
.finish.finish-light h3 { color: #201e1d; }
.finish.finish-light p { color: #514f49; }
@media (max-width: 720px) { .showcase .grid { grid-template-columns: 1fr; } }

/* — features — */
.features { padding: calc(1 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature {
  display: grid; grid-template-columns: minmax(64px, 120px) minmax(0, 360px) minmax(0, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline;
  padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--color-divider); }
/* The number owns its column (owner, 2026-09-16): at 15px it was a caption in
   a 120px track, and the accent square beside it read as a speck. Both scale
   with the title now — 30px against the title's 24px, the square 16px — and
   the square stays until the grid collapses at 880px rather than vanishing on
   every laptop under 1280px: it needs 30px of the page's edge padding to sit
   in, and --edge is 5vw, so anything from about 600px up has room. */
.f-num {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(22px, 2.2vw, 30px); line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.f-num::before { content: ""; position: absolute; left: -30px; top: calc(0.5cap - 8px); width: 16px; height: 16px; background: var(--color-accent); }
@media (max-width: 880px) { .f-num::before { display: none; } }
.f-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.f-copy {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}

/* — video band —
   Same 2px-gridded shell as .showcase and .products, so a band the design did
   not include still reads as part of the system rather than bolted on. Three
   facades in one shell (2026-09-14): the featured one spans the row, the
   other two sit below it in the two columns. Size and order make the
   hierarchy; the divider lines make the grouping — no badge, no second
   shell, nothing else moves. */
.videos { padding: calc(1 * var(--leading)) 0 calc(3 * var(--leading)); }
.videos .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--color-divider); border: 2px solid var(--color-divider);
}
@media (max-width: 720px) { .videos .grid { grid-template-columns: 1fr; } }

.video { position: relative; margin: 0; background: #2e323880; }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.video-facade { display: block; text-decoration: none; color: inherit; }
.video-shot { display: block; position: relative; }
.video-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; display: grid; place-items: center;
  background: var(--color-accent);
}
.video-play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.video-facade:hover .video-play { background: var(--color-accent-600); }
.video-facade:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.video-caption { display: block; padding: var(--leading) clamp(18px, 2.4vw, 32px); }
.video-cue {
  display: block; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-kicker); margin-bottom: calc(0.5 * var(--half));
}
.video-name {
  display: block;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.video-facade:hover .video-name { color: var(--color-accent); }

/* — the featured row: named by the section's `featured` field, rendered first — */
.video-featured { grid-column: 1 / -1; }
.video-featured .video-play { transform: translate(-50%, -50%) scale(1.375); }   /* 64 → 88px, the triangle with it */
.video-featured .video-name { font-size: 24px; max-width: 40ch; }
@media (max-width: 720px) {
  .video-featured .video-play { transform: translate(-50%, -50%); }              /* 88px would be a quarter of a phone poster */
}

/* — award-winning sensor technologies —
   Set quietly on purpose: hairline-topped text columns, no cards, no colour.
   It is evidence for claims made further up the page, not a third poster. */
.tech { padding: calc(1 * var(--leading)) 0 calc(3 * var(--leading)); }
.tech .grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--leading) clamp(24px, 4vw, 72px);
  margin-top: var(--leading);
}
@media (max-width: 880px) { .tech .grid { grid-template-columns: 1fr; } }
.tech-item { border-top: 2px solid var(--color-divider); padding-top: var(--half); }
.tech-item h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.tech-item p {
  font-size: 14.5px; line-height: var(--leading);
  margin: calc(0.5 * var(--half)) 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.tech-note {
  font-size: 13px; line-height: var(--leading);
  margin: calc(1.5 * var(--leading)) 0 0;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* — split imagery — */
.split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.split-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.015em; margin: 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.split-copy .note {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.split-figure { margin: 0; }
.split-figure img { display: block; width: 100%; height: auto; }

/* — specs table — */
.specs { padding: calc(1 * var(--leading)) 0 calc(3 * var(--leading)); }
.specs .table { margin-top: var(--leading); }
.specs .table th[scope="row"] {
  white-space: nowrap; color: color-mix(in srgb, var(--color-text) 65%, transparent);
  font-weight: 600; width: 34%; vertical-align: top;
}
.specs .table td { vertical-align: top; }

/* — products / coming soon — */
.products { padding: calc(1 * var(--leading)) 0 calc(3 * var(--leading)); }
.products .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.pcard {
  background: #2e323880;
  padding: calc(1.75 * var(--leading)) clamp(18px, 2.4vw, 32px);
  display: flex; flex-direction: column; min-height: calc(9 * var(--leading));
}
.pcard img { width: 100%; max-width: 180px; height: auto; margin: 0 0 auto; }
.pcard .kicker { margin: 0 0 calc(0.5 * var(--half)); }
.pcard h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); margin: var(--leading) 0 0; letter-spacing: -0.01em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.pcard p { font-size: 14.5px; line-height: var(--leading); margin: calc(0.5 * var(--half)) 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.pcard.soon { justify-content: flex-end; }
.pcard.soon .mark { width: 10px; height: 10px; background: var(--color-accent); margin-bottom: auto; }
@media (max-width: 880px) { .products .grid { grid-template-columns: 1fr; } }

/* — quote — */
.quote { padding: calc(2.5 * var(--leading)) 0 calc(3.5 * var(--leading)); }
.quote blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(24px, 2.6vw, 34px); line-height: calc(1.5 * var(--leading));
  letter-spacing: -0.015em; max-width: 32ch; margin: 0;
  text-indent: -0.496em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.quote figcaption {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: calc(2 * var(--leading) - 1cap) 0 0;
  text-indent: -1.209em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
@media (max-width: 720px) { .quote blockquote, .quote figcaption { text-indent: 0; } }

/* — red poster close — */
.close { background: var(--color-accent); color: #fff; }
.close .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.close h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em;
  color: #fdf7f4;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.close h2 .line { display: block; }
.close .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
.close .btn-ghost { color: #fff; border-color: #fff; }
.close .btn-ghost:hover { color: #fff; background: color-mix(in srgb, #fff 14%, transparent); }

/* ══ support + contact page shell ═════════════════════════════════════════ */
.page-hero { padding: calc(3 * var(--leading)) 0 calc(2 * var(--leading)); }
.page-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(42px, 6vw, 76px); line-height: clamp(44px, 6.3vw, 80px);
  letter-spacing: -0.02em; margin: 0; margin-left: -0.058em;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.page-lead {
  font-size: 17px; line-height: var(--leading); max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  margin: calc(1.5 * var(--leading) - 1cap) 0 0;
}

.sec { padding: calc(2.5 * var(--leading)) 0; }
.sec > .sec-head { padding: 0; margin-bottom: var(--leading); }
.sec .sec-title { font-size: clamp(28px, 3vw, 40px); line-height: calc(1.5 * var(--leading)); }
.sec .sec-lead { font-size: 16px; line-height: var(--leading); max-width: 56ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: var(--half) 0 0; }

/* ══ support ══════════════════════════════════════════════════════════════ */

/* — articles list — */
/* — the support search (Release 2, step 8) — */
.search { margin: 0 0 var(--leading); max-width: 62ch; }
.search-label { display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0 0 var(--space-1); }
.search-row { display: flex; gap: var(--space-2); align-items: stretch; }
.search-row .input { flex: 1 1 auto; min-width: 0; }
.search-row .btn { flex: 0 0 auto; }
.search-result { font-size: 15px; line-height: var(--leading); margin: 0 0 var(--half); display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.search-result a { color: var(--color-link); }
@media (max-width: 560px) { .search-row { flex-direction: column; } }

.list { border-top: 2px solid var(--color-divider); }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: var(--half) clamp(16px, 3vw, 48px); padding: calc(1.25 * var(--leading)) 0;
  border-bottom: 2px solid var(--color-divider); text-decoration: none; color: inherit;
}
.item:hover { color: inherit; }
.item:hover .item-title { color: var(--color-accent); }
.item-main { min-width: 0; }
.item-cat { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0 0 6px; }
.item-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  /* the same size as h2 or h3, because the list is the same list on the
     support page (under an h2) and on a category page (under the h1) */
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.item-desc { font-size: 14.5px; line-height: var(--leading); margin: 6px 0 0; color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: 62ch; }
.item-go { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-kicker); white-space: nowrap; }

/* — downloads grid — */
.dl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.dl { background: #2e323880; padding: calc(1.5 * var(--leading)) clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column; }
.dl-meta {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent); margin: 0 0 var(--half);
  display: flex; justify-content: space-between; gap: 12px;
}
.dl h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.dl p { font-size: 14.5px; line-height: var(--leading); margin: 8px 0 var(--leading); color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.dl .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 720px) { .dl-grid { grid-template-columns: 1fr; } }

/* — onvif matrix — */
.matrix { margin-top: var(--leading); overflow-x: auto; }
.matrix .table th[scope="row"] { white-space: nowrap; font-weight: 600; vertical-align: top; }
.matrix .table td { text-align: center; white-space: nowrap; }
.matrix .yes { color: var(--color-accent); font-weight: 700; }
.matrix .no { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.matrix-note { font-size: 13px; line-height: var(--leading); margin: var(--half) 0 0; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* — support CTA band — */
.cta { background: var(--color-accent); color: #fff; }
.cta .wrap { padding: calc(2.5 * var(--leading)) var(--edge); }
.cta h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.015em;
  margin: 0; margin-left: -0.04em; color: #fdf7f4;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.cta p { font-size: 16px; line-height: var(--leading); margin: var(--half) 0 var(--leading); max-width: 48ch; }
.cta .btn-ghost { color: #fff; border-color: #fff; }
.cta .btn-ghost:hover { color: #fff; background: color-mix(in srgb, #fff 14%, transparent); }

/* ══ contact ══════════════════════════════════════════════════════════════ */
.contact {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: calc(2 * var(--leading)) clamp(32px, 6vw, 96px);
  padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading));
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }

.form-title, .info-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0 0 var(--leading);
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
}
.form .field { margin-bottom: var(--leading); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--leading); }
@media (max-width: 480px) { .form .row2 { grid-template-columns: 1fr; } }
.form textarea.input { min-height: calc(5 * var(--leading)); resize: vertical; font: inherit; }
.form .note { font-size: 13px; line-height: var(--leading); color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: 0 0 var(--leading); }

.info-block { margin-bottom: calc(1.5 * var(--leading)); padding-bottom: calc(1.5 * var(--leading)); border-bottom: 2px solid var(--color-divider); }
.info-block:last-child { border-bottom: 0; }
.info-block h3 {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--half);
  color: color-mix(in srgb, var(--color-text) 55%, transparent); font-weight: 700;
}
.info-block p, .info-block a { display: block; font-size: 16px; line-height: var(--leading); margin: 0 0 4px; color: var(--color-text); text-decoration: none; }
.info-block a:hover { color: var(--color-accent); }
.socials { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ══ footer ═══════════════════════════════════════════════════════════════ */
footer { padding: calc(2 * var(--leading)) 0; }
/* The brand column, then as many group columns as fit. A `repeat(auto-fit, …)`
   may only sit beside FIXED-size tracks: the earlier `1.4fr` beside it made
   the whole declaration invalid, and every desktop browser fell back to one
   column (the ≤720 px rule below was valid, so phones got two). minmax with a
   fixed minimum is a fixed-size track, and keeps the brand column wider. */
.foot-grid { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); gap: var(--leading) calc(1.5 * var(--leading)); padding-top: calc(1.5 * var(--leading)); align-items: start; }
/* h2, not h4: the footer's groups are top-level landmarks of the page, and a
   heading walk that ran h1 → h2 … → h4 with no h3 above it was a jump. */
.foot-grid h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--half);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.foot-grid a, .foot-grid p {
  display: block; font-size: 14px; line-height: calc(1.4 * var(--half)); margin: 0 0 6px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-decoration: none;
}
.foot-grid a:hover { color: var(--color-link); }
.foot-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; letter-spacing: -0.01em; margin: 0 0 var(--half); }
/* Full measure, not 72ch: the owner wants the statutory paragraph across the
   footer rather than half of it (2026-09-14); it is small print, one block. */
.foot-legal { font-size: 12px; line-height: calc(1.4 * var(--half)); margin-top: calc(2 * var(--leading)); color: color-mix(in srgb, var(--color-text) 60%, transparent); max-width: none; }
.foot-legal + .foot-legal { margin-top: var(--half); }
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }

/* ══ responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  /* The body's gradient scrolls from here down, so the bar cannot match it;
     it takes the flat page colour instead, like the drawer. */
  .nav { background-image: none; }
  .feature { grid-template-columns: 1fr; gap: var(--half); }
  .f-copy { max-width: var(--measure); }
}
@media (max-width: 720px) {
  .hero { padding-top: calc(2 * var(--leading)); }
  .stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; }
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}

/* — CWV (1b B7): a fixed background repaints the whole gradient on every
     scroll frame, which a phone's GPU notices; above 880px it stays as
     designed. — */
@media (max-width: 880px) { body { background-attachment: scroll; } }

/* ══ text-box-trim fallback ═══════════════════════════════════════════════
   `text-box: trim-both cap alphabetic` is Chromium 133+ / Safari 18.2+, and
   was absent from Firefox for most of 2025. The longhands above cover builds
   that shipped `text-box-trim`/`text-box-edge` before the shorthand.

   Where neither is supported the browser keeps the font's half-leading above
   and below every trimmed run, so each trim point sits about (1lh - 1cap)/2
   looser than designed. That vertical-rhythm delta is a DOCUMENTED ACCEPTED
   DIFFERENCE (docs/00-PLAN.md, Phase 1 "Done when"), not a bug to chase.

   The rule below pulls back only the three display-size headings, where the
   drift is largest and most visible against the 28px grid. Everything else is
   left alone deliberately: compensating every trimmed element would need the
   font's real metrics and would then be wrong in the browsers that DO trim.
   ══════════════════════════════════════════════════════════════════════ */
@supports not (text-box-trim: trim-both) {
  .display, .page-title, .close h2 { margin-block-start: calc((1cap - 1lh) / 2); }
}

/* ══ consent banner ═══════════════════════════════════════════════════════
   GA4 and Capturly do not load until "Accept" is clicked (public/assets/js/
   consent.js). Rendered server-side so it is present without JavaScript;
   consent.js removes it when a choice already exists.
   ══════════════════════════════════════════════════════════════════════ */
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: #1b1d21; border-top: 2px solid var(--color-accent);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
}
.consent[hidden] { display: none; }
.consent .wrap {
  display: flex; align-items: flex-start; gap: var(--leading);
  padding-top: var(--leading); padding-bottom: var(--leading);
}
.consent-copy { flex: 1; min-width: 0; }
.consent h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: var(--half); letter-spacing: 0.02em; margin: 0 0 var(--half);
}
.consent p { font-size: 13.5px; line-height: var(--leading); margin: 0; max-width: 78ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.consent-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; flex: none; padding-top: 2px; }
@media (max-width: 720px) {
  .consent .wrap { flex-direction: column; gap: var(--half); }
  .consent-actions { width: 100%; }
  .consent-actions .btn { flex: 1; }
}
.consent-reopen {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: 14px; line-height: calc(1.4 * var(--half));
  color: color-mix(in srgb, var(--color-text) 78%, transparent); text-align: left;
}
.consent-reopen:hover { color: var(--color-link); }

/* — The firmware download's published SHA-256, added in Phase 4.
     Printed on the page because a checksum is worthless if the same bytes can
     be fetched from a URL that never states it — which is the whole reason
     firmware lives outside the docroot and comes through X-Accel-Redirect.
     Wraps anywhere, because 64 hex characters in a narrow card would otherwise
     push the grid wider than the page on a phone. — */
.dl-sum {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted, #9aa1aa);
}
.dl-sum span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 2px;
}
.dl-sum code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* — The official wordmark, 2026-07-27 —
     Replaces the Montserrat text brand the approved design used. The source is
     800 × 98 (8.16:1), so a height is all that is set and the width follows;
     giving both would distort it the first time somebody re-exports the file at
     a different ratio.

     `height` in the nav is matched to the old 18px text brand's optical size
     rather than to its font-size — a wordmark with no descenders reads larger
     than type at the same measurement. The logo's ink is light (#8BD1FD mean),
     which is why it needs no filter on the dark page. — */
.nav-brand { display: inline-flex; align-items: center; margin-right: auto; }
.nav-brand img { display: block; height: 22px; width: auto; }

.foot-brand img { display: block; height: 30px; width: auto; }

@media (max-width: 560px) {
  .nav-brand img { height: 19px; }
}

/* ══ milestone 1b — content parity and the sales structure ═══════════════ */

/* — highlights: the live site's bullet list, and the in-the-box list —
     Same 2px vocabulary as the rest of the home page: a hairline-topped list
     in two columns, each row led by a small accent square (the mark the
     feature numbers already use) rather than a browser bullet. */
.highlights { padding: calc(1 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.hl-grid { display: grid; grid-template-columns: 1fr; gap: var(--leading) clamp(24px, 5vw, 80px); align-items: center; }
.highlights-figure .hl-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.hl-figure { margin: 0; }
.hl-figure img { display: block; width: 100%; height: auto; }
.hl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  border-top: 2px solid var(--color-divider);
}
.highlights-figure .hl-list { grid-template-columns: 1fr; }
.hl-item {
  position: relative; padding: var(--half) 0 var(--half) 26px;
  font-size: 15.5px; line-height: var(--leading);
  border-bottom: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 86%, transparent);
}
.hl-item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--half) + 0.5 * var(--leading) - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
.hl-dot::before { border-radius: 50%; }
.hl-item a { color: inherit; text-decoration: none; }
.hl-item a:hover { color: var(--color-accent); }
.hl-note {
  font-size: 13px; line-height: var(--leading);
  margin: var(--leading) 0 0; max-width: 72ch;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
@media (max-width: 720px) {
  .hl-list, .highlights-figure .hl-grid { grid-template-columns: 1fr; }
  .hl-figure { max-width: 520px; }
}

/* — the app band —
     Phone art on the left, three hairline-topped blocks on the right (store
     badges, QR, local recording), in the same quiet register as .tech. The
     store badges are the stores' own artwork and are shown at a fixed height
     so Apple's and Google's read as a pair. */
.app { padding: calc(1 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.app-grid {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 80px); align-items: center;
}
.app-phone { margin: 0; }
.app-phone img { display: block; width: 100%; max-width: 356px; height: auto; margin: 0 auto; }
.app-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--leading) clamp(16px, 3vw, 40px); }
.app-block { border-top: 2px solid var(--color-divider); padding-top: var(--leading); }
.app-logo { display: block; width: 100%; max-width: 190px; height: auto; margin: 0 0 var(--leading); }
.app-badges { display: flex; flex-direction: column; gap: var(--half); align-items: flex-start; }
.app-badges a { display: block; line-height: 0; }
.app-badges img { display: block; height: 44px; width: auto; }
.app-qr-code { display: block; width: 164px; height: auto; margin: 0 0 var(--half); }
.app-qr-text {
  font-size: 13px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.app-local-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
}
.app-local-body {
  font-size: 14.5px; line-height: var(--leading); margin: calc(0.5 * var(--half)) 0 var(--leading);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.app-compat { display: flex; flex-direction: column; gap: var(--half); align-items: flex-start; }
.app-compat img { display: block; height: auto; width: auto; max-width: 100%; }
.app-compat img[alt^="ONVIF"], .app-compat img[alt^="ONVIF-"] { max-height: 64px; }
.app-note {
  font-size: 13px; line-height: var(--leading);
  margin: calc(1.5 * var(--leading)) 0 0; max-width: 72ch;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
@media (max-width: 880px) {
  .app-grid { grid-template-columns: 1fr; }
  .app-phone img { max-width: 280px; }
  .app-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .app-cols { grid-template-columns: 1fr; } }

/* — 1b A4: the tech band's figure, the reviews badge as a link, the flag — */
.tech-figure { margin: var(--leading) 0 0; }
.tech-figure img { display: block; width: 100%; height: auto; }
.hero-reviews { text-decoration: none; }
.hero-reviews:hover { color: var(--color-link-hover); }
.foot-flag { display: inline-block; width: 20px; height: 12px; vertical-align: -1px; margin-right: 4px; }

/* — FAQ: native <details>, styled as the article list's rows —
     The summary's marker is drawn as a + that turns into a − when open, so
     the affordance is the same in every browser and needs no script. */
.faq { padding: calc(1 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.faq-continued { padding-top: 0; margin-top: calc(-1.5 * var(--leading)); }
.faq-continued .faq-list { border-top: 0; }
.faq-list { border-top: 2px solid var(--color-divider); margin-top: var(--leading); }
.faq-continued .faq-list { margin-top: 0; }
.faq-item { border-bottom: 2px solid var(--color-divider); }
.faq-q {
  list-style: none; cursor: pointer; position: relative;
  padding: calc(1 * var(--leading)) 44px calc(1 * var(--leading)) 0;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
}
.faq-q::before, .faq-q::after {
  content: ""; position: absolute; right: 12px; top: calc(50% - 1px);
  width: 16px; height: 2px; background: var(--color-accent);
}
.faq-q::after { transform: rotate(90deg); transition: transform .15s ease; }
.faq-item[open] .faq-q::after { transform: rotate(0); }
.faq-q:hover h3 { color: var(--color-accent); }
.faq-q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.faq-a { padding: 0 44px calc(1 * var(--leading)) 0; }
.faq-a p {
  font-size: 15.5px; line-height: var(--leading); margin: 0; max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.faq-note {
  font-size: 13px; line-height: var(--leading); margin: var(--leading) 0 0; max-width: 72ch;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}
@media (max-width: 560px) { .faq-q, .faq-a { padding-right: 32px; } .faq-q::before, .faq-q::after { right: 4px; } }

/* — firmware history under the firmware card (1b A7) — */
.dl-history { margin-top: var(--half); font-size: 13px; line-height: var(--leading); }
.dl-history h4 {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 4px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.dl-history ul { list-style: none; margin: 0; padding: 0; }
.dl-history li { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.dl-history a { color: color-mix(in srgb, var(--color-text) 78%, transparent); text-decoration: none; }
.dl-history a:hover { color: var(--color-link); }
.dl-history-sum { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.foot-statutory { margin-top: var(--half); }

/* — the offer band (EN, settings-backed) and the Árukereső band (HU) —
     Two cards in the 2px grid the showcase uses; the price is display-size
     and the RRP struck through beside it; the trust row is a hairline list
     of four short claims under the cards. */
.offer { padding: calc(1 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.offer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  background: var(--color-divider); border: 2px solid var(--color-divider);
}
.offer-hu .offer-grid { grid-template-columns: 1fr; }
.offer-card { background: #2e323880; padding: calc(1.5 * var(--leading)) clamp(20px, 3vw, 44px); display: flex; flex-direction: column; }
.offer-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0 0 var(--half);
}
.offer-price { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.offer-now {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.6vw, 48px); line-height: calc(2 * var(--leading)); letter-spacing: -0.02em;
  color: var(--color-accent); font-feature-settings: "tnum" 1;
}
.offer-rrp { font-size: 15px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.offer-rrp-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.offer-vat { font-size: 13px; margin: 0 0 var(--leading); color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.offer-body { font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--leading); max-width: 52ch; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.offer-card .row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: auto; }
.offer-trust {
  list-style: none; margin: var(--leading) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 3vw, 40px);
}
.offer-trust li {
  position: relative; padding: var(--half) 0 var(--half) 22px; font-size: 14px; line-height: var(--half);
  border-top: 2px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.offer-trust li::before { content: ""; position: absolute; left: 0; top: calc(var(--half) + 2px); width: 10px; height: 10px; background: var(--color-accent); }
.offer-note { font-size: 13px; line-height: var(--leading); margin: var(--leading) 0 0; max-width: 72ch; color: color-mix(in srgb, var(--color-text) 58%, transparent); }
@media (max-width: 720px) { .offer-grid { grid-template-columns: 1fr; } .offer-trust { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .offer-trust { grid-template-columns: 1fr; } }

/* — reviews — */
.reviews { padding: calc(1 * var(--leading)) 0 calc(3 * var(--leading)); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--leading) clamp(24px, 4vw, 64px); margin-top: var(--leading); }
.review { margin: 0; border-top: 2px solid var(--color-divider); padding-top: var(--leading); }
.review blockquote {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(20px, 2vw, 26px); line-height: calc(1.25 * var(--leading)); letter-spacing: -0.015em; margin: 0;
}
.review figcaption { font-size: 14px; line-height: var(--leading); margin-top: var(--half); color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.review-source { margin-left: var(--space-2); }
.reviews-note { font-size: 13px; line-height: var(--leading); margin: var(--leading) 0 0; max-width: 72ch; color: color-mix(in srgb, var(--color-text) 58%, transparent); }

/* — tables on a phone (1b B5) —
     The spec table stacks: each row becomes a label over its value, so a
     value like "H.265AI encoding, dual-stream — main 2560×1440@12fps…" wraps
     at the measure instead of being squeezed beside a 34% label column. The
     ONVIF matrix cannot stack (seven columns are the point), so its first
     column sticks while the rest scrolls, with a fade at the edge and a
     one-line hint that only shows when there is something to scroll to. */
@media (max-width: 720px) {
  .specs .table, .specs .table tbody, .specs .table tr, .specs .table th, .specs .table td { display: block; }
  .specs .table tr { padding: var(--half) 0; border-bottom: 1px solid var(--color-divider); }
  .specs .table th[scope="row"] { width: auto; white-space: normal; padding: 0 0 4px; border-bottom: 0; }
  .specs .table td { padding: 0; border-bottom: 0; }
  .specs .table tbody tr:hover { background: transparent; }
}
.matrix { position: relative; }
.matrix .table th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: #23262a; box-shadow: 2px 0 0 var(--color-divider);
}
.matrix::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
  background: linear-gradient(to right, transparent, #23262a);
}
.matrix-hint { display: none; font-size: 12px; line-height: var(--leading); margin: 4px 0 0; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
@media (max-width: 880px) { .matrix-hint { display: block; } }

/* ══ articles, categories and prose (1b B6) ═══════════════════════════════
   Through Phase 4 .breadcrumb, .article-* and .prose were undefined — half
   the indexable URLs rendered in browser defaults on a dark page. Same
   vocabulary as everything above: the 2px rule, the kicker register, the
   28px leading, a 68ch measure for reading. */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: calc(1.5 * var(--leading)) 0 0;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--color-link); }

.article { padding-bottom: calc(3 * var(--leading)); }
.article-head { padding: calc(1.5 * var(--leading)) 0 calc(1 * var(--leading)); max-width: 68ch; }
.article-head .page-title { font-size: clamp(34px, 4.6vw, 60px); line-height: clamp(38px, 4.9vw, 64px); }
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--leading) 0 0; font-size: 13px; line-height: var(--half);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.article-meta:empty { display: none; }
.article-head .page-lead { margin-top: var(--leading); }
.article-hero { margin: var(--leading) 0 0; border: 2px solid var(--color-divider); }
.article-hero img { display: block; width: 100%; height: auto; }

.prose {
  max-width: 68ch; margin-top: calc(1.5 * var(--leading));
  font-size: 16.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 88%, transparent);
}
.prose > * + * { margin-top: var(--leading); }
.prose p { margin: 0; }
.prose h2, .prose h3, .prose h4 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  color: var(--color-text); letter-spacing: -0.015em; margin: 0;
}
.prose h2 { font-size: 26px; line-height: calc(1.25 * var(--leading)); padding-top: var(--leading); border-top: 2px solid var(--color-divider); margin-top: calc(2 * var(--leading)); }
.prose h3 { font-size: 20px; line-height: var(--leading); margin-top: calc(1.5 * var(--leading)); }
.prose h4 { font-size: 16px; line-height: var(--leading); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--half); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0; }
.prose li { margin: 0; }
.prose li + li { margin-top: calc(0.5 * var(--half)); }
.prose li > ul, .prose li > ol { margin-top: calc(0.5 * var(--half)); }
.prose ol.steps { list-style: none; counter-reset: step; padding: 0; }
.prose ol.steps > li { position: relative; padding-left: 44px; counter-increment: step; }
.prose ol.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px;
  color: var(--color-accent); font-feature-settings: "tnum" 1;
}
.prose a { color: var(--color-link); }
.prose strong { color: var(--color-text); }
/* A blockquote is a note callout: a 2px accent rule and the body colour. */
.prose blockquote {
  margin: 0; padding: var(--half) 0 var(--half) calc(var(--leading) - 2px);
  border-left: 2px solid var(--color-accent);
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
}
.prose blockquote > * + * { margin-top: var(--half); }
.prose .callout { padding: var(--half) var(--leading); border-left: 2px solid var(--color-accent); background: #2e323880; }
.prose .callout-warning { border-left-color: #ffb020; }
.prose .callout-tip { border-left-color: #4fc38a; }
.prose pre, .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose code { font-size: 0.92em; padding: 1px 5px; background: color-mix(in srgb, var(--color-text) 9%, transparent); }
.prose pre { margin: 0; padding: var(--half) var(--leading); overflow-x: auto; font-size: 13.5px; line-height: 1.6; background: #1b1d21; border: 1px solid var(--color-divider); }
.prose pre code { padding: 0; background: transparent; font-size: inherit; }
.prose figure { margin: 0; }
.prose figure img { display: block; width: 100%; height: auto; border: 2px solid var(--color-divider); }
.prose figcaption { font-size: 13px; line-height: var(--leading); margin-top: var(--half); color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.prose img { max-width: 100%; height: auto; }
.prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-2); border-bottom: 2px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.prose td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.prose hr { height: 2px; border: 0; background: var(--color-divider); }
.prose .btn { margin-top: 0; }

.article-related { margin-top: calc(3 * var(--leading)); }
.article-related h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--half);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.article-related .item-title { font-size: 19px; }
.article-cta {
  margin-top: calc(2.5 * var(--leading)); padding: calc(1.5 * var(--leading)) clamp(20px, 3vw, 44px);
  border: 2px solid var(--color-divider); background: #2e323880; max-width: 68ch;
}
.article-cta h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
}
.article-cta p { font-size: 15px; line-height: var(--leading); margin: var(--half) 0 var(--leading); max-width: 52ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.article-cta .btn + .btn { margin-left: var(--space-2); }
.page-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--leading); }

/* ══ the block designer's vocabulary (milestone 1d, D3) ═══════════════════
   What BlockRenderer emits that the prose rules above did not already draw:
   a checklist, a callout's title, the two button blocks, a stretched figure,
   and a YouTube facade inside an article (no poster — nothing is fetched
   from Google until play — so the shot is a dark 16:9 box with the play
   button the home band uses). */
.prose ul.checklist { list-style: none; padding-left: 0; }
.prose ul.checklist > li { position: relative; padding-left: 30px; }
.prose ul.checklist > li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px;
  border: 2px solid var(--color-divider); background: transparent;
}
.prose ul.checklist > li.checked::before { background: var(--color-accent); border-color: var(--color-accent); }
.prose ul.checklist > li.checked::after {
  content: ""; position: absolute; left: 5px; top: 8px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.prose .callout > * + * { margin-top: var(--half); }
.prose .callout-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text);
}
.prose .callout-warning .callout-title { color: #ffb020; }
.prose .callout-tip .callout-title { color: #4fc38a; }
.prose .block-button, .prose .block-download { margin-top: var(--leading); }
.prose .block-download .dl-note { font-size: 13px; margin-left: var(--space-2); color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.prose figure.stretched { max-width: none; width: 100%; }
.prose .video-inline { margin: 0; max-width: 100%; }
.prose .video-inline .video-shot { display: block; aspect-ratio: 16 / 9; background: #1b1d21; position: relative; border: 2px solid var(--color-divider); }
.prose .video-inline .video-play { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ══ legal documents (1d D6) ══════════════════════════════════════════════ */
.document { padding: 0 0 calc(3 * var(--leading)); }
.document-meta {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: calc(1.5 * var(--leading)) 0 0;
}
.document-meta time { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.document .prose { margin-top: var(--leading); }
.document-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--half) var(--leading);
  margin: calc(1.5 * var(--leading)) 0 0; padding: var(--leading); max-width: 68ch;
  border: 2px solid var(--color-divider); background: #2e323880; font-size: 15px; line-height: var(--leading);
}
.document-facts dt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.document-facts dd { margin: 0; }
@media (max-width: 560px) { .document-facts { grid-template-columns: 1fr; gap: 4px; } .document-facts dd { margin-bottom: var(--half); } }
.document-elsewhere { margin-top: calc(1.5 * var(--leading)); padding: var(--leading); border: 2px solid var(--color-divider); background: #2e323880; max-width: 68ch; }
.document-elsewhere p { margin: 0 0 var(--half); font-size: 16px; line-height: var(--leading); }

/* ══ the forms (1d E4) ════════════════════════════════════════════════════ */
.form-section .form-wrap { max-width: 62ch; padding: var(--leading) 0 calc(2 * var(--leading)); }
.form .field .check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 14px; line-height: var(--leading); color: var(--color-text); }
.form .field .check input { margin-top: 6px; }
.form-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }
.form-privacy a { color: var(--color-link); }
.form-required { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.field-error { margin: 4px 0 0; font-size: 13px; color: var(--color-kicker); }
.form-error {
  margin: 0 0 var(--leading); padding: var(--half) var(--leading);
  border-left: 2px solid var(--color-accent); background: #2e323880; font-size: 14px; line-height: var(--leading);
}
.form-sent, .form-closed {
  margin: 0 0 var(--leading); padding: var(--leading); border: 2px solid var(--color-divider); background: #2e323880; max-width: 62ch;
}
.form-sent-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-kicker); margin: 0 0 var(--half);
}
.form-sent p:last-child, .form-closed p { margin: 0; font-size: 16px; line-height: var(--leading); }
.form-closed p { margin-bottom: var(--half); }