/* ==========================================================================
   bioLock™ — homepage prototype
   --------------------------------------------------------------------------
   00  Tokens
   01  Reset & base
   02  Primitives (type, buttons, links, reveals)
   03  Header, mega menu, mobile nav
   04  Hero + biometric instrument
   05  Proof timeline (credentials)
   06  The problem
   07  The demonstration
   08  Why now
   09  Solution areas
   10  In production (numbers)
   11  Case studies
   12  Resources
   13  Business risks · point of action · built into SAP · objections
   14  Final CTA
   15  Footer
   16  Responsive
   17  Reduced motion
   18  Audit log, request page
   19  About page
   ========================================================================== */


/* ==========================================================================
   00 — TOKENS
   ========================================================================== */
:root {
  /* ---------------------------------------------------------------- brand
     Sampled from the supplied bioLock logo. The hue is fixed; only its
     lightness changes between themes so it stays legible on either ground. */
  --blue:          #00A0E3;
  --blue-hover:    #1DB2F0;
  --blue-bright:   #4FC6F7;
  --blue-text:     #35B8F0;
  --blue-deep:     #0A6A96;
  --red:           #E31E2A;
  --on-brand:      #04070B;   /* text that sits on a solid blue fill */

  /* ------------------------------------------------------- colour families
     RGB triplets, composed with an alpha at each use site. Everything that
     used to be a hardcoded rgba() now reads from one of these, which is what
     makes a second theme a palette swap rather than a rewrite. */
  --ink:           255, 255, 255;   /* foreground: strokes, hairlines, tints */
  --paper:         5, 7, 10;        /* translucent panel and overlay washes  */
  --brand:         0, 160, 227;
  --ok:            64, 220, 160;
  --warn:          227, 30, 42;
  --shadow:        0, 0, 0;
  --fp:            126, 190, 224;   /* fingerprint ridges */
  --fp-hot:        120, 215, 255;   /* ridges under the scan band */
  --fp-lit:        #9ADEFF;
  --ok-text:       #6FE7B4;
  --warn-text:     #FF8F94;

  /* Surfaces */
  --bg-0:          #05070A;
  --bg-1:          #080B11;
  --bg-2:          #0B1017;
  --bg-void:       #030507;
  --surface:       #0C1219;
  --surface-hi:    #10171F;
  --footer-bg:     #04060A;

  /* Lines */
  --line:          rgba(var(--ink), .075);
  --line-soft:     rgba(var(--ink), .045);
  --line-strong:   rgba(var(--ink), .14);
  --line-blue:     rgba(var(--brand), .30);

  /* Type colours */
  --text:          #EDF2F6;
  --text-dim:      #98A6B4;
  --text-faint:    #758594;   /* was #5D6B79, which measured 3.3-3.7:1 against
                                 the dark surfaces — under AA, and the likely
                                 reason the dark version read as hard work */

  /* Weights nudge up a touch on the light theme, where the same weight reads
     heavier; kept as tokens so the rules themselves never branch. */
  --grain:         .30;
  --grain-blend:   overlay;
  --scan:          #5FD0FF;
  --glow-1:        .10;
  --glow-2:        .05;

  /* Type */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Metrics */
  --header-h:      86px;
  --gutter:        clamp(1.25rem, 4.5vw, 5rem);
  --maxw:          1400px;
  --sp:            clamp(5rem, 8.5vw, 8.5rem);
  --sp-lg:         clamp(6.5rem, 11vw, 11rem);
  --radius:        14px;

  /* Motion */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-inout:    cubic-bezier(.65, 0, .35, 1);

  /* Declared explicitly, not left to compute as `normal`. A page that renders
     dark without saying so is one that Chrome's Auto Dark Mode feels entitled
     to darken again — which is what put a haze over the whole page and dulled
     the images and the white type. */
  color-scheme: dark;
}

/* ==========================================================================
   LIGHT THEME
   A soft grey ground rather than white — white at this scale glares, and the
   thin-line instrument artwork needs a surface to sit against. Panels are the
   lighter element here, inverting the dark theme's logic.
   ========================================================================== */
[data-theme="light"] {
  --ink:           16, 26, 38;
  --paper:         255, 255, 255;
  --shadow:        24, 40, 58;

  /* Blue has to come down to carry text on a light ground: #00A0E3 on #F2F5F8
     is about 2.6:1, which fails badly. These are measured, not guessed. */
  --blue:          #007AB0;   /* 4.8:1 with white button text */
  --blue-hover:    #00688F;
  --blue-bright:   #00658F;   /* clears AA on the mock's tinted button fill */
  --blue-text:     #016C9C;
  --blue-deep:     #7FCDEC;
  --brand:         0, 122, 176;
  --on-brand:      #FFFFFF;

  --ok:            10, 122, 88;
  --ok-text:       #08694B;   /* measured against the tinted chip, not the page */
  --warn:          186, 22, 33;
  --warn-text:     #9E1A22;   /* on the red-tinted chip, not the page ground */

  --fp:            42, 96, 132;
  --fp-hot:        0, 122, 176;
  --fp-lit:        #005E88;

  /* Surfaces: the page is grey, the panels are white. */
  --bg-0:          #F1F4F7;
  --bg-1:          #E9EDF2;
  --bg-2:          #E4E9EF;
  --bg-void:       #E6EBF1;
  --surface:       #FFFFFF;
  --surface-hi:    #FFFFFF;
  --footer-bg:     #E7ECF1;

  --line:          rgba(var(--ink), .13);
  --line-soft:     rgba(var(--ink), .085);
  --line-strong:   rgba(var(--ink), .26);
  --line-blue:     rgba(var(--brand), .38);

  --text:          #0E1721;
  --text-dim:      #4A5A6B;
  --text-faint:    #556474;   /* clears 4.5:1 on every light surface including
                                 the tinted chain nodes of the active model */

  --grain:         .13;
  --grain-blend:   multiply;
  --scan:          #0090CE;
  --glow-1:        .09;
  --glow-2:        .05;

  color-scheme: light;
}

@media (max-width: 860px) { :root { --header-h: 70px; } }

/* Once the columns stack there is far less horizontal interest to balance, so
   the desktop vertical measure reads as dead space. Two steps down. */
@media (max-width: 1024px) { :root { --sp: 4.25rem; --sp-lg: 5.5rem; } }
@media (max-width: 640px)  { :root { --sp: 3rem;    --sp-lg: 3.75rem; } }



/* --------------------------------------------------------------------------
   Light theme: line artwork
   The generated artwork was drawn as light strokes on a dark ground. The same
   alphas on a pale ground read as haze, so the instrument, lattice and glyph
   strokes get their own weights here rather than being inverted blindly.
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  /* hero instrument */
  --w-ring: .16;
  --w-tick: .28;
  --w-fp:   .60;
}
[data-theme="light"] .ring        { stroke: rgba(var(--ink), var(--w-ring)); }
[data-theme="light"] .ring--mid   { stroke: rgba(var(--ink), .12); }
[data-theme="light"] .ring--dash  { stroke: rgba(var(--brand), .55); }
[data-theme="light"] .arc         { stroke: rgba(var(--brand), .65); stroke-width: 1.4; }
[data-theme="light"] .tick        { stroke: rgba(var(--ink), var(--w-tick)); }
[data-theme="light"] .tick--major { stroke: rgba(var(--ink), .45); }
[data-theme="light"] .inst-brackets path { stroke: rgba(var(--ink), .28); }

[data-theme="light"] .fp .fp-r { stroke: rgba(var(--fp), var(--w-fp)); stroke-width: 1.25; }
[data-theme="light"] .fp .fp-d { stroke: rgba(var(--fp), .45); stroke-width: 1.15; }
[data-theme="light"] .fp .fp-m { stroke: rgba(var(--brand), .7); }
[data-theme="light"] .fp--hot .fp-r,
[data-theme="light"] .fp--hot .fp-d { stroke: var(--scan); stroke-width: 1.5; }

/* horizon lattice */
[data-theme="light"] .lx { stroke: rgba(var(--ink), .30); }
[data-theme="light"] .lx--hot { stroke: rgba(var(--brand), .75); }
[data-theme="light"] .lattice__ring { stroke: rgba(var(--brand), .32); }
[data-theme="light"] .lattice__ring--faint { stroke: rgba(var(--ink), .14); }
[data-theme="light"] .fp--core .fp-r { stroke: rgba(var(--brand), .42); }
[data-theme="light"] .fp--core .fp-d { stroke: rgba(var(--brand), .26); }
[data-theme="light"] .fp--core .fp-m { stroke: rgba(var(--brand), .48); }

/* solution-area glyphs */
[data-theme="light"] .glyph-frame circle,
[data-theme="light"] .glyph-frame path { stroke: rgba(var(--ink), .14); }
[data-theme="light"] .glyph .g-line { stroke: rgba(var(--brand), .8); }
[data-theme="light"] .glyph .g-dash { stroke: rgba(var(--brand), .55); }
[data-theme="light"] .glyph .g-tick { stroke: rgba(var(--ink), .3); }
[data-theme="light"] .glyph .g-dot  { fill: rgba(var(--ink), .28); }

/* closing CTA field */
[data-theme="light"] .cta__ring { stroke: rgba(var(--brand), .26); }
[data-theme="light"] .cta__ring--faint { stroke: rgba(var(--ink), .10); }
[data-theme="light"] .fp--ghost .fp-r { stroke: rgba(var(--brand), .26); }
[data-theme="light"] .fp--ghost .fp-d { stroke: rgba(var(--brand), .17); }
[data-theme="light"] .fp--ghost .fp-m { stroke: rgba(var(--brand), .3); }

/* Panels are the raised element on a light ground, so they need a real edge
   and a softer shadow than the dark theme's deep drop. */
[data-theme="light"] .panel,
[data-theme="light"] .pill,
[data-theme="light"] .mock,
[data-theme="light"] .overlay__card {
  box-shadow: 0 18px 44px -26px rgba(var(--shadow), .34);
}
[data-theme="light"] .mock { border-color: rgba(var(--ink), .12); }
[data-theme="light"] .mock__btn--primary,
[data-theme="light"] .panel__btn { background: rgba(var(--brand), .09); }
[data-theme="light"] .header.is-scrolled,
[data-theme="light"] .header.is-mega-open { background: rgba(var(--paper), .82); }
[data-theme="light"] .mega { background: rgba(var(--paper), .97); }
[data-theme="light"] .mnav { background: rgba(var(--paper), .98); }


/* --------------------------------------------------------------------------
   Theme switching
   Twenty-odd rules transition colour, border-colour or background-colour. When
   the palette flips, each of those starts a transition from the old value to
   the new one — and any element that is off-screen at that moment never runs
   it, so it stays painted in the *previous* theme. Scroll down afterwards and
   the page looks hazed: white type that is still grey, panels a shade off.
   Reloading looked fine because a fresh load has nothing to transition from.

   So: kill every transition for the length of the swap. The palette change is
   meant to be instant anyway — a 400ms cross-fade of scattered elements was
   never the intent.
   -------------------------------------------------------------------------- */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: none !important;
}

/* ==========================================================================
   01 — RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.62;
  font-weight: 400;
  letter-spacing: -.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-variant-numeric: tabular-nums;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

::selection { background: rgba(var(--brand), .25); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: .7rem 1.1rem; border-radius: 8px;
  background: var(--blue); color: var(--on-brand);
  font-family: var(--font-mono); font-size: .8rem;
  transform: translateY(-160%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--sp);
}
/* Grounds alternate in reading order, so each band reads as its own chapter.
   Proof and the numbers ledger share one ground on purpose: they are one argument. */
.section--problem   { background: var(--bg-1); border-block: 1px solid var(--line-soft); padding-block: var(--sp-lg); }
.section--horizon   { background: var(--bg-void); border-bottom: 1px solid var(--line-soft); padding-block: 0; }
.section--how       { background: var(--bg-0); }
.section--risks     { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.section--poa       { background: var(--bg-0); }
.section--solutions { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.section--cred      { background: var(--bg-0); }
.section--proof     { background: var(--bg-0); padding-top: 0; }
.section--cases     { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.section--sap       { background: var(--bg-0); }
.section--obj       { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.section--resources { background: var(--bg-0); }
.section--cta       { background: var(--bg-0); border-top: 1px solid var(--line-soft); overflow: hidden; }


/* ==========================================================================
   02 — PRIMITIVES
   ========================================================================== */

/* --- Eyebrow --- */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue-text);
}
.eyebrow__dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(var(--brand), .12);
}

/* --- Headings --- */
.h2 {
  font-size: clamp(2.05rem, 1.1rem + 3.5vw, 4.05rem);
  font-weight: 560;
  line-height: 1.03;
  letter-spacing: -.038em;
  color: var(--text);
  text-wrap: balance;
}

/* For headings that carry a full sentence rather than a short phrase. */
.h2--md { font-size: clamp(1.8rem, 1rem + 2.8vw, 3.2rem); }

.statement {
  /* Sized to sit beside the illustration rather than fill the page. */
  font-size: clamp(1.85rem, .9rem + 2.7vw, 3.5rem);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -.04em;
  margin-top: clamp(1.4rem, 2.5vw, 2.25rem);
}

/* Masked line reveals.
   The hand-set breaks are a desktop typographic decision — on a narrow column
   they only produce short ragged lines, so below 1024px the wrappers go inline,
   the text flows to the full measure, and the heading reveals as one block
   instead of line by line (see BL.narrow in core.js). */
/* The mask has to be deeper than the line box or it shears the descenders off
   — the 'g' in "login" was being cut at the baseline. The padding is cancelled
   by an equal negative margin, so the leading is unchanged; the reveal simply
   translates further (140%) so a line still waiting cannot peek into the extra
   room. Keep the two numbers in step: translate > 1 + (padding / line-height). */
.line {
  display: block;
  overflow: hidden;
  padding-block: .05em .28em;
  margin-block: -.05em -.28em;
}
.line__in { display: block; }
.line__in--accent { color: var(--blue-text); }
.line__in--muted  { color: var(--text-faint); }

@media (max-width: 1024px) {
  .line {
    display: inline;
    overflow: visible;
    padding-block: 0;
    margin-block: 0;
  }
  .line__in { display: inline; }
  /* restores the space the <br> used to provide */
  .line + .line::before { content: " "; }
  /* transforms do not apply to inline boxes; make sure nothing is left hidden */
  .js:not(.reduced-motion) [data-reveal-line],
  .js:not(.reduced-motion) [data-hero="line"] { transform: none; }

  .hero__title { line-height: 1.06; }
  .h2, .statement, .cta__title { line-height: 1.08; }
}


/* --------------------------------------------------------------------------
   Section heads — the page deliberately alternates its alignment so the
   sections don't all read as one long left-hand column.
   LEFT (hero, the gap, resources) / SPLIT (credentials, solutions) /
   CENTRE (how, horizon, proof, cases, cta)
   -------------------------------------------------------------------------- */
.sec-head { margin-bottom: clamp(1.9rem, 4.5vw, 4.5rem); }
.sec-head .h2 { margin-top: 1.3rem; }

.sec-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: end;
}
/* No max-width here: `ch` would resolve against this element's own (body)
   font-size, not the heading's, and crush the h2 into one word per line.
   The grid column is the constraint, and the <br>s set the line shape. */
