/* ============================================================================
   Jetscale website: experience2.0
   ============================================================================

   The one stylesheet a page loads once it has moved to experience2.0. It
   opens with two files from design-system/, copied unedited between marker
   comments: `pnpm design-system:sync` refreshes them, and
   scripts/validate-v1.mjs fails when they drift. The web layer follows them.
   Its decisions and starting values are in docs/web-layer.md.
   ========================================================================== */

/* ==== design-system/tokens.css: begin, copied unedited (pnpm design-system:sync) ==== */
/* Jetscale Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #FAF9F7;
  --paper: #FFFFFF;
  --bar: #F3F1EC;
  --sunk: #F1EFEA;
  --chip: #EEECE7;
  --chip-hover: #E6E8EF;
  --line: #E6E3DD;
  --dash: #DCD9D3;
  --track: #E8E5DF;
  --control-line: #E3E5EE;
  --control-line-hover: #C9CCDB;
  --ink: #1E1E2D;
  --ink-2: #3A3A4C;
  --muted: #8B8FA3;
  --faint: #B8BBC9;
  --navy: #1300D8;
  --navy-2: #0900A6;
  --focus-field: #6A60E8;
  --blue-wash: #EEF1FF;
  --blue-wash-line: #DCE2FF;
  --blue-track: #E6EAFF;
  --periwinkle: #8790E8;
  --avatar-bg: #DCE4FF;
  --info-bg: #EEF0FF;
  --info-ink: #4B40E0;
  --mint: #E4F5D4;
  --mint-2: #D5EFC1;
  --mint-ink: #2F6A22;
  --green: #66C95A;
  --orange: #FFAE1F;
  --warn-bg: #FFF1DB;
  --warn-ink: #E0952A;
  --red: #FF6464;
  --bad-bg: #FFE5E5;
  --bad-ink: #D9443F;
  --send: #14123A;
  --send-hover: #26227A;
  --send-idle: #EEEFF4;
  --send-idle-ink: #A9ACBD;
  --toast: #1E1E2D;
  --toast-link: #B9B4FF;
  --scrim: rgba(20,20,45,.38);
  --chart-realized: #7DC870;
  --chart-progress: #CDEBC3;
  --chart-forecast: #FFD8A6;
  --intro-ground: #02001A;
  --intro-a: #07009A;
  --intro-b: #1200DE;
  --shadow-tile: 0 18px 40px rgba(40,30,120,.08), 0 2px 6px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.035);
  --shadow-modal: 0 24px 64px rgba(20,20,50,.25);
  --shadow-pop: 0 10px 30px rgba(30,30,90,.12);
  --shadow-tip: 0 6px 20px rgba(30,30,90,.14);
  --shadow-toast: 0 8px 24px rgba(0,0,0,.2);
  --shadow-composer: 0 4px 20px rgba(30,30,90,.05);
}
:root {
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-44: 44px;
  --space-72: 72px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-pill: 999px;
  --rail-width: 64px;
  --rail-button: 44px;
  --control-sm: 30px;
  --control-md: 34px;
  --control-lg: 38px;
  --field-height: 40px;
  --window-bar: 48px;
  --content-max: 1760px;
  --composer-max: 700px;
  --font-sans: "Poppins", system-ui, -apple-system, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-wordmark: "DM Sans", "Poppins", system-ui, sans-serif;
}
.text-page-title { font-family: var(--font-serif); font-size: 42px; line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; }
.text-hero-question { font-family: var(--font-serif); font-size: 40px; line-height: 1.2; font-weight: 400; letter-spacing: -0.02em; }
.text-figure-xl { font-family: var(--font-serif); font-size: 40px; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.text-figure-gauge { font-family: var(--font-serif); font-size: 38px; line-height: 1; font-weight: 400; letter-spacing: -0.01em; }
.text-figure-kpi { font-family: var(--font-serif); font-size: 36px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.text-detail-title { font-family: var(--font-serif); font-size: 30px; line-height: 1.15; font-weight: 400; letter-spacing: -0.02em; }
.text-figure-stat { font-family: var(--font-serif); font-size: 24px; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.text-dialog-title { font-family: var(--font-serif); font-size: 22px; line-height: 1.25; font-weight: 400; letter-spacing: -0.01em; }
.text-banner-title { font-family: var(--font-sans); font-size: 18px; line-height: 1.35; font-weight: 600; }
.text-row-title { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; font-weight: 600; }
.text-body { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }
.text-button { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.2; font-weight: 500; }
.text-small { font-family: var(--font-sans); font-size: 12px; line-height: 1.5; font-weight: 400; }
.text-caption { font-family: var(--font-sans); font-size: 11px; line-height: 1.45; font-weight: 400; }
.text-pill { font-family: var(--font-sans); font-size: 10.5px; line-height: 1.9; font-weight: 500; }
.text-eyebrow { font-family: var(--font-sans); font-size: 10.5px; line-height: 1.4; font-weight: 600; letter-spacing: 0.1em; }
.text-card-title { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; font-weight: 500; }
.text-meta { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; font-weight: 400; }
.text-column-head { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: 0.01em; }
.text-count { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.7; font-weight: 500; }
.text-intro-title { font-family: var(--font-serif); font-size: 60px; line-height: 1.1; font-weight: 400; letter-spacing: -0.02em; }
.text-intro-wordmark { font-family: var(--font-wordmark); font-size: 86px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; }
/* ==== design-system/tokens.css: end ==== */

/* ==== design-system/assets/Motion/motion.css: begin, copied unedited (pnpm design-system:sync) ==== */
/* Jetscale experience2.0 motion — brand and website layer. Load after tokens.css; pair with motion.js.
   Content stays visible without JavaScript: elements are only hidden once motion.js has added html.m-js. */
:root {
  --m-ease: cubic-bezier(.2,.7,.1,1);
  --m-in: .8s;          /* build-in duration */
  --m-rise: 18px;       /* build-in travel */
  --m-stagger: 110ms;   /* between siblings */
  --m-dot: #E2DFD8;     /* resting grid dot */
  --m-lavender: #E9E7FB; /* ground behind orbits */
}

/* ---------- build-in: fade up as the element scrolls into view ---------- */
.m-js [data-m="in"] {
  opacity: 0; transform: translateY(var(--m-rise));
  transition: opacity var(--m-in) var(--m-ease), transform var(--m-in) var(--m-ease);
  transition-delay: calc(var(--d, 0) * var(--m-stagger) + var(--o, 0ms));
}
.m-js [data-m="in"].is-in { opacity: 1; transform: none; }
.m-reset [data-m], .m-reset[data-m] { transition: none !important; animation: none !important; }

/* ---------- draw: an SVG path with pathLength="1" traces itself ---------- */
.m-js [data-m="draw"] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.m-js [data-m="draw"].is-in { animation: m-draw var(--dur, 1.6s) var(--m-ease) var(--dl, .3s) both; }
@keyframes m-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- grow: a bar fills from its start ---------- */
.m-js [data-m="grow"] { transform: scaleX(0); transform-origin: 0 50%; }
.m-js [data-m="grow"].is-in { animation: m-grow 1.1s var(--m-ease) var(--dl, .3s) both; }
@keyframes m-grow { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- light sweep across a navy surface ---------- */
.m-sheen { position: relative; overflow: hidden; }
.m-sheen::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  animation: m-sheen 7s var(--m-ease) 2s infinite;
}
@keyframes m-sheen { 0% { transform: translateX(0); } 30%, 100% { transform: translateX(360%); } }

/* ---------- nudge: a soft halo that asks for the click ---------- */
.m-nudge { animation: m-nudge 3s ease-in-out 2.4s infinite; }
@keyframes m-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(19,0,216,0); } 40% { box-shadow: 0 0 0 7px rgba(19,0,216,.12); } }

/* ---------- live: a ring spreading from a status dot ---------- */
.m-live { position: relative; }
.m-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid currentColor; animation: m-live 2.4s ease-out infinite; }
@keyframes m-live { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }

/* ---------- orbits: dots riding concentric rings (SVG) ---------- */
.m-orbits .ring { fill: none; stroke: #fff; stroke-width: 2; opacity: .85; }
.m-orbits .dot { fill: #fff; }
.m-orbits .dot.n { fill: var(--navy); }
.m-orbits .spin { animation: m-orbit var(--t, 80s) linear infinite; }
@keyframes m-orbit { to { transform: rotate(360deg); } }

/* ---------- tile cycle: tiles light up one after another ---------- */
[data-m="cycle"] > * { transition: transform .5s var(--m-ease), box-shadow .5s var(--m-ease); }
[data-m="cycle"] > .is-lit { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--navy), 0 26px 50px rgba(19,0,216,.14); }

@media (prefers-reduced-motion: reduce) {
  .m-js [data-m] { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .m-sheen::after, .m-nudge, .m-live::after, .m-orbits .spin { animation: none !important; }
  [data-m="cycle"] > .is-lit { transform: none; box-shadow: inherit; }
}
/* ==== design-system/assets/Motion/motion.css: end ==== */

/* ============================================================================
   Fonts
   ============================================================================
   Self-hosted, latin subset, from Google Fonts' own files: a page must never
   load them from Google (public/v1/AGENTS.md). The subset covers every
   accented letter the French pages use, Œ and œ included. Newsreader keeps its
   optical-size axis, so large headlines get its display cut. Each family is
   SIL Open Font License 1.1. Font files are cached for a year: a changed file
   gets a new name. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/newsreader-latin-opsz.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================================================
   Web tokens
   ============================================================================
   The website's values on top of the upstream tokens. docs/web-layer.md
   explains each; keep its tables in step with this block. */
:root {
  /* Body text. --muted (#8B8FA3) fails WCAG AA for body copy on every ground,
     so the website reads in this step of the ink ramp: 6.1:1 on --bg,
     5.7:1 on --bar, 5.3:1 on --m-lavender. */
  --w-ink-3: #5B5E70;

  /* Names pages and site.js already reference inline. */
  --bg-alt: var(--bar);
  --ink-soft: var(--w-ink-3);

  --w-max: 1240px;
  --w-gutter: clamp(20px, 4.4vw, 64px);
  --w-section: clamp(80px, 9vw, 144px);
  --w-head-gap: clamp(40px, 4.5vw, 64px);
  --w-header: 72px;
  --w-control: 48px;
  --w-control-sm: 40px;

  --w-display: clamp(44px, 30px + 3.45vw, 88px);
  --w-title: clamp(40px, 28px + 2.6vw, 72px);
  --w-h2: clamp(32px, 25px + 1.75vw, 56px);
  --w-h3: clamp(22px, 20px + 0.4vw, 26px);
  --w-lead: clamp(17px, 15.6px + 0.4vw, 20px);
  --w-figure: clamp(56px, 32px + 5.4vw, 112px);

  /* The deck's dashed rule: 9px on, 8px off. */
  --w-dash-x: repeating-linear-gradient(90deg, var(--dash) 0 9px, transparent 9px 17px);
  --w-dash-y: repeating-linear-gradient(180deg, var(--dash) 0 9px, transparent 9px 17px);

  /* The window bar's three white dots, at 22, 35 and 48px. */
  --w-bar-dots:
    radial-gradient(circle, #fff 3.5px, transparent 4px) 22px 50% / 8px 8px no-repeat,
    radial-gradient(circle, #fff 3.5px, transparent 4px) 35px 50% / 8px 8px no-repeat,
    radial-gradient(circle, #fff 3.5px, transparent 4px) 48px 50% / 8px 8px no-repeat;

  color-scheme: light;
}

/* ============================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--w-header) + 16px);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--w-ink-3);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--navy-2); }
strong, b { font-weight: 600; color: var(--ink-2); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
::selection { background: var(--blue-wash-line); color: var(--ink); }
/* hidden="until-found" stays the browser's: it hides with content-visibility,
   so find-in-page and #:~:text= links can still open the answer. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--radius-10);
  background: var(--navy); color: #fff; font-weight: 500; text-decoration: none;
}
.skip-link:focus { left: 12px; color: #fff; }
.mono { font-family: var(--font-mono); }

/* BuildIn. Every page already carries .reveal, and site.js adds .in as it
   scrolls into view; this gives it the upstream values. Inline --rd delays
   still apply. Without JavaScript, html has no .js class and nothing hides. */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--m-rise));
  transition: opacity var(--m-in) var(--m-ease), transform var(--m-in) var(--m-ease);
  transition-delay: var(--rd, 0ms);
}
.js .reveal.in { opacity: 1; transform: none; }
/* The safety net. .js is set in the head, before site.js has loaded. If
   site.js never takes over (it failed to load, or threw before it got here),
   every waiting element shows after four seconds. site.js adds .reveal-ready
   once it is watching, and this rule stops applying. */
.js:not(.reveal-ready) .reveal { animation: w-rescue .4s var(--m-ease) 4s forwards; animation-play-state: running !important; }
@keyframes w-rescue { to { opacity: 1; transform: none; } }

/* ============================================================================
   Layout
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: calc(var(--w-max) + 2 * var(--w-gutter));
  margin: 0 auto;
  padding: 0 var(--w-gutter);
}
.section { position: relative; padding: var(--w-section) 0; }
.section-head { max-width: 820px; margin-bottom: var(--w-head-gap); }
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  line-height: 1.4; letter-spacing: 0.02em;
  color: var(--navy);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: currentColor;
}
.h2 { font-size: var(--w-h2); line-height: 1.08; letter-spacing: -0.018em; }
.lede {
  margin-top: 20px; max-width: 64ch;
  font-size: var(--w-lead); line-height: 1.55;
  color: var(--w-ink-3);
}

.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
@media (max-width: 1080px) {
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Buttons
   ============================================================================
   Upstream Button at web size: 48px (40px small), --radius-10. One primary
   per view. .btn-white is the secondary on any ground; .btn-ghost an outline
   that sits beside a primary. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--w-control); padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--radius-10);
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-white { background: var(--paper); border-color: var(--control-line); color: var(--ink-2); }
.btn-white:hover { border-color: var(--control-line-hover); color: var(--ink); }
.btn-ghost { background: transparent; border-color: var(--control-line-hover); color: var(--ink-2); }
.btn-ghost:hover { background: var(--paper); color: var(--ink); }
.btn-sm { height: var(--w-control-sm); padding: 0 16px; font-size: 14px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ============================================================================
   Header
   ============================================================================
   A translucent bar, like the deck's floating control. site.js adds .scrolled
   past 8px, .open on a dropdown it has clicked open, and toggles .open on
   the mobile menu; hover and focus open a dropdown here. */
/* Axeptio appends #axeptio_overlay with an inline z-index of 2147483647.
   The banner and its corner button paint inside that stacking context, so
   they cover the open mobile menu and the demo dialog. Keep the mount above
   ordinary content and under the header (50) and the dialog (90). */
#axeptio_overlay {
  position: relative !important;
  z-index: 45 !important;
}
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 247, 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background-color .2s;
}
.site-nav.scrolled { border-bottom-color: var(--line); background: rgba(250, 249, 247, 0.94); }
.nav-inner { display: flex; align-items: center; gap: 24px; height: var(--w-header); }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand-logo { height: 26px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-links > li { position: relative; }
.drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--radius-8); background: none;
  font-size: 14.5px; font-weight: 500; line-height: 1; color: var(--ink-2);
  white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.drop-btn:hover, .dropdown.open .drop-btn { background: var(--chip); color: var(--ink); }
.drop-btn svg { transition: transform .2s var(--m-ease); }
.dropdown.open .drop-btn svg { transform: rotate(180deg); }
.drop-menu {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60;
  min-width: 240px; padding: 8px; list-style: none;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-14); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s var(--m-ease), transform .18s var(--m-ease), visibility 0s linear .18s;
}
/* Keeps the pointer inside the dropdown across the gap above the menu. */
.drop-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.drop-menu.wide { min-width: 270px; }
.dropdown.open .drop-menu,
.dropdown:focus-within .drop-menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--m-ease), transform .18s var(--m-ease), visibility 0s;
}
@media (hover: hover) {
  .dropdown:hover .drop-menu {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s var(--m-ease), transform .18s var(--m-ease), visibility 0s;
  }
}
.drop-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-10);
  font-size: 14.5px; font-weight: 500; line-height: 1.3;
  color: var(--ink-2); text-decoration: none;
}
.drop-menu a:hover, .drop-menu a:focus-visible { background: var(--blue-wash); color: var(--ink); }
.drop-menu-divider { height: 1px; margin: 6px 8px; background: var(--line); }
.nav-provider-logo { width: 20px; height: 16px; object-fit: contain; }

.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang-toggle {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: var(--radius-8);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--ink-2); text-decoration: none;
}
.lang-toggle:hover { background: var(--chip); color: var(--ink); }

.nav-burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--control-line); border-radius: var(--radius-10);
  background: var(--paper); color: var(--ink-2); cursor: pointer;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  display: block; width: 18px; height: 1.5px; border-radius: 1px;
  background: currentColor; transition: transform .2s var(--m-ease), background-color .2s;
}
.nav-burger span { position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger[aria-expanded="true"] span { background: transparent; }
.nav-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  display: none;
  max-height: calc(100dvh - var(--w-header)); overflow-y: auto;
  border-top: 1px solid var(--line); background: var(--bg);
}
.mobile-menu.open { display: block; }
.mobile-menu nav > ul { padding: 4px var(--w-gutter) 0; list-style: none; }
.mobile-menu nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-group-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 17px; font-weight: 500; color: var(--ink);
}
.mobile-group-label::-webkit-details-marker { display: none; }
.mobile-group-label::after {
  content: ""; width: 8px; height: 8px; margin-right: 4px;
  border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--m-ease);
}
details[open] > .mobile-group-label::after { transform: translateY(2px) rotate(-135deg); }
.mobile-sub { margin: 0 0 12px; list-style: none; }
.mobile-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-10);
  font-size: 15.5px; color: var(--ink-2); text-decoration: none;
}
.mobile-sub a:hover { background: var(--blue-wash); color: var(--ink); }
.mobile-cta-row { display: grid; gap: 10px; padding: 20px var(--w-gutter) 28px; }
.mobile-cta-row .btn { width: 100%; }

