/* =============================================================================
   ai-transformation.css — page-scoped stylesheet for models/ai-transformation.html
   -----------------------------------------------------------------------------
   The "operations telemetry" design, adopted 2026-08-11 (ADR-003) in place of the
   "neural glow" v1, which is archived under _rollback/2026-08-11-ai-transformation-v1/.
   It stays inside the TPL canon. Red is still the only accent, the faces are still
   Sofia Sans / Inter / JetBrains Mono, and the chrome and footer are production
   markup. What changes is the register: a live operations telemetry surface
   instead of a document with a glow behind it.

   SCOPING — every rule is prefixed `body.aix`. Nothing here can reach any other
   page, and tpl.css is never edited. This file is linked AFTER the tpl.css
   preload in the page head, so it sits later in the cascade even though tpl.css
   applies asynchronously (a preload flipped to rel=stylesheet is inserted at its
   own link's document position, not at load time).

   NOT part of the critical-CSS split. site/tools/build-critical-css.mjs reads
   tpl.css only; this file has nothing to regenerate.

   THEME — the page pins dark before first paint (the data-theme-default trick added
   in the prior session and inherited from v1), so dark is the design. Light is a full variant rather than
   an afterthought: every colour below is a token, and the light block near the
   top redefines the ground. The two canvases read data-theme directly and retone
   with it.

   MOTION — every animation is gated on both prefers-reduced-motion and the
   site's html.a11y-no-motion switch. The two scrubbed scenes (the pipeline pin
   and the hero floor) degrade to the same static layout the phone gets, so
   "motion off" is never a broken page, it is a shorter one.
   ============================================================================= */

/* ————— tokens ————————————————————————————————————————————————————————————— */
body.aix{
  --x-bg:#07070A;
  --x-bg-2:#0B0B11;
  --x-panel:rgba(255,255,255,.035);
  --x-panel-2:rgba(255,255,255,.065);
  --x-ink:#F6F5F2;
  --x-soft:#B9B8C2;
  --x-mute:#8A8994;
  --x-line:rgba(255,255,255,.10);
  --x-line-2:rgba(255,255,255,.20);
  --x-grid:rgba(255,255,255,.032);
  --x-red:#E63B3B;
  --x-red-fill:#D32F2F;        /* text-bearing fills only: white on this is 4.99:1 */
  --x-red-ink:#FF7A6B;          /* 7.8:1 on --x-bg */
  --x-ember:#FF6A45;
  --x-glow:rgba(230,59,59,.42);
  --x-mono:var(--font-mono);
  --x-e:cubic-bezier(.2,.8,.2,1);
  --x-e-out:cubic-bezier(.23,1,.32,1);

  background:var(--x-bg);
  color:var(--x-ink);
  /* horizontal-only clip: the hero type and several bands travel sideways on
     reveal, and `hidden` would kill the sticky pipeline pin. */
  overflow-x:clip;
}
html[data-theme="light"] body.aix{
  --x-bg:#F4F3EF;
  --x-bg-2:#EDEBE5;
  --x-panel:rgba(255,255,255,.72);
  --x-panel-2:rgba(255,255,255,.88);
  --x-ink:#131317;
  --x-soft:#4A4A54;
  --x-mute:#61606A;
  --x-line:rgba(0,0,0,.12);
  --x-line-2:rgba(0,0,0,.24);
  --x-grid:rgba(0,0,0,.045);
  --x-red-ink:#AB0000;
  --x-glow:rgba(171,0,0,.28);
}

/* the blueprint underlay — 12 fixed columns behind everything, the one piece of
   page furniture that never moves. Masked away top and bottom so it reads as a
   drafting surface rather than a table. */
body.aix::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,var(--x-grid) 1px,transparent 1px);
  background-size:calc(100vw / 12) 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
}

body.aix section{position:relative;z-index:1;border-bottom:none;padding:0}
/* SCOPED TO main ON PURPOSE. These are page-content defaults, and as bare element rules
   (`body.aix p`) they outranked tpl.css's own colours on everything that is NOT this page's
   content: the four nav-dropdown thesis lines, the footer column headings, the footer address
   and the certification lead all took this page's tokens instead of the ones written for the
   band they sit on. On the fixed red footer that measured 3.92:1 against the control page's
   7.69:1 — the band-inverse trap, where a token that flips meets a ground that does not. */