.sec-head--split .h2 { font-size: clamp(1.8rem, 1rem + 2.8vw, 3.2rem); }
.sec-head__aside {
  max-width: 40ch;
  padding-bottom: .4rem;
  padding-left: clamp(0rem, 2vw, 2rem);
  border-left: 1px solid var(--line);
  padding-block: .25rem;
  color: var(--text-faint);
  font-size: 1rem;
  line-height: 1.6;
}

.sec-head--center { display: grid; justify-items: center; text-align: center; }
.sec-head--center .sec-head__lead { text-align: center; }
.sec-head__sub {
  margin-top: 1.15rem;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint);
}
.sec-head__aside p + p { margin-top: .9rem; }
.sec-head__link { margin-top: .6rem; color: var(--blue-text); }
.sec-head__link .ext { margin-left: .1rem; }


@media (max-width: 900px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .sec-head__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; }
}

/* --- Buttons --- */
.btn {
  --btn-bg: var(--blue);
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .3s;
  will-change: transform;
}
.btn--primary {
  background: var(--btn-bg);
  color: var(--on-brand);
  box-shadow: 0 0 0 0 rgba(var(--brand), 0);
}
.btn--primary:hover {
  --btn-bg: var(--blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -14px rgba(var(--brand), .65);
}
.btn--primary:active { transform: translateY(0); }
/* Secondary action: the primary's exact footprint, carried by an inset hairline
   so the two buttons line up without a border changing the box size. */
.btn--ghost { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(var(--brand), .06);
  box-shadow: inset 0 0 0 1px var(--line-blue);
}
.btn--sm { padding: .68rem 1.1rem; font-size: .845rem; border-radius: 7px; }
.btn--lg { padding: 1.15rem 1.9rem; font-size: 1.02rem; }

.btn__arrow { width: 16px; height: 10px; overflow: visible; flex: none; }
.btn__arrow path {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.btn:hover .btn__arrow { animation: arrowNudge .5s var(--ease-out); }

@keyframes arrowNudge {
  0%   { transform: translateX(0); }
  45%  { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

/* --- Arrow link --- */
.link-arrow {
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding-block: .35rem;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-dim);
  transition: color .3s;
}
.link-arrow::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor; opacity: .32;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.link-arrow:hover { color: var(--text); }
.link-arrow:hover::after { transform: scaleX(1); }
.link-arrow__icon { width: 16px; height: 10px; flex: none; transition: transform .4s var(--ease-out); }
.link-arrow__icon path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.link-arrow:hover .link-arrow__icon { transform: translateX(5px); }

/* --- Reveal defaults (only when JS is running) --- */
.js:not(.reduced-motion) [data-reveal],
.js:not(.reduced-motion) [data-reveal-lines] { opacity: 0; }
.js:not(.reduced-motion) [data-reveal-line],
.js:not(.reduced-motion) [data-hero="line"] { transform: translateY(140%); }
.js:not(.reduced-motion) [data-hero="eyebrow"],
.js:not(.reduced-motion) [data-hero="sub"],
.js:not(.reduced-motion) [data-hero="cta"],
.js:not(.reduced-motion) [data-hero="trust"] { opacity: 0; }


/* ==========================================================================
   03 — HEADER
   ========================================================================== */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  transition: background-color .45s var(--ease-out), backdrop-filter .45s, border-color .45s;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(var(--paper), .72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}
.header.is-mega-open {
  background: rgba(var(--paper), .9);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
}

.header__inner {
  height: var(--header-h);
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}

.header__logo { flex: none; display: block; }
.header__logo img {
  width: clamp(120px, 11vw, 156px);
  height: auto;
  transition: opacity .3s;
}
.header__logo:hover img { opacity: .82; }

/* --- Nav --- */
.nav { position: relative; margin-left: auto; display: flex; align-items: center; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.4rem); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .55rem .55rem;
  font-size: .885rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;   /* a two-line "How It Works" would break the bar */
  color: var(--text-dim);
  transition: color .3s;
}
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--text); }
.nav__caret {
  width: 9px; height: 6px; flex: none;
  transition: transform .35s var(--ease-out);
}
.nav__caret path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Sliding hover indicator */
.nav__indicator {
  position: absolute; bottom: 4px; left: 0;
  height: 1px; width: 0;
  background: var(--blue);
  opacity: 0;
  transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s;
  pointer-events: none;
}
.nav.is-hovering .nav__indicator { opacity: .9; }

.header__actions { display: flex; align-items: center; gap: .9rem; margin-left: clamp(.5rem, 2vw, 1.75rem); }


/* --- Theme toggle ---
   Both themes ship in one page so they can be compared side by side; the
   choice persists and is applied before first paint (see the head script). */
.theme-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color .3s, border-color .3s, background-color .3s;
}
.theme-toggle:hover {
  color: var(--blue-text);
  border-color: var(--line-blue);
  background: rgba(var(--brand), .07);
}
.theme-toggle__ico { width: 17px; height: 17px; grid-area: 1 / 1; }
.theme-toggle__ico circle,
.theme-toggle__ico path {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Show the theme you would switch *to*. */
[data-theme="light"] .theme-toggle__ico--sun,
[data-theme="dark"]  .theme-toggle__ico--moon { opacity: 0; }

/* --- Burger --- */
.burger {
  display: none;
  width: 40px; height: 40px;
  position: relative; margin-right: -8px;
}
.burger span {
  position: absolute; left: 10px; width: 20px; height: 1.5px;
  background: var(--text); border-radius: 2px;
  transition: transform .45s var(--ease-out), opacity .3s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- Mega menu --- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(var(--paper), .96);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 32px 80px -40px rgba(var(--shadow), .9);
  overflow: hidden;
}
.mega[hidden] { display: none; }
.mega__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3.25rem) var(--gutter) clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.mega__text {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--text-dim);
  max-width: 22ch;
}
.mega__text em { font-style: normal; color: var(--text); }

.mega__list { display: grid; gap: .1rem clamp(1.5rem, 3vw, 2.5rem); align-content: start; }
.mega__list--2 { grid-template-columns: 1fr 1fr; }
.mega__list--3 { grid-template-columns: repeat(3, 1fr); }
.mega__list a {
  display: grid; grid-template-columns: 2.2rem 1fr;
  align-items: baseline; gap: .85rem;
  padding: .68rem .9rem .68rem .75rem;
  border-radius: 8px;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s, padding-left .4s var(--ease-out);
}
.mega__list a:hover { background: rgba(var(--ink), .035); padding-left: 1.1rem; }
/* The label column is fixed so every name starts on the same vertical line. */
.mega__list--tagged a { grid-template-columns: 6.5rem 1fr; }
.mega__idx {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-text); opacity: .7;
}
.mega__name { font-size: .96rem; font-weight: 500; letter-spacing: -.015em; }
.mega__all { margin-top: 1.75rem; }

/* --- Mobile nav overlay ---
   Scrollable rather than vertically centred: with the Case Studies group open
   the list is longer than a phone screen. `.mnav__inner` still centres itself
   when the content is short. */
.mnav {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(var(--paper), .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--header-h) + 1.25rem) var(--gutter) 2.5rem;
}
.mnav[hidden] { display: none; }
.mnav__inner {
  min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}

.mnav__list > li { border-bottom: 1px solid var(--line-soft); }

/* Top-level rows: sized down from the original so the expanded groups fit. */
.mnav__list > li > a,
.mnav__toggle {
  width: 100%;
  display: flex; align-items: center; gap: 1rem;
  padding: .95rem 0;
  text-align: left;
  font-size: clamp(1.28rem, 5.2vw, 1.7rem);
  font-weight: 560;
  letter-spacing: -.032em;
  line-height: 1.15;
}
.mnav__label { flex: 1; }
.mnav__idx {
  font-family: var(--font-mono);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .12em;
  color: var(--blue-text); opacity: .7;
}
.mnav__chev {
  width: 12px; height: 8px; flex: none;
  transition: transform .4s var(--ease-out);
}
.mnav__chev path {
  fill: none; stroke: var(--blue-text); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.mnav__toggle[aria-expanded="true"] .mnav__chev { transform: rotate(180deg); }

/* Sub-lists use the same single-child 0fr collapse as the solution drawers. */
.mnav__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-out);
}
.mnav__sub-in { min-height: 0; overflow: hidden; }
.mnav__item.is-open .mnav__sub { grid-template-rows: 1fr; }

.mnav__sub-in li a {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .48rem 0 .48rem 1.5rem;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--text-dim);
}
.mnav__sub-in li a:hover { color: var(--text); }
.mnav__sub-in li:last-child a { padding-bottom: 1.1rem; }
.mnav__sub-idx {
  flex: none;
  min-width: 6.2em;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--blue-text); opacity: .65;
}

.mnav__foot { margin-top: 2rem; }
.mnav__foot .btn { width: 100%; justify-content: center; }


/* ==========================================================================
   04 — HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(4rem, 9vh, 7rem);
  overflow: clip;
}

.hero__ambient {
  position: absolute; inset: -20% -10% -10%;
  pointer-events: none;
  background:
    radial-gradient(44% 42% at 71% 46%, rgba(var(--brand), var(--glow-1)), transparent 70%),
    radial-gradient(38% 46% at 14% 82%, rgba(var(--brand), var(--glow-2)), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 97%);
}
/* Extremely fine grain so large flat areas don't band */
.hero__ambient::after {
  content: "";
  position: absolute; inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: var(--grain-blend);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
}

.hero__copy { max-width: 46rem; }

