/* ==========================================================================
   GREYWICK KIT · greywick.css
   The Hybrid look (version 7) as a reusable stylesheet.
   Base: asset.framer.ai, measured on every page (home, contact, privacy
   policy, 404). One left-aligned 1080 column, flat #131517 tiles at 4px
   radius, Host Grotesk at -0.04em, a 14x8 accent capsule per section and the
   breathing dot vignette.
   On top: Strand's motion and colour touches (dark graphic stages in image
   slots, dotted turning outlines, spectral end lines, glitching glyphs, the
   rainbow blur band) and Asset's fade-and-glide scroll reveal.
   Order: tokens, base, page frame, elements, sections, stages and motion,
   then motion graphics (section 9) and the full-site parts (section 10).
   Pair with greywick.js. Everything you'd retune lives in :root.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  color-scheme: dark;
  interpolate-size: allow-keywords;   /* lets <details> animate to height:auto */

  /* ---- Colour: surfaces ---------------------------------------------------- */
  --bg:              #080a09;   /* page, nav bar, mobile sheet (slightly green black) */
  --surface:         #131517;   /* every card, tile, accordion + FAQ item */
  --surface-2:       #232326;   /* secondary button, form fields, dividers, closed bar/dot */
  --line:            #303131;   /* 1px outlines, secondary hover, bar/dot hover */
  --glyph-track:     #6b6e72;   /* figure-glyph trace lines: mid grey, never near-black */
  --line-nav:        #222222;   /* nav bottom hairline: the only full-width line in Asset */

  /* ---- Colour: text -------------------------------------------------------- */
  --text:            #ffffff;                /* headings, names, questions */
  --text-2:          rgba(255,255,255,.8);   /* body, ledes, links, tags, labels */
  --text-3:          rgba(255,255,255,.7);   /* tile labels, notes, placeholders */
  --text-on-light:   #08090a;                /* on white buttons */

  /* ---- Colour: buttons and focus ------------------------------------------- */
  --btn-primary:         #ffffff;
  --btn-primary-halo:    0 0 0 2px rgba(255,255,255,.5);   /* hover ring */
  --btn-secondary:       #232326;
  --btn-secondary-hover: #303131;
  --focus:               #ffffff;

  /* ---- Colour: section accents (tag capsule + its echoes) ------------------ */
  --accent-white:  #ffffff;
  --accent-green:  #68cc58;
  --accent-gold:   #d4b144;
  --accent-cyan:   #9efaff;
  --accent-blue:   #3064ff;
  --accent-violet: #b59aff;
  --accent-lime:   #f3ffc9;
  --accent-pink:   #fe257f;
  --accent-mint:   #91cfb5;
  --accent-orange: #f19447;

  /* ---- Dots vignette (design px; scaled by --k inside .dots-i) --------------- */
  --dots-w:        920px;
  --dots-h:        780px;
  --dots-cta-ratio: 23 / 12;
  --dots-shade:    rgba(0,0,0,.6);           /* blurred ellipse 880x430 */
  --dots-blur:     85;
  --dots-dot:      rgba(255,255,255,.08);    /* stipple at DPR1 (.14 on hi-dpi) */
  --dots-r0:       .9;
  --dots-r1:       1.5;
  --dots-pitch:    7;
  --dots-mask:     radial-gradient(ellipse 57.7% 43.6% at 50% 50%, #000 0 30%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.3) 68%, rgba(0,0,0,.12) 88%, transparent 100%);
  --dots-pulse:    .5;

  /* ---- Stages and dark mocks (what replaces photography) -------------------- */
  --stage:        #0e1011;   /* graphic tile in an image slot */
  --mock:         #17191b;   /* dark mock card on a stage */
  --mock-2:       #232326;   /* icon tiles, status pill inside a mock */
  --mock-line:    #26292c;   /* 1px mock outlines and row rules */
  --mock-mono:    rgba(255,255,255,.46);  /* mono meta, micro labels, "Illustrative" */
  --mono-rest:    rgba(255,255,255,.5);   /* rest colour of the rainbow status line */
  --ring:         linear-gradient(111deg, #3d4044 0%, #26292c 35%, #26292c 73%, #3d4044 100%);
  --r-mock:       10px;
  --ok:   #68cc58; --ok-tint:   rgba(104,204,88,.16);
  --bad:  #ff5a5f; --bad-tint:  rgba(255,90,95,.16);
  --info: #6cc4ff; --info-tint: rgba(108,196,255,.16);

  /* ---- Spectral touches (end line heads, glitch, rainbow) -------------------- */
  --endline:      #1f2123;
  --tip-l1: #f02629; --tip-l2: #f0f229; --tip-l-body: rgb(179,191,203);
  --tip-r1: #2926f0; --tip-r2: #29f2f0; --tip-r-body: rgb(204,191,179);
  --glow-l: 0 0 5px 1px rgba(255,120,30,.48), 0 0 14px 2px rgba(255,80,20,.24);
  --glow-r: 0 0 5px 1px rgba(40,150,255,.48), 0 0 14px 2px rgba(30,90,255,.24);
  --cband-h: 110px;

  /* ---- Type: families ------------------------------------------------------- */
  --font:      "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-ui:   "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Type: sizes (desktop; the two breakpoints step them down) ------------ */
  --fs-h1:     48px;   /* hero and page titles */
  --fs-h2:     38px;   /* section titles, CTA */
  --fs-h3:     32px;   /* alternating-row titles */
  --fs-fig:    32px;   /* figures and prices: never steps down */
  --fs-h4:     24px;   /* media-card titles */
  --fs-h5:     18px;   /* icon, pricing, contact and form card titles; article headings */
  --fs-h6:     16px;   /* 4-up, accordion, FAQ, footer heads, names */
  --fs-menu:   18px;   /* mobile sheet links */
  --fs-body:   16px;   /* ledes, card copy, quotes, form input text */
  --fs-small:  14px;   /* tags, nav, lists, answers, labels, footer, article body */
  --fs-btn:    14px;
  --fs-brand:  18px;
  --fs-micro:  11px;   /* mono meta inside stages */

  /* ---- Type: weight / tracking / leading ------------------------------------ */
  --fw-regular: 400;   /* H1-H3, body */
  --fw-medium:  500;   /* H4-H6, buttons, wordmark */
  --ls-head:   -0.04em;
  --ls-body:   -0.02em;
  --lh-head:    1.1;
  --lh-body:    1.5;
  --lh-btn:     1.2;

  /* ---- Layout: widths -------------------------------------------------------- */
  --page-max:    1080px;  /* section container (x 180-1260 at 1440) */
  --hero-max:    1080px;  /* hero wrapper: the same 1080 column as every section */
  --hero-frame:  1080px;  /* hero stage + 4-up row (x 180) */
  --hero-box:     800px;  /* hero heading box, centred over the 1080 stage: copy at x 320 */
  --hero-text:    640px;  /* hero lede column */
  --hero-title:   880px;  /* hero headline column: two lines, not three */
  --form-col:     760px;  /* contact page column (x 340) */
  --article-col:  560px;  /* legal / long-form column (x 440) */
  --head-max:     480px;  /* section heading block */
  --text-max:     400px;  /* row text, CTA text */
  --foot-info:    264px;
  --foot-col:     128px;
  --mark:          24px;

  /* ---- Layout: gutters and spacing ------------------------------------------- */
  --gutter:         24px;   /* section side padding floor (16 on phones) */
  --gutter-nav:     24px;   /* nav + footer side padding at every width */
  --foot-inset:     32px;   /* footer container inner padding at 1200+ */
  --nav-h:          64px;
  --nav-pad-y:      16px;
  --nav-gap:        72px;
  --menu-gap:       32px;
  --section-pt:     72px;
  --section-pb:     72px;
  --section-pb-tight: 48px;
  --section-gap:    48px;   /* flex gap between top-level blocks (0 below 1200) */
  --hero-pad-y:     48px;
  --hero-gap:       64px;   /* heading -> image -> 4-up */
  --hero-cta-gap:   40px;   /* hero text -> buttons */
  --hero-4up-gap:   40px;
  --page-gap:       64px;   /* inner page: title block -> content (48 on phones) */
  --block-gap:      64px;   /* section head -> content */
  --tag-gap:        24px;   /* tag -> H2 */
  --title-gap:      20px;   /* H2 -> lede */
  --row-title-gap:  12px;
  --grid-gap:       16px;   /* card grids, FAQ columns, CTA */
  --card-gap:       24px;   /* media cards, accordion | image */
  --row-gap:        64px;   /* alternating row image | text, and row -> row */
  --acc-gap:        16px;   /* accordion items (8 on phones) */
  --stack-gap:      16px;
  --list-gap:       12px;
  --faq-gap:        10px;
  --form-gap:       20px;   /* field -> field */
  --label-gap:      10px;   /* label -> field */
  --foot-menu-gap:  72px;
  --cta-pad:        40px;

  /* ---- Components ------------------------------------------------------------- */
  --btn-pad-y:   8px;
  --btn-pad-x:   12px;   /* -> 32.8px tall */
  --btn-gap:     8px;
  --tag-w:       14px;   /* section tag capsule 14x8 */
  --tag-h:        8px;
  --bar-w:        2px;   /* accordion indicator 2x16 */
  --bar-h:       16px;
  --capsule-w:    8px;   /* media-card capsule 8x14 */
  --capsule-h:   14px;
  --dot:          8px;   /* FAQ dot */
  --icon-sm:     16px;   /* stroke 1.8 */
  --icon-md:     24px;   /* stroke 1.4 */
  --ring-size:   64px;   /* hairline icon ring */
  --check:       16px;
  --field-h:     46px;

  /* ---- Radii ------------------------------------------------------------------- */
  --r-card:      4px;    /* cards, tiles, images, accordion, FAQ, form card */
  --r-card-sm:   2px;    /* testimonial and pricing cards */
  --r-btn:       8px;
  --r-field:     12px;   /* inputs, select, textarea */
  --r-badge:     100px;
  --r-switch:    48px;
  --r-pill:      9999px;

  /* ---- Motion ------------------------------------------------------------------ */
  --ease:          cubic-bezier(.12,.23,.5,1);     /* Framer appear tween */
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --ease-spring:   cubic-bezier(.34,1.5,.64,1);    /* button halo */
  --dur-enter:     1s;      /* hero tag / buttons / stage rise */
  --dur-word:      .6s;     /* per-word blur reveal */
  --word-stagger:  35ms;
  --dur-btn:       .2s;
  --dur-btn-2:     .175s;
  --dur-acc:       .35s;
  --dur-fade:      .25s;
  --dur-pulse:     4s;
  --rv-dur:        1s;      /* scroll reveal */
  --rv-y:          32px;
  --rv-x:          100px;
  --rv-stagger:    80ms;
  --stagger:       120ms;
  --marq-speed:    30;      /* px per second, read by greywick.js */

  /* ---- Motion graphics (section 9) ------------------------------------------------ */
  --fringe-r:      #ff3c3c;   /* red copy of the one moving light, 1 to 1.5px left */
  --fringe-b:      #3c78ff;   /* blue copy, 1 to 1.5px right */
  --t-ambient:     60s;       /* slow turns: outline rings, orbit tracks */
  --t-breathe:     6s;        /* scale or opacity breath */
  --t-cycle:       8s;        /* one story loop: gate, orbit, ledger */
  --t-pulse:       4.8s;      /* network pulses, glyph micro-loops */
  --t-glitch:      5s;        /* RGB glitch period (visible for 3% of it) */
}
@media (max-width: 1199.98px) {
  :root { --fs-h2: 32px; --fs-h3: 24px; --section-gap: 0px; --block-gap: 48px; --hero-gap: 48px;
          --hero-4up-gap: 32px; --foot-inset: 0px; --foot-menu-gap: 40px; --hero-box: 100%; }
}
@media (max-width: 809.98px) {
  :root { --fs-h1: 38px; --gutter: 16px; --block-gap: 32px; --hero-gap: 32px; --page-gap: 48px;
          --acc-gap: 8px; --cta-pad: 20px; }
}
@media (min-resolution: 1.5dppx) {
  :root { --dots-dot: rgba(255,255,255,.14); --dots-r0: .6; --dots-r1: .95; }
}

/* per-section accent: put data-accent on the section; the tag and every echo follow */
.as-page, [data-accent="white"] { --accent: var(--accent-white); }
[data-accent="green"]  { --accent: var(--accent-green); }
[data-accent="gold"]   { --accent: var(--accent-gold); }
[data-accent="cyan"]   { --accent: var(--accent-cyan); }
[data-accent="blue"]   { --accent: var(--accent-blue); }
[data-accent="violet"] { --accent: var(--accent-violet); }
[data-accent="lime"]   { --accent: var(--accent-lime); }
[data-accent="pink"]   { --accent: var(--accent-pink); }
[data-accent="mint"]   { --accent: var(--accent-mint); }
[data-accent="orange"] { --accent: var(--accent-orange); }

/* ==========================================================================
   2. BASE
   ========================================================================== */
.as-page, .as-page *, .as-page *::before, .as-page *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text-2);
  font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* em tracking inherits as px, so it is resolved on every element */