body.aix main p{color:var(--x-soft)}
body.aix main :is(h1,h2,h3,h4){color:var(--x-ink)}
body.aix ::selection{background:var(--x-red);color:#fff}

/* chrome + footer sit on the study's ground rather than the shared paper */
body.aix .crumb-bar{background:transparent;border-bottom:1px solid var(--x-line)}
body.aix .crumb a{color:var(--x-mute)}
body.aix .crumb a:hover{color:var(--x-ink)}
body.aix .crumb span[aria-hidden]{color:var(--x-mute)}
body.aix .crumb [aria-current]{color:var(--x-red-ink)}

/* ————— shared type ———————————————————————————————————————————————————————— */
.x-mono{
  font-family:var(--x-mono);font-weight:500;font-size:11px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  font-variant-ligatures:none;font-feature-settings:"calt" 0;
}
body.aix .x-eyebrow{
  font-family:var(--x-mono);font-weight:500;font-size:11.5px;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;color:var(--x-red-ink);
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
}
body.aix .x-eyebrow::after{
  content:"";flex:1;height:1px;max-width:180px;
  background:linear-gradient(90deg,var(--x-line-2),transparent);
}
body.aix .x-h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,5.4vw,72px);line-height:.94;letter-spacing:-.025em;
  margin:0 0 20px;text-wrap:balance;
}
body.aix .x-h2 em{font-style:normal;color:var(--x-red-ink)}
body.aix .x-sub{
  font-family:var(--font-body);font-size:clamp(16px,1.4vw,19px);line-height:1.6;
  color:var(--x-soft);max-width:62ch;margin:0;
}
body.aix .x-sec{padding:clamp(84px,9.5vw,128px) 0}
body.aix .x-head{margin-bottom:clamp(48px,6vw,80px)}


/* ————— buttons ———————————————————————————————————————————————————————————— */
body.aix .x-btn{
  --mx:0px;--my:0px;
  position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:2px;text-decoration:none;
  font-family:var(--x-mono);font-weight:500;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;white-space:nowrap;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform 220ms var(--x-e-out),background-color 200ms var(--x-e),
             border-color 200ms var(--x-e),color 200ms var(--x-e),box-shadow 220ms var(--x-e);
}
body.aix .x-btn svg{width:15px;height:15px;flex:none}
body.aix .x-btn--p{background:var(--x-red-fill);color:#fff;border:1px solid var(--x-red-fill)}
/* the hover deepens rather than brightens: #F04444 put white at 3.74:1, worse than the
   resting state. A filled button that gets harder to read on hover is backwards. */
body.aix .x-btn--p:hover{background:#C62828;box-shadow:0 12px 34px -12px var(--x-glow)}
body.aix .x-btn--g{background:transparent;color:var(--x-ink);border:1px solid var(--x-line-2)}
body.aix .x-btn--g:hover{border-color:var(--x-red);color:var(--x-red-ink)}
body.aix .x-btn:focus-visible{outline:2px solid var(--x-red-ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){body.aix .x-btn{transform:none;transition:none}}
html.a11y-no-motion body.aix .x-btn{transform:none}

/* ————— 01 · HERO —————————————————————————————————————————————————————————
   A perspective floor plane receding to a horizon, with order packets running
   its lines. The metaphor is literal: this page's own copy says the stack was
   built for our own floor, so the floor is what the hero draws. The canvas is
   the only pixel work on the page; everything on top of it is type. */
body.aix .x-hero{
  /* --hero-top is the hero's own measured distance from the top of the document,
     written once by the page script and refreshed on resize while the page is at
     scroll 0. It is the hero's position, NOT a re-measurement of the chrome, so it
     survives any change to the bars above it (crumb, study banner, notification).
     With JS off the fallback is 0px, which is the plain 100svh hero. */
  position:relative;min-height:calc(100svh - var(--hero-top,0px));
  display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;isolation:isolate;
}
body.aix .x-floor{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
/* Horizon bloom, sitting on the canvas's own vanishing point (64% / 44%), plus the two
   washes that give the chrome and the telemetry rail ground to sit on. The bottom wash
   is deliberately short: the floor plane is most legible in the near field, and an
   earlier 34% wash was erasing exactly the part of the drawing worth seeing. */
body.aix .x-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* left-weighted reading scrim, on the same principle as the shipping .hero-photo
       wash: the copy column is on the left, the drawing opens to the right, so the
       ground is darkened where the type is and left alone where it is not. */
    linear-gradient(100deg,rgba(7,7,10,.94) 0%,rgba(7,7,10,.74) 38%,rgba(7,7,10,.3) 60%,rgba(7,7,10,0) 78%),
    radial-gradient(50% 40% at 80% 58%,var(--x-glow),transparent 72%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,10,0) 22%),
    linear-gradient(0deg,rgba(7,7,10,.97) 0%,rgba(7,7,10,.8) 14%,rgba(7,7,10,0) 38%);
}
html[data-theme="light"] body.aix .x-hero::after{
  background:
    linear-gradient(100deg,rgba(244,243,239,.94) 0%,rgba(244,243,239,.74) 38%,rgba(244,243,239,.3) 60%,rgba(244,243,239,0) 78%),
    radial-gradient(50% 40% at 80% 58%,var(--x-glow),transparent 72%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(244,243,239,0) 22%),
    linear-gradient(0deg,rgba(244,243,239,.97) 0%,rgba(244,243,239,.8) 14%,rgba(244,243,239,0) 38%);
}
/* No chrome offset here: --hero-top has already taken the bars out of the hero's
   height, and they sit ABOVE it in flow rather than over it, so adding --chrome-top
   again would push the telemetry rail straight back off the first screen. */
body.aix .x-hero-in{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(24px,6vh,80px);padding-bottom:clamp(26px,3.4vw,44px);
}
body.aix .x-h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(44px,9.2vw,142px);line-height:.86;letter-spacing:-.035em;
  margin:0 0 clamp(20px,2.4vw,30px);
}
body.aix .x-h1 span{display:block}
body.aix .x-h1 .l2{color:var(--x-red-ink)}
/* Line-by-line mask reveal: each line rides up out of its own clipped box, so the
   type arrives rather than fades. One-shot, never replayed.
   The padding/negative-margin pair is load-bearing, not spacing: at line-height .86
   the clip box ends above the baseline's descenders, so "Applied to yours" loses the
   tails of its p and y. The padding extends the CLIP without moving the line. */
body.aix .x-h1 span{overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
body.aix .x-h1 span b{
  display:block;font-weight:inherit;
  transform:translateY(102%);
  transition:transform 900ms var(--x-e-out);
}
body.aix .x-h1 .l1 b{transition-delay:120ms}
body.aix .x-h1 .l2 b{transition-delay:230ms}
body.aix.x-lit .x-h1 span b{transform:none}
body.aix .x-hero-lede{
  font-family:var(--font-body);font-size:clamp(16px,1.5vw,20px);line-height:1.62;
  color:var(--x-soft);max-width:60ch;margin:0 0 clamp(26px,3vw,36px);
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--x-e) 420ms,transform 700ms var(--x-e) 420ms;
}
body.aix.x-lit .x-hero-lede{opacity:1;transform:none}
body.aix .x-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0;
  opacity:0;transform:translateY(14px);
  transition:opacity 700ms var(--x-e) 540ms,transform 700ms var(--x-e) 540ms}