.hero__eyebrow { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.hero__title {
  /* Sized so no line ever wraps inside the two-column hero. */
  font-size: clamp(2.4rem, .9rem + 4.5vw, 4.7rem);
  font-weight: 600;
  line-height: 1.015;
  letter-spacing: -.043em;
}

.hero__sub {
  margin-top: clamp(1.6rem, 3vw, 2.35rem);
  max-width: 45ch;
  font-size: clamp(1.02rem, .96rem + .32vw, 1.14rem);
  line-height: 1.62;
  color: var(--text-dim);
}

/* `stretch` makes the secondary link exactly as tall as the button, so its
   own `align-items: center` lands the text on the button's centre line. */
.hero__actions {
  margin-top: clamp(2.1rem, 4vw, 3rem);
  display: flex; align-items: stretch; flex-wrap: wrap;
  gap: 1.15rem clamp(1.25rem, 2.5vw, 2rem);   /* row gap matters once these wrap */
}
.hero__actions .link-arrow { padding-block: 0; }

.hero__sub p + p { margin-top: .9em; }
.hero__sub-lead { color: var(--text); font-weight: 500; }

/* Track record, above the fold: the report's "not a new startup" signal. */
.hero__trust {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap;
  gap: .6rem 1.6rem;
}
.hero__trust li {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.hero__trust li::before {
  content: ""; flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue);
}



/* --------------------------------------------------------------------------
   Biometric instrument
   Container queries let every panel scale with the instrument itself, so the
   composition holds its proportions at any viewport without breakpoints.
   -------------------------------------------------------------------------- */
.instrument {
  position: relative;
  width: 100%;
  max-width: 660px;
  margin-inline: auto;
  aspect-ratio: 1;
  container-type: inline-size;
}
.instrument__stage { position: absolute; inset: 0; }

.instrument__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Bezel */
.ring { fill: none; stroke: rgba(var(--ink), .07); stroke-width: 1; }
.ring--mid  { stroke: rgba(var(--ink), .05); }
.ring--dash { stroke: rgba(var(--brand), .38); stroke-width: 1; stroke-dasharray: 2 11; transform-origin: 330px 330px; }
.arcs { transform-origin: 330px 330px; }
.arc  { fill: none; stroke: rgba(var(--brand), .5); stroke-width: 1.2; stroke-linecap: round; }
.tick { stroke: rgba(var(--ink), .12); stroke-width: 1; }
.tick--major { stroke: rgba(var(--ink), .24); }
.node { fill: var(--blue); }

.inst-brackets path {
  fill: none; stroke: rgba(var(--ink), .14); stroke-width: 1;
}

/* Fingerprint */
.fp path, .fp line { fill: none; stroke-linecap: round; }
.fp .fp-r { stroke: rgba(var(--fp), .55); stroke-width: 1.15; opacity: var(--o, .7); }
.fp .fp-d { stroke: rgba(var(--fp), .40); stroke-width: 1.05; opacity: var(--o, .5); }
.fp .fp-m { stroke: rgba(var(--brand), .55); stroke-width: 1.4; }

.fp--hot .fp-r,
.fp--hot .fp-d { stroke: var(--blue-bright); opacity: 1; stroke-width: 1.3; }
.fp--hot .fp-m { stroke: var(--fp-lit); }

/* Draw-on state, released by the hero timeline */
.js:not(.reduced-motion) .fp--draw .fp-r,
.js:not(.reduced-motion) .fp--draw .fp-d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js:not(.reduced-motion) .fp--draw .fp-m { opacity: 0; }

.scan-line { opacity: 0; }

/* --- Floating panels --- */
.panel {
  position: absolute;
  background: rgba(var(--paper), .88);
  border: 1px solid var(--line);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px -30px rgba(var(--shadow), .95);
  font-size: clamp(9.5px, 2.05cqi, 13px);
  padding: 1.15em 1.25em;
}

.panel--txn { top: 27%; left: -2%; width: 47%; }
.panel--state { top: 34%; right: -3%; width: 43%; padding: .85em 1.1em; }
.pill--verified { top: 14.5%; left: 7%; }

.panel__eyebrow {
  font-family: var(--font-mono);
  font-size: .78em; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.panel__title {
  margin-top: .55em;
  font-size: 1.02em; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
}
.panel__row {
  margin-top: .9em; padding-top: .75em;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: .5em;
}
.panel__k { font-family: var(--font-mono); font-size: .78em; color: var(--text-faint); letter-spacing: .06em; }
.panel__v { font-size: .95em; font-weight: 600; letter-spacing: -.02em; }
.panel__cta { margin-top: 1em; display: flex; align-items: center; gap: .55em; }
.panel__btn {
  flex: 1;
  padding: .62em .8em;
  border-radius: 6px;
  background: rgba(var(--brand), .1);
  border: 1px solid var(--line-blue);
  color: var(--blue-bright);
  font-size: .82em; font-weight: 600; letter-spacing: -.005em;
  text-align: center;
}
.panel__lock {
  width: 2.15em; height: 2.15em; flex: none;
  display: grid; place-items: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(var(--ink), .03);
}
.panel__lock svg { width: .78em; height: .92em; }
.panel__lock svg path, .panel__lock svg rect {
  fill: none; stroke: var(--blue-bright); stroke-width: 1.2;
}

/* Verified pill */
.pill {
  position: absolute;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .6em .95em;
  border-radius: 100px;
  font-size: clamp(9.5px, 2.05cqi, 13px);
  font-weight: 600; letter-spacing: -.01em;
  background: rgba(var(--paper), .9);
  border: 1px solid rgba(var(--ok), .32);
  color: var(--ok-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px -22px rgba(var(--shadow), .9);
}
.pill__check { width: 1em; height: 1em; flex: none; }
.pill__check path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* State list */
.states { display: grid; gap: .1em; }
.state {
  display: flex; align-items: center; justify-content: space-between; gap: .9em;
  padding: .62em 0;
  font-size: .88em;
  letter-spacing: -.01em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line-soft);
}
.state:last-child { border-bottom: 0; }
.state__tick {
  width: 1.35em; height: 1.35em; flex: none;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  position: relative;
  transition: border-color .4s, background-color .4s;
}
.state__tick::after {
  content: "";
  position: absolute; left: 50%; top: 46%;
  width: .42em; height: .72em;
  margin: -.42em 0 0 -.22em;
  border: solid var(--ok-text);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .4s var(--ease-out);
}
.state.is-on { color: var(--text); }
.state.is-on .state__tick { border-color: rgba(var(--ok), .5); background: rgba(var(--ok), .08); }
.state.is-on .state__tick::after { transform: rotate(45deg) scale(1); }


/* ==========================================================================
   05 — CREDENTIALS
   ========================================================================== */
.cred__track {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.cred__line {
  position: absolute;
  left: 5px; right: 5px; top: 5px;
  height: 1px;
  background: linear-gradient(90deg, var(--blue), rgba(var(--brand), .12));
  transform-origin: left;
}
.js:not(.reduced-motion) .cred__line { transform: scaleX(0); }

.cred__item { position: relative; padding-top: 2.4rem; }
.cred__node {
  position: absolute; left: 0; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: var(--bg-0);
}
.cred__node::after {
  content: "";
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .5s var(--ease-out);
}
.cred__item.is-in .cred__node::after { transform: scale(1); }

.cred__year {
  display: block;
  font-size: clamp(2.1rem, 1.2rem + 2.5vw, 3.2rem);
  font-weight: 250;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--text);
}
.cred__plus { color: var(--blue-text); font-weight: 300; }
.cred__label {
  display: block;
  margin-top: 1.1rem;
  font-size: 1.02rem; font-weight: 600; letter-spacing: -.018em;
  max-width: 15ch;
}
.cred__note {
  display: block;
  margin-top: .55rem;
  font-size: .9rem; line-height: 1.55;
  color: var(--text-faint);
  max-width: 22ch;
}
.cred__link {
  margin-top: .45rem;
  padding-block: .55rem;
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--blue-text);
}
.cred__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ext { width: 11px; height: 11px; flex: none; }
.ext path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Placeholders are meant to be seen: a client reviewing the prototype must be
   able to tell a missing asset from a finished one at a glance. */
.placeholder {
  display: grid; place-content: center; gap: .3rem;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: repeating-linear-gradient(135deg, rgba(var(--ink), .03) 0 8px, transparent 8px 16px);
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint);
}
.placeholder__tag { color: var(--warn-text); font-weight: 500; }
.cred__cert {
  margin-top: 1rem;
  display: inline-grid; gap: .55rem;
  width: 100%; max-width: 8.5rem;
}
.cred__cert img {
  width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 16px 36px -24px rgba(var(--shadow), .6);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.cred__cert:hover img { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(var(--shadow), .7); }
.cred__cert-label {
  font-size: .84rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--blue-text);
}
.cred__cert:hover .cred__cert-label { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   06 — THE GAP
   ========================================================================== */

/* --------------------------------------------------------------------------
   The gap — statement beside the illustration
   -------------------------------------------------------------------------- */
.gap__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* No `ch` max-width here: it would resolve against this wrapper's body-size
   font, not the display-size heading inside it, and crush the column. The grid
   track already sets the measure. */

/* No frame, fill or shadow: the illustration has a transparent background and
   sits straight on the section's ground, so it belongs to both themes rather
   than reading as a pale card on the dark one. */
.gap__figure { margin: 0; }
.gap__figure img { display: block; width: 100%; height: auto; }

/* The line the whole page is built on, kept directly under the statement. */
.gap__kicker {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding-top: clamp(1.2rem, 2.4vw, 1.7rem);
  border-top: 1px solid var(--line);
  font-size: clamp(1.15rem, .95rem + .85vw, 1.65rem);
  font-weight: 560;
  line-height: 1.28;
  letter-spacing: -.028em;
  color: var(--text-dim);
}
.gap__kicker span { color: var(--blue-text); }

@media (max-width: 900px) {
  .gap__head { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); }
  .gap__figure { max-width: 520px; }
}

.models {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 74rem;
}

/* Both models stay fully legible at all times. The contrast between them comes
   from colour, border and weight — never from dimming one into the background. */
.model {
  position: relative;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--ink), .016);
  transition: border-color .6s var(--ease-out), background-color .6s var(--ease-out);
}
.model--new { border-color: rgba(var(--brand), .22); background: rgba(var(--brand), .03); }
.model--new.is-active { border-color: var(--line-blue); background: rgba(var(--brand), .055); }

.model__tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
}
.model__tag::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6;
}
.model__tag--accent { color: var(--blue-text); }

.chain {
  margin-top: clamp(1.35rem, 2.5vw, 1.9rem);
  display: flex; align-items: stretch; gap: clamp(.6rem, 1.6vw, 1.25rem);
}
.chain__node {
  flex: 1;
  min-width: 0;
  padding: clamp(.95rem, 1.8vw, 1.3rem);
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  background: rgba(var(--ink), .022);
}
.chain__k {
  display: block;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .14em; color: var(--text-faint);
}
.chain__v {
  display: block; margin-top: .6rem;
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  font-weight: 600; letter-spacing: -.022em; line-height: 1.25;
  color: var(--text-dim);
}
.model--new .chain__v { color: var(--text); }

.chain__flag {
  display: inline-block; margin-top: .8rem;
  padding: .22rem .55rem;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(var(--warn), .14);
  border: 1px solid rgba(var(--warn), .34);
  color: var(--warn-text);
}
.chain__flag--ok {
  background: rgba(var(--ok), .1);
  border-color: rgba(var(--ok), .3);
  color: var(--ok-text);
}
.chain__node--risk { border-color: rgba(var(--warn), .26); background: rgba(var(--warn), .035); }
.chain__node--ok   { border-color: rgba(var(--ok), .22); background: rgba(var(--ok), .03); }

.chain__link {
  align-self: center;
  position: relative;
  flex: 0 1 clamp(20px, 4vw, 60px);
  height: 1px;
  background: rgba(var(--ink), .1);
  overflow: hidden;
}
.chain__link i {
  position: absolute; inset: 0;
  background: var(--text-faint);
  transform: scaleX(0); transform-origin: left;
}
.chain__link--accent { background: rgba(var(--brand), .16); }
.chain__link--accent i { background: var(--blue); }


/* ==========================================================================
   07 — HOW BIOLOCK WORKS
   ========================================================================== */
.how__head { max-width: 48rem; }
.how__head .h2 { margin-top: 1.6rem; }

.how__grid {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 6vw, 6rem);
  /* No `align-items: start` here: the visual column has to stretch to the full
     row height, otherwise its sticky child has no distance to travel. */
}

.how__sticky {
  position: sticky;
  top: clamp(6rem, 18vh, 11rem);
}

/* --- SAP interface mock --- */
.mock {
  position: relative;
  aspect-ratio: 4 / 2.95;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: 0 50px 110px -60px rgba(var(--shadow), 1);
  overflow: hidden;
  container-type: inline-size;
  font-size: clamp(10px, 2.2cqi, 14px);
}

.mock__chrome {
  display: flex; align-items: center; gap: 1em;
  padding: .95em 1.15em;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(var(--ink), .018);
}
.mock__dots { display: flex; gap: .4em; flex: none; }
.mock__dots i { width: .55em; height: .55em; border-radius: 50%; background: rgba(var(--ink), .13); }
.mock__path {
  font-family: var(--font-mono); font-size: .8em;
  letter-spacing: .01em; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock__sep { margin-inline: .45em; opacity: .5; }
.mock__badge {
  margin-left: auto; flex: none;
  padding: .28em .6em;
  border-radius: 4px;
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .66em;
  letter-spacing: .1em; color: var(--text-faint);
}

.mock__body { padding: 1.35em 1.35em 1.5em; }
.mock__toolbar { display: flex; gap: .45em; margin-bottom: 1.5em; }
.mock__toolbar span {
  height: .95em; width: 1.6em;
  border-radius: 3px;
  background: rgba(var(--ink), .05);
}
.mock__toolbar span.w { width: 3.2em; }

.mock__fields { display: grid; gap: .15em; }
.fld {
  position: relative;
  display: grid; grid-template-columns: 8.5em 1fr;
  align-items: center; gap: 1em;
  padding: .78em .7em;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color .5s, border-color .5s;
}
.fld__k { font-family: var(--font-mono); font-size: .76em; letter-spacing: .07em; color: var(--text-faint); }
.fld__v { font-size: .88em; font-weight: 500; letter-spacing: -.01em; color: var(--text-dim); }
.fld__v--num { font-variant-numeric: tabular-nums; }

.fld--target { border-color: var(--line-soft); background: rgba(var(--ink), .02); }
.fld__marker {
  position: absolute; right: .7em; top: 50%;
  display: flex; align-items: center; gap: .45em;
  transform: translateY(-50%) translateX(6px);
  opacity: 0;
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.fld__marker-dot {
  width: .48em; height: .48em; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 .28em rgba(var(--brand), .16);
}
.fld__marker-label {
  font-family: var(--font-mono); font-size: .64em;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-text);
}

.mock__actions { margin-top: 1.5em; display: flex; gap: .7em; }
.mock__btn {
  padding: .68em 1.05em;
  border-radius: 6px;
  font-size: .8em; font-weight: 600; letter-spacing: -.005em;
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: border-color .5s, background-color .5s, color .5s, box-shadow .5s;
}
.mock__btn--primary {
  background: rgba(var(--brand), .12);
  border-color: var(--line-blue);
  color: var(--blue-bright);
}

.mock__screen[hidden] { display: none; }

/* Step-driven states
   1 initiated · 2 protected function detected · 3 biometric challenge
   4 human verified · 5 transaction permitted · 6 audit event recorded */
/* Ring only: darkening the fill dropped the light theme's button label to 4.49:1. */
.mock[data-state="1"] [data-post] { box-shadow: 0 0 0 3px rgba(var(--brand), .2); }
.mock[data-state="2"] .fld--target {
  border-color: var(--line-blue);
  background: rgba(var(--brand), .07);
}
.mock[data-state="2"] .fld__marker { opacity: 1; transform: translateY(-50%) translateX(0); }
.mock[data-state="3"] .fld--target,
.mock[data-state="4"] .fld--target,
.mock[data-state="5"] .fld--target,
.mock[data-state="6"] .fld--target,
.mock[data-state="7"] .fld--target { border-color: var(--line-blue); background: rgba(var(--brand), .05); }

/* --- Overlays --- */
.overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1.5em;
  background: rgba(var(--paper), .74);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease-out), visibility .55s;
}
.overlay__card {
  width: min(23em, 100%);
  padding: 1.7em;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(var(--paper), .97);
  box-shadow: 0 40px 90px -40px rgba(var(--shadow), 1);
  transform: translateY(14px) scale(.975);
  transition: transform .6s var(--ease-out);
}
.mock[data-state="3"] .overlay--verify,
.mock[data-state="4"] .overlay--verified,
.mock[data-state="5"] .overlay--result,
.mock[data-state="6"] .overlay--result,
.mock[data-state="7"] .overlay--alert { opacity: 1; visibility: visible; }
.mock[data-state="3"] .overlay--verify .overlay__card,
.mock[data-state="4"] .overlay--verified .overlay__card,
.mock[data-state="5"] .overlay--result .overlay__card,
.mock[data-state="6"] .overlay--result .overlay__card,
.mock[data-state="7"] .overlay--alert .overlay__card { transform: none; }

.overlay__brand {
  font-size: .95em; font-weight: 700; letter-spacing: -.03em;
  color: var(--blue);
}
.overlay__title {
  margin-top: .85em;
  font-size: 1.15em; font-weight: 600; letter-spacing: -.025em; line-height: 1.25;
}
.overlay__title--sm { font-size: 1em; margin-top: 1.1em; text-align: center; }
.overlay__text {
  margin-top: .6em;
  font-size: .84em; line-height: 1.55; color: var(--text-dim);
}
.overlay__meta {
  margin-top: .75em;
  font-family: var(--font-mono); font-size: .72em;
  letter-spacing: .06em; color: var(--text-faint);
}
.overlay__card--verified { width: min(17em, 100%); display: grid; justify-items: center; text-align: center; }

.overlay__card--verify { text-align: center; }
.scanner { margin-inline: auto; width: 68%; }
.scanner svg { width: 100%; height: auto; }
.fp--mini .fp-r { stroke: rgba(var(--brand), .75); stroke-width: 2; }
.fp--mini .fp-d { stroke: rgba(var(--brand), .45); stroke-width: 1.8; }
.fp--mini .fp-m { stroke: rgba(var(--brand), .8); stroke-width: 2.4; }
.scanner__line { opacity: 0; }
.mock[data-state="3"] .scanner__line { opacity: 1; animation: scanSweep 1.9s var(--ease-inout) infinite; }
@keyframes scanSweep {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(128px); opacity: 0; }
}

.methods {
  margin-top: .9em;
  display: flex; justify-content: center; flex-wrap: wrap; gap: .4em;
}
.methods li {
  padding: .3em .6em;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: .64em;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-faint);
}
.progress {
  margin-top: 1.3em; height: 2px; border-radius: 2px;
  background: rgba(var(--ink), .07); overflow: hidden;
}
.progress i {
  display: block; height: 100%; width: 100%;
  background: var(--blue);
  transform: scaleX(0); transform-origin: left;
}
.mock[data-state="3"] .progress i { animation: progFill 1.9s var(--ease-inout) infinite; }
@keyframes progFill {
  0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); }
}