/* ============================================================================
   Footer
   ========================================================================== */
.site-footer { position: relative; padding: 72px 0 28px; background: var(--bar); font-size: 14px; color: var(--w-ink-3); }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--w-dash-x); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.footer-brand .brand-logo { height: 28px; }
.footer-brand p {
  margin-top: 20px; max-width: 30ch;
  font-family: var(--font-serif); font-size: 20px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--ink-2);
}
.footer-contact { display: grid; gap: 4px; margin-top: 20px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
.footer-contact a { color: var(--ink-2); text-decoration: none; }
.footer-contact a:hover { color: var(--navy); }
.footer-col h3, .footer-trust h3 {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4;
  color: var(--ink-2);
}
.footer-col ul { display: grid; gap: 9px; list-style: none; }
.footer-col a { color: var(--w-ink-3); text-decoration: none; }
.footer-col a:hover { color: var(--navy); }
.footer-mid {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px;
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
}
.sustain-line { display: inline-flex; align-items: center; gap: 10px; max-width: 62ch; }
.sustain-line svg { color: var(--navy); }
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; }
.footer-badge {
  display: inline-flex; align-items: center; height: 56px; padding: 6px 10px;
  border-radius: var(--radius-10); background: var(--paper); box-shadow: 0 0 0 1px var(--line);
}
.footer-badge img { width: auto; height: 100%; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 12px;
}
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Forms
   ============================================================================
   Upstream Field at web size. site.js wires every form.demo-form, adds .done
   to the form and .show to .form-success only once the endpoint confirms,
   and inserts .form-error. */
.demo-form { position: relative; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label, .field legend { padding: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.field legend { margin-bottom: 7px; }
.req { color: var(--navy); }
.opt { font-weight: 400; color: var(--w-ink-3); }
.field input, .field textarea, .field select {
  width: 100%; min-height: var(--w-control); padding: 12px 14px;
  border: 1px solid var(--control-line); border-radius: var(--radius-10);
  background: var(--paper);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.4; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--control-line-hover); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--focus-field); box-shadow: 0 0 0 3px rgba(19, 0, 216, 0.14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--bad-ink); }

.cloud-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cloud-option { position: relative; cursor: pointer; }
.cloud-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cloud-tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 66px; padding: 10px 6px;
  border: 1px solid var(--control-line); border-radius: var(--radius-10); background: var(--paper);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.cloud-option:hover .cloud-tile { border-color: var(--control-line-hover); }
.cloud-option input:focus-visible + .cloud-tile { outline: 2px solid var(--navy); outline-offset: 2px; }
.cloud-option input:checked + .cloud-tile {
  border-color: var(--navy); background: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--navy); color: var(--ink);
}
.cloud-tile::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s var(--m-ease);
}
.cloud-option input:checked + .cloud-tile::after { opacity: 1; transform: none; }
.cloud-logo { width: 28px; height: 20px; background: center / contain no-repeat; }
.cloud-logo-aws { background-image: url("aws-logo.png"); }
.cloud-logo-azure { background-image: url("azure-logo.png"); }
.cloud-logo-gcp { background-image: url("gcp-logo.png"); }
.cloud-logo-other {
  background: var(--w-ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 380px) { .cloud-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-submit-row { margin-top: 4px; }
.form-submit-row .btn { width: 100%; height: 52px; font-size: 16px; }
.form-trust { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; text-align: center; color: var(--w-ink-3); }
.form-trust a { color: var(--ink-2); }
.form-error {
  padding: 12px 14px; border-radius: var(--radius-10);
  background: var(--bad-bg); color: var(--ink); font-size: 14px;
}
.form-success { display: none; padding: 32px 8px 8px; text-align: center; }
.form-success.show { display: block; }
.form-success h3 { font-family: var(--font-sans); color: var(--ink); }
.form-success .ok-ring {
  display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 16px;
  border-radius: 50%; background: var(--blue-wash); color: var(--navy);
  box-shadow: 0 0 0 6px rgba(19, 0, 216, 0.06);
}
.demo-form.done .form-grid { display: none; }

/* ============================================================================
   Dialog
   ============================================================================
   Upstream Modal. site.js builds .demo-modal on every page without a form of
   its own, opens it from any Book a Demo link, and traps focus inside. */
.demo-modal {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 16px;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--m-ease), visibility 0s linear .2s;
}
.demo-modal.open { opacity: 1; visibility: visible; transition: opacity .2s var(--m-ease), visibility 0s; }
.demo-modal-backdrop { position: absolute; inset: 0; background: var(--scrim); }
.demo-modal-panel {
  position: relative; width: 100%; max-width: 560px; max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 0 28px 24px;
  background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-modal);
  transform: translateY(12px) scale(.985); transition: transform .28s var(--m-ease);
}
.demo-modal.open .demo-modal-panel { transform: none; }
.demo-modal-panel::before { content: ""; display: block; height: 40px; margin: 0 -28px 24px; background: var(--w-bar-dots), var(--bar); }
.demo-modal-close {
  position: absolute; top: 4px; right: 8px;
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: var(--radius-8); background: transparent; color: var(--ink-2); cursor: pointer;
}
.demo-modal-close:hover { background: var(--chip); color: var(--ink); }
.demo-modal-head { margin-bottom: 22px; }
.demo-modal-head h2 { font-size: clamp(24px, 22px + 0.6vw, 30px); line-height: 1.15; letter-spacing: -0.015em; }
.demo-modal-head p { margin-top: 10px; font-size: 15px; }
body.demo-modal-open { overflow: hidden; }

/* ============================================================================
   Tiles, pills and the window bar
   ============================================================================
   Every block of content sits on a white tile. A titled tile carries the
   upstream window bar: the --bar strip, three white dots, a mono title from
   72px. */
.case-card, .int-cat, .mockup, .video-frame,
.jc-calc, .cmp, .cmp-ask, .flow-strip, .section-cta .demo-form {
  background: var(--paper);
  border: 1px solid #fff;
  border-radius: var(--radius-18);
  box-shadow: var(--shadow-tile);
}
.pill, .case-kind {
  display: inline-flex; align-items: center; align-self: flex-start;
  height: 22px; padding: 0 9px; border-radius: var(--radius-4);
  font-family: var(--font-sans); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0;
  background: var(--info-bg); color: var(--info-ink); white-space: nowrap;
}
.pill.ok { background: var(--mint); color: var(--mint-ink); }
.pill.warn { background: var(--warn-bg); color: var(--ink-2); }
.pill.bad { background: var(--bad-bg); color: var(--ink-2); }
.badge-verified, .badge-gate {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
  background: var(--blue-wash); color: var(--navy-2);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: 0;
  white-space: nowrap;
}
.badge-gate { height: 24px; margin-left: 10px; vertical-align: 0.3em; font-size: 12px; }

/* ============================================================================
   Hero and logo row: the parts any hero shares
   ============================================================================
   The lab homepage's opening is further down (.hero-paper). */
.hero h1 .frag { display: block; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.proof-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 30px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.proof-line .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--navy); }
@media (max-width: 720px) { .hero-ctas .btn { flex: 1 1 auto; } }
.strip-eyebrow {
  margin: 0 auto 24px; padding: 0 var(--w-gutter); text-align: center;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--w-ink-3);
}
.marquee { max-width: calc(var(--w-max) + 2 * var(--w-gutter)); margin: 0 auto; padding: 0 var(--w-gutter); }
.marquee-track { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 52px; }
.logo-chip { display: inline-flex; align-items: center; height: 36px; }
.logo-chip img { width: auto; height: 26px; max-width: 128px; object-fit: contain; filter: grayscale(1); opacity: 0.62; transition: filter .2s, opacity .2s; }
.logo-chip:hover img { filter: none; opacity: 1; }

.case-card h3 { font-size: var(--w-h3); line-height: 1.2; }
.case-card p { font-size: 15.5px; line-height: 1.6; }

.checklist-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; list-style: none; }
.checklist-ribbon li {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px;
  border-radius: var(--radius-pill); background: var(--paper); box-shadow: 0 0 0 1px var(--line);
  font-size: 14px; font-weight: 500; color: var(--ink-2);
}
.checklist-ribbon .ck { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-wash); color: var(--navy); }
.checklist-ribbon .ribbon-tail { padding: 0 6px; background: none; box-shadow: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); }

/* ============================================================================
   Window frames: mockups, screenshots, the video
   ========================================================================== */
.mockup { margin: 0; overflow: hidden; }
.mockup-head {
  display: flex; align-items: center; gap: 12px; min-height: var(--window-bar);
  padding: 8px 18px 8px var(--space-72); background: var(--w-bar-dots), var(--bar);
}
.mockup-head i, .video-topbar i { display: none; }
.mockup-title { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-2); }
.mockup-note { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3); }
.mockup-body { padding: 22px 26px 26px; }
.drift-chart-wrap { margin-top: 48px; }
.shot-zoom { position: relative; display: block; cursor: zoom-in; }
/* Inset, or the frame's overflow: hidden clips the ring to a hairline. */
.shot-zoom:focus-visible { outline-offset: -3px; }
.shot-zoom img { width: 100%; }
.shot-zoom-badge {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: var(--ink-2); box-shadow: var(--shadow-pop);
  opacity: 0; transition: opacity .2s;
}
.shot-zoom:hover .shot-zoom-badge, .shot-zoom:focus-visible .shot-zoom-badge { opacity: 1; }

.shot-lightbox-open { overflow: hidden; }
.shot-lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; background: var(--scrim); cursor: zoom-out; }
.shot-lightbox-figure {
  display: flex; flex-direction: column; max-width: min(1400px, 100%); max-height: 100%; margin: 0; overflow: hidden;
  background: var(--paper); border-radius: var(--radius-18); box-shadow: var(--shadow-modal); cursor: default;
}
.shot-lightbox-figure::before { content: ""; display: block; height: 36px; flex: none; background: var(--w-bar-dots), var(--bar); }
.shot-lightbox-figure img { width: 100%; max-height: calc(100dvh - 150px); object-fit: contain; }
.shot-lightbox-figure figcaption { padding: 12px 18px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.shot-lightbox-close {
  position: fixed; top: 16px; right: 16px; z-index: 96;
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink-2); box-shadow: var(--shadow-pop); cursor: pointer;
}

.video-frame { position: relative; overflow: hidden; padding-top: var(--window-bar); }
.video-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 1;
  display: flex; align-items: center; height: var(--window-bar); padding: 0 18px 0 var(--space-72);
  background: var(--w-bar-dots), var(--bar);
}
.video-topbar .addr {
  padding: 5px 14px; border-radius: var(--radius-pill); background: var(--paper);
  font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3);
}
.demo-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sunk); }
.video-scrim { display: none; }
.play-btn {
  position: absolute; left: 50%; top: calc(50% + var(--window-bar) / 2); z-index: 1;
  display: grid; place-items: center; width: 84px; height: 84px; padding: 0 0 0 4px;
  border: 0; border-radius: 50%; background: var(--navy); color: #fff; cursor: pointer;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 10px rgba(19, 0, 216, 0.14), var(--shadow-pop);
  transition: background-color .15s, transform .2s var(--m-ease);
}
.play-btn:hover { background: var(--navy-2); transform: translate(-50%, -50%) scale(1.04); }
.video-frame.playing .play-btn { opacity: 0; pointer-events: none; }

/* ============================================================================
   Example findings, and the two mockups in the instruments tiles
   ========================================================================== */
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.case-card { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 30px; }
.pillar-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-12); background: var(--blue-wash); color: var(--navy-2); }
.code-block { padding: 14px 0; border-radius: var(--radius-12); background: var(--sunk); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.75; color: var(--ink-2); }
.code-block .ln { display: block; padding: 0 18px; white-space: pre; }
.code-block .ln.del { background: var(--bad-bg); }
/* An added line is navy, as in the loop's pull request: green stays in status pills. */
.code-block .ln.add { background: var(--blue-wash); color: var(--navy-2); }
.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.chip-savings {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill);
  background: var(--blue-wash); color: var(--navy-2); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
}
.chip-savings small { font-family: var(--font-sans); font-size: 11px; color: var(--w-ink-3); }
.spot-rows { padding: 4px 16px; border-radius: var(--radius-12); background: var(--sunk); }
.spot-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.spot-row:last-child { border-bottom: 0; }
.spot-row .k { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--w-ink-3); }
.spot-row .v { text-align: right; color: var(--ink-2); }
.risk-meter { height: 4px; margin: 10px 0 10px; border-radius: 2px; background: var(--track); overflow: hidden; }
.risk-meter i { display: block; width: 18%; height: 100%; border-radius: inherit; background: var(--navy-2); }
.spot-state {
  display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 12px 14px;
  border: 1px solid var(--blue-wash-line); border-radius: var(--radius-12); background: var(--blue-wash);
  font-size: 14px; font-weight: 500; color: var(--navy-2);
}

/* ============================================================================
   Stats: the deck's figures
   ============================================================================
   Poppins Light at deck proportions, the unit small, dashed rules between.
   Each figure's number carries data-scramble. */
.stat-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 2px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.stat-card { position: relative; padding: 34px 32px 8px 0; }
.stat-card + .stat-card { padding-left: 32px; }
.stat-card + .stat-card::before { content: ""; position: absolute; left: 0; top: 34px; bottom: 8px; width: 2px; background: var(--w-dash-y); }
.stat-num {
  display: block; white-space: nowrap;
  font-family: var(--font-sans); font-size: var(--w-figure); font-weight: 300; line-height: 0.95; letter-spacing: 0.01em;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.stat-num small { margin-left: 0.08em; font-size: 0.36em; font-weight: 400; letter-spacing: 0; }
/* Three across, a figure is sized to its column so the widest one, $396K/yr,
   fits: a column is a third of the row less 64px of padding. */
@media (min-width: 1001px) { .stat-num { font-size: min(var(--w-figure), 10cqi - 22px); } }
.stat-desc { margin-top: 20px; max-width: 30ch; font-size: 17px; line-height: 1.5; }
.stat-footnote { margin-top: 40px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; }
@media (max-width: 1000px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-card, .stat-card + .stat-card { padding: 30px 0 26px; }
  .stat-card + .stat-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 2px; background: var(--w-dash-x); }
}

/* ============================================================================
   Integrations, and the read/write flow
   ============================================================================
   Category tiles with the window bar; rows like the upstream to-do list. The
   flow under them is the deck's pipeline: a navy dot runs each dashed leg. */
.int-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 0.95fr); gap: var(--space-24); align-items: start; }
.int-cat { position: relative; padding: calc(var(--window-bar) + 12px) 14px 14px; overflow: hidden; }
.int-cat h3 {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; height: var(--window-bar); padding: 0 18px 0 var(--space-72);
  background: var(--w-bar-dots), var(--bar);
  font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2);
}
.int-items { display: grid; gap: 2px; }
.int-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: var(--radius-10);
  font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); transition: background-color .15s;
}
.int-item:hover { background: var(--blue-wash); }
.int-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--blue-wash); color: var(--navy-2); }
.int-item > span:not(.int-icon) { display: grid; gap: 2px; padding-top: 5px; }
.int-item:not(:has(> span:not(.int-icon))) { align-items: center; }
.int-item small { display: block; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--w-ink-3); }
.int-item small + small { font-family: var(--font-mono); font-size: 11.5px; }
@media (max-width: 1080px) { .int-grid { grid-template-columns: minmax(0, 1fr); } }