body.aix.x-lit .x-hero-cta{opacity:1;transform:none}
body.aix .x-hero .x-eyebrow{
  opacity:0;transition:opacity 600ms var(--x-e) 60ms}
body.aix.x-lit .x-hero .x-eyebrow{opacity:1}

/* telemetry rail — the readouts along the bottom edge of the first screen */
body.aix .x-tele{
  position:relative;z-index:2;border-top:1px solid var(--x-line);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);
  opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--x-e) 660ms,transform 700ms var(--x-e) 660ms;
}
html[data-theme="light"] body.aix .x-tele{background:linear-gradient(180deg,rgba(0,0,0,.02),transparent)}
body.aix.x-lit .x-tele{opacity:1;transform:none}
body.aix .x-tele-row{display:grid;grid-template-columns:repeat(4,1fr)}
body.aix .x-tele-cell{
  padding:18px 0 20px;display:flex;flex-direction:column;gap:9px;
  border-left:1px solid var(--x-line);padding-left:20px;
}
body.aix .x-tele-cell:first-child{border-left:0;padding-left:0}
body.aix .x-tele-k{color:var(--x-mute)}
body.aix .x-tele-v{
  font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.4vw,32px);
  line-height:1;letter-spacing:-.02em;color:var(--x-ink);
  display:flex;align-items:baseline;gap:8px;
}
body.aix .x-tele-v i{font-style:normal;font-size:.5em;color:var(--x-red-ink);letter-spacing:.04em}
body.aix .x-spark{display:block;width:100%;height:20px}
body.aix .x-live{display:inline-flex;align-items:center;gap:8px;color:var(--x-red-ink)}
body.aix .x-led{
  width:7px;height:7px;border-radius:50%;background:var(--x-red);flex:none;
  box-shadow:0 0 0 0 var(--x-glow);animation:x-led 2.4s ease-out infinite;
}
@keyframes x-led{
  0%{box-shadow:0 0 0 0 rgba(230,59,59,.6)}
  70%{box-shadow:0 0 0 9px rgba(230,59,59,0)}
  100%{box-shadow:0 0 0 0 rgba(230,59,59,0)}
}
@media(max-width:860px){
  body.aix .x-tele-row{grid-template-columns:repeat(2,1fr)}
  body.aix .x-tele-cell:nth-child(3){border-left:0;padding-left:0}
  body.aix .x-tele-cell:nth-child(n+3){border-top:1px solid var(--x-line)}
  body.aix .x-spark{display:none}
}
@media(max-width:720px){
  /* On a phone the pinned pipeline un-pins, so #stack, #how and #proof all become plain
     stacks on the same near-black ground with nothing between them but 84px of padding.
     On desktop the pin itself separates them; here they need a drawn edge. */
  body.aix .x-sec + .x-sec,
  body.aix .px-scene + .x-sec,
  body.aix .x-sec + .px-scene{border-top:1px solid var(--x-line)}
  /* The accessibility launcher is a ~48px fixed button pinned to the bottom-left of
     every page. On the shipping heroes it lands on a photograph; here it would land
     on the first telemetry number. Ending the hero 84px above the fold clears it and
     turns the leftover strip into a scroll cue. */
  body.aix .x-hero{min-height:calc(100svh - var(--hero-top,0px) - 84px)}
  /* the eyebrow's trailing hairline has no room once the label itself wraps */
  body.aix .x-eyebrow{display:block}
  body.aix .x-eyebrow::after{display:none}
}