.verdict {
  display: flex; align-items: center; gap: .6em;
  font-size: 1.3em; font-weight: 700; letter-spacing: -.035em;
  color: var(--ok-text);
}
.verdict--lg { font-size: 1.55em; }
.verdict__mark {
  width: 1.15em; height: 1.15em; flex: none;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  position: relative;
}
.verdict__mark::after {
  content: "";
  position: absolute; left: 50%; top: 45%;
  width: .3em; height: .55em;
  margin: -.32em 0 0 -.16em;
  border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
/* Audit event. Its space is already reserved at state 5, so nothing moves
   when it writes itself in at state 6. */
.audit {
  margin-top: 1.1em;
  padding-top: .95em;
  border-top: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mock[data-state="6"] .audit { opacity: 1; transform: none; }
.audit__tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: .64em; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ok-text);
}
.audit__tag::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: currentColor; }
.audit__grid {
  margin: .75em 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6em 1.1em;
}
.audit__grid div { min-width: 0; }
.audit__grid div:last-child { grid-column: 1 / -1; }
.audit__result dd { color: var(--ok-text); }

/* A refused attempt: the verdict's tick becomes a stroke, and the verdict and
   the audit result turn red. Used by the "data breach prevented" scenario. */
.mock[data-outcome="denied"] .overlay--result .verdict { color: var(--warn-text); }
.mock[data-outcome="denied"] .overlay--result .verdict__mark::after {
  width: .62em; height: 0;
  margin: 0 0 0 -.31em;
  border-width: 0 0 1.5px 0;
  transform: rotate(-45deg);
}
.mock[data-outcome="denied"] .audit__tag { color: var(--warn-text); }
.mock[data-outcome="denied"] .audit__result dd { color: var(--warn-text); }
.audit__grid dt {
  font-family: var(--font-mono); font-size: .6em;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.audit__grid dd {
  margin: .15em 0 0;
  font-size: .8em; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  color: var(--text);
}

/* --- The alert that goes out the moment an attempt is judged (state 07) --- */
.overlay__card--alert { width: min(25em, 100%); }
.alert__tag {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-mono); font-size: .64em; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue-text);
}
.alert__tag::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: currentColor;
}
.alert__to {
  margin-top: .9em;
  font-family: var(--font-mono); font-size: .68em;
  letter-spacing: .04em; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alert__to span {
  margin-right: .6em;
  text-transform: uppercase; letter-spacing: .12em;
}
.alert__subject {
  margin-top: .55em;
  font-size: 1em; font-weight: 600; letter-spacing: -.02em; line-height: 1.3;
}
.alert__lines {
  margin: 1.1em 0 0;
  padding-top: .95em;
  border-top: 1px solid var(--line-soft);
  display: grid; gap: .55em 1.1em;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.alert__lines div { min-width: 0; }
.alert__lines dt {
  font-family: var(--font-mono); font-size: .6em;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.alert__lines dd {
  margin: .15em 0 0;
  font-size: .8em; font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  color: var(--text);
}
.alert__verb { font-weight: 700; }
.alert__verb:not(:empty)::before { content: " "; }
.mock[data-outcome="denied"] .alert__subject { color: var(--warn-text); }
.mock[data-outcome="denied"] .alert__lines div:nth-child(3) dd { color: var(--warn-text); }

/* --- Progress rail --- */
.how__rail {
  margin-top: 1.5rem;
  height: 2px;
  background: rgba(var(--ink), .06);
  border-radius: 2px;
  overflow: hidden;
}
.how__rail-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  transform: scaleX(0); transform-origin: left;
}

/* --- Scenario switcher --- */
.scn { margin-top: 1.35rem; }
.scn__label {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.scn__list { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.scn__btn {
  min-height: 40px;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .8rem; font-weight: 500; letter-spacing: -.005em;
  color: var(--text-dim);
  transition: color .3s, border-color .3s, background-color .3s;
}
.scn__btn:hover { color: var(--text); border-color: var(--line-strong); }
.scn__btn[aria-pressed="true"] {
  color: var(--blue-text);
  border-color: var(--line-blue);
  background: rgba(var(--brand), .08);
}
/* The switcher needs script; without it only the default scenario exists. */
.no-js .scn { display: none; }

/* --- Steps --- */
.how__steps { display: grid; }
@media (min-width: 1025px) { .how__steps { padding-bottom: 18vh; } }
.step {
  min-height: 34vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 2rem;
  opacity: .26;
  transition: opacity .6s var(--ease-out);
}
.step.is-active { opacity: 1; }
.step__num {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .2em; color: var(--blue-text);
}
.step__title {
  margin-top: 1.15rem;
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
}
.step__text {
  margin-top: 1rem;
  max-width: 34ch;
  color: var(--text-dim);
  font-size: 1.02rem;
}


/* ==========================================================================
   08 — HORIZON
   ========================================================================== */
.section--horizon { min-height: 220vh; }
.horizon__sticky {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}

.lattice {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .9;
}
.lx {
  stroke: rgba(var(--ink), .15);
  stroke-width: 1;
  stroke-linecap: round;
}
.lx--hot { stroke: rgba(var(--brand), .55); }

.lattice__ring { fill: none; stroke: rgba(var(--brand), .3); stroke-width: 1; }
.lattice__ring--faint { stroke: rgba(var(--ink), .07); }
/* `slice` scales the whole lattice up on portrait viewports, which is what
   makes the field fill the frame — but it would also push the outer ring
   past the screen edge. This wrapper scales the rings back independently,
   leaving the GSAP scale tween on .lattice__core untouched. */
.lattice__core-wrap { transform-box: view-box; transform-origin: 600px 286px; }
.lattice__core { opacity: 0; }
.lattice__core .lattice__ring { stroke: rgba(var(--brand), .22); }
/* Sits behind the headline as a halo — never competes with the copy. */
.fp--core .fp-r { stroke: rgba(var(--brand), .30); stroke-width: 2.2; }
.fp--core .fp-d { stroke: rgba(var(--brand), .18); stroke-width: 2; }
.fp--core .fp-m { stroke: rgba(var(--fp-hot), .34); stroke-width: 2.8; }

.horizon__content {
  position: relative;
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
  text-align: center;
  justify-items: center;
}
.horizon__head { display: grid; justify-items: center; }
.horizon__head .h2 { margin-top: 1.2rem; }

/* All three phases occupy the same grid cell, so the block is exactly as tall
   as the tallest phase — no guessed min-height, no dead space under the tag. */
.horizon__phases {
  display: grid;
  grid-template-areas: "phase";
  width: min(38rem, 100%);
  align-items: center;
}
.phase {
  grid-area: phase;
  display: grid; gap: 1rem; justify-items: center;
  align-content: center;
  opacity: 0;
}
.phase[data-phase="0"] { opacity: 1; }

.threats { display: grid; gap: .5rem; justify-items: center; }
.threats li {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.024em;
  color: var(--text-dim);
}
.phase__lead {
  font-size: clamp(1.05rem, .95rem + .55vw, 1.4rem);
  letter-spacing: -.02em;
  color: var(--text-dim);
}
.phase__resolve {
  max-width: 16ch;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--blue-text);
  text-wrap: balance;
}


/* ==========================================================================
   09 — SOLUTION AREAS
   ========================================================================== */
.sol__head { max-width: 46rem; }
.sol__head .h2 { margin-top: 1.6rem; }

.sol__grid {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(2rem, 6vw, 6rem);
  /* Same reason as .how__grid — the stage column must stretch for sticky. */
}

.sol__list { position: relative; border-top: 1px solid var(--line-soft); }
.sol { border-bottom: 1px solid var(--line-soft); }

.sol__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.35rem, 2.5vw, 1.9rem) 0;
  text-align: left;
  transition: padding-left .5s var(--ease-out);
}
/* Desktop only: each row gets enough height for the sticky stage to advance
   one step per scroll beat, the same way the product demo does. */
@media (min-width: 1025px) {
  .sol { display: flex; flex-direction: column; justify-content: center; min-height: 32vh; }
  .sol.is-active { min-height: 40vh; }
}
.sol__idx {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em;
  color: var(--text-faint);
  transition: color .4s;
}
.sol__name {
  font-size: clamp(1.28rem, 1rem + 1.35vw, 2.05rem);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--text-faint);
  transition: color .45s var(--ease-out);
}
.sol__arrow {
  width: 18px; height: 12px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .45s, transform .45s var(--ease-out);
}
.sol__arrow svg { width: 100%; height: 100%; }
.sol__arrow svg path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.sol:hover .sol__name { color: var(--text-dim); }
.sol.is-active .sol__name { color: var(--text); }
.sol.is-active .sol__idx { color: var(--blue-text); }
.sol.is-active .sol__btn { padding-left: clamp(.75rem, 2vw, 1.5rem); }
.sol.is-active .sol__arrow { opacity: 1; transform: none; }

/* Drawer.
   The 0fr -> 1fr row trick only collapses the grid's FIRST row, so the drawer
   must have exactly one child; everything else lives inside that wrapper and
   the wrapper alone carries `overflow: hidden`. */
.sol__drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .6s var(--ease-out), opacity .45s;
}
.sol__drawer-in {
  min-height: 0;
  overflow: hidden;
  padding-left: clamp(.75rem, 2vw, 1.5rem);
  transition: padding-left .6s var(--ease-out);
}
.sol__drawer-in > :last-child { margin-bottom: clamp(1.4rem, 2.5vw, 2rem); }
.sol.is-active .sol__drawer { grid-template-rows: 1fr; opacity: 1; }

.sol__text {
  max-width: 46ch;
  color: var(--text-dim);
  font-size: 1.01rem;
}
.sol__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.15rem; }
.sol__tags li {
  padding: .34rem .7rem;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .07em;
  color: var(--text-faint);
}

/* Moving indicator */
.sol__list::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 2px; height: var(--ind-h, 0px);
  background: var(--blue);
  transform: translateY(var(--ind-y, 0px));
  transition: transform .55s var(--ease-out), height .55s var(--ease-out), opacity .4s;
  opacity: var(--ind-o, 0);
}

/* Stage.
   The grid item stretches to the full row height (that is what gives the child
   somewhere to travel); the inner panel is the thing that sticks. Putting
   `sticky` on the stretched item itself would leave it with zero travel —
   same structure as .how__visual / .how__sticky above. */
.sol__stage { align-self: stretch; }
.sol__stage-inner {
  position: sticky;
  top: clamp(6rem, 16vh, 10rem);
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(var(--brand), .07), transparent 70%),
    rgba(var(--ink), .012);
  overflow: hidden;
}
.sol__glyph { position: absolute; inset: 0; width: 100%; height: 100%; }
/* All five marks share one construction: a faint instrument frame, thin blue
   linework, a small number of solid nodes. No pictographs. */
.glyph { opacity: 0; }
.glyph-frame circle,
.glyph-frame path {
  fill: none;
  stroke: rgba(var(--ink), .07);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.glyph .g-line {
  fill: none;
  stroke: rgba(var(--brand), .55);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.glyph .g-dash { stroke-dasharray: 3 7; stroke: rgba(var(--brand), .4); }
.glyph .g-tick {
  stroke: rgba(var(--ink), .16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.glyph .g-dot  { fill: rgba(var(--ink), .2); }
.glyph .g-node { fill: var(--blue-bright); }
.glyph .g-node-stroke {
  fill: none;
  stroke: var(--blue-bright);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sol__stage-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem;
  display: flex; align-items: baseline; gap: .9rem;
  border-top: 1px solid var(--line-soft);
  background: rgba(var(--paper), .5);
}
.sol__stage-idx { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; color: var(--blue-text); }
.sol__stage-name { font-size: .98rem; font-weight: 600; letter-spacing: -.02em; }


/* ==========================================================================
   10 — PROOF
   ========================================================================== */
/* A ledger, not a scatter: every row shares one structure, so the three
   figures read as a set instead of three loose objects. */
.stats {
  margin-top: clamp(1rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.stat {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 15rem);
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.stat__idx {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; color: var(--text-faint);
  padding-bottom: .9rem;
}
.stat__num {
  display: flex; align-items: flex-start;
  /* Sized to sit just above the section heading, not to dwarf it — roughly
     1.15x the h2 across the range. The looser line-height keeps the comma's
     tail off the row rule. */
  font-size: clamp(2.7rem, 1rem + 4.4vw, 5.25rem);
  font-weight: 230;
  line-height: .95;
  letter-spacing: -.045em;
  color: var(--text);
}
.stat__unit {
  font-size: .3em; font-weight: 400;
  color: var(--blue-text);
  margin-top: .2em; margin-left: .1em;
  letter-spacing: 0;
}
.stat__label {
  padding-bottom: .7rem;
  font-size: clamp(.95rem, .9rem + .25vw, 1.08rem);
  line-height: 1.5;
  letter-spacing: -.015em;
  color: var(--text-dim);
  text-wrap: balance;
}

.proof__coda {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  margin-inline: auto;
  max-width: 42ch;
  text-align: center;
  font-size: clamp(1.1rem, 1rem + .7vw, 1.6rem);
  line-height: 1.42;
  letter-spacing: -.028em;
  color: var(--text-faint);
}
.proof__coda em { font-style: normal; color: var(--text); }


/* ==========================================================================
   11 — CASE STUDIES (carousel)
   Native overflow scrolling with snap points: swipes on touch, drags with the
   buttons on desktop, and keeps the page's own scrolling completely untouched.
   ========================================================================== */
/* The carousel sits on the same measure as every other section. */
.carousel {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.carousel__track {
  --cols: 3;
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  display: flex;
  align-items: stretch;
  gap: var(--gap);
  /* overflow-y has to be stated: `overflow-x: auto` alone computes overflow-y
     to auto as well, which clips the cards' hover lift. The padding gives the
     clip box somewhere to breathe; the negative margin cancels the space. */
  padding-block: 12px;
  margin-block: -12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .carousel__track { scroll-behavior: auto; } }

.case {
  /* Exactly --cols cards fill the track, so no card is ever half-visible. */
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(var(--ink), .016);
  transition: border-color .45s, background-color .45s, transform .45s var(--ease-out);
}
.case:hover {
  border-color: var(--line-blue);
  background: rgba(var(--brand), .04);
  transform: translateY(-3px);
}

.case__sector {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--blue-text);
}
.case__title {
  margin-top: 1.1rem;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
}
.case__figure {
  margin-top: 1.5rem;
  display: flex; flex-direction: column; gap: .3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}
.case__fig-n {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem);
  font-weight: 230; letter-spacing: -.045em; line-height: .95;
}
.case__fig-l {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.case__desc {
  margin-top: 1.1rem;
  color: var(--text-dim);
  font-size: .92rem;
  line-height: 1.6;
  flex: 1;
}
.case__link {
  margin-top: 1.5rem;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-faint);
  transition: color .4s;
}
.case__link svg { width: 15px; height: 10px; transition: transform .45s var(--ease-out); }
.case__link svg path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.case:hover .case__link { color: var(--blue-text); }
.case:hover .case__link svg { transform: translateX(5px); }

/* --- controls --- */
.carousel__ui {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-inline: 0;
  display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem);
}
.carousel__rail {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(var(--ink), .07);
  overflow: hidden;
}
.carousel__rail span {
  display: block; height: 100%;
  width: 20%;
  border-radius: 2px;
  background: var(--blue);
  transform: translateX(0);
  transition: transform .35s var(--ease-out), width .35s var(--ease-out);
}
.carousel__nav { display: flex; gap: .6rem; flex: none; }
.carousel__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: border-color .3s, background-color .3s, opacity .3s;
}
.carousel__btn svg { width: 16px; height: 10px; }
.carousel__btn svg path {
  fill: none; stroke: var(--text-dim); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s;
}
.carousel__btn:hover { border-color: var(--line-blue); background: rgba(var(--brand), .07); }
.carousel__btn:hover svg path { stroke: var(--blue-bright); }
.carousel__btn[disabled] { opacity: .3; pointer-events: none; }

/* ==========================================================================
   12 — RESOURCES
   ========================================================================== */
.res__head { max-width: 44rem; }
.res__head .h2 { margin-top: 1.6rem; }

.res__list {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
}
.res { border-bottom: 1px solid var(--line-soft); }
.res__link {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(.5rem, 2vw, 1.5rem);
  transition: padding-left .55s var(--ease-out), background-color .5s;
}
.res__link::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--blue);
  transform: scaleY(0); transform-origin: center;
  transition: transform .55s var(--ease-out);
}
.res__link:hover { background: rgba(var(--ink), .02); padding-left: clamp(1.25rem, 3.5vw, 2.75rem); }
.res__link:hover::before { transform: scaleY(1); }

.res__idx { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; color: var(--text-faint); }
.res__name {
  font-size: clamp(1.15rem, .95rem + 1vw, 1.7rem);
  font-weight: 500; letter-spacing: -.03em;
  color: var(--text-dim);
  transition: color .4s;
}
.res__link:hover .res__name { color: var(--text); }
.res__type {
  padding: .3rem .65rem;
  border: 1px solid var(--line-soft); border-radius: 100px;
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  transition: border-color .4s, color .4s;
}
.res__link:hover .res__type { border-color: var(--line-blue); color: var(--blue-text); }
.res__arrow { width: 18px; height: 12px; }
.res__arrow svg { width: 100%; height: 100%; transition: transform .5s var(--ease-out); }
.res__arrow svg path { fill: none; stroke: var(--text-faint); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.res__link:hover .res__arrow svg { transform: translateX(6px); }
.res__link:hover .res__arrow svg path { stroke: var(--blue); }

/* --- The LinkedIn group: an invitation rather than another resource row --- */
.group {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--line-blue);
  border-radius: var(--radius);
  background: rgba(var(--brand), .04);
  transition: background-color .4s, border-color .4s;
}
.group:hover { background: rgba(var(--brand), .075); border-color: rgba(var(--brand), .45); }
.group__k {
  grid-column: 1;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-text);
}
.group__v {
  grid-column: 1;
  margin-top: .5rem;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
  color: var(--text);
}
.group__x {
  grid-column: 1;
  margin-top: .5rem; max-width: 48ch;
  font-size: .95rem; line-height: 1.55; color: var(--text-dim);
}
/* The group's own logo, in the space on the right that was empty. The supplied
   artwork has a white ground, so the tile stays white in both themes rather
   than putting a white rectangle on a dark panel. */