.flow-strip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 140px) minmax(0, 1fr) minmax(64px, 140px) minmax(0, 1fr);
  align-items: center; gap: 0 16px; margin-top: 48px; padding: 24px;
}
.flow-node { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--radius-12); background: var(--sunk); }
.flow-node strong { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--ink); }
.flow-node span { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--w-ink-3); }
.flow-node:not(.reads):not(.writes) { background: var(--navy); }
.flow-node:not(.reads):not(.writes) strong { color: #fff; }
.flow-node:not(.reads):not(.writes) span { color: rgba(255, 255, 255, 0.78); }
.flow-arrow { position: relative; display: grid; justify-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--navy); }
.flow-arrow svg { display: none; }
.flow-arrow::before { content: ""; width: 100%; height: 2px; background: var(--w-dash-x); }
.flow-arrow::after {
  content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--navy); opacity: 0; animation: w-run 3.2s var(--m-ease) infinite;
}
.flow-arrow + .flow-node + .flow-arrow::after { animation-delay: 1.6s; }
@keyframes w-run { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@media (max-width: 900px) {
  .flow-strip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flow-arrow { justify-items: start; padding-left: 26px; }
  .flow-arrow::before { position: absolute; left: 30px; top: -10px; width: 2px; height: calc(100% + 20px); background: var(--w-dash-y); }
  .flow-arrow::after { display: none; }
  .flow-arrow span { padding-left: 20px; }
}

/* ============================================================================
   Calculator
   ============================================================================
   Fields on the left; the result on the right in the navy gradient upstream
   keeps for the main KPI tile, with the page's one LightSweep (m-sheen).
   The inline script on the homepage drives it; .jc-pill.on is the choice. */
.jc-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); overflow: hidden; }
.jc-calc-left, .jc-calc-right { padding: clamp(24px, 3.2vw, 44px); }
.jc-calc-right { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.jc-row-between { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.jc-label { margin-bottom: 12px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); }
.jc-row-between .jc-label { margin-bottom: 0; }
.jc-bill-value { font-family: var(--font-serif); font-size: clamp(30px, 26px + 1vw, 40px); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jc-slider-wrap { margin-top: 18px; }
.jc-bill { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.jc-bill::-webkit-slider-runnable-track { height: 2px; background: var(--w-dash-x); }
.jc-bill::-moz-range-track { height: 2px; background: var(--w-dash-x); }
.jc-bill::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border: 0; border-radius: 50%;
  background: var(--navy); box-shadow: 0 0 0 6px rgba(19, 0, 216, 0.14);
}
.jc-bill::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(19, 0, 216, 0.14); }
.jc-bill:focus-visible { outline: none; }
.jc-bill:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--navy); outline-offset: 3px; }
.jc-bill:focus-visible::-moz-range-thumb { outline: 2px solid var(--navy); outline-offset: 3px; }
.jc-slider-bounds { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3); }
.jc-calc hr { height: 2px; margin: 26px 0; border: 0; background: var(--w-dash-x); }
.jc-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-pill {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  border: 1px solid var(--control-line); border-radius: var(--radius-pill); background: var(--paper);
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.jc-pill:hover { border-color: var(--control-line-hover); }
.jc-pill.on { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.jc-res-label, .jc-res-col .k { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.78); }
.jc-res-big {
  margin-top: 14px; font-family: var(--font-serif); font-size: clamp(44px, 34px + 2.4vw, 72px); line-height: 1;
  letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.jc-res-big .unit { margin-left: 6px; font-family: var(--font-sans); font-size: 0.34em; font-weight: 500; opacity: 0.82; }
.jc-res-big.compact { font-size: clamp(38px, 30px + 2vw, 60px); }
.jc-res-big.neg { color: #FFD3D1; }
.jc-res-sub { min-height: 1.6em; margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: rgba(255, 255, 255, 0.78); }
.jc-calc-right hr { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 9px, transparent 9px 17px); }
.jc-res-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jc-res-col .v, .jc-trees { margin-top: 6px; font-family: var(--font-serif); font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.jc-trees { display: inline-flex; align-items: center; gap: 8px; }
.jc-res-note { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); }
.jc-res-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.jc-calc-right .btn-white { border-color: #fff; color: var(--navy); }
.jc-calc-right .btn-white:hover { background: var(--blue-wash); color: var(--navy-2); }
.jc-calc-right .btn-ghost { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.jc-calc-right .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
/* Upstream's rule on navy: the focus ring turns white. */
.jc-calc-right :focus-visible { outline-color: #fff; }
@media (max-width: 900px) { .jc-calc { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   Comparison: a table in a panel
   ============================================================================
   The column that matters is tinted. Below 900px site-v2.js shows Jetscale
   beside one category, chosen with the switch (data-show on .cmp). */
.cmp { overflow: hidden; }
.cmp::before { content: ""; display: block; height: 40px; background: var(--w-bar-dots), var(--bar); }
.cmp-switch { display: none; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp-table thead th { padding: 20px 16px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: bottom; font-weight: 400; }
.cmp-table tbody th, .cmp-table td { padding: 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.cmp-table tbody tr:last-child > * { border-bottom: 0; }
.cmp-table .cmp-js { background: var(--blue-wash); }
.cmp-crit { width: 22%; }
.cmp-name { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
th.cmp-js .cmp-name { font-weight: 600; color: var(--navy); }
.cmp-sub { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--w-ink-3); }
.cmp-q { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.cmp-hint { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--w-ink-3); }
.cmp-cell { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; color: var(--ink-2); }
.cmp-why td.cmp-js .cmp-cell { font-weight: 500; color: var(--ink); }
.cmp-mark { flex: none; position: relative; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; }
.cmp-mark::after { content: ""; position: absolute; inset: 0; background: center / 12px no-repeat; }
.cmp-mark.is-yes { background: var(--navy); }
.cmp-mark.is-yes::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.cmp-mark.is-part { background: linear-gradient(90deg, var(--orange) 50%, var(--warn-bg) 50%); box-shadow: inset 0 0 0 1.5px var(--orange); }
.cmp-mark.is-no { background: var(--chip); }
.cmp-mark.is-no::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A4C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
.cmp-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.cmp-legend .cmp-mark { width: 16px; height: 16px; margin: 0; }
.cmp-legend .cmp-mark::after { background-size: 10px; }
.cmp-note a { font-weight: 500; }
@media (max-width: 900px) {
  .cmp-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 16px 16px 4px; }
  .cmp-switch-label { margin-right: 4px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
  .cmp-switch button {
    height: 34px; padding: 0 14px; border: 1px solid var(--control-line); border-radius: var(--radius-pill);
    background: var(--paper); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  }
  .cmp-switch button[aria-pressed="true"] { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
  .cmp[data-show] [data-col] { display: none; }
  .cmp[data-show="brokers"] [data-col="brokers"],
  .cmp[data-show="dashboards"] [data-col="dashboards"],
  .cmp[data-show="agents"] [data-col="agents"] { display: table-cell; }
  /* Fixed layout keeps the two visible columns inside the panel; restacking
     rows as a grid would cost the table its semantics in some readers. */
  .cmp-table { table-layout: fixed; }
  .cmp-crit { width: 30%; }
  .cmp-table thead th, .cmp-table tbody th, .cmp-table td { padding: 12px 8px; font-size: 13px; overflow-wrap: anywhere; }
  .cmp-cell { gap: 6px; }
  .cmp-name { font-size: 12px; }
}
.cmp-ask { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 24px 48px; margin-top: var(--space-24); padding: clamp(24px, 3vw, 36px); }
.cmp-ask-title { font-size: var(--w-h3); line-height: 1.2; }
.cmp-ask-sub { margin-top: 10px; font-size: 15px; }
.cmp-ask-list { display: grid; list-style: none; }
.cmp-ask-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmp-ask-list li:first-child { padding-top: 0; }
.cmp-ask-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.cmp-ask-num { grid-row: span 2; padding-top: 2px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--navy); }
.cmp-ask-q { font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.cmp-ask-a { font-size: 15px; }
@media (max-width: 900px) { .cmp-ask { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   FAQ: rows like the upstream to-do list
   ============================================================================
   site.js toggles .open on .faq-item and aria-expanded on its button. */
.faq-list { max-width: 920px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 22px 4px;
  border: 0; background: none; text-align: left; cursor: pointer;
  font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink);
}
.faq-q:hover { color: var(--navy-2); }
.faq-num { flex: none; width: 28px; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); }
.faq-q > span:nth-child(2) { flex: 1; }
.faq-q .chev {
  flex: none; width: 32px; height: 32px; padding: 7px; border: 1.5px solid var(--control-line-hover); border-radius: 50%;
  color: var(--ink-2); transition: transform .25s var(--m-ease), background-color .15s, border-color .15s, color .15s;
}
.faq-item.open .faq-q .chev { transform: rotate(180deg); background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
/* Answers are open until script can close them: without JavaScript nothing
   could open one. With it, a closed answer leaves the accessibility tree and
   the tab order; an until-found one stays visible to the
   browser's search. */
.faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--m-ease), visibility .3s; }
.js .faq-a { grid-template-rows: 0fr; visibility: hidden; }
.js .faq-item.open .faq-a { grid-template-rows: 1fr; visibility: visible; }
.js .faq-a[hidden="until-found"] { visibility: visible; }
html:not(.js) .faq-q { cursor: default; }
html:not(.js) .faq-q .chev { display: none; }
.faq-a-inner { min-height: 0; overflow: hidden; padding-left: 48px; }
.faq-a-inner p { max-width: 68ch; padding-bottom: 24px; }
.tst-link-row { margin-top: 32px; }
.tst-link-row a { font-weight: 500; text-decoration: none; }
.tst-link-row a:hover { text-decoration: underline; }

/* ============================================================================
   Call to action: orbits centred behind the form
   ============================================================================
   The statement sits on the open side. The lab homepage sets it on ink
   (.cta-tint, further down). */
.section-cta { overflow: hidden; }
/* Centred on the form: its column is 540px wide and ends where the content
   does, at max(gutter, half the space beside --w-max) from the right. */
.cta-orbits {
  position: absolute; top: 50%; width: 1040px; height: 1040px; transform: translateY(-50%);
  right: calc(max(var(--w-gutter), (100% - var(--w-max)) / 2) + 270px - 520px);
}
.section-cta .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 48px 72px; align-items: center; }
.cta-block .h2 { font-size: clamp(36px, 27px + 2.4vw, 64px); }
.section-cta .demo-form { padding: 0 28px 28px; overflow: hidden; }
.section-cta .demo-form::before { content: ""; display: block; height: 40px; margin: 0 -28px 24px; background: var(--w-bar-dots), var(--bar); }
@media (max-width: 1080px) {
  .section-cta .wrap { grid-template-columns: minmax(0, 1fr); }
  .cta-orbits { top: auto; bottom: -300px; right: -320px; transform: none; }
}

/* ============================================================================
   Breakpoints for the header
   ============================================================================
   Measured, not guessed: the bar needs 1067px in English and 1196px in
   French before the menu has to collapse (2026-11-09, Poppins 500 labels).
   Each breakpoint leaves some slack above the measured width. */
@media (max-width: 1240px) {
  html[lang="fr-CA"] .nav-links { display: none; }
  html[lang="fr-CA"] .nav-burger { display: inline-flex; }
}
@media (max-width: 1120px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 680px) {
  html[lang="fr-CA"] .nav-actions a[href$="#final-cta"] { display: none; }
}
@media (max-width: 600px) {
  .nav-actions a[href$="#final-cta"] { display: none; }
}
@media (max-width: 520px) {
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 6px; }
  .brand-logo { height: 24px; }
  .lang-toggle { min-width: 34px; padding: 0 6px; }
  .nav-actions .btn-sm { height: 38px; padding: 0 12px; font-size: 13.5px; }
  .nav-burger { width: 40px; height: 40px; }
}
/* On the narrowest phones the lockup crops to the mark at its left, so the
   primary action keeps its place. The mark is 197 of the lockup's 1215 units. */
@media (max-width: 380px) {
  .nav-inner .brand-logo { width: 20px; height: 26px; object-fit: cover; object-position: left center; }
}
@media (max-width: 430px) {
  html[lang="fr-CA"] .nav-inner .brand-logo { width: 20px; height: 26px; object-fit: cover; object-position: left center; }
}

/* ============================================================================
   Reduced motion: nothing moves
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   The lab homepage
   ============================================================================
   docs/homepage-lab.md. One warm ground from the header to the closing.
   site-v3.js drives what moves; nothing here hides content unless html.v3 says the script ran.
   ========================================================================== */
:root {
  --w-wait: #83879B; /* a word waiting to be lit: 3.1:1 on --bar, the least large text may have */
  --w-bad-fill: #C42F27; /* a deeper red than --bad-ink for the drift chart: it holds white text and sits well beside --navy */
}

/* Off screen, nothing animates: site-v3.js marks a section that is away. */
.v3 .is-away, .v3 .is-away *, .v3 .is-away *::before, .v3 .is-away *::after { animation-play-state: paused !important; }

/* ---------- shared by the opening and the field stage ---------- */
.hero-eyebrow { margin-bottom: clamp(10px, 2.2vh, 28px); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }
/* The line that reports what the tower field just did. */
.trace {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: min(46vw, 620px); margin: 0; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink-2);
}
.trace-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); color: var(--navy); }
.trace-label { flex: none; color: var(--navy); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.trace-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- the sheet: everything after the opening ---------- */
.sheet { position: relative; }
.sheet > .section { overflow-x: clip; }

/* ---------- section index: a number, a rule an agent runs along, a label ---------- */
.lab-index {
  display: flex; align-items: center; gap: 14px; margin: 0 0 22px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy);
}
.lab-n { font-variant-numeric: tabular-nums; }
.lab-rule { position: relative; flex: 0 1 112px; height: 2px; background: var(--w-dash-x); }
.lab-rule::after { content: ""; position: absolute; top: -3px; left: calc(100% - 8px); width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.v3 .reveal .lab-rule::after, .v3 .reveal.lab-index .lab-rule::after { left: 0; transition: left 1.3s var(--m-ease) .25s; }
.v3 .reveal.in .lab-rule::after, .v3 .reveal.in.lab-index .lab-rule::after { left: calc(100% - 8px); }

/* ---------- 00 thesis ---------- */
.thesis { padding-top: clamp(96px, 11vw, 176px); }
.thesis-text {
  max-width: 20.5em; margin: 0;
  font-family: var(--font-serif); font-size: clamp(29px, 21px + 2.3vw, 58px); line-height: 1.17; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty;
}
.thesis-lead { color: var(--navy); }
/* A word waiting to be lit is still a word to read, so it keeps 3:1 on the ground. */
.v3 .thesis-text.is-split .w { color: var(--w-wait); transition: color .4s var(--m-ease); }
.v3 .thesis-text.is-split .w.on { color: var(--ink); }
.v3 .thesis-text.is-split .thesis-lead .w.on { color: var(--navy); }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: clamp(56px, 6vw, 88px); padding: 0; list-style: none; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.principles li { position: relative; padding-top: 30px; }
.principles li::before { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--m-dot); transition: background-color .6s var(--m-ease); }
.v3 .principles.in li::before { background: var(--navy); }
.v3 .principles.in li:nth-child(2)::before { transition-delay: .25s; }
.v3 .principles.in li:nth-child(3)::before { transition-delay: .5s; }
.principles h3 { font-size: var(--w-h3); line-height: 1.2; }
.principles p { margin-top: 10px; max-width: 30em; font-size: 15.5px; }
.lab-plate {
  display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: clamp(48px, 5vw, 72px); padding: 0; list-style: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-ink-3);
}
.lab-plate b { font-weight: 500; color: var(--ink-2); }
@media (max-width: 900px) {
  .principles { grid-template-columns: minmax(0, 1fr); background: none; }
  .principles li { padding: 26px 0 26px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
}

/* ---------- 01 observation ---------- */
.obs { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 48px 80px; align-items: center; }
.obs .section-head { margin-bottom: 0; }
.cloudfield { margin: 0; }
.cf-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(8px, 1.1vw, 16px) clamp(5px, 0.8vw, 12px); }
.cf-grid i {
  aspect-ratio: 56 / 40; background: var(--track); transition: background-color 1.4s ease-in-out;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 40'%3E%3Ccircle cx='27' cy='16' r='15'/%3E%3Crect y='22' width='56' height='18' rx='9'/%3E%3Ccircle cx='45.5' cy='29.5' r='10.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 40'%3E%3Ccircle cx='27' cy='16' r='15'/%3E%3Crect y='22' width='56' height='18' rx='9'/%3E%3Ccircle cx='45.5' cy='29.5' r='10.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cf-grid i.on { background: var(--bad-ink); }
.cloudfield figcaption { display: flex; align-items: baseline; gap: 18px; margin-top: 28px; padding-top: 22px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.cf-num { flex: none; font-family: var(--font-sans); font-size: clamp(52px, 40px + 2.6vw, 84px); font-weight: 300; line-height: 0.95; letter-spacing: 0.01em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cf-num small { margin-left: 0.06em; font-size: 0.4em; font-weight: 400; }
.cf-cap { max-width: 24em; font-size: 15.5px; line-height: 1.5; }
.cf-cap b { color: var(--ink); font-weight: 500; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: clamp(56px, 6vw, 88px); background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.note { position: relative; padding-top: 30px; }
.note::before { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--m-dot); }
.note-n { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.note h3 { font-size: var(--w-h3); line-height: 1.2; }
.note p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.cycle-line { max-width: 44em; margin: clamp(48px, 5vw, 72px) 0 0; font-family: var(--font-serif); font-size: clamp(22px, 18px + 0.9vw, 30px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-2); }
.cycle-line strong { font-weight: 400; color: var(--navy); }
.lab-sub { max-width: 820px; margin: clamp(72px, 8vw, 120px) 0 var(--w-head-gap); }
.lab-sub h3 { font-size: clamp(28px, 22px + 1.4vw, 44px); line-height: 1.1; letter-spacing: -0.018em; }
@media (max-width: 1000px) {
  .obs { grid-template-columns: minmax(0, 1fr); }
  .notes { grid-template-columns: minmax(0, 1fr); background: none; }
  .note { padding: 26px 0; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
}

/* ---------- the drift chart, drawn live ---------- */
.scroll-x { overflow-x: auto; }
.drift { position: relative; }
.drift > img { display: block; width: 100%; height: auto; }
.drift.is-live > img { display: none; }
.drift-live { position: relative; container-type: inline-size; min-width: 760px; aspect-ratio: 1200 / 576; }
.drift-live svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dl-grid { stroke: var(--dash); stroke-width: 1; stroke-dasharray: 2 6; }
.dl-base { stroke: var(--line); stroke-width: 1.5; }
.dl-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dl-line.dl-without { stroke: var(--w-bad-fill); stroke-width: 3.5; }
.dl-line.dl-with { stroke: var(--navy); stroke-width: 4; }
/* Sizes in cqi follow the chart's width. Each has a plain size first, for a browser without container units. */
.dl-tick, .dl-axis { position: absolute; font-family: var(--font-mono); font-size: 11px; font-size: clamp(9px, 1cqi, 12px); line-height: 1; color: var(--w-ink-3); white-space: nowrap; transform: translate(-50%, -50%); }
.dl-tick.dl-y { transform: translate(-100%, -50%); }
.dl-axis { transform: translate(-50%, -50%) rotate(-90deg); }
.dl-box, .dl-callout {
  position: absolute; padding: 0.5em 0.85em; border-radius: 8px;
  font-size: 11px; font-size: clamp(8.5px, 1.04cqi, 13px); line-height: 1.25; white-space: nowrap;
  opacity: 0; transition: opacity .5s var(--m-ease) var(--d, 0s), translate .5s var(--m-ease) var(--d, 0s); translate: 0 6px;
}
.dl-box b, .dl-callout b { display: block; font-family: var(--font-sans); font-weight: 600; color: inherit; }
.dl-box small, .dl-callout small { display: block; margin-top: 0.2em; font-family: var(--font-mono); font-size: 0.86em; }
.dl-box.dl-with { transform: translateX(-7px); background: var(--navy); color: #fff; }
.dl-box.dl-with.is-hollow { background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.dl-box.dl-without { transform: translateX(-50%); background: var(--w-bad-fill); color: #fff; }
.dl-callout { transform: translateX(-100%); padding: 0.7em 1.1em; background: var(--blue-wash); color: var(--navy); }
.dl-callout b { font-size: 1.3em; }
.dl-callout small { color: var(--ink-2); }
.dl-leader, .dl-gap { stroke-width: 1.2; stroke-dasharray: 3 2.5; }
.dl-leader.dl-with, .dl-gap { stroke: var(--navy); }
.dl-leader.dl-without { stroke: var(--w-bad-fill); }
.dl-dot { stroke: var(--paper); stroke-width: 2.5; }
.dl-dot.dl-with { fill: var(--navy); }
.dl-dot.dl-without { fill: var(--w-bad-fill); }
.dl-dot.is-hollow { fill: var(--paper); stroke: var(--navy); }
.dl-leader, .dl-gap, .dl-dot { opacity: 0; transition: opacity .4s var(--m-ease) var(--d, 0s); }
.drift.is-in .dl-box, .drift.is-in .dl-callout { opacity: 1; translate: 0 0; }
.drift.is-in .dl-leader, .drift.is-in .dl-gap, .drift.is-in .dl-dot { opacity: 1; }
.dl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-width: 760px; margin: 0; padding: 14px 24px 18px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); }
.dl-key { display: inline-flex; align-items: center; gap: 10px; }
.dl-key::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: currentColor; }
.dl-key.dl-without::before { background: var(--w-bad-fill); }
.dl-key.dl-with::before { background: var(--navy); }
.dl-note { margin-left: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--w-ink-3); }

/* ---------- ?draft: outline every piece of copy that is not approved yet ----------
   A marked element may also carry words nobody sees: the description a
   screen reader speaks. The note prints them, so they get reviewed too. */
.show-drafts [data-draft] { outline: 2px dashed var(--orange); outline-offset: 4px; }
.show-drafts [data-draft]::after {
  content: "draft: " attr(data-draft); display: block; width: max-content; max-width: 40em; margin-top: 6px; padding: 2px 8px; border-radius: 4px;
  background: var(--warn-bg); color: var(--ink); font: 500 11px/1.5 var(--font-mono); letter-spacing: 0; text-transform: none; white-space: normal;
}
.show-drafts [data-draft][aria-label]::after { content: "draft: " attr(data-draft) " · read aloud as: " attr(aria-label); }

/* ---------- product screens ----------
   The product, built in HTML from the design system's own components, the way
   the pitch deck does it. Everything inside .ps-art is sized in em against
   the screen's width (12px at 720px), so a screen scales without script.
   Screens are inert and labelled as demo data; their figures are the design
   system's samples, not claims. */
.pswin { position: relative; margin: 0; overflow: hidden; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile); }
.pswin-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px;
  padding: 6px 16px 6px var(--space-72); background: var(--w-bar-dots), var(--bar);
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-2);
}
.pswin-bar b { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.pswin-bar em { font-style: normal; color: var(--w-ink-3); white-space: nowrap; }
/* On a phone there is room for one of the two: the label that says what this is. */
@media (max-width: 560px) { .pswin-bar { justify-content: flex-end; } .pswin-bar b { display: none; } }
.ps { container-type: inline-size; }
.ps-art { position: relative; font-size: clamp(5px, 1vw, 12px); font-size: calc(100cqi / 60); line-height: 1.5; font-family: var(--font-sans); color: var(--ink-2); aspect-ratio: 720 / 468; overflow: hidden; background: var(--bg); }
.ps-art * { box-sizing: border-box; }
.ps-art p { max-width: none; text-wrap: wrap; }
.ps-art b, .ps-art strong { color: inherit; }
.ps-shell { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); height: 100%; }
.ps-rail { display: flex; flex-direction: column; align-items: center; gap: 0.95em; padding: 1.5em 0; background: linear-gradient(180deg, var(--navy), var(--navy-2)); border-radius: 0 1.5em 1.5em 0; }
.ps-rail svg { width: 1.7em; height: 2.3em; margin-bottom: 1.2em; fill: #fff; }
.ps-rail i { width: 2.6em; height: 2.6em; border-radius: 0.7em; background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 0.34em, transparent 0.38em); opacity: 0.8; }
.ps-rail i.on { background-color: rgba(255, 255, 255, 0.2); opacity: 1; }
.ps-rail i.sp { margin-top: auto; }
.ps-main { position: relative; min-width: 0; padding: 2em 2.4em 0 2.6em; }
.ps-h { display: flex; align-items: center; gap: 0.5em; margin: 0; font-family: var(--font-serif); font-size: 2.7em; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.ps-meta, .ps-crumb { display: flex; align-items: center; gap: 0.6em; margin: 0.5em 0 0; font-family: var(--font-mono); font-size: 0.95em; color: var(--muted); }
.ps-crumb { margin: 0 0 0.8em; }
.ps-sync { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--navy); }
.ps-pill { display: inline-flex; align-items: center; height: 1.9em; padding: 0 0.75em; border-radius: 0.36em; background: var(--info-bg); color: var(--info-ink); font-family: var(--font-sans); font-size: 0.86em; font-style: normal; font-weight: 500; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.ps-h .ps-pill { font-size: 0.32em; }
.ps-pill.ok { background: var(--mint); color: var(--mint-ink); }
.ps-pill.warn { background: var(--warn-bg); color: var(--ink-2); }
.ps-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2em; margin-top: 1.8em; }
.ps-kpi { padding: 1.2em 1.4em 1.3em; border-radius: 1.3em; background: var(--paper); box-shadow: var(--shadow-tile); }
.ps-kpi > span { display: block; padding-bottom: 0.8em; border-bottom: 1px dashed var(--dash); font-size: 0.95em; }
.ps-kpi b { display: block; margin-top: 0.3em; font-family: var(--font-serif); font-size: 2.7em; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-kpi small { display: block; font-family: var(--font-mono); font-size: 0.86em; color: var(--muted); }
.ps-kpi.main { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; }
.ps-kpi.main > span { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.ps-kpi.main b { color: #fff; }
.ps-kpi.main small { color: rgba(255, 255, 255, 0.72); }
.ps-card { position: relative; margin-top: 1.6em; border-radius: 1.4em 1.4em 0 0; background: var(--paper); box-shadow: var(--shadow-tile); overflow: hidden; }
.ps-bar { display: flex; align-items: center; height: 2.9em; padding-left: 5.4em; background: radial-gradient(circle, #fff 0.26em, transparent 0.3em) 1.5em 50% / 0.64em 0.64em no-repeat, radial-gradient(circle, #fff 0.26em, transparent 0.3em) 2.5em 50% / 0.64em 0.64em no-repeat, radial-gradient(circle, #fff 0.26em, transparent 0.3em) 3.5em 50% / 0.64em 0.64em no-repeat, var(--bar); font-family: var(--font-mono); font-size: 1em; font-weight: 500; }
.ps-tr { display: grid; grid-template-columns: 1.25fr 0.9fr 1.7fr 0.8fr 0.8fr; align-items: center; gap: 1em; padding: 0.85em 1.5em; border-bottom: 1px solid var(--line); font-size: 0.95em; }
.ps-tr.th { padding-top: 1em; padding-bottom: 0.8em; font-family: var(--font-mono); font-size: 0.86em; color: var(--muted); }
.ps-tr .nm { font-weight: 600; color: var(--ink); }
.ps-tr small { display: block; font-size: 0.86em; color: var(--muted); }
.ps-tr b { font-weight: 600; }
.ps-tr .sv { font-variant-numeric: tabular-nums; color: var(--ink); }
.ps-scan { position: absolute; left: 0; right: 0; top: 2.9em; height: 2px; background: linear-gradient(90deg, transparent, var(--navy), transparent); opacity: 0; }

/* connect */
.ps-modal { margin-top: 1.7em; padding: 1.8em 2em 2em; border-radius: 1.5em; background: var(--paper); box-shadow: var(--shadow-tile); }
.ps-mt { margin: 0 0 1.2em; font-family: var(--font-serif); font-size: 1.85em; line-height: 1.2; color: var(--ink); }
.ps-provs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1em; }
.ps-prov { position: relative; display: grid; gap: 0.3em; padding: 1.3em 1.3em 1.2em; border: 1px solid var(--control-line); border-radius: 1.1em; background: var(--paper); }
.ps-prov img { width: 3.1em; height: 2.2em; margin-bottom: 0.6em; object-fit: contain; object-position: left center; }
.ps-prov b { font-size: 1.1em; font-weight: 600; color: var(--ink); }
.ps-prov span { font-family: var(--font-mono); font-size: 0.84em; line-height: 1.45; color: var(--muted); }
.ps-prov .ps-pill { justify-self: start; margin-top: 0.7em; }
.ps-prov::after { content: ""; position: absolute; top: 1em; right: 1em; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.9em no-repeat; }
.ps-perms { display: grid; gap: 0.6em; margin: 1.5em 0 0; padding: 1.2em 1.4em; list-style: none; border-radius: 1em; background: var(--sunk); font-family: var(--font-mono); font-size: 0.95em; }
.ps-perms li { display: flex; align-items: center; gap: 0.8em; }
.ps-perms li::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8em no-repeat; }
.ps-perms li.no::before { background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A4C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 0.8em no-repeat; }
.ps-perms em { margin-left: auto; font-style: normal; color: var(--muted); }

/* plan */
.ps-cols { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 1.2em; margin-top: 1.4em; }
.ps-dcard { padding: 1.3em 1.5em 1.4em; border-radius: 1.3em; background: var(--paper); box-shadow: var(--shadow-tile); }
.ps-dcard > span { display: block; margin-bottom: 0.7em; font-size: 0.95em; font-weight: 600; color: var(--ink); }
.ps-dcard.save b { display: block; font-family: var(--font-serif); font-size: 3.3em; font-weight: 400; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-dcard.save b small { margin-left: 0.4em; font-family: var(--font-sans); font-size: 0.32em; color: var(--muted); }
.ps-dcard.save > small { display: block; margin-top: 0.5em; font-family: var(--font-mono); font-size: 0.86em; color: var(--muted); }
.ps-dr { display: flex; justify-content: space-between; gap: 1em; padding: 0.55em 0; border-top: 1px solid var(--line); font-size: 0.95em; }
.ps-dr span:first-child { color: var(--muted); }
.ps-dr span:last-child { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.95em; color: var(--ink); }
.ps-dr i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--orange); }
.ps-arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9em; margin-top: 1.2em; }
.ps-art-row { display: flex; align-items: center; gap: 0.9em; padding: 0.8em 1em; border: 1px solid var(--control-line); border-radius: 0.9em; background: var(--paper); font-size: 0.92em; }
.ps-art-row.sel { border-color: var(--navy); background: var(--blue-wash); }
.ps-art-row i { flex: none; width: 2.2em; height: 2.2em; border-radius: 0.6em; background: var(--blue-wash); }
.ps-art-row.sel i { background: var(--navy); }
.ps-art-row b { display: block; font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.ps-art-row small { display: block; font-size: 0.9em; color: var(--muted); }

/* ship */
.ps-gh { height: 100%; padding: 2.2em 2.6em 0; background: var(--paper); }
.ps-gt { margin: 0; font-family: var(--font-sans); font-size: 1.75em; font-weight: 500; line-height: 1.25; color: var(--ink); }
.ps-gt span { font-weight: 400; color: var(--muted); }
.ps-gmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin: 0.9em 0 0; padding-bottom: 1.2em; border-bottom: 1px solid var(--line); font-size: 0.98em; color: var(--muted); }
.ps-gmeta code, .ps-checks code { padding: 0.1em 0.5em; border-radius: 0.4em; background: var(--blue-wash); font-family: var(--font-mono); font-size: 0.92em; color: var(--navy-2); }
.ps-open { display: inline-flex; align-items: center; height: 2.1em; padding: 0 0.9em; border-radius: 999px; background: var(--navy); color: #fff; font-size: 0.92em; font-style: normal; font-weight: 500; }
.ps-diff { margin-top: 1.3em; padding: 0.9em 0; border-radius: 1em; background: var(--sunk); font-family: var(--font-mono); font-size: 1em; line-height: 1.8; color: var(--ink-2); }
.ps-diff span { display: block; padding: 0 1.4em; white-space: pre; }
.ps-diff .del { background: var(--bad-bg); }
.ps-diff .add { background: var(--blue-wash); color: var(--navy-2); }
.ps-checks { display: grid; gap: 0.5em; margin: 1.2em 0 0; padding: 0; list-style: none; font-size: 0.98em; }
.ps-checks li { display: flex; align-items: center; gap: 0.7em; }
.ps-checks li::before { content: ""; flex: none; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.8em no-repeat; }
.ps-merge { position: relative; display: flex; align-items: center; gap: 1em; margin-top: 1.4em; padding: 1.1em 1.3em; border: 1px solid var(--control-line); border-radius: 1em; }
.ps-btn { display: inline-flex; align-items: center; height: 2.9em; padding: 0 1.4em; border-radius: 0.75em; background: var(--navy); color: #fff; font-size: 1em; font-weight: 500; }
.ps-merged { font-style: normal; font-size: 0.98em; font-weight: 500; color: var(--navy-2); }
.ps-cursor { position: absolute; left: 7.5em; top: 2.2em; width: 1.5em; height: 1.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6.2 1.6L10 19z' fill='%231E1E2D' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* verify */
.ps-chart { display: flex; align-items: flex-end; gap: 1.1em; height: 9.2em; padding: 1.2em 1.6em 0; }
.ps-chart i { flex: 1; height: var(--h); border-radius: 0.4em 0.4em 0 0; background: var(--navy); transform-origin: 50% 100%; }
.ps-chart i.p { background: var(--periwinkle); }
.ps-chart i.f { background: var(--blue-wash); box-shadow: inset 0 0 0 1.5px var(--blue-wash-line); }
.ps-bill { display: flex; align-items: center; gap: 1.2em; padding: 1em 1.6em; border-top: 1px solid var(--line); font-size: 0.98em; }
.ps-bill span { font-family: var(--font-mono); color: var(--muted); }
.ps-bill b { margin-left: auto; font-family: var(--font-serif); font-size: 1.7em; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Builds: the end state is the default, so a screen is complete without
   script. Once the loop is running (site-v3.js adds .is-live when it is
   ready), a screen that is not active waits in its start state and plays
   when its step becomes active. */
.ps-art [style*="--i"] { transition: opacity .6s var(--m-ease), transform .6s var(--m-ease); transition-delay: calc(var(--i) * 110ms + 250ms); }
.v3 .loop.is-live .loop-step:not(.is-active) .ps-art [style*="--i"] { opacity: 0; transform: translateY(0.9em); transition: none; }
.v3 .loop.is-live .loop-step:not(.is-active) .ps-prov::after { transform: scale(0); }
.ps-prov::after { transition: transform .5s var(--m-ease); transition-delay: calc(var(--i) * 260ms + 700ms); }
.v3 .loop.is-live .loop-step.is-active .ps-scan { animation: ps-scan 2.6s var(--m-ease) .5s 1 both; }
@keyframes ps-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(19em); } }
.ps-diff span { transition: clip-path .7s steps(28, end); clip-path: inset(0 0 0 0); }
.v3 .loop.is-live .loop-step:not(.is-active) .ps-diff span { clip-path: inset(0 100% 0 0); transition: none; }
.ps-diff span:nth-child(1) { transition-delay: .3s; } .ps-diff span:nth-child(2) { transition-delay: .9s; } .ps-diff span:nth-child(3) { transition-delay: 1.5s; } .ps-diff span:nth-child(4) { transition-delay: 2.1s; } .ps-diff span:nth-child(5) { transition-delay: 2.5s; }
.v3 .loop.is-live .loop-step.is-active .ps-cursor { animation: ps-cursor 5.2s var(--m-ease) 2.8s 1 both; }
@keyframes ps-cursor { 0% { transform: translate(22em, 9em); opacity: 0; } 12% { opacity: 1; } 40%, 48% { transform: translate(0, 0); } 44% { transform: translate(0, 0) scale(.86); } 100% { transform: translate(0, 0); opacity: 1; } }
.v3 .loop.is-live .loop-step.is-active .ps-btn { animation: ps-press 5.2s ease 2.8s 1 both; }
@keyframes ps-press { 0%, 42% { transform: none; background: var(--navy); } 45% { transform: scale(.96); background: var(--navy-2); } 50%, 100% { transform: none; background: var(--navy-2); } }
/* "Merged" waits for the press. With reduced motion nothing plays, so it shows from the start. */
@media (prefers-reduced-motion: no-preference) {
  .v3 .loop.is-live .loop-step .ps-merged { opacity: 0; }
  .v3 .loop.is-live .loop-step.is-active .ps-merged { animation: ps-show .5s var(--m-ease) 5.4s 1 both; }
}
@keyframes ps-show { from { opacity: 0; transform: translateX(-0.6em); } to { opacity: 1; transform: none; } }
.v3 .loop.is-live .loop-step:not(.is-active) .ps-chart i { transform: scaleY(0); transition: none; }
.ps-chart i { transition: transform .9s var(--m-ease); transition-delay: calc(var(--n) * 70ms + 350ms); }

/* ---------- 02 method: the loop ----------
   Five steps and five screens. Wide, with script and motion: the section pins
   and the screens change as it is scrolled (site-v3.js adds .is-pinned).
   Otherwise: steps in a column, each with its screen under it. */
.loop-steps { display: grid; gap: clamp(56px, 7vw, 96px); margin: 0; padding: 0; list-style: none; }
.loop-step { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 56px; align-items: center; }
.loop-n { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.loop-step h3 { font-size: clamp(26px, 22px + 1vw, 38px); line-height: 1.12; letter-spacing: -0.015em; }
.loop-body p { margin-top: 14px; max-width: 30em; }
@media (max-width: 999px) {
  .loop-step { grid-template-columns: minmax(0, 1fr); }
}
/* Pinned only where the frame fits: site-v3.js asks the same question
   before it adds .is-pinned. */
@media (min-width: 1000px) and (min-height: 600px) {
  /* On a wide screen the product screen grows to the right (--loop-x). --loop-lift is the empty
     space above the frame while it is centred, which the rules after this block take back. */
  .v3 .loop.is-pinned {
    height: calc(100vh + 5 * 68vh);
    --loop-x: clamp(0px, (100vw - 1368px) / 2 - 24px, 220px);
    --loop-cw: min(var(--w-max), 100vw - 2 * var(--w-gutter));
    --loop-w: min(var(--loop-cw) * 0.62 + var(--loop-x), (100vh - var(--w-header) - 88px) * 1.5385);
    --loop-fh: max(468px, var(--loop-w) / 1.5385);
    --loop-lift: max(0px, (100vh - var(--w-header) - var(--loop-fh)) / 2 + var(--w-header));
  }
  .v3 .loop.is-pinned .loop-sticky { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-top: var(--w-header); }
  .v3 .loop.is-pinned .loop-frame { position: relative; width: 100%; }
  /* The screens are placed against .loop-frame, so nothing between is positioned. */
  .v3 .loop.is-pinned .loop-steps { display: block; width: 36%; min-height: 468px; padding-left: 36px; }
  /* the timeline: a dashed rail, a node per step, navy up to the active one */
  .v3 .loop.is-pinned .loop-frame::before { content: ""; position: absolute; left: 5px; top: 26px; bottom: 26px; width: 2px; background: var(--w-dash-y); }
  .v3 .loop.is-pinned .loop-step { position: static; display: block; padding: 12px 0; }
  .v3 .loop.is-pinned .loop-text { position: relative; cursor: pointer; }
  .v3 .loop.is-pinned .loop-text::before {
    content: ""; position: absolute; left: -36px; top: 6px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--m-dot); box-shadow: 0 0 0 4px var(--bar); transition: background-color .4s var(--m-ease), box-shadow .4s var(--m-ease);
  }
  .v3 .loop.is-pinned .loop-step.is-done .loop-text::before { background: var(--navy); }
  .v3 .loop.is-pinned .loop-step.is-active .loop-text::before { background: var(--navy); box-shadow: 0 0 0 4px var(--bar), 0 0 0 10px rgba(19, 0, 216, 0.12); }
  .v3 .loop.is-pinned .loop-n { display: inline; margin: 0 10px 0 0; }
  .v3 .loop.is-pinned .loop-step h3 { display: inline; font-size: 22px; color: var(--w-ink-3); transition: color .4s var(--m-ease), font-size .4s var(--m-ease); }
  .v3 .loop.is-pinned .loop-step.is-active h3 { font-size: clamp(28px, 22px + 1vw, 38px); color: var(--ink-2); }
  .v3 .loop.is-pinned .loop-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--m-ease), opacity .4s var(--m-ease); }
  .v3 .loop.is-pinned .loop-body > div { min-height: 0; overflow: hidden; }
  .v3 .loop.is-pinned .loop-step.is-active .loop-body { grid-template-rows: 1fr; opacity: 1; }
  /* A screen takes 62% of the frame, or less on a short screen, so that all of it shows under the header. */
  .v3 .loop.is-pinned .loop-step .pswin {
    position: absolute; top: 50%; right: calc(16px - var(--w-gutter) - var(--loop-x)); width: var(--loop-w);
    opacity: 0; visibility: hidden; transform: translateY(-46%) scale(.975);
    transition: opacity .5s var(--m-ease), transform .7s var(--m-ease), visibility 0s linear .5s;
  }
  .v3 .loop.is-pinned .loop-step.is-active .pswin { opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .5s var(--m-ease), transform .7s var(--m-ease), visibility 0s; }
}

/* ---------- 03 reliability: candidate plans, a gate, one locked output ----------
   The whole diagram is the default. With script it builds in five phases,
   in step with the five stages under it (site-v3.js sets .on per phase). */
.rel { margin: 0; }
.rel-diagram { position: relative; container-type: inline-size; aspect-ratio: 1200 / 360; margin-bottom: 12px; }
.rel-diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rl { fill: none; stroke: var(--dash); stroke-width: 2; stroke-linecap: round; }
.rl.rc { stroke: var(--periwinkle); }
.rl.rw { stroke: var(--navy); stroke-width: 3; }
.rn { fill: var(--navy); }
.rg, .rr { fill: none; stroke: var(--dash); stroke-width: 2; stroke-dasharray: 9 8; }
.rx { fill: none; stroke: var(--bad-ink); stroke-width: 2.6; stroke-linecap: round; }
.rk { fill: var(--navy); }
.rkg { fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rspin circle { fill: var(--navy); }
.rspin { animation: m-orbit 7s linear infinite; }
.rel-chip {
  position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 7.9%; height: 10%;
  border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--shadow-pop);
  font-family: var(--font-mono); font-size: 11px; font-size: clamp(9px, 0.95cqi, 12px); font-weight: 500; line-height: 1; color: var(--ink-2); white-space: nowrap;
}
.rel-chip.rel-out { width: 11.8%; height: 11.2%; background: var(--navy); box-shadow: none; color: #fff; }
.rel-label { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-size: clamp(9px, 0.9cqi, 11.5px); font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--w-ink-3); white-space: nowrap; }
.v3 .rel.is-live [data-p] { transition: opacity .5s var(--m-ease), stroke-dashoffset 1.2s var(--m-ease), stroke .6s var(--m-ease), translate .5s var(--m-ease); }
/* A dash of the path's whole length, then a gap twice as long: with a gap of
   one length a round cap leaves a dot where the next dash would begin. */
.v3 .rel.is-live path.rl { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.v3 .rel.is-live path.rl.on { stroke-dashoffset: 0; }
.v3 .rel.is-live [data-p]:not(.rl):not(.on) { opacity: 0; }
.v3 .rel.is-live .rel-chip:not(.on), .v3 .rel.is-live .rel-label:not(.on) { translate: 0 6px; }
.v3 .rel.is-live .rc.off { stroke: var(--dash); }
.v3 .rel.is-live [data-kill="1"] { transition-delay: .25s; }
.v3 .rel.is-live [data-kill="2"] { transition-delay: .8s; }
.v3 .rel.is-live [data-kill="3"] { transition-delay: 1.35s; }
.rel-cols { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 32px 0 0; list-style: none; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.rel-cols li { position: relative; }
.rel-cols li::before { content: ""; position: absolute; top: -37px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--m-dot); transition: background-color .5s var(--m-ease), box-shadow .5s var(--m-ease); }
.rel-cols li.is-on::before { background: var(--navy); box-shadow: 0 0 0 7px rgba(19, 0, 216, 0.12); }
.rel-cols h3 { font-size: clamp(19px, 17px + 0.45vw, 24px); line-height: 1.2; transition: color .5s var(--m-ease); }
.rel-cols li.is-on h3 { color: var(--navy); }
.rel-cols p { margin-top: 10px; font-size: 14.5px; line-height: 1.55; }
@media (max-width: 1000px) {
  .rel-diagram { display: none; }
  .rel-cols { grid-template-columns: minmax(0, 1fr); padding: 0; background: var(--w-dash-y) 5px 0 / 2px 100% no-repeat; }
  .rel-cols li { padding: 0 0 30px 34px; }
  .rel-cols li::before { top: 6px; }
}

/* ---------- 04 instruments: the bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-24); }
.tile {
  position: relative; grid-column: span 5; display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 28px; overflow: hidden;
  background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile);
}
.tile-wide { grid-column: span 7; }
.tile .pillar-icon { margin-bottom: 18px; }
.tile-text h3 { font-size: var(--w-h3); line-height: 1.2; }
.tile-text p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.tile-text .badge-verified { margin-top: 16px; }
.tile-link a { font-weight: 500; text-decoration: none; }
.tile-link a:hover { text-decoration: underline; }
.tile-demo, .tile > .mockup { margin-top: auto; }
.tile > .mockup { border: 1px solid var(--line); border-radius: var(--radius-14); box-shadow: none; }
.tile > .mockup .mockup-head { min-height: 38px; }
.tile > .mockup .mockup-body { padding: 16px 18px 18px; }
@media (max-width: 1000px) { .tile, .tile-wide { grid-column: 1 / -1; } }
/* a soft light that follows the pointer across a tile */
[data-glow]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s var(--m-ease);
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%), rgba(19, 0, 216, 0.075), rgba(19, 0, 216, 0) 62%);
}
[data-glow]:hover::after { opacity: 1; }
[data-glow] > * { position: relative; z-index: 1; }

.evidence { position: relative; overflow: hidden; border-radius: var(--radius-14); background: var(--sunk); }
.evidence svg { display: block; width: 100%; height: 100%; min-height: 200px; }
.tile-wide .evidence { flex: 1; }
.ev-cap { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.ev-new { stroke: var(--navy); stroke-width: 2; }
.ev-area { fill: rgba(19, 0, 216, 0.08); }
.ev-use { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.ev-label { position: absolute; right: 12px; padding: 1px 7px; border-radius: 4px; background: var(--paper); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.ev-label-new { background: var(--navy); color: #fff; }
.ev-tags { position: absolute; left: 12px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.ev-tags span { padding: 2px 8px; border-radius: 4px; background: var(--paper); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); }

/* The access a role holds: what Jetscale asks for beside what it never does,
   in two columns that fill the tile. */
.ledger {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column;
  align-content: center; gap: 12px clamp(16px, 4vw, 48px); padding: clamp(18px, 2.4vw, 32px); border-radius: var(--radius-14); background: var(--sunk);
}
.tile-wide .ledger { flex: 1; }
.ledger-h { margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--w-ink-3); }
.ledger ul { display: grid; justify-items: start; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ledger li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 9px; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.ledger li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ledger ul.no li { background: transparent; color: var(--w-ink-3); text-decoration: line-through; }
.ledger ul.no li::before { background: var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A4C' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E") center / 10px no-repeat; }

.ask { display: grid; gap: 12px; }
.ask-box { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 9px 10px 9px 18px; border: 1px solid var(--control-line); border-radius: var(--radius-20); background: var(--paper); box-shadow: var(--shadow-composer); font-size: 15px; color: var(--ink); }
.ask-q { flex: 1; min-width: 0; }
.ask-q:empty::before { content: attr(data-text); color: var(--muted); }
.ask.is-typing .ask-q::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: var(--navy); animation: w-caret 1s steps(2, start) infinite; }
@keyframes w-caret { to { visibility: hidden; } }
.ask-send { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--send-idle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9ACBD' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E") center / 15px no-repeat; transition: background-color .2s; }
.ask.has-q .ask-send { background-color: var(--send); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5m-6 6 6-6 6 6'/%3E%3C/svg%3E"); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chips button { height: 34px; padding: 0 14px; border: 1px solid var(--control-line); border-radius: var(--radius-pill); background: var(--paper); font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.ask-chips button:hover { border-color: var(--control-line-hover); }
.ask-chips button[aria-pressed="true"] { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.ask-answer { min-height: 118px; padding: 14px 16px 16px; border-radius: var(--radius-14); background: var(--sunk); }
.ask-who { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--navy); }
.ask-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ask.is-thinking .ask-who::before { animation: m-nudge 1s ease-in-out infinite; }
.ask-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.ask-note { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--w-ink-3); }

.mcp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 28px; padding: 20px; overflow: hidden; border-radius: var(--radius-14); background: var(--sunk); }
.mcp-client { grid-column: 1; justify-self: start; position: relative; display: inline-flex; align-items: center; height: 32px; margin: 5px 0; padding: 0 12px; border-radius: 8px; background: var(--paper); box-shadow: 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.mcp-client::after { content: ""; position: absolute; left: 100%; top: 50%; width: 400px; height: 2px; background: var(--w-dash-x); z-index: -1; }
.mcp-core { grid-column: 2; grid-row: 1 / span 3; position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 0 0 8px var(--sunk), 0 0 0 9px var(--blue-wash-line); }
.mcp-core svg { width: 26px; height: 35px; fill: #fff; }

/* ---------- 05 results ---------- */
.lab-sub > h2 { font-size: clamp(28px, 22px + 1.4vw, 44px); line-height: 1.1; letter-spacing: -0.018em; }
@media (max-width: 900px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 06 stack: what Jetscale works around, in orbit ---------- */
@property --spin { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.stack-top { align-items: center; margin-bottom: var(--w-head-gap); }
.stack-orbit { position: relative; container-type: inline-size; width: min(100%, 500px); aspect-ratio: 1; margin: 0 auto; }
.so-rings { position: absolute; inset: 0; width: 100%; height: 100%; }
.so-rings circle { fill: none; stroke: var(--dash); stroke-width: 1.5; stroke-dasharray: 9 8; }
.so-core { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; width: 17cqi; height: 17cqi; translate: -50% -50%; border-radius: 28%; background: linear-gradient(135deg, var(--navy), var(--navy-2)); box-shadow: 0 0 0 10px rgba(19, 0, 216, 0.08), var(--shadow-tile); }
.so-core svg { width: 36%; height: auto; fill: #fff; }
.so-ring { position: absolute; left: 50%; top: 50%; animation: so-spin var(--t, 90s) linear infinite; }
.so-ring.so-rev { animation-direction: reverse; }
@keyframes so-spin { to { --spin: 360deg; } }
/* A browser that cannot register --spin cannot turn it either: the 0deg
   keeps every chip at its place on the ring, still. */
.so-chip {
  position: absolute; left: 0; top: 0; translate: -50% -50%;
  transform: rotate(calc(var(--a) + var(--spin, 0deg))) translateX(var(--r)) rotate(calc(-1 * (var(--a) + var(--spin, 0deg))));
  display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--shadow-pop);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.so-chip.so-logo { width: 52px; height: 52px; padding: 0; border-radius: 16px; }
.so-logo img { width: 30px; height: 22px; object-fit: contain; }
@media (max-width: 1000px) { .stack-orbit { width: min(100%, 380px); } .so-chip { height: 26px; padding: 0 9px; font-size: 11px; } .so-chip.so-logo { width: 42px; height: 42px; border-radius: 13px; } }

/* ---------- 09 lab notes ---------- */
.note-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.note-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 30px; overflow: hidden;
  background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile);
  transition: translate .35s var(--m-ease);
}
.note-card:hover { translate: 0 -4px; }
.note-meta { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--dash); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--w-ink-3); }
.note-meta span { color: var(--navy); }
.note-card h3 { font-size: clamp(24px, 21px + 0.7vw, 30px); line-height: 1.12; letter-spacing: -0.015em; }
.note-card h3 a { color: inherit; text-decoration: none; }
/* The whole card is the link. The title must not be positioned or layered
   (a flex item with a z-index is its own layer), or the stretched link would
   stop at the title's box, or sit under the paragraph after it. */
.note-card > h3 { position: static; z-index: auto; }
.note-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.note-card:hover h3 a { color: var(--navy); }
.note-card p { font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .note-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- page index: a rail at the left edge, on wide screens ----------
   The rail lies over the page's margin, and on a 13-inch screen over the edge
   of the content too. Only its dots take the pointer, so it never swallows a
   click or a selection meant for the page under it. Each dot is a 24px
   target; its name is a label that shows on hover and on focus. */
.rail-index { position: fixed; left: 22px; top: 50%; z-index: 40; translate: 0 -50%; display: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s var(--m-ease), visibility 0s linear .3s; }
/* Shown while a section is current, and for as long as it holds the focus: a focused link never disappears. */
.rail-index.is-on, .rail-index:focus-within { opacity: 1; visibility: visible; transition: opacity .3s var(--m-ease), visibility 0s; }
@media (min-width: 1360px) and (min-height: 640px) { .v3 .rail-index { display: block; } }
.rail-index ol { position: relative; display: grid; gap: 15px; margin: 0; padding: 0; list-style: none; }
.rail-index ol::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: 5px; width: 2px; background: var(--w-dash-y); }
.rail-index a {
  position: relative; display: block; width: 10px; height: 10px; border-radius: 50%; pointer-events: auto;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--w-ink-3);
  transition: background-color .3s var(--m-ease), box-shadow .3s var(--m-ease);
}
.rail-index a::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.rail-index a[aria-current="true"] { background: var(--navy); box-shadow: 0 0 0 5px rgba(19, 0, 216, 0.14); }
.rail-index a span {
  position: absolute; left: 22px; top: 50%; translate: -4px -50%; padding: 4px 9px; border-radius: 6px; background: var(--paper); box-shadow: var(--shadow-pop);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--m-ease), translate .2s var(--m-ease);
}
/* Drawn from data-label, so the browser's search does not find a label nobody can see. */
.rail-index a span::after { content: attr(data-label); }
.rail-index a:hover span, .rail-index a:focus-visible span { opacity: 1; translate: 0 -50%; }

/* ---------- the opening: the pitch deck's cover ----------
   The page ground, the dashed grid and its travelling dots (motion.js draws
   canvas[data-grid]). A soft fade of the ground keeps the lines from running
   under the copy. */
.hero-paper { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) 0 0; background: var(--bar); }
.hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-paper .hero-inner { position: relative; z-index: 1; padding-bottom: clamp(64px, 8vw, 112px); }
.hero-paper .hero-inner::before {
  content: ""; position: absolute; z-index: -1; left: -8%; top: -18%; width: min(980px, 92%); height: 136%; pointer-events: none;
  background: radial-gradient(closest-side, var(--bar) 62%, rgba(243, 241, 236, 0));
}
.hero-paper h1 { max-width: 15ch; font-size: var(--w-display); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink-2); }
.hero-paper h1 .frag { display: block; }
.hero-paper h1 .frag + .frag { color: var(--navy); }
.hero-paper .hero-sub { margin-top: 28px; max-width: 54ch; font-size: var(--w-lead); line-height: 1.55; }
.hero-paper .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-paper .proof-line { margin-top: 30px; }
.hero-logos { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px 40px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid var(--line); }
.hero-logos .strip-eyebrow { flex: none; max-width: 15em; margin: 0; padding: 0; text-align: left; font-size: 11.5px; line-height: 1.5; }
.hero-logos .marquee { flex: 1; max-width: none; margin: 0; padding: 0; }
.hero-logos .marquee-track { flex-wrap: nowrap; justify-content: space-between; gap: 16px clamp(14px, 2vw, 28px); }
.hero-logos .logo-chip { flex: 0 1 auto; min-width: 0; height: 30px; }
.hero-logos .logo-chip img { height: 22px; max-width: min(112px, 100%); }
@media (max-width: 900px) {
  .hero-grid { display: none; }
  .hero-logos { flex-direction: column; align-items: flex-start; }
  .hero-logos .marquee { width: 100%; }
  .hero-logos .marquee-track { flex-wrap: wrap; justify-content: flex-start; gap: 14px 26px; }
}

/* ---------- the field stage: the tower field opens the Method section, on paper ---------- */
.field-stage { position: relative; display: flex; align-items: center; min-height: clamp(540px, 50vw, 740px); margin-bottom: clamp(24px, 4vw, 56px); }
.field-stage.can-send { cursor: pointer; }
.stage-field { position: absolute; inset: 0; width: 100%; height: 100%; }
.field-stage > .wrap { width: 100%; }
.field-stage .section-head { position: relative; z-index: 1; max-width: 460px; margin-bottom: 0; }
.field-stage .trace { right: max(var(--w-gutter), calc((100% - var(--w-max)) / 2)); bottom: 12px; }
@media (max-width: 900px) {
  .field-stage { flex-direction: column; align-items: stretch; min-height: 0; }
  .stage-field { position: static; order: 2; height: 340px; margin-top: 20px; }
  .field-stage .trace { order: 3; align-self: flex-start; margin: 12px var(--w-gutter) 0; }
}

/* ---------- one ground ----------
   Nicolas, 2026-11-10: no white page background, and sections that run into
   one another. The whole page sits on --bar, the header included, with no
   line under it. Tiles and screens stay on --paper. */
body { background: var(--bar); }
.sheet, .sheet > .section { background: var(--bar); }
.site-nav, .site-nav.scrolled { background: rgba(243, 241, 236, 0.9); border-bottom-color: transparent; }

/* ---------- the logo carousel, the clouds, the cycle, the bare chart, the Method key ---------- */
/* The logo carousel, as on the live homepage: site.js triples the set, and
   the track slides one set's width. Without script, or with reduced motion,
   the logos sit in a row. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready .hero-logos .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .reveal-ready .hero-logos .marquee-track { width: max-content; flex-wrap: nowrap; justify-content: flex-start; gap: 0 56px; padding-right: 56px; animation: w-marquee 42s linear infinite; }
  .reveal-ready .hero-logos .marquee:hover .marquee-track { animation-play-state: paused; }
  .reveal-ready .hero-logos .logo-chip { flex: none; }
  .reveal-ready .hero-logos .logo-chip img { max-width: 112px; }
}
@keyframes w-marquee { to { transform: translateX(calc(-100% / 3)); } }

/* Clouds turn over faster, and a red one can be swept clean. */
.cf-grid i { transition: background-color .45s ease-in-out, transform .3s var(--m-ease); }
/* The pointer over a red cloud is the Jetscale mark: Jetscale is what cleans it. */
.v3 .cloudfield.is-live .cf-grid i.on {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 197 263'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' fill='%231300D8' d='M196.26 56.7379L196.262 56.737V205.997L98.1308 262.735L0 156.251L98.1308 212.989V212.986L0 106.496L98.1308 163.234V163.232L0 56.7415L98.1308 113.479V113.476L166.351 74.0309L98.1308 0L196.26 56.7379ZM113.084 210.1V236.797L181.308 197.351V170.652L113.084 210.1ZM113.084 166.111V192.808L181.308 153.361V126.663L113.084 166.111ZM113.084 122.121V148.819L181.308 109.372V82.6737L113.084 122.121Z'/%3E%3C/svg%3E") 12 16, pointer;
}
.v3 .cloudfield.is-live .cf-grid i.on:hover { transform: scale(1.12); }
.cf-grid i.swept { animation: w-swept .6s var(--m-ease); }
@keyframes w-swept { 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.94) rotate(4deg); } }
.cf-hint { display: none; margin: 14px 0 0; font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3); }
.v3 .cloudfield.is-live .cf-hint { display: block; }
@media (hover: none) { .v3 .cloudfield.is-live .cf-hint { display: none; } }

/* "Breaking the cycle": three steps in a column, each handing on to the next. */
.cycle { max-width: 44em; margin: clamp(48px, 5vw, 72px) 0 0; font-family: var(--font-serif); color: var(--ink-2); }
.cycle-lead, .cycle-end { margin: 0; font-size: clamp(22px, 18px + 0.9vw, 30px); line-height: 1.3; letter-spacing: -0.01em; }
.cycle-steps { counter-reset: cycle; display: grid; gap: 0; margin: 22px 0 22px; padding: 0; list-style: none; }
.cycle-steps li {
  counter-increment: cycle; position: relative; padding: 14px 0 26px 52px;
  font-size: clamp(20px, 17px + 0.7vw, 26px); line-height: 1.3; letter-spacing: -0.01em;
}
.cycle-steps li:last-child { padding-bottom: 6px; }
.cycle-steps li::before {
  content: counter(cycle, decimal-leading-zero); position: absolute; left: 0; top: 14px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
}
/* the arrow down to the next step */
.cycle-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 16px; top: 54px; bottom: -8px; width: 2px; background: var(--w-dash-y);
}
.cycle-steps strong { font-weight: 400; color: var(--navy); }