/* ————— 02 · TICKER ———————————————————————————————————————————————————————— */
body.aix .x-tick{
  overflow:hidden;border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);
  padding:15px 0;background:var(--x-bg-2);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
body.aix .x-tick-run{display:flex;width:max-content;animation:x-tick 46s linear infinite}
body.aix .x-tick-set{display:flex;align-items:center;gap:44px;padding-right:44px;flex:none}
body.aix .x-tick-set span{color:var(--x-mute);white-space:nowrap}
body.aix .x-tick-set span.on{color:var(--x-ink)}
body.aix .x-tick-set b{color:var(--x-red);font-weight:500}
@keyframes x-tick{to{transform:translate3d(-50%,0,0)}}
@media(prefers-reduced-motion:reduce){body.aix .x-tick-run{animation:none}}
html.a11y-no-motion body.aix .x-tick-run{animation:none}

/* ————— 03 · STACK ————————————————————————————————————————————————————————— */
body.aix .x-stack{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--x-line);
  border:1px solid var(--x-line)}
body.aix .x-node{
  position:relative;background:var(--x-bg);padding:clamp(26px,2.6vw,38px);
  display:flex;flex-direction:column;gap:18px;isolation:isolate;
  transition:background-color 320ms var(--x-e);
}
body.aix .x-node::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(120% 90% at 50% 0%,rgba(230,59,59,.13),transparent 68%);
  transition:opacity 380ms var(--x-e);
}
/* the sitewide red conic-sweep outline, same @property --sweep tpl.css defines
   for .mf-card / .wwd-card / .gtee-card */
body.aix .x-node::after{
  content:"";position:absolute;inset:0;padding:1px;border-radius:2px;pointer-events:none;
  --sweep:0deg;
  background:conic-gradient(from 135deg,transparent 0 calc(180deg - var(--sweep)),
    var(--x-red) calc(180deg - var(--sweep)) calc(180deg + var(--sweep)),
    transparent calc(180deg + var(--sweep)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:--sweep 280ms cubic-bezier(.2,0,0,1);
}
@media(hover:hover) and (pointer:fine){
  body.aix .x-node:hover::after{--sweep:180deg}
  body.aix .x-node:hover::before{opacity:1}
  body.aix .x-node:hover .x-node-viz{opacity:1}
}
body.aix .x-node:focus-within::after{--sweep:180deg}
body.aix .x-node-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
body.aix .x-node-id{color:var(--x-red-ink)}
body.aix .x-node-tag{color:var(--x-mute)}
body.aix .x-node-viz{
  width:100%;height:132px;display:block;opacity:.62;
  transition:opacity 400ms var(--x-e);
}
body.aix .x-node-viz .st{stroke:var(--x-line-2);fill:none;stroke-width:1}
body.aix .x-node-viz .sr{stroke:var(--x-red);fill:none;stroke-width:1.4}
body.aix .x-node-viz .fr{fill:var(--x-red)}
body.aix .x-node-viz .fm{fill:var(--x-line-2)}
body.aix .x-node-h{
  font-family:var(--font-display);font-weight:700;font-size:clamp(23px,2.1vw,29px);
  line-height:1.04;letter-spacing:-.02em;margin:0;
}
body.aix .x-node-p{font-size:15px;line-height:1.62;margin:0}
body.aix .x-node-meta{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--x-line);
  display:flex;justify-content:space-between;gap:12px;color:var(--x-mute);
}
body.aix .x-node-meta b{color:var(--x-ink);font-weight:500}
@media(max-width:960px){body.aix .x-stack{grid-template-columns:1fr}}

/* reveal choreography: the three panels arrive in sequence */
body.aix .x-stack .x-node{opacity:0;transform:translateY(28px);
  transition:opacity 700ms var(--x-e),transform 700ms var(--x-e),background-color 320ms var(--x-e)}
body.aix .x-stack.is-visible .x-node{opacity:1;transform:none}
body.aix .x-stack.is-visible .x-node:nth-child(2){transition-delay:110ms}
body.aix .x-stack.is-visible .x-node:nth-child(3){transition-delay:220ms}
@media(prefers-reduced-motion:reduce){
  body.aix .x-stack .x-node{opacity:1;transform:none;transition:none}
}
html.a11y-no-motion body.aix .x-stack .x-node{opacity:1;transform:none;transition:none}

/* ————— 04 · PIPELINE (pinned horizontal scrub) ————————————————————————————
   The four steps are stages of one run. On desktop the section pins and the
   track travels sideways under a fixed rail while an order packet walks it;
   `--p` (0..1) is the only thing JS writes. Below the 1025px scroll-mechanics
   breakpoint, and whenever motion is off, the scene un-pins into a plain
   vertical stack: same markup, same copy, no scrub. */
body.aix .px-scene{position:relative}
body.aix .px-stick{position:relative;overflow:hidden}
/* .wrap carries `margin:0 auto`, and an auto margin on a flex item beats the default
   `align-items:stretch` — inside the flex-column pin below, that shrank the heading and
   the rail to their own content width and knocked them off the page spine. */
body.aix .px-stick>.wrap{width:100%}
body.aix .px-head{padding-top:clamp(80px,9vw,120px)}
body.aix .px-viewport{overflow:hidden}
body.aix .px-track{display:flex;gap:24px;will-change:transform}
body.aix .px-panel{
  flex:none;position:relative;background:var(--x-panel);border:1px solid var(--x-line);
  border-radius:2px;padding:clamp(26px,2.4vw,36px);
  display:flex;flex-direction:column;gap:16px;
}
body.aix .px-panel::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--x-red),var(--x-ember));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 520ms var(--x-e-out);
}
body.aix .px-panel.on::before{transform:none}
body.aix .px-step{display:flex;align-items:center;gap:12px;color:var(--x-mute)}
body.aix .px-step b{color:var(--x-red-ink);font-weight:500}
body.aix .px-num{
  font-family:var(--font-display);font-weight:800;font-size:clamp(56px,6vw,92px);
  line-height:.8;letter-spacing:-.04em;color:var(--x-line-2);
  transition:color 420ms var(--x-e);
}
body.aix .px-panel.on .px-num{color:var(--x-red)}
body.aix .px-h{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,2.3vw,34px);
  line-height:1.02;letter-spacing:-.02em;margin:0;
}
body.aix .px-p{font-size:15.5px;line-height:1.62;margin:0}
body.aix .px-data{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--x-line);
  display:flex;align-items:center;gap:12px;color:var(--x-soft);
  font-family:var(--x-mono);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;
}
body.aix .px-k{
  color:var(--x-red-ink);border:1px solid var(--x-line-2);border-radius:2px;
  padding:5px 8px;flex:none;
}
/* the rail the packet walks */
body.aix .px-rail{position:relative;height:1px;background:var(--x-line);margin:clamp(28px,3vw,40px) 0 0}
/* both recomputed every scroll-linked frame for the whole 420vh pin -- transform keeps
   them off layout, matching the track's own translate3d two lines away in the JS. */
