/* ═══════════════════════════════════════════════
   MCR Technologies — site system (home, Donnager, Partners)
   One stylesheet for every page:
   fixed backdrop, gradient nav, glass panels, contact footer plate.
   Page-specific layout lives inline in each page.
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   Type follows the MCR brand system v1.0:
   HERO 56–144 · H2 32–48 · H3 24–36 · LEDE 18–24 · BODY 16–18 · LABEL mono 12
   Breakpoints are in em so they follow the reader's default font size:
   85em 1360 · 73.75em 1180 · 68.75em 1100 (hero stacks) · 63.9375em 1023 · 61.9375em 991 · 56.25em 900 (nav) · 47.9375em 767
   37.5em 600 · 22.4375em 359
═══════════════════════════════════════════════ */
:root {
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif-condensed, Impact, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero:  clamp(3.5rem,    2rem    + 4.2vw,  6.75rem);
  --fs-h2:    clamp(2rem,      1.35rem + 1.7vw,  3rem);
  --fs-h3:    clamp(1.75rem,   1.4rem  + 0.9vw,  2.25rem);
  --fs-card:  clamp(1.5rem,    1.3rem  + 0.5vw,  1.75rem);
  --fs-foot-head: clamp(2.75rem, 2rem  + 2.2vw,  4.25rem);
  --fs-lede:  clamp(1.125rem,  0.97rem + 0.3vw,  1.25rem);
  --fs-body:  clamp(1rem,      0.64rem + 0.4vw,  1.0625rem);
  --fs-small: 1rem;
  --fs-label: 0.75rem;
  --ls-label: 0.18em;

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* One grid for every edge on the page: 16px gutters on phones, 64px at 1440, 1600px measure */
  --gutter: clamp(1rem, 4.5714286vw - 0.1142857rem, 4rem);
  --measure: 100rem;
  --section-pad: clamp(4.5rem, 6.95vw, 6.25rem);
  --panel-pad: clamp(1.25rem, 2.78vw, 2.5rem);
  --panel-gap: 2.5rem;
  --nav-h: 100px;
  --nav-row: 76px;
  --glass-blur: 40px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Product signals — identifiers, never decoration */
  --donnager: #4A7CC9;
  --donnager-bright: #6B9FE8;
  --tachi: #C0271A;
  --tachi-bright: #E8402F;
  --scirocco: #B8941F;
  --scirocco-bright: #D4AC2A;

  /* The MCR mark as a mask shape (viewBox cropped tight to the three circles) */
  --mcr-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.5 5.5 29 29'%3E%3Ccircle cx='20' cy='20' r='10'/%3E%3Ccircle cx='31' cy='9' r='3.5'/%3E%3Ccircle cx='9' cy='31' r='3.5'/%3E%3C/svg%3E");
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:        #0a0a0a;
  --color-surface:   #111111;
  --color-surface-2: #161616;
  --color-border:    rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.22);
  --color-text:      #f0f0f0;
  --color-text-muted:#888888;
  --color-text-faint:#444444;
  --text-soft:       rgba(240,240,240,0.86);

  --nav-scrim: linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0.96) 56%, rgba(10,10,10,0.55) 76%, rgba(10,10,10,0) 96%);
  --glass:       rgba(10,10,10,0.66);
  --glass-line:  rgba(255,255,255,0.07);
  --glass-muted: #888888;
  --smoke:       rgba(110,110,110,0.64);
  --smoke-line:  rgba(255,255,255,0.18);
  --smoke-muted: rgba(240,240,240,0.9);
  --footer-bg:   rgba(10,10,10,0.5);
  --inv-bg:      #f5f5f3;
  --inv-text:    #0a0a0a;
  --inv-muted:   #666666;
  --inv-line:    rgba(10,10,10,0.12);
  --intro-bg:  #000000;
  --intro-ink: #f0f0f0;
  --grid-line:   rgba(255,255,255,0.045);
  --backdrop-fallback:
    radial-gradient(110% 70% at 70% -10%, #3a3a3a 0%, #1a1a1a 38%, #0a0a0a 72%);
  --backdrop-tone:
    linear-gradient(180deg, rgba(10,10,10,0) 35%, rgba(10,10,10,0.5) 72%, rgba(10,10,10,0.86) 100%),
    radial-gradient(90% 70% at 0% 100%, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0) 70%);
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg:        #f5f5f3;
  --color-surface:   #eeeeec;
  --color-surface-2: #e6e6e4;
  --color-border:    rgba(0,0,0,0.1);
  --color-border-strong: rgba(0,0,0,0.26);
  --color-text:      #0a0a0a;
  --color-text-muted:#666666;
  --color-text-faint:#aaaaaa;
  --text-soft:       rgba(10,10,10,0.76);

  --nav-scrim: linear-gradient(180deg, rgba(245,245,243,1) 0%, rgba(245,245,243,0.96) 56%, rgba(245,245,243,0.55) 76%, rgba(245,245,243,0) 96%);
  --glass:       rgba(245,245,243,0.8);
  --glass-line:  rgba(10,10,10,0.08);
  --glass-muted: #5e5e5e;   /* one step under --color-text-muted: light glass over the backdrop's darker streaks still clears AA */
  --smoke:       rgba(10,10,10,0.06);
  --smoke-line:  rgba(10,10,10,0.1);
  --smoke-muted: rgba(10,10,10,0.76);
  --footer-bg:   rgba(245,245,243,0.6);
  --inv-bg:      #0a0a0a;
  --inv-text:    #f0f0f0;
  --inv-muted:   #888888;
  --inv-line:    rgba(255,255,255,0.14);
  --intro-bg:  #f5f5f3;
  --intro-ink: #0a0a0a;
  --grid-line:   rgba(10,10,10,0.05);
  --backdrop-fallback:
    radial-gradient(110% 70% at 70% -10%, #ffffff 0%, #ececea 40%, #dcdcda 75%);
  --backdrop-tone:
    linear-gradient(180deg, rgba(245,245,243,0) 35%, rgba(245,245,243,0.5) 72%, rgba(245,245,243,0.86) 100%),
    radial-gradient(90% 70% at 0% 100%, rgba(245,245,243,0.6) 0%, rgba(245,245,243,0) 70%);
}

/* ═══════════════════════════════════════════════
   BASE RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  background: var(--color-bg);
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  background: transparent;   /* the root paints the base colour; the fixed backdrop sits above it */
  min-height: 100dvh;
  line-height: 1.6;
  overflow-x: hidden;
  transition: color 0.3s ease;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { font-weight: 400; text-wrap: balance; line-height: 1.1; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nw { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: var(--gutter); z-index: 10000;
  padding: 10px 16px;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  background: var(--color-text); color: var(--color-bg);
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease-out);
}
.skip-link:focus-visible { transform: none; outline-offset: 2px; }