/* The drift chart without its window: part of the page, drawn on the ground.
   Its frame draws itself first (grid, ticks, legend), then the two lines. */
.drift-bare { background: none; border: 0; box-shadow: none; border-radius: 0; }
.drift-bare .mockup-head { display: none; }
.drift-bare .mockup-body { background: none; }
.drift-bare .dl-tick, .drift-bare .dl-axis, .drift-bare .dl-legend, .drift-bare .dl-note, .drift-bare .dl-callout small { color: var(--w-ink-3); }
.drift-bare .dl-legend { border-top: 0; font-weight: 400; padding-left: 0; padding-right: 0; }
.drift-bare .dl-dot { stroke: var(--bar); }
.drift-bare .dl-dot.is-hollow { fill: var(--bar); stroke: var(--navy); }
.drift-bare .dl-box.dl-with.is-hollow { background: var(--bar); }
.drift.is-live .dl-grid, .drift.is-live .dl-base { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--m-ease) var(--d, 0s); }
.drift.is-live .dl-grid { stroke-dasharray: 0.004 0.006; opacity: 0; transition: opacity .6s var(--m-ease) var(--d, 0s); stroke-dashoffset: 0; }
.drift.is-live .dl-tick, .drift.is-live .dl-axis, .drift.is-live .dl-legend { opacity: 0; transition: opacity .6s var(--m-ease) var(--d, .3s); }
.drift.is-live.is-in .dl-base { stroke-dashoffset: 0; }
.drift.is-live.is-in .dl-grid, .drift.is-live.is-in .dl-tick, .drift.is-live.is-in .dl-axis, .drift.is-live.is-in .dl-legend { opacity: 1; }
.drift.is-live .dl-legend { transition-delay: .8s; }

