/* ==========================================================================
   Authentag — global design system (EU / .io)
   Light "infrastructure" system. Cloned as-is by the regional nodes.
   Only tokens in :root and the .region-* helpers should differ per region.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* surface */
  --bg:            #ffffff;
  --bg-alt:        #f7f8f9;
  --bg-deep:       #0d1117;   /* inverted bands */
  --surface:       #ffffff;
  --line:          #e3e6ea;
  --line-strong:   #c9ced6;

  /* text */
  --text:          #101418;
  --text-muted:    #58616c;
  --text-faint:    #838d99;
  --text-invert:   #f2f4f6;
  --text-invert-muted: rgba(242,244,246,.66);

  /* accents — strictly functional */
  --blue:          #1a56db;   /* data path, API, live system */
  --blue-soft:     #eaf0fd;
  --gold:          #8a6d1f;   /* verified identity, integrity (text-safe) */
  --gold-mark:     #c9a227;   /* verified identity, integrity (marks) */
  --gold-soft:     #faf5e6;
  --green:         #17734b;   /* operational status */
  --amber:         #9a6b00;   /* planned / pending status */

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* layout */
  --wrap:      1200px;
  --wrap-text: 46rem;
  --pad:       clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);
  --radius:    4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME — the whole system is token-driven, so night mode is a palette
   swap rather than a second stylesheet.

   Declaring color-scheme matters as much as the palette: without it, Android
   Chrome applies Auto Dark Theme and algorithmically inverts the page, which
   mangles gradients, SVG fills and the gold accents. Declaring that we handle
   both schemes turns that off and hands the decision back to us.
   ══════════════════════════════════════════════════════════════════════════ */
:root { color-scheme: light dark; }

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0b1013;
    --bg-alt:      #10171a;
    --bg-deep:     #060a0c;
    --surface:     #121a1e;
    --line:        rgba(255,255,255,.10);
    --line-strong: rgba(255,255,255,.22);

    --text:        #e8edef;
    --text-muted:  rgba(232,237,239,.68);
    --text-faint:  rgba(232,237,239,.45);

    --blue:        #7aa5ff;
    --blue-soft:   rgba(122,165,255,.13);
    --gold:        #d9bd6a;
    --gold-mark:   #c9a227;
    --gold-soft:   rgba(201,162,39,.10);
    --green:       #4fd39a;
    --amber:       #e0b25a;
  }

}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; line-height: 1.06; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Type scale ─────────────────────────────────────────────────────────── */
.t-display { font-size: clamp(2.6rem, 5.4vw, 4rem); letter-spacing: -0.03em; }
.t-h2      { font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
.t-h3      { font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -0.018em; }
.t-lead    { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--text-muted); }
.t-body    { color: var(--text-muted); }
.t-small   { font-size: .9rem; line-height: 1.65; color: var(--text-muted); }
.t-fine    { font-size: .8rem; line-height: 1.6; color: var(--text-faint); }
.t-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.t-mono { font-family: var(--mono); font-size: .85rem; }
.em-gold { color: var(--gold); }
.em-blue { color: var(--blue); }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.wrap    { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--section-y); }
.section--alt   { background: var(--bg-alt); }
.section--ruled { border-top: 1px solid var(--line); }
.section--deep  { background: var(--bg-deep); color: var(--text-invert); }
.section--deep .t-body, .section--deep .t-lead, .section--deep .t-small { color: var(--text-invert-muted); }
.section--deep .t-label { color: rgba(242,244,246,.5); }
.section--deep .card { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }

.stack-s  > * + * { margin-top: .6rem; }
.stack-m  > * + * { margin-top: 1.1rem; }
.stack-l  > * + * { margin-top: 2rem; }
.section-head { max-width: 52rem; }
.section-head > * + * { margin-top: 1rem; }
.grid   { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split  { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  width: min(100%, var(--wrap)); margin-inline: auto; padding: .85rem var(--pad);
  display: flex; align-items: center; gap: 2rem;
}
.brand { font-size: 1.22rem; font-weight: 600; letter-spacing: -0.04em; }
.brand sup { font-size: .5em; font-weight: 400; vertical-align: super; letter-spacing: 0; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; font-size: .92rem; }
.nav-links a { color: var(--text-muted); white-space: nowrap; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 500; }
.nav-cta {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-size: .9rem; color: var(--text); transition: border-color .15s, background .15s;
}
.nav-cta:hover { border-color: var(--text); background: var(--bg-alt); }
.nav-toggle {
  display: none; margin-left: auto; width: 2.4rem; height: 2.4rem;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.nav-toggle span { display: block; width: 15px; height: 1.5px; background: var(--text); }
.nav-mobile { display: none; border-top: 1px solid var(--line); background: var(--bg); }
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block; padding: .85rem var(--pad);
  border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--text-muted);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.5rem; border-radius: var(--radius);
  font-size: .95rem; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text-muted); }
.btn-secondary { border-color: var(--line-strong); color: var(--text); background: var(--surface); }
.btn-secondary:hover { border-color: var(--text); }
.btn-quiet { padding: 0; min-height: 0; color: var(--blue); font-weight: 500; }
.btn-quiet:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.section--deep .btn-primary { background: #fff; color: #101418; }
.section--deep .btn-secondary { background: transparent; border-color: rgba(255,255,255,.3); color: var(--text-invert); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-block: 1rem .1rem; }
.hero-sub { max-width: 34rem; margin-top: 1.4rem; }
.hero-caps {
  margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--text-faint);
  line-height: 2;
}
.hero .btn-row { margin-top: 1.8rem; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  padding: 1.6rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.card > * + * { margin-top: .7rem; }
.card-num {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-faint);
}
.card-hi { border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(16,20,24,.04); }

/* bordered feature list (no boxes, hairline separated) */
.feature-list { border-top: 1px solid var(--line); }
.feature-row {
  display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.feature-row h3 { font-size: 1.02rem; letter-spacing: -0.015em; }

/* ── Diagram primitives (inline SVG + text nodes) ───────────────────────── */
.diagram {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius);
}
.section--alt .diagram { background: var(--surface); }
.diagram svg { width: 100%; height: auto; }

/* A dense diagram scaled to a phone renders its labels at ~4px — unreadable.
   Below the breakpoint it scrolls inside its own frame at a legible size
   instead. Mark those with .diagram--dense; simple diagrams still shrink. */
@media (max-width: 780px) {
  .diagram--dense { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diagram--dense svg { min-width: 720px; }
  .diagram--dense::after {
    content: "Scroll to see the full diagram";
    display: block; margin-top: .7rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-faint);
  }
}
.dg-label { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; fill: var(--text-faint); }
.dg-node  { font-family: var(--sans); font-size: 13px; font-weight: 500; fill: var(--text); }
.dg-note  { font-family: var(--sans); font-size: 11.5px; fill: var(--text-muted); }
.dg-box   { fill: var(--surface); stroke: var(--line-strong); }
.dg-box-a { fill: var(--blue-soft); stroke: var(--blue); }
.dg-line  { stroke: var(--line-strong); stroke-width: 1; fill: none; }
.dg-flow  { stroke: var(--blue); stroke-width: 1.4; fill: none; }