/* ═══════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════ */
.wrap {
  width: 100%;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rule {
  display: block;
  height: 1px;
  border: 0;
  background: var(--p-rule, var(--color-border));
}

/* ═══════════════════════════════════════════════
   BACKDROP — fixed, the page scrolls over it
═══════════════════════════════════════════════ */
.backdrop {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  background: var(--backdrop-fallback);
  overflow: hidden;
  container-type: inline-size;
}
.backdrop__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.backdrop__canvas.is-ready { opacity: 1; }
/* The site's measuring grid: square cells, vertical lines on both content edges at every width */
.backdrop__grid {
  position: absolute; inset: 0;
  --edge: var(--gutter);
  --cell: calc((100vw - 2 * var(--gutter)) / var(--cols, 16));
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--edge) 0;
  -webkit-mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 85%);
          mask-image: radial-gradient(90% 80% at 50% 30%, #000 30%, transparent 85%);
}
@supports (width: 1cqw) {
  .backdrop__grid {
    --edge: max(var(--gutter), (100cqw - var(--measure)) / 2);
    --cell: calc((100cqw - 2 * var(--edge)) / var(--cols, 16));
  }
}
.backdrop__tone { position: absolute; inset: 0; background: var(--backdrop-tone); }

/* ═══════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--nav-scrim);
  pointer-events: none;   /* the fading scrim never blocks the content beneath it */
  transition: background 0.3s;
}
.nav__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: var(--nav-row);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  white-space: nowrap;
  flex-shrink: 0;
}
/* the mark's ink starts 5.5 of 40 units in — pull it onto the gutter */
.nav__logo-mark { width: 28px; height: 28px; flex-shrink: 0; margin-left: calc(28px * -5.5 / 40); }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  margin-left: auto;
  margin-right: var(--space-4);
}
.nav__links a {
  position: relative;
  display: block;
  padding-block: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.82;
  transition: opacity 0.2s;
}
.nav__links a::after {
  content: '';
  position: absolute; left: 0; right: 0.14em; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav__links a:hover, .nav__links a:focus-visible, .nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links:has(a.is-active) a[aria-current="page"]::after { transform: scaleX(0); }
.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.nav__toggle {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  opacity: 0.72;
  border: 1px solid var(--color-border);
  transition: opacity 0.2s, border-color 0.2s;
}
.nav__toggle:hover, .nav__toggle:focus-visible { opacity: 1; border-color: var(--color-border-strong); }
.nav__mobile-btn {
  display: none;
  width: 48px; height: 48px;
  flex-direction: column;
  align-items: flex-end;   /* bars end exactly on the gutter */
  justify-content: center;
  gap: 6px;
  color: var(--color-text);
}
.nav__mobile-btn span {
  display: block; width: 22px; height: 1.5px;
  background: currentColor;
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}
.nav__mobile-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__mobile-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__mobile-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
/* Motion control — shown only while the backdrop actually moves */
.no-gl [data-motion-toggle] { display: none !important; }

/* ═══════════════════════════════════════════════
   BUTTONS · LINKS · TAGS · LABELS
   Brand kit: JetBrains Mono 12px · 1px border · 0 radius
═══════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 48px;
  padding-inline: 20px calc(20px - var(--ls-label));
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--color-text); color: var(--color-bg); }
.btn--solid { background: var(--color-text); color: var(--color-bg); }
.btn--solid:hover { background: transparent; color: var(--color-text); }
.btn--solid:focus-visible { outline-color: var(--color-text); }
.btn--sm { height: 40px; padding-inline: 16px calc(16px - var(--ls-label)); }
.arr { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.3s var(--ease-out); }
.btn:hover .arr, .link-arrow:hover .arr { transform: translateX(4px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--p-text, var(--color-text));
  transition: opacity 0.2s;
}
.link-arrow:hover { opacity: 0.8; }
/* the arrow path ends 2.5px short of its box — land the ink on the edge */
.link-arrow > .arr:last-child { margin-right: -2.5px; }
.link-quiet {
  position: relative;
  padding-block: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  opacity: 0.72;
  transition: opacity 0.2s;
}
.link-quiet::after {
  content: '';
  position: absolute; left: 0; right: var(--ls-label); bottom: 0;
  height: 1px;
  background: var(--color-border-strong);
  transition: background-color 0.2s;
}
.link-quiet:hover, .link-quiet:focus-visible { opacity: 1; }
.link-quiet:hover::after { background: var(--color-text); }

/* tag chip — used by the product-family card panel kept for reuse */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 8px calc(8px - 0.16em);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--p-muted, var(--color-text-muted));
  border: 1px solid currentColor;
}
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   HEADINGS
═══════════════════════════════════════════════ */
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* Bebas' cap-centre sits above its line-box centre; centre the caps in flex rows */
@supports (text-box: trim-both cap alphabetic) {
  .product__id .h3, .nav__logo span, .footer__logo span { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .product__id .h3 { transform: translateY(0.065em); }
  .nav__logo span, .footer__logo span { transform: translateY(0.1em); }
}

/* ═══════════════════════════════════════════════
   HERO — copy anchored bottom-left, action bottom-right
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--nav-h) + var(--space-8));
  padding-bottom: clamp(3rem, 4.45vw, 4rem);
}
.hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-12);
}
.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 58rem;
}
.hero__headline {
  margin-left: -0.03em;   /* optical: the D and F stems land on the gutter */
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero__headline em {
  display: block;
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
}
.hero__desc {
  max-width: 40.625rem;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--text-soft);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: var(--space-5) var(--space-8);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   MISSION — a Bone plate with the MCR mark cut clean through it
═══════════════════════════════════════════════ */
.mission {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  color: var(--inv-text);
  --p-text: var(--inv-text);
  --p-muted: var(--inv-muted);
  --p-rule: var(--inv-line);
  --mark-size: clamp(15rem, 27vw, 24rem);
  --mission-gap: clamp(2rem, 3.4vw, 3rem);
}
.mission__bg {
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--inv-bg);
  --mark-right: max(var(--gutter), (100vw - var(--measure)) / 2);
  -webkit-mask-image: var(--mcr-mark), linear-gradient(#000 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--mark-size) var(--mark-size), 100% 100%;
  -webkit-mask-position: right var(--mark-right) top 50%, 0 0;
  -webkit-mask-composite: xor;
  mask-image: var(--mcr-mark), linear-gradient(#000 0 0);
  mask-repeat: no-repeat;
  mask-size: var(--mark-size) var(--mark-size), 100% 100%;
  mask-position: right var(--mark-right) top 50%, 0 0;
  mask-composite: exclude;
  transition: background-color 0.3s;
}
@supports (width: 1cqw) {
  .mission__bg { --mark-right: max(var(--gutter), (100cqw - var(--measure)) / 2); }
}
.mission__inner {
  padding-top: clamp(3rem, 6.95vw, 6.25rem);
  padding-bottom: clamp(3rem, 6.25vw, 5.5rem);
}
.mission__content {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 4.2vw, 3.75rem);
  /* the copy column never runs closer than 4rem to the cut-out mark */
  max-width: min(54.375rem, 100% - var(--mark-size) - 4rem);
}
.mission__body {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2.78vw, 2.5rem);
}
/* the lead row and the paragraph row share one grid, so the quote rule sits on column two */
.mission__lead,
.mission__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mission-gap);
  row-gap: var(--space-6);
}
.mission__lead { align-items: center; }
.mission__p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--inv-muted);
}
.mission__p strong { color: var(--inv-text); }
.mission__statement {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  align-self: stretch;
}
.vrule {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
  background: var(--inv-text);
}
.mission__quote {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.3vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--inv-text);
}