.group__mark {
  grid-column: 2; grid-row: 1 / span 3; align-self: center;
  display: grid; place-items: center;
  width: clamp(6rem, 12vw, 8rem);
  padding: .55rem .7rem;
  border-radius: 12px;
  border: 1px solid var(--line-blue);
  background: #fff;
  box-shadow: 0 18px 40px -30px rgba(var(--shadow), .8);
  transition: border-color .4s, transform .4s var(--ease-out);
}
.group__mark img { display: block; width: 100%; height: auto; }
.group:hover .group__mark { border-color: rgba(var(--brand), .5); transform: translateY(-2px); }

.group__arrow { grid-column: 3; grid-row: 1 / span 3; align-self: center; width: 18px; height: 12px; }
.group__arrow svg { width: 100%; height: 100%; transition: transform .5s var(--ease-out); }
.group__arrow svg path {
  fill: none; stroke: var(--blue-text);
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.group:hover .group__arrow svg { transform: translateX(6px); }

@media (max-width: 560px) {
  .group { grid-template-columns: minmax(0, 1fr) auto; }
  .group__mark { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .group__arrow { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; }
}


/* ==========================================================================
   13 — BUSINESS RISKS · POINT OF ACTION · BUILT INTO SAP · OBJECTIONS
   ========================================================================== */

/* --- Business risks: five places identity matters most --- */
.risks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
.risk {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 13rem;
  padding: clamp(1.3rem, 2vw, 1.65rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: rgba(var(--ink), .016);
  transition: border-color .45s, background-color .45s;
}
.risk:hover { border-color: rgba(var(--warn), .3); background: rgba(var(--warn), .025); }
.risk__idx { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; color: var(--text-faint); }
.risk__name {
  margin-top: auto;
  font-size: clamp(1.15rem, 1rem + .55vw, 1.45rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
}
.risk__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.risk__tags li {
  padding: .28rem .55rem;
  border-radius: 4px;
  border: 1px solid rgba(var(--warn), .28);
  background: rgba(var(--warn), .06);
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .07em;
  color: var(--warn-text);
}

/* --- How bioLock works: the point of action --- */
.poa__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.poa__step { position: relative; padding-top: 1.6rem; }
.poa__step::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 2.25rem; height: 2px;
  background: var(--blue);
}
.poa__num { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; color: var(--blue-text); }
.poa__title {
  margin-top: .8rem;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.42rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}

.poa__concept {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.poa__h3 {
  font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.4rem);
  font-weight: 560; letter-spacing: -.035em; line-height: 1.1;
}
.levels { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.levels__label {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint);
}
.levels__scale { margin: .8rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.levels__scale li {
  padding: .4rem .75rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .84rem;
  color: var(--text-dim);
}
.levels__bio {
  margin-top: .55rem;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
  color: var(--blue-text);
}

.compare { display: grid; gap: clamp(.75rem, 1.5vw, 1rem); }
.cmp {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--ink), .016);
}
.cmp--func { border-color: var(--line-blue); background: rgba(var(--brand), .05); }
.cmp__tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.cmp--func .cmp__tag { color: var(--blue-text); }
.cmp__q {
  margin-top: .75rem;
  font-size: clamp(1.3rem, 1rem + 1.15vw, 2rem);
  font-weight: 560; letter-spacing: -.032em; line-height: 1.2;
  color: var(--text-dim);
}
.cmp--func .cmp__q { color: var(--text); }

/* --- Built into SAP --- */
.sap__sub {
  font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem);
  font-weight: 560; letter-spacing: -.025em; line-height: 1.3;
  color: var(--text);
}
.sap__ns { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; }
.sap__ns code {
  padding: .2rem .55rem;
  border: 1px solid var(--line-blue);
  border-radius: 5px;
  background: rgba(var(--brand), .07);
  font-family: var(--font-mono); font-size: .9rem;
  color: var(--blue-text);
}

.benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
.benefit { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.benefit__idx { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .16em; color: var(--blue-text); }
.benefit__title {
  margin-top: .8rem;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.benefit__text { margin-top: .65rem; font-size: .96rem; line-height: 1.6; color: var(--text-dim); }
.benefit__text strong { font-weight: 600; color: var(--text); }

.flows {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.flow {
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--ink), .016);
}
.flow--bio { border-color: var(--line-blue); background: rgba(var(--brand), .04); }
.flow__tag {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-dim);
}
.flow__tag::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.flow__tag--accent { color: var(--blue-text); }
.flow__steps { margin-top: 1.4rem; }
.flow__steps li {
  position: relative;
  padding: .75rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(var(--ink), .02);
  font-size: .96rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3;
}
.flow__steps li + li { margin-top: 1.5rem; }
.flow__steps li + li::before {
  content: "";
  position: absolute; left: 1.4rem; top: calc(-1.5rem - 1px);
  width: 1px; height: 1.5rem;
  background: var(--line-strong);
}
.flow--bio .flow__steps li + li::before { background: rgba(var(--brand), .45); }
.flow__steps li span { display: block; margin-top: .15rem; font-size: .84rem; font-weight: 400; color: var(--text-faint); }
/* --blue-bright, not --blue-text: it is the token measured for text on a tinted
   blue fill (the contrast audit put --blue-text at 4.4:1 here in the light theme). */
.flow__steps .flow__hot { border-color: var(--line-blue); background: rgba(var(--brand), .1); color: var(--blue-bright); }
.flow__steps .flow__end--risk { border-color: rgba(var(--warn), .3); background: rgba(var(--warn), .05); color: var(--warn-text); }
.flow__steps .flow__end--ok { border-color: rgba(var(--ok), .3); background: rgba(var(--ok), .05); color: var(--ok-text); }
.flow__quote { margin-top: 1.3rem; font-size: .96rem; line-height: 1.55; color: var(--text-dim); }

/* --- The sticky note ---
   The credentials everybody has seen taped to a monitor. It sits in the flow of
   the standard-security card, so it can never collide with anything; the tilt
   and the shadow are the only things lifting it off the surface. The
   handwriting is outlines (tools/generate-stickynote.py), not a web font. */
.note {
  width: clamp(138px, 44%, 178px);
  /* Centred under the standard-security chain, so the eye goes straight from
     the unanswered question to the password on the desk. */
  margin: 1.9rem auto -.35rem;
  transform: rotate(-3.5deg);
}
.note__svg {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .34)) drop-shadow(0 2px 3px rgba(0, 0, 0, .2));
}
.note__paper { fill: #E4CE6F; }
.note__fold  { fill: #C9B257; }
.note__ink   { fill: #1C2437; }
.note__rule  { fill: none; stroke: #1C2437; stroke-width: 2.6; stroke-linecap: round; }

[data-theme="light"] .note__svg {
  filter: drop-shadow(0 12px 20px rgba(16, 20, 28, .18)) drop-shadow(0 2px 3px rgba(16, 20, 28, .12));
}
[data-theme="light"] .note__paper { fill: #F6E07A; }
[data-theme="light"] .note__fold  { fill: #E1C95F; }
.trail {
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.trail span + span::before { content: "\2192"; content: "\2192" / ""; margin-right: .5rem; color: var(--blue-text); }

.sap__where {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.sap__hammer {
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2.15rem);
  font-weight: 560; letter-spacing: -.035em; line-height: 1.16;
  color: var(--text-dim);
}
.sap__hammer span { color: var(--text); }

.sap__close {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
  display: grid; justify-items: center;
  text-align: center;
}
.sap__close-title {
  font-size: clamp(2rem, 1rem + 3.4vw, 3.9rem);
  font-weight: 560; letter-spacing: -.042em; line-height: 1.05;
}
.sap__close-title span { color: var(--blue-text); }
.sap__close-sub {
  margin-top: 1.2rem;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color: var(--text-dim);
}
.journey { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.journey li {
  padding: .42rem .75rem;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-dim);
}
.journey li:last-child { color: var(--ok-text); border-color: rgba(var(--ok), .32); }

/* --- Tables (shared by the SAP comparison and the objection handler) ---
   Real <table>s, so the comparison survives copy-paste and screen readers.
   On narrow screens the table scrolls inside its own frame, never the page. */
.tbl__title {
  margin-bottom: 1.25rem;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.tbl-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .94rem; line-height: 1.45; }
.tbl th, .tbl td {
  padding: .9rem 1.2rem;
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
.tbl thead th {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(var(--ink), .025);
}
.tbl tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.tbl td { color: var(--text-dim); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl__bio > * { background: rgba(var(--brand), .08); }
.tbl__bio th { color: var(--blue-text); }
.tbl__bio td { color: var(--text); font-weight: 600; }
.tbl--adds td:last-child { color: var(--text); font-weight: 600; }

/* --- Objection handler --- */
.obj__q { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.obj__q-label {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-faint);
}
.obj__q ul { margin-top: .85rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.obj__q li {
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .88rem;
  color: var(--text-dim);
}


/* ==========================================================================
   14 — FINAL CTA
   ========================================================================== */
.section--cta { padding-block: clamp(6.5rem, 13vw, 12rem); }

.cta__field {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.cta__field svg {
  width: min(120vh, 130vw); height: auto;
  opacity: .85;
}
.cta__ring { fill: none; stroke: rgba(var(--brand), .20); stroke-width: 1; }
.cta__ring--faint { stroke: rgba(var(--ink), .055); }
.fp--ghost .fp-r { stroke: rgba(var(--brand), .22); stroke-width: 1.8; }
.fp--ghost .fp-d { stroke: rgba(var(--brand), .14); stroke-width: 1.5; }
.fp--ghost .fp-m { stroke: rgba(var(--brand), .26); stroke-width: 2.2; }

.cta__inner { position: relative; text-align: center; display: grid; justify-items: center; }
.cta__title {
  font-size: clamp(2.05rem, .9rem + 4vw, 4.45rem);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -.042em;
}
/* Three paths, sized to the commitment each one asks for. */
.paths {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  width: 100%;
  max-width: 66rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  text-align: left;
}
.path {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--paper), .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.path--poc { border-color: var(--line-blue); box-shadow: 0 30px 70px -44px rgba(var(--brand), .6); }
.path__time {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-text);
}
.path__name {
  margin-top: .8rem;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.38rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.path__for { margin-top: .5rem; flex: 1; font-size: .92rem; line-height: 1.55; color: var(--text-dim); }
.path .link-arrow, .path .btn { margin-top: 1.4rem; }
.path .btn { white-space: normal; }


/* ==========================================================================
   15 — FOOTER
   ========================================================================== */
.footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--line-soft);
  padding-top: clamp(4rem, 8vw, 6.5rem);
  padding-bottom: 2.5rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}
.footer__logo { width: 118px; height: auto; }
.footer__company {
  margin-top: .6rem;
  max-width: 30ch;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-dim);
}
.footer__tag {
  margin-top: 1.4rem;
  max-width: 26ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-faint);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 3vw, 2.5rem);
}
.footer__h {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1.15rem;
}
.footer__col ul { display: grid; gap: .7rem; }
.footer__col a {
  font-size: .93rem;
  color: var(--text-dim);
  transition: color .3s;
}
.footer__col a:hover { color: var(--blue-text); }

/* SAP Gold Partner — downplayed at the client's request (German team review,
   pt 7): a small mark beside the legal line rather than a featured badge. */
.footer__partner { width: 52px; height: auto; }

.footer__base {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}
.footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 2rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .07em;
  color: var(--text-faint);
}

/* --- Social --- */
/* The 40px hit target is larger than the 17px glyph; the negative inline
   margin pulls the outermost glyph edge flush with the text above it. */
.footer__social { display: flex; gap: .2rem; margin-inline: -11px; }
.footer__social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-faint);
  transition: color .3s, background-color .3s;
}
.footer__social svg { width: 17px; height: 17px; fill: currentColor; }
.footer__social a:hover {
  color: var(--blue-text);
  background: rgba(var(--brand), .08);
}


/* ==========================================================================
   16 — RESPONSIVE
   ========================================================================== */

/* --- Large desktop trim --- */
@media (max-width: 1180px) {
  .stat { grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 12rem); }
  .risks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
}

/* --- Tablet / stacked hero --- */
@media (max-width: 1024px) {
  .carousel__track { --cols: 2; }
  .section--horizon { min-height: 170vh; }
  /* Portrait viewports scale the lattice up hard; pull the rings back so the
     outermost one stays inside the frame. */
  .lattice__core-wrap { transform: scale(.6); }
  .hero { min-height: auto; padding-bottom: clamp(2.75rem, 5vh, 4.5rem); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 3rem); }
  .hero__copy { max-width: 34rem; }
  .hero__visual { max-width: 560px; margin-inline: auto; width: 100%; }

  .how__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The steps scroll underneath the held demo, so it needs a solid backdrop —
     without one the step text reads straight through the mock. */
  .how__visual {
    position: sticky;
    top: calc(var(--header-h) + 10px);
    z-index: 2;
    background: var(--bg-0);
    padding-block: 1rem;
  }
  .how__sticky { position: static; }
  .mock { max-height: 44svh; aspect-ratio: 4 / 3; margin-inline: auto; }
  .how__visual::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -2.25rem; height: 2.25rem;
    background: linear-gradient(180deg, var(--bg-0), transparent);
    pointer-events: none;
  }
  .how__steps { margin-top: 2rem; }
  /* The switcher rides in the held block, as one swipeable row, so a scenario
     can be changed without losing sight of the simulation. */
  .how__rail { margin-top: .75rem; }
  .scn { margin-top: .75rem; display: flex; align-items: center; gap: .9rem; }
  .scn__label { flex: none; font-size: .6rem; }
  .scn__list {
    margin-top: 0; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter);
  }
  .scn__list::-webkit-scrollbar { display: none; }
  .scn__btn { flex: none; white-space: nowrap; }
  /* Enough travel for one state to register per step, without the huge empty
     run the old 62vh reserve left under each one. Capped, so a tall tablet
     does not quietly reintroduce it. */
  .step { min-height: clamp(210px, 28vh, 300px); padding-block: .75rem; }

  .sol__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .sol__stage { display: none; }
  .sol { min-height: 0; }

  .cred__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .cred__line { display: none; }

  .poa__concept { grid-template-columns: minmax(0, 1fr); }
  .sap__where { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1120px) {
  .mega__list--3 { grid-template-columns: 1fr 1fr; }
}