/* vertical flow used on mobile / simple pages */
.flow { display: grid; gap: .5rem; }
.flow-step {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.flow-step .n {
  font-family: var(--mono); font-size: .75rem; color: var(--blue);
  border: 1px solid var(--line); border-radius: 999px; width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
}
.flow-arrow { justify-self: start; margin-left: 1.05rem; color: var(--line-strong); font-size: 1rem; line-height: 1; }

/* ── Tables (trust / status / comparison) ───────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400; border-bottom-color: var(--line-strong);
}
.table td:first-child { font-weight: 500; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Product photo slot. Renders as an empty plate until the real image lands —
   swap the span for an <img> of the same size and nothing else moves. */
.thumb {
  display: block; width: 44px; height: 44px; border-radius: 3px;
  background:
    repeating-linear-gradient(135deg, var(--bg-alt) 0 6px, var(--surface) 6px 12px);
  border: 1px solid var(--line);
}
.table td:has(> .thumb) { width: 64px; padding-right: 0; }

.status { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-live    { color: var(--green); }
.status-planned { color: var(--amber); }
.status-off     { color: var(--text-faint); }

/* ── Callout / quote band ───────────────────────────────────────────────── */
.callout {
  padding: 1.4rem 1.6rem; border-left: 2px solid var(--gold-mark);
  background: var(--gold-soft); border-radius: 0 var(--radius) var(--radius) 0;
}
.callout-blue { border-left-color: var(--blue); background: var(--blue-soft); }
.statement {
  font-size: clamp(1.4rem, 2.8vw, 2.15rem); line-height: 1.25; letter-spacing: -0.025em;
  font-weight: 500; max-width: 30ch;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: block; }
.field > span {
  display: block; margin-bottom: .4rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .9rem; font-family: var(--sans); font-size: .95rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.field textarea { min-height: 7rem; resize: vertical; }
fieldset { margin: 0; padding: 0; border: 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: var(--bg-alt); padding-block: 3.5rem 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; }
.footer h4 {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400; margin-bottom: .9rem;
}
.footer li + li { margin-top: .5rem; }
.footer a { font-size: .9rem; color: var(--text-muted); }
.footer a:hover { color: var(--text); }
.footer-base {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: var(--text-faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   SLABS — full-bleed colour blocks. Site rhythm comes from alternating these,
   never from decoration. Content budget per slab: heading <= 6 words,
   one paragraph <= 40 words, <= 120 words total. The rest is visual.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --slab-mist: #f6f7f8;
  --slab-ink:  #0d1518;   /* deep teal graphite */
  --slab-sand: #f3ead4;   /* sand gold */
}

.slab { padding-block: clamp(4rem, 8vw, 6.5rem); }
.slab-tight { padding-block: clamp(3rem, 5vw, 4rem); }
.slab-white { background: var(--bg); }
.slab-mist  { background: var(--slab-mist); }
.slab-sand  { background: var(--slab-sand); }
.slab-ink   { background: var(--slab-ink); color: var(--text-invert); }

.slab-ink .t-body, .slab-ink .t-lead, .slab-ink .t-small { color: var(--text-invert-muted); }
.slab-ink .t-label { color: rgba(242,244,246,.5); }
.slab-ink .t-fine  { color: rgba(242,244,246,.42); }
.slab-ink .card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.13); }
.slab-ink .btn-primary { background: #fff; color: #101418; }
.slab-ink .btn-primary:hover { background: #e6e9ec; }
.slab-ink .btn-secondary { background: transparent; border-color: rgba(255,255,255,.28); color: var(--text-invert); }
.slab-ink .btn-secondary:hover { border-color: #fff; }
.slab-ink .btn-quiet { color: #8ab0ff; }
.slab-ink .table th { color: rgba(242,244,246,.5); border-bottom-color: rgba(255,255,255,.22); }
.slab-ink .table td { border-bottom-color: rgba(255,255,255,.1); }
.slab-ink .table-wrap { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.13); }
.slab-ink .diagram { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.13); }
.slab-ink .dg-box { fill: rgba(255,255,255,.05); stroke: rgba(255,255,255,.26); }
.slab-ink .dg-node { fill: #eef1f4; }
.slab-ink .dg-note { fill: rgba(238,241,244,.62); }
.slab-ink .dg-label { fill: rgba(238,241,244,.45); }
.slab-ink .dg-line { stroke: rgba(255,255,255,.28); }

.slab-sand .card { background: rgba(255,255,255,.62); border-color: rgba(138,109,31,.22); }
.slab-sand .t-label { color: #8a6d1f; }
.slab-sand .diagram { background: rgba(255,255,255,.6); border-color: rgba(138,109,31,.22); }

/* One idea per slab: a short headline, one line of support, then a visual. */
.slab-head { max-width: 40rem; }
.slab-head .t-h2 { max-width: 16ch; }
.slab-head > * + * { margin-top: .9rem; }
.slab-head .t-lead { max-width: 34rem; }
.slab-body { margin-top: clamp(2rem, 4vw, 3rem); }

/* compact capability card: 12-word blurb + link, never a paragraph */
.mini-card {
  display: block; padding: 1.35rem 1.3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.mini-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.mini-card b { display: block; font-size: 1rem; font-weight: 500; letter-spacing: -.018em; }
.mini-card span { display: block; margin-top: .4rem; font-size: .88rem; line-height: 1.55; color: var(--text-muted); }
.mini-card em {
  display: block; margin-top: .7rem; font-style: normal;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue);
}
.slab-ink .mini-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.13); }
.slab-ink .mini-card span { color: var(--text-invert-muted); }
.slab-ink .mini-card em { color: #8ab0ff; }
.slab-sand .mini-card { background: rgba(255,255,255,.62); border-color: rgba(138,109,31,.22); }

/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENU — four top-level entries; depth lives here, not on the page.
   ══════════════════════════════════════════════════════════════════════════ */
.nav-trigger {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .92rem; color: var(--text-muted);
}
.nav-trigger::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg); opacity: .55; transition: transform .18s;
}
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--text); }
.nav-trigger[aria-expanded="true"]::after { transform: rotate(-135deg); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 24px 40px -28px rgba(16,20,24,.45);
}
.mega[hidden] { display: none; }
.mega-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
  padding-block: 2.2rem 2.4rem;
}
.mega-col h4 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400; margin-bottom: .85rem;
  padding-bottom: .55rem; border-bottom: 1px solid var(--line);
}
.mega-col a {
  display: block; padding: .5rem 0;
  border-radius: var(--radius);
}
.mega-col a b { display: block; font-size: .92rem; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.mega-col a span { display: block; font-size: .8rem; line-height: 1.5; color: var(--text-faint); }
.mega-col a:hover b { color: var(--blue); }
.mega-feature {
  grid-column: 4; padding: 1.2rem; border-radius: var(--radius);
  background: var(--slab-mist); border: 1px solid var(--line);
}
.mega-feature h4 { border: 0; padding: 0; }
.mega-feature p { font-size: .85rem; line-height: 1.6; color: var(--text-muted); margin-top: .5rem; }
.mega-feature .btn-quiet { margin-top: .8rem; display: inline-block; font-size: .85rem; }

/* Live preview: the panel follows whichever menu entry the pointer is on. */
.mega-feature[data-preview] { display: flex; flex-direction: column; min-height: 11.5rem; }
.mega-feature b[data-pv-slot="title"] {
  display: block; font-size: .98rem; font-weight: 500; letter-spacing: -.015em; color: var(--text);
}
.mega-feature[data-preview] .btn-quiet { margin-top: auto; }
/* Fade-in only. Never a rule that hides content and relies on script to bring
   it back — a dropped frame or timer would leave the panel permanently blank. */
.mega-feature.swap-in [data-pv-slot] { animation: pv-in .19s ease both; }
.mega-feature.swap-in [data-pv-slot="title"] { animation-delay: .02s; }
.mega-feature.swap-in [data-pv-slot="text"]  { animation-delay: .04s; }
.mega-feature.swap-in [data-pv-slot="cta"]   { animation-delay: .06s; }
@keyframes pv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mega-feature.swap-in [data-pv-slot] { animation: none; }
}