/* The Method's introduction beside the field, and a key to what the field shows. */
.field-stage .section-head { max-width: 500px; }
.field-stage .lede { margin-top: 20px; }
.field-key { display: grid; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--w-ink-3); }
.field-key li { position: relative; padding-left: 28px; }
.field-key li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 13px; border-radius: 3px; }
.fk-tower::before { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(19, 0, 216, 0.35); }
.fk-excess::before { background: var(--bad-bg); box-shadow: inset 0 0 0 1.5px rgba(217, 68, 63, 0.55); }
.field-key .fk-agent::before { left: 3px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px rgba(19, 0, 216, 0.12); }

/* Every step takes the height of two lines, so the three numbers sit evenly. */
.cycle-steps li, .cycle-steps li:last-child { min-height: 84px; padding: 3px 0 0 52px; line-height: 1.25; }
.cycle-steps li::before { top: 0; }
.cycle-steps li:not(:last-child)::after { top: 40px; bottom: 6px; }
.drift-bare .dl-note { display: none; }

/* ---------- Method on small screens, unboxed comparison and calculator, Results ---------- */
/* Method on a small screen: the graphic first. Label and title, then the
   field, its key as a caption, and the paragraph last. */
@media (max-width: 900px) {
  .field-stage > .wrap, .field-stage .section-head { display: contents; }
  .field-stage .lab-index, .field-stage .h2, .field-stage .lede, .field-stage .field-key { margin-left: var(--w-gutter); margin-right: var(--w-gutter); }
  .field-stage .lab-index { order: 1; }
  .field-stage .h2 { order: 2; }
  .stage-field { order: 3; height: clamp(380px, 106vw, 560px); margin-top: 8px; }
  .field-stage .trace { position: static; order: 4; max-width: none; margin-top: 0; }
  .field-stage .field-key { order: 5; margin-top: 22px; }
  .field-stage .lede { order: 6; margin-top: 22px; }
}