/* --- Nav density ---
   Six plain labels plus "Book a Demo" need ~1,130px at the default spacing.
   Tightening the gaps buys ~90px before the bar has to collapse. */
@media (max-width: 1200px) {
  .nav__list { gap: .15rem; }
  .header__actions { margin-left: .75rem; gap: .6rem; }
}

/* --- Nav collapse ---
   Measured, not guessed: below 1,081px the actions ran past the viewport edge.
   Keep in step with the matching query in js/nav.js. The demo button stays in
   the bar beside the burger for as long as there is room for it. */
@media (max-width: 1080px) {
  .nav { display: none; }
  .header__logo img { width: clamp(124px, 34vw, 150px); }
  .burger { display: block; }
  .header__actions { margin-left: auto; }
  .mega { display: none !important; }
}
@media (max-width: 560px) {
  .header__actions .btn--sm { display: none; }
}

/* --- Small tablet / large phone --- */
@media (max-width: 768px) {
  /* A fractional column leaves the next card peeking, which is the swipe hint. */
  .carousel__track { --cols: 1.35; }
  .chain { flex-direction: column; align-items: stretch; }
  .chain__link { width: 1px; height: 14px; margin-inline: auto; flex: none; }
  /* Stacked, each node reads as one line: index, label, flag. */
  .chain__node { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; padding: .7rem .9rem; }
  .chain__v { margin-top: 0; }
  .chain__flag { margin: 0 0 0 auto; }
  .flow__steps li { padding: .6rem .85rem; font-size: .92rem; }
  .flow__steps li + li { margin-top: 1rem; }
  .flow__steps li + li::before { top: calc(-1rem - 1px); height: 1rem; }
  .chain__link i { transform: scaleY(0); transform-origin: top; }

  .stat { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; }
  .stat__idx { padding-bottom: 0; padding-top: .5rem; }
  .stat__label { grid-column: 2; padding-bottom: 0; padding-top: 1rem; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res__link { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .res__arrow { display: none; }

  .risks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .risk { min-height: 0; }
  .risk:last-child { grid-column: 1 / -1; }
  .poa__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; border-top: 0; }
  .poa__step { border-top: 1px solid var(--line); }
  .flows { grid-template-columns: minmax(0, 1fr); }
  .paths { grid-template-columns: minmax(0, 1fr); max-width: 32rem; }
  .section--horizon { min-height: 150vh; }
}

/* --- Phone --- */
@media (max-width: 560px) {
  .carousel__track { --cols: 1.12; }
  .lattice__core-wrap { transform: scale(.42); }
  .cred__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; margin-top: 2rem; }
  .cred__year { font-size: 1.9rem; }
  .cred__label, .cred__note { max-width: none; }

  .panel--txn { top: 24%; left: -3%; width: 55%; }
  .panel--state { top: 47%; right: -3%; width: 50%; }
  .pill--verified { top: 10%; left: 4%; }

  .mock { max-height: 40svh; }
  .instrument { max-width: 310px; }
  .fld { grid-template-columns: 6.5em 1fr; }
  .fld__marker-label { display: none; }

  .carousel__nav { display: none; }

  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .risks { grid-template-columns: minmax(0, 1fr); }
  .risk:last-child { grid-column: auto; }
  .benefits { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .benefit { padding-top: 1.1rem; }
  .risk { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .6rem .9rem; padding: 1rem 1.1rem; }
  .risk__name { margin-top: 0; flex: 1; font-size: 1.12rem; }
  .risk__tags { flex-basis: 100%; }
  .poa__concept { margin-top: 2.75rem; }
  .sap__close { margin-top: 3rem; padding-top: 2.5rem; }
  /* Three short columns fit a phone once the padding comes in, which reads
     better than a sideways-scrolling table. */
  .tbl { min-width: 0; font-size: .84rem; }
  .tbl th, .tbl td { padding: .7rem .6rem; }
  .tbl tbody th { white-space: normal; }
  .tbl thead th { font-size: .56rem; letter-spacing: .08em; }

  .footer__base { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .panel--state { display: none; }
  .panel--txn { top: 30%; left: 0; width: 66%; }
}

/* --- Touch: hover-only affordances become always-on --- */
.is-touch .link-arrow::after { display: none; }


/* ==========================================================================
   17 — REDUCED MOTION
   Everything resolves to its final, readable state. No transforms, no loops.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.reduced-motion [data-reveal],
.reduced-motion [data-reveal-lines],
.reduced-motion [data-hero] { opacity: 1 !important; transform: none !important; }
.reduced-motion .line__in { transform: none !important; }
.reduced-motion .cred__line { transform: scaleX(1); }
.reduced-motion .cred__item .cred__node::after { transform: scale(1); }
.reduced-motion .chain__link i { transform: scaleX(1); }
.reduced-motion .lattice__core { opacity: 1; }
.reduced-motion .lattice__field { opacity: .35; }
.reduced-motion .section--horizon { min-height: 0; padding-block: var(--sp); }
.reduced-motion .horizon__sticky { position: static; height: auto; padding-block: var(--sp); }
.reduced-motion .step { opacity: 1; min-height: 0; padding-block: clamp(2rem, 5vw, 3.5rem); }
.reduced-motion .sol { min-height: 0; }
.reduced-motion .phase { grid-area: auto; opacity: 1; }
.reduced-motion .horizon__phases { grid-template-areas: none; gap: 2.5rem; }
.reduced-motion .how__sticky { position: static; }
.reduced-motion .scan-line { opacity: 0; }
.reduced-motion .threats li { opacity: 1; transform: none; }

/* ==========================================================================
   18 — AUDIT LOG, REQUEST PAGE
   ========================================================================== */

/* --- bioLock log file ---
   Recreated from the client's screenshot of the real SAP screen rather than
   placed as an image: it stays sharp, follows the theme, reads on a phone
   (the grid scrolls inside its own frame) and is real text for screen readers.
   The two tinted column groups carry the argument: what SAP logs, and what
   bioLock adds. */
.auditlog {
  margin-top: clamp(3.5rem, 7vw, 6rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
/* Heading beside its lede on desktop; the grid gets the full width below. */
.auditlog__head {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: end;
}
.auditlog__head .tbl__title { margin-bottom: 0; }
.auditlog__lede { font-size: 1rem; line-height: 1.6; color: var(--text-dim); }
.auditlog__lede strong { color: var(--text); font-weight: 600; }

.log2 {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 30px 70px -48px rgba(var(--shadow), .8);
}
.log2__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(var(--brand), .08);
  font-size: 1rem; font-weight: 700; font-style: italic; letter-spacing: -.02em;
}
.log2__note {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500; font-style: normal;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.log2__wrap { border: 0; border-radius: 0; background: none; }
.log2__tbl { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .84rem; }
.log2__tbl th, .log2__tbl td {
  padding: .55rem .7rem;
  text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
.log2__tbl thead th { font-weight: 600; color: var(--text-dim); background: rgba(var(--ink), .025); }
.log2__groups th {
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--warn-text);
  background: none;
  border-bottom: 2px solid rgba(var(--warn), .45);
}
.log2__tbl tbody tr:last-child td { border-bottom: 0; }
.log2__tbl td { color: var(--text); }

/* The two column groups the section is about. */
.log2__g-sap, .log2__sap { background: rgba(var(--ink), .045); }
.log2__groups .log2__g-bio,
.log2__tbl thead tr:not(.log2__groups) th:nth-child(n+3):nth-child(-n+5),
.log2__bio { background: rgba(var(--brand), .08); }
.log2__groups .log2__g-bio { color: var(--blue-text); border-bottom-color: var(--blue); }
.log2__ghost { color: var(--text-faint); font-style: italic; }

.log2__n { text-align: center; font-weight: 600; }
.log2__n--ok, .log2__st--ok   { background: rgba(var(--ok), .12); color: var(--ok-text); }
.log2__n--no, .log2__st--no   { background: rgba(227, 160, 60, .14); }
.log2__n--bad, .log2__st--bad { background: rgba(var(--warn), .14); color: var(--warn-text); }

.log2__legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--text-dim);
}
.log2__key { display: inline-flex; align-items: center; gap: .5rem; }
.log2__key::before { content: ""; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--line); }
.log2__key--sap::before { background: rgba(var(--ink), .08); }
.log2__key--bio::before { background: rgba(var(--brand), .2); border-color: var(--line-blue); }


/* --- Request page --- */
.page-request .header { background: rgba(var(--paper), .72); border-bottom-color: var(--line); }

.req {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: var(--sp);
}
.req__head { max-width: 46rem; }
.req__title {
  margin-top: 1.2rem;
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.9rem);
  font-weight: 600; line-height: 1.04; letter-spacing: -.04em;
  text-wrap: balance;
}
.req__lede {
  margin-top: 1.2rem; max-width: 44ch;
  font-size: clamp(1.02rem, .96rem + .32vw, 1.14rem); line-height: 1.6;
  color: var(--text-dim);
}

.req__form {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.req__form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.req__legend {
  margin-bottom: 1rem; padding: 0;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.req__types { position: sticky; top: calc(var(--header-h) + 1.5rem); }

/* Request-type cards: native radios, visually replaced by the card. */
.opts { display: grid; gap: .75rem; }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt__card {
  display: grid; gap: .3rem;
  padding: 1.1rem 1.25rem 1.2rem 3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
  position: relative;
}
.opt__card::before {
  content: ""; position: absolute; left: 1.15rem; top: 1.3rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  transition: border-color .3s, box-shadow .3s;
}
.opt:hover .opt__card { border-color: var(--line-strong); }
.opt input:checked + .opt__card { border-color: var(--blue); background: rgba(var(--brand), .06); box-shadow: 0 0 0 1px var(--blue); }
.opt input:checked + .opt__card::before { border-color: var(--blue); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--blue); }
.opt input:focus-visible + .opt__card { outline: 2px solid var(--blue); outline-offset: 3px; }
.opt__time {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text);
}
.opt__name { font-size: 1.1rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.25; }
.opt__desc { font-size: .9rem; line-height: 1.5; color: var(--text-dim); }

.req__fields {
  padding: clamp(1.4rem, 3vw, 2.25rem) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius);
  background: var(--surface);
}
.req__fields > .req__legend { float: left; width: 100%; }
.req__hint { clear: both; margin-bottom: 1.25rem; font-size: .84rem; color: var(--text-faint); }
/* The spam trap: off screen rather than display:none, because some bots skip
   anything hidden. No human meets it, including with a screen reader, since
   the wrapper is aria-hidden. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.req__star { color: var(--warn-text); }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; }
.field { display: grid; gap: .45rem; align-content: start; }
.field--wide { grid-column: 1 / -1; }
.field label, .field__label { font-size: .88rem; font-weight: 600; letter-spacing: -.01em; color: var(--text); padding: 0; }
.field__opt { margin-left: .3rem; font-weight: 400; font-size: .78rem; color: var(--text-faint); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg-0);
  color: var(--text);
  font: inherit; font-size: .95rem;
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237A8794' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
.field ::placeholder { color: var(--text-faint); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--brand), .18);
}
.field [aria-invalid="true"] { border-color: var(--warn-text); box-shadow: 0 0 0 3px rgba(var(--warn), .12); }

.req__interest { margin-top: 1.5rem !important; }
.req__interest .field__label { display: block; margin-bottom: .75rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .84rem; color: var(--text-dim);
  transition: color .25s, border-color .25s, background-color .25s;
}
.chip:hover span { border-color: var(--line-strong); color: var(--text); }
.chip input:checked + span { color: var(--blue-text); border-color: var(--line-blue); background: rgba(var(--brand), .08); }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.req__fields > .field--wide { margin-top: 1.5rem; }
.req__error {
  margin-top: 1.25rem; padding: .75rem 1rem;
  border: 1px solid rgba(var(--warn), .35); border-radius: 8px;
  background: rgba(var(--warn), .06);
  font-size: .9rem; color: var(--warn-text);
}
.req__submit { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.req__note { font-size: .84rem; color: var(--text-faint); }
.req__done {
  margin-top: 1.25rem; padding: .85rem 1rem;
  border: 1px solid rgba(var(--ok), .35); border-radius: 8px;
  background: rgba(var(--ok), .07);
  font-size: .9rem; color: var(--text);
}
.req__done a { color: var(--blue-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.direct {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: clamp(1.25rem, 4vw, 4rem); align-items: start;
}
.direct__title { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.direct__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.direct__list li { display: grid; gap: .35rem; }
.direct__k {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint);
}
.direct__v {
  justify-self: start;
  padding-block: .5rem;   /* 40px+ touch target */
  font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); font-weight: 600; letter-spacing: -.02em;
  color: var(--blue-text);
  overflow-wrap: anywhere;
}
.direct__v:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1024px) {
  .auditlog__head { grid-template-columns: minmax(0, 1fr); }
  .req__form, .direct { grid-template-columns: minmax(0, 1fr); }
  .req__types { position: static; }
  .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .opts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fields, .direct__list { grid-template-columns: minmax(0, 1fr); }
  .req__submit .btn { width: 100%; justify-content: center; }
}