body.aix .px-rail-fill{
  position:absolute;inset:0 auto 0 0;width:100%;
  transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--x-red),var(--x-ember));
}
body.aix .px-packet{
  position:absolute;top:50%;left:0;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--x-ember);box-shadow:0 0 14px 2px var(--x-glow);
  /* transform is JS-set (translateX in px, computed from --p * the rail's measured width --
     a percentage here would resolve against THIS element's own 9px, not the rail) */
}
body.aix .px-mark{position:absolute;top:50%;width:1px;height:11px;margin-top:-5.5px;background:var(--x-line-2)}
body.aix .px-readout{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-top:14px;color:var(--x-mute);
}
body.aix .px-readout b{color:var(--x-ink);font-weight:500;font-variant-numeric:tabular-nums}

/* desktop: pin + scrub */
@media(min-width:1025px){
  body.aix .px-scene{height:620vh}
  body.aix .px-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
    justify-content:center;padding:calc(var(--chrome-top) + 24px) 0 40px}
  /* the pin already centres the scene; the stacked layout's head padding would push
     it back off centre */
  body.aix .px-head{padding-top:0}
  body.aix .px-panel{width:min(430px,34vw);min-height:min(430px,50vh)}
  body.aix .px-viewport{padding:0 clamp(20px,4vw,48px)}
}
/* mobile / tablet / motion-off: no pin, no scrub, plain stack */
@media(max-width:1024px){
  body.aix .px-track{flex-direction:column;transform:none;gap:16px}
  body.aix .px-num{color:var(--x-red)}
  body.aix .px-panel{width:auto}
  body.aix .px-rail,body.aix .px-readout{display:none}
  body.aix .px-panel::before{transform:none}
  body.aix .px-viewport{padding:0}
}
@media(prefers-reduced-motion:reduce){
  body.aix .px-num{color:var(--x-red)}
  body.aix .px-scene{height:auto!important}
  body.aix .px-stick{position:static;height:auto;padding:0}
  body.aix .px-track{flex-direction:column;transform:none;gap:16px}
  body.aix .px-panel{width:auto;min-height:0}
  body.aix .px-panel::before{transform:none;transition:none}
  body.aix .px-rail,body.aix .px-readout{display:none}
}
html.a11y-no-motion body.aix .px-num{color:var(--x-red)}
html.a11y-no-motion body.aix .px-scene{height:auto!important}
html.a11y-no-motion body.aix .px-stick{position:static;height:auto;padding:0}
html.a11y-no-motion body.aix .px-track{flex-direction:column;transform:none;gap:16px}
html.a11y-no-motion body.aix .px-panel{width:auto;min-height:0}
html.a11y-no-motion body.aix .px-panel::before{transform:none;transition:none}
html.a11y-no-motion body.aix .px-rail,html.a11y-no-motion body.aix .px-readout{display:none}

/* ————— 05 · MULTIPLIER ————————————————————————————————————————————————————
   100 cells. 26 of them carry a person; the other 74 are the output those 26
   produce on this stack. The claim is already the page's headline, so the grid
   does not invent a number, it draws the one we publish. */