/* Comparison and calculator without their boxes: on the page ground. */
.cmp, .cmp-ask, .jc-calc { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.cmp::before { content: none; }
.cmp-table thead th { border-bottom: 0; background: var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.cmp-table tbody th, .cmp-table td { border-bottom-color: var(--dash); }
.cmp-table .cmp-js { background: rgba(19, 0, 216, 0.045); }
.cmp-foot { border-top: 0; padding-left: 0; padding-right: 0; }
.cmp-ask { padding: clamp(32px, 4vw, 56px) 0 0; margin-top: clamp(32px, 4vw, 56px); background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.jc-calc { gap: 0 clamp(32px, 5vw, 80px); }
.jc-calc-left, .jc-calc-right { padding: 0; }
.jc-calc-right { background: none; color: var(--ink-2); padding-left: clamp(32px, 5vw, 80px); background: var(--w-dash-y) top left / 2px 100% no-repeat; }
.jc-calc-right.m-sheen::after { content: none; }
.jc-res-label, .jc-res-col .k, .jc-res-sub, .jc-res-note { color: var(--w-ink-3); }
.jc-res-big { color: var(--navy); }
.jc-res-big.neg { color: var(--bad-ink); }
.jc-res-col .v, .jc-trees { color: var(--ink); }
.jc-calc-right hr { background: var(--w-dash-x); }
.jc-calc-right .btn-white { background: var(--navy); border-color: var(--navy); color: #fff; }
.jc-calc-right .btn-white:hover { background: var(--navy-2); color: #fff; }
.jc-calc-right .btn-ghost { border-color: var(--control-line-hover); color: var(--ink-2); }
.jc-calc-right .btn-ghost:hover { background: rgba(19, 0, 216, 0.05); color: var(--navy); }
@media (max-width: 900px) { .jc-calc-right { padding: 32px 0 0; margin-top: 32px; background: var(--w-dash-x) top left / 100% 2px no-repeat; } }

/* Results: a small chart over each figure. */
.stat-viz { display: flex; align-items: flex-end; gap: 5px; height: 84px; margin-bottom: 26px; padding-right: 32px; }
.stat-viz i { flex: 1; max-width: 18px; height: var(--h); border-radius: 3px 3px 0 0; transform-origin: 50% 100%; transition: transform .8s var(--m-ease); transition-delay: calc(var(--n, 0) * 55ms + 250ms); }
.sv-drift i { background: var(--bad-ink); opacity: calc(0.25 + var(--n) * 0.06); }
.sv-recover i { background: var(--navy); opacity: calc(0.3 + var(--n) * 0.06); }
.js .stat-card.reveal:not(.in) .stat-viz i { transform: scaleY(0); }
/* no downside: a floor, and a dot that rests on it */
.sv-zero { position: relative; }
.sv-zero::before { content: ""; position: absolute; left: 0; right: 32px; bottom: 0; height: 2px; background: var(--w-dash-x); }
.sv-zero i { position: absolute; left: 0; bottom: -5px; flex: none; width: 12px; max-width: none; height: 12px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(19, 0, 216, 0.12); transform: none; animation: w-rest 6s var(--m-ease) infinite alternate; }
.js .stat-card.reveal:not(.in) .sv-zero i { transform: none; }
@keyframes w-rest { to { left: calc(100% - 44px); } }

/* ---------- the Amplifai logo, the closing ---------- */
/* Amplifai's mark is nearly square, so at the others' height it reads small. */
.hero-logos .logo-chip { height: 36px; }
.hero-logos .logo-chip img[alt="Amplifai"], .reveal-ready .hero-logos .logo-chip img[alt="Amplifai"] { height: 36px; max-width: none; }

/* The closing, on paper: the page ground runs into the lavender the orbits
   sit on, so the section stands out without a hard edge. */
.sheet > .section.cta-tint { background: linear-gradient(180deg, var(--bar) 0, var(--m-lavender) 220px); }

/* ============================================================================
   Inner pages
   ============================================================================
   docs/redesign-plan.md, tasks 5 to 10. A page keeps its markup and its class
   names; this layer gives them the homepage's look: one ground, no boxes,
   dashed rules, a dot where a block begins.
   ========================================================================== */
.hero-paper h1 .frag:last-child { color: var(--navy); }
.section.cta-tint { background: linear-gradient(180deg, var(--bar) 0, var(--m-lavender) 220px); }
.cta-tint .cta-block { max-width: 820px; margin: 0 auto; text-align: center; }
.cta-tint .cta-block .lede { margin-left: auto; margin-right: auto; }
.cta-tint .cta-block .hero-ctas { justify-content: center; }

/* Cards, as the homepage's tiles: paper on the ground, a soft shadow, no line. */
.cards-3, .explore-grid, .pillar-grid { display: grid; gap: var(--space-24); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.explore-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pillar-grid + .pillar-grid, .pillar-grid + .flow-strip, .cards-3 + .cards-3 { margin-top: var(--space-24); }
.card, .pillar-card {
  position: relative; display: block; padding: 28px; color: inherit; text-decoration: none;
  background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile);
}
.card h3, .pillar-card h3 { font-size: var(--w-h3); line-height: 1.2; }
.card p, .pillar-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.card-num { display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.card .mini-icon, .pillar-card .pillar-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: var(--radius-12); background: var(--blue-wash); color: var(--navy-2); }
.card-arrow { display: inline-block; margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
a.card { transition: translate .35s var(--m-ease); }
a.card:hover { translate: 0 -4px; }
a.card:hover h3 { color: var(--navy); }

/* A timeline: numbered steps in a column, a dashed line from one to the next. */
.timeline { display: grid; gap: clamp(48px, 6vw, 88px); margin: 0; padding: 0; }
.tl-step { position: relative; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 56px; align-items: center; padding-left: 56px; }
.tl-num { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 500; }
.tl-step:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 44px; bottom: calc(-1 * clamp(48px, 6vw, 88px) + 10px); width: 2px; background: var(--w-dash-y); }
.tl-step h3 { font-size: clamp(24px, 21px + 0.8vw, 32px); line-height: 1.15; letter-spacing: -0.012em; }
.tl-step p { margin-top: 12px; max-width: 30em; }
.tl-media { margin: 0; overflow: hidden; border-radius: var(--radius-14); box-shadow: 0 0 0 1px var(--line), var(--shadow-pop); background: var(--paper); }
.tl-media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .cards-3, .pillar-grid { grid-template-columns: minmax(0, 1fr); }
  .tl-step { grid-template-columns: minmax(0, 1fr); }
}
.tl-step { align-items: start; }
.tl-step > div { padding-top: 2px; }
/* The read/write flow sits on the ground too. */
.flow-strip { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
/* Section labels on inner pages are the homepage's: a number, a rule, a name. */
.cta-tint .cta-block .lab-index { justify-content: center; }

/* The rest of the Platform pages. */
.hero-alt-link { margin-top: 18px; font-size: 14.5px; }
.hero-alt-link a { font-weight: 500; }
.pillar-mockups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); align-items: start; }
.pillar-grid + .pillar-mockups, .pillar-mockups + .pillar-grid { margin-top: var(--space-24); }
.pillar-mockups > .mockup { border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile); }
.detail-stack { display: grid; gap: 14px; }
.detail-card { padding: 18px 22px; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-14); box-shadow: var(--shadow-tile); }
.detail-card p { font-size: 15.5px; line-height: 1.6; }
.detail-card strong { color: var(--ink); }
.detail-card.detail-eco { display: flex; align-items: center; gap: 12px; }
.detail-card.detail-eco svg { flex: none; color: var(--navy); }
@media (max-width: 900px) { .pillar-mockups { grid-template-columns: minmax(0, 1fr); } }
/* The live drift chart under a row of figures, as on Cloud optimization. */
.stat-grid ~ .drift-bare { margin-top: clamp(48px, 6vw, 88px); }

/* ---------- Customer results ---------- */
.stat-grid:not(.stat-grid-3-col) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid:not(.stat-grid-3-col) .stat-num { font-size: clamp(40px, 30px + 2vw, 64px); }
/* A story on the index: a wide tile, the story on one side and its figure on the other. */
.story-feature {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding: clamp(28px, 3.4vw, 48px);
  color: inherit; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile);
  transition: translate .35s var(--m-ease);
}
.story-feature + .story-feature { margin-top: var(--space-24); }
.story-feature:hover { translate: 0 -4px; }
.story-feature-industry, .story-feature-meta { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.story-feature-industry { margin-bottom: 14px; font-weight: 500; color: var(--navy); }
.story-feature h3 { font-size: clamp(24px, 21px + 0.8vw, 32px); line-height: 1.15; letter-spacing: -0.012em; }
.story-feature:hover h3 { color: var(--navy); }
.story-feature .desc { margin-top: 14px; font-size: 15.5px; line-height: 1.6; }
.story-feature-meta { margin-top: 16px; color: var(--w-ink-3); }
.story-feature-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.story-feature-stat { padding-left: clamp(24px, 3vw, 48px); background: var(--w-dash-y) top left / 2px 100% no-repeat; }
.story-feature-stat .big, .result-big-value, .kpi-value { font-family: var(--font-sans); font-weight: 300; letter-spacing: 0.01em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.story-feature-stat .big { font-size: clamp(48px, 36px + 2.6vw, 80px); line-height: 1; color: var(--navy); }
.story-feature-stat .cap { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--w-ink-3); }

/* A story page: figures at a glance, the headline result, progress, detail. */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-24); }
.kpi-card { padding: 24px; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile); }
.kpi-label { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px dashed var(--dash); font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.kpi-label svg { flex: none; color: var(--navy); }
.kpi-value { margin-top: 16px; font-size: clamp(30px, 24px + 1vw, 42px); line-height: 1.1; }
.kpi-value .unit, .result-big-value .unit { margin-left: 4px; font-size: 0.42em; font-weight: 400; color: var(--w-ink-3); }
.kpi-sub { margin-top: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.result-big { padding-top: 28px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.result-big-label, .result-big-sub { font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.result-big-label { font-weight: 500; color: var(--navy); }
.result-big-value { margin: 12px 0 10px; font-size: clamp(56px, 40px + 4vw, 112px); line-height: 1; color: var(--navy); }
.progress-stack { display: grid; gap: 22px; max-width: 760px; margin-top: clamp(40px, 4vw, 56px); }
.progress-row-head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); }
.progress-bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress-bar i { display: block; height: 100%; border-radius: 3px; background: var(--navy); }
.story-footnote { margin-top: 32px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--w-ink-3); }
@media (max-width: 1000px) {
  .stat-grid:not(.stat-grid-3-col), .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-feature { grid-template-columns: minmax(0, 1fr); }
  .story-feature-stat { padding: 24px 0 0; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
}
@media (max-width: 560px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } }
.kpi-value { font-size: clamp(26px, 20px + 0.8vw, 34px); white-space: nowrap; }

/* A row of figures always carries a small picture of each figure, as Results
   does on the homepage. These four are Customer stories'. */
.sv-three i { max-width: 34px; background: var(--navy); opacity: calc(1 - var(--n) * 0.28); }
.sv-dots { display: grid; grid-template-columns: repeat(16, 8px); grid-auto-rows: 8px; gap: 6px; align-content: end; justify-content: start; }
.sv-dots i { flex: none; width: 8px; max-width: none; height: 8px; border-radius: 50%; background: var(--navy); opacity: 0.55; transform: none; }
.sv-dots i:nth-child(3n) { opacity: 1; }
.js .stat-card.reveal:not(.in) .sv-dots i { transform: none; }
.sv-ticks { gap: 3px; }
.sv-ticks i { max-width: 4px; border-radius: 2px 2px 0 0; background: var(--navy); opacity: 0.6; }
/* under five weeks: five weeks marked on a line, the dot short of the last */
.sv-weeks { position: relative; align-items: flex-end; gap: 0; }
.sv-weeks i { flex: 1; max-width: none; height: 10px; border-radius: 0; border-left: 2px solid var(--dash); border-bottom: 2px solid var(--dash); background: none; transform: none; }
.sv-weeks i:last-of-type { border-right: 2px solid var(--dash); }
.js .stat-card.reveal:not(.in) .sv-weeks i { transform: none; }
.sv-weeks b { position: absolute; left: calc((100% - 32px) * 0.86); bottom: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 6px rgba(19, 0, 216, 0.12); }

/* ---------- a customer story ---------- */
/* Its headline is a sentence, so it is set smaller than a page's title. */
.hero-story h1 { max-width: 20em; font-size: clamp(32px, 23px + 2.1vw, 56px); line-height: 1.08; letter-spacing: -0.02em; }
.hero-story h1 .frag { display: inline; color: var(--navy); }
/* The numbers at a glance: a row on the ground, a picture over each. */
.kpi-grid { gap: 0; padding-top: 2px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.kpi-card { padding: 34px 28px 8px 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.kpi-card + .kpi-card { padding-left: 28px; background: var(--w-dash-y) top left / 2px 100% no-repeat; }
.kpi-label { padding-bottom: 0; border-bottom: 0; font-weight: 400; color: var(--w-ink-3); }
.kpi-label svg { display: none; }
.kpi-value { margin-top: 10px; font-size: clamp(30px, 22px + 1.2vw, 44px); line-height: 1.05; white-space: normal; }
.kpi-value .unit { display: inline-block; white-space: nowrap; }
.kpi-sub { margin-top: 14px; }
.sv-share { gap: 4px; }
.sv-share i { max-width: 12px; height: 46%; border-radius: 3px; background: var(--track); }
.sv-share i.f { background: var(--navy); }
.sv-share i.h { background: var(--navy); opacity: 0.4; }
.sv-dots-big { grid-template-columns: repeat(3, 20px); grid-auto-rows: 20px; gap: 12px; }
.sv-dots-big i { width: 20px; height: 20px; opacity: 1; }
.sv-weeks b { left: calc((100% - 44px) * var(--at, 0.86)); }
/* What was done, what came of it: numbered lines on the ground, not cards. */
.detail-stack { counter-reset: detail; gap: 0; max-width: 920px; background: var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.detail-card, .detail-stack > .card { counter-increment: detail; position: relative; display: block; padding: 22px 0 22px 64px; background: var(--w-dash-x) top left / 100% 2px no-repeat; border: 0; border-radius: 0; box-shadow: none; }
.detail-card::before, .detail-stack > .card::before { content: counter(detail, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.detail-card p, .detail-stack > .card p { max-width: none; margin-top: 0; font-size: 16.5px; line-height: 1.6; }
.detail-card strong, .detail-stack > .card strong { font-family: var(--font-serif); font-size: 1.22em; font-weight: 400; letter-spacing: -0.008em; color: var(--ink); }
@media (max-width: 1000px) {
  .kpi-card:nth-child(odd) { padding-left: 0; background: none; }
  .kpi-card { padding-bottom: 28px; }
}
@media (max-width: 560px) { .kpi-card + .kpi-card { padding-left: 0; background: var(--w-dash-x) top left / 100% 2px no-repeat; } }
/* A line about the footprint keeps its number and its indent; the leaf opens the sentence. */
.detail-card.detail-eco { display: block; }
.detail-card.detail-eco svg { float: left; width: 18px; height: 18px; margin: 5px 8px 0 0; color: var(--mint-ink); }

/* ---------- Platform pages, second pass ---------- */
/* Integrations: the business-unit statement beside a picture of what it says. */
.bu-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bu-split .section-head { margin-bottom: 0; }
.bu-link { margin-top: 22px; font-weight: 600; }
.bu-tree { display: block; width: 100%; max-width: 420px; height: auto; justify-self: end; overflow: visible; }
.bu-tree .l { fill: none; stroke: var(--dash); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.bu-tree .n, .bu-tree .a { fill: var(--bar); stroke: var(--dash); stroke-width: 2; }
.bu-tree .root { stroke: var(--ink-2); }
.bu-tree .n.on { fill: var(--blue-wash); stroke: var(--navy); }
.bu-tree .a.on { fill: var(--navy); stroke: var(--navy); }
.bu-tree .u { fill: var(--navy); }
@media (max-width: 900px) {
  .bu-split { grid-template-columns: minmax(0, 1fr); }
  .bu-tree { justify-self: start; max-width: 340px; }
}
/* A tile named after a cloud carries its mark, and its name in navy. */
.provider-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--navy); }
.provider-logo { width: 28px; height: 22px; flex: none; object-fit: contain; }
/* Two connection tiles share the row equally. */
.int-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .int-grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Inner pages: things that draw once as they arrive ---------- */
/* Every start state waits for .reveal-ready, so a page whose script never
   takes over shows everything, and for a visitor who has not asked for less
   motion. */
.int-live { flex: none; align-self: center; position: relative; width: 8px; height: 8px; margin-left: auto; margin-right: 6px; border-radius: 50%; background: var(--mint-ink); }
.mcp-ask { max-width: 720px; margin: clamp(32px, 4vw, 56px) auto 0; }
.code-block .ln.del.is-struck { text-decoration: line-through; text-decoration-color: var(--bad-ink); }
.bu-tree .u { opacity: 0; }
.bu-tree .unit.on .n { fill: var(--blue-wash); stroke: var(--navy); }
.bu-tree .unit.on .a { fill: var(--navy); stroke: var(--navy); }
.bu-tree .unit.on .u { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* small charts over figures */
  .reveal-ready .kpi-card.reveal:not(.in) .stat-viz i { transform: scaleY(0); }
  .stat-viz.sv-dots i { transition: opacity .35s var(--m-ease), transform .35s var(--m-ease); transition-delay: calc(var(--i, 0) * 14ms + 250ms); }
  .stat-viz.sv-dots-big i { transition-delay: calc(var(--i, 0) * 110ms + 250ms); }
  .reveal-ready .reveal:not(.in) .stat-viz.sv-dots i { opacity: 0; transform: scale(0.2); }
  .stat-viz.sv-weeks b { transition: left 1.3s var(--m-ease) .35s; }
  .reveal-ready .reveal:not(.in) .stat-viz.sv-weeks b { left: 0; }
  /* progress bars */
  .progress-bar i { transform-origin: 0 50%; transition: transform 1.2s var(--m-ease) .3s; }
  .progress-stack > div + div .progress-bar i { transition-delay: .55s; }
  .reveal-ready .progress-stack.reveal:not(.in) .progress-bar i { transform: scaleX(0); }
  /* numbered lines: the rule draws, then the line settles */
  .reveal-ready .detail-card.reveal, .reveal-ready .detail-stack > .card.reveal {
    transition: opacity var(--m-in) var(--m-ease), transform var(--m-in) var(--m-ease), background-size .9s var(--m-ease);
    transition-delay: var(--rd, 0ms);
  }
  .reveal-ready .detail-card.reveal:not(.in), .reveal-ready .detail-stack > .card.reveal:not(.in) { background-size: 0 2px; }
  /* the organization picture builds from the top, then its units take turns */
  .bu-tree .l, .bu-tree .root, .bu-tree .unit { transition: opacity .6s var(--m-ease); transition-delay: calc(var(--n, 0) * 160ms + 300ms); }
  .bu-tree .l { transition-delay: calc(var(--n, 0) * 500ms + 200ms); }
  .bu-tree .unit { transition-delay: calc(var(--n, 0) * 160ms + 500ms); }
  .bu-tree .n, .bu-tree .a, .bu-tree .u { transition: fill .5s var(--m-ease), stroke .5s var(--m-ease), opacity .5s var(--m-ease); }
  .reveal-ready .bu-tree.reveal:not(.in) :is(.l, .root, .unit) { opacity: 0; }
  /* a code change being written */
  .code-block .ln.is-wait { visibility: hidden; }
  .code-block .ln.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: currentColor; animation: w-caret .9s steps(1) infinite; }
  /* a connection that is live says so twice, then rests */
  .int-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; }
  .reveal.in .int-live::after { animation: m-live 1.2s var(--m-ease) .6s 2; }
}

/* ---------- Resources: the blog, an article, the questions page ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
@media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } }
.blog-card { display: block; overflow: hidden; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-14); box-shadow: var(--shadow-tile); color: inherit; text-decoration: none; transition: translate .25s var(--m-ease); }
.blog-card:hover { translate: 0 -4px; text-decoration: none; }
.blog-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { padding: 20px 24px 26px; }
.blog-card-date { font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.blog-card h3 { margin-top: 10px; font-family: var(--font-serif); font-size: clamp(22px, 20px + 0.5vw, 27px); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; color: var(--ink); }
.blog-card:hover h3 { color: var(--navy); }
/* An article reads in one column, title included. */
.hero-post > .wrap { max-width: 760px; }
.hero-post { padding-bottom: clamp(28px, 3vw, 44px); }
.blog-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: clamp(32px, 4vw, 48px); border-radius: var(--radius-14); }
.blog-article { font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.blog-article h2 { margin: 52px 0 16px; padding-top: 30px; background: var(--w-dash-x) top left / 100% 2px no-repeat; font-family: var(--font-serif); font-size: clamp(26px, 23px + 0.8vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.blog-article h2:first-child { margin-top: 0; padding-top: 0; background: none; }
.blog-article p { max-width: none; margin-bottom: 20px; }
.blog-article strong { font-weight: 600; color: var(--ink); }
.blog-back { margin-top: 48px; padding-top: 28px; background: var(--w-dash-x) top left / 100% 2px no-repeat; font-weight: 600; }
/* The questions page: its groups are the page's numbered sections. */
.faq-index ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.faq-index a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border: 1px solid var(--control-line); border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.faq-index a:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }
.faq-reviewed { margin: 22px 0 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.faq-page .faq-body { padding-top: clamp(8px, 2vw, 24px); counter-reset: faq-group; }
.faq-page .faq-group { counter-increment: faq-group; scroll-margin-top: 96px; }
.faq-page .faq-group + .faq-group { margin-top: clamp(64px, 7vw, 104px); }
.faq-page .faq-group-title { max-width: 920px; margin: 0 0 22px; font-family: var(--font-serif); font-size: clamp(30px, 25px + 1.2vw, 44px); font-weight: 400; line-height: 1.1; letter-spacing: -0.018em; color: var(--ink); }
.faq-page .faq-group-title::before { content: counter(faq-group, decimal-leading-zero); display: block; margin-bottom: 14px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--navy); }

/* Blog cards pop up one by one; site-v3.js settles each title out of noise. */
@media (prefers-reduced-motion: no-preference) {
  .js .blog-card.reveal { transition: opacity var(--m-in) var(--m-ease) var(--rd, 0ms), transform var(--m-in) var(--m-ease) var(--rd, 0ms), translate .25s var(--m-ease); }
  .reveal-ready .blog-card.reveal:not(.in) { transform: translateY(28px) scale(0.95); }
}

/* ---------- About: company, team, partners, careers, contact ---------- */
.pillar-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pillar-grid.cols-3 { grid-template-columns: minmax(0, 1fr); } }
.founding-panel:hover, .contact-panel:hover { translate: none; }
.founding-panel:hover h3, .contact-panel:hover h3 { color: inherit; }
/* people */
.team-card { text-align: center; }
.team-avatar, .team-portrait { overflow: hidden; border-radius: 50%; background: var(--sunk); }
.team-avatar { width: 128px; height: 128px; margin: 4px auto 18px; }
.team-avatar img, .team-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card .team-title { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy); }
.team-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.team-people-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .team-people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .team-people, .team-people-featured { grid-template-columns: minmax(0, 1fr); } }
.team-person { display: flex; flex-direction: column; padding: 26px 26px 24px; background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-14); box-shadow: var(--shadow-tile); }
.team-portrait { width: 84px; height: 84px; margin-bottom: 18px; }
.team-person-featured .team-portrait { width: 116px; height: 116px; }
.team-person h3 { font-family: var(--font-serif); font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; color: var(--ink); }
.team-person-featured h3 { font-size: 30px; }
.team-person .team-role { margin-top: 6px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.team-person .team-location { margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3); }
.team-person .team-summary { margin: 14px 0 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.team-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; }
.team-tags li, .role-tag { padding: 4px 12px; border: 1px solid var(--control-line); border-radius: var(--radius-pill); font-size: 12.5px; color: var(--ink-2); }
.team-person .team-link { margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); text-decoration: none; }
.team-person .team-link:hover { text-decoration: underline; }
/* partners and investors */
.partner-grid { display: grid; grid-template-columns: minmax(0, 640px); gap: var(--space-24); }
.partner-card { display: flex; flex-direction: column; }
.partner-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; margin-bottom: 20px; }
.partner-logo, .investor-logo { display: block; width: auto; max-width: 60%; height: 46px; object-fit: contain; object-position: left center; }
.investor-logo--bdc { height: 50px; }
.investor-logo--diagram { height: 30px; }
.status-chip { flex: none; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--blue-wash); font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--navy); }
.partner-card .partner-product { margin: 6px 0 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.partner-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; padding-top: 18px; }
.partner-links .card-arrow { margin-top: 0; }
/* the round: its figure on the ground, the two leads beside it */
.funding-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-24); align-items: stretch; }
@media (max-width: 1000px) { .funding-grid { grid-template-columns: minmax(0, 1fr); } }
.funding-stat { align-self: center; padding: 28px 0; background: var(--w-dash-x) top left / 100% 2px no-repeat, var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.funding-stat-label, .funding-stat-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.funding-stat-label { font-weight: 500; color: var(--navy); }
.funding-amount { margin: 10px 0 8px; font-size: clamp(64px, 44px + 4vw, 112px); font-weight: 300; line-height: 1; letter-spacing: 0.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.funding-currency, .funding-unit { font-size: 0.5em; font-weight: 400; }
.funding-currency { vertical-align: 0.7em; margin-right: 0.06em; }
.press { margin-top: clamp(48px, 5vw, 72px); }
.press-heading { margin-bottom: 14px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--navy); }
.press-list { margin: 0; padding: 0; list-style: none; background: var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.press-list li { background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.press-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto auto; align-items: baseline; gap: 8px 24px; padding: 20px 0; color: inherit; text-decoration: none; }
.press-item:hover { text-decoration: none; }
.press-outlet, .press-date, .press-lang { font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.press-outlet { font-weight: 500; color: var(--ink-2); }
.press-headline { font-family: var(--font-serif); font-size: 21px; font-style: normal; line-height: 1.25; color: var(--ink); }
.press-item:hover .press-headline, .press-item:focus-visible .press-headline { color: var(--navy); }
.press-date { white-space: nowrap; }
.press-arrow { color: var(--navy); }
@media (max-width: 720px) { .press-item { grid-template-columns: minmax(0, 1fr) auto; } .press-headline { grid-column: 1 / -1; } }
/* careers and contact */
.empty-state { max-width: 640px; padding-top: 26px; background: var(--w-dash-x) top left / 100% 2px no-repeat; }
.empty-state .mini-icon { margin-bottom: 14px; }
.empty-state h3 { margin-bottom: 8px; font-size: 26px; }
.empty-state p { font-size: 15.5px; line-height: 1.6; }
.demo-form-simple { max-width: 480px; }
.demo-form-simple .form-grid { grid-template-columns: minmax(0, 1fr); }
.role-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Contact: the invitation on the ground, the form as the one tile beside it. */
.contact-panel { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px clamp(40px, 7vw, 112px); align-items: start; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.contact-panel .h2 { font-size: clamp(32px, 26px + 1.4vw, 48px); }
.contact-panel .desc { max-width: 40ch; font-size: 17px; }
.contact-lines { display: grid; margin-top: 36px; background: var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.contact-lines > * { padding: 18px 0; background: var(--w-dash-x) top left / 100% 2px no-repeat; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.contact-lines a { font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.contact-panel .role-tags { margin-top: 24px; }
.contact-panel .demo-form { padding: clamp(24px, 3vw, 40px); background: var(--paper); border: 1px solid #fff; border-radius: var(--radius-18); box-shadow: var(--shadow-tile); }
.contact-panel .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-panel .form-submit-row, .contact-panel .form-trust { grid-column: 1 / -1; }
.contact-panel .field textarea { min-height: 148px; }
@media (max-width: 900px) { .contact-panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .contact-panel .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Legal: one reading column on the ground ---------- */
.hero.legal { padding-bottom: clamp(72px, 8vw, 120px); }
.legal-inner { max-width: 760px; }
.legal h1 { font-size: clamp(40px, 30px + 2.4vw, 64px); }
.legal .hero-sub { margin-top: 16px; }
.legal-updated { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.legal-callout { margin-top: 22px; padding: 4px 0 4px 18px; border-left: 2px solid var(--navy); }
.legal-callout p { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.legal-toc { margin: clamp(32px, 4vw, 48px) 0; padding: 24px 0; background: var(--w-dash-x) top left / 100% 2px no-repeat, var(--w-dash-x) bottom left / 100% 2px no-repeat; }
.legal-toc h2 { margin-bottom: 14px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: var(--navy); }
.legal-toc ol { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-toc li { counter-increment: toc; display: flex; gap: 12px; padding: 4px 0; break-inside: avoid; font-size: 15px; line-height: 1.5; }
.legal-toc li::before { content: counter(toc, decimal-leading-zero); flex: none; padding-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--w-ink-3); }
.legal-toc a { color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover { color: var(--navy); text-decoration: underline; }
.legal-body > section { padding-top: clamp(28px, 3vw, 40px); background: var(--w-dash-x) top left / 100% 2px no-repeat; margin-top: clamp(44px, 5vw, 64px); scroll-margin-top: 96px; }
.legal-body h2 { margin-bottom: 14px; font-family: var(--font-serif); font-size: clamp(26px, 23px + 0.8vw, 34px); font-weight: 400; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.legal-body h3 { margin: 26px 0 8px; font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.legal-body p, .legal-body li { max-width: none; font-size: 16px; line-height: 1.72; color: var(--ink-2); }
.legal-body :is(p, ul, ol, div, table) + p { margin-top: 14px; }
.legal-body ul, .legal-body ol { display: grid; gap: 8px; margin: 12px 0 0 20px; }
.legal-body a { color: var(--navy); }
.legal-body strong { font-weight: 600; color: var(--ink); }
.legal-table-wrap { margin-top: 18px; overflow-x: auto; }
.legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.legal-table th, .legal-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table th { font-family: var(--font-mono); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--navy); border-bottom-color: var(--ink-2); }
.legal-table td { line-height: 1.6; color: var(--ink-2); }
.legal-table code { font-family: var(--font-mono); font-size: 13px; }
.consent-reopen { margin-top: 18px; }
.consent-reopen-note { margin-top: 10px; font-size: 14px; color: var(--w-ink-3); }
.legal-body > section:first-child { margin-top: 0; padding-top: 0; background: none; }
/* The three steps each keep to one line where the page is wide enough. */
.cycle { max-width: 60em; }
.cycle-lead, .cycle-end { max-width: 44rem; }
/* A loop that follows its section's heading directly (no field between)
   starts higher, so the heading is not left above an empty half screen. */
@media (min-width: 1000px) and (min-height: 600px) {
  .v3 .wrap + .loop.is-pinned { margin-top: min(0px, 40px - var(--loop-lift)); margin-bottom: min(0px, 116px - var(--loop-lift)); }
  .v3 .field-stage + .loop.is-pinned { margin-top: min(0px, 56px - var(--loop-lift)); }
}
/* The note shown when every red cloud has been swept. It covers the clouds
   only and lets them show through, so red is seen coming back behind it. */
.cf-stage { position: relative; }
.cf-win[hidden] { display: none; }
.cf-win {
  position: absolute; inset: -10px; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 20px clamp(20px, 8%, 44px); border-radius: var(--radius-12, 12px);
  background: rgba(255, 255, 255, 0.74); box-shadow: 0 0 0 1px var(--line), var(--shadow-pop);
}
.cf-win-t { margin: 0; font-family: var(--font-serif); font-size: clamp(20px, 16px + 0.8vw, 28px); line-height: 1.15; color: var(--navy); }
.cf-win-b { margin: 0; max-width: 30em; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.cf-close { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.cf-close:hover { background: rgba(19, 0, 216, 0.08); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .cf-win { animation: cf-win .45s var(--m-ease) both; }
  @keyframes cf-win { from { opacity: 0; transform: translateY(8px); } }
}
@media (max-width: 560px) { .cf-win-t { font-size: 18px; } .cf-win-b { font-size: 13px; line-height: 1.35; } }

/* ---------- three in a row with a picture over each, for things that are not figures ----------
   The figures row's grid and pictures (.stat-grid, .stat-viz), carrying a
   sentence or a short note where the figure would be. */
.cycle-grid { list-style: none; margin: 28px 0 0; padding-left: 0; }
.cycle-t { max-width: 17em; font-family: var(--font-serif); font-size: clamp(20px, 17px + 0.6vw, 26px); line-height: 1.25; letter-spacing: -0.01em; color: var(--ink-2); }
.cycle-t strong { font-weight: 400; color: var(--navy); }
.cycle-after { margin-top: clamp(56px, 6vw, 88px); }
.stat-card h3 { font-size: var(--w-h3); line-height: 1.2; }
.stat-card h3 + p { margin-top: 10px; max-width: 34ch; font-size: 15.5px; line-height: 1.6; }

/* Entropy: spend climbs, a cleanup knocks it back, it climbs again. */
.sv-saw { gap: 4px; }
.sv-saw i { background: var(--w-bad-fill); }
/* The gap: one line climbs, the other stays down, and the space between fills. */
.sv-gap svg { width: 100%; height: 100%; overflow: visible; }
.sv-gap path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sv-gap .g-red { stroke: var(--w-bad-fill); }
.sv-gap .g-navy { stroke: var(--navy); }
.sv-gap .g-fill { fill: var(--w-bad-fill); opacity: 0.12; stroke: none; }
/* The continuous fix: a dot that keeps going round the mark. */
.sv-loop { position: relative; align-items: center; }
.sv-loop i { position: relative; transform-origin: 50% 50%; flex: none; width: 78px; max-width: none; height: 78px; border: 2px dashed var(--dash); border-radius: 50%; background: none; transform: none; }
.js .stat-card.reveal:not(.in) .sv-loop i { transform: none; }
.sv-loop i::after { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px rgba(19, 0, 216, 0.12); }
.sv-loop svg { position: absolute; left: 28px; top: 50%; width: 22px; height: 30px; margin-top: -15px; fill: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .sv-gap svg { clip-path: inset(-10px 0 -10px 0); transition: clip-path 1.6s var(--m-ease) .3s; }
  .reveal-ready .reveal:not(.in) .sv-gap svg { clip-path: inset(-10px 100% -10px 0); }
  .sv-loop i { animation: sv-loop 9s linear infinite; }
  @keyframes sv-loop { to { rotate: 360deg; } }
}

/* The three steps of "breaking the cycle": a line icon over each, drawn once on arrival. */
.cycle-ico { height: 84px; margin-bottom: 26px; }
.cycle-ico svg { display: block; width: 84px; height: 84px; overflow: visible; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cycle-ico .a { stroke-width: 2.8; }
.cycle-ico .w { fill: var(--blue-wash-line); stroke: none; }
.cycle-ico .r { fill: var(--w-bad-fill); opacity: 0.28; stroke: none; }
.cycle-ico .d { stroke: var(--w-ink-3); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0.6; }
.notes-viz { margin-top: clamp(56px, 6vw, 88px); }
@media (prefers-reduced-motion: no-preference) {
  .cycle-ico .l { stroke-dasharray: 1; transition: stroke-dashoffset .8s var(--m-ease) calc(var(--k, 0) * 150ms + 350ms), opacity .2s ease calc(var(--k, 0) * 150ms + 350ms); }
  .cycle-ico .w, .cycle-ico .r { transition: opacity .6s ease 1.2s; }
  .reveal-ready .reveal:not(.in) .cycle-ico .l { stroke-dashoffset: 1; opacity: 0; }
  .reveal-ready .reveal:not(.in) .cycle-ico .w, .reveal-ready .reveal:not(.in) .cycle-ico .r { opacity: 0; }
}
/* A little air between the three stack tiles and the flow under them. */
.int-grid + .flow-strip { margin-top: clamp(36px, 4vw, 52px); }
/* The calculator keeps two dashed lines: the slider's track and the divider
   between its halves. The rules between its rows are spacing only. */
.jc-calc hr, .jc-calc-right hr { background: none; }

/* ---------- where each tool stops: the comparison as a picture ----------
   Five steps across the top, a lane per kind of tool. A lane's line runs as
   far as that tool goes. The table it summarises sits in .cmp-more below. */
.stops { --who: 250px; position: relative; margin: 0; }
.stops-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 0 var(--who); padding: 0 0 18px; list-style: none; text-align: center; }
.stops-path li { display: flex; flex-direction: column; gap: 6px; padding: 0 6px; }
.stops-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy); }
.stops-t { font-family: var(--font-serif); font-size: clamp(16px, 13px + 0.5vw, 21px); line-height: 1.15; color: var(--ink-2); }
.stops-lanes { margin: 0; padding: 0; list-style: none; }
.stops-lane { display: grid; grid-template-columns: var(--who) minmax(0, 1fr); align-items: center; padding: 26px 0 24px; background: var(--w-dash-x) top left / 100% 2px no-repeat; color: var(--w-ink-3); }
.stops-who { grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-right: 24px; }
.stops-who b { font-family: var(--font-serif); font-size: var(--w-h3); font-weight: 400; line-height: 1.15; color: var(--ink-2); }
.stops-who span { font-size: 14px; line-height: 1.4; }
.stops-chip { margin-top: 8px; padding: 3px 9px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 11.5px; font-style: normal; font-weight: 500; background: var(--chip); color: var(--ink-2); }
.stops-chip.is-ro { background: var(--blue-wash-line); color: var(--navy); }
.stops-chip.is-rw { background: var(--bad-bg); color: var(--w-bad-fill); }
.stops-track { position: relative; height: 30px; }
.stops-line, .stops-dash { position: absolute; top: 50%; left: 10%; height: 3px; margin-top: -1.5px; border-radius: 2px; transform-origin: 0 50%; }
.stops-line { width: calc(max(0, var(--k) - 1) * 20%); background: currentColor; }
/* the line ends in a short bar: this is where the tool stops */
.stops-line::after { content: ""; position: absolute; right: -3px; top: -8px; width: 3px; height: 19px; border-radius: 2px; background: currentColor; }
.stops-dash { left: calc(10% + (var(--k) - 1) * 20%); width: calc((var(--dk) - var(--k)) * 20%); background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 12px); }
.stops-node { position: absolute; left: var(--x); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--dash); border-radius: 50%; background: var(--bar); }
.stops-node.on { border-color: currentColor; background: currentColor; }
.stops-node.half { border-color: currentColor; background: linear-gradient(90deg, currentColor 50%, var(--bar) 50%); }
.stops-node.skip { border-color: var(--w-bad-fill); border-style: dashed; }
.stops-note { grid-column: 2; margin: 10px 0 0 var(--at); max-width: 34em; padding-right: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.stops-lane.is-dash .stops-line::after, .stops-lane.is-agent .stops-line::after { display: block; }
.stops-lane.is-agent .stops-line::after, .stops-lane.is-rate .stops-line { display: none; }
.stops-lane.is-js { color: var(--navy); }
.stops-lane.is-js .stops-who b { color: var(--navy); }
.stops-lane.is-js .stops-line { height: 5px; margin-top: -2.5px; }
.stops-lane.is-js .stops-line::after { display: none; }
.stops-lane.is-js .stops-node { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 5px rgba(19, 0, 216, 0.12); }
.stops-lane.is-js .stops-note { color: var(--navy); font-weight: 500; }
.stops-foot { padding-top: 16px; background: var(--w-dash-x) top left / 100% 2px no-repeat; font-family: var(--font-mono); font-size: 12.5px; color: var(--w-ink-3); }
.stops + .cmp-ask { margin-top: clamp(40px, 5vw, 64px); }
.cmp-more { margin-top: clamp(32px, 4vw, 48px); }
.cmp-more > summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 13.5px; font-weight: 500; color: var(--navy); }
.cmp-more > summary::-webkit-details-marker { display: none; }
.cmp-more > summary::after { content: "+"; font-size: 18px; line-height: 1; }
.cmp-more[open] > summary::after { content: "\2212"; }
.cmp-more > summary:hover span { text-decoration: underline; text-underline-offset: 4px; }
.cmp-more-lede { margin: 18px 0 24px; max-width: 44em; font-size: 15.5px; }
@media (prefers-reduced-motion: no-preference) {
  .stops-line, .stops-dash { transition: transform 1s var(--m-ease) calc(var(--d, 0ms) + 300ms); }
  .stops-dash { transition-delay: calc(var(--d, 0ms) + 1100ms); }
  .stops-node.on, .stops-node.half, .stops-note { transition: opacity .5s ease calc(var(--d, 0ms) + 500ms); }
  .stops-note { transition-delay: calc(var(--d, 0ms) + 1100ms); }
  .reveal-ready .stops.reveal:not(.in) .stops-line, .reveal-ready .stops.reveal:not(.in) .stops-dash { transform: scaleX(0); }
  .reveal-ready .stops.reveal:not(.in) .stops-node.on, .reveal-ready .stops.reveal:not(.in) .stops-node.half, .reveal-ready .stops.reveal:not(.in) .stops-note { opacity: 0; }
}
@media (max-width: 820px) {
  .stops { --who: 0px; }
  .stops-t { font-size: 12.5px; font-family: var(--font-sans); }
  .stops-path li { padding: 0 2px; }
  /* "changement" is wider than a fifth of a phone row, so it overflows into
     "équipe" and the two read as one word. Shrink only the French labels,
     and only enough that the longest word stays inside its column. */
  html[lang="fr-CA"] .stops-path { container-type: inline-size; }
  html[lang="fr-CA"] .stops-path li { min-width: 0; }
  html[lang="fr-CA"] .stops-t { font-size: clamp(8.5px, 2.7cqi, 12.5px); overflow-wrap: break-word; }
  .stops-lane { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .stops-who { grid-row: auto; padding-right: 0; }
  .stops-note { grid-column: 1; margin: 0; }
}
/* The vendor-agent lane's note is the warning in this picture. */
.stops-lane.is-agent .stops-note { color: var(--w-bad-fill); font-weight: 500; }
/* A page's opening note, between the hero and section 01: a statement set
   left in the headline face, then the paragraph that follows from it. */
.section.intro-note { padding: clamp(40px, 4vw, 56px) 0; }
.intro-lead { max-width: 24em; font-family: var(--font-serif); font-size: clamp(24px, 18px + 1.2vw, 36px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink-2); }
.intro-note .lede { max-width: 760px; margin-top: 20px; }
/* The dot grid over a figure is 218px wide: in a half-width column on a phone it gets smaller dots in fewer columns. */
@media (max-width: 600px) {
  .sv-dots:not(.sv-dots-big) { grid-template-columns: repeat(11, 6px); grid-auto-rows: 6px; gap: 4px; }
  .sv-dots:not(.sv-dots-big) i { width: 6px; height: 6px; }
}

/* The not-found page. h1 has no size of its own outside a hero, so the
   headline would otherwise inherit the 16px body size. The locale rule is
   only for the bucket-root error document, which carries both languages:
   the head script sets data-404-lang before this sheet loads. Source pages
   do not use data-404-locale, and without JavaScript the French block stays
   hidden so a missing URL still shows the English page. */
.not-found h1 {
  max-width: 16em;
  font-size: clamp(40px, 30px + 2.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
[data-404-locale="fr"] { display: none; }
html[data-404-lang="fr"] [data-404-locale="en"] { display: none; }
html[data-404-lang="fr"] [data-404-locale="fr"] { display: block; }