/* Mission / Vision — a full-bleed band in the page's own surface, set inside the plate: Bone
   above it (the copy and the cut-out mark) and a strip of Bone under it, so the band closes
   About and never reads as the top of the Donnager section. The mark centres on the copy row
   alone. Two tones at display scale: the setup muted, the promise in full ink. */
.mission--band { display: grid; grid-template-columns: minmax(0, 1fr); }
.mission--band > .mission__bg,
.mission--band > .mission__inner { grid-area: 1 / 1 / 2 / 2; }   /* explicit end lines: an absolute child with an auto end spans the whole section */
.mission--band > .mvb { grid-area: 2 / 1 / 3 / 2; }
.mission--band::after {
  content: '';
  grid-area: 3 / 1 / 4 / 2;
  height: clamp(3rem, 6.25vw, 5.5rem);   /* the plate's own bottom padding */
  background: var(--inv-bg);
  transition: background-color 0.3s;
}
.mvb {
  padding-block: clamp(3.5rem, 6.1vw, 5.5rem);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}
/* two halves of the page grid: Vision starts on the centre line, each statement runs 7/8 of its half */
.mvb__grid {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mvb__item {
  --mvb-size: clamp(1.5rem, 0.031 * min(100vw - 2 * var(--gutter), var(--measure)), 3rem);   /* = 3.1cqi without container units */
  padding-right: 12.5%;
}
@supports (width: 1cqi) {
  .mvb__item { --mvb-size: clamp(1.5rem, 3.1cqi, 3rem); }   /* sized to the measure: five lines at every width */
}
.mvb__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, var(--mvb-size) * 0.6, 1.5rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.mvb__text {
  max-width: 15em;
  margin-top: calc(var(--mvb-size) * 0.6);
  font-size: var(--mvb-size);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--color-text-muted);
  text-wrap: balance;
}
.mvb__em { font-weight: inherit; color: var(--color-text); }
.mvb__nw { white-space: nowrap; }   /* phrases that never split: no stranded article, dash or last clause */
/* enlarged user text (a larger default font, WCAG 1.4.12 spacing) must reflow, never clip: the closing
   clause stays whole while it fits and wraps inside itself when it can't; in a column narrower than
   10rem the inner groups may wrap too */
.mvb__nw:last-child { display: inline-block; max-width: 100%; white-space: normal; }
@container (inline-size < 10rem) { .mvb__nw { white-space: normal; } }

/* ═══════════════════════════════════════════════
   PLATFORMS — section head and product panel
═══════════════════════════════════════════════ */
.platforms { padding-top: var(--section-pad); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin-bottom: clamp(1.75rem, 2.78vw, 2.5rem);
}

/* Panels — glass over the backdrop; product signal as a 2px top line */
.panels {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  margin-top: var(--panel-gap);
}
.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--panel-pad) var(--panel-pad) calc(var(--panel-pad) * 0.8);
  color: var(--p-text);
  background: var(--p-bg);
  border: 1px solid var(--p-line);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
          backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  transition: background-color 0.3s, border-color 0.3s;
}
.panel--glass {
  --p-bg: var(--glass);
  --p-line: var(--glass-line);
  --p-rule: var(--color-border);
  --p-text: var(--color-text);
  --p-muted: var(--glass-muted);
}
.panel--smoke {
  --p-bg: var(--smoke);
  --p-line: var(--smoke-line);
  --p-rule: var(--smoke-line);
  --p-text: var(--color-text);
  --p-muted: var(--smoke-muted);
}
.panel--inverse {
  --p-bg: var(--inv-bg);
  --p-line: var(--inv-line);
  --p-rule: var(--inv-line);
  --p-text: var(--inv-text);
  --p-muted: var(--inv-muted);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.panel__inner { position: relative; }
.panel__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--space-6);
}
.panel__head > .link-arrow { min-height: 36px; }
.panel__rule { margin-block: clamp(0.75rem, 1.39vw, 1.25rem); }
.panel__foot {
  margin-top: clamp(1.5rem, 2.1vw, 1.875rem);
  padding-top: var(--space-5);
  border-top: 1px solid var(--p-rule);
}

.product--donnager { --accent: var(--donnager); }
/* product signals not used on any page at present */
.product--tachi    { --accent: var(--tachi); }
.product--scirocco { --accent: var(--scirocco); }
[data-theme="dark"] .panel--smoke.product--tachi { --accent: var(--tachi-bright); }
.product { border-top: 2px solid var(--accent); }
.product__geo {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -4%;
  width: min(44%, 560px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: translateY(-58%);
  pointer-events: none;
  transition: transform 0.8s var(--ease-out);
}
.product:hover .product__geo { transform: translateY(-58%) scale(1.03); }
.product__id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  min-width: 0;
}
.product__mark { width: 36px; height: 36px; flex-shrink: 0; }
[data-theme="dark"] .panel--smoke .product__mark [stroke] { stroke: var(--tachi-bright); }
[data-theme="dark"] .panel--smoke .product__geo circle { stroke: var(--tachi-bright); }
[data-theme="dark"] .panel--smoke .product__geo circle:last-child { display: none; }
.product--scirocco .product__geo path:first-child { opacity: 0.035; }
@media (min-width: 48em) { .product--scirocco .product__geo { right: -10%; } }
[data-theme="dark"] .panel--smoke .product__mark [fill="#C0271A"] { fill: var(--tachi-bright); }
.product__tagline { color: var(--p-muted); }
.product__desc {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--p-muted);
}
.product__desc strong { color: var(--p-text); }

.caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
.cap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--p-rule);
}
/* index, title and description rows line up across the row even when a title wraps */
@supports (grid-template-rows: subgrid) {
  .cap {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: var(--space-2);
    align-content: start;
  }
}
.cap::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--accent, var(--p-text));
  transition: width 0.5s var(--ease-out);
}
.cap:hover::before { width: 100%; }
.cap__index { color: var(--p-muted); }
.cap__title {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-text);
}
.cap__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--p-muted);
}

/* ═══════════════════════════════════════════════
   PLEDGES — ruled three-up items (Three Non-Negotiables; Donnager's Yours To Run)
═══════════════════════════════════════════════ */
.pledges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  margin-top: clamp(0.75rem, 1.39vw, 1.25rem);
}
.pledge {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--p-rule);
}
.pledge::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--p-text);
  transition: width 0.5s var(--ease-out);
}
.pledge:hover::before { width: 100%; }
.pledge__meta { display: flex; align-items: center; gap: var(--space-3); color: var(--p-muted); }
.pledge__title {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.pledge__desc {
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--p-muted);
}