/* --- Press: third-party proof under the timeline --- */
.press {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.press + .press { margin-top: clamp(1rem, 2vw, 1.5rem); }
.press__main .cred__link + .cred__link { margin-left: clamp(1.25rem, 3vw, 2rem); }
.press__src {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue-text);
}
.press__title {
  margin-top: .8rem;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.2;
}
.press__text { margin-top: .75rem; max-width: 52ch; font-size: .98rem; line-height: 1.6; color: var(--text-dim); }
.press__quote {
  margin: 0;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 2px solid var(--blue);
}
.press__quote p {
  font-size: clamp(1.1rem, .98rem + .5vw, 1.4rem);
  font-weight: 500; letter-spacing: -.02em; line-height: 1.4;
  color: var(--text);
}
.press__quote footer { margin-top: .9rem; font-size: .88rem; color: var(--text-faint); }

@media (max-width: 900px) {
  .press { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   19 — ABOUT PAGE
   Same tokens, type scale, motion and components as the homepage; its own
   compositions. The homepage is product-led; this page is the story, so it
   leans editorial: bigger type, fewer elements per screen, more stillness.
   ========================================================================== */

/* --- Where you are: current page in the nav --- */
.nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute; left: .55rem; right: .55rem; bottom: 4px;
  height: 1px; background: var(--blue);
}
.mnav a[aria-current="page"] { color: var(--blue-text); }

.ab-accent { color: var(--blue-text); }

/* ------------------------------------------------------------------ 01 hero */
.ab-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 5rem));
  padding-bottom: clamp(4rem, 9vh, 7rem);
  overflow: clip;
  background: var(--bg-0);
}
.ab-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.ab-hero__copy { max-width: 44rem; }
.ab-hero__copy .eyebrow { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.ab-hero__title {
  font-size: clamp(2.4rem, .9rem + 4.5vw, 4.7rem);
  font-weight: 600;
  line-height: 1.015;
  letter-spacing: -.043em;
}
.ab-hero__mission {
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-left: 1.1rem;
  border-left: 2px solid var(--blue);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem);
  font-weight: 560;
  letter-spacing: -.022em;
  line-height: 1.35;
  color: var(--text);
}
.ab-hero__body {
  margin-top: 1.25rem;
  max-width: 50ch;
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
  line-height: 1.65;
  color: var(--text-dim);
}
.ab-hero__more { margin-top: clamp(1.8rem, 3.5vw, 2.5rem); }
.ab-hero__down { transform: rotate(90deg); }
.ab-hero__more:hover .ab-hero__down { transform: rotate(90deg) translateX(4px); }

.ab-hero__visual { width: 100%; max-width: 600px; margin-inline: auto; }
.ab-orbit { width: 100%; height: auto; overflow: visible; }
.ab-ring { fill: none; stroke: rgba(var(--ink), .12); stroke-width: 1; }
.ab-ring--mid { stroke: rgba(var(--brand), .32); }
.ab-ring--outer { stroke: rgba(var(--ink), .07); }
.ab-dash { fill: none; stroke: rgba(var(--brand), .45); stroke-width: 1; stroke-dasharray: 2 11; }
.ab-node { fill: var(--blue); }
.ab-yr circle { fill: var(--blue); }
.ab-yr--now circle { fill: var(--blue); stroke: rgba(var(--brand), .3); stroke-width: 8; }
.ab-yr text {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .12em;
  fill: var(--text-dim);
}
.ab-yr--now text { fill: var(--blue-text); }

.js:not(.reduced-motion) .ab-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js:not(.reduced-motion) [data-ab-year],
.js:not(.reduced-motion) .ab-node { opacity: 0; }

/* ------------------------------------------------- 02 the company behind it */
.ab-company { padding-block: var(--sp-lg); background: var(--bg-0); }
.ab-company__statement {
  margin-top: 1.4rem;
  font-size: clamp(2.2rem, 1rem + 4vw, 4.6rem);
  font-weight: 560;
  line-height: 1.04;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.ab-company__grid {
  margin-top: clamp(3.5rem, 7vw, 6.5rem);
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

/* Product -> company: the relationship drawn, not described. */
.lockup {
  margin: 0;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 30px 70px -48px rgba(var(--shadow), .7);
}
.lockup__product img { width: clamp(140px, 13vw, 190px); height: auto; }
.lockup__cap {
  display: block;
  margin-top: .75rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.lockup__link { display: flex; align-items: center; gap: 1.1rem; padding-block: 1.1rem; }
.lockup__line {
  width: 1px; height: 4.5rem;
  margin-left: 1.3rem;
  background: linear-gradient(180deg, var(--blue), rgba(var(--brand), .15));
  transform-origin: top;
}
.lockup__via {
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-text);
}
.lockup__name {
  display: block;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.15;
}

.ab-company__copy p { font-size: 1.04rem; line-height: 1.7; color: var(--text-dim); max-width: 54ch; }
.ab-company__copy p + p { margin-top: 1.2rem; }
.ab-company__copy .ab-lead {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  line-height: 1.45; letter-spacing: -.022em;
  color: var(--text);
}

/* --------------------------------------------------------------- 03 story */
.ab-story { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.tl {
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 6vw, 6rem);
  /* no align-items: the stage column must stretch so its child can stick */
}
/* The mark owns the upper part of the stage and the year the lower, so a
   long year ("Today") never runs into the orbit. */
.tl__stage {
  position: sticky;
  top: calc(var(--header-h) + 3vh);
  height: min(calc(100svh - var(--header-h) - 6vh), 760px);
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 2.25rem;
}
.tl__count {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; color: var(--text-faint);
}
.tl__count span { color: var(--blue-text); }
.tl__mark { width: min(78%, 50vh); height: auto; overflow: visible; }

/* The year: very large, and it changes the way an odometer does. */
.tl__years {
  position: absolute; left: 0; bottom: 2%;
  width: 100%; height: 1.05em;
  font-size: clamp(5rem, 2.4rem + 7.4vw, 11.5rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.06em;
  pointer-events: none;
}
.tl__year {
  position: absolute; left: -.04em; bottom: 0;
  color: var(--text);
  opacity: 0;
  transform: translateY(22%);
  transition: opacity .55s var(--ease-out), transform .9s var(--ease-out);
}
.tl__year.is-active { opacity: 1; transform: none; }
.tl__year.is-past   { opacity: 0; transform: translateY(-22%); }
.tl__year small {
  position: absolute; left: .08em; bottom: 100%;
  font-family: var(--font-mono); font-size: .12em; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-text);
}

/* The mark accumulates: each milestone adds a layer, the newest is brightest. */
.tl__layer {
  opacity: 0;
  transform: scale(.94);
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-out);
}
.tl__stage[data-tl-state="1"] .tl__layer:nth-child(-n+1),
.tl__stage[data-tl-state="2"] .tl__layer:nth-child(-n+2),
.tl__stage[data-tl-state="3"] .tl__layer:nth-child(-n+3),
.tl__stage[data-tl-state="4"] .tl__layer:nth-child(-n+4) { opacity: .42; transform: none; }
.tl__stage[data-tl-state="0"] [data-layer="0"],
.tl__stage[data-tl-state="1"] [data-layer="1"],
.tl__stage[data-tl-state="2"] [data-layer="2"],
.tl__stage[data-tl-state="3"] [data-layer="3"],
.tl__stage[data-tl-state="4"] [data-layer="4"] { opacity: 1; transform: none; }

.tl-ring   { fill: none; stroke: rgba(var(--ink), .3); stroke-width: 1.2; }
.tl-core   { fill: var(--blue); }
.tl-frame  { fill: none; stroke: rgba(var(--brand), .35); stroke-width: 1; }
.tl-brackets { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; }
.tl-badge  { fill: var(--surface); stroke: rgba(var(--ok), .6); stroke-width: 1.2; }
.tl-check  { fill: none; stroke: var(--ok-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tl-fp .fp-r { stroke: rgba(var(--brand), .6); stroke-width: 1.9; }
.tl-fp .fp-d { stroke: rgba(var(--brand), .38); stroke-width: 1.7; }
.tl-fp .fp-m { stroke: rgba(var(--brand), .7); stroke-width: 2.2; }
.tl-link   { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 3 6; }
.tl-node   { fill: var(--blue); }
.tl-halo   { fill: none; stroke: rgba(var(--brand), .35); }
.tl-orbit  { fill: none; stroke: rgba(var(--brand), .4); stroke-dasharray: 2 9; }
.tl-sat    { fill: var(--blue); }

/* Milestones */
.tl__steps { position: relative; padding-left: 2.75rem; }
.tl__rail {
  position: absolute; left: .5rem; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
.tl__rail-fill {
  position: absolute; inset: 0;
  background: var(--blue);
  transform-origin: top;
}
.js:not(.reduced-motion) .tl__rail-fill { transform: scaleY(0); }
.tl__step {
  position: relative;
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 2rem;
  opacity: .28;
  transition: opacity .6s var(--ease-out);
}
.tl__step.is-active { opacity: 1; }
.tl__step::before {
  content: "";
  position: absolute; left: calc(-2.75rem + .5rem - 5px); top: 50%;
  width: 11px; height: 11px; margin-top: -5px;
  border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: var(--bg-1);
  transition: background-color .4s, box-shadow .4s;
}
.tl__step.is-active::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(var(--brand), .14); }
.tl__tag {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-text);
}
.tl__title {
  margin-top: 1rem;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 600; letter-spacing: -.035em; line-height: 1.1;
}
.tl__text { margin-top: 1rem; max-width: 36ch; font-size: 1.05rem; line-height: 1.6; color: var(--text-dim); }
.tl__step .cred__link { align-self: flex-start; }
.tl__year-inline { display: none; }

/* -------------------------------------------------------------- 04 origin */
.ab-origin { background: var(--bg-0); padding-block: 0; }
.ab-origin__pin { padding-block: var(--sp-lg); }
.ab-origin__grid {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.ab-origin__title { margin-top: 1.3rem; }
.ab-origin__text { margin-top: 1.4rem; max-width: 40ch; font-size: 1.04rem; line-height: 1.65; color: var(--text-dim); }
.ab-origin__steps { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line); }
.ab-origin__steps li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text-faint);
  transition: color .5s var(--ease-out);
}
.ab-origin__k { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ab-origin__v { font-size: .98rem; font-weight: 500; letter-spacing: -.012em; }
.ab-origin__steps li.is-active { color: var(--text); }
.ab-origin__steps li.is-active .ab-origin__k { color: var(--blue-text); }

/* The map is held while the scroll tells the story — but only when about.js
   has measured that the whole panel fits the screen (.is-pinned). On a short
   viewport the section scrolls normally and the map animates once instead. */
@media (min-width: 1025px) {
  .ab-origin.is-pinned { height: 260vh; }
  .ab-origin.is-pinned .ab-origin__pin {
    position: sticky; top: 0;
    height: 100svh;
    display: flex; align-items: center;
    padding-block: calc(var(--header-h) + 1rem) 2rem;
  }
  .ab-origin.is-pinned .ab-origin__pin > .container { width: 100%; }
}

.ab-map { position: relative; }
.wm { display: block; width: 100%; height: auto; overflow: visible; }
.wm__dots { stroke: rgba(var(--ink), .17); stroke-width: 3; stroke-linecap: round; }
.wm__dots.wm__dots--lit { stroke: var(--blue); }
.wm__arc { fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-linecap: round; }
.wm__node { fill: var(--blue); }
.wm__halo { fill: none; stroke: rgba(var(--brand), .35); }
.wm__core { fill: var(--blue); }
.wm__ring { fill: none; stroke: var(--blue); stroke-width: 1.2; }
.wm__pulse { fill: none; stroke: var(--blue); stroke-width: 1.2; opacity: 0; }
.wm__label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  fill: var(--text-dim);
}
.wm__label--origin { font-size: 12px; fill: var(--blue-text); }
/* A halo in the ground colour keeps labels legible over the dot field. */
.wm__label {
  paint-order: stroke;
  stroke: var(--bg-0);
  stroke-width: 5px;
  stroke-linejoin: round;
}
[data-theme="light"] .wm__dots:not(.wm__dots--lit) { stroke: rgba(var(--ink), .2); }

/* --------------------------------------------------------------- 05 reach */
.ab-reach { padding-block: var(--sp-lg); background: var(--bg-1); border-block: 1px solid var(--line-soft); text-align: center; }
.ab-reach__eyebrow { justify-content: center; }
.ab-reach__statement {
  margin-top: 1.5rem;
  font-size: clamp(2.8rem, .9rem + 6.2vw, 7.2rem);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.05em;
}

.continents {
  position: relative;
  max-width: 72rem;
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  display: flex;
}
.continents__line {
  position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 4.5px;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--brand), .2), var(--blue), rgba(var(--brand), .2));
  transform-origin: left;
}
.continents li {
  position: relative;
  flex: 1;
  padding-top: 2rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
  transition: color .5s var(--ease-out);
}
.continents li::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: var(--bg-1);
  transition: background-color .5s, box-shadow .5s;
}
.continents li.is-on { color: var(--text); }
.continents li.is-on::before { background: var(--blue); box-shadow: 0 0 0 5px rgba(var(--brand), .14); }