body.aix .mult{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(40px,6vw,84px);align-items:center}
body.aix .mult-grid{
  display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(6px,.8vw,12px);
  max-width:640px;
}
body.aix .mult-cell{
  aspect-ratio:1;border-radius:1px;background:var(--x-panel-2);
  border:1px solid var(--x-line);
  transform:scale(.92);opacity:0;
  transition:transform 460ms var(--x-e-out),opacity 380ms var(--x-e),
             background-color 380ms var(--x-e),box-shadow 380ms var(--x-e);
  /* the wave: each cell carries its own index in --i, so the whole 100-cell
     stagger is one rule instead of 100 nth-child selectors */
  transition-delay:calc(var(--i,0) * 7ms);
}
body.aix .mult-grid.is-visible .mult-cell{transform:none;opacity:1}
body.aix .mult-cell.on{background:var(--x-red);border-color:var(--x-red)}
body.aix .mult-grid.is-visible .mult-cell.on{box-shadow:0 0 12px -2px var(--x-glow)}
@media(prefers-reduced-motion:reduce){
  body.aix .mult-cell{transform:none;opacity:1;transition:none;animation:none!important}
}
html.a11y-no-motion body.aix .mult-cell{transform:none;opacity:1;transition:none}
body.aix .mult-legend{display:flex;flex-direction:column;gap:26px}
body.aix .mult-key{display:flex;align-items:center;gap:12px;color:var(--x-soft)}
body.aix .mult-swatch{width:13px;height:13px;border-radius:1px;flex:none;border:1px solid var(--x-line)}
body.aix .mult-swatch.on{background:var(--x-red);border-color:var(--x-red)}
body.aix .mult-swatch.off{background:var(--x-panel-2)}
/* These four numbers carry .kpi-band/.kpi/.num so tpl.js's shared IntersectionObserver
   runs its count-up on them, exactly as on every other page. That also drags in the
   shipping .kpi plating (paper-100 tiles on a hairline grid), which is a light-page
   component and would print four pale slabs on this ground, so the plating is undone
   here and only the count-up behaviour is kept. */
body.aix .mult-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
  border-top:1px solid var(--x-line);padding-top:26px;background:none}
body.aix .mult-stat{background:none;padding:0}
body.aix .mult-stat span{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.03em;
  color:var(--x-ink);font-variant-numeric:tabular-nums;
}
body.aix .mult-stat small{display:block;margin-top:9px;color:var(--x-mute);
  font-family:var(--x-mono);font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:900px){
  body.aix .mult{grid-template-columns:1fr;gap:44px}
  body.aix .mult-grid{max-width:none}
}

/* ————— 06 · GUARANTEES ———————————————————————————————————————————————————— */
body.aix .gz{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
body.aix .gz-card{
  position:relative;padding:clamp(26px,2.6vw,36px);
  background:var(--x-panel);border:1px solid var(--x-line);border-radius:2px;
  display:flex;flex-direction:column;gap:16px;
  transition:transform 320ms var(--x-e),border-color 320ms var(--x-e);
}
body.aix .gz-card::after{
  content:"";position:absolute;inset:0;padding:1px;border-radius:2px;pointer-events:none;
  --sweep:0deg;
  background:conic-gradient(from 135deg,transparent 0 calc(180deg - var(--sweep)),
    var(--x-red) calc(180deg - var(--sweep)) calc(180deg + var(--sweep)),
    transparent calc(180deg + var(--sweep)));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:--sweep 280ms cubic-bezier(.2,0,0,1);
}
@media(hover:hover) and (pointer:fine){
  body.aix .gz-card:hover::after{--sweep:180deg}
  body.aix .gz-card:hover{transform:translateY(-4px)}
}
body.aix .gz-card:focus-within::after{--sweep:180deg}
body.aix .gz-i{color:var(--x-red-ink)}
body.aix .gz-card h3{
  font-family:var(--font-display);font-weight:700;font-size:clamp(21px,1.9vw,27px);
  line-height:1.08;letter-spacing:-.02em;margin:0;
}
body.aix .gz-card p{font-size:15px;line-height:1.62;margin:0}
body.aix .gz-tag{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--x-line);color:var(--x-mute);
}
body.aix .gz-sign{margin-top:26px;color:var(--x-mute);text-align:right}
@media(max-width:900px){body.aix .gz{grid-template-columns:1fr}}

/* ————— 07 · DIAGNOSTIC (fit) ——————————————————————————————————————————————
   The fit test as a check that runs. Four conditions resolve one after another
   as the band arrives; the last one is the sweet spot and resolves in red. */