/* ═══════════════════════════════════════════════
   CONTACT FOOTER — one glass plate, three columns
═══════════════════════════════════════════════ */
.site-footer { padding-top: clamp(3rem, 4.45vw, 4rem); }
.footer-panel {
  background: var(--footer-bg);
  border: 1px solid var(--glass-line);
  border-bottom: 0;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding: clamp(1.25rem, 4.45vw, 4rem) var(--panel-pad) 0;
}
.footer-panel__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
  align-items: start;
  padding-bottom: clamp(2.5rem, 4.45vw, 4rem);
}
.footer__headline {
  font-family: var(--font-display);
  font-size: var(--fs-foot-head);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.footer__headline em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-text);
}
.footer__note {
  text-wrap: pretty;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  max-width: 26rem;
}
.footer__actions .btn { flex: 1 1 11rem; }
/* the three columns start on one line: the headline's cap height */
@media (min-width: 62em) {
  .footer__actions { max-width: none; margin-top: calc(var(--fs-foot-head) * 0.07); }
  .footer__actions .btn:only-child { flex: 0 1 auto; }
}
.footer-panel__bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) var(--space-6);
  align-items: center;
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--glass-line);
}
.footer__logo {
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: fit-content;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
}
.footer__logo svg { width: 28px; height: 28px; flex-shrink: 0; margin-left: calc(28px * -5.5 / 40); }
.footer__links, .footer__meta { grid-column: 2 / -1; }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.footer__links a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--color-text); }
.footer__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════
   INNER PAGES (Donnager, Partners) — the inner-page pattern:
   a shorter hero, then contained plates, then the contact plate
═══════════════════════════════════════════════ */
.hero--page { min-height: max(34rem, 72vh); min-height: max(34rem, 72svh); }
.panels--page { margin-top: 0; }
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-nav a[aria-current="page"]::after {
  content: '';
  width: 8px; height: 8px;
  flex-shrink: 0;
  background: currentColor;
}
.panel__lead {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 3.4vw, 3rem);
  row-gap: var(--space-6);
}
.panel__p {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--p-muted);
}
.caps--flush { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); }
/* product feature items: the brand's feature card — 2px top line in the product signal.
   Not used on any page at present; kept so the product-family panel can return unchanged. */
.pledge.product-item { border-top: 2px solid var(--accent); }
.product-item .pledge__desc strong { font-weight: 500; color: var(--p-text); }
.pledge.product-item::before { display: none; }
.product-item__id { display: flex; align-items: center; gap: var(--space-3); }
.product-item__mark { width: 28px; height: 28px; flex-shrink: 0; }
.product-item__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); color: var(--p-muted); }
.product-item .link-arrow { margin-top: auto; padding-top: var(--space-2); }
/* name, meta, description and link rows line up across the three products */
@supports (grid-template-rows: subgrid) {
  .pledge.product-item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; }
  .product-item .link-arrow { justify-self: start; align-self: end; }
}

/* ═══════════════════════════════════════════════
   MARKETING COMPONENTS (home + Donnager)
═══════════════════════════════════════════════ */
/* product badge above a page H1 */
/* a glass chip, so the label holds its contrast wherever the backdrop's highlight falls */
.hero__badge {
  display: flex; align-items: center; gap: var(--space-3);
  width: fit-content;
  padding: 6px 14px 6px 8px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.hero__badge svg { width: 24px; height: 24px; flex-shrink: 0; }

/* partner routes (Partners page): an outlined display numeral over each way in, on a hairline
   with a short ink bar; rows line up across the three */
.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-6);
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.ways__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--p-rule);
}
@supports (grid-template-rows: subgrid) {
  .ways__item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; }
}
.ways__item::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 2.5rem; height: 2px;
  background: var(--p-text);
}
.ways__n {
  margin: 0 0 var(--space-3) -0.03em;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.4rem + 3vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--p-text);
}
@supports not (-webkit-text-stroke: 1px black) { .ways__n { color: var(--p-text); } }
.ways__item > .label { color: var(--p-muted); }
.ways__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-text);
}
.ways__desc { max-width: 34ch; font-size: var(--fs-body); line-height: 1.6; color: var(--p-muted); }

/* Why MCR — the company's stance: one display statement (a solid line, then an outlined line stepped
   in to the title column), then four ruled rows on a 12-track grid. The statement is held
   below the hero headline at every width. */
.why { --why-gap: var(--space-6); --why-num: 4.5rem; }
.why__head, .why__item { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--why-gap); }
.why__eyebrow { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); margin-bottom: clamp(1.25rem, 2.2vw, 2rem); color: var(--p-muted); }
.why__eyebrow::before { content: ''; width: 2rem; height: 1px; flex-shrink: 0; background: currentColor; }
.why__statement {
  grid-column: 1 / -1;
  margin-left: -0.03em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-hero) * 0.8);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--p-text);
}
.why__line { display: block; text-wrap: balance; }
.why__line--outline { padding-left: calc((100% - 11 * var(--why-gap)) / 12 + var(--why-gap)); }
@supports (-webkit-text-stroke: 1px black) {
  .why__line--outline { color: transparent; -webkit-text-stroke: 1px var(--p-text); }
}
.why__list { margin-top: clamp(2.25rem, 3.6vw, 3.25rem); border-bottom: 1px solid var(--p-rule); }
.why__item { position: relative; align-items: baseline; padding-block: clamp(1.25rem, 1.8vw, 1.75rem); border-top: 1px solid var(--p-rule); }
.why__item::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: var(--p-text); transition: width 0.5s var(--ease-out); }
.why__item:hover::before { width: 100%; }
.why__num { grid-column: 1 / 2; color: var(--p-muted); }
.why__title { grid-column: 2 / 7; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--p-text); text-wrap: balance; }
.why__desc { grid-column: 7 / -1; max-width: 34em; font-size: var(--fs-lede); line-height: 1.5; color: var(--p-muted); text-wrap: pretty; }

/* a pull statement with a hairline rule, in the display face */
.quote {
  padding-left: var(--space-5);
  border-left: 1px solid var(--p-text, var(--color-text));
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.25rem + 0.75vw, 2rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-text, var(--color-text));
  max-width: 34em;
}
.panel__intro {
  max-width: 44em;
  margin-top: var(--space-6);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--p-muted);
}
.panel__intro strong { font-weight: 500; color: var(--p-text); }
.graph figcaption .label { display: block; margin-top: var(--space-2); }
.panel__block { margin-top: clamp(2rem, 3.5vw, 3rem); }
.panel__sub { color: var(--p-muted); margin-bottom: var(--space-4); }

/* three-up ruled grid */
.caps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap__title, .seal { text-wrap: balance; }

/* data → decision strip (panel foot) */
.loop-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-8);
}
.loop-strip > .label { color: var(--p-muted); }
.loop-strip ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--p-text);
}
/* the arrow trails each step, so a wrapped line ends on an arrow rather than starting with one */
.loop-strip li:not(:last-child)::after {
  content: '\2192';
  content: '\2192' / '';
  margin-left: var(--space-3);
  color: var(--p-muted);
}