:where(.as-page *) { letter-spacing: var(--ls-body); }
:where(h1, h2, h3, h4, h5, h6) * { letter-spacing: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: var(--fw-regular); }
p, ul, ol, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.as-page svg { display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type roles: classes, so the tag can follow the outline (an h2 can look like .h6) */
.h1, .h2, .h3, .h4, .h5, .h6 { margin: 0; color: var(--text); line-height: var(--lh-head); letter-spacing: var(--ls-head); font-weight: var(--fw-regular); }
.h1 { font-size: var(--fs-h1); text-wrap: balance; }
.h2 { font-size: var(--fs-h2); text-wrap: balance; }
.h3 { font-size: var(--fs-h3); text-wrap: balance; }
.h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }
.h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); }
.h6 { font-size: var(--fs-h6); font-weight: var(--fw-medium); }
.lede, .body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.small { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.muted { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.num { font-size: var(--fs-fig); line-height: var(--lh-head); letter-spacing: var(--ls-head); color: var(--text); font-variant-numeric: tabular-nums slashed-zero; }
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.micro { font: 500 var(--fs-micro)/15px var(--font); color: var(--mock-mono); letter-spacing: 0; }

/* inline link inside running text (contact cards, article): underlined, white on hover */
.link-u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.link-u:hover { color: var(--text); }

/* icons: lucide-style outline glyphs from the sprite (icons.svg) */
.ic { width: var(--icon-sm); height: var(--icon-sm); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-md { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.4; }

/* ==========================================================================
   3. PAGE FRAME
   ========================================================================== */
.as-page { display: flex; flex-direction: column; gap: var(--section-gap); min-height: 100vh; overflow-x: clip; background: var(--bg); }
.as-main { display: contents; }
.sec { position: relative; padding: var(--section-pt) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--section-pb) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.sec.tight { padding-bottom: var(--section-pb-tight); }
.wrap { position: relative; z-index: 1; max-width: var(--page-max); margin-inline: auto; }

/* ---- Dots vignette: blurred black ellipse + faint 7px stipple, breathing ---- */
.dots { position: absolute; top: 0; z-index: 0; width: var(--dots-w); height: var(--dots-h); overflow: hidden; pointer-events: none;
  container-type: size; animation: gw-dots-pulse var(--dur-pulse) ease-in-out infinite; }
.dots--hero { left: 50%; margin-left: calc(var(--dots-w) / -2); animation-delay: 1s; }
.dots--sec, .dots--cta { right: max(0px, (100% - var(--page-max)) / 2); }
.dots--cta { height: 100%; width: auto; aspect-ratio: var(--dots-cta-ratio); }
.dots-i { --k: calc(max(100cqw, 166.154cqh) / 1296);
  position: absolute; left: 50%; top: 50%; width: calc(1296 * var(--k)); height: calc(780 * var(--k)); translate: -50% -50%; }
.dots-i::before { content: ""; position: absolute; left: 16.05%; top: 22.44%; width: 67.9%; height: 55.13%;
  border-radius: 50%; background: var(--dots-shade); filter: blur(calc(var(--dots-blur) * var(--k))); }
.dots-i::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, var(--dots-dot) 0 calc(var(--dots-r0) * var(--k)), transparent calc(var(--dots-r1) * var(--k)))
    0 0 / calc(var(--dots-pitch) * var(--k)) calc(var(--dots-pitch) * var(--k));
  -webkit-mask: var(--dots-mask); mask: var(--dots-mask); }
@supports not (width: 1cqw) { .dots-i { --k: 1px; } .dots--cta .dots-i { --k: .709px; } }
@keyframes gw-dots-pulse { 50% { opacity: var(--dots-pulse); } }

/* ==========================================================================
   4. ELEMENTS
   ========================================================================== */

/* ---- Buttons: 32.8 tall chips, no icons, no outlines ------------------------ */
.btns { display: flex; flex-wrap: wrap; gap: var(--btn-gap); }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-pad-y) var(--btn-pad-x); border: 0; cursor: pointer;
  border-radius: var(--r-btn); font: var(--fw-medium) var(--fs-btn)/var(--lh-btn) var(--font); letter-spacing: var(--ls-body); white-space: nowrap; }
.btn-primary { background: var(--btn-primary); color: var(--text-on-light); box-shadow: 0 0 0 0 rgba(255,255,255,0); transition: box-shadow var(--dur-btn) var(--ease-spring); }
.btn-primary:hover { box-shadow: var(--btn-primary-halo); }
.btn-secondary { background: var(--btn-secondary); color: var(--text-2); transition: background-color var(--dur-btn-2) ease, color var(--dur-btn-2) ease; }
.btn-secondary:hover { background: var(--btn-secondary-hover); color: var(--text); }
.btn-block { width: 100%; }
.btn:focus-visible { border-radius: var(--r-btn); }
.tlink { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.tlink:hover { color: var(--text); }   /* instant, as in the reference */

/* ---- Section tag: 14x8 capsule + sentence-case label ------------------------ */
.tag { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.tag::before { content: ""; flex: none; width: var(--tag-w); height: var(--tag-h); margin-top: 6.5px; border-radius: var(--r-pill); background: var(--accent, var(--accent-white)); }

/* ---- Section head: tag, 24, H2, 20, lede, in a 480 column ------------------- */
.head { display: flex; flex-direction: column; gap: var(--tag-gap); max-width: var(--head-max); margin-bottom: var(--block-gap); }
.head-txt { display: flex; flex-direction: column; gap: var(--title-gap); }
.head .btns { margin-top: 16px; }            /* lede -> button = 40 (Integrations) */
.head--48 { margin-bottom: 48px; }           /* Integrations and Pricing use 48 at every width */
.head--wide { max-width: 640px; }

/* ---- Accent echoes: the section colour, small, inside the content ------------ */
.echo-bar { flex: none; width: var(--bar-w); height: var(--bar-h); border-radius: var(--r-pill); background: var(--accent); }
.echo-capsule { flex: none; width: var(--capsule-w); height: var(--capsule-h); border-radius: var(--r-pill); background: var(--accent); }
.echo-dot { flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--accent); }

/* ---- Badge (outlined pill) and switch --------------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { position: relative; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-badge); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); white-space: nowrap; }
.badge::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.switch { position: relative; flex: none; width: 36px; height: 18px; padding: 4px; border: 0; border-radius: var(--r-switch); background: none; cursor: pointer; }
.switch::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.switch i { display: block; width: 14px; height: 10px; border-radius: var(--r-pill); background: #fff; transition: transform var(--dur-btn) var(--ease-spring); }
.switch[aria-checked="true"] i { transform: translateX(14px); }

/* ---- Hairline icon ring (64) ------------------------------------------------- */
.ring64 { position: relative; flex: none; width: var(--ring-size); height: var(--ring-size); border-radius: 999px; display: grid; place-items: center; color: var(--text); }
.ring64::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.ring64 .ic { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.4; opacity: .9; }

/* ---- In-card divider and check-circle list ------------------------------------ */
.rule { height: 1px; border: 0; margin: 0; background: var(--surface-2); border-radius: var(--r-pill); }
.ticks { display: flex; flex-direction: column; gap: var(--list-gap); font-size: var(--fs-small); line-height: var(--lh-body); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks svg { width: var(--check); height: var(--check); flex: none; }

/* ---- Bullet list (article) ---------------------------------------------------- */
.bullets { list-style: disc; padding-left: 18px; font-size: var(--fs-small); line-height: var(--lh-body); }
.bullets li::marker { color: var(--text-2); }

/* ---- Form fields: #232326 fills, 12px radius, no borders ---------------------- */
.form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--form-gap); }
.form-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { width: 100%; display: flex; flex-direction: column; gap: var(--label-gap); min-width: 0; }
.field > .lbl { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.input, .textarea, .select select { width: 100%; margin: 0; border: 0; border-radius: var(--r-field); background: var(--surface-2); color: var(--text);
  font: var(--fw-regular) var(--fs-body)/1.2 var(--font); letter-spacing: 0; outline: none;
  transition: box-shadow var(--dur-btn-2) ease, background-color var(--dur-btn-2) ease; }
.input { height: var(--field-h); padding: 0 16px; }
.textarea { display: block; min-height: 100px; padding: 16px; resize: vertical; }
.select { position: relative; width: 100%; }
.select select { appearance: none; -webkit-appearance: none; height: 42px; padding: 0 44px 0 16px; color: var(--text-3); cursor: pointer; }
.select select:valid { color: var(--text); }
.select .ic { position: absolute; right: 16px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--text-2); }
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
/* ours (Asset has no field states): hover lifts to the line colour, focus draws a soft ring */
.input:hover, .textarea:hover, .select select:hover { background: #28282b; }
.input:focus-visible, .textarea:focus-visible, .select select:focus-visible { box-shadow: 0 0 0 1px rgba(255,255,255,.35); outline: none; }
@media (max-width: 809.98px) {
  .form-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Cards: the shared tile ---------------------------------------------------- */
.card { background: var(--surface); border-radius: var(--r-card); }

/* ==========================================================================
   5. NAV AND FOOTER
   ========================================================================== */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg);
  padding-left: max(var(--gutter-nav), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter-nav), env(safe-area-inset-right, 0px)); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line-nav); pointer-events: none; }
.nav-in { max-width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: var(--nav-gap); padding: var(--nav-pad-y) 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; height: 32px; color: var(--text);
  font: var(--fw-medium) var(--fs-brand)/18px var(--font); letter-spacing: var(--ls-body); }