body.aix .dg{border:1px solid var(--x-line);border-radius:2px;background:var(--x-bg-2);overflow:hidden}
body.aix .dg-bar{
  display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid var(--x-line);color:var(--x-mute);background:var(--x-panel);
}
body.aix .dg-bar .x-led{width:6px;height:6px}
body.aix .dg-bar b{color:var(--x-soft);font-weight:500}
body.aix .dg-row{
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:clamp(20px,2.2vw,28px) 20px;border-bottom:1px solid var(--x-line);
  opacity:0;transform:translateY(12px);
  transition:opacity 520ms var(--x-e),transform 520ms var(--x-e),background-color 320ms var(--x-e);
}
body.aix .dg-row:last-child{border-bottom:0}
body.aix .dg.is-visible .dg-row{opacity:1;transform:none}
body.aix .dg.is-visible .dg-row:nth-child(2){transition-delay:80ms}
body.aix .dg.is-visible .dg-row:nth-child(3){transition-delay:260ms}
body.aix .dg.is-visible .dg-row:nth-child(4){transition-delay:440ms}
body.aix .dg.is-visible .dg-row:nth-child(5){transition-delay:620ms}
@media(prefers-reduced-motion:reduce){body.aix .dg-row{opacity:1;transform:none;transition:none}}
html.a11y-no-motion body.aix .dg-row{opacity:1;transform:none;transition:none}
body.aix .dg-n{color:var(--x-mute)}
body.aix .dg-t{
  font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.75vw,25px);
  line-height:1.12;letter-spacing:-.015em;margin:0 0 7px;color:var(--x-ink);
}
body.aix .dg-d{font-size:14.5px;line-height:1.58;margin:0;color:var(--x-soft)}
body.aix .dg-s{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:2px;
  border:1px solid var(--x-line-2);color:var(--x-mute);white-space:nowrap;
  transition:color 380ms var(--x-e),border-color 380ms var(--x-e),background-color 380ms var(--x-e);
}
body.aix .dg.is-visible .dg-s{color:var(--x-ink);border-color:var(--x-line-2)}
body.aix .dg-row--key .dg-s{border-color:var(--x-red)}
body.aix .dg.is-visible .dg-row--key .dg-s{color:#fff;background:var(--x-red-fill);border-color:var(--x-red-fill)}
body.aix .dg-row--key{background:linear-gradient(90deg,rgba(230,59,59,.08),transparent 70%)}
body.aix .dg-s svg{width:13px;height:13px;flex:none}
@media(max-width:720px){
  body.aix .dg-row{grid-template-columns:1fr;gap:12px}
  body.aix .dg-n{display:none}
  body.aix .dg-s{justify-self:start}
}

/* ————— 08 · ROUTER ———————————————————————————————————————————————————————— */
body.aix .rt{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
body.aix .rt-list{display:flex;flex-direction:column;border-top:1px solid var(--x-line)}
/* transform, not padding-left: the same 14px of travel, but on the compositor instead of
   reflowing the whole row on every frame of the hover. */
body.aix .rt-row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:20px 4px;border-bottom:1px solid var(--x-line);text-decoration:none;
  color:var(--x-ink);transition:transform 320ms var(--x-e),color 220ms var(--x-e);
}
body.aix .rt-row:hover{transform:translateX(14px);color:var(--x-red-ink)}
body.aix .rt-row:focus-visible{outline:2px solid var(--x-red-ink);outline-offset:2px}
body.aix .rt-c{color:var(--x-mute);width:64px;flex:none;transition:color 220ms var(--x-e)}
body.aix .rt-row:hover .rt-c{color:var(--x-red-ink)}
body.aix .rt-n{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.7vw,24px);
  letter-spacing:-.015em;line-height:1.1}
body.aix .rt-d{display:block;font-family:var(--font-body);font-weight:400;font-size:14px;
  letter-spacing:0;color:var(--x-soft);margin-top:5px;line-height:1.5}
body.aix .rt-go{width:18px;height:18px;flex:none;color:var(--x-mute);transition:transform 320ms var(--x-e-out),color 220ms var(--x-e)}
body.aix .rt-row:hover .rt-go{transform:translateX(5px);color:var(--x-red-ink)}
@media(max-width:900px){body.aix .rt{grid-template-columns:1fr;gap:36px}}

/* ————— 09 · CTA ——————————————————————————————————————————————————————————— */
body.aix .x-cta{position:relative;overflow:hidden;padding:clamp(84px,9.5vw,128px) 0}
body.aix .x-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 108%,var(--x-glow),transparent 70%);
}
body.aix .x-ledger{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--x-line);border-radius:2px;margin:clamp(34px,4vw,48px) 0 0;
  list-style:none;padding:0;
}
body.aix .x-ledger li{padding:clamp(22px,2.4vw,32px);border-left:1px solid var(--x-line)}
body.aix .x-ledger li:first-child{border-left:0}
body.aix .x-ledger .n{display:block;color:var(--x-red-ink);margin-bottom:14px}
body.aix .x-ledger p{margin:0;font-size:15px;line-height:1.6}
@media(max-width:820px){
  body.aix .x-ledger{grid-template-columns:1fr}
  body.aix .x-ledger li{border-left:0;border-top:1px solid var(--x-line)}
  body.aix .x-ledger li:first-child{border-top:0}
}
body.aix .x-cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,44px)}

/* ————— section index rail (desktop) ——————————————————————————————————————— */
body.aix .x-rail{
  position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);
  z-index:40;display:none;flex-direction:column;gap:14px;align-items:flex-end;
  pointer-events:none;
}
@media(min-width:1200px){body.aix .x-rail{display:flex}}
body.aix .x-rail a{
  pointer-events:auto;display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--x-mute);transition:color 260ms var(--x-e);
}
body.aix .x-rail a:hover,body.aix .x-rail a.on{color:var(--x-ink)}
/* the label rides over whatever is beside it (the pinned pipeline bleeds a panel under
   it, the guarantees quilt reaches the same edge), so it carries its own plate rather
   than trusting the ground to be empty */