.ab-reach__foot {
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  text-align: left;
}
.ab-reach__sub {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
  font-weight: 560; letter-spacing: -.032em; line-height: 1.15;
}
.ab-reach__copy p { font-size: 1.04rem; line-height: 1.65; color: var(--text-dim); max-width: 52ch; }
.ab-reach__points { margin-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.ab-reach__points li {
  padding: .8rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem; font-weight: 500; letter-spacing: -.012em;
}

/* ------------------------------------------------------------- 06 partner */
.ab-partner { background: var(--bg-0); padding-block: var(--sp-lg); }
.pair {
  max-width: 48rem;
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.pair__tile {
  height: clamp(7rem, 11vw, 9.5rem);
  display: grid; place-items: center;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 30px 70px -50px rgba(var(--shadow), .7);
}
.pair__tile img { width: clamp(120px, 12vw, 168px); height: auto; }
.pair__word {
  max-width: 14ch;
  font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15;
  text-align: center; text-wrap: balance;
  color: var(--text);
}
.pair__join { position: relative; width: clamp(3.5rem, 9vw, 7rem); height: 100%; display: grid; place-items: center; }
.pair__line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--blue); transform-origin: center; }
.pair__x {
  position: relative;
  width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-blue);
  background: var(--bg-0);
  color: var(--blue-text);
  font-size: 1.1rem; line-height: 1;
}
.ab-partner__lead {
  max-width: 46ch;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  text-align: center;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.5; letter-spacing: -.015em;
}
.milestones { max-width: 40rem; margin: clamp(2rem, 4vw, 3rem) auto 0; border-top: 1px solid var(--line); }
.milestones li {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.milestones__k { font-family: var(--font-mono); font-size: .76rem; font-weight: 500; letter-spacing: .14em; color: var(--blue-text); }
.milestones__v { font-size: 1rem; color: var(--text-dim); }
.milestones__link {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-left: .6rem;
  font-size: .82rem; font-weight: 600;
  color: var(--blue-text); white-space: nowrap;
}
.milestones__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-partner__also { margin-top: 2rem; text-align: center; font-size: .92rem; color: var(--text-faint); }
.ab-partner__also-k {
  margin-right: .75rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}

/* -------------------------------------------------------------- 07 belief */
.ab-belief { background: var(--bg-1); border-block: 1px solid var(--line-soft); padding-block: 0; }
.ab-belief__pin { padding-block: var(--sp-lg); }
@media (min-width: 1025px) {
  .ab-belief.is-pinned { height: 210vh; }
  .ab-belief.is-pinned .ab-belief__pin {
    position: sticky; top: 0;
    height: 100svh;
    display: flex; align-items: center;
    padding-block: calc(var(--header-h) + 1rem) 2rem;
  }
  .ab-belief.is-pinned .ab-belief__pin > .container { width: 100%; }
}
.ab-belief__lede {
  margin-top: 1.2rem;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  color: var(--text-dim);
}
.statement.ab-belief__statement {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(2.6rem, .9rem + 5.6vw, 6.6rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.ab-belief__foot {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
/* Three equal cells divided by hairlines, each with its step number. The
   words on either side of the swap differ in length (Credential / Verify), so
   nothing is aligned to a word's width. */
.swap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  font-family: var(--font-mono);
  font-size: clamp(1rem, .75rem + .9vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.swap__cell { min-width: 0; padding-left: clamp(.9rem, 1.6vw, 1.4rem); border-left: 1px solid var(--line); }
.swap__cell:first-child { padding-left: 0; border-left: 0; }
.swap__i {
  display: block; margin-bottom: .6rem;
  font-size: .44em; letter-spacing: .18em; color: var(--text-faint);
}
.swap__slot { position: relative; display: grid; justify-items: start; overflow: hidden; line-height: 1.35; }
.swap__a, .swap__b { grid-area: 1 / 1; display: block; white-space: nowrap; }
.swap__a { color: var(--text-faint); }
.swap__b { color: var(--blue-text); }
.js:not(.reduced-motion) .swap__b { transform: translateY(110%); }
.reduced-motion .swap__a { transform: translateY(-110%); }
.reduced-motion .swap__b { transform: none; }
.ab-belief__copy p { font-size: 1.04rem; line-height: 1.7; color: var(--text-dim); }
.ab-belief__copy p + p { margin-top: 1rem; }
.ab-belief__copy strong { font-weight: 600; color: var(--text); }

/* ---------------------------------------------------------------- 08 what */
.ab-what { background: var(--bg-0); }
.ab-what .sec-head--split { align-items: start; }
.aflow {
  --p: 0;
  --flow-fade: 1;
  position: relative;
  margin-top: clamp(2rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.aflow__track {
  position: absolute; left: 10%; right: 10%; top: 7px;
  height: 1px;
  background: var(--line-strong);
}
.aflow__pulse {
  position: absolute; top: 0; left: calc(var(--p) * 100%);
  width: 90px; height: 2px;
  transform: translate(-100%, -50%);
  background: linear-gradient(90deg, rgba(var(--brand), 0), var(--blue));
  opacity: var(--flow-fade);
}
.aflow__pulse::after {
  content: "";
  position: absolute; right: -3px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(var(--brand), .18);
}
.aflow__node {
  position: relative;
  display: grid; justify-items: center;
  text-align: center;
}
.aflow__dot {
  position: relative; z-index: 1;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-0);
  transition: background-color .45s, border-color .45s, box-shadow .45s;
}
.aflow__node.is-lit .aflow__dot { border-color: var(--blue); background: var(--blue); box-shadow: 0 0 0 5px rgba(var(--brand), .14); }
.aflow__k { margin-top: 1.1rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: var(--text-faint); }
.aflow__v {
  margin-top: .45rem;
  font-size: clamp(.98rem, .9rem + .3vw, 1.12rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.25;
  color: var(--text-dim);
  transition: color .45s;
}
.aflow__node.is-lit .aflow__v { color: var(--text); }
.ab-what__more { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ----------------------------------------------------------- 09 experience */
.ab-exp { padding-block: var(--sp-lg); background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.ab-exp__title { margin-top: 1.3rem; }
.marks {
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem 0;
}
.mark { padding-inline: clamp(1rem, 2.2vw, 2.25rem); border-left: 1px solid var(--line-soft); }
.mark:first-child { padding-left: 0; border-left: 0; }
.mark:last-child { padding-right: 0; }
.mark__k {
  display: block;
  font-size: clamp(2.6rem, .8rem + 3.6vw, 4.6rem);
  font-weight: 200;
  letter-spacing: -.05em;
  line-height: 1.05;
  color: var(--text);
}
.mark--global .mark__k { color: var(--blue-text); text-transform: uppercase; letter-spacing: -.02em; font-weight: 300; }
.mark__v { margin: .9rem 0 0; max-width: 15ch; font-size: .92rem; line-height: 1.45; color: var(--text-dim); }

/* ------------------------------------------------------------------ 10 cta */
.ab-cta__text {
  max-width: 48ch;
  margin: clamp(1.4rem, 2.5vw, 2rem) auto 0;
  text-align: center;
  font-size: clamp(1.02rem, .96rem + .32vw, 1.14rem);
  line-height: 1.6;
  color: var(--text-dim);
}
.page-about .cta__actions { margin-top: clamp(2rem, 4vw, 3rem); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .ab-hero { min-height: auto; padding-bottom: clamp(3rem, 6vh, 4.5rem); }
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
  .ab-hero__visual { max-width: 460px; }

  .ab-company__grid { grid-template-columns: minmax(0, 1fr); }
  .lockup { max-width: 30rem; }

  /* The timeline becomes a readable vertical story: no held stage, each
     milestone carries its own large year. */
  .tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tl__stage-col { display: none; }
  .tl__step { min-height: 0; padding-block: clamp(1.75rem, 4vw, 2.5rem); opacity: 1; justify-content: flex-start; }
  /* the node sits on the middle of the inline year: em here = the year's size */
  .tl__step::before { font-size: clamp(3rem, 1.8rem + 6vw, 5rem); top: calc(clamp(1.75rem, 4vw, 2.5rem) + .5em); }
  .tl__year-inline {
    display: block;
    font-size: clamp(3rem, 1.8rem + 6vw, 5rem);
    font-weight: 200; letter-spacing: -.05em; line-height: 1;
    color: var(--text);
  }
  .tl__year-inline small {
    display: block; margin-bottom: .4rem;
    font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--blue-text);
  }
  .tl__tag { display: none; }
  .tl__title { margin-top: .9rem; }

  .ab-origin__grid { grid-template-columns: minmax(0, 1fr); }
  .ab-reach__foot { grid-template-columns: minmax(0, 1fr); }
  .ab-belief__foot { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  /* Place labels would be ~4px tall on a phone: the step list carries them. */
  .wm__label:not(.wm__label--origin) { display: none; }
  .wm__label--origin { font-size: 24px; }

  .continents { flex-wrap: wrap; justify-content: center; gap: 1.5rem 0; max-width: 32rem; }
  .continents__line { display: none; }
  .continents li { flex: 0 0 50%; }

  .aflow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aflow__track { left: 7px; right: auto; top: 1.4rem; bottom: 1.4rem; width: 1px; height: auto; }
  .aflow__pulse {
    top: calc(var(--p) * 100%); left: 0;
    width: 2px; height: 70px;
    transform: translate(-50%, -100%);
    background: linear-gradient(180deg, rgba(var(--brand), 0), var(--blue));
  }
  .aflow__pulse::after { right: auto; left: 50%; top: auto; bottom: -3px; margin: 0 0 0 -3.5px; }
  .aflow__node {
    grid-template-columns: 15px auto minmax(0, 1fr);
    justify-items: start; align-items: center;
    gap: 0 1.1rem;
    text-align: left;
    padding-block: .9rem;
  }
  .aflow__k, .aflow__v { margin-top: 0; }

  .marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.5rem; }
  .mark, .mark:first-child, .mark:last-child { padding: 0; border-left: 0; }
  .mark--global { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .pair { grid-template-columns: minmax(0, 1fr); max-width: 20rem; }
  .pair__join { width: 100%; height: 3.25rem; }
  .pair__line { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .milestones li { grid-template-columns: 3.75rem 1fr; }
  /* "CREDENTIAL" has to fit a third of a phone's width */
  .swap { font-size: .84rem; letter-spacing: .06em; }
  .swap__cell { padding-left: .75rem; }
  .ab-partner__also-k { display: block; margin: 0 0 .4rem; }
}


/* ==========================================================================
   20 — LEGAL PAGES (Privacy Policy, Terms of Use)
   --------------------------------------------------------------------------
   Long documents nobody wants to read, so the job is to make them findable:
   a contents rail that tracks where you are, a comfortable measure, and the
   all-caps blocks kept conspicuous the way their purpose requires without
   letting them shout down the rest of the page.
   ========================================================================== */
.page-legal .header { background: rgba(var(--paper), .72); border-bottom-color: var(--line); }

.section--lgl-hero {
  padding-top: calc(var(--header-h) + clamp(2.75rem, 7vh, 5rem));
  padding-bottom: 0;
}
.lgl__title {
  margin-top: .7rem;
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.6rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.04;
}
.lgl__dates {
  margin-top: 1.15rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

.section--lgl { padding-top: clamp(2.5rem, 5vw, 4rem); }
.lgl {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

/* --- Contents rail --- */
.lgl__toc {
  position: sticky;
  top: calc(var(--header-h) + 1.75rem);
  max-height: calc(100vh - var(--header-h) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lgl__toc-h {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
/* The rail is a <details>: a disclosure on a phone, always open on a desktop,
   where the summary has to read as a label rather than as a control. */
.lgl__toc summary { cursor: pointer; }
.lgl__toc summary::-webkit-details-marker { display: none; }
.lgl__toc summary::marker { content: ""; }
@media (min-width: 1025px) {
  .lgl__toc summary { cursor: default; pointer-events: none; }
}
.lgl__toc ol {
  margin: .9rem 0 0; padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
.lgl__toc a {
  display: block;
  padding: .4rem 0 .4rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: .82rem; line-height: 1.35;
  color: var(--text-dim);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.lgl__toc a:hover { color: var(--text); border-left-color: var(--line-strong); }
.lgl__toc a.is-current { color: var(--blue-text); border-left-color: var(--blue-text); }

/* --- The document --- */
.lgl__body { max-width: 44rem; }
.lgl__sec { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.lgl__sec + .lgl__sec { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.lgl__sec--intro { padding-bottom: clamp(.5rem, 1.5vw, 1rem); }
.lgl__sec--intro p { font-size: 1.02rem; color: var(--text-dim); }
.lgl__h {
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  font-weight: 600; letter-spacing: -.03em; line-height: 1.25;
  color: var(--text);
}
.lgl__h3 {
  margin-top: 1.6rem;
  font-size: .98rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--text);
}
.lgl__body p { margin-top: .85rem; font-size: .96rem; line-height: 1.7; color: var(--text-dim); }
.lgl__body strong { font-weight: 600; color: var(--text); }
.lgl__body ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.lgl__body li {
  position: relative;
  margin-top: .42rem; padding-left: 1.1rem;
  font-size: .96rem; line-height: 1.6; color: var(--text-dim);
}
.lgl__body li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(var(--brand), .55);
}

/* The warranty and liability blocks are capitalised for a legal reason, so
   they keep their capitals; the panel carries the emphasis instead of size. */
.lgl__notice {
  margin-top: 1.2rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(var(--ink), .025);
}
.lgl__notice p { margin-top: 0; font-size: .8rem; line-height: 1.7; letter-spacing: .005em; }
.lgl__notice p + p { margin-top: .85rem; }

.lgl__contact {
  margin-top: 1.2rem;
  padding: clamp(1rem, 2vw, 1.35rem) clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--line-blue);
  border-radius: var(--radius);
  background: rgba(var(--brand), .04);
  font-style: normal;
}
.lgl__contact p { margin-top: .5rem; font-size: .95rem; }
.lgl__contact p:first-child { margin-top: 0; }
.lgl__contact span {
  display: block;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}
.lgl__contact a { color: var(--blue-text); text-decoration: none; }
.lgl__contact a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .lgl { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .lgl__toc {
    position: static;
    max-height: none;
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(var(--ink), .02);
  }
  .lgl__toc[open] { padding-bottom: 1.25rem; }
  .lgl__toc summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 24px;
  }
  .lgl__toc summary::after {
    content: "";
    width: 8px; height: 8px;
    border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s var(--ease);
  }
  .lgl__toc[open] summary::after { transform: translateY(1px) rotate(-135deg); }
  .lgl__toc ol { columns: 2; column-gap: 1.5rem; border-left: 0; }
  .lgl__toc a { padding: .45rem 0; border-left: 0; }
  .lgl__toc a.is-current { border-left: 0; }
  .lgl__body { max-width: none; }
}

@media (max-width: 560px) {
  .lgl__toc ol { columns: 1; }
}