.nav { position: sticky; }
.nav-backdrop { position: fixed; inset: 0; background: rgba(13,21,24,.28); z-index: 40; }
.nav-backdrop[hidden] { display: none; }

/* mobile: mega collapses into disclosure sections */
@media (max-width: 1000px) {
  .mega { position: static; box-shadow: none; border-bottom: 0; }
  .mega-inner { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.2rem var(--pad) 1.6rem; }
  .mega-feature { grid-column: auto; }
  .nav-backdrop { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCT VISUALS — mockups built in markup, not screenshots.
   Language-controllable, crisp at any density, cloned by every region site.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dark hero band with technical grid ─────────────────────────────────── */
.hero--dark {
  position: relative;
  background: var(--slab-ink);
  color: var(--text-invert);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hero--dark::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
  pointer-events: none;
}
.hero--dark::after {
  content: "";
  position: absolute; top: -30%; right: -10%; width: 60%; height: 120%;
  background: radial-gradient(circle at 50% 50%, rgba(26,86,219,.18), transparent 62%);
  pointer-events: none;
}
.hero--dark .wrap { position: relative; z-index: 1; }
.hero--dark .t-label { color: rgba(242,244,246,.55); }
.hero--dark .t-lead, .hero--dark .t-body { color: var(--text-invert-muted); }
.hero--dark .hero-caps { border-top-color: rgba(255,255,255,.14); color: rgba(242,244,246,.5); }
.hero--dark .btn-primary { background: #fff; color: #101418; }
.hero--dark .btn-primary:hover { background: #e6e9ec; }
.hero--dark .btn-secondary { background: transparent; border-color: rgba(255,255,255,.28); color: var(--text-invert); }
.hero--dark .btn-secondary:hover { border-color: #fff; }

/* ── Phone device mockup (consumer scan / passport page) ────────────────── */
.device {
  position: relative;
  width: min(100%, 310px);
  margin-inline: auto;
  padding: 10px;
  background: linear-gradient(160deg, #2a3038, #14181d 60%);
  border-radius: 34px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08);
}
.device::before {           /* speaker slot */
  content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 58px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.16); z-index: 3;
}
.device-screen {
  position: relative; overflow: hidden;
  background: #f4f6f8; color: #101418;
  border-radius: 26px;
  padding: 34px 0 0;
  font-size: 12px; line-height: 1.55;
  min-height: 520px;
}
.dv-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .95rem .6rem;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: #93a0ad;
}
.dv-lang { border: 1px solid #d6dbe1; border-radius: 3px; padding: 1px 6px; letter-spacing: .06em; }
.dv-body { padding: 0 .95rem 1rem; }
.dv-brand { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.dv-logo {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  background: linear-gradient(145deg, #1b2027, #333c47);
  color: #d8bd63; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.dv-brand b { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.dv-brand span { display: block; font-size: 9.5px; color: #7b8794; font-weight: 400; letter-spacing: .02em; }
.dv-shot {
  position: relative; height: 132px; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 55%),
    linear-gradient(150deg, #dfe4ea, #b9c2cc 55%, #98a4b0);
}
.dv-cell {          /* stylised battery pack silhouette */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 108px; height: 62px; border-radius: 5px;
  background: linear-gradient(160deg, #38424e, #222a33);
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.5);
}
.dv-cell::after {
  content: ""; position: absolute; right: -6px; top: 18px; width: 6px; height: 22px;
  border-radius: 0 2px 2px 0; background: #4a5663;
}
.dv-cell i {
  position: absolute; left: 10px; top: 10px; right: 10px; height: 12px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 3px, transparent 3px 8px);
}
.dv-seal {
  position: absolute; top: 9px; left: 9px; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #f4e2a6, #c9a227 45%, #8a6d1f);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.45), inset 0 0 0 1.5px rgba(255,255,255,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #3d2f08; font-size: 7px; letter-spacing: .1em; font-weight: 600; text-align: center;
}
.dv-seal b { font-size: 8.5px; letter-spacing: .04em; display: block; }
.dv-title { margin-top: .8rem; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.dv-verdict { color: #17734b; font-size: 10.5px; margin-top: .15rem; }
.dv-rows { margin-top: .8rem; border-top: 1px solid #e1e6eb; }
.dv-row {
  display: flex; justify-content: space-between; gap: .6rem;
  padding: .42rem 0; border-bottom: 1px solid #e9edf1; font-size: 10px;
}
.dv-row span { color: #7b8794; }
.dv-row b { font-weight: 500; font-family: var(--mono); font-size: 9.5px; }
.dv-soh { display: flex; align-items: center; gap: .4rem; }
.dv-bar { width: 46px; height: 4px; border-radius: 2px; background: #dde3e9; overflow: hidden; }
.dv-bar i { display: block; height: 100%; width: 94%; background: #17734b; }
.dv-tabs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #e1e6eb; background: #fff;
  font-size: 8.5px; letter-spacing: .04em; color: #93a0ad; text-align: center;
}
.dv-tabs div { padding: .5rem .1rem; }
.dv-tabs .on { color: #101418; font-weight: 600; box-shadow: inset 0 2px 0 var(--blue); }

/* floating annotation chips around a device */
.device-wrap { position: relative; }
.chip {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; border-radius: 999px;
  background: rgba(20,24,29,.92); border: 1px solid rgba(255,255,255,.16);
  color: #eef1f4; font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 8px 22px -10px rgba(0,0,0,.8); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-mark); }
.chip-blue::before { background: #5b8def; }
.chip-a { top: 12%;  left: -14%; }
.chip-b { top: 45%;  right: -16%; }
.chip-c { bottom: 14%; left: -12%; }

/* ── Console window mockup ─────────────────────────────────────────────── */
/* Colours here are literal, not tokens: this is a picture of our console, and a
   screenshot does not change colour because the surrounding page did. */
.appwin {
  --shot-bg:   #ffffff;
  --shot-alt:  #fbfcfd;
  --shot-line: #e3e6ea;
  --shot-text: #101418;
  --shot-muted:#58616c;
  --shot-faint:#838d99;
  --shot-blue: #1a56db;
  border: 1px solid var(--shot-line); border-radius: 8px; overflow: hidden;
  background: var(--shot-bg); box-shadow: 0 24px 50px -30px rgba(16,20,24,.4);
  color: var(--shot-text);
}
.appwin-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem; background: var(--shot-alt); border-bottom: 1px solid var(--shot-line);
}
.appwin-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d6dbe1; display: block; }
.appwin-url {
  margin-left: .6rem; padding: .18rem .6rem; border-radius: 3px; background: var(--shot-bg);
  border: 1px solid var(--shot-line); font-family: var(--mono); font-size: .68rem; color: var(--shot-faint);
}
.appwin-body { display: grid; grid-template-columns: 148px 1fr; min-height: 300px; background: var(--shot-bg); }
.appwin-side { padding: .9rem .7rem; border-right: 1px solid var(--shot-line); background: var(--shot-alt); }
.appwin-side div {
  padding: .38rem .55rem; border-radius: 3px; font-size: .78rem; color: var(--shot-muted);
}
.appwin-side .on { background: #eaf0fd; color: var(--shot-blue); font-weight: 500; }
.appwin-main { padding: 1.1rem 1.2rem; }
.appwin .t-fine { color: var(--shot-faint); }
.appwin .t-small { color: var(--shot-muted); }
.appwin-h {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding-bottom: .8rem; border-bottom: 1px solid var(--shot-line);
}
.appwin-h b { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; }
.tag {
  display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .5rem; border-radius: 3px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
}
.tag-live { background: #e6f4ed; color: var(--green); }
.tag-warn { background: #fdf3e0; color: var(--amber); }
.tag-blue { background: #eaf0fd; color: var(--shot-blue); }
.meter { margin-top: .35rem; height: 6px; border-radius: 3px; background: #e8ecf0; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--shot-blue); }
.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem 1.4rem; margin-top: 1rem; }
.kv > div > span {
  display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--shot-faint);
}
.kv > div > b { font-size: .85rem; font-weight: 500; }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .78rem; }
.mini-table td { padding: .42rem 0; border-bottom: 1px solid var(--shot-line); color: var(--shot-muted); }
.mini-table td:last-child { text-align: right; font-family: var(--mono); font-size: .7rem; color: var(--shot-faint); }
.mini-table tr:last-child td { border-bottom: 0; }

/* ── Motion (reduced-motion safe) ──────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.dg-flow.anim { stroke-dasharray: 5 7; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }
.pulse { animation: pulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .dg-flow.anim { animation: none; }
  .pulse { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Stat band ─────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 1.3rem 1.2rem; }
.stat b { display: block; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.03em; }
.stat span { display: block; margin-top: .3rem; font-size: .82rem; color: var(--text-muted); line-height: 1.5; }
.section--deep .stats { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.section--deep .stat { background: #12171d; }
.section--deep .stat span { color: var(--text-invert-muted); }

@media (max-width: 1000px) {
  .appwin-body { grid-template-columns: 1fr; }
  .appwin-side { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .chip-a, .chip-b, .chip-c { position: static; display: inline-flex; margin: .3rem .3rem 0 0; }
  .device { margin-bottom: .5rem; }
}

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal { max-width: 48rem; }
.legal h2 {
  margin: 2.4rem 0 .8rem; font-size: 1.25rem; letter-spacing: -.02em;
  padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { margin: 1.4rem 0 .5rem; font-size: 1.02rem; }
.legal p  { margin: .8rem 0; color: var(--text-muted); }
.legal ul { margin: .8rem 0; padding-left: 1.2rem; list-style: disc; }
.legal li { margin: .35rem 0; color: var(--text-muted); }
.legal a  { color: var(--blue); }
.legal strong { color: var(--text); }
.legal .meta, .legal .updated { font-family: var(--mono); font-size: .78rem; color: var(--text-faint); }

/* ── Utilities ──────────────────────────────────────────────────────────── */
.center     { text-align: center; }
.center .section-head, .center .t-lead { margin-inline: auto; }
.max-text   { max-width: var(--wrap-text); }
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.pill-gold { border-color: var(--gold-mark); color: var(--gold); background: var(--gold-soft); }
.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 100; padding: .6rem 1rem; background: var(--text); color: var(--bg); border-radius: var(--radius); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: .5rem; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
}

/* ── Print (compliance buyers print trust pages) ────────────────────────── */
@media print {
  .nav, .footer, .btn-row { display: none; }
  body { font-size: 11pt; }
  .section { padding-block: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK THEME — component overrides.
   These must live at the END of the file: they have the same specificity as the
   base rules they correct, so placing them earlier would let the light rule win
   on source order. The token block near the top is fine where it is, because
   var() resolves at use time.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Declared here, not with the other dark tokens: the light slab values live in
     a second :root further down the file and would otherwise win on source order. */
  :root {
    --slab-mist: #10171a;   /* slabs keep their rhythm, one step apart */
    --slab-ink:  #05090b;
    --slab-sand: #191510;
  }
  .nav { background: rgba(11,16,19,.88); }
  .slab-sand .t-label, .slab-sand .callout p strong { color: var(--gold); }
  .slab-sand .card { background: rgba(255,255,255,.04); border-color: rgba(201,162,39,.22); }
  .slab-sand .mini-card { background: rgba(255,255,255,.04); border-color: rgba(201,162,39,.22); }
  .slab-sand .diagram { background: rgba(255,255,255,.03); border-color: rgba(201,162,39,.20); }
  .card-hi { box-shadow: none; }
  .device { box-shadow: 0 30px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10); }
  .appwin { box-shadow: 0 24px 50px -28px rgba(0,0,0,.8); }
  /* diagram boxes read as faint panels rather than white cards */
  .dg-box { fill: rgba(255,255,255,.04); stroke: var(--line-strong); }
  .dg-box-a { fill: rgba(122,165,255,.10); stroke: var(--blue); }
}