/* question → answer rows (Built to be questioned, Yours to run) */
.qa { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.qa__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* the answer starts on the second of three tracks, like the cards above */
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid var(--p-rule);
}
.qa__row:last-child { border-bottom: 1px solid var(--p-rule); }
.qa__q {
  font-family: var(--font-display);
  font-size: var(--fs-card);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-text);
}
.qa__q--label { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.6; padding-top: 0.2em; color: var(--p-muted); }
.qa__a { grid-column: 2 / -1; max-width: 44em; font-size: var(--fs-body); line-height: 1.6; color: var(--p-muted); }
.qa__a strong { color: var(--p-text); }

/* the join: five systems, then one graph */
.join {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--p-rule);
  border-bottom: 1px solid var(--p-rule);
}
.join__half { padding: var(--space-6) var(--space-6) var(--space-5) 0; display: flex; flex-direction: column; gap: var(--space-4); }
.join__half + .join__half { padding-left: var(--space-6); padding-right: 0; border-left: 1px solid var(--p-rule); }
.join__half > .label { color: var(--p-muted); }
.join svg { width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.join svg .jx-box { fill: none; stroke: currentColor; stroke-opacity: 0.55; }
.join svg .jx-txt { fill: currentColor; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
.join svg .jx-link { stroke: currentColor; stroke-opacity: 0.55; fill: none; }
.join svg .jx-risk { stroke: var(--accent, currentColor); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; }
.join svg .jx-dot { fill: var(--p-bg); stroke: var(--accent, currentColor); stroke-width: 1.5; }
.join__note { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.7; color: var(--p-muted); }
.join__note b { font-weight: 500; color: var(--accent-ink, var(--p-text)); }

/* product page: the product signal, and a text-safe tint of it for each surface */
.page--donnager { --accent: var(--donnager); }
[data-theme="dark"]  .page--donnager { --accent-ink: var(--donnager-bright); }
[data-theme="light"] .page--donnager { --accent-ink: #2f5ea8; }
[data-theme="dark"]  .page--donnager .panel--inverse { --accent-ink: #2f5ea8; }
[data-theme="light"] .page--donnager .panel--inverse { --accent-ink: var(--donnager-bright); }
.page--donnager .panel--smoke { --accent-ink: var(--p-text); }
.hero__badge .label { color: var(--color-text); }

/* entity graph (What it finds) */
.finds {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.finds__list { display: grid; gap: var(--space-6); }
.finds__item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--p-rule); }
.finds__item .label { color: var(--p-muted); padding-top: 0.35em; }
.finds__item .cap__title { margin-top: 0; }
.finds__item .cap__desc { grid-column: 2; }
.graph { margin: 0; color: var(--p-text); }
.graph svg { width: 100%; height: auto; overflow: visible; }
.graph .gx-edge { fill: none; stroke: currentColor; stroke-opacity: 0.5; }
.graph .gx-node { fill: var(--p-node, rgba(10,10,10,0.6)); stroke: currentColor; stroke-opacity: 0.55; }
.graph .gx-label { fill: currentColor; fill-opacity: 0.88; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; }
.graph .gx-sub { fill: currentColor; fill-opacity: 0.62; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
.graph .gx-pct { fill: currentColor; fill-opacity: 0.62; font-family: var(--font-mono); font-size: 11px; }
.graph .gx-found { fill: none; stroke: var(--donnager-bright); stroke-width: 1.3; stroke-dasharray: 5 4; }
.graph .gx-found-node { fill: var(--p-node, rgba(10,10,10,0.6)); stroke: var(--donnager-bright); stroke-width: 1.3; stroke-dasharray: 5 4; }
.graph .gx-flag { fill: var(--donnager-bright); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; }
.graph .gx-arrow { fill: currentColor; fill-opacity: 0.55; }
.graph figcaption { margin-top: var(--space-5); font-size: var(--fs-small); line-height: 1.6; color: var(--p-muted); }
[data-theme="light"] .graph .gx-found, [data-theme="light"] .graph .gx-found-node { stroke: var(--donnager); }
[data-theme="light"] .graph .gx-flag { fill: #2f5ea8; }
[data-theme="light"] .graph { --p-node: rgba(245,245,243,0.7); }
/* the discovered links draw on as the figure arrives */
.reveal-ready .graph.reveal .gx-discovered { opacity: 0; transition: opacity 0.7s var(--ease-out) calc(0.45s + var(--at, 0s)); }
.reveal-ready .graph.reveal.visible .gx-discovered { opacity: 1; }
.graph .gx-flag { paint-order: stroke; stroke: var(--color-bg); stroke-width: 5px; stroke-linejoin: round; }
.graph .gx-sub--found { fill-opacity: 0.7; }

/* request → checks → answer */
.flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.flow__box { border: 1px solid var(--p-rule); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.flow__box .label { color: var(--p-muted); }
.flow__box p:not(.label) { font-size: var(--fs-small); line-height: 1.45; font-weight: 500; color: var(--p-text); }
.flow__box--out { border-color: var(--accent, var(--p-text)); }
.flow__arrow { width: 28px; height: 16px; color: var(--p-muted); }
.flow__checks { border: 1px solid var(--p-text); }
.flow__checks > .label { display: block; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--p-rule); color: var(--p-muted); }
.flow__checks ul { list-style: none; }
.flow__checks li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); font-size: var(--fs-small); color: var(--p-text); }
.flow__checks li + li { border-top: 1px solid var(--p-rule); }
.flow__checks li::before { content: ''; width: 8px; height: 8px; flex-shrink: 0; background: var(--accent, var(--p-text)); }
.flow__refused { grid-column: 3; margin-top: calc(-1 * var(--space-2)); border: 1px dashed var(--p-rule); padding: var(--space-3) var(--space-5); font-size: var(--fs-small); color: var(--p-muted); }
.flow__refused b { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 500; color: var(--p-text); margin-right: var(--space-2); }
.flow-note { margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.7; color: var(--p-muted); }

/* sector tiles */
.sectors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
}
.sector {
  display: flex;
  align-items: flex-end;
  min-height: 5.5rem;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--p-rule);
  border-top: 2px solid var(--accent, var(--p-text));
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  color: var(--p-text);
}

/* the seal line */
.seal {
  margin-top: clamp(2.5rem, 4.5vw, 4rem);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--p-text);
  max-width: 22em;
}