.brand svg { width: var(--mark); height: var(--mark); flex: none; }
.nav-l, .nav-r { flex: 1 0 0; display: flex; align-items: center; min-width: 0; }
.nav-r { justify-content: flex-end; gap: 16px; }
.menu { display: flex; align-items: center; gap: var(--menu-gap); }
.menu a, .signin { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); white-space: nowrap; }
.menu a:hover, .signin:hover { color: var(--text); }
.burger { display: none; position: relative; font: inherit; width: 31px; height: 31px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; color: var(--text); }
.burger span { position: absolute; left: 3.5px; width: 24px; height: 2px; border-radius: 7px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s var(--ease); }
.burger span:nth-child(1) { top: 7px; }
.burger span:nth-child(2) { top: 14.5px; }
.burger span:nth-child(3) { top: 22px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.sheet { position: fixed; inset: 0; z-index: 55; background: var(--bg); overflow-y: auto;
  padding: calc(88px + env(safe-area-inset-top, 0px)) max(var(--gutter-nav), env(safe-area-inset-right, 0px)) 96px max(var(--gutter-nav), env(safe-area-inset-left, 0px)); }
.sheet ul { display: flex; flex-direction: column; gap: 24px; }
.sheet li { display: flex; }
.sheet a:not(.btn) { display: inline-block; font: var(--fw-medium) var(--fs-menu)/var(--lh-head) var(--font); letter-spacing: var(--ls-head); color: var(--text-2); }
.sheet a:not(.btn):hover { color: var(--text); }
.sheet .btn { width: 100%; margin-top: 40px; }
/* Menu room: the full menu needs about 820px, so the toggle takes over below 900px. Between 900 and 1200 the gaps tighten. */
@media (min-width: 900px) and (max-width: 1199.98px) { .nav-in { gap: 40px; } }
@media (max-width: 899.98px) {
  .nav-in { gap: 40px; height: var(--nav-h); }
  .menu, .nav-r { display: none; }
  .burger { display: block; }
  .nav-l { flex: 1 1 auto; }
}
@media (min-width: 900px) { .sheet { display: none !important; } }

.foot { background: var(--bg); border-top: 1px solid var(--endline); padding: 48px max(var(--gutter-nav), env(safe-area-inset-right, 0px)) calc(48px + env(safe-area-inset-bottom, 0px)) max(var(--gutter-nav), env(safe-area-inset-left, 0px)); }
.foot-in { max-width: var(--page-max); margin-inline: auto; padding: 0 var(--foot-inset); display: flex; justify-content: space-between; gap: 48px; }
.foot-info { flex: 0 1 var(--foot-info); max-width: var(--foot-info); display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.foot-info .top { display: flex; flex-direction: column; gap: 16px; }
.foot-info p, .foot-legal { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.foot-legal { display: flex; flex-direction: column; gap: 8px; }
.foot-menu { display: flex; flex: none; gap: var(--foot-menu-gap); }
.foot-col { min-width: var(--foot-col); display: flex; flex-direction: column; gap: 16px; }
.foot-col ul { display: flex; flex-direction: column; align-items: flex-start; gap: var(--list-gap); font-size: var(--fs-small); line-height: var(--lh-body); }
.foot-col a { color: var(--text-2); }
/* social links as icons (as-i-linkedin, as-i-xlogo): 20px, text-2, white on hover */
.socials { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.foot-col ul.socials { flex-direction: row; align-items: center; gap: 16px; }
.socials a { display: inline-flex; color: var(--text-2); transition: color var(--dur-btn-2) ease; }
.socials a:hover { color: var(--text); }
.socials .ic { width: 20px; height: 20px; }
.foot-col a:hover { color: var(--text); }
@media (max-width: 809.98px) {
  .foot-in { flex-direction: column; gap: 48px; }
  .foot-info { flex: none; max-width: none; gap: 32px; }
  .foot-menu { flex-wrap: wrap; gap: 40px; }
}

/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

/* ---- Hero: 1080 column like every section, copy at x 180, 1080 stage, 4-up -- */
.hero { position: relative; width: 100%; max-width: calc(var(--hero-max) + 2 * var(--gutter)); margin-inline: auto;
  padding: var(--hero-pad-y) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--hero-pad-y) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.hero-in { position: relative; z-index: 1; max-width: var(--hero-frame); margin-inline: auto; display: flex; flex-direction: column; gap: var(--hero-gap); }
.hero-head { width: 100%; max-width: var(--hero-box); margin-inline: auto; display: flex; flex-direction: column; gap: var(--hero-cta-gap); }
.hero-copy { max-width: var(--hero-title); display: flex; flex-direction: column; gap: var(--tag-gap); }
.hero-copy .lede { max-width: var(--hero-text); }
.hero .lede, .page-head .lede { text-wrap: balance; }
.hero-txt { display: flex; flex-direction: column; gap: var(--title-gap); }
.w { display: inline-block; }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hero-4up-gap); }
.pillars li { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pillars .pt { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.pillars p { font-size: var(--fs-small); line-height: var(--lh-body); }
@media (max-width: 1199.98px) {
  .dots--hero { left: 0; margin-left: 0; }
}
@media (max-width: 809.98px) {
  .br-d { display: none; }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@keyframes gw-rise { from { transform: translateY(var(--rise, 24px)); } }
@keyframes gw-word { from { filter: blur(10px); transform: translateY(32px); } }
/* Hero entrance (23 October 2026): the hero and inner page heads fade in once, as one
   block, from the first frame. No delay, no rise, no word-by-word blur. */
@keyframes gw-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-in, .page-head { animation: gw-fade .7s ease-out both; }
}

/* Still pages: on .as-page[data-still] nothing after the hero moves except the end-line
   streaks and the rainbow band. Loops in later sections stop; hover and open/close stay. */
.as-page[data-still] .as-main > :not(.hero):not(.divider) *:not(.page-head),
.as-page[data-still] .as-main > :not(.hero):not(.divider) *::before,
.as-page[data-still] .as-main > :not(.hero):not(.divider) *::after { animation: none !important; }

/* ---- Page head (inner pages): head in the 1080 column, text 640; reading body 560 -- */
.page { position: relative; padding: var(--hero-pad-y) max(var(--gutter), env(safe-area-inset-right, 0px)) var(--section-pt) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.page-col { position: relative; z-index: 1; max-width: var(--page-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--page-gap); }
.page-col--article .article { max-width: var(--article-col); }
.page-head { display: flex; flex-direction: column; gap: 16px; max-width: var(--hero-text); }
/* a long title that should sit on two lines at 1200+ rather than three */
@media (min-width: 1200px) { .page-head--wide { max-width: 860px; } }
.page .dots--hero { left: 50%; }
@media (max-width: 1199.98px) { .page .dots--hero { left: 50%; margin-left: calc(var(--dots-w) / -2); } }

/* ---- 404 / empty state: hero geometry, one secondary button ------------------ */
.empty { min-height: 470px; }

/* ---- Showcase accordion + cross-fading stage (pure CSS via :has) ------------- */
.pf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
.acc { display: flex; flex-direction: column; gap: var(--acc-gap); min-width: 0; }
.acc details { background: var(--surface); border-radius: var(--r-card); }
.acc summary { display: flex; align-items: center; gap: 12px; padding: 20px 20px; border-radius: var(--r-card); transition: padding var(--dur-acc) var(--ease); }
.acc summary h3 { flex: 1; min-width: 0; }
.acc details[open] summary { padding-top: 24px; padding-bottom: 12px; }
.acc summary::before { content: ""; flex: none; width: var(--bar-w); height: var(--bar-h); border-radius: var(--r-pill); background: var(--surface-2); transition: background-color var(--dur-acc) var(--ease); }
.acc details:not([open]) summary:hover::before { background: var(--line); }
.acc details[open] summary::before { background: var(--accent); }
.acc details p { padding: 0 52px 20px 20px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.as-page details::details-content { block-size: 0; overflow: clip;
  transition: block-size var(--dur-acc) var(--ease), content-visibility var(--dur-acc) allow-discrete; }
.as-page details[open]::details-content { block-size: auto; }
.as-page summary { list-style: none; cursor: pointer; }
.as-page summary::-webkit-details-marker { display: none; }
.pf-stage { aspect-ratio: 528 / 410; }
.pf-stage .pf-card { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity var(--dur-fade) var(--ease); }
.pf:has(details:nth-of-type(1)[open]) .pf-card.c1,
.pf:has(details:nth-of-type(2)[open]) .pf-card.c2,
.pf:has(details:nth-of-type(3)[open]) .pf-card.c3,
.pf:has(details:nth-of-type(4)[open]) .pf-card.c4,
.pf:has(details:nth-of-type(5)[open]) .pf-card.c5,
.pf:not(:has(details[open])) .pf-card.c1 { opacity: 1; }
/* an M11 figure in place of a mock card: one per item, inset 32 (16 on phones) */
.pf-stage .pf-card > .ix { width: calc(100% - 64px); height: calc(100% - 64px); }
@media (max-width: 809.98px) { .pf-stage .pf-card > .ix { width: calc(100% - 32px); height: calc(100% - 32px); } }
@media (max-width: 809.98px) {
  .pf { grid-template-columns: minmax(0, 1fr); gap: var(--stack-gap); }
  .pf-stage { order: -1; }
}

/* ---- Media cards 3-up: stage 344x236 on top, #131517 body -------------------- */
.media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
.mcard { display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.mcard .body { display: flex; flex-direction: column; gap: 12px; padding: 32px 24px; }
.mcard .mt { display: flex; align-items: center; gap: 12px; }
.mcard .mt::before { content: ""; flex: none; width: var(--capsule-w); height: var(--capsule-h); border-radius: var(--r-pill); background: var(--accent); }
.mcard p { font-size: var(--fs-body); line-height: var(--lh-body); }
.m-stage { aspect-ratio: 344 / 236; display: grid; place-items: center; border-radius: 0; }
/* Numbered variant (24 October 2026): ordered steps. An M11 figure straight in the stage (inset 24,
   no dotted outline or mock card), the title with a faded number (.h-num) and no capsule. */
@media (max-width: 809.98px) {
  .media { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---- Marquee (Asset "Integrations"): tiles drift left, edges fade ------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12.5%, #000 87.5%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 12.5%, #000 87.5%, transparent 100%); }
.marquee-track { display: flex; gap: 12px; width: max-content; }
.mtile { flex: none; width: 146px; height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--surface); border-radius: var(--r-card); color: var(--text-3); }
.mtile .ic { width: 32px; height: 32px; stroke-width: 1.3; }
.mtile span { font: 500 var(--fs-micro)/15px var(--font-mono); letter-spacing: 0; color: var(--mock-mono); white-space: nowrap; }
@keyframes gw-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .marquee.is-ready .marquee-track { animation: gw-marquee var(--marq-dur, 40s) linear infinite; }
}

/* ---- Icon cards (Asset "Benefits"; also the contact cards) -------------------- */
.icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.icards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.icard { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px 20px; background: var(--surface); border-radius: var(--r-card); }
.icard .tx { display: flex; flex-direction: column; gap: 8px; }
.icard p { font-size: var(--fs-body); line-height: var(--lh-body); }
.icard--sm p { font-size: var(--fs-small); }
/* steps: three large cards in order. Title at H4 with its number faded in front ("1." at 46%) */
.icard .h-num, .mcard .h-num { color: var(--mock-mono); margin-right: .25em; font-variant-numeric: tabular-nums; }
@media (max-width: 1199.98px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .icards, .icards--2 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Alternating feature rows (Asset "About") --------------------------------- */
.rows { display: flex; flex-direction: column; gap: var(--row-gap); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--row-gap); align-items: center; }
.row--flip > .stage { order: 2; }
.row-txt { max-width: var(--text-max); display: flex; flex-direction: column; gap: 24px; }
.row-txt .tx { display: flex; flex-direction: column; gap: 12px; }
.row-txt .head { margin-bottom: 0; }
.row-stage { aspect-ratio: 508 / 390; display: grid; place-items: center; }
@media (max-width: 809.98px) {
  .rows { gap: 48px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .row--flip > .stage { order: 0; }
}

/* ---- Testimonial cards (radius 2) ---------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.qcard { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-width: 0; padding: 32px; background: var(--surface); border-radius: var(--r-card-sm); }
.qcard blockquote { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.qcard .foot-q { display: flex; flex-direction: column; gap: 16px; }
.who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.who .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.who .tx span { font-size: var(--fs-small); line-height: var(--lh-body); }
.avatar { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
  font: var(--fw-medium) 15px/1 var(--font); color: var(--text); letter-spacing: 0; }
.avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); }
.avatar--photo { overflow: hidden; }
.avatar--photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 1199.98px) { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .quotes { grid-template-columns: minmax(0, 1fr); } }

/* ---- Pricing: billing switch + cards (radius 2) -------------------------------- */
.billing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2); }
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.pcard { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; padding: 24px 24px 32px; background: var(--surface); border-radius: var(--r-card-sm); }
.pcard .pc { display: flex; flex-direction: column; gap: 20px; }
.pcard .ph { display: flex; flex-direction: column; gap: 16px; }
.pcard .pt { display: flex; flex-direction: column; gap: 12px; }
.pcard .pt .ttl { display: flex; align-items: center; gap: 8px; min-height: 29px; }
.pcard .pt p { font-size: var(--fs-small); line-height: var(--lh-body); }
.price { display: flex; flex-direction: column; gap: 4px; }
.price span { font-size: var(--fs-small); line-height: var(--lh-body); }
.pcard .btn { align-self: flex-start; }
@media (max-width: 1199.98px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .pcards { grid-template-columns: minmax(0, 1fr); } }

/* ---- Two-up content cards (Hybrid "Solutions": pricing anatomy without prices) -- */
.scard { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px 24px 32px; background: var(--surface); border-radius: var(--r-card-sm); }
.scard .sh { display: flex; flex-direction: column; gap: var(--row-title-gap); }
.scard .sh p { font-size: var(--fs-small); line-height: var(--lh-body); }

/* ---- Compliance tiles 5-up (emblem + label) ------------------------------------ */
.ctiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
.ctile { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; min-height: 197px; padding: 48px 20px 20px; background: var(--surface); border-radius: var(--r-card); }
.ctile .em { align-self: center; width: 76px; height: 76px; color: #fff; opacity: .3; }
.ctile .em * { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ctile p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
@media (max-width: 809.98px) { .ctiles { grid-template-columns: minmax(0, 1fr); } .ctile { min-height: 160px; } }

/* ---- Figure tiles (Hybrid: compliance shell + price typography + glyph) -------- */
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.fig { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; min-height: 236px; padding: 20px; background: var(--surface); border-radius: var(--r-card); }
.fig .fv { display: flex; flex-direction: column; gap: 8px; }
.fig p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.fig-note { margin-top: 16px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
@media (max-width: 809.98px) {
  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { min-height: 200px; padding: 16px; }
}

/* ---- FAQ: charcoal toggle tiles, 8px dot is the only affordance ---------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: start; }
.faq-col { display: flex; flex-direction: column; gap: var(--faq-gap); }
.faq details { background: var(--surface); border-radius: var(--r-card); }
.faq summary { display: flex; align-items: flex-start; gap: 10px; padding: 18px 16px; border-radius: var(--r-card); }
.faq summary h3 { flex: 1; }
.faq .dot { display: none; }
.faq details p { padding: 0 42px 18px 16px; margin-top: -2px; font-size: var(--fs-small); line-height: var(--lh-body); }
/* Open/close sign (accordion and FAQ): a 12px plus that folds into a minus when open */
.acc summary::after, .faq summary::after { content: ""; flex: none; width: 16px; height: 16px; align-self: center; color: var(--text-3);
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat;
  transition: color var(--dur-btn-2) ease, background-size var(--dur-acc) var(--ease); }
.faq summary::after { align-self: flex-start; margin-top: 1px; }
.acc summary:hover::after, .faq summary:hover::after { color: var(--text); }
.acc details[open] summary::after, .faq details[open] summary::after { color: var(--text); background-size: 12px 1.5px, 1.5px 0; }
@media (max-width: 1199.98px) { .faq-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--faq-gap); } }

/* ---- CTA: headline + buttons, straight on the page --------------------------------- */
.cta { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 640px; margin-inline: auto; text-align: center; }
.cta .btns { justify-content: center; }   /* the one centred block on a page */

/* ---- Contact: three contact cards on the left, the form card on the right ----------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); align-items: start; }
.contact > .icards { grid-template-columns: minmax(0, 1fr); }
.contact > .icards .icard { flex-direction: row; align-items: center; gap: 20px; }   /* ring beside the text; cards keep their own height, the form can run longer */
@media (max-width: 1199.98px) { .contact { grid-template-columns: minmax(0, 1fr); } .contact > .icards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact > .icards .icard { flex-direction: column; align-items: flex-start; gap: 24px; } }
@media (max-width: 809.98px) { .contact > .icards { grid-template-columns: minmax(0, 1fr); } .contact > .icards .icard { flex-direction: row; align-items: center; gap: 20px; } }
.form-card { display: flex; flex-direction: column; gap: 32px; padding: 32px 24px 40px; background: var(--surface); border-radius: var(--r-card); }
.form-card .fh { display: flex; flex-direction: column; gap: 8px; }
.form-card .fh p { font-size: var(--fs-small); line-height: var(--lh-body); }

/* ---- Article (legal, notes, long-form) ---------------------------------------- */
.article { display: flex; flex-direction: column; gap: 32px; }
.article section { display: flex; flex-direction: column; gap: 16px; }
.article .para { display: flex; flex-direction: column; gap: 12px; }
.article p, .article li { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }

/* ==========================================================================
   7. STAGES: what replaces photography
   A .stage is a dark graphic tile that sits in any image slot (hero frame,
   accordion panel, media-card image, row image, CTA image). Inside it goes
   one of: a dark mock card (.dk-card), a dotted outline (.outline), a canvas
   scene (.cv-wave, .cv-globe, .cv-morph), or a combination (outline behind, card on top).
   ========================================================================== */
.stage { position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--stage); isolation: isolate; }
.stage, .stage * { letter-spacing: 0; }
.stage .cap { position: absolute; right: 14px; bottom: 10px; z-index: 2; font: 500 var(--fs-micro)/15px var(--font-mono); color: var(--mock-mono); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stage { aspect-ratio: 9 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 16px 40px; }
@media (max-width: 809.98px) { .hero-stage { aspect-ratio: auto; min-height: 420px; padding: 24px 12px 44px; } .row-stage { aspect-ratio: auto; min-height: 320px; padding: 32px 0; } }

/* ---- Dark mock card: card, rows, status, flags -------------------------------- */
.dk-card { position: relative; z-index: 1; width: min(var(--dk-w, 300px), 100% - 32px); border-radius: var(--r-mock); background: var(--mock);
  box-shadow: inset 0 0 0 1px var(--mock-line), 0 16px 48px rgba(0,0,0,.35); overflow: hidden; color: var(--text); }
.dk-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--mock-line); }
.dk-rows li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--mock-line); }
.dk-rows li:first-child { border-top: 0; }
.dk-tx { flex: 1; min-width: 0; }
.dk-tx b { display: block; font: 500 13px/18px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-tx i { display: block; margin-top: 1px; font: 500 11px/15px var(--font-mono); font-style: normal; color: var(--mock-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--mock-line); font: 500 11px/15px var(--font-mono); color: var(--mock-mono); white-space: nowrap; }
.tile { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: var(--mock-2); color: var(--text-2); }
.tile .ic { width: 14px; height: 14px; stroke-width: 1.75; }
.st { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 500 12px/16px var(--font); color: var(--text); white-space: nowrap; }
.st i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.st.ok i, .st.bad i, .st.info i { background: currentColor; }
.flag { flex: none; margin-left: auto; padding: 2px 6px; border-radius: 4px; font: 500 12px/16px var(--font); white-space: nowrap; }
.ok { color: var(--ok); }     .flag.ok { background: var(--ok-tint); }
.bad { color: var(--bad); }   .flag.bad { background: var(--bad-tint); }
.info { color: var(--info); } .flag.info { background: var(--info-tint); }
.dk-card.sm { --dk-w: 220px; }
.dk-card.sm .dk-top { height: 32px; padding: 0 12px; }
.dk-card.sm .dk-rows li { min-height: 36px; padding: 6px 12px; gap: 8px; }
.dk-card.sm .dk-tx b { font-size: 12px; line-height: 16px; }
.dk-card.sm .st, .dk-card.sm .flag { font-size: 11px; line-height: 15px; }
.dk-card.lg { --dk-w: 460px; }

/* ---- Console bar + rainbow status line (from the hero console demo) ------------ */
.ring { position: relative; padding: 1px; border-radius: var(--r-mock); background: var(--ring); }
.ring-in { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 10px 0 20px; border-radius: calc(var(--r-mock) - 1px); background: var(--mock); }
.q-text { flex: 1; min-width: 0; font: 400 16px/24px var(--font); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-pill { flex: none; height: 24px; padding: 4px 8px; border-radius: 6px; background: var(--mock-2); font: 500 12px/16px var(--font); color: var(--text-2); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: var(--r-btn); background: var(--mock);
  box-shadow: inset 0 0 0 1px var(--mock-line); font: 500 12px/16px var(--font); color: var(--text-2); white-space: nowrap; }
.chip .ic { width: 14px; height: 14px; stroke-width: 1.75; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.console { position: relative; z-index: 1; width: min(460px, 100%); display: flex; flex-direction: column; gap: 8px; }
.results { padding: 16px 20px 6px; border-radius: var(--r-mock); background: var(--mock); box-shadow: inset 0 0 0 1px var(--mock-line); }
.res-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.res-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 0; border-top: 1px solid var(--mock-line); }
.res-row .tile { margin-right: 4px; }
.rn { font: 500 14px/20px var(--font); color: var(--text); min-width: 0; }
.mono-line { position: relative; height: 20px; overflow: hidden; white-space: pre; font: 500 12px/20px var(--font-mono); color: var(--mono-rest); }
.mono-line .ch { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  .is-live .sweep .ch { animation: gw-sweep 1.6s linear infinite; animation-delay: calc(var(--i) * 40ms); }
}
/* the rainbow: a spectral wave that runs through the characters of a status line */
@keyframes gw-sweep {
  0% { color: var(--mono-rest); }
  1.5% { color: #f4b426; } 3% { color: #fdac00; } 4.5% { color: #f97e00; } 6% { color: #f75f00; }
  7.5% { color: #f52f00; } 9% { color: #e11b58; } 10.5% { color: #ad179c; } 12% { color: #6e12c6; }
  13.5% { color: #000edd; } 15% { color: #006be4; } 16.5% { color: #0097eb; } 18% { color: #00b9f2; }
  19.5% { color: #00edff; } 21% { color: #48c7d4; } 23% { color: #8a8f93; } 25%, 100% { color: var(--mono-rest); }
}

/* ---- Outline: dotted shape, slow turn or breath, red/blue fringe --------------- */
.outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.outline .d1 { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 0 9 0 4 0 15 0 6; stroke-linecap: round; fill: none; opacity: .45; }
.outline .d2 { stroke: #fff; stroke-width: 2.4; stroke-dasharray: 0 31 0 17 0 44; stroke-linecap: round; fill: none; opacity: .8; }
.outline .d3 { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 0 3 0 7 0 2 0 11; stroke-linecap: round; fill: none; opacity: .3; }
.outline .fr { mix-blend-mode: screen; opacity: .6; }
.outline .fr .d2 { stroke-width: 1.8; }
.outline .fr-r { transform: translateX(-1px); } .outline .fr-r use { stroke: #ff3c3c; }
.outline .fr-b { transform: translateX(1px); }  .outline .fr-b use { stroke: #3c78ff; }
.outline .spin { transform-box: view-box; transform-origin: 50% 50%; }
@keyframes gw-spin { to { transform: rotate(360deg); } }
@keyframes gw-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .outline .spin.rot { animation: gw-spin 60s linear infinite; }
  .is-live .outline .spin.breathe { animation: gw-breathe 6s ease-in-out infinite; }
}

/* ---- Sliding list: rows step up one at a time (custody card) ------------------- */
.slide-list { height: 216px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%); mask-image: linear-gradient(180deg, transparent 0%, #000 24%); }
.slide-list li { height: 54px; min-height: 0; }
.slide-list li:first-child { border-top: 1px solid var(--mock-line); }
@keyframes gw-slide {
  0%, 11.67% { transform: translateY(0); animation-timing-function: var(--ease-out); }
  16.67%, 28.33% { transform: translateY(-54px); animation-timing-function: var(--ease-out); }
  33.33%, 45% { transform: translateY(-108px); animation-timing-function: var(--ease-out); }
  50%, 61.67% { transform: translateY(-162px); animation-timing-function: var(--ease-out); }
  66.67%, 78.33% { transform: translateY(-216px); animation-timing-function: var(--ease-out); }
  83.33%, 95% { transform: translateY(-270px); animation-timing-function: var(--ease-out); }
  100% { transform: translateY(-324px); }
}
@media (prefers-reduced-motion: no-preference) {
  .is-live .slide-track { animation: gw-slide 12s infinite; }
}

/* ---- Figure glyphs: 48px line drawings, pulse + a rare RGB glitch -------------- */
.si { width: 48px; height: 48px; overflow: visible; color: var(--accent); }
.si .tr { stroke: var(--glyph-track); }
.si .lt { stroke: currentColor; }
.si .tr, .si .lt { fill: none; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.si .fill { fill: currentColor; stroke: none; }
.si .gl { opacity: 0; mix-blend-mode: screen; }
.si .gl-r { color: #ff2020; } .si .gl-b { color: #2050ff; }
@keyframes gw-gl-r { 0%, 95% { opacity: 0; transform: none; } 96% { opacity: 1; transform: translate(-1.5px, 0); } 97.5% { opacity: 1; transform: translate(-1px, .5px); } 98.5%, 100% { opacity: 0; transform: none; } }
@keyframes gw-gl-b { 0%, 95% { opacity: 0; transform: none; } 96% { opacity: 1; transform: translate(1.5px, 0); } 97.5% { opacity: 1; transform: translate(1px, -.5px); } 98.5%, 100% { opacity: 0; transform: none; } }
@keyframes gw-pulse { 0%, 100% { stroke: var(--glyph-track); } 50% { stroke: var(--accent); } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .si .gl-r { animation: gw-gl-r 5s steps(1) infinite; }
  .is-live .si .gl-b { animation: gw-gl-b 5s steps(1) infinite; }
  .is-live .fig:nth-child(2) .gl { animation-duration: 5.6s; animation-delay: -1.7s; }
  .is-live .fig:nth-child(3) .gl { animation-duration: 4.6s; animation-delay: -3.1s; }
  .is-live .fig:nth-child(4) .gl { animation-duration: 6.2s; animation-delay: -.9s; }
  .is-live .si .pulse { animation: gw-pulse 4s ease-in-out infinite; }
}

/* ---- Announce: hero tag as pill + typing dots + one-line message --------------- */
.announce { display: flex; align-items: center; width: fit-content; max-width: 100%; min-width: 0; color: var(--text); border-radius: var(--r-pill); }
.announce .pill { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: var(--fw-medium) 12px/1 var(--font); color: var(--text);
  transition: box-shadow var(--dur-btn-2) ease; }
.announce:hover .pill { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.typing { position: relative; flex: none; width: 16px; height: 16px; margin-left: 6px; }
.typing i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--text-2); }
.typing i:nth-child(1) { left: 6px; top: 4px; }
.typing i:nth-child(2) { left: 9px; top: 7px; }
.typing i:nth-child(3) { left: 6px; top: 10px; }
.ann-msg { flex: 1; min-width: 0; overflow: hidden; margin-left: 4px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; }
@keyframes gw-type { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .typing i { animation: gw-type 1.2s ease-in-out infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; }
  .typing i:nth-child(3) { animation-delay: .3s; }
}

/* ---- Status pill: ping dot + label + mono --------------------------------------- */
.up-pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; height: 32px; padding: 0 14px; border-radius: var(--r-pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.up-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); margin-right: 2px; }
.up-dot::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1px var(--ok); opacity: 0; }
@keyframes gw-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .up-dot::after { animation: gw-ping 1.6s var(--ease-out) infinite; } }
.up-pill .tx { font-size: 12px; line-height: 16px; color: var(--text); }
.up-pill .dv { width: 1px; height: 14px; background: var(--line); }
.up-pill .mono { font: 500 11px/16px var(--font-mono); color: var(--text-3); }

/* ==========================================================================
   8. PAGE-LEVEL MOTION
   ========================================================================== */

/* ---- End line: 1px divider; a full-colour streak with a glowing head runs out
        from the centre to each end and fades. At most three per page. ---------- */
.divider { padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); }
.endline { position: relative; max-width: var(--page-max); height: 1px; margin-inline: auto; background: var(--endline); }
.endline span { position: absolute; top: -10px; bottom: -10px; width: 50%; overflow: hidden; }
.endline span:nth-child(1) { left: 0; }
.endline span:nth-child(2) { right: 0; }
.endline i { position: absolute; top: 10px; height: 1px; width: 90%; opacity: 0; }
.endline { --tip-w: 64px; }
/* 25 October 2026: the head is a smooth red-to-yellow (blue-to-cyan) blend, not two flat 28px blocks, and
   shorter on phones, where the flat blocks read as separate dashes. */
@media (max-width: 809.98px) { .endline { --tip-w: 40px; } }
.endline i::before { content: ""; position: absolute; top: 0; width: var(--tip-w); height: 1px; }
.endline span:nth-child(1) i { left: 100%;
  background: linear-gradient(90deg, var(--tip-l1) 0, var(--tip-l2) calc(var(--tip-w) * .5), var(--tip-l-body) var(--tip-w), rgba(179,191,203,.35) 45%, rgba(31,33,35,0) 100%); }
.endline span:nth-child(2) i { right: 100%;
  background: linear-gradient(270deg, var(--tip-r1) 0, var(--tip-r2) calc(var(--tip-w) * .5), var(--tip-r-body) var(--tip-w), rgba(204,191,179,.35) 45%, rgba(31,33,35,0) 100%); }
.endline span:nth-child(1) i::before { left: 0; box-shadow: var(--glow-l); }
.endline span:nth-child(2) i::before { right: 0; box-shadow: var(--glow-r); }
/* .9s linear (24 October 2026, was 1.1s): one even speed, close to Strand's draw of about 0.6s per half.
   Same day: tip colours and glow about 20% less saturated, so the streak draws less of the eye. */
.endline.is-drawn span:nth-child(1) i { animation: gw-run-l .9s linear .2s both; }
.endline.is-drawn span:nth-child(2) i { animation: gw-run-r .9s linear .2s both; }
@keyframes gw-run-l { 0% { left: 100%; opacity: 1; } 55% { opacity: 1; } 100% { left: -95%; opacity: 0; } }
@keyframes gw-run-r { 0% { right: 100%; opacity: 1; } 55% { opacity: 1; } 100% { right: -95%; opacity: 0; } }

/* ---- Scroll reveal: [data-rv] fades from 0 and glides up 32px, once ---------------
        data-rv="left"/"right" slide 100px in from that side (split rows);
        data-rv-stagger on a grid offsets its [data-rv] items by --rv-stagger. ---- */
.rv-on [data-rv] { opacity: 0; transform: translateY(var(--rv-y)); }
.rv-on [data-rv="left"]  { transform: translateX(calc(-1 * var(--rv-x))); }
.rv-on [data-rv="right"] { transform: translateX(var(--rv-x)); }
@media (max-width: 809.98px) {
  .rv-on [data-rv="left"], .rv-on [data-rv="right"] { transform: translateY(var(--rv-y)); }
}
.rv-on [data-rv].is-in { opacity: 1; transform: none;
  transition: opacity var(--rv-dur) var(--ease), transform var(--rv-dur) var(--ease);
  transition-delay: calc(var(--rv-i, 0) * var(--rv-stagger)); }

/* ---- Rainbow band: fixed bottom strip that blurs and RGB-splits what scrolls
        under it. One per page, never interactive. Chromium renders the SVG
        filters; other browsers get .cband--soft. Hidden on phones. ------------- */
.cband { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--cband-h); pointer-events: none; overflow: hidden; }
.cband i { position: absolute; inset: 0; }
.cband i:nth-of-type(1) { backdrop-filter: url(#cb-0); -webkit-mask-image: linear-gradient(transparent 0%, #000 20%, #000 40%, transparent 60%); mask-image: linear-gradient(transparent 0%, #000 20%, #000 40%, transparent 60%); }
.cband i:nth-of-type(2) { backdrop-filter: url(#cb-1); -webkit-mask-image: linear-gradient(transparent 20%, #000 40%, #000 60%, transparent 80%); mask-image: linear-gradient(transparent 20%, #000 40%, #000 60%, transparent 80%); }
.cband i:nth-of-type(3) { backdrop-filter: url(#cb-2); -webkit-mask-image: linear-gradient(transparent 40%, #000 60%, #000 80%, transparent 100%); mask-image: linear-gradient(transparent 40%, #000 60%, #000 80%, transparent 100%); }
.cband i:nth-of-type(4) { backdrop-filter: url(#cb-3); -webkit-mask-image: linear-gradient(transparent 60%, #000 80%, #000 100%, transparent 120%); mask-image: linear-gradient(transparent 60%, #000 80%, #000 100%, transparent 120%); }
.cband i:nth-of-type(5) { backdrop-filter: url(#cb-4); -webkit-mask-image: linear-gradient(transparent 80%, #000 100%); mask-image: linear-gradient(transparent 80%, #000 100%); }
.cband--soft i:nth-of-type(1) { -webkit-backdrop-filter: blur(.5px); backdrop-filter: blur(.5px); }
.cband--soft i:nth-of-type(2) { -webkit-backdrop-filter: blur(1.2px); backdrop-filter: blur(1.2px); }
.cband--soft i:nth-of-type(3) { -webkit-backdrop-filter: blur(2.2px); backdrop-filter: blur(2.2px); }
.cband--soft i:nth-of-type(4) { -webkit-backdrop-filter: blur(3.5px); backdrop-filter: blur(3.5px); }
.cband--soft i:nth-of-type(5) { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.cband--soft::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,110,30,.07), transparent 28%, transparent 72%, rgba(40,120,255,.08));
  -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
.as-page:has(.cband) .foot { padding-bottom: calc(48px + var(--cband-h) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 809.98px) { .cband { display: none; } .as-page:has(.cband) .foot { padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); } }

/* ==========================================================================
   9. MOTION GRAPHICS
   Diagrams (svg.mg), the register matrix (.mg-mx) and canvas scenes
   (.cv-globe, .cv-morph) that fill a stage, plus animated figure glyphs.
   One grammar for all of them:
     track  1px #303131: the shape at rest
     dots   white dotted stroke (zero-length dashes, round caps)
     light  the one bright thing that moves; red and blue copies 1-1.5px
            either side (screen blend) are the only colour, and only on it
     labels Geist Mono 11 at 46% white; green only when a check passes
   The markup at rest is the end state of the story. Loops run only on
   [data-live].is-live and under prefers-reduced-motion: no-preference.
   ========================================================================== */
.stage:has(> .mg) { container-type: inline-size; }
@container (max-width: 299px) { .mg .lb { display: none; } }
.mg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.mg .tk { fill: none; stroke: var(--line); stroke-width: 1; }
.mg .dt { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 7; opacity: .42; }
.mg .dt2 { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0 31 0 17 0 44; opacity: .75; }
.mg .dt3 { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 0 3 0 7 0 2 0 11; opacity: .3; }
.mg .lt { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mg .nd { fill: var(--stage); stroke: var(--line); stroke-width: 1; }
.mg .pl { fill: var(--stage); }
.mg .gi { fill: none; stroke: var(--text-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mg .lb { font: 500 11px/1 var(--font-mono); fill: var(--mock-mono); }
.mg .lb.hi { fill: var(--text-2); }
.mg .dot { fill: #fff; }
.mg .fr { mix-blend-mode: screen; opacity: 0; }
.mg .fr-r { fill: var(--fringe-r); } .mg .fr-b { fill: var(--fringe-b); }
.mg .frs { fill: none; mix-blend-mode: screen; opacity: 0; }
.mg .frs-r { stroke: var(--fringe-r); transform: translateX(-1.5px); } .mg .frs-b { stroke: var(--fringe-b); transform: translateX(1.5px); }
.mg .spin { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg .spin { animation: gw-spin var(--t-ambient) linear infinite; }
  .is-live .mg .fr { opacity: 1; }
  .is-live .mg .frs { opacity: .7; }
}

/* ---- M2 Transfer gate: a token crosses, three checks pass at the keystone ------- */
.mg-gate .tok { transform: translate(372px, 150px); }
.mg-gate .ck circle { fill: var(--ok); }
.mg-gate .ck text { fill: var(--text-2); }
.mg-gate .ping { fill: none; stroke: var(--ok); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
@keyframes gw-mg-tok {
  0% { transform: translate(84px, 150px); opacity: 0; }
  5% { opacity: 1; }
  30%, 56% { transform: translate(240px, 150px); animation-timing-function: var(--ease-out); }
  80% { transform: translate(372px, 150px); opacity: 1; }
  86%, 100% { transform: translate(396px, 150px); opacity: 0; }
}
@keyframes gw-mg-ck { 0%, 34% { fill: var(--line); } 38%, 92% { fill: var(--ok); } 100% { fill: var(--line); } }
@keyframes gw-mg-ckt { 0%, 34% { fill: var(--mock-mono); } 38%, 92% { fill: var(--text-2); } 100% { fill: var(--mock-mono); } }
@keyframes gw-mg-gk { 0%, 28% { opacity: .45; } 34%, 54% { opacity: 1; } 62%, 100% { opacity: .45; } }
@keyframes gw-mg-ping { 0%, 82% { transform: scale(1); opacity: 0; } 83% { opacity: .9; } 97%, 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-gate .tok { animation: gw-mg-tok var(--t-cycle) linear infinite; }
  .is-live .mg-gate .ck circle { animation: gw-mg-ck var(--t-cycle) linear infinite both; animation-delay: calc(var(--k) * .5s); }
  .is-live .mg-gate .ck text { animation: gw-mg-ckt var(--t-cycle) linear infinite both; animation-delay: calc(var(--k) * .5s); }
  .is-live .mg-gate .gk { animation: gw-mg-gk var(--t-cycle) ease-in-out infinite; }
  .is-live .mg-gate .ping { animation: gw-mg-ping var(--t-cycle) var(--ease-out) infinite; }
}

/* ---- M3 Network mesh: pulses leave the register hub for each network ----------- */
.mg-mesh .pulse { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: .16 1.2; stroke-dashoffset: .16; opacity: 0; }
@keyframes gw-mg-pulse { 0% { stroke-dashoffset: .16; opacity: 1; } 60% { stroke-dashoffset: -1; opacity: 1; } 61%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes gw-mg-node { 0%, 46% { stroke: var(--line); } 50% { stroke: #fff; } 75%, 100% { stroke: var(--line); } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-mesh .pulse { animation: gw-mg-pulse var(--t-pulse) linear infinite both; animation-delay: calc(var(--i) * .8s); }
  .is-live .mg-mesh .node { animation: gw-mg-node var(--t-pulse) linear infinite both; animation-delay: calc(var(--i) * .8s); }
}

/* ---- M4 Lifecycle orbit: a comet runs issue > subscribe > service > redeem ------- */
.mg-orbit .comet { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 84; opacity: 0; }
.mg-orbit .frs.comet { stroke-width: 2; }
.mg-orbit .stn { fill: var(--stage); stroke: #fff; stroke-width: 1; }
.mg-orbit .stl { fill: var(--text-2); }
@keyframes gw-mg-comet { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes gw-mg-stn { 0% { stroke: #fff; fill: #fff; } 14%, 100% { stroke: var(--line); fill: var(--stage); } }
@keyframes gw-mg-stl { 0% { fill: var(--text); } 24%, 100% { fill: var(--mock-mono); } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-orbit .comet { opacity: 1; animation: gw-mg-comet var(--t-cycle) linear infinite; }
  .is-live .mg-orbit .stn { animation: gw-mg-stn var(--t-cycle) linear infinite; animation-delay: var(--d); }
  .is-live .mg-orbit .stl { animation: gw-mg-stl var(--t-cycle) linear infinite; animation-delay: var(--d); }
}

/* ---- M5 Reconcile: a scan line matches register rows to network rows ------------ */
.mg-ledger .scan { fill: #fff; opacity: 0; }
.mg-ledger .br .dt { opacity: .7; }
.mg-ledger .br path:last-child { fill: none; stroke: var(--ok); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes gw-mg-scan { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: .9; } 72% { transform: translateY(224px); opacity: .9; } 76%, 100% { transform: translateY(224px); opacity: 0; } }
@keyframes gw-mg-br { 0% { opacity: 0; } 4%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-ledger .scan { animation: gw-mg-scan var(--t-cycle) linear infinite; }
  .is-live .mg-ledger .br { animation: gw-mg-br var(--t-cycle) linear infinite both; animation-delay: calc(.49s + var(--i) * .926s); }
}

/* ---- M6 Layer stack: three iso plates part and settle -------------------------- */
.mg-stack .p1 { transform: translateY(-70px); }
.mg-stack .p3 { transform: translateY(70px); }
@keyframes gw-mg-p1 { 0%, 18%, 92%, 100% { transform: translateY(-70px); } 46%, 64% { transform: translateY(-20px); } }
@keyframes gw-mg-p3 { 0%, 18%, 92%, 100% { transform: translateY(70px); } 46%, 64% { transform: translateY(20px); } }
@keyframes gw-mg-plb { 0%, 22%, 88%, 100% { opacity: 1; } 42%, 68% { opacity: .25; } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-stack .p1 { animation: gw-mg-p1 var(--t-cycle) ease-in-out infinite; }
  .is-live .mg-stack .p3 { animation: gw-mg-p3 var(--t-cycle) ease-in-out infinite; }
  .is-live .mg-stack .lb { animation: gw-mg-plb var(--t-cycle) ease-in-out infinite; }
}

/* ---- M7 Register matrix: a write head fills ledger rows, dot by dot ------------- */
.mg-mx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; width: min(380px, 100% - 48px); }
.mg-mx-h { display: flex; justify-content: space-between; gap: 12px; font: 500 var(--fs-micro)/15px var(--font-mono); color: var(--mock-mono); }
.mg-mx-g { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 9px 0; justify-items: center; }
.mg-mx-g i { width: 4px; height: 4px; border-radius: 1px; background: rgba(255,255,255,.1); }
.mg-mx-g i.on { background: rgba(255,255,255,.62); }
@keyframes gw-mg-mx {
  0% { background: rgba(255,255,255,.1); box-shadow: none; }
  3% { background: #fff; box-shadow: -1.5px 0 0 var(--fringe-r), 1.5px 0 0 var(--fringe-b); }
  12%, 84% { background: rgba(255,255,255,.62); box-shadow: none; }
  96%, 100% { background: rgba(255,255,255,.1); box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .is-live .mg-mx-g i.on { animation: gw-mg-mx var(--t-pulse) linear infinite both; animation-delay: calc(var(--c) * 110ms + var(--r) * 18ms); }
}

/* ---- Canvas scenes in a stage: same box as .cv-wave ------------------------------ */
.cv-globe, .cv-morph { pointer-events: none; }

/* ---- M10 Animated figure glyphs: extra loops for .si (rest = end state) --------- */
.si .si-shut, .si .si-drop { transform-box: view-box; }
.si .si-turn { transform-box: view-box; transform-origin: 32px 32px; }
.si .si-draw { stroke-dasharray: 1 1; }
@keyframes gw-si-shut { 0%, 50% { transform: translateY(-5px); } 62%, 100% { transform: none; } }
@keyframes gw-si-turn { to { transform: rotate(360deg); } }
@keyframes gw-si-drop { 0%, 46% { transform: translateY(-10px); opacity: 0; } 58% { opacity: 1; } 66%, 100% { transform: none; opacity: 1; } }
@keyframes gw-si-draw { 0%, 10% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .is-live .si .si-shut { animation: gw-si-shut var(--t-glitch) var(--ease-out) infinite; }
  .is-live .si .si-turn { animation: gw-si-turn var(--t-cycle) linear infinite; }
  .is-live .si .si-drop { animation: gw-si-drop var(--t-glitch) var(--ease-out) infinite; }
  .is-live .si .si-draw { animation: gw-si-draw var(--t-glitch) var(--ease) infinite; }
}

/* ---- M11 Isometric figures: still line drawings for cards (fig-01 to fig-09) ----- */
/* Hairlines on 120 x 50 isometric plates. Shapes fill with --fig-bg, the colour of what
   they sit on, so nearer plates hide farther ones: set it on the container. */
.as-page { --fig-bg: var(--bg); }
.stage { --fig-bg: var(--stage); }
.icard, .card-fig { --fig-bg: var(--surface); }
.figbox { position: relative; aspect-ratio: 8 / 5; max-width: 100%; }
.figbox > .ix { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage > .ix { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); }
.ix { overflow: visible; pointer-events: none; }
.ix path, .ix circle { vector-effect: non-scaling-stroke; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.ix .s   { fill: var(--fig-bg); stroke: rgba(255,255,255,.5); }    /* silhouette */
.ix .hl  { fill: var(--fig-bg); stroke: rgba(255,255,255,.9); }    /* the one subject */
.ix .f   { fill: none; stroke: rgba(255,255,255,.26); }            /* top face */
.ix .e   { fill: none; stroke: rgba(255,255,255,.12); }            /* bevel and near edge */
.ix .g   { fill: none; stroke: rgba(255,255,255,.22); }            /* engraving: rings, lines */
.ix .d   { fill: none; stroke: rgba(255,255,255,.3); stroke-dasharray: 1.5 3.5; }   /* guides, ghosts */
.ix .hl2 { fill: none; stroke: rgba(255,255,255,.55); stroke-dasharray: 1.5 3.5; }
.ix .px  { fill: rgba(255,255,255,.62); stroke: none; }           /* dot grid */
.ix .px2 { fill: rgba(255,255,255,.14); stroke: none; }           /* faint network grid */

/* ==========================================================================
   10. FULL-SITE PARTS
   Added 23 October 2026: the parts a whole marketing site needs that a
   one-page template does not have. Navigation menus, breadcrumbs, tabs,
   choice fields and form states, tables, filters and pages, dialogs,
   announcement and cookie notices (elements E15 to E23); steps, timeline,
   comparison table, logo wall, statement, team, careers, insights index,
   post, downloads, newsletter and legal with contents (sections S18 to S29).
   Same tokens, same rules: flat #131517 tiles, 4px radius, no borders on
   cards, one accent per section.
   ========================================================================== */

/* ---- E15 Nav dropdowns: a button in the menu opens a panel of links ------------- */
.menu .dd { position: relative; display: flex; }
.menu .dd-panel a { white-space: normal; }
.menu .dd-foot a { color: var(--text-2); }
.dd > button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font); letter-spacing: var(--ls-body); color: var(--text-2); white-space: nowrap; }
.dd > button .ic { width: 12px; height: 12px; transition: rotate var(--dur-btn) var(--ease); }
.dd > button:hover, .dd > button[aria-expanded="true"] { color: var(--text); }
.dd > button[aria-expanded="true"] .ic { rotate: 180deg; }
.dd-panel { position: absolute; top: calc(100% + 22px); left: 50%; translate: -50% 0; z-index: 61; width: 560px; padding: 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; background: var(--surface); border-radius: var(--r-card); }
.dd-panel::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-nav); border-radius: inherit; pointer-events: none; }
.dd-panel[hidden] { display: none; }
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; }   /* keeps hover alive across the gap */
.dd-panel--1 { width: 300px; grid-template-columns: minmax(0, 1fr); }
.dd-item { display: flex; align-items: center; gap: 12px; padding: 12px; white-space: normal; border-radius: var(--r-card); transition: background-color var(--dur-btn-2) ease; }
.dd-item:hover { background: var(--surface-2); }
.dd-item .tile { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-card); background: var(--surface-2); color: var(--text); }
.dd-item:hover .tile { background: var(--line); }
.dd-item .tile .ic, .file .tile .ic { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 1.8; }
.dd-item .tx { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dd-item b { font: var(--fw-medium) var(--fs-small)/var(--lh-body) var(--font); color: var(--text); }
.dd-item span { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.dd-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding: 12px; margin-top: 4px; border-top: 1px solid var(--surface-2); }
.nav--static { position: relative; top: auto; z-index: 5; }
/* the mobile sheet groups the same links under a <details> per menu */
.sheet .sheet-grp { width: 100%; }
.sheet-grp summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none;
  font: var(--fw-medium) var(--fs-menu)/var(--lh-head) var(--font); letter-spacing: var(--ls-head); color: var(--text-2); }
.sheet-grp summary::-webkit-details-marker { display: none; }
.sheet-grp summary .ic { transition: rotate var(--dur-btn) var(--ease); }
.sheet-grp[open] summary { color: var(--text); }
.sheet-grp[open] summary .ic { rotate: 180deg; }
.sheet .sheet-grp ul { gap: 14px; padding: 16px 0 4px 16px; }
.sheet .sheet-grp ul a:not(.btn) { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); letter-spacing: var(--ls-body); color: var(--text-3); }

/* ---- E16 Breadcrumbs and in-page sub-nav --------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.crumbs li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text-3); }
.subnav { position: sticky; top: calc(var(--nav-h) + 1px + env(safe-area-inset-top, 0px)); z-index: 50; background: var(--bg);
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px)); }
.subnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line-nav); pointer-events: none; }
.subnav-in { max-width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 0; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.subnav a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface-2); transition: background-color var(--dur-btn-2) ease; }
.subnav a:hover { color: var(--text); }
.subnav a[aria-current="true"] { color: var(--text); }
.subnav a[aria-current="true"]::before { background: var(--accent); }

/* ---- E17 Tabs: a segmented bar; panels show one at a time (all, without JS) ------ */
.tabs { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.tablist { display: inline-flex; align-self: flex-start; max-width: 100%; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--surface); border-radius: var(--r-field); }
.tablist::-webkit-scrollbar { display: none; }
.tablist button { flex: none; padding: var(--btn-pad-y) var(--btn-pad-x); border: 0; border-radius: var(--r-btn); background: none; cursor: pointer;
  font: var(--fw-medium) var(--fs-btn)/var(--lh-btn) var(--font); letter-spacing: var(--ls-body); color: var(--text-3); white-space: nowrap;
  transition: background-color var(--dur-btn-2) ease, color var(--dur-btn-2) ease; }
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] { background: var(--surface-2); color: var(--text); }
[role="tabpanel"][hidden] { display: none; }
.tabs.is-ready [role="tabpanel"] { animation: gw-tab-in var(--dur-fade) var(--ease); }
@keyframes gw-tab-in { from { opacity: 0; transform: translateY(6px); } }
.tab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--row-gap); align-items: start; }
.tab-split .tx { display: flex; flex-direction: column; gap: 12px; max-width: var(--text-max); }
@media (max-width: 809.98px) { .tab-split { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- E18 Choice fields and form states ------------------------------------------- */
.choices { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.choices > legend { padding: 0; margin-bottom: var(--label-gap); font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.choices--row { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
.choices--row > legend { width: 100%; }
.choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.cb, .rd { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin: 1.5px 0 0; cursor: pointer;
  background: var(--surface-2); transition: background-color var(--dur-btn-2) ease, box-shadow var(--dur-btn-2) ease; }
.cb { border-radius: var(--r-card); }
.rd { border-radius: 50%; }
.cb:hover, .rd:hover { background: var(--line); }
.cb:checked, .rd:checked { background: var(--btn-primary); }
.cb:checked::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid var(--text-on-light); border-width: 0 0 1.8px 1.8px; rotate: -45deg; }
.rd:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-on-light); }
.cb:focus-visible, .rd:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 0 0 4px var(--bg), 0 0 0 5px rgba(255,255,255,.5); }
.hint { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.err { display: none; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--bad); }
.field.is-error .err, .choices.is-error .err { display: block; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select select { box-shadow: 0 0 0 1px var(--bad); }
.form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.form-done[hidden] { display: none; }
.form-done .tx { display: flex; flex-direction: column; gap: 8px; }
.form-done .tx p { font-size: var(--fs-small); line-height: var(--lh-body); }
.form-done:focus { outline: none; }
.btn-link { display: inline; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; color: var(--text);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* ---- E19 Table: a #131517 tile, #232326 rules, first column sticks on phones ------ */
.tbl-wrap { position: relative; overflow-x: auto; background: var(--surface); border-radius: var(--r-card); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.tbl--wide { min-width: 720px; }
.tbl caption { padding: 20px 20px 4px; text-align: left; caption-side: top; color: var(--text-3); }
.tbl th, .tbl td { padding: 14px 20px; text-align: left; vertical-align: top; }
.tbl thead th { font-weight: var(--fw-medium); color: var(--text); white-space: nowrap; }
.tbl tbody tr { border-top: 1px solid var(--surface-2); }
.tbl tbody th { font-weight: var(--fw-medium); color: var(--text); }
.tbl .ic { color: var(--text); margin-top: 2.5px; }
.tbl .na { color: var(--text-3); }
.tbl--sticky tbody th, .tbl--sticky thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.tbl-note { margin-top: 16px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
@media (max-width: 809.98px) { .tbl th, .tbl td { padding: 12px 16px; } }

/* ---- E20 Filter chips and pagination ---------------------------------------------- */
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { position: relative; display: inline-flex; align-items: center; padding: 4px 12px; border: 0; border-radius: var(--r-badge); background: none; cursor: pointer;
  font: var(--fw-regular) var(--fs-small)/var(--lh-body) var(--font); letter-spacing: var(--ls-body); color: var(--text-2); white-space: nowrap;
  transition: background-color var(--dur-btn-2) ease, color var(--dur-btn-2) ease; }
.fchip::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.fchip:hover { color: var(--text); }
.fchip[aria-pressed="true"] { background: var(--btn-primary); color: var(--text-on-light); }
.fchip[aria-pressed="true"]::after { border-color: transparent; }
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pager a, .pager span { min-width: 32.8px; height: 32.8px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-btn);
  font: var(--fw-medium) var(--fs-btn)/1 var(--font); color: var(--text-2); transition: background-color var(--dur-btn-2) ease, color var(--dur-btn-2) ease; }
.pager a:hover { background: var(--surface-2); color: var(--text); }
.pager [aria-current="page"] { background: var(--surface-2); color: var(--text); }
.pager .gap { color: var(--text-3); }
.pager .pg-step { padding: 0 12px; background: var(--btn-secondary); }
.pager .pg-step[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.list-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.list-bar .muted { white-space: nowrap; }
.list-foot { display: flex; justify-content: center; margin-top: 48px; }
[data-cat][hidden] { display: none !important; }

/* ---- E21 Dialog: native <dialog>, a form card over a dimmed page ---------------- */
.dlg { width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); margin: auto; padding: 32px 24px; border: 0; overflow: auto;
  background: var(--surface); color: var(--text-2); border-radius: var(--r-card); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); }
.dlg::backdrop { background: rgba(8,10,9,.86); }
.dlg[open] { animation: gw-dlg-in var(--dur-fade) var(--ease-out); }
.dlg[open]::backdrop { animation: gw-fade-in var(--dur-fade) ease; }
@keyframes gw-dlg-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes gw-fade-in { from { opacity: 0; } }
.dlg-in { display: flex; flex-direction: column; gap: 32px; }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dlg-head .tx { display: flex; flex-direction: column; gap: 8px; }
.dlg-head .tx p { font-size: var(--fs-small); line-height: var(--lh-body); }
.dlg-x { flex: none; width: 32.8px; height: 32.8px; display: grid; place-items: center; margin: -6px -6px 0 0; padding: 0; border: 0; border-radius: var(--r-btn);
  background: var(--btn-secondary); color: var(--text-2); cursor: pointer; transition: background-color var(--dur-btn-2) ease, color var(--dur-btn-2) ease; }
.dlg-x:hover { background: var(--btn-secondary-hover); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .dlg[open], .dlg[open]::backdrop { animation: none; } }

/* ---- E22 Announcement bar: one line above the nav, scrolls away ------------------- */
.annc { position: relative; background: var(--surface); padding: 8px max(var(--gutter-nav), env(safe-area-inset-right, 0px)) 8px max(var(--gutter-nav), env(safe-area-inset-left, 0px)); }
.annc[hidden] { display: none; }
.annc-in { max-width: var(--page-max); margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 12px; padding-right: 32px;
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); text-align: center; }
.annc-in .echo-dot { background: var(--accent, var(--accent-white)); }
.annc-in a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; white-space: nowrap; }
.annc-x { position: absolute; right: max(var(--gutter-nav), env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; width: 24px; height: 24px; display: grid; place-items: center;
  padding: 0; border: 0; border-radius: var(--r-card); background: none; color: var(--text-3); cursor: pointer; }
.annc-x:hover { color: var(--text); }
@media (max-width: 809.98px) { .annc-in { justify-content: flex-start; text-align: left; } .annc-in .echo-dot { display: none; } }

/* ---- E23 Cookie notice: a small card bottom left, above the rainbow band ---------- */
.cookie { position: fixed; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(var(--cband-h) + 16px); z-index: 70; width: min(400px, calc(100% - 32px));
  display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--surface); border-radius: var(--r-card); }
.cookie::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line-nav); border-radius: inherit; pointer-events: none; }
.cookie[hidden] { display: none; }
.cookie .tx { display: flex; flex-direction: column; gap: 8px; }
.cookie p { font-size: var(--fs-small); line-height: var(--lh-body); }
.cookie .btns { align-items: center; }
.cookie .tlink { margin-left: 8px; }
.cookie--inline { position: relative; left: auto; bottom: auto; z-index: auto; }
@media (max-width: 809.98px) { .cookie:not(.cookie--inline) { left: 16px; right: 16px; width: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } }

/* ---- S18 Steps: numbered cards, a track draws across each as it arrives ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.step { display: flex; flex-direction: column; gap: 32px; min-width: 0; padding: 20px 20px 24px; background: var(--surface); border-radius: var(--r-card); }
.step-n { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-micro)/15px var(--font-mono); letter-spacing: 0; color: var(--mock-mono); }
.step-n .track { flex: 1; height: 1px; background: var(--surface-2); transform-origin: left center; }
.step-n .echo-dot { background: var(--surface-2); }
.step:first-child .step-n .echo-dot { background: var(--accent); }
.step .tx { display: flex; flex-direction: column; gap: 8px; }
.step .tx p { font-size: var(--fs-small); line-height: var(--lh-body); }
.step .muted { margin-top: auto; }
.rv-on .step[data-rv] .track { transform: scaleX(0); }
.rv-on .step[data-rv].is-in .track { transform: none; transition: transform 1.2s var(--ease) calc(var(--rv-i, 0) * var(--rv-stagger) + .3s); }
@media (max-width: 1199.98px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .steps { grid-template-columns: minmax(0, 1fr); } .step { gap: 24px; } }

/* ---- S19 Timeline: date, dot on a track, then the entry ---------------------------- */
.tl { display: flex; flex-direction: column; max-width: var(--form-col); margin: 0; padding: 0; list-style: none; }
.tl li { display: grid; grid-template-columns: 136px 16px minmax(0, 1fr); column-gap: 24px; }
.tl .when { padding-top: 1px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); text-align: right; }
.tl .rail { position: relative; }
.tl .rail::before { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: -4px; width: 1px; background: var(--surface-2); }
.tl .rail::after { content: ""; position: absolute; left: 4px; top: 7px; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--line); }
.tl li:last-child .rail::before { display: none; }
.tl li.is-now .rail::after { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.tl .what { display: flex; flex-direction: column; gap: 8px; padding-bottom: 40px; min-width: 0; }
.tl li:last-child .what { padding-bottom: 0; }
.tl .what p { font-size: var(--fs-small); line-height: var(--lh-body); }
@media (max-width: 809.98px) {
  .tl li { grid-template-columns: 16px minmax(0, 1fr); column-gap: 16px; }
  .tl .rail { grid-column: 1; grid-row: 1 / span 2; }
  .tl .when { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 4px; }
  .tl .what { grid-column: 2; grid-row: 2; }
}

/* ---- S21 Logo wall: flat tiles, monochrome marks at half white -------------------- */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.logo-tile { min-width: 0; height: 112px; display: grid; place-items: center; padding: 20px; background: var(--surface); border-radius: var(--r-card); color: var(--text); }
.logo-tile > svg, .logo-tile > img { max-width: 60%; max-height: 32px; opacity: .5; transition: opacity var(--dur-btn-2) ease; }
.logo-tile:hover > svg, .logo-tile:hover > img { opacity: .8; }
.logo-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 var(--fs-micro)/15px var(--font-mono); letter-spacing: 0; color: var(--mock-mono); text-align: center; }
.logo-ph .ic { width: 20px; height: 20px; stroke-width: 1.4; color: var(--text-3); }
.logos-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
@media (max-width: 809.98px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .logo-tile { height: 96px; } }

/* ---- S22 Statement: one large sentence, the second half dimmed ------------------- */
.stmt { display: flex; flex-direction: column; gap: 32px; max-width: 880px; }
.stmt blockquote, .stmt > p:not(.tag) { margin: 0; font-size: var(--fs-h2); line-height: 1.2; letter-spacing: var(--ls-head); color: var(--text); text-wrap: pretty; }
.stmt blockquote span, .stmt > p:not(.tag) span { color: var(--mock-mono); }
.stmt .who .tx span { color: var(--text-3); }

/* ---- S23 Team: monogram cards ------------------------------------------------------- */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none; }
.member { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px 20px; background: var(--surface); border-radius: var(--r-card); }
.avatar--lg { width: 64px; height: 64px; font-size: 18px; }
.member .tx { display: flex; flex-direction: column; gap: 4px; }
.member .tx span { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.member .tlink { margin-top: auto; }
@media (max-width: 1199.98px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 809.98px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .member { padding: 20px 16px; gap: 20px; } }

/* ---- S24 Careers: one tile per role, the whole row is the link --------------------- */
.jobs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) 180px 160px 64px; align-items: center; gap: 24px; padding: 20px; background: var(--surface); border-radius: var(--r-card);
  transition: background-color var(--dur-btn-2) ease; }
.job:hover { background: var(--mock); }
.job .meta { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.job .go { justify-self: end; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); }
.job:hover .go { color: var(--text); }
.jobs-empty { padding: 24px 20px; background: var(--surface); border-radius: var(--r-card); font-size: var(--fs-small); line-height: var(--lh-body); }
@media (max-width: 809.98px) {
  .job { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 16px; }
  .job h3 { grid-column: 1; }
  .job .meta { grid-column: 1; }
  .job .go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* ---- S25 Insights index: chips, a featured post, a 3-up grid, pages ------------------ */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap) var(--grid-gap); }
.post { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--surface); border-radius: var(--r-card); }
.post .stage { aspect-ratio: 344 / 236; display: grid; place-items: center; border-radius: 0; transition: background-color var(--dur-btn-2) ease; }
.post:hover .stage { background: #111314; }
.post .stage .ring64 { z-index: 1; background: var(--stage); }
.post-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 28px; }
.post-body > p:not(.post-meta) { font-size: var(--fs-small); line-height: var(--lh-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.post-meta .cat { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.post-meta .cat::before { content: ""; width: var(--capsule-w); height: var(--capsule-h); border-radius: var(--r-pill); background: var(--accent); }
.post-meta i { font-style: normal; color: var(--text-3); }
.post h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }   /* the whole card is the link */
.post h3 a:focus-visible { outline: none; }
.post:has(h3 a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.post--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.post--feature .stage { aspect-ratio: auto; min-height: 340px; height: 100%; }
.post--feature .post-body { justify-content: center; gap: 16px; padding: 40px; }
.post--feature .post-body > p:not(.post-meta) { font-size: var(--fs-body); -webkit-line-clamp: 4; }
@media (max-width: 1199.98px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 809.98px) {
  .posts { grid-template-columns: minmax(0, 1fr); }
  .post--feature { grid-template-columns: minmax(0, 1fr); }
  .post--feature .stage { aspect-ratio: 344 / 236; min-height: 0; }
  .post--feature .post-body { padding: 24px 24px 28px; gap: 12px; }
}

/* ---- S26 Post: a reading page with contents, prose, author and share --------------- */
.post-head { display: flex; flex-direction: column; gap: 24px; max-width: var(--hero-text); width: 100%; }
.post-head .page-head { gap: 16px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--surface-2); }
.byline .who .tx b { font-size: var(--fs-small); }
.byline .avatar { width: 40px; height: 40px; font-size: 13px; }
.byline .post-meta { gap: 8px; }
.doc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); gap: 48px; max-width: var(--page-max); margin-inline: auto; width: 100%; align-items: start; }
.doc > .doc-body { grid-column: 2; min-width: 0; }
.doc--legal { grid-template-columns: minmax(0, 1fr) minmax(0, var(--article-col)) minmax(0, 1fr); }
.toc { grid-column: 1; position: sticky; top: calc(var(--nav-h) + 32px); display: flex; flex-direction: column; gap: 16px; max-width: 200px; }
.toc ol { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: var(--lh-body); }
.toc a { display: flex; gap: 10px; color: var(--text-3); }
.toc a::before { content: ""; flex: none; width: var(--bar-w); height: var(--bar-h); margin-top: 2.5px; border-radius: var(--r-pill); background: var(--surface-2); transition: background-color var(--dur-btn-2) ease; }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--text); }
.toc a[aria-current="true"]::before { background: var(--accent); }
.prose { display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }
.prose > h2 { margin-top: 28px; font-size: var(--fs-h4); font-weight: var(--fw-medium); scroll-margin-top: calc(var(--nav-h) + 32px); }
.prose > h3 { margin-top: 12px; font-size: var(--fs-h5); font-weight: var(--fw-medium); scroll-margin-top: calc(var(--nav-h) + 32px); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; }
.prose ul { list-style: disc; }
.prose li::marker { color: var(--text-3); }
.prose a:not(.btn) { color: var(--text); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--surface-2); font: 0.875em/1 var(--font-mono); color: var(--text); }
.prose blockquote { display: flex; gap: 20px; margin: 12px 0; font-size: var(--fs-h4); line-height: 1.35; letter-spacing: var(--ls-head); color: var(--text); }
.prose blockquote::before { content: ""; flex: none; width: var(--bar-w); border-radius: var(--r-pill); background: var(--accent); }
.prose figure { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.prose figure .stage { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.prose figcaption, .prose .fn { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.callout { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface); border-radius: var(--r-card); font-size: var(--fs-small); line-height: var(--lh-body); }
.callout .h6 { display: flex; align-items: center; gap: 8px; }
.callout .h6::before { content: ""; width: var(--capsule-w); height: var(--capsule-h); border-radius: var(--r-pill); background: var(--accent); }
.post-end { display: flex; flex-direction: column; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--surface-2); }
.author { display: flex; align-items: flex-start; gap: 16px; padding: 24px 20px; background: var(--surface); border-radius: var(--r-card); }
.author .tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.author .tx span { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.author .tx p { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-body); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.share a, .share button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; color: var(--text-2); }
.share a:hover, .share button:hover { color: var(--text); }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 32px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.doc-meta a { color: var(--text-2); }
.doc-meta a:hover { color: var(--text); }
@media (max-width: 1199.98px) {
  .doc, .doc--legal { grid-template-columns: minmax(0, 1fr); max-width: var(--form-col); margin-inline: 0; gap: 32px; }
  .doc--legal { max-width: var(--article-col); }
  .doc > .doc-body, .toc { grid-column: 1; }
  .toc { position: static; max-width: none; padding: 20px; background: var(--surface); border-radius: var(--r-card); }
}
@media (max-width: 809.98px) {
  .prose > h2 { margin-top: 20px; }
  .prose blockquote { font-size: var(--fs-h5); gap: 16px; }
  .byline { flex-direction: column; align-items: flex-start; }
}

/* ---- S27 Downloads: document rows, an optional request dialog --------------------- */
.files { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.file { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 20px; background: var(--surface); border-radius: var(--r-card); }
.file .tile { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-card); background: var(--surface-2); color: var(--text); }
.file .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file .tx span { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-3); }
.file .act { display: flex; align-items: center; gap: 16px; }
@media (max-width: 809.98px) {
  .file { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 16px; padding: 16px; }
  .file .act { grid-column: 2; justify-content: space-between; }
}

/* ---- S28 Newsletter: a tile with the heading left and an inline field right --------- */
.nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: end; gap: 32px 64px; padding: 40px; background: var(--surface); border-radius: var(--r-card); }
.nl .head { margin-bottom: 0; }
.nl-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nl-field { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 16px; border-radius: var(--r-field); background: var(--surface-2);
  transition: box-shadow var(--dur-btn-2) ease, background-color var(--dur-btn-2) ease; }
.nl-field:hover { background: #28282b; }
.nl-field:focus-within { box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.nl-field input { flex: 1; min-width: 0; height: 32.8px; padding: 0; border: 0; background: none; outline: none; color: var(--text); font: var(--fw-regular) var(--fs-body)/1.2 var(--font); letter-spacing: 0; }
.nl-field input::placeholder { color: var(--text-3); opacity: 1; }
.nl .form-done { gap: 8px; }
@media (max-width: 1199.98px) { .nl { grid-template-columns: minmax(0, 1fr); align-items: start; } }
@media (max-width: 809.98px) { .nl { padding: 24px 20px; } }

@media (prefers-reduced-motion: reduce) { .rv-on .step[data-rv] .track { transform: none; } }

/* ---- Product cards (S31): head in the first column, one card per product ---------- */
.prow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); align-items: stretch; }
.prow-head { margin: 0; padding-right: 16px; }
.pcard-link { color: inherit; text-decoration: none; transition: background-color var(--dur-btn-2) ease; }
.pcard-link:hover { background: var(--mock); }
.pcard-link:hover .tlink { color: var(--text); }
.prow .mcard .body { flex: 1; }
.pfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.pcard-soon h3 { color: var(--text-3); }
/* the placeholder glyph: an M11 module drawn dashed, a product not built yet */
.pcard-soon .stage > .ix-soon { position: static; width: 128px; height: 128px; }
.pcard-soon .ix-soon .d { stroke: rgba(255,255,255,.42); }
.plock { display: flex; align-items: center; gap: 20px; }
.plock-mark { width: 42px; height: 56px; flex: none; fill: none; stroke: #fff; stroke-width: 4; }
.plock-tx { display: flex; flex-direction: column; gap: 4px; }
.plock-tx b { font: var(--fw-regular) 40px/1 var(--font); letter-spacing: var(--ls-head); color: var(--text); }
.plock-tx span { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--text-2); }
@media (max-width: 1199.98px) { .prow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prow-head { grid-column: 1 / -1; margin-bottom: 24px; } }
@media (max-width: 809.98px) { .prow { grid-template-columns: minmax(0, 1fr); } }

/* ---- Reduced motion: no entrances, no loops, no transitions ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .as-page *, .as-page *::before, .as-page *::after, .as-page details::details-content { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   11. 3D FIGURE, SPLIT HERO, LOGO SLIDER, RAINBOW PILL
   Added 25 October 2026 (approved on the site preview, 24 October 2026).
   Elements E24 to E26 and section S32. The figure is drawn by kit/fig3d.js.
   ========================================================================== */

/* ---- 3D figures  --------------------------------------------------
   Split hero on home and split page head on cLTC: copy left, the live figure (fig3d.js) right.
   Stacks below 900, figure under the copy. */
.fig3d { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1; }
.fig3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; touch-action: pan-y;
  opacity: 0; transition: opacity .7s ease-out; }
.fig3d--ready canvas { opacity: 1; }

.hero--split .hero-in { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 440px); justify-content: center; align-items: center; gap: 24px 8px; }
.hero--split .hero-head { max-width: 520px; margin: 0; }
.hero--split .br-d { display: none; }
.hero--split .fig3d { margin-block: -32px; }
.hero--split { padding-bottom: 8px; }   /* the logo row sits just above the divider */
@media (max-width: 809.98px) { .hero--split { padding-bottom: 32px; } }   /* phones: more air under the logo row */

.page--split .page-col { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 400px); justify-content: center; align-items: center; gap: 24px 8px; }
.page--split .fig3d { margin-block: -24px; }

@media (max-width: 899.98px) {
  .hero--split .hero-in, .page--split .page-col { grid-template-columns: minmax(0, 1fr); }
  .hero--split .fig3d, .page--split .fig3d { max-width: 400px; justify-self: center; margin-block: -16px; }
}


/* E25 Logo slider at the foot of the split hero. Owners' files, unaltered, 29px tall (Litecoin stays
   above the 100px screen minimum its guidelines set). Edges fade out; stops for reduced motion. */
.logos { position: relative; z-index: 1; max-width: var(--page-max); margin: 88px auto 0; display: flex; flex-direction: column; gap: 20px; }
.logos-l { margin: 0; font: var(--fs-small)/var(--lh-body) var(--font); letter-spacing: var(--ls-body); color: var(--text-3); text-align: center; }
.logos-vp { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-track { display: flex; align-items: center; gap: 72px; width: max-content; margin: 0; padding: 0; list-style: none; animation: gw-logos 36s linear infinite; }
.logos-track li { flex: none; opacity: .7; }
.logos-vp:hover .logos-track { animation-play-state: paused; }
@keyframes gw-logos { to { transform: translateX(calc(-50% - 36px)); } }
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; } }
@media (max-width: 809.98px) { .logos { margin-top: 40px; } .logos-track { gap: 48px; } @keyframes gw-logos { to { transform: translateX(calc(-50% - 24px)); } } }

/* E24 Rainbow pill (approved): a grey capsule with a short, soft spectral glint that travels round its
   1px border, in the place of the hero tag. Colours follow the end line's tips and the rainbow band. */
@property --pill-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pill-rb { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid transparent; border-radius: var(--r-pill);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--pill-a), var(--line) 0 64%, rgba(255,90,40,.5) 72%, rgba(255,210,60,.45) 77%, rgba(60,240,255,.45) 83%, rgba(60,110,255,.5) 88%, var(--line) 96%) border-box;
  animation: gw-pill-rb 7s linear infinite;
  font-size: var(--fs-small); line-height: var(--lh-body); color: var(--text-2); text-decoration: none; transition: color .2s; }
.pill-rb:hover { color: var(--text); }
.pill-rb-l { padding: 0 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-weight: var(--fw-medium); }
.pill-rb-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--text-3); }
@keyframes gw-pill-rb { to { --pill-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .pill-rb { animation: none; } }