body.aix .x-rail-t{
  opacity:0;transform:translateX(6px);
  background:var(--x-bg);padding:5px 7px;border:1px solid var(--x-line);border-radius:2px;
  transition:opacity 260ms var(--x-e),transform 260ms var(--x-e);
}
/* Labels appear on hover/focus ONLY, never on the active item. The rail hugs the right
   edge, and two bands reach that edge themselves: the pinned pipeline bleeds its last
   panel under it and the guarantees quilt ends there. A label that shows itself sat on
   top of that copy. The active state is carried by the dash instead, which is inside
   the rail's own gutter and can never overlap anything. */
body.aix .x-rail a:hover .x-rail-t{opacity:1;transform:none}
body.aix .x-rail-d{width:22px;height:1px;background:var(--x-line-2);flex:none;
  transition:width 260ms var(--x-e-out),background-color 260ms var(--x-e)}
body.aix .x-rail a.on .x-rail-d{width:34px;background:var(--x-red)}
body.aix .x-rail a:focus-visible{outline:2px solid var(--x-red-ink);outline-offset:4px}
/* keyboard reaches the rail too, so the label has to answer to focus as well as hover */
body.aix .x-rail a:focus-visible .x-rail-t{opacity:1;transform:none}
body.aix .x-rail{transition:opacity 320ms var(--x-e),visibility 320ms}
body.aix .x-rail--gone{opacity:0;visibility:hidden}


/* ————— motion off ————————————————————————————————————————————————————————
   tpl.css guards motion component by component rather than with a blanket
   `* {transition:none}`, so anything this page animates has to bring its own
   guard. Both switches are honoured: the OS preference and the site's own
   html.a11y-no-motion toggle. Nothing here hides content, it only removes the
   travel — every element lands in its finished state immediately. */
@media(prefers-reduced-motion:reduce){
  body.aix .x-led{animation:none}
  body.aix .x-h1 span b{transform:none;transition:none}
  body.aix .x-hero-lede,body.aix .x-hero-cta,body.aix .x-tele,body.aix .x-hero .x-eyebrow{
    opacity:1;transform:none;transition:none}
  body.aix .gz-card:hover{transform:none}
  body.aix .gz-card,body.aix .x-node{transition:none}
  body.aix .x-node::before,body.aix .x-node::after,body.aix .gz-card::after{transition:none}
  body.aix .rt-row:hover{transform:none}
  body.aix .rt-row,body.aix .rt-go,body.aix .rt-c{transition:none}
  body.aix .rt-row:hover .rt-go{transform:none}
  body.aix .x-rail a,body.aix .x-rail-t,body.aix .x-rail-d,body.aix .x-rail{transition:none}
  body.aix .dg-s{transition:none}
}
html.a11y-no-motion body.aix .x-led{animation:none}
html.a11y-no-motion body.aix .x-h1 span b{transform:none;transition:none}
html.a11y-no-motion body.aix .x-hero-lede,
html.a11y-no-motion body.aix .x-hero-cta,
html.a11y-no-motion body.aix .x-tele,
html.a11y-no-motion body.aix .x-hero .x-eyebrow{opacity:1;transform:none;transition:none}
html.a11y-no-motion body.aix .gz-card:hover{transform:none}
html.a11y-no-motion body.aix .gz-card,
html.a11y-no-motion body.aix .x-node{transition:none}
html.a11y-no-motion body.aix .x-node::before,
html.a11y-no-motion body.aix .x-node::after,
html.a11y-no-motion body.aix .gz-card::after{transition:none}
html.a11y-no-motion body.aix .rt-row:hover{transform:none}
html.a11y-no-motion body.aix .rt-row,
html.a11y-no-motion body.aix .rt-go,
html.a11y-no-motion body.aix .rt-c{transition:none}
html.a11y-no-motion body.aix .rt-row:hover .rt-go{transform:none}
html.a11y-no-motion body.aix .x-rail a,
html.a11y-no-motion body.aix .x-rail-t,
html.a11y-no-motion body.aix .x-rail-d,
html.a11y-no-motion body.aix .x-rail{transition:none}
html.a11y-no-motion body.aix .dg-s{transition:none}

/* ————— print / no-JS safety ——————————————————————————————————————————————— */
@media(scripting:none){
  body.aix .x-h1 span b{transform:none}
  body.aix .x-hero-lede,body.aix .x-hero-cta,body.aix .x-tele,body.aix .x-hero .x-eyebrow{opacity:1;transform:none}
  body.aix .mult-cell,body.aix .dg-row,body.aix .x-stack .x-node{opacity:1;transform:none}
  body.aix .px-scene{height:auto}
  body.aix .px-stick{position:static;height:auto}
  body.aix .px-track{flex-direction:column;transform:none}
  body.aix .px-panel{width:auto}
}