/* ═══════════════════════════════════════════════
   SPECIMENS — miniatures drawn from the Donnager platform demo
   (ported from the previous Donnager page; static, 2×2)
═══════════════════════════════════════════════ */
.specimens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.5rem) var(--space-6);
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
  --sev-crit: #C0271A; --sev-high: #B8941F; --sev-med: var(--donnager);
  --spec-line: var(--p-rule, var(--color-border));
  --spec-surface: var(--color-surface);
  --spec-surface-2: var(--color-surface-2);
  --donnager-dim: rgba(74,124,201,0.15);
  --donnager-line: rgba(74,124,201,0.35);
}
.specimen { display: flex; flex-direction: column; gap: var(--space-5); }
.specimen > .rtn-sp { order: -1; }
@supports (grid-template-rows: subgrid) {
  .specimen { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: var(--space-5); }
}
.head-stamp { display: inline-flex; align-items: center; height: 28px; padding-inline: 10px; border: 1px solid var(--p-rule); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--p-muted); white-space: nowrap; }
.rtn-sp { display: flex; flex-direction: column; min-height: 20rem; border: 1px solid var(--spec-line); background: var(--spec-surface); color: var(--color-text); }
.rtn-sp__strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1.1rem; border-bottom: 1px solid var(--spec-line); }
.rtn-sp__type, .rtn-sp__mark, .rtn-sp__foot { font-family: var(--font-mono); font-size: .6875rem; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.rtn-sp__type { color: var(--color-text-muted); }
.rtn-sp__mark { border: 1px solid var(--spec-line); padding: .1rem .5rem; color: var(--color-text-muted); }
.rtn-sp__body { flex: 1; min-height: 0; overflow: hidden; padding: 1.15rem 1.25rem; position: relative; display: grid; align-content: center; container-type: inline-size; }
.rtn-sp__foot { padding: .65rem 1.25rem; border-top: 1px solid var(--spec-line); color: var(--color-text-muted); }
.rtn-t { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.spec-cap__t { font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: var(--p-text); }
.spec-cap__d { margin-top: var(--space-2); font-size: var(--fs-small); line-height: 1.6; color: var(--p-muted); max-width: 36em; }
/* 01 · ontology explorer */
.rtn-on { display: grid; gap: .7rem; }
.rtn-on__key { display: flex; gap: 1.1rem; flex-wrap: wrap; color: var(--color-text-muted); }
.rtn-on__key b { font-weight: 400; display: inline-flex; align-items: center; gap: .4rem; }
.rtn-on__key i { width: 7px; height: 7px; display: inline-block; }
.rtn-on__map { --sc: 1; height: calc(176px * var(--sc)); position: relative; overflow: hidden; }
.rtn-on__canvas { position: absolute; top: 0; left: 50%; width: 420px; height: 176px; margin-left: calc(-210px * var(--sc)); transform: scale(var(--sc)); transform-origin: top left; }
.rtn-on__canvas svg { position: absolute; inset: 0; }
.rtn-node { position: absolute; border: 1px solid var(--spec-line); background: var(--spec-surface-2); padding: .3rem .5rem .35rem; display: grid; gap: .1rem; min-width: 6.4rem; }
.rtn-node--sel { border-color: var(--donnager); background: linear-gradient(var(--donnager-dim), var(--donnager-dim)), var(--spec-surface-2); }
.rtn-node__k { display: flex; align-items: center; gap: .35rem; color: var(--color-text-muted); font-size: .625rem; }
.rtn-node__k i { width: 6px; height: 6px; display: inline-block; }
.rtn-node__n { font-size: .8125rem; line-height: 1.2; }
.rtn-on__flag { border: 1px solid rgba(192,39,26,.45); border-left-width: 2px; padding: .4rem .6rem; color: var(--tachi-bright); }
/* the 420px ontology canvas steps down so it always fits its card */
/* narrower than the 420px map, it would shrink its text past legibility — lay the nodes out as a list */
@container (max-width: 419px) {
  .rtn-on__map { height: auto; overflow: visible; }
  .rtn-on__canvas { position: static; width: auto; height: auto; margin: 0; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .rtn-on__canvas svg { display: none; }
  .rtn-node { position: static; width: auto !important; min-width: 0; }
  .rtn-node__k { white-space: nowrap; }
}
@container (max-width: 259px) { .rtn-on__canvas { grid-template-columns: 1fr; } }
/* 02 · findings register */
.rtn-fr { display: grid; }
.rtn-fr__row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; padding: .65rem 0 .7rem .7rem; border-bottom: 1px solid var(--spec-line); border-left: 2px solid var(--sev); align-items: start; }
.rtn-fr__row:last-child { border-bottom: 0; }
.rtn-fr__id { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rtn-fr__sev { border: 1px solid var(--sev); color: var(--color-text); padding: .05em .4em; }
.rtn-fr__cat { color: var(--color-text-muted); }
.rtn-fr__h { font-size: .9375rem; line-height: 1.35; margin: .3rem 0 .28rem; }
.rtn-fr__m { color: var(--color-text-muted); font-size: .625rem; }
.rtn-fr__c { text-align: right; white-space: nowrap; }
.rtn-fr__pct { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .01em; color: var(--donnager-bright); line-height: 1; }
.rtn-fr__lab { color: var(--color-text-muted); font-size: .625rem; display: block; margin-top: .15rem; }
.rtn-fr__imp { color: var(--color-text-muted); display: block; margin-top: .35rem; font-size: .625rem; }
/* 03 · report generator */
.rtn-rg { display: grid; gap: .6rem; }
.rtn-rg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.rtn-rg__c { border: 1px solid var(--spec-line); padding: .45rem .55rem; display: grid; gap: .15rem; }
.rtn-rg__c--on { border-color: var(--donnager); background: var(--donnager-dim); }
.rtn-rg__t { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; }
.rtn-rg__t i { width: 7px; height: 7px; background: var(--donnager); flex: none; }
.rtn-rg__d { color: var(--color-text-muted); font-size: .625rem; letter-spacing: .08em; }
.rtn-rg__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid var(--donnager-line); padding: .3rem .55rem; }
.rtn-rg__opt b { font-weight: 400; display: flex; align-items: center; gap: .45rem; font-size: .8125rem; }
.rtn-rg__opt b::before { content: "\2713"; color: var(--donnager-bright); font-size: .7rem; }
.rtn-rg__opt span { color: var(--color-text-muted); font-size: .625rem; }
.rtn-rg__foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rtn-rg__fmt { display: inline-flex; }
.rtn-rg__fmt span { border: 1px solid var(--spec-line); padding: .22rem .55rem; color: var(--color-text-muted); }
.rtn-rg__fmt span.on { border-color: var(--donnager); color: var(--donnager-bright); }
.rtn-rg__go { border: 1px solid var(--donnager); background: var(--donnager-dim); color: var(--donnager-bright); padding: .3rem .7rem; }
.rtn-rg__note { color: var(--color-text-muted); font-size: .625rem; }
/* 04 · append-only log */
.rtn-al { display: grid; gap: .45rem; }
.rtn-al__bar { border: 1px solid var(--spec-line); padding: .32rem .55rem; color: var(--color-text-muted); font-size: .625rem; letter-spacing: .1em; }
.rtn-al__t { display: grid; }
.rtn-al__h, .rtn-al__r { display: grid; grid-template-columns: 3.4rem 4.4rem minmax(0,1fr) 4.8rem; gap: .5rem; align-items: baseline; font-size: .625rem; letter-spacing: .08em; }
.rtn-al__h { color: var(--color-text-muted); padding-bottom: .3rem; border-bottom: 1px solid var(--spec-line); }
.rtn-al__r { padding: .32rem 0; border-bottom: 1px solid var(--spec-line); }
.rtn-al__r:last-child { border-bottom: 0; }
.rtn-al__a { display: flex; align-items: center; gap: .35rem; }
.rtn-al__a i { width: 6px; height: 6px; background: var(--donnager); flex: none; }
.rtn-al__act { color: var(--color-text-muted); font-weight: 400; }
.rtn-al__out { color: var(--donnager-bright); white-space: nowrap; }
.rtn-al__out--no { color: var(--tachi-bright); }
.rtn-sp i.rtn-sw--hollow { background: none; box-shadow: inset 0 0 0 1px var(--sw, #B8941F); }
.rtn-al__a i.rtn-sw--hollow { --sw: var(--color-text-muted); }
[data-theme="light"] .specimens { --donnager-dim: rgba(74,124,201,0.12); }
[data-theme="light"] .rtn-fr__pct, [data-theme="light"] .rtn-rg__opt b::before, [data-theme="light"] .rtn-rg__fmt span.on,
[data-theme="light"] .rtn-rg__go, [data-theme="light"] .rtn-al__out { color: #2f5ea8; }
[data-theme="light"] .rtn-al__out--no { color: var(--tachi); }
[data-theme="light"] .rtn-on__flag { color: var(--tachi); }
/* muted text on the tinted (selected) cards needs a step more contrast than on plain surface */
.rtn-node--sel .rtn-node__k, .rtn-rg__c--on .rtn-rg__d { color: #a3a3a3; }
[data-theme="light"] .rtn-node--sel .rtn-node__k, [data-theme="light"] .rtn-rg__c--on .rtn-rg__d { color: #555; }

/* ═══════════════════════════════════════════════
   REVEAL — armed only once the observer is attached;
   never on an ancestor of a glass surface
═══════════════════════════════════════════════ */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal-ready .reveal.visible, .reveal-ready .reveal:focus-within { opacity: 1; transform: none; }
.reveal-ready.is-intro .hero .reveal { opacity: 0; transform: translateY(24px); }
.reveal-delay-1 { transition-delay: 0.08s !important; }
.reveal-delay-2 { transition-delay: 0.18s !important; }
.reveal-delay-3 { transition-delay: 0.28s !important; }

/* ═══════════════════════════════════════════════
   MOBILE NAV
═══════════════════════════════════════════════ */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: calc(var(--nav-row) + var(--space-6)) var(--gutter) var(--space-10);
  flex-direction: column;
  background: var(--color-bg);
  overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  transition: opacity 0.2s;
}
.mobile-nav a:hover { opacity: 0.72; }
.mobile-nav__motion {
  align-self: flex-start;
  margin-top: var(--space-8);
  padding-block: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.2s;
}
.mobile-nav__motion:hover { color: var(--color-text); }

/* ═══════════════════════════════════════════════
   INTRO ANIMATION
═══════════════════════════════════════════════ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--intro-bg);
  color: var(--intro-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.no-js #intro { display: none; }
@media (prefers-reduced-motion: reduce) { #intro { display: none; } }
#intro.fade-out {
  animation: introFadeOut 0.9s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes introFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}
.intro-svg-wrap {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: visible;
}
#intro-logo {
  overflow: visible;
}
.intro-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.32em;
  /* letter-spacing centering (0.32em) + optical alignment to logo visual center (+0.4em) */
  padding-left: 0.72em;
  color: var(--intro-ink);
  opacity: 0;
  text-transform: uppercase;
  transition: none;
}
/* Subtle vignette glow at centre */
.intro-glow {
  position: absolute;
  width: 320px; height: 320px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--intro-ink) 4%, transparent) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 85em) {
  .nav__cta { display: none; }
}
@media (max-width: 73.75em) {
  .sectors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow { grid-template-columns: 1fr; justify-items: stretch; }
  .flow__arrow { transform: rotate(90deg); justify-self: center; }
  .flow__refused { grid-column: 1; margin-top: calc(-1 * var(--space-2)); order: 2; }
  /* stacked: the refusal sits under the checks it failed, then the path continues to the answer */
  .flow > :nth-child(4), .flow > :nth-child(5) { order: 3; }
  .specimens { grid-template-columns: 1fr; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product__geo { width: min(56%, 520px); }
}
/* 992–1180: the cut-out stays; the copy becomes one readable column beside it */
@media (min-width: 62em) and (max-width: 73.75em) {
  .mission__lead, .mission__cols { grid-template-columns: 1fr; }
  .mission__lead { row-gap: var(--space-8); }
  .mission__statement { align-self: auto; }
  .mission__content { max-width: min(36rem, 100% - var(--mark-size) - 4rem); }
}
/* product headers wrap the same way in all three panels */
@media (max-width: 63.9375em) {
  .product__tagline { flex-basis: 100%; }
  .product__id { row-gap: var(--space-2); }
}
/* the hero copy and actions stack while a row would squeeze the display headline into three lines */
@media (max-width: 68.75em) {
  .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}
/* the nav folds into the menu button while four links, the motion and theme controls
   can't sit beside the wordmark with real air between them */
@media (max-width: 56.25em) {
  .nav__links { display: none; }
  .nav__right [data-motion-toggle] { display: none; }
  .nav__mobile-btn { display: flex; }
  .nav__right { margin-left: auto; }
}
@media (min-width: 56.3125em) {
  .mobile-nav__motion { display: none; }
}
@media (max-width: 61.9375em) {
  .mission__bg { -webkit-mask-image: none; mask-image: none; }
  .mission__content { max-width: none; }
  .mvb__grid { column-gap: var(--mission-gap); }   /* Vision starts on the x of the plate's second column */
  .mvb__item { padding-right: 0; }
  .pledges { grid-template-columns: 1fr; }
  .why__line--outline { padding-left: calc(var(--why-num) + var(--why-gap)); }
  .why__item { grid-template-columns: var(--why-num) minmax(0, 1fr); row-gap: var(--space-2); }
  .why__num { grid-column: 1; grid-row: 1 / span 2; }
  .why__title, .why__desc { grid-column: 2; }
  .ways { grid-template-columns: 1fr; gap: var(--space-10); }
  .ways__item { display: flex; grid-row: auto; }
  .ways__desc { max-width: 52ch; }
  .pledge__desc { max-width: 52ch; }
  .panel__lead { grid-template-columns: 1fr; }
  .caps--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps--3:not(:has(> :nth-child(4))) { grid-template-columns: 1fr; }
  .finds { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qa__row { grid-template-columns: 1fr; }
  .qa__a { grid-column: auto; }
  .footer-panel__grid { grid-template-columns: 1fr; }
  .footer-panel__bar { grid-template-columns: 1fr; gap: var(--space-4); }
  .footer__logo, .footer__links, .footer__meta { grid-row: auto; grid-column: auto; }
}
@media (max-width: 47.9375em) {
  :root { --nav-h: 96px; --nav-row: 48px; --glass-blur: 24px; }
  .nav__inner { margin-top: 24px; }
  .mobile-nav { padding-top: calc(var(--nav-h) + var(--space-2)); }
  .backdrop__grid { --cols: 8; }
  .mission__lead { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .mission__statement { align-self: auto; }
  .mission__cols { grid-template-columns: 1fr; }
  .mvb__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .mvb__item { --mvb-size: clamp(1.375rem, 0.067 * (100vw - 2 * var(--gutter)), 1.875rem); }   /* = 6.7cqi */
  @supports (width: 1cqi) { .mvb__item { --mvb-size: clamp(1.375rem, 6.7cqi, 1.875rem); } }
  .mission__p, .cap__desc { max-width: 36em; }
  .caps { grid-template-columns: 1fr; gap: var(--space-6); }
  .caps--3 { grid-template-columns: 1fr; }
  .join { grid-template-columns: 1fr; }
  .join__half { padding-right: 0; }
  .join__half + .join__half { padding-left: 0; border-left: 0; border-top: 1px solid var(--p-rule); }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rtn-al__h, .rtn-al__r { grid-template-columns: minmax(0,1fr) 4.8rem; }
  .rtn-al__h span:nth-child(-n+2), .rtn-al__r span:nth-child(-n+2) { display: none; }
  .rtn-fr__row { grid-template-columns: 1fr; }
  .graph .gx-label { font-size: 18px; letter-spacing: 0.02em; transform: translateY(-3px); }
  .graph .gx-sub, .graph .gx-pct { font-size: 16px; letter-spacing: 0.04em; }
  .graph .gx-sub { transform: translateY(3px); }
  .graph .gx-sub--found { font-size: 13px; transform: none; }
  .graph .gx-flag { font-size: 15px; letter-spacing: 0.06em; }
  .panel__head > .head-stamp { grid-column: 1 / -1; justify-self: start; margin-top: var(--space-3); }
  .rtn-fr__c { text-align: left; }
  .rtn-rg__grid { grid-template-columns: 1fr; }
  .rtn-rg__opt { flex-direction: column; align-items: flex-start; gap: .1rem; }

  .product__geo { width: 72%; right: -18%; top: 0; transform: translateY(-12%); opacity: 0.7; }
  .product:hover .product__geo { transform: translateY(-12%); }
  /* the product link becomes the arrow alone, with a full 44px target */
  .link-arrow__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .panel__head .link-arrow .arr { width: 22px; height: 22px; }
  .panel__head > .link-arrow { position: relative; }
  .panel__head > .link-arrow::after { content: ''; position: absolute; inset: -4px -13px; }
}
@media (max-width: 37.9375em) {
  .footer__links { max-width: 20rem; }
}
@media (max-width: 37.5em) {
  .why { --why-gap: var(--space-4); --why-num: 2.5rem; }
  .product__id .h3 { flex: 1 1 calc(100% - 36px - var(--space-5)); }
  .hero__actions { column-gap: var(--space-6); }
  .footer__actions { max-width: none; }
  .footer__actions .btn { flex: 1 1 auto; }
}
@media (max-width: 22.4375em) {
  .nav__inner { gap: var(--space-4); }
  .nav__right { gap: var(--space-2); }
  .hero__actions { column-gap: var(--space-4); }
  .hero__actions .btn { padding-inline: 14px calc(14px - var(--ls-label)); }
}
/* landscape phones: a shorter nav, a hero that fits, the whole menu on one screen */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --nav-h: 72px; --nav-row: 56px; }
  .nav__inner { margin-top: 0; }
  .hero { padding-top: calc(var(--nav-h) + var(--space-4)); padding-bottom: var(--space-6); }
  .hero--page { min-height: 100vh; min-height: 100svh; }
  .hero__badge { display: none; }
  .hero__text { gap: var(--space-4); }
  .hero__headline { font-size: max(3.5rem, min(var(--fs-hero), 15vh)); }
  .hero__inner { gap: var(--space-6); }
  .mobile-nav { padding-top: calc(var(--nav-row) + var(--space-4)); }
  .mobile-nav a { font-size: clamp(1.5rem, 8vh, 2.75rem); padding-block: var(--space-3); }
  .mobile-nav.open {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    column-gap: var(--gutter);
    align-content: start;
  }
  .mobile-nav__motion { margin-top: 0; justify-self: start; align-self: center; }
}

/* Theme switch: the View Transition cross-fades the whole page as one image. Element transitions
   are held off meanwhile, so nothing lags behind the fade or finishes after it. */
.theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);   /* symmetric ease: no early flash of the new theme */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .reveal-ready .reveal, .reveal-ready.is-intro .hero .reveal { opacity: 1; transform: none; transition: none; }
  .backdrop__canvas { transition: none; }
  [data-motion-toggle] { display: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  [data-theme="dark"]  { --glass: rgba(14,14,14,0.9);  --smoke: rgba(84,84,84,0.95); --footer-bg: rgba(10,10,10,0.9); }
  [data-theme="light"] { --glass: rgba(245,245,243,0.94); --smoke: rgba(226,226,224,0.94); --footer-bg: rgba(245,245,243,0.92); }
}
/* Without a live shader the blur has nothing to soften — skip its compositing cost */
.no-gl .panel, .no-gl .footer-panel, .no-gl .hero__badge,
.no-js .panel, .no-js .footer-panel, .no-js .hero__badge {
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* No script: the theme and menu buttons would do nothing — the footer carries every link */
.no-js .nav__toggle, .no-js .nav__mobile-btn { display: none; }
@media (forced-colors: active) {
  .backdrop { display: none; }
  .mvb { border-block: 1px solid CanvasText; }
  .mvb__em { font-weight: 500; }   /* the two tones collapse to one colour here; weight keeps the promise distinct */
  .why__line--outline { color: CanvasText; -webkit-text-stroke: 0; }
  .why__item::before { forced-color-adjust: none; background: CanvasText; }
  .ways__n { color: CanvasText; -webkit-text-stroke: 0; }
  .ways__item::before { forced-color-adjust: none; background: CanvasText; }
  .nav__mobile-btn span { forced-color-adjust: none; background: CanvasText; }
  .nav__links a::after, .mobile-nav a[aria-current="page"]::after, .flow__checks li::before { forced-color-adjust: none; background: CanvasText; }
  .graph, [data-theme] .graph { --p-node: Canvas; }
  .graph .gx-flag, [data-theme] .graph .gx-flag { fill: CanvasText; stroke: Canvas; }
  .graph .gx-found, .graph .gx-found-node, [data-theme] .graph .gx-found, [data-theme] .graph .gx-found-node,
  .join svg .jx-risk, .join svg .jx-dot { stroke: Highlight; }
  .rtn-on__key i, .rtn-node__k i, .rtn-rg__t i, .rtn-al__a i { forced-color-adjust: none; }
  .rtn-rg__c--on, .rtn-rg__fmt .on, .rtn-node--sel { border-width: 2px; }
}