/* AJALabs.ai — site stylesheet.
   Tokens and components follow the Modernist design system used by the design
   prototype. Zero radius, 2px rules, Archivo throughout. Two themes: dark
   (black + green, the default) and light (white + red, Modernist's own
   palette), switched by data-theme="light" on <html>.
   Sections run in page order: tokens, base, components, header, home,
   generic page blocks, library, utility pages, footer, dialog, media. */

/* ============ Tokens ============ */
:root {
  --color-bg: #0f1311;
  --color-surface: #171c19;
  --color-text: #eef2ef;
  --color-divider: color-mix(in srgb, #eef2ef 26%, transparent);
  --color-accent: #07bf63;
  --color-accent-100: #0e2118;
  --color-accent-200: #112e21;
  --color-accent-300: #16432f;
  --color-accent-400: #0bd872;
  --color-accent-500: #07bf63;
  --color-accent-600: #0bd872;
  --color-accent-700: #37e28a;
  --color-accent-800: #7cefb3;
  --color-accent-900: #c4f8dc;
  --color-neutral-100: #1a1f1c;
  --color-neutral-200: #232925;
  --color-neutral-300: #3a413c;
  --color-neutral-500: #8a938d;
  --color-neutral-700: #c3cac5;
  --color-neutral-800: #dde2de;
  --color-save: #2563eb;
  --color-save-text: #86acff;
  --color-save-hover: #b3cbff;
  --color-err: #ff8a8a;
  --color-warn: #f5c46b;
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  /* Solid accent behind text (primary buttons, badges, the closing bands) and the text on it. */
  --color-fill: #07bf63;
  --color-on-fill: #0f1311;
  --color-fill-hover: #0bd872;
  --color-fill-active: #37e28a;
  /* The dark button on an accent band. */
  --color-ink: #0f1311;
  --color-on-ink: #eef2ef;
  --color-ink-hover: #1f2622;
  --color-backdrop: rgba(0, 0, 0, .7);
  --search-cancel: invert(1) opacity(.6);

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-72: color-mix(in srgb, var(--color-text) 72%, transparent);
  --t-80: color-mix(in srgb, var(--color-text) 80%, transparent);
  --t-70: color-mix(in srgb, var(--color-text) 70%, transparent);
  --gutter: clamp(20px, 4vw, 56px);
  --hdr-h: 68px;
  color-scheme: dark;
}

/* Light theme: Modernist red on white. The fill steps down to accent-600 so
   white text on it passes WCAG AA (4.7:1); #ec3013 stays for rules and marks. */
:root[data-theme="light"] {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-accent: #ec3013;
  --color-accent-100: #ffe9e4;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ec3013;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-500: #9b9797;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-save: #2563eb;
  --color-save-text: #1d4ed8;
  --color-save-hover: #1e3a8a;
  --color-err: #b42318;
  --color-warn: #8a5a00;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --color-fill: #dd2b0f;
  --color-on-fill: #ffffff;
  --color-fill-hover: #ae1800;
  --color-fill-active: #7c1405;
  --color-ink: #201e1d;
  --color-on-ink: #f3f2f2;
  --color-ink-hover: #2d2b2b;
  --color-backdrop: color-mix(in srgb, #201e1d 60%, transparent);
  --search-cancel: opacity(.6);
  color-scheme: light;
}
/* Theme-specific images (logo, hero ring). */
:root:not([data-theme="light"]) .theme-light-only,
:root[data-theme="light"] .theme-dark-only { display: none !important; }

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
  text-wrap: pretty;
}
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0; font-family: var(--font-heading); font-weight: 800;
  line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance;
}
:where(h1) { font-size: 42px; }
:where(h2) { font-size: 32px; }
:where(h3) { font-size: 25px; }
:where(h4) { font-size: 20px; }
p { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; }
:where(a) { color: var(--color-accent-700); text-underline-offset: 3px; }
:where(a:hover) { color: var(--color-accent-800); }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
main:focus { outline: none; }
b, strong { font-weight: 800; }
mark { background: color-mix(in srgb, var(--color-accent) 28%, transparent); color: inherit; padding: 0 1px; }

.wrap { max-width: 1360px; margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(64px, 8vw, 112px); }
.rule-top { border-top: 2px solid var(--color-divider); }
.accent { color: var(--color-accent); }
.h3 { font-size: 25px; }
.strong { font-weight: 800; text-decoration: none; }
.inline-link { font-weight: 700; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  padding: 10px 14px; background: var(--color-fill); color: var(--color-on-fill);
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--color-on-fill); }
.sq { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--color-accent); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700);
}
.grayscale { filter: grayscale(1) contrast(1.08); }
/* The spam trap in forms: people never see or fill it; bots usually do. */
/* Off the start edge: in Arabic that is the right, where it can't make the page scroll sideways. */
.hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; white-space: normal; text-align: start;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid transparent; border-radius: 0;
  padding: 8px 14.4px;
}
.btn svg { display: block; flex: none; }
.btn:hover { color: var(--color-text); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-fill); color: var(--color-on-fill); }
.btn-primary:hover { background: var(--color-fill-hover); color: var(--color-on-fill); }
.btn-primary:active { background: var(--color-fill-active); }
.btn-primary:disabled:hover { background: var(--color-fill); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: 4px; }
.btn-ghost:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn-block { width: 100%; margin-top: 8px; justify-content: flex-start; text-align: start; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-lg { padding: 14px 18px; font-size: 15px; justify-content: flex-start; }
.btn-xl { padding: 14px 18px; font-size: 15px; justify-content: flex-start; }
.btn-xl.btn-primary { min-width: 220px; }
.btn-hero { padding: 14px 18px; font-size: 15px; min-width: 200px; justify-content: flex-start; }
.btn-blk { padding: 14px 18px; font-size: 15px; min-width: 220px; justify-content: flex-start; }
.btn-ink {
  background: var(--color-ink); color: var(--color-on-ink); border-color: var(--color-ink);
  min-width: 240px; padding: 16px 20px; font-size: 16px; justify-content: flex-start;
}
.btn-ink:hover { background: var(--color-ink-hover); color: var(--color-on-ink); }
.btn-outline-ink {
  color: var(--color-on-fill); border-color: var(--color-on-fill);
  padding: 16px 20px; font-size: 16px; justify-content: flex-start;
}
.btn-outline-ink:hover { background: rgba(0, 0, 0, .08); color: var(--color-on-fill); }

/* ============ Badges, chips, dots ============ */
.badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-weight: 800; letter-spacing: .04em; line-height: 1.2; white-space: nowrap;
  padding: 4px 9px; font-size: 12px;
}
.badge svg { flex: none; }
.badge-xs { padding: 3px 8px; font-size: 11px; }
.badge-sm { padding: 4px 9px; font-size: 12px; }
.badge-md { padding: 5px 10px; font-size: 12px; }
.badge-earn { background: var(--color-fill); color: var(--color-on-fill); }
.badge-save { background: var(--color-save); color: #fff; }
.badge-outline { border: 1px solid var(--color-text); color: var(--color-text); letter-spacing: .02em; }
.badge-outline.badge-md { padding: 4px 9px; }
.badge-outline.badge-xs { padding: 2px 7px; }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; flex: none; }
.dot-earn { background: var(--color-accent); }
.dot-save { background: var(--color-save); }
.dot-sm { display: inline-block; width: 6px; height: 6px; flex: none; background: var(--color-accent); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-70); margin-inline-end: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 8px 14px; border: 1px solid var(--color-divider);
  font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-text); text-decoration: none;
}
a.chip:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.chip-sm { padding: 7px 12px; font-size: 13px; min-height: 0; }
.chip-tag { color: var(--t-72); border-style: dashed; }
.chipset { display: flex; flex-direction: column; gap: 12px; }
.chipset-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-70); }

/* ============ Forms ============ */
.field > label, .field-label {
  display: block; font-size: 12px; margin-bottom: 5px; color: var(--t-70);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
textarea.input { min-height: 90px; resize: vertical; }
select.input { appearance: auto; }
.input[aria-invalid="true"] { border-color: var(--color-err); }
.field-err { margin-top: 6px; font-size: 13px; color: var(--color-err); }
.field-warn { margin-top: 6px; font-size: 13px; color: var(--color-warn); }
.field-full { grid-column: 1 / -1; }
input[type="search"]::-webkit-search-cancel-button { filter: var(--search-cancel); }

.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--color-divider); max-width: 100%; }
.seg-opt {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer; user-select: none;
}
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt + .seg-opt { border-inline-start: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-fill); color: var(--color-on-fill); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.seg-xs .seg-opt { padding: 3px 9px; font-size: 12px; }
.seg-lg .seg-opt { padding: 9px 16px; font-size: 14px; font-weight: 600; min-height: 40px; }

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: start; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: 8px; border-bottom: 2px solid var(--color-divider);
}
.table td { padding: 8px; border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.tbl-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tbl-wrap:focus-visible { outline-offset: 4px; }

/* ============ Utility bar ============ */
.utility { position: relative; z-index: 55; border-bottom: 1px solid var(--color-divider); font-size: 13px; }
.utility-in {
  max-width: 1360px; margin: 0 auto; padding: 6px var(--gutter);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px 20px; flex-wrap: wrap;
}
.utility-nav { display: none; gap: 20px; }
.utility-nav a { color: inherit; text-decoration: none; }
.utility-nav a:hover { color: var(--color-accent-700); }
.currency { display: flex; align-items: center; gap: 8px; }
.currency-label { color: var(--t-72); }
.util-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 30px; height: 26px; padding: 0 6px; font-size: 12px; font-weight: 700;
  color: var(--color-text); background: none; border: 1px solid var(--color-divider); border-radius: 0;
  cursor: pointer; list-style: none;
}
.util-btn:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.util-btn::-webkit-details-marker { display: none; }
html:not(.js) .theme-btn { display: none; }
.theme-btn[aria-pressed="false"] svg:last-of-type,
.theme-btn[aria-pressed="true"] svg:first-of-type { display: none; }

/* Language menu: a <details> dropdown under its button. */
.lang { position: relative; }
.lang-btn svg:last-child { transition: transform .15s; }
.lang[open] .lang-btn svg:last-child { transform: rotate(180deg); }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 4px); min-width: 160px; padding: 4px;
  display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-divider);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}
.lang-menu a { display: flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--color-text); text-decoration: none; font-size: 14px; font-weight: 600; }
.lang-menu a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.lang-menu a[aria-current] { color: var(--color-accent-700); font-weight: 800; }
.lang-menu a[aria-current]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: 12px; }

/* ============ Sample content (?samples) ============ */
.show-samples .smp { outline: 2px dashed var(--color-warn); outline-offset: 2px; background: color-mix(in srgb, var(--color-warn) 18%, transparent); }

/* ============ Cookie consent ============ */
.consent-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  background: var(--color-surface); border-top: 2px solid var(--color-accent); box-shadow: var(--shadow-lg);
}
.consent-in {
  max-width: 1360px; margin: 0 auto; padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px;
}
.consent-text { flex: 1 1 420px; font-size: 14px; line-height: 1.5; }
.consent-h { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.consent-dlg {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  padding: 0; border: 0; border-top: 4px solid var(--color-accent); border-radius: 0;
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.consent-dlg::backdrop { background: var(--color-backdrop); }
.consent-form { padding: 28px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.consent-dlg-h { font-size: 25px; }
.consent-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--color-surface); cursor: pointer; }
.consent-opt input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--color-fill); }
.consent-opt-d { display: block; color: var(--t-72); margin-top: 2px; }
.consent-dlg-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.footer-btn { padding: 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.footer-btn:hover { color: var(--color-accent-700); }
html:not(.js) [data-consent-open] { display: none; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-bg); border-bottom: 2px solid var(--color-divider);
}
.header-in {
  max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter);
  height: var(--hdr-h); display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; margin-inline-end: auto; flex: none; }
.logo img { height: 26px; width: auto; }
.main-nav { display: none; align-items: stretch; gap: 20px; height: var(--hdr-h); font-size: 14px; font-weight: 600; }
.nav-item { display: flex; }
.nav-btn {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  padding: 0; font: inherit; color: inherit; white-space: nowrap;
}
.nav-btn[data-current] { border-bottom-color: var(--color-divider); }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { border-bottom-color: var(--color-accent); color: var(--color-accent-700); }
.nav-btn:focus-visible { outline-offset: -2px; }
.hdr-demo { display: none; padding: 10px 14px; justify-content: flex-start; white-space: nowrap; }
.hdr-find { gap: 10px; padding: 10px 16px; justify-content: flex-start; white-space: nowrap; }
.hamburger { width: 44px; height: 44px; flex: none; }
.hamburger:hover { color: var(--color-text); }

/* Mega and simple menus: absolutely placed under the sticky header. */
.menu-panel {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--color-bg); border-bottom: 2px solid var(--color-divider); box-shadow: var(--shadow-lg);
  max-height: calc(100vh - var(--hdr-h)); overflow-y: auto;
}
.nav-item.is-open .menu-panel { display: block; }
html:not(.js) .nav-item:hover .menu-panel,
html:not(.js) .nav-item:focus-within .menu-panel { display: block; }
.menu-in { max-width: 1360px; margin: 0 auto; padding: 32px var(--gutter); display: grid; gap: 40px; font-size: 15px; font-weight: 400; }
.menu-mega { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
.menu-simple { padding-block: 28px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.menu-kicker { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 14px; }
.menu-kicker-muted { color: var(--t-72); }
.menu-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.menu-items a { display: block; padding: 12px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.menu-items a:hover { color: var(--color-accent-700); }
.menu-item-t { display: block; font-weight: 800; font-size: 15px; }
.menu-item-d { display: block; font-size: 13px; color: var(--t-72); }
.menu-items a:hover .menu-item-d { color: var(--t-80); }
.menu-foot { margin-top: 16px; font-size: 13px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.menu-foot a { text-decoration: none; }
.menu-products a, .menu-all {
  display: block; padding: 10px 0; border-top: 1px solid var(--color-divider);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.menu-products a { color: var(--color-text); }
.menu-products a:hover { color: var(--color-accent-700); }
.menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 28px; }
.menu-list a { display: block; padding: 12px 0; border-top: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-weight: 700; font-size: 15px; }
.menu-list a:hover { color: var(--color-accent-700); }
.menu-feature { background: var(--color-surface); padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.menu-feature-title { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.15; }
.menu-feature p { font-size: 14px; }
.menu-feature-cta { margin-top: auto; justify-content: flex-start; }

/* Mobile menu */
.mobile-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  height: calc(100vh - var(--hdr-h)); height: calc(100dvh - var(--hdr-h)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--color-bg); border-top: 2px solid var(--color-divider);
  padding: 8px var(--gutter) 40px;
}
.m-search { display: flex; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.m-search .input { min-height: 44px; font-size: 16px; }
.m-search .btn { min-height: 44px; padding-inline: 16px; }
.m-group { border-bottom: 1px solid var(--color-divider); padding: 14px 0; }
.m-head { display: flex; align-items: center; min-height: 44px; color: var(--color-text); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 20px; }
.m-head:hover { color: var(--color-accent-700); }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips a { display: flex; align-items: center; min-height: 36px; padding: 0 10px; border: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-size: 13px; }
.m-chips a:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.m-btn { min-height: 48px; font-size: 16px; }
.m-btn.btn-secondary { margin-top: 24px; }
body.menu-open, body.modal-open { overflow: hidden; }

/* ============ Home ============ */
.home-hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--color-divider); }
.home-hero-in {
  padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(48px, 7vw, 96px);
  display: flex; flex-wrap: wrap; gap: 56px 64px; align-items: flex-end;
}
.home-hero-main { flex: 1 1 600px; min-width: 0; }
.home-hero-main .eyebrow { display: flex; margin-bottom: 28px; }
.home-h1 { margin-inline-start: -0.05em; font-size: clamp(52px, 8vw, 124px); line-height: .98; letter-spacing: -0.035em; text-wrap: initial; }
.home-h1 span { display: block; }
.home-lede { margin-top: 36px; max-width: 58ch; font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 86%, transparent); }
.home-hero-main .btn-row { margin-top: 32px; }
.home-hero-side { flex: 1 1 340px; max-width: 460px; display: flex; flex-direction: column; gap: 28px; }
.home-ring { width: 100%; max-width: 420px; }
.doors-list { border-top: 2px solid var(--color-text); }
.door-row {
  display: grid; grid-template-columns: 108px 1fr; gap: 16px; align-items: center;
  padding: 20px 0; border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 16px;
}
.door-row .badge { justify-self: start; font-size: 13px; }
.door-row-earn:hover { color: var(--color-accent-700); }
.door-row-save:hover { color: var(--color-save-text); }

.proofbar { border-bottom: 2px solid var(--color-divider); }
.proofbar-in { padding-block: 40px; }
.proofbar-label {
  font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.55;
  letter-spacing: .08em; text-transform: uppercase; color: var(--t-72); margin-bottom: 28px;
}
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 0; }
.stat { border-inline-start: 2px solid var(--color-divider); padding: 0 24px; }
.stat-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-accent); }
.stat-l { margin-top: 10px; font-size: 14px; }
.proofbar-note { margin-top: 28px; font-size: 12px; color: var(--t-70); }
.stats-page { max-width: 1100px; }

.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: 40px; }
.sec-head-end { align-items: flex-end; }
.h-display { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.02; letter-spacing: -0.03em; }
.sec-side { font-size: 18px; max-width: 34ch; }
.lede-18 { font-size: 18px; }
.more-link { display: inline-block; margin-top: 32px; font-weight: 800; font-size: 15px; text-decoration: none; }

.doors {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider);
}
.door { display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 3.5vw, 48px); background: var(--color-bg); }
.door .badge { align-self: flex-start; font-size: 13px; }
.door-earn { border-top: 8px solid var(--color-accent); }
.door-save { border-top: 8px solid var(--color-save); }
.door-h { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.02em; }
.door > p { font-size: 16px; max-width: 48ch; }
.levers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--color-divider); column-gap: 24px; }
.levers a {
  display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none;
}
.door-earn .levers a:hover { color: var(--color-accent-700); }
.door-save .levers a:hover { color: var(--color-save-text); }
.door-save .dot-sm { background: var(--color-save); }
.door-more { margin-top: auto; font-weight: 800; font-size: 15px; text-decoration: none; }
.door-save .door-more { color: var(--color-save-text); }
.door-save .door-more:hover { color: var(--color-save-hover); }
.teams { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.teams-label { font-size: 14px; margin-inline-end: 8px; color: var(--t-72); }
.teams .strong { padding: 7px 4px; font-size: 13px; }

.how { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px 28px; }
.how li { border-top: 2px solid var(--color-text); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.how-n { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.how-t { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; }
.how p { font-size: 15px; color: var(--t-80); }

.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.pcard {
  display: flex; flex-direction: column; gap: 14px; min-height: 220px; padding: 28px;
  border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
a.pcard:hover { background: var(--color-surface); color: var(--color-text); }
.pcard-name { font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.pcard-desc { font-size: 14px; color: var(--t-72); }
.pcard-line { margin-top: auto; font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--color-accent-700); }
.blk-filter { align-self: flex-start; }
.pgrid .is-hidden, .lgrid .is-hidden { display: none; }

.cosaas-band { background: var(--color-surface); border-top: 2px solid var(--color-divider); }
.cosaas-in { display: flex; flex-wrap: wrap; gap: 56px 80px; }
.cosaas-main { flex: 1 1 520px; min-width: 0; }
.cosaas-main .eyebrow { display: flex; margin-bottom: 24px; }
.cosaas-h { margin-bottom: 28px; font-size: clamp(38px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.cosaas-h span { display: block; }
.cosaas-main p { font-size: 17px; line-height: 1.65; max-width: 56ch; }
.cosaas-main .btn { margin-top: 32px; }
.cosaas-side { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; }
.cosaas-big { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.03em; }
.split-bar { display: flex; height: 72px; border: 2px solid var(--color-text); }
.split-bar > div:first-child { flex: 80; background: var(--color-text); }
.split-bar > div:last-child { flex: 20; background: var(--color-accent); }
.split-labels { display: flex; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.split-labels > div { padding-inline-start: 10px; }
.split-labels > div:first-child { flex: 80; border-inline-start: 2px solid var(--color-text); }
.split-labels > div:last-child { flex: 20; border-inline-start: 2px solid var(--color-accent); min-width: 7.5em; }

.reasons {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.reason { padding: 28px; border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 12px; }
.reason-n { font-size: 13px; font-weight: 800; color: var(--color-accent-700); }
.reason-t { font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; }
.reason p { font-size: 15px; color: var(--t-80); }

.industries { display: flex; flex-wrap: wrap; gap: 40px 64px; }
.industries-h { flex: 1 1 280px; font-size: clamp(34px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.03em; }
.ind-list {
  flex: 2 1 560px; min-width: 0; align-self: flex-start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 0 32px;
  border-top: 2px solid var(--color-text);
}
.ind-list a {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--color-divider); font-size: 15px; font-weight: 600; color: var(--color-text); text-decoration: none;
}
.ind-list a:hover { color: var(--color-accent-700); }
.ind-n { font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--color-text) 60%, transparent); }

.lgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.lcard {
  display: flex; flex-direction: column; gap: 14px; min-height: 200px; padding: 28px;
  border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
a.lcard:hover { background: var(--color-surface); color: var(--color-text); }
.lcard-tall { min-height: 230px; }
.lib-badges { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lib-type { color: color-mix(in srgb, var(--color-text) 65%, transparent); margin-inline-start: 2px; }
.lcard-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.lcard-desc { font-size: 14px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.lcard-cta { margin-top: auto; font-size: 14px; font-weight: 700; color: var(--color-accent-700); }
.lcard-cta-muted { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.lcard-soon .lcard-title { color: var(--t-80); }
.case-glance { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 16px; font-size: 13px; }
.case-glance dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.case-glance dd { margin: 2px 0 0; font-weight: 600; }

.final-cta { background: var(--color-fill); color: var(--color-on-fill); }
.final-in { padding-block: clamp(72px, 9vw, 128px); }
.final-h { margin-inline-start: -0.05em; font-size: clamp(44px, 6.4vw, 96px); line-height: .98; letter-spacing: -0.035em; max-width: 12ch; }
.final-p { margin-top: 32px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; max-width: 34ch; }
.final-btns { margin-top: 40px; }

/* Links and focus on the accent bands */
.final-cta a:not(.btn), .band a:not(.btn) { color: inherit; }
.final-cta :focus-visible, .band :focus-visible { outline-color: var(--color-on-fill); }

/* ============ Generic page: hero ============ */
.phero { border-bottom: 2px solid var(--color-divider); }
.phero-in { padding-top: 20px; padding-bottom: clamp(48px, 7vw, 96px); }
.crumbs { margin-bottom: clamp(36px, 5vw, 64px); font-size: 13px; color: var(--t-70); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs li { display: flex; gap: 8px; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--color-accent-700); }
.crumbs [aria-current] { color: var(--color-text); }
.phero-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; }
.phero-h1 { margin-inline-start: -0.04em; font-size: clamp(42px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.035em; max-width: 18ch; }
.phero-sub { margin-top: 32px; font-size: 18px; line-height: 1.6; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.phero-ctas { margin-top: 32px; }
.phero-micro { margin-top: 14px; font-size: 13px; color: var(--t-70); }
.phero-money { border-top: 2px solid var(--color-divider); background: var(--color-surface); }
.money-in { padding-block: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; }
.money-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.money-v { font-size: 16px; font-weight: 600; }

/* ============ Generic page: sections and blocks ============ */
.psec { border-bottom: 2px solid var(--color-divider); }
.psec-in { padding-block: clamp(48px, 6vw, 88px); display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
.psec-in > * { min-width: 0; }
.sec-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 1.4;
  letter-spacing: .1em; text-transform: uppercase; color: var(--t-70);
}
.sec-n { color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.blk-h2 { font-size: clamp(30px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.03em; max-width: 22ch; }
.blk-h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; max-width: 36ch; margin-top: 8px; }
.blk-para { font-size: 17px; line-height: 1.65; max-width: 68ch; color: color-mix(in srgb, var(--color-text) 88%, transparent); white-space: pre-line; }
.blk-pull {
  padding-top: 20px; border-top: 2px solid var(--color-accent); max-width: 28ch;
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.02em;
}
.blk-money {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline; padding: 16px 0;
  border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
}
.blk-micro { font-size: 13px; max-width: 70ch; color: var(--t-70); }
.blk-proof { padding: 24px 28px; background: var(--color-surface); border-top: 4px solid var(--color-accent); max-width: 900px; }
.proof-k { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); margin-bottom: 10px; }
.blk-proof p { font-size: 16px; line-height: 1.6; }
.legal-draft { border-top-color: var(--color-warn); font-size: 15px; }
.legal-draft .proof-k { color: var(--color-warn); }
.blk-quote { max-width: 900px; padding: 24px 28px; border-inline-start: 4px solid var(--color-accent); background: var(--color-surface); }
.blk-quote blockquote { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.3; letter-spacing: -0.015em; }
.blk-quote figcaption { margin-top: 14px; font-size: 14px; color: var(--t-72); }

.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.card {
  display: flex; flex-direction: column; gap: 12px; padding: 28px;
  border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
.card-linked:hover { background: var(--color-surface); color: var(--color-text); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.card-n { font-size: 12px; font-weight: 800; color: var(--color-accent-700); margin-inline-end: 4px; }
.card-t { font-size: 21px; line-height: 1.2; }
.card-body { font-size: 15px; line-height: 1.55; color: var(--t-80); }
.card-list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--t-80); }
.card-list li { position: relative; padding-inline-start: 16px; }
.card-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 6px; height: 6px; background: var(--color-accent); }
.card-link { margin-top: auto; padding-top: 4px; font-size: 14px; font-weight: 800; color: var(--color-accent-700); }

.blist {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 40px;
  border-top: 1px solid var(--color-divider); max-width: 1100px;
}
.blist li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 16px; line-height: 1.5; }
.blist li .badge { margin-inline-end: 6px; vertical-align: 2px; }
.sqb { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--color-accent); transform: translateY(-2px); }
.blist a { font-weight: 600; }

.plist { list-style: none; border-top: 2px solid var(--color-divider); max-width: 1100px; }
.plist-row {
  display: grid; grid-template-columns: minmax(160px, 260px) 100px minmax(0, 1fr) auto; gap: 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none;
}
a.plist-row:hover { color: var(--color-accent-700); }
.plist-name { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.2; }
.plist-b { display: flex; flex-wrap: wrap; gap: 4px; }
.plist-b .badge { padding: 2px 6px; font-size: 10px; }
.plist-d { font-size: 15px; color: var(--t-80); }
div.plist-row .plist-arrow { visibility: hidden; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 24px; }
.steps li { border-top: 2px solid var(--color-text); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.step-n { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.step-t { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.steps p { font-size: 15px; color: var(--t-80); }
.steps-ty { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 1100px; }
.steps-ty .step-t { font-size: 20px; }

.faq { border-top: 2px solid var(--color-divider); max-width: 1000px; }
.faq-item { border-bottom: 1px solid var(--color-divider); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 44px; padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--color-accent-700); }
.faq-item summary:focus-visible { outline-offset: -2px; }
.faq-sign { flex: none; width: 22px; text-align: center; font-size: 22px; line-height: 1; color: var(--color-accent); }
.faq-sign::before { content: "+"; }
.faq-item[open] .faq-sign::before { content: "−"; }
.faq-a p { margin: 0 0 22px; font-size: 16px; line-height: 1.6; max-width: 70ch; color: color-mix(in srgb, var(--color-text) 85%, transparent); white-space: pre-line; }

.kv { margin: 0; border-top: 2px solid var(--color-divider); max-width: 1100px; }
.kv-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.kv dt { font-weight: 800; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kv dd { margin: 0; font-size: 15px; line-height: 1.6; white-space: pre-line; color: color-mix(in srgb, var(--color-text) 85%, transparent); }

.ptable { min-width: 640px; font-size: 14px; }
.ptable th { padding: 12px 14px 12px 0; color: var(--t-72); }
.ptable td, .ptable tbody th { padding: 14px 14px 14px 0; vertical-align: top; line-height: 1.5; white-space: pre-line; }
.ptable tbody th { font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--color-text); font-weight: 800; border-bottom: 1px solid var(--color-divider); }
.ptable .badge { white-space: nowrap; }
.tr-total td, .tr-total th { font-weight: 800; border-top: 2px solid var(--color-divider); }
.compare thead th:last-child { color: var(--color-accent-700); }
.compare td:last-child, .compare th:last-child { background: var(--color-accent-100); padding-inline-start: 14px; }
.compare tbody tr:hover td:last-child { background: var(--color-accent-200); }

.routes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.route {
  display: flex; flex-direction: column; gap: 12px; min-height: 260px; padding: 28px;
  background: var(--color-bg); border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
.route-hl { background: var(--color-accent-100); }
.route:hover { background: var(--color-accent-100); color: var(--color-text); }
.route-meta { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.route-t { font-size: 28px; letter-spacing: -0.02em; line-height: 1.1; }
.route-b { font-size: 15px; line-height: 1.55; }
.route-link { margin-top: auto; font-size: 15px; font-weight: 800; color: var(--color-accent-700); }

.blk-box {
  display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between;
  padding: 28px; background: var(--color-surface); border-top: 4px solid var(--color-accent); max-width: 900px;
}
.box-text { flex: 1 1 320px; min-width: 0; }
.box-t { font-size: 22px; line-height: 1.2; }
.box-text p { margin-top: 6px; font-size: 15px; }
.box-text .calc-kicker { margin: 0 0 8px; }
.blk-box .btn-row .btn-blk { min-width: 0; }

.team { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 32px 24px; }
.member { display: flex; flex-direction: column; gap: 10px; }
.member-photo {
  aspect-ratio: 1 / 1; background: var(--color-surface); display: grid; place-items: center;
  font-size: 13px; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.member-name { border-top: 2px solid var(--color-text); padding-top: 12px; font-size: 20px; }
.member-title { font-size: 14px; font-weight: 700; color: var(--color-accent-700); }
.member-line { font-size: 14px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }

/* Earn & Save calculator */
.calc { display: flex; flex-wrap: wrap; gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.calc-in { flex: 1 1 420px; min-width: 0; background: var(--color-bg); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.calc-out { flex: 1 1 420px; min-width: 0; background: var(--color-surface); padding: 32px; display: flex; flex-direction: column; gap: 20px; container-type: inline-size; }
.calc-kicker { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.calc-in .input { min-height: 44px; font-size: 15px; }
.calc-in .field > label { font-size: 13px; color: var(--t-80); }
.calc-big { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.02em; }
.c-earn { color: var(--color-accent); }
.c-save { color: var(--color-save-text); }
.calc-cash { font-size: 16px; }
.calc-rows { border-top: 2px solid var(--color-divider); }
.calc-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.calc-row .badge { justify-self: start; }
.calc-row b { white-space: nowrap; }
/* A narrow result panel (phones, or two columns on a small laptop): the amount goes under its label */
@container (max-width: 459px) {
  .calc-row { grid-template-columns: 70px minmax(0, 1fr); row-gap: 4px; }
  .calc-row b { grid-column: 2; white-space: normal; }
}
.calc-btns { margin-top: auto; gap: 10px; }
.calc-btns .btn-blk { min-width: 0; }
/* CompliBear ROI calculator (22.3) */
.roi-pick { border-inline-start: 4px solid var(--color-accent); padding-inline-start: 16px; display: flex; flex-direction: column; gap: 6px; }
.roi-pick-v { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.15; }
.roi-pick-d { font-size: 14px; color: var(--t-80); }
.roi-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.roi-kpi { background: var(--color-bg); padding: 14px 16px; }
.roi-kpi-k { font-size: 13px; color: var(--t-80); }
.roi-kpi-v { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.2; margin-top: 4px; color: var(--color-save-text); }

/* Money Map matrix */
.mx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mx-tools-label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-70); }
.matrix { min-width: 720px; }
.matrix th, .matrix td { padding: 14px 14px 14px 0; vertical-align: top; }
.matrix thead th { vertical-align: bottom; }
.matrix thead .badge { margin-bottom: 6px; }
.mx-sub { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--t-72); font-weight: 400; }
.matrix tbody th { font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none; color: var(--color-text); border-bottom: 1px solid var(--color-divider); }
.matrix td a { font-weight: 600; text-decoration: none; }
.matrix td.mx-save a { color: var(--color-save-text); }
.matrix td.mx-save a:hover { color: var(--color-save-hover); }
.mx-none { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.matrix[data-door="earn"] .mx-save, .matrix[data-door="save"] .mx-earn { display: none; }
.matrix tr:target { background: var(--color-accent-100); }
.matrix tr:target th { color: var(--color-accent-700); }

/* Readiness assessment */
.assess { display: flex; flex-direction: column; gap: 28px; max-width: 1100px; }
.aq { margin: 0; padding: 0; border: 0; min-width: 0; }
.aq legend { display: flex; gap: 12px; align-items: baseline; padding: 0; margin-bottom: 14px; font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.3; }
.aq-n { font-size: 13px; color: var(--color-accent-700); flex: none; }
.aq-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.aq-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--color-bg); cursor: pointer; font-size: 14px; line-height: 1.45; }
.aq-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.aq-opt:hover { background: var(--color-surface); }
.aq-opt:has(input:checked) { background: var(--color-accent-100); box-shadow: inset 0 0 0 2px var(--color-accent); }
.aq-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.aq-lvl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.assess-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 2px solid var(--color-divider); }
.assess-foot .btn-blk { margin-top: 0; }
.assess-progress { font-size: 14px; color: var(--t-72); }
.assess-foot .field-err { margin: 0; flex-basis: 100%; }
.assess-result:empty, .assess-result:not(:has(.assess-band:not([hidden]))) { display: none; }
.assess-band { display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--color-surface); border-top: 4px solid var(--color-accent); max-width: 900px; }
.assess-h { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.assess-m { font-size: 17px; line-height: 1.6; max-width: 62ch; }
.assess-rh { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-72); margin-top: 8px; }
.assess-recs { list-style: none; counter-reset: rec; border-top: 2px solid var(--color-divider); }
.assess-recs li { counter-increment: rec; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.assess-recs li::before { content: counter(rec, decimal-leading-zero); font-weight: 800; color: var(--color-accent-700); }

/* Case lists on /proof */
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 40px; max-width: 1100px; }
.case-group-h { display: flex; align-items: center; gap: 10px; font-size: 18px; padding-bottom: 12px; border-bottom: 2px solid var(--color-text); }
.case-list { list-style: none; }
.case-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-weight: 600; }
.case-list a:hover { color: var(--color-accent-700); }

/* Case-study detail */
.glance { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; }
.glance-big { display: flex; flex-direction: column; gap: 6px; }
.glance-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.glance-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(32px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }

/* Closing band */
.band { background: var(--color-fill); color: var(--color-on-fill); }
.band-in { padding-block: clamp(64px, 8vw, 112px); }
.band-h { margin-inline-start: -0.04em; font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; }
.band-sub { margin-top: 28px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 28px); line-height: 1.25; max-width: 38ch; }
.band-btns { margin-top: 36px; }
.band-micro { margin-top: 16px; font-size: 13px; max-width: 70ch; }
.band-rel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 48px; padding-top: 20px; border-top: 2px solid var(--color-on-fill); }
.band-rel-k { font-size: 13px; font-weight: 800; letter-spacing: .08em; margin-inline-end: 8px; }
.band-rel a { padding: 7px 12px; border: 1px solid var(--color-on-fill); font-size: 14px; font-weight: 700; text-decoration: none; }
.band-rel a:hover { background: rgba(0, 0, 0, .1); color: inherit; }
.band [data-usd] { white-space: nowrap; }

/* ============ Library ============ */
.lhero { border-bottom: 2px solid var(--color-divider); }
.lhero-in { padding-top: 20px; padding-bottom: 40px; }
.lhero-h1 { margin-inline-start: -0.04em; font-size: clamp(48px, 7vw, 104px); line-height: .98; letter-spacing: -0.035em; }
.lhero-sub { margin-top: 28px; font-size: 18px; max-width: 56ch; }
.lib-bar { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.lib-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--color-divider); font-size: 14px; font-weight: 700; color: var(--color-text); text-decoration: none;
}
.lib-tab:hover { border-color: var(--color-accent); color: var(--color-text); }
.lib-tab[aria-current="true"] { background: var(--color-fill); border-color: var(--color-fill); color: var(--color-on-fill); }
.lib-count { opacity: .7; font-weight: 600; }
.lib-search { flex: 1 1 220px; max-width: 280px; margin-inline-start: auto; }
.lib-search .input { min-height: 40px; }
.lib-body { padding-block: 40px 96px; }
.lib-empty { padding: 24px 0; font-size: 16px; }
.memo { border-top: 2px solid var(--color-divider); background: var(--color-surface); }
.memo-in { padding-block: 56px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 64px; }
.memo-text h2 { margin-bottom: 10px; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.025em; }
.memo-text p { font-size: 16px; max-width: 48ch; }
.memo-in .btn { padding: 14px 18px; font-size: 15px; }

/* Filter and sort beside the use cases (list.tpl; site.js builds the panel). */
.lib-cols.is-on { display: grid; gap: 24px; }
.lib-main { min-width: 0; }
.lib-side { align-self: start; border: 2px solid var(--color-divider); background: var(--color-surface); }
.lib-side-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 18px;
  background: none; border: 0; color: var(--color-text); font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .02em; cursor: pointer;
}
.lib-side-toggle::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 600; color: var(--color-accent-700); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.lib-side.is-open .lib-side-toggle::after { transform: rotate(45deg); }
.lib-side-n { margin-inline-start: auto; min-width: 22px; padding: 2px 6px; background: var(--color-fill); color: var(--color-on-fill); font-size: 12px; text-align: center; }
.lib-side-body { display: flex; flex-direction: column; gap: 22px; padding: 4px 18px 22px; }
.lib-side:not(.is-open) .lib-side-body { display: none; }
.lib-side-head { display: none; }
.lib-side-k { margin: 0; font-family: var(--font-heading); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lib-side-status { margin: 4px 0 0; font-size: 13px; color: var(--t-70); font-variant-numeric: tabular-nums; }
.lib-side-f { display: flex; flex-direction: column; gap: 8px; }
.lib-side-l, .lib-facet legend { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--t-70); }
.lib-side .input { min-height: 42px; width: 100%; }
.lib-facet { margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-facet legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; }
.lib-opt { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-inline: -8px; font-size: 14px; line-height: 1.3; cursor: pointer; transition: background-color .2s, opacity .3s; }
.lib-opt:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.lib-opt input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 2px solid var(--color-divider); background: var(--color-bg); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s; }
.lib-opt input::after { content: ""; width: 9px; height: 5px; border: solid var(--color-on-fill); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.lib-opt input:checked { background: var(--color-fill); border-color: var(--color-fill); }
.lib-opt input:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.lib-opt input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lib-opt:has(input:checked) .lib-opt-t { font-weight: 700; }
.lib-opt-t { flex: 1; min-width: 0; }
.lib-opt-n { min-width: 26px; padding: 1px 6px; border: 1px solid var(--color-divider); font-size: 12px; font-weight: 700; text-align: center; color: var(--t-70); font-variant-numeric: tabular-nums; }
.lib-opt.is-zero { opacity: .42; }
.lib-side-clear { align-self: flex-start; }
.lib-side:not(.is-picked) .lib-side-clear { visibility: hidden; }
.lib-none { padding: 28px 0; font-size: 16px; }
.link-btn { padding: 0; background: none; border: 0; color: var(--color-accent-700); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bcard[hidden] { display: none; }
@media (min-width: 1000px) {
  .lib-cols.is-on { grid-template-columns: 272px minmax(0, 1fr); gap: 36px; align-items: start; }
  .lib-side { position: sticky; top: calc(var(--hdr-h, 72px) + 20px); max-height: calc(100vh - var(--hdr-h, 72px) - 40px); overflow: auto; }
  .lib-side-toggle { display: none; }
  .lib-side:not(.is-open) .lib-side-body { display: flex; }
  .lib-side-body { padding-top: 22px; }
  .lib-side-head { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .lib-side.is-open .lib-side-body { animation: vt-in .4s cubic-bezier(.2, .7, .2, 1) both; }
  .lib-side-n { animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
}

/* ============ Blog and use cases ============ */
/* Pages made by api/blog.php from src/cms/tpl. A post without a cover image gets
   art drawn here: the topic sets the colour, the slug sets --cx, --cy, --ca and
   one of four patterns (cov-p0 to cov-p3), so each post keeps its own picture. */
.bgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.bcard {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider);
  color: var(--color-text); text-decoration: none;
}
.bcard:hover { background: var(--color-surface); color: var(--color-text); }
.bcard-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 24px 24px 22px; }
.bcard-meta { min-height: 22px; }
.bcard-ind { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-70); }
.bcard-title { font-size: 21px; line-height: 1.2; letter-spacing: -0.012em; }
.bcard:hover .bcard-title { color: var(--color-accent-700); }
.bcard-desc { font-size: 14px; color: var(--t-72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--t-70); }
.bcard-go { margin-inline-start: auto; font-size: 18px; font-weight: 800; color: var(--color-accent-700); transition: transform .25s ease; }
.bcard:hover .bcard-go { transform: translateX(4px); }
[dir="rtl"] .bcard-go { transform: scaleX(-1); }
[dir="rtl"] .bcard:hover .bcard-go { transform: scaleX(-1) translateX(4px); }
@media (min-width: 1000px) {
  .bcard-lead { grid-column: span 2; flex-direction: row; }
  .bcard-lead .cov { flex: 1 1 52%; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-inline-end: 2px solid var(--color-divider); }
  .bcard-lead .bcard-body { flex: 1 1 48%; padding: 32px; }
  .bcard-lead .bcard-title { font-size: clamp(26px, 2.4vw, 34px); }
  .bcard-lead .bcard-desc { font-size: 15px; -webkit-line-clamp: 5; }
}

.cov {
  --k: var(--color-accent);
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--k) 14%, var(--color-bg));
  border-bottom: 2px solid var(--color-divider);
}
.cov-save { --k: var(--color-save); }
.cov-cosaas { --k: var(--color-text); }
.cov-ai { --k: color-mix(in srgb, var(--color-accent) 50%, var(--color-save)); }
.cov::before, .cov::after { content: ""; position: absolute; inset: -12%; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
/* p0: rings round a point */
.cov-p0::before { background: repeating-radial-gradient(circle at var(--cx) var(--cy), transparent 0 18px, color-mix(in srgb, var(--k) 55%, transparent) 18px 20px); }
.cov-p0::after { background: radial-gradient(circle at var(--cx) var(--cy), var(--k) 0 26px, transparent 27px); }
/* p1: a ruled field at an angle, with one bold bar */
.cov-p1::before { background: repeating-linear-gradient(var(--ca), transparent 0 14px, color-mix(in srgb, var(--k) 42%, transparent) 14px 16px); }
.cov-p1::after { background: linear-gradient(var(--ca), transparent 0 calc(var(--cy) - 6%), var(--k) calc(var(--cy) - 6%) calc(var(--cy) + 6%), transparent calc(var(--cy) + 6%)); opacity: .9; }
/* p2: a sweep from a point */
.cov-p2::before { background: repeating-conic-gradient(from var(--ca) at var(--cx) var(--cy), color-mix(in srgb, var(--k) 60%, transparent) 0 6deg, transparent 6deg 24deg); }
.cov-p2::after { background: radial-gradient(circle at var(--cx) var(--cy), transparent 0 30%, color-mix(in srgb, var(--color-bg) 70%, transparent) 70%); }
/* p3: a dot matrix with a block */
.cov-p3::before { background: radial-gradient(color-mix(in srgb, var(--k) 70%, transparent) 2px, transparent 2.5px) 0 0 / 18px 18px; }
.cov-p3::after {
  inset: auto; left: calc(var(--cx) * .7); top: calc(var(--cy) * .6); width: 34%; height: 40%;
  background: var(--k); box-shadow: 14px 14px 0 color-mix(in srgb, var(--k) 35%, transparent);
}
.bcard:hover .cov::before { transform: scale(1.08) rotate(1deg); }
.bcard:hover .cov-p3::after { transform: translate(-6px, -6px); }
.cov img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.bcard:hover .cov img { transform: scale(1.04); }
.cov-type {
  position: absolute; z-index: 2; top: 12px; inset-inline-start: 12px; padding: 4px 8px;
  background: var(--color-bg); color: var(--color-text);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.cov-hero { aspect-ratio: 21 / 8; border: 2px solid var(--color-divider); }

.bhero .lhero-in { padding-bottom: 32px; }
.blog-status { margin-bottom: 20px; font-size: 15px; color: var(--t-80); }
.blog-status a { margin-inline-start: 8px; font-weight: 700; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 40px; }
.pager-n { font-size: 14px; color: var(--t-70); }

.post-hero-in { padding-top: 20px; padding-bottom: 36px; }
.post-hero .crumbs { margin-bottom: clamp(28px, 4vw, 48px); }
.post-hero .phero-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 24px; }
.post-h1 { margin-inline-start: -0.03em; max-width: 22ch; font-size: clamp(38px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.033em; }
.post-lede { margin-top: 24px; max-width: 60ch; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--t-80); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 28px; font-size: 13px; color: var(--t-70); }
.post-meta > * + *::before { content: "/"; margin-inline: 12px; color: var(--color-accent); }
.post-draft { border-color: var(--color-warn); color: var(--color-warn); }
.post-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px;
  padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 96px);
}
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: 230px minmax(0, 760px); gap: 72px; }
  .post-aside { position: sticky; top: calc(var(--hdr-h) + 28px); align-self: start; max-height: calc(100vh - var(--hdr-h) - 56px); overflow-y: auto; }
}
.post-aside { display: flex; flex-direction: column; gap: 28px; }
.toc-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-70); padding-bottom: 10px; border-bottom: 2px solid var(--color-text); }
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: grid; grid-template-columns: 28px 1fr; padding: 9px 0 9px 10px; margin-inline-start: -10px;
  border-inline-start: 2px solid transparent; border-bottom: 1px solid var(--color-divider);
  font-size: 14px; line-height: 1.35; color: var(--t-80); text-decoration: none; transition: color .2s, border-color .2s, background .2s;
}
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: 11px; font-weight: 800; padding-top: 2px; color: var(--t-70); }
.toc a:hover { color: var(--color-text); }
.toc a[aria-current="true"] { color: var(--color-text); border-inline-start-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.toc a[aria-current="true"]::before { color: var(--color-accent-700); }
.share { display: flex; flex-wrap: wrap; gap: 6px; }
.share .toc-h { flex-basis: 100%; margin-bottom: 6px; }
.share a, .share-copy {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px;
  border: 1px solid var(--color-divider); background: none;
  font-size: 13px; font-weight: 700; color: var(--color-text); text-decoration: none;
}
.share a:hover, .share-copy:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
@media (max-width: 999px) {
  .toc { padding: 18px 20px; background: var(--color-surface); }
  .post-aside .share { order: 2; }
}

.post-body { min-width: 0; }
.post-note { margin-bottom: 32px; padding: 14px 18px; background: var(--color-surface); border-inline-start: 4px solid var(--color-accent); font-size: 14px; color: var(--t-80); }
.prose { font-size: 17px; line-height: 1.72; }
.prose > * + * { margin-top: 20px; }
.prose > :first-child { margin-top: 0; }
.prose :where(h2) { margin-top: 56px; padding-top: 18px; border-top: 2px solid var(--color-divider); font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; }
.prose :where(h3) { margin-top: 40px; font-size: 22px; }
.prose :where(h4, h5, h6) { margin-top: 32px; font-size: 18px; }
.prose :where(h2, h3, h4) + * { margin-top: 16px; }
.prose :where(h2, h3, h4) { scroll-margin-top: calc(var(--hdr-h) + 24px); }
.prose :where(ul, ol) { padding-inline-start: 1.4em; }
.prose li + li { margin-top: 8px; }
.prose li > :where(ul, ol) { margin-top: 8px; }
.prose li::marker { color: var(--color-accent-700); font-weight: 800; }
.prose a { font-weight: 600; }
.prose blockquote {
  margin-inline: 0; padding: 6px 0 6px 24px; border-inline-start: 4px solid var(--color-accent);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; letter-spacing: -0.01em;
}
.prose blockquote > * + * { margin-top: 12px; }
.prose code { padding: 1px 6px; background: var(--color-surface); border: 1px solid var(--color-divider); font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .86em; }
.prose pre { padding: 18px 20px; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-divider); font-size: 14px; line-height: 1.55; }
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; }
.prose hr { height: 0; margin-block: 44px; border: 0; border-top: 2px solid var(--color-divider); }
.prose img { border: 1px solid var(--color-divider); }
.prose figure { margin-block: 32px; }
.prose figcaption { margin-top: 10px; font-size: 13px; color: var(--t-70); }
.prose .tbl { overflow-x: auto; border-top: 2px solid var(--color-text); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th { padding: 12px 14px 10px 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-align: start; color: var(--t-70); border-bottom: 1px solid var(--color-divider); }
.prose td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.prose tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.post-tags { margin-top: 48px; padding-top: 24px; border-top: 2px solid var(--color-divider); }
.post-sol {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; align-items: center;
  margin-top: 32px; padding: 22px 24px; border: 2px solid var(--color-accent);
  color: var(--color-text); text-decoration: none; transition: background .25s, color .25s;
}
.post-sol-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.post-sol-t { grid-column: 1; font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; }
.post-sol-go { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; font-weight: 800; transition: transform .25s; }
.post-sol:hover { background: var(--color-fill); color: var(--color-on-fill); }
.post-sol:hover .post-sol-k { color: inherit; }
.post-sol:hover .post-sol-go { transform: translateX(6px); }
.post-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0; margin-bottom: clamp(56px, 7vw, 96px); border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.post-nav-a { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; color: var(--color-text); text-decoration: none; }
.post-nav-next { text-align: end; }
@media (min-width: 640px) { .post-nav-next { border-inline-start: 2px solid var(--color-divider); padding-inline-start: 24px; } .post-nav-a:not(.post-nav-next) { padding-inline-end: 24px; } }
.post-nav-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.post-nav-t { font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.25; }
.post-nav-a:hover .post-nav-t { color: var(--color-accent-700); }

/* ============ Search, sitemap, 404, thank-you ============ */
.site-search { display: flex; gap: 8px; max-width: 640px; }
.site-search .input { min-height: 44px; font-size: 16px; }
.site-search .btn { min-height: 44px; padding-inline: 20px; flex: none; }
.search-main { margin-top: 32px; }
.search-status { font-size: 15px; color: var(--t-80); margin-bottom: 24px; }
.search-results { display: flex; flex-direction: column; gap: 40px; max-width: 1000px; }
.search-group-h { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); padding-bottom: 10px; border-bottom: 2px solid var(--color-text); }
.search-list { list-style: none; }
.search-hit { display: block; padding: 16px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.search-hit:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.search-hit-t { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--color-accent-700); }
.search-hit:hover .search-hit-t { color: var(--color-accent-800); }
.search-hit-d { display: block; margin-top: 4px; font-size: 15px; color: var(--t-80); }
.search-hit-u { display: block; margin-top: 4px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.search-none { margin-top: 8px; }

.smap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 40px 32px; }
.smap-h { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); padding-bottom: 10px; border-bottom: 2px solid var(--color-text); }
.smap-list { list-style: none; }
.smap-list a { display: block; padding: 9px 0; border-bottom: 1px solid var(--color-divider); color: var(--color-text); text-decoration: none; font-size: 15px; }
.smap-list a:hover { color: var(--color-accent-700); }
.smap-list a[aria-current] { color: var(--t-72); }
.smap-home { max-width: 280px; }
.smap-home a { font-weight: 800; }

.nf-in { padding-block: clamp(72px, 10vw, 140px); }
.nf-k { font-size: 13px; letter-spacing: .1em; color: var(--color-accent-700); margin-bottom: 24px; font-weight: 800; }
.nf-h1 { margin-inline-start: -0.04em; font-size: clamp(42px, 6.4vw, 96px); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; }
.nf-sub { margin-top: 28px; font-size: 18px; }
.nf-btns { margin-top: 32px; gap: 8px; }
.nf-btns .btn { padding: 12px 16px; font-size: 15px; }
.nf-search { margin-top: 40px; }

.ty-h1 { max-width: 20ch; }
.ty-useful { margin-top: 12px; }
.ty-slot { margin-top: 24px; max-width: 60ch; padding: 14px 18px; background: var(--color-surface); border-inline-start: 4px solid var(--color-accent); font-size: 16px; font-weight: 600; }

/* ============ Footer ============ */
.site-footer { border-top: 2px solid var(--color-divider); }
.footer-in { max-width: 1360px; margin: 0 auto; padding: 64px var(--gutter) 32px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 32px 64px; padding-bottom: 48px; border-bottom: 2px solid var(--color-divider); }
.footer-memo { flex: 1 1 320px; min-width: 0; }
.footer-logo { height: 30px; width: auto; margin-bottom: 28px; }
.footer-memo-title { margin-bottom: 10px; font-size: 26px; }
.footer-memo p { font-size: 15px; max-width: 44ch; }
.footer-form-wrap { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.memo-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.memo-field { flex: 1 1 220px; min-width: 0; }
.memo-field .input { min-height: 44px; font-size: 15px; }
.memo-btn { min-height: 44px; padding: 0 20px; }
.memo-note { flex-basis: 100%; font-size: 12px; color: var(--t-70); }
.memo-note.is-err { color: var(--color-err); }
.memo-done { padding: 16px; background: var(--color-surface); border-top: 4px solid var(--color-accent); font-size: 15px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; padding: 48px 0; }
.footer-col-title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid var(--color-text); }
.footer-cols a { display: block; padding: 5px 0; font-size: 14px; color: var(--color-text); text-decoration: none; }
.footer-cols a:hover { color: var(--color-accent-700); }
.footer-offices { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding: 24px 0; border-top: 1px solid var(--color-divider); font-size: 13px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-social a, .footer-social span { color: var(--color-text); text-decoration: none; }
.footer-social a:hover { color: var(--color-accent-700); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: 32px; border-top: 2px solid var(--color-divider); }
.footer-line { font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -0.025em; line-height: 1.05; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--t-72); }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--color-accent-700); }

/* ============ Dialog ============ */
.dialog-backdrop, .modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; align-items: flex-start;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(12px, 4vh, 48px) 16px; background: var(--color-backdrop);
}
.modal { width: min(760px, 100%); margin: auto 0; background: var(--color-bg); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px; border-bottom: 2px solid var(--color-divider); }
.modal-kicker { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); margin-bottom: 6px; }
.modal-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; }
.modal-close { width: 44px; height: 44px; flex: none; }
.modal-steps { display: flex; border-bottom: 1px solid var(--color-divider); font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.modal-step { flex: 1; padding: 12px 28px; border-bottom: 3px solid transparent; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.modal-step.on { border-bottom-color: var(--color-accent); color: var(--color-text); }
.modal-form { padding: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 20px; }
.modal-form .input { min-height: 44px; font-size: 15px; }
.modal-form .seg-lg .seg-opt { padding: 10px 16px; min-height: 44px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--color-fill); width: 16px; height: 16px; flex: none; }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--color-divider); }
.modal-micro { font-size: 12px; color: var(--t-70); flex: 1 1 240px; }
.modal-submit { padding: 14px 18px; font-size: 15px; min-width: 200px; justify-content: flex-start; }
.modal-slots { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.slots-h { font-size: 13px; font-weight: 800; margin-bottom: 10px; }
.slots-tz { font-weight: 400; color: var(--t-70); }
.slots-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.lens { display: flex; flex-wrap: wrap; gap: 6px; }
.lens .slot { min-width: 64px; align-items: center; }
.slots-zone { flex: 0 1 300px; min-width: 0; }
.slots-zone .slots-h { display: block; }
.slots-zone .input { width: 100%; min-height: 44px; font-size: 14px; }
.days, .times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.slot {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 10px 8px; min-height: 44px; font-size: 14px; font-weight: 700; text-align: start; line-height: 1.2;
  border: 1px solid var(--color-divider); background: var(--color-surface); color: var(--color-text);
}
.slot:hover { border-color: var(--color-accent); }
.slot[aria-pressed="true"] { border-color: var(--color-fill); background: var(--color-fill); color: var(--color-on-fill); }
.slot-dow { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.slot-dom { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.1; }
.slot-mon { font-size: 11px; font-weight: 400; }
.slots-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.slots-back { color: var(--color-accent-700); }
.slots-confirm { padding: 14px 18px; font-size: 15px; min-width: 220px; justify-content: flex-start; }
.slots-msg { grid-column: 1 / -1; padding: 14px 16px; background: var(--color-surface); font-size: 14px; color: var(--t-80); }
.slots-note { padding: 12px 16px; border-inline-start: 4px solid var(--color-warn); background: var(--color-surface); font-size: 14px; font-weight: 600; }
.slots-alt { align-self: flex-start; padding: 6px 0; background: none; border: 0; font-size: 14px; font-weight: 700; color: var(--color-accent-700); text-decoration: underline; text-underline-offset: 3px; }
.slots-alt:hover { color: var(--color-accent-800); }
.modal-done { padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.modal-done-h { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.modal-slot { padding: 14px 16px; background: var(--color-surface); border-inline-start: 4px solid var(--color-accent); font-size: 15px; font-weight: 600; }
.modal-done-steps { list-style: none; counter-reset: ds; border-top: 2px solid var(--color-divider); }
.modal-done-steps li { counter-increment: ds; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; }
.modal-done-steps li::before { content: counter(ds, decimal-leading-zero); font-weight: 800; color: var(--color-accent-700); }
.modal-done-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.modal-done-btns .btn { padding: 12px 18px; }
.modal .field-err[data-m="sendErr"] { margin: 0; }

/* ============ Motion ============ */
/* Everything here is extra. With reduced motion (the block near the end) or
   without JavaScript, pages look the same, only still. site.js adds .rv to
   blocks as they enter, the hero canvas, the header and progress classes, and
   the pointer position (--mx, --my) on cards. */

/* Hero: the network drawn by site.js, faded under the text. */
.hero-fx {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, #000 58%); mask-image: linear-gradient(100deg, transparent 8%, #000 58%);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-fx.on { opacity: 1; }
[dir="rtl"] .hero-fx { -webkit-mask-image: linear-gradient(-100deg, transparent 8%, #000 58%); mask-image: linear-gradient(-100deg, transparent 8%, #000 58%); }
@media (max-width: 899px) { .hero-fx { -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 90%); mask-image: linear-gradient(180deg, transparent 20%, #000 90%); } }
.home-hero-in { position: relative; z-index: 1; }

/* The lever strip under the hero. */
.ticker { overflow: hidden; border-bottom: 2px solid var(--color-divider); background: var(--color-surface); }
.ticker-track { display: flex; width: max-content; }
.ticker-set { display: flex; align-items: center; flex: none; }
.ticker-set > span {
  display: inline-flex; align-items: center; gap: 18px; padding: 14px 0; padding-inline-end: 18px;
  font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: .02em; white-space: nowrap;
}
.ticker-set > span::after { content: ""; width: 6px; height: 6px; background: var(--color-divider); }
.ticker-k { color: var(--color-accent-700); letter-spacing: .08em !important; }
.ticker-save { color: var(--color-save-text); }
.ticker-set > .ticker-k::after { background: currentColor; }

/* Cards: a light that follows the pointer, and an edge that catches it. */
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig) { position: relative; isolation: isolate; }
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig)::before,
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig)::after {
  content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .35s ease;
}
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig)::before {
  inset: 0; z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 55%);
}
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig)::after {
  inset: -2px; z-index: 3; padding: 2px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--color-accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig):hover::before,
:is(.pcard, .lcard, .bcard, .door, .reason, .card, .route, .group, .fig):hover::after { opacity: 1; }
.door-save::before { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--color-save) 16%, transparent), transparent 55%); }
.door-save::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--color-save), transparent 70%); }

/* Primary buttons: a sheen on hover. */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s ease; }

/* Header: glass once the page scrolls; a progress line along its foot. */
.site-header { transition: background-color .3s ease, box-shadow .3s ease; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-stuck {
    background: color-mix(in srgb, var(--color-bg) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  }
  body.menu-open .site-header.is-stuck { background: var(--color-bg); }
}
.site-header.is-stuck { box-shadow: 0 10px 30px color-mix(in srgb, #000 22%, transparent); }
.scroll-prog {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-800));
  transform: scaleX(var(--sp, 0)); transform-origin: 0 50%;
}
[dir="rtl"] .scroll-prog { transform-origin: 100% 50%; }

/* ============ ELI5: the simple version (/eli5) ============ */
/* One page with a small header, opened from the button under the home page's last band. */
.mini-header {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 90%, transparent); backdrop-filter: blur(10px);
}
.mini-in { max-width: 1360px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 12px; }
.mini-in .logo { margin-inline-end: 0; }
.mini-in .logo img { height: 24px; }
.mini-tag {
  margin-inline-end: auto; padding: 3px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-700); border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}
/* Phones: no room for the tag next to the theme and language buttons. */
@media (max-width: 519px) { .mini-tag { display: none; } .mini-in .logo { margin-inline-end: auto; } }
.mini-footer { border-top: 2px solid var(--color-divider); }
.mini-foot { max-width: 1360px; margin: 0 auto; padding: 24px var(--gutter) 32px; }

/* The one playful page: rounded letters (Fredoka, loaded on this page only), candy
   colours with dark ink, round corners and a sky that follows the theme button:
   sun and clouds by day, moon and stars at night. */
body.is-eli5 {
  --k-ink: #221c47;
  --k-sun: #ffd447; --k-sun-d: #dba416;
  --k-pink: #ffa6c9; --k-pink-d: #df6f9b;
  --k-sky: #8fd4ff; --k-sky-d: #4ea4da;
  --k-mint: #8eefc4; --k-mint-d: #3cbf87;
  --k-lilac: #cbb2ff; --k-lilac-d: #9170df;
  --k-peach: #ffbe94; --k-peach-d: #e3874f;
  --k-spring: cubic-bezier(.3, 1.6, .5, 1);
  --k-kid: #262063; --k-sky-top: #0b0928;
  --color-bg: #15123a; --color-surface: #1f1b4f; --color-divider: rgba(255, 255, 255, .16);
  --font-heading: "Fredoka", "Archivo", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-body: var(--font-heading);
}
:root[data-theme="light"] body.is-eli5 {
  --k-kid: #fff0c2; --k-sky-top: #bfe6ff;
  --color-bg: #fffaf1; --color-surface: #ffffff; --color-divider: rgba(34, 28, 71, .16);
}
.is-eli5 .mini-tag { border: 0; border-radius: 999px; padding: 4px 12px; background: var(--k-sun); color: var(--k-ink); font-weight: 600; letter-spacing: .02em; }

/* Buttons: round and chunky, they press down when clicked. */
.is-eli5 main .btn { border-radius: 999px; font-weight: 600; transition: transform .25s var(--k-spring), box-shadow .25s, background-color .2s; }
.is-eli5 main .btn-lg { padding: 14px 22px; font-size: 16px; }
.is-eli5 main .btn-primary { background: var(--k-sun); color: var(--k-ink); box-shadow: 0 5px 0 var(--k-sun-d); }
.is-eli5 main .btn-primary:hover { background: #ffdd6e; color: var(--k-ink); transform: translateY(-2px); box-shadow: 0 7px 0 var(--k-sun-d); }
.is-eli5 main .btn-secondary { border: 2px solid var(--color-divider); background: color-mix(in srgb, var(--color-surface) 70%, transparent); box-shadow: 0 5px 0 color-mix(in srgb, var(--color-text) 16%, transparent); }
.is-eli5 main .btn-secondary:hover { transform: translateY(-2px); }
.is-eli5 main .btn-ink { background: var(--k-ink); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); }
.is-eli5 main .btn-ink:hover { background: #342b6b; color: #fff; transform: translateY(-2px); }
.is-eli5 main .btn-outline-ink { color: var(--k-ink); border: 2px solid var(--k-ink); background: rgba(255, 255, 255, .4); box-shadow: 0 5px 0 rgba(34, 28, 71, .25); }
.is-eli5 main .btn-outline-ink:hover { color: var(--k-ink); background: rgba(255, 255, 255, .65); transform: translateY(-2px); }
.is-eli5 main .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

/* Hero and its sky. */
.eli5-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--k-sky-top), var(--color-bg) 88%); }
.eli5-hero-in { position: relative; padding-block: clamp(48px, 8vw, 104px) clamp(96px, 11vw, 150px); }
.eli5-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.eli5-sky > span { position: absolute; display: block; }
.eli5-sky .ico { width: 100%; height: auto; }
.eli5-sun, .eli5-moon { top: 8%; inset-inline-end: 7%; width: 150px; }
.eli5-moon { width: 128px; filter: drop-shadow(0 0 28px rgba(255, 236, 170, .45)); }
.eli5-stars { inset: 0; }
.eli5-stars i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: #fff6d0; box-shadow: 0 0 8px 2px rgba(255, 238, 170, .5); }
.eli5-cloud-a { top: 30%; inset-inline-end: 22%; width: 120px; opacity: .95; }
.eli5-cloud-b { top: 62%; inset-inline-end: 3%; width: 86px; opacity: .85; }
.eli5-rainbow { bottom: 20%; inset-inline-end: 13%; width: 120px; }
.eli5-twinkle-a { top: 12%; inset-inline-start: 52%; width: 44px; }
.eli5-twinkle-b { top: 74%; inset-inline-start: 60%; width: 32px; }
@media (max-width: 899px) {
  .eli5-sky :is(.eli5-cloud, .eli5-rainbow, .eli5-twinkle-b) { display: none; }
  .eli5-sky :is(.eli5-sun, .eli5-moon) { top: 14px; inset-inline-end: 12px; width: 72px; opacity: .9; }
  .eli5-sky .eli5-twinkle-a { top: auto; bottom: 18%; inset-inline-start: auto; inset-inline-end: 10%; width: 30px; }
}
.eli5-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 10px; border-radius: 999px; rotate: -2deg;
  background: var(--k-sun); color: var(--k-ink); font-family: var(--font-heading); font-weight: 600; font-size: 15px; box-shadow: 0 4px 0 var(--k-sun-d);
}
.eli5-h1 { margin-top: 26px; font-size: clamp(40px, 6.4vw, 88px); font-weight: 700; line-height: 1.04; letter-spacing: -0.01em; max-width: 15ch; }
.eli5-mark { position: relative; z-index: 0; display: inline-block; white-space: nowrap; color: var(--k-sun); }
:root[data-theme="light"] .eli5-mark { color: #c42f63; }
.eli5-mark::after {
  content: ""; position: absolute; z-index: -1; inset-inline: -.08em; bottom: .04em; height: .3em; border-radius: 999px;
  background: color-mix(in srgb, var(--k-pink) 55%, transparent); transform: rotate(-1.5deg);
}
.eli5-l { display: inline-block; }
.eli5-lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; max-width: 50ch; color: var(--t-80); }
.eli5-hero .btn-row { margin-top: 32px; }
.eli5-toc { display: flex; flex-wrap: wrap; gap: 12px 10px; margin-top: 40px; }
.eli5-toc a {
  padding: 8px 16px; border-radius: 999px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--k-ink); text-decoration: none;
  background: var(--k-c); box-shadow: 0 4px 0 var(--k-cd); transition: transform .25s var(--k-spring), box-shadow .25s;
}
.eli5-toc a:nth-child(5n+1) { --k-c: var(--k-pink); --k-cd: var(--k-pink-d); }
.eli5-toc a:nth-child(5n+2) { --k-c: var(--k-sun); --k-cd: var(--k-sun-d); }
.eli5-toc a:nth-child(5n+3) { --k-c: var(--k-sky); --k-cd: var(--k-sky-d); }
.eli5-toc a:nth-child(5n+4) { --k-c: var(--k-mint); --k-cd: var(--k-mint-d); }
.eli5-toc a:nth-child(5n+5) { --k-c: var(--k-lilac); --k-cd: var(--k-lilac-d); }
.eli5-toc a:hover { color: var(--k-ink); transform: translateY(-3px) rotate(-2deg); }
.eli5-toc a:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--k-cd); }

/* Soft waves where one colour meets the next. */
.eli5-wave { position: absolute; inset-inline: 0; bottom: -1px; display: block; width: 100%; height: clamp(36px, 6vw, 80px); fill: currentColor; pointer-events: none; }
.eli5-wave-kid { color: var(--k-kid); }
.eli5-wave-page { color: var(--color-bg); }
.eli5-wave-final { top: -1px; bottom: auto; color: var(--color-bg); transform: scaleY(-1); }

/* Each section has its own colour for its number and its squiggle. */
#five { --k-c: var(--k-pink); --k-cd: var(--k-pink-d); }
#what { --k-c: var(--k-sun); --k-cd: var(--k-sun-d); }
#how { --k-c: var(--k-sky); --k-cd: var(--k-sky-d); }
#tools { --k-c: var(--k-mint); --k-cd: var(--k-mint-d); }
#help { --k-c: var(--k-lilac); --k-cd: var(--k-lilac-d); }
.eli5-kid { position: relative; background: var(--k-kid); }
.eli5-kid .sec { padding-bottom: clamp(110px, 13vw, 170px); }
.eli5-block { max-width: 60ch; margin-bottom: 44px; }
.eli5-n { margin-bottom: 16px; }
.eli5-n span {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; rotate: -6deg;
  background: var(--k-c); color: var(--k-ink); font-family: var(--font-heading); font-weight: 700; font-size: 20px; box-shadow: 0 5px 0 var(--k-cd);
}
.is-eli5 .h-display { font-weight: 700; letter-spacing: -0.01em; line-height: 1.06; }
.eli5-block .h-display::after {
  content: ""; display: block; width: 132px; height: 14px; margin-top: 16px; background: var(--k-c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M2 7c10-8 20-8 30 0s20 8 30 0 20-8 30 0 20 8 30 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 14'%3E%3Cpath d='M2 7c10-8 20-8 30 0s20 8 30 0 20-8 30 0 20 8 30 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.eli5-p { margin-top: 20px; font-size: 18px; line-height: 1.55; color: var(--t-80); }

/* Cards: candy colours with dark ink, round corners and a chunky shadow. */
.eli5-grid, .eli5-steps, .eli5-story { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); list-style: none; padding: 0; }
@media (min-width: 720px) { .eli5-grid, .eli5-steps, .eli5-story { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Two columns and an odd count: the last card takes the whole row rather than half of it. */
@media (min-width: 720px) and (max-width: 1039px) { .eli5-grid-3 > :last-child:nth-child(odd), .eli5-steps > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1040px) {
  .eli5-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eli5-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .eli5-story { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
}
.eli5-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px;
  background: var(--k-c); color: var(--k-ink); box-shadow: 0 8px 0 var(--k-cd);
  transition: transform .35s var(--k-spring), box-shadow .35s var(--k-spring);
}
.eli5-card:nth-child(6n+1), .eli5-flip:nth-child(6n+1) { --k-c: var(--k-sun); --k-cd: var(--k-sun-d); }
.eli5-card:nth-child(6n+2), .eli5-flip:nth-child(6n+2) { --k-c: var(--k-pink); --k-cd: var(--k-pink-d); }
.eli5-card:nth-child(6n+3), .eli5-flip:nth-child(6n+3) { --k-c: var(--k-sky); --k-cd: var(--k-sky-d); }
.eli5-card:nth-child(6n+4), .eli5-flip:nth-child(6n+4) { --k-c: var(--k-mint); --k-cd: var(--k-mint-d); }
.eli5-card:nth-child(6n+5), .eli5-flip:nth-child(6n+5) { --k-c: var(--k-lilac); --k-cd: var(--k-lilac-d); }
.eli5-card:nth-child(6n+6), .eli5-flip:nth-child(6n+6) { --k-c: var(--k-peach); --k-cd: var(--k-peach-d); }
.eli5-card.eli5-earn { --k-c: var(--k-mint); --k-cd: var(--k-mint-d); }
.eli5-card.eli5-save { --k-c: var(--k-sky); --k-cd: var(--k-sky-d); }
.eli5-card.eli5-prove { --k-c: var(--k-sun); --k-cd: var(--k-sun-d); }
.eli5-card:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 0 14px 0 var(--k-cd); }
.eli5-card:nth-child(even):hover { transform: translateY(-6px) rotate(1.2deg); }
.eli5-card p { font-size: 16px; line-height: 1.5; color: color-mix(in srgb, var(--k-ink) 86%, transparent); }
.eli5-card-t { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--k-ink); }
.eli5-pic { display: block; width: fit-content; }
.eli5-pic .ico { transition: transform .45s var(--k-spring); }
.eli5-card:hover .eli5-pic .ico { transform: scale(1.14) rotate(-8deg); }
.eli5-steps .eli5-card { padding: 22px; }
.eli5-step-n { position: absolute; top: 18px; inset-inline-end: 20px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: color-mix(in srgb, var(--k-ink) 55%, transparent); font-variant-numeric: tabular-nums; }

/* The story: four pages of a picture book, each a little tilted. */
.eli5-story { margin-top: 28px; }
.eli5-page { padding-top: 44px; }
.eli5-page:nth-child(odd) { rotate: -1.5deg; }
.eli5-page:nth-child(even) { rotate: 1.2deg; }
.eli5-page p { font-size: 18px; line-height: 1.5; color: var(--k-ink); }
.eli5-page-n {
  position: absolute; top: -20px; inset-inline-start: 22px; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--k-ink); border: 3px solid var(--k-cd); font-family: var(--font-heading); font-weight: 700; font-size: 21px;
}
@media (min-width: 1040px) {
  /* A dotted arrow from one page to the next. */
  .eli5-page:not(:last-child)::after {
    content: ""; position: absolute; top: 46%; inset-inline-end: -34px; width: 34px; height: 22px; background: var(--t-70);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M3 15c8-10 18-10 26-3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='1 6'/%3E%3Cpath d='M24 6l6 6-8 3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 22'%3E%3Cpath d='M3 15c8-10 18-10 26-3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-dasharray='1 6'/%3E%3Cpath d='M24 6l6 6-8 3' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  }
  [dir="rtl"] .eli5-page:not(:last-child)::after { transform: scaleX(-1); }
}

/* The moral: the bear says it, in a speech bubble. */
.eli5-moral-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 64px; }
.eli5-bear { flex: none; width: 120px; }
.eli5-bear .ico { width: 100%; height: auto; transform-origin: 50% 90%; }
.eli5-moral {
  position: relative; max-width: 26ch; margin: 0; padding: 20px 26px; border-radius: 28px; background: #fff; color: var(--k-ink);
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; box-shadow: 0 6px 0 rgba(34, 28, 71, .18);
}
.eli5-moral::before { content: ""; position: absolute; top: 50%; inset-inline-start: -12px; width: 26px; height: 26px; border-radius: 5px; background: inherit; transform: translateY(-50%) rotate(45deg); }
.eli5-yay {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 12px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--k-pink); color: var(--k-ink); font: 600 17px/1 var(--font-heading); box-shadow: 0 5px 0 var(--k-pink-d);
  transition: transform .25s var(--k-spring), box-shadow .25s;
}
.eli5-yay:hover { transform: translateY(-3px) rotate(-3deg); }
.eli5-yay:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--k-pink-d); }
.eli5-yay:focus-visible { outline: 3px solid var(--k-sun); outline-offset: 3px; }
html:not(.js) .eli5-yay, html:not(.js) .eli5-words-tip { display: none; }

/* Big words: flip cards. Without JavaScript the meaning sits under the word. */
.eli5-words-h { margin-top: 72px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; }
.eli5-words-tip { margin-top: 6px; font-size: 15px; color: var(--t-70); }
.eli5-words { display: grid; gap: 20px; margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.eli5-flip { display: grid; gap: 8px; }
.eli5-flip > * { margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 24px; color: var(--k-ink); }
.eli5-flip dt { background: var(--k-c); box-shadow: 0 6px 0 var(--k-cd); }
.eli5-flip dd { padding: 18px 20px; background: #fff; border: 3px solid var(--k-c); box-shadow: 0 6px 0 var(--k-cd); font-size: 17px; line-height: 1.4; }
.eli5-flip-btn {
  flex: 1; align-self: stretch; padding: 22px 20px; border: 0; border-radius: inherit; background: none; cursor: pointer;
  color: var(--k-ink); font: 600 21px/1.2 var(--font-heading); text-align: center;
}
.eli5-flip-btn:focus-visible { outline: 3px solid var(--k-ink); outline-offset: -8px; }
html.js .eli5-flip { gap: 0; min-height: 150px; perspective: 900px; cursor: pointer; }
html.js .eli5-flip > * { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
html.js .eli5-flip dd { transform: rotateY(-180deg); }
html.js .eli5-flip.is-flip dt { transform: rotateY(180deg); }
html.js .eli5-flip.is-flip dd { transform: none; }
html.js .eli5-flip dt::after { content: "↻"; position: absolute; top: 10px; inset-inline-end: 14px; font-size: 18px; color: color-mix(in srgb, var(--k-ink) 55%, transparent); }
html.js .eli5-flip dt { position: relative; }
.eli5-last { margin-top: 56px; }

.eli5-note {
  display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 18px 24px; max-width: 76ch; font-size: 17px; line-height: 1.55;
  border-radius: 24px; background: color-mix(in srgb, var(--k-mint) 20%, transparent); border: 2px dashed var(--k-mint-d);
}
.eli5-note .ico { flex: none; }

/* The last band: a sunny gradient with polka dots and a rocket. */
.is-eli5 .eli5-final { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--k-sun) 0%, var(--k-peach) 55%, var(--k-pink) 100%); color: var(--k-ink); }
.is-eli5 .eli5-final::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, .38) 0 3px, transparent 4px) 0 0 / 34px 34px; }
.is-eli5 .eli5-final :focus-visible { outline-color: var(--k-ink); }
.eli5-final .final-in { position: relative; padding-top: clamp(110px, 12vw, 170px); }
.eli5-final .final-h { font-weight: 700; letter-spacing: -0.01em; }
.eli5-final .final-p { font-weight: 600; }
.eli5-rocket { position: absolute; top: 32%; inset-inline-end: 8%; width: 120px; }
.eli5-rocket .ico { width: 100%; height: auto; }
@media (max-width: 899px) { .eli5-rocket { top: 64px; width: 72px; inset-inline-end: 16px; } }

/* Confetti (site.js): pieces fly from a point and fall away. */
.eli5-confetti { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.eli5-confetti i { position: absolute; top: 0; left: 0; width: var(--w); height: var(--h); border-radius: var(--r); background: var(--c); }

@media (prefers-reduced-motion: no-preference) {
  .eli5-hero-in > * { animation: eli5-in .8s var(--k-spring) both; }
  .eli5-hero-in > :nth-child(2) { animation-delay: .08s; }
  .eli5-hero-in > :nth-child(3) { animation-delay: .18s; }
  .eli5-hero-in > :nth-child(4) { animation-delay: .28s; }
  .eli5-hero-in > :nth-child(5) { animation-delay: .38s; }
  .eli5-hero-in > .eli5-badge { animation: eli5-in .8s var(--k-spring) both, eli5-sway 4s ease-in-out 1s infinite; }
  .eli5-mark .eli5-l { animation: eli5-hop 3s var(--k-spring) calc(1.2s + var(--i) * 70ms) infinite; }
  .eli5-sun .ico { animation: bob 8s ease-in-out infinite; }
  .eli5-moon .ico { animation: bob 7s ease-in-out infinite; }
  .eli5-stars i { animation: eli5-blink 2.8s ease-in-out var(--t) infinite; }
  .eli5-cloud-a { animation: eli5-drift 14s ease-in-out infinite alternate; }
  .eli5-cloud-b { animation: eli5-drift 11s ease-in-out -4s infinite alternate-reverse; }
  .eli5-rainbow .ico { animation: bob 5s ease-in-out infinite; }
  .eli5-twinkle .ico { animation: eli5-twinkle 2.6s ease-in-out infinite; }
  .eli5-twinkle-b .ico { animation-delay: 1.3s; }
  .eli5-n span { animation: eli5-sway 3.6s ease-in-out infinite; }
  .eli5-page .eli5-pic .ico { animation: bob 3.4s ease-in-out infinite; }
  .eli5-page:nth-child(2) .eli5-pic .ico { animation-delay: .5s; }
  .eli5-page:nth-child(3) .eli5-pic .ico { animation-delay: 1s; }
  .eli5-page:nth-child(4) .eli5-pic .ico { animation-delay: 1.5s; }
  .eli5-bear .ico { animation: eli5-sway 3s ease-in-out infinite; }
  .eli5-moral-row.is-yay .eli5-bear .ico { animation: eli5-jump .9s var(--k-spring); }
  .eli5-yay .ico { animation: wiggle 1.8s ease-in-out infinite; }
  .eli5-rocket .ico { animation: eli5-fly 5s ease-in-out infinite; }
  .is-eli5 .eli5-final::before { animation: eli5-dots 6s linear infinite; }
  html.js .eli5-flip > * { transition: transform .7s var(--k-spring); }
  html.js .eli5-flip:hover dt { rotate: y 12deg; }
  html.js .eli5-flip.is-flip:hover dt { rotate: none; }
  /* Blocks arrive with a little bounce on this page. */
  html.js body.is-eli5 .rv { transform: translateY(36px) scale(.92); transition: opacity .6s ease var(--rv-d, 0s), transform .9s var(--k-spring) var(--rv-d, 0s); }
  html.js body.is-eli5 .rv.in { opacity: 1; transform: none; }
}
@keyframes eli5-in { from { opacity: 0; transform: translateY(24px) scale(.94); } }
@keyframes eli5-hop { 0%, 30%, 100% { transform: none; } 12% { transform: translateY(-.16em) rotate(-5deg); } }
@keyframes eli5-sway { 50% { rotate: 4deg; } }
@keyframes eli5-drift { to { translate: -60px 0; } }
@keyframes eli5-blink { 50% { opacity: .25; transform: scale(.55); } }
@keyframes eli5-twinkle { 50% { transform: scale(.65) rotate(25deg); opacity: .7; } }
@keyframes eli5-fly { 50% { transform: translate(-10px, -20px) rotate(-6deg); } }
@keyframes eli5-jump { 35% { transform: translateY(-34px) rotate(-10deg) scale(1.08); } 70% { transform: translateY(0) rotate(6deg); } }
@keyframes eli5-dots { to { background-position: 34px 34px; } }

/* The way in: a small button under the home page's last band. */
.eli5-egg { display: flex; justify-content: center; padding-block: 28px; }
.eli5-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px;
  font-size: 14px; font-weight: 700; color: var(--t-72); text-decoration: none;
  border: 1px dashed var(--color-divider); border-radius: 999px;
  transition: color .2s, border-color .2s, background .2s;
}
.eli5-btn:hover { color: var(--color-text); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.eli5-btn-k { padding: 3px 9px; font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--color-on-fill); background: var(--color-fill); border-radius: 999px; }

/* Blocks rise into place as they come into view (site.js adds .rv, then .in). */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s);
  }
  html.js .rv.in { opacity: 1; transform: none; }

  /* The hero comes in line by line. */
  .home-hero-main > *, .home-h1 span, .home-hero-side { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .home-hero-main > .eyebrow { animation-delay: .05s; }
  .home-h1 { animation: none; }
  .home-h1 span:nth-child(1) { animation-delay: .12s; }
  .home-h1 span:nth-child(2) { animation-delay: .24s; }
  .home-h1 span:nth-child(3) { animation-delay: .36s; }
  .home-lede { animation-delay: .5s; }
  .home-hero-main > .btn-row { animation-delay: .62s; }
  .home-hero-side { animation-delay: .45s; }
  .home-hero .eyebrow .sq { animation: pulse 2.4s ease-in-out infinite; }
  .home-ring { animation: float 9s ease-in-out infinite; }
  .home-hero .btn-primary::after { animation: sheen 6s ease-in-out 2s infinite; }
  .ticker-track { animation: tick 70s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  [dir="rtl"] .ticker-track { animation-name: tick-rtl; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .home-h1 span.accent {
      background: linear-gradient(100deg, var(--color-accent) 0 38%, var(--color-accent-800) 50%, var(--color-accent) 62% 100%) 0 0 / 260% 100%;
      -webkit-background-clip: text; background-clip: text; color: transparent;
      animation: rise .9s cubic-bezier(.2, .7, .2, 1) .36s both, glint 7s ease-in-out 1.6s infinite;
    }
  }

  /* The accent bands: a slow drift of fine stripes. */
  :is(.final-cta, .band) { position: relative; overflow: hidden; isolation: isolate; }
  :is(.final-cta, .band)::before {
    content: ""; position: absolute; inset: 0 -68px; z-index: -1; pointer-events: none;
    background: repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--color-on-fill) 7%, transparent) 22px 24px);
    animation: stripes 6s linear infinite;
  }

  /* ELI5: the home page button wiggles (the page itself has its own motion above). */
  .eli5-btn:hover .eli5-btn-k, .eli5-btn:focus-visible .eli5-btn-k { animation: wiggle .6s ease-in-out; }

  /* Lines draw, bars fill and rows arrive one after another as they come in. */
  html.js .steps li.rv { position: relative; border-top-color: transparent; }
  html.js .steps li.rv::before {
    content: ""; position: absolute; top: -2px; inset-inline: 0; height: 2px; background: var(--color-text);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rv-d, 0s) + .1s);
  }
  html.js .steps li.rv.in::before { transform: none; }
  html.js .flow li.rv.in::before { animation: flowline 1.3s cubic-bezier(.2, .7, .2, 1) var(--rv-d, 0s) both; }
  html.js .rv .meter i { transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .7, .2, 1) calc(var(--rv-d, 0s) + .15s); }
  html.js .rv.in .meter i { transform: none; }
  html.js .tm-row.rv .tm-bar span { width: 0; transition: width 1.1s cubic-bezier(.2, .7, .2, 1) calc(var(--rv-d, 0s) + .15s); }
  html.js .tm-row.rv.in .tm-bar span { width: var(--w); }
  html.js .maturity li.rv::before { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .7, .2, 1) calc(var(--rv-d, 0s) + .2s); }
  html.js .maturity li.rv.in::before { transform: none; }
  html.js .maturity li.rv { transform: translateY(calc(28px + var(--i, 0) * 12px)); }
  html.js .stack li.rv { transform: translateX(-28px); }
  /* html.js as well, or the left-to-right rules above win on specificity. */
  html.js[dir="rtl"] .steps li.rv::before, html.js[dir="rtl"] .maturity li.rv::before { transform-origin: 100% 50%; }
  html.js[dir="rtl"] .stack li.rv { transform: translateX(28px); }
  html.js :is(.maturity li, .stack li).rv.in { transform: none; }

  /* Live touches: the alert dot pings, the console's LIVE light blinks. */
  .alert-dot { animation: ping 1.8s ease-out infinite; }
  .console-live::before { animation: pulse 1.4s ease-in-out infinite; }

  /* The drawn app views move while on screen: rows light up in turn, a scan
     line passes, the bars breathe. site.js adds .is-live when in view. */
  .vslot.is-live .mock-rows li { animation: mockrow 6s ease-in-out calc(var(--i) * .9s) infinite; }
  .vslot.is-live .mock-scan { animation: scan 5s linear 1s infinite; }
  .vslot.is-live .mock-bars i { animation: barpulse 3s ease-in-out calc(var(--i) * -.3s) infinite; }
  .vslot-play { animation: ring 2.4s ease-out infinite; }

  /* Store: the neon sign flickers, aisle signs swing, wobblers sway; the trolley
     jiggles when something lands in it and rolls when pushed. */
  .sf-open { animation: neon 7s linear infinite; }
  .aisle:hover .aisle-sign { animation: swing 1.6s ease-in-out; }
  .wob { animation: wob 2.8s ease-in-out infinite; }
  .tb.is-new { animation: tbdrop .6s cubic-bezier(.3, 1.4, .5, 1) both; }
  .tro.is-bump .tro-b { animation: trojig .5s cubic-bezier(.2, .7, .2, 1); }
  .tro.is-bump .tro-wh, .tro.is-roll .tro-wh { animation: spin .8s linear; }
  .tro.is-roll .tro-b { animation: troroll 1.2s ease-in-out; }
  .cart-count.is-pop, .cart-bar.is-bump .cart-bar-ico { animation: pop .5s cubic-bezier(.2, .7, .2, 1); }
  .cart-line.is-new, .rc-lines li.is-new { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  .st-bub { transform-origin: 50% 100%; animation: bub .35s cubic-bezier(.2, 1.4, .4, 1) both; }
  .prod.is-restock .pk-o { animation: restock .5s cubic-bezier(.2, 1.3, .4, 1) .15s both; }
  .prod-honey .pk.is-wob .pk-o { animation: wiggle .45s ease-in-out 2; }
  .prod-honey.is-taken .pk-o { animation: honeyaway 4.4s ease-in-out both; }
  .st-hold .pk-o:not(.pk-jar, .pk-tin, .pk-card) { animation: turn 5s ease-in-out infinite alternate; }
  .st-hold .pk-o:is(.pk-jar, .pk-tin, .pk-card) { animation: float 3s ease-in-out infinite; }
  .rc-bar.is-scan::after { animation: beep .7s ease-in-out; }

  /* The app groups lift a little under the pointer. */
  .group { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
  .group:hover { transform: translateY(-3px); }

  /* Page to page: a short cross-fade where the browser supports it. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: vt-out .2s ease both; }
  ::view-transition-new(root) { animation: vt-in .35s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(.45em); } }
@keyframes pulse { 50% { opacity: .25; } }
@keyframes float { 50% { transform: translateY(-10px); } }
@keyframes sheen { 0%, 80% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes glint { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes tick { to { transform: translateX(-50%); } }
@keyframes tick-rtl { to { transform: translateX(50%); } }
@keyframes stripes { to { transform: translateX(33.94px); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@keyframes flowline { 0% { width: 0; } 55% { width: 100%; } 100% { width: 48px; } }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes mockrow { 0%, 22%, 100% { background: transparent; } 8% { background: color-mix(in srgb, var(--color-accent) 12%, transparent); } }
@keyframes scan { 0% { transform: translateY(-100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(340%); opacity: 0; } }
@keyframes barpulse { 50% { transform: scaleY(.6); } }
@keyframes bump { 30% { transform: translateY(-4px); border-color: var(--color-accent); } }
@keyframes ring { 0% { box-shadow: var(--shadow-lg), 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent); } 100% { box-shadow: var(--shadow-lg), 0 0 0 18px transparent; } }
@keyframes pop { 40% { transform: scale(1.3); } }
@keyframes neon { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .3; } }
@keyframes swing { 20% { transform: rotate(3deg); } 45% { transform: rotate(-2deg); } 70% { transform: rotate(1deg); } }
@keyframes wob { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes tbdrop { from { translate: 0 -80px; opacity: 0; } 50% { opacity: 1; } }
@keyframes trojig { 30% { transform: translateY(-5px) rotate(-2deg); } 60% { transform: translateY(1px) rotate(1deg); } }
@keyframes troroll { 35% { transform: translateX(22px); } 70% { transform: translateX(-8px); } }
@keyframes bub { from { scale: .5; opacity: 0; } }
@keyframes restock { from { translate: 0 -30px; opacity: 0; } }
@keyframes honeyaway { 0%, 100% { translate: 0 0; rotate: 0deg; opacity: 1; } 14%, 86% { translate: -150% -8px; rotate: -16deg; opacity: 0; } }
@keyframes turn { from { transform: rotateX(-12deg) rotateY(-54deg); } to { transform: rotateX(-12deg) rotateY(-6deg); } }
@keyframes beep { 0% { top: 0; opacity: 1; } 50% { top: calc(100% - 2px); opacity: 1; } 100% { top: 0; opacity: 0; } }

/* ============ Store (/store) ============ */
/* A supermarket: a storefront, six aisles of shelving and a trolley in the middle of
   the floor (desktop) or in a bar at the foot of the screen (phones). Each product is
   a package drawn in CSS 3D (.pk-o): front, side and top faces sized by --w/--h/--d
   and scaled by --u, coloured by the aisle's --hue/--hue2. The same package is cloned
   for the flight into the trolley and for the details dialog, so it only depends on
   .pk-o.pk-KIND, the hue class and --u. */
.store {
  --u: 1;
  --shelf-back: #1b211e; --shelf-top: #aab3ad; --shelf-front: #727c76; --upright: #3a413c;
  --peg: #5d4936; --tag-bg: #fffdf5; --tag-ink: #1b1b1b; --wire: #c3cac5; --paper: #f6f3ea;
  background: repeating-conic-gradient(color-mix(in srgb, var(--color-text) 3.5%, transparent) 0 25%, transparent 0 50%) 0 0 / 72px 72px;
  border-bottom: 2px solid var(--color-divider);
}
:root[data-theme="light"] .store {
  --shelf-back: #e4e1dd; --shelf-top: #cfc9c3; --shelf-front: #9b958f; --upright: #8a8580; --peg: #b9996f; --wire: #5f5c5a;
}
.hue-complibear { --hue: #f2a93b; --hue2: #b86f12; }
.hue-vittora { --hue: #8b6cff; --hue2: #5536c9; }
.hue-earn { --hue: #2fbf71; --hue2: #16804a; }
.hue-save { --hue: #3d7bf5; --hue2: #1f4fb8; }
.hue-altex { --hue: #19b8a6; --hue2: #0c7a6e; }
.hue-services { --hue: #ff7a59; --hue2: #c94a2b; }
.hue-honey { --hue: #ffc23d; --hue2: #d98a00; }

.store-floor { max-width: 1560px; margin-inline: auto; padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(48px, 6vw, 88px); display: flex; flex-direction: column; gap: 22px; }

/* The storefront: a striped awning with a scalloped edge, the name, a neon sign, the PA. */
.storefront { position: relative; background: var(--color-surface); border: 2px solid var(--color-divider); border-top: 0; }
.awning {
  position: relative; height: 38px;
  --stripes: repeating-linear-gradient(90deg, var(--color-accent) 0 48px, #f4f1ea 48px 96px);
  background: var(--stripes); transform: perspective(500px) rotateX(14deg); transform-origin: top;
  box-shadow: 0 10px 16px -10px rgba(0, 0, 0, .5);
}
.awning::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; background: var(--stripes);
  -webkit-mask: radial-gradient(circle 24px at 24px 0, #000 23.5px, transparent 24px) 0 0 / 48px 14px repeat-x;
  mask: radial-gradient(circle 24px at 24px 0, #000 23.5px, transparent 24px) 0 0 / 48px 14px repeat-x;
}
.sf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 34px clamp(16px, 3vw, 28px) 14px; }
.sf-name { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(28px, 4.4vw, 52px); line-height: 1; letter-spacing: -0.025em; }
.sf-logo { color: var(--color-accent-700); }
.sf-open {
  display: inline-block; padding: 4px 14px; border: 2px solid currentColor; border-radius: 10px;
  font-family: var(--font-heading); font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #ff5fa2; text-shadow: 0 0 6px currentColor, 0 0 16px currentColor; box-shadow: 0 0 10px currentColor, inset 0 0 8px currentColor;
}
:root[data-theme="light"] .sf-open { color: #e0207a; text-shadow: 0 0 4px color-mix(in srgb, currentColor 60%, transparent); box-shadow: 0 0 8px color-mix(in srgb, currentColor 50%, transparent); }
.pa { display: flex; align-items: center; gap: 12px; margin: 0 clamp(16px, 3vw, 28px) 22px; padding: 8px 12px 8px 8px; background: var(--color-bg); border: 1px solid var(--color-divider); font-size: 14px; line-height: 1.4; }
.pa-k { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--color-fill); }
.pa-k .ico { color: var(--color-on-fill); }
.pa-t { transition: opacity .3s ease, transform .3s ease; }
.pa-t.is-out { opacity: 0; transform: translateY(6px); }

.store-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.store-nav .chip { gap: 8px; background: var(--color-bg); }
.store-nav .chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 4px; background: var(--hue); color: #121212; font-size: 12px; }
.store-nav .chip-till { background: var(--color-fill); color: var(--color-on-fill); border-color: transparent; font-weight: 800; }
.store-nav a.chip-till:hover { background: var(--color-fill-hover); color: var(--color-on-fill); }
.store-hint { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--t-80); }
.store-hint .ico { color: var(--color-accent-700); }

/* The floor: aisles, and the trolley between them on wide screens. */
.store-in { display: flex; flex-direction: column; gap: 48px; margin-top: 18px; }
.aisle { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.aisle-sign {
  position: relative; align-self: center; margin-top: 34px; padding: 10px 24px 12px; text-align: center;
  background: var(--hue); color: #121212; box-shadow: 0 5px 0 var(--hue2); transform-origin: 50% -34px;
}
.aisle-sign::before, .aisle-sign::after { content: ""; position: absolute; bottom: 100%; width: 2px; height: 34px; background: var(--color-neutral-500); }
.aisle-sign::before { left: 18%; }
.aisle-sign::after { right: 18%; }
.aisle-n { display: block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.aisle-n b { font-size: 13px; }
.aisle-h { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.05; color: #121212; }
.aisle-sub { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; }
.aisle-blurb { align-self: center; max-width: 60ch; margin: 0; font-size: 14px; line-height: 1.55; text-align: center; color: var(--t-80); }

/* Shelving: uprights, a coloured header rail, and planks every --rh. The planks are
   the shelf's background, so an aisle taller than its products shows empty shelf. */
.unit {
  position: relative; flex: 1; display: flex;
  border: 10px solid var(--upright); border-top-color: var(--hue); border-bottom-width: 14px;
  background: var(--shelf-back); box-shadow: inset 0 16px 20px -12px rgba(0, 0, 0, .5);
}
.shelf {
  --rh: 262px;
  flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); grid-auto-rows: var(--rh);
  padding: 0 6px;
  background: linear-gradient(to bottom, transparent 156px, var(--shelf-top) 156px 162px, var(--shelf-front) 162px 180px, rgba(0, 0, 0, .3) 180px 186px, transparent 186px) 0 0 / 100% var(--rh) repeat-y;
}
.aisle-peg .unit { background: radial-gradient(circle, rgba(0, 0, 0, .38) 1.8px, transparent 2.4px) 0 0 / 18px 18px, var(--peg); }

.prod { position: relative; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--hdr-h) + 40px); }
.pk {
  flex: none; position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 156px; padding: 0 0 3px;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; perspective: 650px; perspective-origin: 50% 15%;
  -webkit-tap-highlight-color: transparent;
}
.pk::after { content: ""; position: absolute; bottom: -2px; left: 50%; width: 64%; height: 10px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); pointer-events: none; }
.pk:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.pk-plus {
  position: absolute; top: 10px; inset-inline-end: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px;
  font-size: 18px; font-weight: 800; line-height: 1; color: var(--color-on-fill); background: var(--color-fill); border-radius: 50%;
  opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
}
.pk:hover .pk-plus, .pk:focus-visible .pk-plus { opacity: 1; transform: none; }
@media (hover: none) { .pk-plus { opacity: .9; transform: scale(.85); } }

/* The package. */
.pk-o {
  --W: calc(var(--w) * var(--u)); --H: calc(var(--h) * var(--u)); --D: calc(var(--d) * var(--u));
  position: relative; display: block; flex: none; width: var(--W); height: var(--H);
  transform-style: preserve-3d; transform: rotateX(-10deg) rotateY(-24deg);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pk-f, .pk-s, .pk-t { position: absolute; display: block; backface-visibility: hidden; }
.pk-f {
  inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(6px * var(--u));
  transform: translateZ(calc(var(--D) / 2));
  background: linear-gradient(160deg, var(--hue), var(--hue2));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), inset 0 -12px 18px -12px rgba(0, 0, 0, .4);
}
.pk-s {
  top: 0; height: 100%; width: var(--D); left: calc((var(--W) - var(--D)) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--W) / 2));
  background: linear-gradient(var(--hue2), color-mix(in srgb, var(--hue2) 70%, #000));
}
.pk-t {
  left: 0; width: 100%; height: var(--D); top: calc((var(--H) - var(--D)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--H) / 2));
  background: color-mix(in srgb, var(--hue) 72%, #fff);
}
.pk-lab {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--u)); width: 100%;
  padding: calc(5px * var(--u)) calc(3px * var(--u)); background: #fffdf7; color: #17191b; text-align: center; line-height: 1.05;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.pk-lab .ico { width: calc(22px * var(--u)); height: calc(22px * var(--u)); color: var(--hue2); }
.pk-b { font-family: var(--font-heading); font-size: calc(10px * var(--u)); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.pk-l {
  font-size: calc(7.5px * var(--u)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pk-box { --w: 76px; --h: 104px; --d: 28px; }
.pk-carton { --w: 76px; --h: 74px; --d: 54px; }
.pk-carton .pk-t { background: linear-gradient(90deg, color-mix(in srgb, var(--hue) 72%, #fff) 0 43%, rgba(255, 255, 255, .78) 43% 57%, color-mix(in srgb, var(--hue) 72%, #fff) 57%); }
.pk-carton .pk-f::before { content: ""; position: absolute; top: 0; left: 43%; width: 14%; height: calc(14px * var(--u)); background: rgba(255, 255, 255, .7); }
.pk-kit { --w: 100px; --h: 64px; --d: 36px; }
.pk-kit::before {
  content: ""; position: absolute; left: 33%; right: 33%; top: calc(-15px * var(--u)); height: calc(17px * var(--u));
  border: calc(4px * var(--u)) solid var(--hue2); border-bottom: 0; border-radius: 12px 12px 0 0;
}
.pk-kit .pk-lab { text-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(5px * var(--u)); row-gap: 0; align-items: center; }
.pk-kit .pk-lab .ico { grid-row: 1 / 3; }
/* Flat packs: drawn face on, no side or top. */
.pk-jar, .pk-tin, .pk-card { transform: none; }
:is(.pk-jar, .pk-tin, .pk-card) :is(.pk-s, .pk-t) { display: none; }
:is(.pk-jar, .pk-tin, .pk-card) .pk-f { transform: none; }
.pk-jar { --w: 64px; --h: 82px; --d: 0px; }
.pk-jar .pk-f {
  border-radius: 14px 14px 18px 18px / 18px 18px 14px 14px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 70%, rgba(0, 0, 0, .2)), linear-gradient(var(--hue), var(--hue2));
}
.pk-jar .pk-f::before { content: ""; position: absolute; top: calc(-9px * var(--u)); left: 9%; right: 9%; height: calc(14px * var(--u)); border-radius: 4px; background: linear-gradient(#61666b, #2b2e31); }
.pk-tin { --w: 62px; --h: 80px; --d: 0px; }
.pk-tin .pk-f { border-radius: 4px / 10px; background: linear-gradient(90deg, var(--hue2), var(--hue) 30%, color-mix(in srgb, var(--hue) 50%, #fff) 44%, var(--hue) 58%, var(--hue2)); }
.pk-tin .pk-f::before { content: ""; position: absolute; top: calc(-7px * var(--u)); left: 0; right: 0; height: calc(14px * var(--u)); border-radius: 50%; background: radial-gradient(closest-side, #d6dadd, #8d9399); border: 2px solid var(--hue2); }
.pk-card { --w: 74px; --h: 106px; --d: 0px; }
.pk-card .pk-f { align-items: flex-end; padding-bottom: calc(8px * var(--u)); background: linear-gradient(var(--hue) 0 34%, #f4f1ea 34%); }
.pk-card .pk-f::before { content: ""; position: absolute; top: calc(6px * var(--u)); left: 50%; width: calc(16px * var(--u)); height: calc(6px * var(--u)); margin-left: calc(-8px * var(--u)); border-radius: 3px; background: rgba(0, 0, 0, .55); }
.pk-card .pk-lab { border-radius: calc(9px * var(--u)); background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 5px 5px 10px rgba(255, 255, 255, .8); }
.aisle-peg .pk { align-items: flex-start; padding: 26px 0 0; }
.aisle-peg .pk::before { content: ""; position: absolute; top: 28px; left: 50%; z-index: 2; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f2f4f6, #8b9197); box-shadow: 0 2px 2px rgba(0, 0, 0, .4); }
.aisle-peg .pk::after { display: none; }
@media (hover: hover) {
  .pk:hover .pk-o { transform: translateY(-8px) rotateX(-12deg) rotateY(-36deg); }
  .pk:hover .pk-o:is(.pk-jar, .pk-tin, .pk-card) { transform: translateY(-8px) rotate(-3deg); }
}
.pk:active .pk-o { scale: .94; }

/* Shelf wobbler: a sign on a stalk that sways in front of a product. */
.wob {
  position: absolute; top: 112px; inset-inline-start: 2px; z-index: 3; display: grid; place-items: center; width: 50px; height: 50px; padding: 4px;
  font-size: 9.5px; font-weight: 800; line-height: 1.05; letter-spacing: .02em; text-align: center; text-transform: uppercase;
  color: #121212; background: #ffe14d; border-radius: 50%; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); transform-origin: 50% 100%; pointer-events: none;
}

/* The shelf-edge ticket: name and price. Opens the details. */
.tag {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin: 8px 5px 0; min-height: 68px; padding: 6px 8px 7px;
  font: inherit; text-align: start; color: var(--tag-ink); background: var(--tag-bg);
  border: 0; border-top: 4px solid var(--hue); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); cursor: pointer;
  transition: transform .2s ease;
}
.tag:hover { transform: rotate(-1.5deg); }
.tag:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.tag-n { font-size: 12px; line-height: 1.2; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tag > * { flex: none; }
.tag-p { font-size: 13px; line-height: 1.25; font-weight: 800; font-variant-numeric: tabular-nums; }
.tag-p.is-scale { font-size: 11.5px; font-weight: 800; color: #2f2f2f; font-variant-numeric: normal; }
.tag-p.is-free { color: #0a7d3c; }
.tag-more { margin-top: auto; font-size: 10.5px; line-height: 1.3; font-weight: 700; color: #4b4b4b; text-decoration: underline; text-underline-offset: 2px; }
.prod:target .tag { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.prod-honey .tag { cursor: default; }
.prod-honey .tag:hover { transform: none; }

/* Speech bubbles: the honey jar, the trolley. */
.st-bub {
  position: absolute; z-index: 6; width: max-content; max-width: 210px; padding: 7px 11px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; text-align: center; color: var(--color-bg); background: var(--color-text);
  pointer-events: none;
}
.st-bub::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--color-text); }
.prod .st-bub { bottom: 92px; left: 50%; translate: -50% 0; }

/* The trolley and the order. */
.cart { min-width: 0; }
.cart-bar { display: none; }
.cart-in { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--color-surface); border: 2px solid var(--color-divider); }
.tro { position: relative; width: 100%; max-width: 280px; align-self: center; }
.tro-b { position: relative; display: block; width: 100%; aspect-ratio: 280 / 200; padding: 0; background: none; border: 0; cursor: pointer; }
.tro-b:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
[dir="rtl"] .tro-b { scale: -1 1; }
.tro-back, .tro-front { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tro-fill { fill: color-mix(in srgb, var(--color-text) 7%, transparent); }
.tro-wire path { fill: none; stroke: var(--wire); stroke-width: 2.2; opacity: .8; }
.tro-rim { fill: none; stroke: var(--wire); stroke-width: 4; stroke-linejoin: round; }
.tro-frame { fill: none; stroke: var(--wire); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.tro-grip { fill: var(--color-accent); }
.tro-wh circle { fill: var(--color-bg); stroke: var(--wire); stroke-width: 5; }
.tro-wh path { stroke: var(--wire); stroke-width: 2; }
.tro-load {
  position: absolute; left: 29%; right: 16%; top: -6%; bottom: 31%;
  display: flex; flex-wrap: wrap-reverse; align-content: flex-start; align-items: flex-end; justify-content: center; gap: 1px;
  pointer-events: none;
}
.tb { position: relative; flex: none; width: var(--bw); height: var(--bh); transform: rotate(var(--r, 0deg)); background: linear-gradient(160deg, var(--hue), var(--hue2)); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.tb::after { content: ""; position: absolute; inset: 32% 16%; background: rgba(255, 255, 255, .85); }
.tb-box { --bw: 18px; --bh: 25px; }
.tb-carton { --bw: 19px; --bh: 18px; }
.tb-kit { --bw: 25px; --bh: 15px; }
.tb-jar { --bw: 15px; --bh: 19px; border-radius: 4px 4px 6px 6px; }
.tb-tin { --bw: 15px; --bh: 18px; border-radius: 3px / 5px; }
.tb-card { --bw: 15px; --bh: 21px; }
.tro-say { top: -2px; left: 50%; translate: -50% -100%; }
.cart-h { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.cart-count {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 800; color: var(--color-on-fill); background: var(--color-fill);
}
.cart-empty { margin: 0; font-size: 14px; color: var(--t-70); }
.cart-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.cart-lines:empty { display: none; }
.cart-line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main x" "qty sum";
  gap: 6px 10px; align-items: center; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--color-divider);
  border-inline-start: 4px solid var(--hue, var(--color-accent));
}
.cart-l-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.cart-l-main small { font-size: 12px; color: var(--t-70); }
.cart-l-qty { grid-area: qty; display: inline-flex; align-items: center; width: max-content; border: 1px solid var(--color-divider); }
.cart-l-qty span { min-width: 28px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-l-one { grid-area: qty; font-size: 12px; color: var(--t-70); }
.cart-q, .cart-x {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0;
  font: inherit; font-size: 16px; line-height: 1; color: var(--color-text); background: none; border: 0; cursor: pointer;
}
.cart-q:hover:not(:disabled), .cart-x:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.cart-q:disabled { opacity: .35; cursor: default; }
.cart-x { grid-area: x; align-self: start; font-size: 20px; color: var(--t-70); }
.cart-l-sum { grid-area: sum; justify-self: end; font-size: 12px; font-weight: 700; color: var(--t-70); text-align: end; }
.cart-l-sum.is-free { font-size: 13px; font-weight: 800; color: var(--color-accent-700); }
.cart-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--t-70); }
.cart-go { margin-top: 0; }
/* Also on SAP Store and AWS Marketplace. */
.cart-mkt { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; border: 1px dashed var(--color-divider); border-inline-start: 4px solid var(--color-accent); }
.cart-mkt p { margin: 0; }
.cart-mkt-h { font-weight: 800; }
.cart-mkt-t { color: var(--t-80); }

/* Tablets: aisles two by two, the trolley in the bar below. */
@media (min-width: 760px) and (max-width: 1099px) {
  .store-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 24px; }
  .cart { grid-column: 1 / -1; }
}
/* Below desktop: the trolley rides in a bar at the foot of the screen and opens as a sheet. */
@media (max-width: 1099px) {
  .cart { position: sticky; bottom: 0; z-index: 30; margin-inline: calc(-1 * var(--gutter)); }
  .cart-bar {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px var(--gutter); min-height: 60px;
    font: inherit; text-align: start; color: var(--color-on-fill); background: var(--color-fill); border: 0; cursor: pointer;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .35);
  }
  .cart-bar-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--color-bg); }
  .cart-bar-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
  .cart-bar-t b { font-size: 15px; }
  .cart-bar-t small { font-size: 13px; font-variant-numeric: tabular-nums; opacity: .9; }
  .cart-bar-go { display: inline-grid; transform: rotate(-90deg); transition: transform .25s ease; }
  .cart.is-open .cart-bar-go { transform: rotate(90deg); }
  .cart-in { display: none; }
  .cart.is-open .cart-in {
    display: flex; position: absolute; left: 0; right: 0; bottom: 100%; max-height: min(75vh, 680px); overflow-y: auto; overscroll-behavior: contain;
    padding-inline: var(--gutter); border-inline: 0; box-shadow: 0 -16px 40px rgba(0, 0, 0, .45);
  }
  .cart .tro { max-width: 230px; }
}
@media (max-width: 600px) {
  .store { --u: .86; }
  .shelf { --rh: 270px; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); padding: 0 3px; }
  .unit { border-width: 8px 6px 12px; }
  .tag { margin-inline: 3px; padding-inline: 6px; }
  .tag-n { font-size: 11.5px; }
}
/* Desktop: aisles left and right, the trolley in the middle, following you down. */
@media (min-width: 1100px) {
  .store-in { display: grid; grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); column-gap: 28px; row-gap: 56px; }
  .aisle { grid-row: var(--row); }
  .aisle-l { grid-column: 1; }
  .aisle-r { grid-column: 3; }
  .cart { grid-column: 2; grid-row: 1 / span var(--rows); }
  .cart-in { position: sticky; top: calc(var(--hdr-h) + 16px); max-height: calc(100vh - var(--hdr-h) - 32px); overflow-y: auto; }
}

/* The till: the receipt, then the form (side by side on wide screens). */
.till { margin-top: 40px; padding-top: 40px; border-top: 2px dashed var(--color-divider); scroll-margin-top: calc(var(--hdr-h) + 16px); }
.till-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.till-ico { flex: none; display: inline-grid; place-items: center; width: 54px; height: 54px; background: var(--color-fill); }
.till-ico .ico { color: var(--color-on-fill); }
.till-h { font-size: clamp(26px, 3vw, 36px); }
.till-sub { margin: 4px 0 0; font-size: 15px; color: var(--t-80); }
.till-in { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) {
  .till-in { grid-template-columns: minmax(0, 1fr) 370px; }
  .receipt { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--hdr-h) + 16px); }
  .store-form { grid-column: 1; grid-row: 1; }
}
.receipt {
  --zz: 16px;
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px calc(var(--zz) + 18px);
  font-family: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 13px; line-height: 1.45;
  color: #23211c; background: var(--paper); transform: rotate(-.6deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / var(--zz) 100%;
}
.rc-shop { margin: 0; text-align: center; font-weight: 800; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; }
.rc-h { margin: 0; padding-bottom: 8px; text-align: center; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px dashed currentColor; }
.rc-empty { margin: 0; text-align: center; padding: 10px 0; }
.receipt:not(.is-empty) .rc-empty, .receipt.is-empty :is(.rc-lines, .rc-total) { display: none; }
.rc-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rc-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
.rc-lines small { grid-column: 1 / -1; font-size: 11.5px; opacity: .75; }
.rc-lines b { font-weight: 700; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 8px; border-top: 2px dashed currentColor; font-weight: 800; text-transform: uppercase; }
.rc-total b { font-size: 18px; font-variant-numeric: tabular-nums; }
.rc-tax, .rc-thanks { margin: 0; font-size: 12px; }
.rc-thanks { text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.rc-bar { position: relative; display: block; width: 100%; height: 44px; margin-top: 4px; padding: 0; background: none; border: 0; cursor: pointer; overflow: hidden; }
.rc-bar svg { display: block; width: 100%; height: 34px; fill: #23211c; }
.rc-bar:focus-visible { outline: 2px solid #23211c; outline-offset: 2px; }
.rc-bar::after { content: ""; position: absolute; left: -4px; right: -4px; top: 0; height: 2px; background: #ff2a2a; box-shadow: 0 0 8px 1px #ff2a2a; opacity: 0; }

/* The details dialog: the package turning on a stand, the details beside it. */
.pdlg {
  width: min(880px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  color: var(--color-text); background: var(--color-bg); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg);
}
.pdlg::backdrop { background: var(--color-backdrop); }
.pdlg-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.pdlg-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-divider); cursor: pointer; }
.pdlg-x:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.pdlg-stage {
  position: relative; display: grid; place-items: center; min-height: 240px; padding: 40px 20px 30px; perspective: 900px;
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hue, var(--color-accent)) 35%, transparent), transparent 68%), var(--color-surface);
}
.pdlg-stage::after { content: ""; position: absolute; bottom: 26px; left: 50%; width: 180px; height: 18px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.st-hold { --u: 1.9; position: relative; z-index: 1; }
.st-hold .pk-o { transform: rotateX(-12deg) rotateY(-30deg); }
.st-hold .pk-o:is(.pk-jar, .pk-tin, .pk-card) { transform: none; }
.pdlg-body { padding: 26px clamp(18px, 3vw, 30px) 28px; }
@media (min-width: 760px) {
  .pdlg-in { grid-template-columns: 300px minmax(0, 1fr); }
  .pdlg-stage { min-height: 100%; }
}
.pinfo { display: flex; flex-direction: column; gap: 12px; }
.pinfo-k { margin: 0; padding-inline-end: 44px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.pinfo-h { font-size: clamp(24px, 3vw, 30px); }
.pinfo-tag { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--t-70); }
.pinfo-d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--t-80); }
.pinfo-pts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--t-80); }
.pinfo-pts li { display: flex; gap: 8px; align-items: baseline; }
.pinfo-pts svg { flex: none; color: var(--color-accent); transform: translateY(2px); }
.pinfo-opts { display: flex; flex-wrap: wrap; gap: 12px; }
.pinfo-opts .field { flex: 1 1 150px; }
.pinfo-opts .field-qty { flex: 0 0 80px; }
.pinfo-opts .input { min-height: 42px; }
.pinfo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--color-divider); }
.pinfo-price { display: flex; flex-direction: column; gap: 2px; }
.pinfo-price b { font-family: var(--font-heading); font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pinfo-price b.is-quote { font-size: 19px; }
.pinfo-price b.is-free { color: var(--color-accent-700); }
.pinfo-per { font-size: 12px; color: var(--t-70); }
.pinfo-add { padding: 12px 18px; font-size: 15px; }
.pinfo-next { margin: 0; font-size: 13px; line-height: 1.5; color: var(--t-70); }

/* The package in flight to the trolley (site.js). */
.st-ghost { position: fixed; z-index: 1000; margin: 0; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; perspective: 650px; will-change: transform, opacity; }

.ty-order { max-width: 760px; }
.ty-lines { min-width: 0; }
.ty-lines td small { display: block; margin-top: 2px; font-size: 12px; color: var(--t-70); }
.ptable td.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ty-total td { font-weight: 800; border-top: 2px solid var(--color-divider); border-bottom: 0; }

/* Checkout and the download form share one look: the booking form's grid, in a panel. */
.sform {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 20px; align-content: start;
  padding: clamp(20px, 3vw, 28px); background: var(--color-surface); border: 2px solid var(--color-divider);
}
.sform .input { min-height: 44px; font-size: 15px; }
.sform-h { grid-column: 1 / -1; font-size: 22px; line-height: 1.2; }

/* ============ Shared PDFs (/d/…) ============ */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@media (min-width: 960px) { .dl-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 48px; } }
.dl-side { display: flex; flex-direction: column; gap: 20px; }
.dl-file {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  background: var(--color-surface); border: 2px solid var(--color-divider); border-top: 4px solid var(--color-accent);
}
.dl-file strong { display: block; font-family: var(--font-heading); font-size: 18px; line-height: 1.25; }
.dl-file small { display: block; margin-top: 4px; font-size: 13px; color: var(--t-70); }
.dl-ic {
  flex: none; display: grid; place-items: center; width: 52px; height: 64px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--color-on-fill); background: var(--color-fill);
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
}
.dl-file-lg { flex-wrap: wrap; max-width: 760px; padding: 28px; }
.dl-file-lg > div { flex: 1 1 220px; }
.dl-points { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--t-80); }
.dl-points li { position: relative; padding-inline-start: 18px; }
.dl-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .55em; width: 7px; height: 7px; background: var(--color-accent); }

/* ============ Video slots ============ */
/* A 16:9 frame. Until a recording is added in the admin it shows a drawn,
   gently moving view of the app; site.js swaps in the player when one exists. */
.vslot { margin: 0; max-width: 1100px; display: grid; gap: 14px; }
.vslot-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; border: 2px solid var(--color-divider); background: var(--color-surface); }
.vslot-media { position: absolute; inset: 0; }
.vslot-media iframe, .vslot-media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.vslot-play {
  position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center;
  width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; cursor: pointer;
  color: var(--color-on-fill); background: var(--color-fill); border: 0; box-shadow: var(--shadow-lg);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s;
}
.vslot-play:hover { transform: scale(1.08); background: var(--color-fill-hover); }
.vslot-play svg { margin-inline-start: 4px; }
.vslot.has-video .mock { filter: saturate(.5) brightness(.75); }
/* A recording that ships with the site: its poster over the drawn view, its length in the corner. */
.vslot-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #0d1117; }
.vslot.has-rec .mock { visibility: hidden; }
.vslot.has-rec .vslot-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(transparent 55%, rgb(0 0 0 / .35)); }
.vslot-len { position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 2; padding: 3px 9px; font: 600 13px/1.4 var(--font-body, sans-serif); font-variant-numeric: tabular-nums; color: #fff; background: rgb(0 0 0 / .72); pointer-events: none; }
.vslot-rec {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer;
  font: 600 14px/1.3 var(--font-body, sans-serif); color: var(--color-text); background: transparent;
  border: 2px solid var(--color-fill); transition: background-color .2s, color .2s;
}
.vslot-rec:hover, .vslot-rec:focus-visible { color: var(--color-on-fill); background: var(--color-fill); }
.vslot-rec svg { flex: none; fill: currentColor; }
.vslot-rec small { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; }
.vslot-miss { position: absolute; inset: auto 0 0; z-index: 2; margin: 0; padding: 10px 14px; font-size: 14px; color: #fff; background: rgb(0 0 0 / .78); }
.vslot-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.vslot-t { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; }
.vslot-d { flex-basis: 100%; max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--t-80); }
.vslot-cap .inline-link { font-size: 14px; }
.home-video { margin-top: clamp(40px, 5vw, 64px); }

.mock { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; font-size: clamp(8px, 1.45cqi, 13px); line-height: 1.3; color: var(--color-text); background: var(--color-bg); }
.mock-bar { display: flex; align-items: center; gap: .5em; padding: .75em 1.1em; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); }
.mock-bar i { width: .75em; height: .75em; border-radius: 50%; background: var(--color-divider); }
.mock-bar span { margin-inline-start: .8em; font-weight: 800; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-body { flex: 1; display: grid; grid-template-columns: 15% minmax(0, 1fr); min-height: 0; }
.mock-side { display: flex; flex-direction: column; gap: 1em; padding: 1.4em 1.1em; border-inline-end: 1px solid var(--color-divider); background: var(--color-surface); }
.mock-side b { height: .7em; background: var(--color-divider); }
.mock-side b:first-child { width: 70%; background: var(--color-accent); }
.mock-main { display: flex; flex-direction: column; gap: 1.1em; padding: 1.3em 1.5em; min-height: 0; overflow: hidden; }
.mock-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .9em; }
.mock-kpis span { display: flex; flex-direction: column; gap: .25em; padding: .7em .9em; border: 1px solid var(--color-divider); border-top: 2px solid var(--color-accent); }
.mock-kpis em { font-style: normal; font-size: .8em; letter-spacing: .06em; text-transform: uppercase; color: var(--t-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-kpis strong { font-family: var(--font-heading); font-size: 1.7em; line-height: 1.05; }
.mock-rows { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.mock-rows li { display: grid; grid-template-columns: 4.8em minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: .55em .4em; border-bottom: 1px solid var(--color-divider); }
.mock-pill { padding: .15em .4em; font-size: .78em; font-weight: 800; letter-spacing: .06em; text-align: center; border: 1px solid currentColor; }
.mock-hi { color: var(--color-err); }
.mock-md { color: var(--color-warn); }
.mock-lo { color: var(--color-accent-700); }
.mock-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-rows b { font-variant-numeric: tabular-nums; }
.mock-bars { flex: 1; display: flex; align-items: flex-end; gap: 3%; min-height: 2.5em; border-bottom: 1px solid var(--color-divider); }
.mock-bars i { flex: 1; height: var(--h); background: color-mix(in srgb, var(--color-accent) 55%, transparent); transform-origin: 50% 100%; }
.mock-scan {
  position: absolute; inset-inline: 0; top: 0; height: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 10%, transparent) 85%, color-mix(in srgb, var(--color-accent) 40%, transparent));
}
@container (max-width: 560px) {
  .mock-side, .mock-bars, .mock-kpis span:nth-child(n+3) { display: none; }
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock { font-size: 9px; }
}

/* ============ Animated explainers ============ */
/* A film in a video space (src/templates/film.mjs): scenes drawn in HTML that
   site.js plays with GSAP. Each scene at rest is its finished layout, so the first
   one doubles as the poster. Without GSAP the film stays hidden and the app view shows. */
.vslot.film-ready .mock { visibility: hidden; }
.film { position: absolute; inset: 0; z-index: 1; }
.film-stage {
  position: absolute; inset: 0; overflow: hidden;
  font-size: clamp(9px, 1.45cqi, 16px); line-height: 1.3; color: var(--color-text); background: var(--color-bg);
}
.film.is-on .film-stage { cursor: pointer; }
.film-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px) 0 0 / 4em 4em,
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px) 0 0 / 4em 4em;
}
.film-bg i { position: absolute; left: 20%; top: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent); }

.fs { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 2.4em 6% 0; overflow: hidden; opacity: 0; visibility: hidden; }
.film.is-ready:not(.is-on) section.fs:first-of-type { opacity: 1; visibility: inherit; }
.fs[data-rail] { padding-top: 5.6em; }
.fs-in { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.2em; }
.fs-say { flex: none; align-self: center; max-width: 64ch; margin: 0; padding: .7em 0 calc(52px + .5em); font-size: 1.05em; line-height: 1.45; text-align: center; color: var(--t-80); text-wrap: balance; }
.fs-k { font-size: .78em; font-weight: 800; letter-spacing: .14em; color: var(--color-accent-700); }
.fs-h { font-family: var(--font-heading); font-weight: 800; font-size: 2.1em; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.fs-h-xl { font-size: 3.4em; }
.fs-h > * { padding-block: .08em; margin-block: -.08em; }
.fs-p { font-size: 1.15em; color: var(--t-80); }
.fs-earn, .fs-lo { --tone: var(--color-accent); --tone-t: var(--color-accent-700); }
.fs-save { --tone: var(--color-save); --tone-t: var(--color-save-text); }
.fs-hi { --tone: var(--color-err); --tone-t: var(--color-err); }
.fs-md { --tone: var(--color-warn); --tone-t: var(--color-warn); }
.fs-hl { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--tone, var(--color-err)) 14%, transparent); transform-origin: 0 50%; }
.fs-m { display: block; height: .45em; background: var(--color-divider); }
.fs-m i { display: block; height: 100%; background: var(--tone, var(--color-accent)); transform-origin: 0 50%; }
[dir="rtl"] :is(.fs-hl, .fs-m i) { transform-origin: 100% 50%; }
.fs-arrow { position: relative; flex: none; align-self: center; width: 1.6em; height: 2px; background: var(--color-accent); transform-origin: 0 50%; }
.fs-arrow::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: .55em; height: .55em; margin-top: -.275em; border-top: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); transform: rotate(45deg); }
[dir="rtl"] .fs-arrow { transform-origin: 100% 50%; }
[dir="rtl"] .fs-arrow::after { transform: rotate(-135deg); }

/* title and end */
.fs:is(.fs--title, .fs--end) .fs-in { position: relative; align-items: center; text-align: center; }
.fs--title .fs-h { max-width: 18ch; }
.fs--title .fs-in > :not(.fs-noise) { position: relative; }
.fs-noise { position: absolute; inset: -2.4em -6% 0; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); place-items: center; pointer-events: none; }
.fs-noise i { position: relative; width: 1.4em; height: .3em; background: var(--color-divider); opacity: .15; }
.fs-noise i.is-sig { opacity: 1; }
.fs-noise b { position: absolute; inset: 0; background: var(--color-err); }
.fs-logo { display: block; width: 16em; max-width: 70%; }
.fs-logo img { display: block; width: 100%; height: auto; }
.fs-end-l { max-width: 22ch; font-family: var(--font-heading); font-weight: 800; font-size: 2em; line-height: 1.15; text-wrap: balance; }
.fs-url { font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }

/* stream: a ledger where flagged rows turn red */
.fs-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2em 3em; align-items: center; }
.fs-ledger ul { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.fs-ledger li { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto 8.5em; gap: 1em; align-items: center; padding: .55em .6em; border-bottom: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.fs-ledger span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-ledger em { justify-self: end; font-style: normal; font-size: .75em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--color-err); }
.fs-ledger em:not(:empty) { padding: .2em .5em; border: 1px solid currentColor; }
.fs-ledger li:not(.is-flag) .fs-hl { display: none; }

/* doors */
.fs-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; }
.fs-door { display: flex; flex-direction: column; gap: .7em; padding: 1.4em 1.5em; background: var(--color-surface); border-top: 4px solid var(--tone); }
.fs-tag { align-self: flex-start; padding: .25em .6em; font-size: .78em; font-weight: 800; letter-spacing: .12em; color: var(--tone-t); border: 2px solid currentColor; }
.fs-door b { font-family: var(--font-heading); font-size: 1.6em; line-height: 1.15; }
.fs-dots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35em; margin-top: .3em; }
.fs-dots i { position: relative; aspect-ratio: 1; background: var(--color-divider); }
.fs-dots b { position: absolute; inset: 0; background: var(--color-accent); opacity: 0; }
.fs-dots .f b { background: var(--color-err); }
/* The light accent is red too, so tested cells take a pale tint and the frauds stay deep red. */
:root[data-theme="light"] .fs-dots b { background: var(--color-accent-300); }
:root[data-theme="light"] .fs-dots .f b { background: var(--color-err); }

/* vault: the client's environment */
.fs-vault { display: flex; justify-content: center; }
.fs-env { position: relative; display: flex; flex-direction: column; gap: 1.2em; width: min(100%, 46em); padding: 1.4em 1.6em; border: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.fs-wall { position: absolute; inset: -2px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 2.4em color-mix(in srgb, var(--color-accent) 50%, transparent); }
.fs-env-l { display: inline-flex; align-items: center; gap: .5em; font-size: .78em; font-weight: 800; letter-spacing: .14em; color: var(--color-accent-700); }
.fs-env-l svg { width: 1.4em; height: 1.4em; }
.fs-nodes { display: flex; flex-wrap: wrap; align-items: center; gap: .8em; }
.fs-node { padding: .6em 1em; font-weight: 700; background: var(--color-surface); border: 2px solid var(--color-divider); }
.fs-chip { margin-inline-start: auto; padding: .6em 1em; font-weight: 800; color: var(--color-on-fill); background: var(--color-fill); }
.fs-out { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.fs-data { padding: .5em .9em; font-weight: 800; border: 2px dashed var(--color-text); }
.fs-no { order: -1; display: inline-flex; align-items: center; gap: .45em; padding: .35em .7em; font-size: .85em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); border: 2px solid currentColor; transform: rotate(-4deg); }
.fs-no svg { width: 1.2em; height: 1.2em; }

/* steps */
.fs-steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.4em; }
.fs-steps.is-loop { padding-bottom: 2.8em; }
.fs-track { position: absolute; top: 1.3em; inset-inline: calc(50% / var(--n)); height: 2px; margin-top: -1px; background: var(--color-divider); }
.fs-track i { position: absolute; inset: 0; background: var(--color-accent); transform-origin: 0 50%; }
[dir="rtl"] .fs-track i { transform-origin: 100% 50%; }
.fs-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .55em; text-align: center; }
.fs-n { position: relative; display: grid; place-items: center; width: 2.6em; height: 2.6em; font-weight: 800; background: var(--color-bg); border: 2px solid var(--color-divider); }
.fs-n i { position: absolute; inset: -2px; border: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 20%, transparent); }
.fs-n span { position: relative; }
.fs-steps b { font-family: var(--font-heading); font-size: 1.3em; line-height: 1.15; }
.fs-x { max-width: 18em; font-size: .92em; color: var(--t-80); }
.fs-back { position: absolute; bottom: 0; inset-inline: calc(50% / var(--n)); height: 1.8em; border: 2px solid var(--color-accent); border-top: 0; }
.fs-back::after { content: ""; position: absolute; top: -.2em; inset-inline-start: calc(-1px - .35em); width: .7em; height: .7em; border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); transform: rotate(45deg); }

/* console: an app screen */
.fs-app { position: relative; align-self: center; width: min(100%, 52em); background: var(--color-surface); border: 2px solid var(--color-divider); box-shadow: var(--shadow-lg); }
.fs-app-bar { display: flex; align-items: center; gap: .45em; padding: .6em 1em; border-bottom: 1px solid var(--color-divider); }
.fs-app-bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--color-divider); }
.fs-app-bar span { margin-inline-start: .8em; font-size: .9em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-app-in { display: flex; flex-direction: column; gap: 1em; padding: 1.1em 1.3em 1.4em; }
.fs-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.fs-kpis span { display: flex; flex-direction: column; gap: .25em; padding: .6em .8em; background: var(--color-bg); border: 1px solid var(--color-divider); border-top: 2px solid var(--color-accent); }
:is(.fs-kpis, .fs-tile-row) em { font-style: normal; font-size: .75em; letter-spacing: .06em; text-transform: uppercase; color: var(--t-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-kpis strong { font-family: var(--font-heading); font-size: 1.8em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fs-rows { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.fs-rows li { position: relative; isolation: isolate; display: grid; grid-template-columns: 4.6em minmax(0, 1fr) 8em 3.2em; gap: 1em; align-items: center; padding: .55em .5em; border-bottom: 1px solid var(--color-divider); }
.fs-rows .fs-hl { transform: scaleX(0); }
.fs-pill { padding: .15em .4em; font-size: .75em; font-weight: 800; letter-spacing: .06em; text-align: center; color: var(--tone-t); border: 1px solid currentColor; }
.fs-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-rows b { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.fs-gate { position: absolute; bottom: -1em; inset-inline-start: 1.2em; padding: .35em .8em; font-size: .85em; font-weight: 800; letter-spacing: .06em; color: var(--color-warn); background: var(--color-bg); border: 2px solid currentColor; }
.fs-act { position: absolute; top: -1em; inset-inline-end: 1.2em; display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; font-size: .9em; font-weight: 800; color: var(--color-on-fill); background: var(--color-fill); box-shadow: var(--shadow-lg); }
.fs-act svg { width: 1.1em; height: 1.1em; }

/* cols */
.fs-colset { display: flex; align-items: stretch; gap: .6em; }
.fs-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .7em; padding: 1.1em 1em 1.2em; background: var(--color-surface); }
.fs-col-bar { position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--color-accent); transform-origin: 0 50%; }
[dir="rtl"] .fs-col-bar { transform-origin: 100% 50%; }
.fs-col-h { font-size: .78em; font-weight: 800; letter-spacing: .14em; color: var(--color-accent-700); }
.fs-col ul { list-style: none; display: flex; flex-direction: column; gap: .5em; }
.fs-col li { padding-inline-start: .7em; font-weight: 600; line-height: 1.25; border-inline-start: 2px solid var(--color-accent); }

/* chips round a core */
.fs-orbit { position: relative; flex: 1; align-self: center; width: 100%; max-width: 56em; min-height: 14em; }
.fs-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fs-spokes line { stroke: var(--color-divider); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.fs-core { position: absolute; z-index: 1; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 1em 1.4em; font-family: var(--font-heading); font-size: 1.2em; font-weight: 800; white-space: nowrap; color: var(--color-on-fill); background: var(--color-fill); }
.fs-core b { position: relative; }
.fs-ring { position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--color-accent); opacity: 0; }
.fs-chip2 { position: absolute; z-index: 1; translate: -50% -50%; width: max-content; max-width: 14em; }
.fs-chip2 > span { display: block; padding: .5em .9em; font-weight: 700; line-height: 1.2; text-align: center; background: var(--color-surface); border: 2px solid var(--color-divider); }
.fs-note { font-size: .9em; font-weight: 800; letter-spacing: .08em; text-align: center; color: var(--t-70); }

/* cards built one after another */
.fs-cards { display: flex; align-items: stretch; gap: .6em; padding-top: 1.1em; }
.fs-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: .6em; padding: 1.2em 1.2em 1.3em; background: var(--color-surface); border-top: 4px solid var(--tone, var(--color-text)); }
.fs-card-k { font-size: .75em; font-weight: 800; letter-spacing: .12em; color: var(--tone-t, var(--t-70)); }
.fs-card b { font-family: var(--font-heading); font-size: 1.3em; line-height: 1.2; }
.fs-card ul { list-style: none; display: flex; flex-direction: column; gap: .45em; }
.fs-card li { position: relative; padding-inline-start: 1.1em; line-height: 1.3; color: var(--t-80); }
.fs-card li::before { content: ""; position: absolute; inset-inline-start: 0; top: .42em; width: .45em; height: .45em; background: var(--tone, var(--color-accent)); }
.fs-foot { margin-top: auto; padding-top: .6em; font-size: .88em; font-weight: 800; border-top: 1px solid var(--color-divider); }
.fs-stamp { position: absolute; top: -1.5em; inset-inline-end: .8em; padding: .3em .7em; font-size: .85em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tone-t, var(--color-accent-700)); background: var(--color-bg); border: 2px solid currentColor; transform: rotate(-4deg); }

/* bars: gross to net */
.fs-wf { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1em; min-height: 10em; max-height: 22em; }
.fs-wf-col { display: flex; flex-direction: column; gap: .5em; min-height: 0; }
.fs-wf-b { position: relative; flex: 1; border-bottom: 2px solid var(--color-divider); }
.fs-wf-b > i { position: absolute; inset-inline: 0; background: var(--t-70); transform-origin: 50% 100%; }
.fs-wf-c .fs-wf-b > i { background: color-mix(in srgb, var(--color-err) 70%, transparent); }
.fs-wf-n .fs-wf-b > i { background: var(--color-accent); }
.fs-wf-b b { position: absolute; inset: 0; background: var(--color-accent); transform: scaleY(0); transform-origin: 50% 100%; }
.fs-wf-col > span { font-size: .8em; font-weight: 700; text-align: center; color: var(--t-80); overflow-wrap: anywhere; }

/* stack: layers from the bottom up */
.fs-stackset { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.6em; align-items: center; }
.fs-stack { list-style: none; display: flex; flex-direction: column-reverse; gap: .35em; }
.fs-stack li { position: relative; isolation: isolate; display: flex; align-items: center; gap: .8em; width: calc(100% - var(--i) * 5%); margin-inline: auto; padding: .5em .9em; background: var(--color-surface); border-inline-start: 3px solid var(--color-accent); }
.fs-stack .fs-hl { opacity: 0; background: color-mix(in srgb, var(--color-accent) 14%, transparent); border: 2px solid var(--color-accent); }
.fs-stack span { font-size: .75em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-accent-700); }
.fs-stack b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-side { list-style: none; display: flex; flex-direction: column; gap: .7em; }
.fs-side li { display: flex; align-items: center; gap: .55em; font-weight: 700; }
.fs-side svg { flex: none; width: 1.2em; height: 1.2em; color: var(--color-accent-700); }

/* rail: the demo's seven steps */
.film-rail { position: absolute; z-index: 2; top: 2.4em; inset-inline: 6%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5em; opacity: 0; visibility: hidden; }
.film-rail span { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.film-rail i { display: block; height: 3px; overflow: hidden; background: var(--color-divider); }
.film-rail b { display: block; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .film-rail b { transform-origin: 100% 50%; }
.film-rail em { font-style: normal; font-size: .66em; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-70); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-rail-h { display: flex; align-items: baseline; gap: .9em; }
.fs-vis { align-self: center; width: 100%; max-width: 52em; }
.fs-vis-t { display: block; margin-bottom: .8em; font-family: var(--font-heading); font-size: 1.25em; }
.fs-meters { list-style: none; display: flex; flex-direction: column; gap: .8em; }
.fs-meters li { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 2.6em; gap: 1em; align-items: center; }
.fs-meters span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-meters .fs-m { height: .7em; }
.fs-meters b { text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.fs-trail ol { position: relative; list-style: none; display: flex; flex-direction: column; gap: .9em; padding-inline-start: 1.8em; }
.fs-trail-line { position: absolute; top: .4em; bottom: .4em; inset-inline-start: .45em; width: 2px; background: var(--color-accent); transform-origin: 50% 0; }
.fs-trail li { position: relative; display: flex; align-items: baseline; gap: 1em; }
.fs-dot { position: absolute; top: .25em; inset-inline-start: calc(-1.75em + 1px); width: .8em; height: .8em; background: var(--color-bg); border: 2px solid var(--color-accent); }
.fs-trail .is-done .fs-dot { background: var(--color-accent); }
.fs-trail time { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-accent-700); }
.fs-links { display: grid; grid-template-columns: minmax(0, 1fr) 6em minmax(0, 1.1fr); }
.fs-links ul { list-style: none; display: flex; flex-direction: column; justify-content: space-around; }
.fs-links li { display: flex; align-items: center; gap: .55em; margin-block: .35em; padding: .6em .8em; font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-divider); }
.fs-links li svg { flex: none; width: 1.3em; height: 1.3em; color: var(--color-accent-700); }
.fs-wires { width: 100%; height: 100%; overflow: visible; }
.fs-wires path { fill: none; stroke: var(--color-accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
[dir="rtl"] .fs-wires { scale: -1 1; }
.fs-ctl { align-self: center; display: flex; flex-direction: column; gap: .5em; padding: 1em 1.2em; background: color-mix(in srgb, var(--color-accent) 6%, transparent); border: 2px solid var(--color-accent); }
.fs-ctl b { font-family: var(--font-heading); font-size: 1.15em; line-height: 1.2; }
.fs-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; font-size: .85em; font-weight: 800; color: var(--color-on-fill); background: var(--color-fill); }
.fs-ok svg { width: 1.1em; height: 1.1em; }
.fs-tile-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8em; }
.fs-tile-row span { display: flex; flex-direction: column; gap: .3em; padding: .8em 1em; background: var(--color-surface); border-top: 3px solid var(--color-accent); }
.fs-tile-row strong { font-family: var(--font-heading); font-size: 2.4em; line-height: 1; font-variant-numeric: tabular-nums; }
.fs-spark { display: flex; align-items: flex-end; gap: 3%; height: 5em; margin-top: 1em; border-bottom: 2px solid var(--color-divider); }
.fs-spark i { flex: 1; background: color-mix(in srgb, var(--color-accent) 60%, transparent); transform-origin: 50% 100%; }

/* labels and controls */
.film-ui {
  position: absolute; z-index: 3; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 8px 14px;
  font-size: 13px; color: var(--color-text);
  background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 94%, transparent) 40%, transparent);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.film.is-on .film-ui { opacity: 1; visibility: visible; transition: opacity .3s; }
.film-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; cursor: pointer; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-divider); }
.film-btn:hover { border-color: var(--color-text); }
.film-btn svg { display: block; width: 18px; height: 18px; }
.film-btn [data-i] { display: none; }
.film:not(.is-playing, .is-ended) [data-i="play"], .film.is-playing [data-i="pause"], .film.is-ended:not(.is-playing) [data-i="replay"] { display: block; }
.film-seek { flex: 1; min-width: 0; margin: 0; cursor: pointer; accent-color: var(--color-accent); }
.film-time { flex: none; direction: ltr; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-80); }
.film.is-on .film-start { display: none; }

@media (max-width: 640px) { .vslot.film-ready .vslot-frame { aspect-ratio: 4 / 5; } }
@container (max-width: 560px) {
  .film-stage { font-size: clamp(9px, 2.9cqi, 14px); }
  .fs { padding-inline: 5%; }
  .fs[data-rail] { padding-top: 4.4em; }
  .fs-h { font-size: 1.75em; }
  .fs-h-xl { font-size: 2.4em; }
  .fs-say { font-size: 1em; }
  .fs-two, .fs-stackset { grid-template-columns: minmax(0, 1fr); gap: 1.2em; }
  .fs-side, .film-rail em, .fs-x, .fs-track, .fs-back, .fs-spark, .fs-kpis span:nth-child(n+3), .fs-rows li > i:not(.fs-hl) { display: none; }
  .fs-doors { gap: .8em; }
  .fs-door { padding: 1em; }
  .fs-door b { font-size: 1.2em; }
  .fs-dots { gap: .2em; }
  .fs-steps { grid-template-columns: minmax(0, 1fr); gap: .55em; }
  .fs-steps.is-loop { padding-bottom: 0; }
  .fs-steps li { flex-direction: row; gap: .8em; text-align: start; }
  .fs-n { flex: none; width: 2.2em; height: 2.2em; }
  .fs-steps b { font-size: 1.15em; }
  .fs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-rows li { grid-template-columns: 4.2em minmax(0, 1fr) 3em; gap: .7em; }
  .fs-colset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-colset .fs-arrow, .fs-cards .fs-arrow { display: none; }
  .fs-cards { display: grid; }
  .fs-card { grid-area: 1 / 1; }
  .fs-orbit { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .5em; min-height: 0; }
  .fs-spokes { display: none; }
  .fs-core { position: relative; inset: auto; width: auto; height: auto; flex-basis: 100%; margin-bottom: .4em; text-align: center; }
  .fs-chip2 { position: relative; left: auto !important; top: auto !important; translate: none; }
  .fs-wf { gap: .4em; }
  .fs-wf-col > span { font-size: .7em; }
  .fs-meters li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 2.4em; gap: .7em; }
  .fs-links { grid-template-columns: minmax(0, 1fr) 2.5em minmax(0, 1fr); }
  .fs-tile-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-tile-row strong { font-size: 2em; }
}

/* Scroll effects driven by site.js (ScrollTrigger): a slow parallax on the page
   art, and the "how it works" steps filling their top rule as you read down. */
@media (prefers-reduced-motion: no-preference) {
  .phero-art::before, .home-ring, .vault-bg { translate: 0 var(--py, 0px); }
  html.js .how li { position: relative; }
  html.js .how li::after { content: ""; position: absolute; top: -2px; inset-inline: 0; height: 2px; background: var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
  html.js[dir="rtl"] .how li::after { transform-origin: 100% 50%; }
}

/* ============ Deck blocks: flow, console, observation, alert, figures ============ */
.flow { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 24px; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 20px; border-top: 2px solid var(--color-divider); }
.flow li::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 48px; height: 2px; background: var(--color-accent); }
.flow-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.flow-t { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.flow p { font-size: 14px; line-height: 1.55; color: var(--t-80); }

.console { max-width: 1200px; border: 2px solid var(--color-divider); background: var(--color-surface); }
.console-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 2px solid var(--color-divider);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.console-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .1em; color: var(--color-err); }
.console-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.console .tbl-wrap { padding-inline: 18px; }
.console-t { min-width: 860px; }
.console-t td.console-score { white-space: nowrap; }
.console-score b { display: inline-block; min-width: 2.4ch; margin-inline: 8px 6px; font-variant-numeric: tabular-nums; }
.meter { display: inline-block; vertical-align: middle; width: 60px; height: 6px; background: var(--color-divider); }
.meter i { display: block; width: var(--v); height: 100%; background: currentColor; transform-origin: 0 50%; }
[dir="rtl"] .meter i { transform-origin: 100% 50%; }
.meter-hi, .lvl-hi { color: var(--color-err); }
.meter-md, .lvl-md { color: var(--color-warn); }
.meter-lo, .lvl-lo { color: var(--color-accent-700); }
.lvl { display: inline-block; padding: 2px 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; line-height: 1.4; white-space: nowrap; vertical-align: middle; border: 1px solid currentColor; }
.trend { font-weight: 700; white-space: nowrap; }
.trend-rising { color: var(--color-err); }
.trend-rising::before { content: "▲ "; font-size: .8em; }
.trend-new { color: var(--color-warn); }
.trend-new::before { content: "● "; font-size: .8em; }
.trend-stable::before { content: "▬ "; font-size: .8em; color: var(--t-70); }

.obs { max-width: 900px; border: 2px solid var(--color-divider); border-top: 4px solid var(--color-err); background: var(--color-surface); }
.obs-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--color-divider); }
.obs-k { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-70); }
.obs-t { padding: 20px 24px 6px; font-size: 22px; line-height: 1.2; }
.obs-dl { margin: 0; padding: 0 24px 6px; }
.obs-dl div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--color-divider); }
.obs-dl div:last-child { border-bottom: 0; }
@media (min-width: 640px) { .obs-dl div { grid-template-columns: 140px minmax(0, 1fr); } }
.obs-dl dt { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.obs-dl dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--t-80); }
.obs-foot { padding: 14px 24px; font-size: 13px; color: var(--t-70); border-top: 1px solid var(--color-divider); }

.alert-card {
  display: flex; flex-direction: column; gap: 12px; max-width: 760px; padding: 24px;
  background: var(--color-surface); border: 2px solid var(--color-divider); border-inline-start: 6px solid var(--color-err);
}
.alert-md { border-inline-start-color: var(--color-warn); }
.alert-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.alert-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-err); }
.alert-md .alert-k { color: var(--color-warn); }
.alert-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.alert-score { display: inline-flex; align-items: baseline; gap: 6px; }
.alert-score b { font-family: var(--font-heading); font-size: 34px; line-height: 1; color: var(--color-err); }
.alert-md .alert-score b { color: var(--color-warn); }
.alert-score em { font-style: normal; font-size: 12px; color: var(--t-70); }
.alert-t { font-size: 21px; line-height: 1.25; }
.alert-meta { font-size: 14px; color: var(--t-70); }
.alert-label { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-70); }
.alert-reasons { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); }
.alert-reasons li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; line-height: 1.5; }
.alert-reasons li > span:not(.sqb) { flex: 1; }
.alert-reasons b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.alert-foot { font-size: 13px; color: var(--t-70); }

.figs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.fig { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.fig-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(34px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.03em; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.fig-l { font-size: 15px; line-height: 1.5; color: var(--t-80); }

/* ============ Deck blocks: time mix, maturity, stack, groups, simulator ============ */
.tmix { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.tm-row { display: grid; gap: 6px 20px; align-items: center; }
@media (min-width: 640px) { .tm-row { grid-template-columns: 220px minmax(0, 1fr); } }
.tm-l { font-size: 15px; font-weight: 800; }
.tm-bar { display: flex; height: 40px; background: var(--color-divider); overflow: hidden; }
.tm-bar span { display: flex; align-items: center; width: var(--w); padding: 0 12px; overflow: hidden; font-size: 13px; font-weight: 800; white-space: nowrap; }
.tm-a { color: var(--color-on-fill); background: var(--color-fill); }
.tm-b { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 20%, transparent); }
.tm-key { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; color: var(--t-72); }
.tm-key span { display: inline-flex; align-items: center; gap: 8px; }
.tm-key i { width: 12px; height: 12px; }

/* The five levels as a staircase: each step a little taller than the last. */
.maturity { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end; }
.maturity li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 20px 20px; background: var(--color-surface); }
.maturity li::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; background: var(--color-accent); opacity: calc(.3 + var(--i) * .175); transform-origin: 0 50%; }
.maturity li:last-child { background: var(--color-accent-100); }
@media (min-width: 1040px) { .maturity li { min-height: calc(190px + var(--i) * 40px); } }
.mat-n { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.mat-t { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.maturity p { font-size: 14px; line-height: 1.5; color: var(--t-80); }

.stack { list-style: none; display: flex; flex-direction: column; max-width: 1100px; border-top: 2px solid var(--color-divider); }
.stack li { display: grid; gap: 8px 24px; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
@media (min-width: 840px) { .stack li { grid-template-columns: 56px minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.stack-n { font-family: var(--font-heading); font-weight: 800; font-size: 22px; line-height: 1.1; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.stack-main { display: flex; flex-direction: column; gap: 4px; }
.stack-t { font-family: var(--font-heading); font-size: 19px; line-height: 1.2; }
.stack-main p { font-size: 15px; line-height: 1.55; color: var(--t-80); }
.stack-ex { padding: 10px 14px; font-size: 14px; line-height: 1.5; color: var(--t-80); background: var(--color-surface); border-inline-start: 3px solid var(--color-accent); }
.stack-ex span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.stack-foot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px 24px; max-width: 1100px;
  padding: 18px 20px; background: var(--color-surface); border-top: 2px solid var(--color-accent);
}
.stack-foot-k { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-700); }
.stack-foot div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.5; }
.stack-foot div span { color: var(--t-80); }

.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.group { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--color-surface); border-top: 4px solid var(--color-accent); }
.group-k { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.group ul { list-style: none; display: flex; flex-direction: column; }
.group li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--color-divider); }
.group li b { font-size: 16px; }
.group li span { font-size: 14px; line-height: 1.5; color: var(--t-80); }

/* The 25-sample challenge: 10,000 invoices on a canvas (site.js), the odds beside it. */
.sim { display: grid; gap: 28px; max-width: 1200px; padding: clamp(20px, 3vw, 32px); background: var(--color-surface); border: 2px solid var(--color-divider); }
@media (min-width: 900px) { .sim { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; } }
.sim-board { display: flex; flex-direction: column; gap: 12px; }
.sim-cv { display: block; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1; background: var(--color-bg); border: 1px solid var(--color-divider); }
.sim-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--t-72); }
.sim-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sim-legend i { width: 10px; height: 10px; }
.sim-i-n { background: var(--color-divider); }
.sim-i-s { background: var(--color-text); }
.sim-i-f { background: var(--color-err); }
.sim-side { display: flex; flex-direction: column; gap: 16px; }
.sim-q { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.sim-out { min-height: 3em; font-size: 16px; line-height: 1.5; font-weight: 600; }
.sim-out b { color: var(--color-accent-700); }
.sim-out b.sim-miss { color: var(--color-err); }
.sim-big { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--color-divider); }
.sim-v { font-family: var(--font-heading); font-weight: 800; font-size: clamp(48px, 6vw, 80px); line-height: 1; letter-spacing: -0.03em; color: var(--color-err); }
.sim-l { font-size: 15px; line-height: 1.5; color: var(--t-80); }
/* Without JavaScript there is nothing to run: the odds and the formula carry it. */
html:not(.js) :is(.sim-board, .sim-btns, .sim-out) { display: none; }
html:not(.js) .sim { grid-template-columns: minmax(0, 1fr); }

/* The fraud hunt (home): 1,000 invoices as boxes (site.js draws them), three of them
   fraudulent. The visitor sets a sample size, picks boxes (amber), runs the test.
   Clean boxes are neutral, frauds red, ALTeX Hub's sweep blue, so the light theme's
   red accent never reads as a fraud. 25 boxes a row on a phone, 40 from 600px. */
.hunt { --hunt-hub: color-mix(in srgb, var(--color-save-text) 60%, transparent); display: grid; gap: 28px; padding: clamp(12px, 3vw, 32px); background: var(--color-surface); border: 2px solid var(--color-divider); }
@media (min-width: 1100px) { .hunt { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; gap: 40px; } }
.hunt-k { display: flex; margin-bottom: 18px; }
.hunt-board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hunt-meter { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 14px; font-weight: 600; color: var(--t-80); }
.hunt-meter b { font-family: var(--font-heading); font-size: 22px; font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
.hunt[data-state="pick"] .hunt-meter > span:first-child b { color: var(--color-warn); }
.hunt-meter > span:last-child b { color: var(--color-err); }
.hunt-bar { height: 4px; background: var(--color-divider); overflow: hidden; }
.hunt-bar div { width: 0; height: 100%; background: var(--color-text); transition: width .25s ease; }
.hunt[data-state="pick"] .hunt-bar div { background: var(--color-warn); }
.hunt:is([data-state="run"], [data-state="sweep"], [data-state="all"]) .hunt-bar div { transition: none; }
.hunt:is([data-state="sweep"], [data-state="all"]) .hunt-bar div { background: var(--color-save-text); }
.hunt-stage { position: relative; }
/* No grid gap: each box keeps a clear 1px edge (padding outside the painted
   background), so a click between two boxes still lands on one. */
.hunt-grid { --cols: 25; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: opacity .4s ease; }
@media (min-width: 600px) { .hunt-grid { --cols: 40; } }
.hunt-c { display: block; aspect-ratio: 1; min-width: 0; margin: 0; padding: 1px; border: 0; border-radius: 3px; background: var(--color-divider); background-clip: content-box; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease; }
.hunt-c:focus-visible { position: relative; z-index: 3; outline-offset: 1px; }
.hunt:not([data-state="pick"]) .hunt-c { cursor: default; }
@media (hover: hover) { .hunt[data-state="pick"] .hunt-c:not(.is-pick):hover { background: color-mix(in srgb, var(--color-warn) 55%, transparent); } }
.hunt-c.is-pick { background: var(--color-warn); }
.hunt-c.is-you { background: var(--color-text); }
.hunt-c.is-hub { background: var(--hunt-hub); }
.hunt-c.is-fraud { position: relative; z-index: 2; background: var(--color-err); transform: scale(1.8); box-shadow: 0 0 0 1px var(--color-surface); }
/* A missed sample dims the boxes under its stamp; ALTeX Hub's sweep lights them again. */
.hunt:is([data-result="miss"], [data-result="some"], [data-result="all"]) .hunt-grid { opacity: .55; }
/* The stamp: an auditor's rubber stamp over the boxes. Hover the boxes to see under it. */
.hunt-stamp { --c: var(--color-err); --tf: translate(-50%, -50%) rotate(-8deg); position: absolute; top: 50%; left: 50%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 92%; padding: 10px clamp(14px, 3vw, 28px) 12px; border: 5px double var(--c); border-radius: 8px; color: var(--c); background: color-mix(in srgb, var(--color-surface) 88%, transparent); box-shadow: 0 14px 44px rgb(0 0 0 / .28); text-align: center; transform: var(--tf); pointer-events: none; transition: opacity .25s ease; }
.hunt-stamp[hidden] { display: none; }
.hunt-stamp b { font-family: var(--font-heading); font-size: clamp(22px, 4.2vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.hunt-stamp span { font-size: clamp(11px, 1.3vw, 14px); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.hunt-stamp.is-some { --c: var(--color-warn); }
.hunt-stamp.is-all { --c: var(--color-text); }
/* After the sweep the stamp moves to the corner, so no fraud is under it. */
.hunt-stamp.is-hub { --c: var(--color-save-text); --tf: rotate(-6deg); top: auto; left: auto; bottom: -18px; inset-inline-end: -6px; }
.hunt-stamp.is-hub b { font-size: clamp(18px, 2.6vw, 28px); }
@media (hover: hover) { .hunt-stage:hover .hunt-stamp:not(.is-hub) { opacity: .12; } .hunt-stage:hover .hunt-grid { opacity: 1; } }
.hunt-legend i { border-radius: 2px; }
.hunt-i-n { background: var(--color-divider); }
.hunt-i-p { background: var(--color-warn); }
.hunt-i-y { background: var(--color-text); }
.hunt-i-a { background: var(--hunt-hub); }
.hunt-i-f { background: var(--color-err); }
.hunt-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Sample size: a slider (log scale), an exact number and quick sizes. */
.hunt-size { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--color-divider); background: var(--color-bg); }
.hunt-size-l { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--t-72); }
.hunt-size-row { display: flex; align-items: center; gap: 12px; }
.hunt-range { --fill: 46.7%; flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hunt-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--color-warn) var(--fill), var(--color-divider) 0); }
html[dir="rtl"] .hunt-range::-webkit-slider-runnable-track { background: linear-gradient(to left, var(--color-warn) var(--fill), var(--color-divider) 0); }
.hunt-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; background: var(--color-warn); border: 4px solid var(--color-bg); box-shadow: 0 0 0 2px var(--color-warn); -webkit-appearance: none; appearance: none; transition: transform .15s ease; }
.hunt-range:active::-webkit-slider-thumb { transform: scale(1.2); }
.hunt-range::-moz-range-track { height: 6px; background: var(--color-divider); }
.hunt-range::-moz-range-progress { height: 6px; background: var(--color-warn); }
.hunt-range::-moz-range-thumb { width: 14px; height: 14px; background: var(--color-warn); border: 4px solid var(--color-bg); border-radius: 0; box-shadow: 0 0 0 2px var(--color-warn); }
.hunt-num { width: 7ch; padding: 6px 4px; font: 800 20px/1.2 var(--font-heading); font-variant-numeric: tabular-nums; text-align: center; color: var(--color-text); background: var(--color-surface); border: 2px solid var(--color-divider); border-radius: 0; }
.hunt-num:focus-visible { border-color: var(--color-warn); outline: none; }
.hunt-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.hunt-presets button { min-width: 48px; min-height: 34px; padding: 4px 10px; font: 800 13px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--t-80); background: transparent; border: 1px solid var(--color-divider); cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.hunt-presets button:hover { border-color: var(--color-warn); color: var(--color-text); }
.hunt-presets button[aria-pressed="true"] { color: var(--color-bg); background: var(--color-warn); border-color: var(--color-warn); }
.hunt-size :disabled { opacity: .45; cursor: default; }
.hunt-live { margin: 0; font-size: 13px; font-weight: 600; color: var(--t-80); }
.hunt:not([data-state="pick"]) .hunt-live { display: none; }
.hunt-out { min-height: 4.5em; border-inline-start: 4px solid transparent; transition: background-color .3s ease, border-color .3s ease, padding .3s ease; }
.hunt-out b { color: var(--color-err); }
/* A sample that missed: the result is marked in red, with the odds beneath it. */
.hunt[data-result="miss"] .hunt-out { padding: 12px 14px; border-inline-start-color: var(--color-err); background: color-mix(in srgb, var(--color-err) 13%, transparent); }
.hunt[data-result="some"] .hunt-out { padding: 12px 14px; border-inline-start-color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 12%, transparent); }
.hunt[data-result="hub"] .hunt-out { padding: 12px 14px; border-inline-start-color: var(--color-save-text); background: color-mix(in srgb, var(--color-save-text) 10%, transparent); }
.hunt[data-result="miss"] .hunt-odds { border-top-color: var(--color-err); }
.hunt-odds .sim-v.is-long { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.01em; }
.hunt-more { margin-top: 0; }
/* The odds wait until the sample is done. */
html.js .hunt:is([data-state="pick"], [data-state="run"]) .hunt-odds { display: none; }
html:not(.js) :is(.hunt-board, .hunt-btns, .hunt-out, .hunt-size, .hunt .sim-q) { display: none; }
html:not(.js) .hunt { grid-template-columns: minmax(0, 1fr); }
@media (prefers-reduced-motion: no-preference) {
  .hunt-c.is-pick { animation: hunt-pop .25s ease-out; }
  .hunt-c.is-you { animation: hunt-pop .3s ease-out; }
  .hunt-c.is-fraud { animation: hunt-hit .5s ease-out; }
  .hunt-c.is-fraud.is-missed { animation: hunt-hit .5s ease-out, hunt-ring 1.2s ease-out .5s 3; }
  .hunt-odds { animation: hunt-in .5s ease-out both; }
  .hunt-stamp.is-on { animation: hunt-stamp .5s cubic-bezier(.2, 1.5, .4, 1) backwards; }
  .hunt[data-result="miss"] .hunt-stage { animation: hunt-shake .5s ease-in-out .28s; }
  .hunt[data-result="miss"] .hunt-out { animation: hunt-flash 1.1s ease-out 2; }
  .hunt[data-state="done"] .hunt-go { animation: hunt-go 1.6s ease-out .9s 3; }
}
@keyframes hunt-pop { from { transform: scale(1.8); } }
@keyframes hunt-hit { from { transform: scale(3.4); } }
@keyframes hunt-ring { from { box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 1px var(--color-err); } to { box-shadow: 0 0 0 1px var(--color-surface), 0 0 0 7px transparent; } }
@keyframes hunt-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes hunt-stamp { from { opacity: 0; transform: var(--tf) scale(2.6); } 70% { opacity: 1; } }
@keyframes hunt-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes hunt-flash { from { background: color-mix(in srgb, var(--color-err) 34%, transparent); } }
@keyframes hunt-go { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-fill) 55%, transparent); } to { box-shadow: 0 0 0 14px transparent; } }

/* ============ Icons, hero art and the data boundary ============ */
/* The site's own icons (src/data/icons.mjs): an outline in the accent colour
   with a light tint inside, so each shape stays easy to read. Green on dark,
   red on light, blue on the Save $ door. On /eli5 they are stickers instead. */
.ico { display: block; flex: none; max-width: none; overflow: visible; color: var(--color-accent-700); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ico :is(.f, .h, .i) { fill: currentColor; fill-opacity: .14; }
.ico .g { fill: currentColor; fill-opacity: .3; }
.ico .d { fill: currentColor; stroke: none; }
.ico [class^="ico-"] { transform-box: view-box; }
.door-save .ico { color: var(--color-save-text); }
.ico-kid { color: var(--k-ink, #221c47); }
.ico-kid .f { fill: var(--k1, #fff); fill-opacity: 1; }
.ico-kid .g { fill: var(--k2, #ffd447); fill-opacity: 1; }
.ico-kid .h { fill: var(--k3, #fff); fill-opacity: 1; }
.ico-kid .i { fill: var(--k4, #fff); fill-opacity: 1; }

/* Icon tiles on cards, reasons, steps, doors and pillars. */
:is(.card-ic, .reason-ic, .how-ic, .door-ic, .vault-ic) {
  display: inline-grid; place-items: center; flex: none; position: relative;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
}
.card-ic { width: 56px; height: 56px; }
.card-ic .ico { width: 36px; height: 36px; }
.card-top .card-ic { margin-inline-end: 6px; }
.reason-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reason-ic { width: 60px; height: 60px; }
.reason-ic .ico { width: 40px; height: 40px; }
.how-ic { width: 64px; height: 64px; margin-bottom: 4px; }
.how-ic .ico { width: 42px; height: 42px; }
.door-ic { width: 84px; height: 84px; }
.door-ic .ico { width: 60px; height: 60px; }
.door-save .door-ic { background: linear-gradient(145deg, color-mix(in srgb, var(--color-save) 22%, transparent), color-mix(in srgb, var(--color-save) 5%, transparent)); border-color: color-mix(in srgb, var(--color-save) 45%, transparent); }
.ind-ic { display: grid; place-items: center; }
.ind-ic .ico { width: 28px; height: 28px; transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.ind-list a:hover .ind-ic .ico { transform: scale(1.18) rotate(-8deg); }
.group-i { width: 30px; height: 30px; }
:is(.card, .reason, .how li, .door) .ico { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
:is(.card, .reason, .door):hover .ico, .how li:hover .ico { transform: translateY(-3px) scale(1.08); }

/* The reason that carries the data promise stands out. */
.reason-hl { background: color-mix(in srgb, var(--color-accent) 9%, var(--color-bg)); box-shadow: inset 0 4px 0 var(--color-accent); }
.reason-hl .reason-t { color: var(--color-accent-700); }

/* Page heroes: an icon held in turning rings, over a slow aurora. */
.phero-art { position: relative; overflow: hidden; isolation: isolate; }
.phero-art::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -30% -10% -30% 35%;
  background:
    radial-gradient(38% 42% at 70% 45%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    radial-gradient(30% 34% at 88% 70%, color-mix(in srgb, var(--color-accent-800) 14%, transparent), transparent 70%),
    radial-gradient(26% 30% at 55% 78%, color-mix(in srgb, var(--color-save) 12%, transparent), transparent 70%);
  filter: blur(8px);
}
[dir="rtl"] .phero-art::before { inset: -30% 35% -30% -10%; transform: scaleX(-1); }
.phero-orb { display: none; }
@media (min-width: 1100px) {
  .phero-orb {
    display: grid; place-items: center; position: absolute; z-index: 0; pointer-events: none;
    top: 50%; inset-inline-end: max(var(--gutter), calc((100vw - 1360px) / 2 + var(--gutter)));
    width: 340px; height: 340px; margin-top: -150px;
  }
  .phero-art .phero-in { position: relative; z-index: 1; }
  .phero-art .phero-h1 { max-width: min(18ch, calc(100% - 380px)); }
  .phero-art :is(.phero-sub, .phero-micro) { max-width: min(62ch, calc(100% - 380px)); }
}
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-accent) 40%, transparent); }
.orb-r2 { inset: 46px; border-style: dashed; border-color: color-mix(in srgb, var(--color-text) 26%, transparent); }
.orb-r3 { inset: 92px; border-width: 2px; border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.orb-ring i {
  position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 16px 4px color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.orb-r2 i { width: 8px; height: 8px; top: -4px; margin-left: -4px; background: var(--color-text); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-text) 40%, transparent); }
.orb-r3 i { top: auto; bottom: -5px; width: 10px; height: 10px; background: var(--color-accent-800); }
.orb-core {
  position: relative; display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-accent) 30%, var(--color-surface)), var(--color-surface) 70%);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent) 6%, transparent), 0 24px 60px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.orb-i { width: 84px; height: 84px; }

/* The data boundary: a dark band in both themes, right after the proof bar. */
.vault {
  --color-bg: #08100b; --color-surface: #111a15; --color-text: #eef2ef;
  --color-divider: color-mix(in srgb, #eef2ef 22%, transparent);
  --t-72: color-mix(in srgb, #eef2ef 72%, transparent); --t-80: color-mix(in srgb, #eef2ef 80%, transparent); --t-70: color-mix(in srgb, #eef2ef 70%, transparent);
  color-scheme: dark; position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-bg); color: var(--color-text);
  border-top: 8px solid var(--color-accent); border-bottom: 2px solid var(--color-divider);
}
:root[data-theme="light"] .vault {
  --color-bg: #1b1817; --color-surface: #262221;
  --color-accent-700: #ff7a5e; --color-accent-800: #ffb3a3; --color-accent-400: #ff6a4d; --color-err: #ffb020;
}
.vault-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 78% 45%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 70%),
    radial-gradient(30% 40% at 12% 90%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(90% 90% at 60% 50%, #000 40%, transparent 100%); mask-image: radial-gradient(90% 90% at 60% 50%, #000 40%, transparent 100%);
}
.vault-in { display: grid; gap: 48px 64px; align-items: center; padding-block: clamp(72px, 9vw, 136px); }
@media (min-width: 1000px) { .vault-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.vault-k { display: flex; margin-bottom: 26px; color: var(--color-accent-700); }
.vault-h { margin-inline-start: -0.04em; font-size: clamp(42px, 5.8vw, 88px); line-height: .98; letter-spacing: -0.035em; max-width: 13ch; }
.vault-h .accent { color: var(--color-accent-400); }
.vault-lede { margin-top: 28px; font-size: 19px; line-height: 1.6; max-width: 56ch; color: var(--t-80); }
.vault-pillars { list-style: none; margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 28px; border-top: 1px solid var(--color-divider); }
.vault-pillars li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.vault-pillars b { display: block; font-size: 16px; line-height: 1.3; }
.vault-pillars li span span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--t-72); }
.vault-ic { width: 56px; height: 56px; }
.vault-ic .ico { width: 36px; height: 36px; }
.vault-btns { margin-top: 36px; }
/* On the band the pillars run as a row of tiles under the text and the figure. */
.vault-in > .vault-pillars { grid-column: 1 / -1; margin-top: 0; gap: 12px; border-top: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.vault-in > .vault-pillars li {
  grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 22px; border: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent); transition: border-color .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.vault-in > .vault-pillars li:hover { border-color: var(--color-accent); transform: translateY(-4px); }
.vault-fig { position: relative; }
.vfig { display: block; width: 100%; max-width: 620px; height: auto; margin-inline: auto; overflow: visible; }
.vault-seal {
  position: absolute; top: -2%; inset-inline-end: 4%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
.vault-seal::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--color-accent) 60%, transparent); }
.vault-seal .ico { width: 48px; height: 48px; }
/* The figure's parts. */
.vf-stop { stop-color: var(--color-accent); }
.vf-wall { fill: color-mix(in srgb, var(--color-accent) 6%, transparent); stroke: var(--color-accent); stroke-width: 2.5; stroke-dasharray: 12 8; }
.vf-wall-glow { fill: none; stroke: var(--color-accent); stroke-width: 12; opacity: .16; }
.vf-k { fill: var(--color-accent-700); font: 800 13px var(--font-body); letter-spacing: .14em; }
.vf-ks { fill: var(--t-72); font: 400 12px var(--font-body); }
.vf-node rect { fill: var(--color-surface); stroke: var(--color-divider); stroke-width: 1.5; }
.vf-node text, .vf-team text, .vf-ext text { fill: var(--color-text); font: 700 13px var(--font-body); }
.vf-ext text:not(.vf-ext-s) { font-weight: 800; font-size: 15px; }
.vf-ext .vf-ext-s { font-size: 11px; font-weight: 400; fill: var(--t-72); }
.vf-ext rect { fill: color-mix(in srgb, var(--color-text) 6%, transparent); stroke: var(--t-72); stroke-width: 1.5; stroke-dasharray: 5 4; }
.vf-team rect { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.5; }
.vf-flow { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; }
.vf-flow-in { stroke: var(--color-accent-800); }
.vf-blocked { fill: none; stroke: var(--color-err); stroke-width: 2.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.vf-lock circle { fill: color-mix(in srgb, var(--color-err) 16%, var(--color-bg)); stroke: var(--color-err); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.vf-lock path { stroke: var(--color-err); stroke-width: 3; stroke-linecap: round; }
.vf-lock rect { fill: var(--color-err); }
.vf-hub { fill: var(--color-accent); }
.vf-hub-t { fill: var(--color-on-fill); font: 800 15px var(--font-body); }
.vf-hub-s { fill: color-mix(in srgb, var(--color-on-fill) 78%, transparent); font: 600 12px var(--font-body); }
.vf-pulse { fill: none; stroke: var(--color-accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.vf-pk { fill: var(--color-accent-800); }
.vf-pk-in { fill: #fff; }
.vf-pk-out { fill: var(--color-err); }
.vf-tag { font: 800 12px var(--font-body); letter-spacing: .06em; }
.vf-tag-in { fill: var(--color-accent-800); }
.vf-tag-out { fill: var(--color-err); }
.vf-tag-out2 { fill: var(--t-80); font-weight: 600; letter-spacing: 0; }

/* The same figure as a block on a page (Security, Trust Center). */
.vault-blk { display: grid; gap: 32px 56px; align-items: center; padding: clamp(20px, 3vw, 40px); background: var(--color-surface); border-top: 4px solid var(--color-accent); }
@media (min-width: 1000px) { .vault-blk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.vault-blk .vault-pillars { margin-top: 0; grid-template-columns: minmax(0, 1fr); }


@media (prefers-reduced-motion: no-preference) {
  /* Page heroes come in line by line; the rings turn and the core floats. */
  .phero-in > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .phero-in > :nth-child(2) { animation-delay: .08s; }
  .phero-in > :nth-child(3) { animation-delay: .18s; }
  .phero-in > :nth-child(4) { animation-delay: .3s; }
  .phero-in > :nth-child(5) { animation-delay: .42s; }
  .phero-in > :nth-child(6) { animation-delay: .54s; }
  .phero-art::before { animation: aurora 18s ease-in-out infinite alternate; }
  .phero-orb { animation: orb-in 1.2s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .orb-r1 { animation: spin 26s linear infinite; }
  .orb-r2 { animation: spin 38s linear infinite reverse; }
  .orb-r3 { animation: spin 14s linear infinite; }
  .orb-core { animation: float 7s ease-in-out infinite; }
  .orb-core::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; animation: halo 3.2s ease-out infinite; }

  /* The data boundary: the wall marches, data flows to the hub, the hub
     breathes, and what tries to leave stops at the lock. */
  .vault-bg { animation: aurora 22s ease-in-out infinite alternate; }
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .vault-h .accent { background: linear-gradient(100deg, var(--color-accent-400) 0 38%, #fff 50%, var(--color-accent-400) 62% 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glint 6s ease-in-out 1s infinite; }
  }
  .vf-wall { animation: march 2.4s linear infinite; }
  .vf-wall-glow { animation: breathe 3.6s ease-in-out infinite; }
  .vf-flow { animation: dash 1s linear infinite; }
  .vf-flow-in { animation-duration: 1.4s; }
  .vf-blocked { animation: dash-back 1.2s linear infinite; }
  .vf-pulse { animation: pulsering 2.6s ease-out infinite; }
  .vf-halo { animation: breathe 3.2s ease-in-out infinite; }
  .vf-lock circle { animation: lockbeat 1.8s ease-in-out infinite; }
  .vf-node rect { animation: nodeglow 2.6s ease-in-out calc(var(--i) * .7s) infinite; }
  .vault-seal::before { animation: spin 16s linear infinite; }
  .vault-seal { animation: float 6s ease-in-out infinite; }
  html.js .vault-pillars li.rv { transform: translateX(-24px); }
  html.js[dir="rtl"] .vault-pillars li.rv { transform: translateX(24px); }
  html.js .vault-pillars li.rv.in { transform: none; }
  html.js .vault-fig.rv { transform: scale(.94); }
  html.js .vault-fig.rv.in { transform: none; }

  /* Icons draw themselves in as their block arrives: the outline first, then the tint.
     They redraw on hover, and a few have one moving part (a sweep, a gear, blades). */
  .ico [pathLength] { stroke-dasharray: 1 2; }
  html.js .rv .ico [pathLength] { transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1) calc(var(--rv-d, 0s) + .15s), fill-opacity .6s ease calc(var(--rv-d, 0s) + .8s); }
  html.js .rv .ico .d { transition: opacity .4s ease calc(var(--rv-d, 0s) + .9s); }
  html.js .rv:not(.in) .ico [pathLength] { stroke-dashoffset: 1.02; fill-opacity: 0; }
  html.js .rv:not(.in) .ico .d { opacity: 0; }
  :is(.card, .reason, .door, .how li, .ind-list a, .group, .vault-pillars li, .eli5-card):hover .ico [pathLength] { animation: ico-draw .9s cubic-bezier(.45, 0, .2, 1); }
  .orb-i [pathLength] { animation: ico-draw 1.4s cubic-bezier(.45, 0, .2, 1) .3s both, ico-fill .8s ease 1.2s both; }
  .ico-spin { animation: spin 8s linear infinite; }
  .ico-swing { animation: ico-swing 4s ease-in-out infinite; }
  .ico-beat { animation: ico-beat 1.6s ease-in-out infinite; }
  .ico-blink { animation: ico-blink 2.4s ease-in-out infinite; }
  .door-ic { animation: float 6s ease-in-out infinite; }
  .door-save .door-ic { animation-delay: -3s; }
  .how-ic::after, .reason-hl .reason-ic::after { content: ""; position: absolute; inset: -1px; animation: halo 3s ease-out infinite; }
  .how li:nth-child(2) .how-ic::after { animation-delay: .6s; }
  .how li:nth-child(3) .how-ic::after { animation-delay: 1.2s; }
  .how li:nth-child(4) .how-ic::after { animation-delay: 1.8s; }
  .how li:nth-child(5) .how-ic::after { animation-delay: 2.4s; }

  /* Headings arrive word by word (site.js wraps the words in .w). */
  html.js .wr .w { display: inline-block; opacity: 0; transform: translateY(.5em) rotate(2deg); transition: opacity .6s ease calc(var(--w) * 45ms), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--w) * 45ms); }
  html.js .wr.in .w { opacity: 1; transform: none; }
  html.js .wr .w-one { opacity: 0; transition: opacity .9s ease calc(var(--w) * 45ms); }
  html.js .wr.in .w-one { opacity: 1; }

  /* Cards tilt toward the pointer (site.js sets --rx and --ry); big buttons lean to it. */
  :is(.door, .pcard, .route, .fig, .tcard, .ptile) { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
  :is(.door, .pcard, .route, .fig, .tcard, .ptile).is-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: .12s; }
  .btn.is-mag { transition: translate .3s cubic-bezier(.2, .7, .2, 1); }

  /* Scroll-driven extras where the browser supports them. */
  @supports (animation-timeline: view()) {
    .phero-orb { animation: orb-in 1.2s cubic-bezier(.2, .7, .2, 1) .2s both, drift linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
    .vault-fig .vfig { animation: fig-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ico-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes ico-fill { from { fill-opacity: 0; } }
@keyframes ico-swing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }
@keyframes ico-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } }
@keyframes ico-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4%, 3%, 0) scale(1.08); } 100% { transform: translate3d(3%, -2%, 0) scale(.96); } }
@keyframes orb-in { from { opacity: 0; transform: scale(.7) rotate(-30deg); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 50%, transparent); } 100% { box-shadow: 0 0 0 16px transparent; } }
@keyframes march { to { stroke-dashoffset: -40; } }
@keyframes dash { to { stroke-dashoffset: -20; } }
@keyframes dash-back { to { stroke-dashoffset: 16; } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes pulsering { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes lockbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } }
@keyframes nodeglow { 0%, 60%, 100% { stroke: var(--color-divider); } 20% { stroke: var(--color-accent); } }
@keyframes drift { to { translate: 0 -70px; rotate: 30deg; } }
@keyframes fig-rise { from { transform: translateY(40px) scale(.94); opacity: .4; } }

/* ============ Timeline, startup programmes and voices ============ */
/* The About timeline (page.mjs → timeline). A line runs down the list and
   fills as the page scrolls; site.js sets --tl-p (0 to 1), adds .is-on to each
   milestone the reader has passed and .is-cur to the latest. Without
   JavaScript, or with reduced motion, every milestone shows as passed. */
@property --tl-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }
.tl { --tl-x: 19px; list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
/* The cards wait 56px to one side before they slide in: clip that, or the page scrolls sideways. */
.psec:has(.tl) { overflow-x: clip; }
.tl::before, .tl::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--tl-x); width: 2px; }
.tl::before { background: var(--color-divider); }
.tl::after { background: linear-gradient(var(--color-accent), color-mix(in srgb, var(--color-accent) 60%, transparent)); transform: scaleY(var(--tl-p, 1)); transform-origin: 50% 0; }
.tl-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; row-gap: 10px; padding-bottom: 40px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; position: relative; z-index: 1; width: 18px; height: 18px; background: var(--color-accent); border: 2px solid var(--color-accent); rotate: 45deg; }
.tl-now .tl-dot::after { content: ""; position: absolute; inset: -7px; border: 2px solid var(--color-accent); }
.tl-year {
  --tl-fill: color-mix(in srgb, var(--color-accent) 16%, transparent);
  grid-column: 2; grid-row: 1; font-family: var(--font-heading); font-weight: 800; line-height: .9; letter-spacing: -0.04em;
  font-size: clamp(56px, 12vw, 128px); font-variant-numeric: tabular-nums; color: transparent;
  -webkit-text-stroke: 2px var(--color-accent);
  background: linear-gradient(var(--tl-fill) 0 0) no-repeat 0 100% / 100% 100%; -webkit-background-clip: text; background-clip: text;
}
.tl:not([data-tl-run]) .tl-now .tl-year, .tl-item.is-cur .tl-year { --tl-fill: var(--color-accent); }
.tl-card { grid-column: 2; grid-row: 2; position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.4vw, 30px); background: var(--color-surface); border: 2px solid var(--color-divider); }
.tl-card::before { content: ""; position: absolute; top: -2px; inset-inline: -2px; height: 4px; background: var(--color-accent); transform-origin: 0 50%; }
[dir="rtl"] .tl-card::before { transform-origin: 100% 50%; }
.tl-item.is-cur .tl-card { border-color: var(--color-accent); box-shadow: var(--shadow-lg); }
.tl-top { display: flex; align-items: center; gap: 14px; }
.tl-ic {
  display: inline-grid; place-items: center; flex: none; width: 54px; height: 54px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 16%, transparent), color-mix(in srgb, var(--color-accent) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-accent) 34%, transparent);
}
.tl-ic .ico { width: 36px; height: 36px; }
.tl-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-70); }
.tl-y { color: var(--color-accent-700); }
.tl-live { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; background: var(--color-fill); color: var(--color-on-fill); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.tl-live::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.tl-t { margin: 0; font-size: clamp(20px, 2vw, 26px); line-height: 1.15; letter-spacing: -0.01em; }
.tl-d { margin: 0; font-size: 16px; line-height: 1.55; color: var(--t-80); }
@media (min-width: 900px) {
  .tl { --tl-x: calc(50% - 1px); }
  .tl-item { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); column-gap: 0; align-items: center; padding-bottom: 64px; }
  .tl-dot { grid-column: 2; }
  .tl-year { grid-column: 1; justify-self: end; padding-inline-end: 36px; }
  .tl-card { grid-column: 3; grid-row: 1; }
  .tl-item:nth-child(even) .tl-year { grid-column: 3; justify-self: start; padding-inline: 36px 0; }
  .tl-item:nth-child(even) .tl-card { grid-column: 1; }
  /* A short rule from each card to the line. */
  .tl-card::after { content: ""; position: absolute; top: 50%; inset-inline-end: 100%; width: 32px; height: 2px; background: var(--color-accent); }
  .tl-item:nth-child(even) .tl-card::after { inset-inline: 100% auto; }
}

/* Startup programmes and partners (page.mjs → partners): two rows of names that
   drift in opposite directions, then a tile for each. Under reduced motion the
   first row sits still and wraps, and the second (a copy) is hidden. */
.pmarquee { display: grid; gap: 14px; padding-block: 24px; border-block: 2px solid var(--color-divider); overflow: hidden; }
.pm-track { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 0; }
.pm-item { display: inline-flex; align-items: center; gap: 12px; margin-inline-end: 14px; padding: 12px 20px 12px 14px; background: var(--color-surface); border: 1px solid var(--color-divider); font-family: var(--font-heading); font-weight: 700; font-size: 17px; white-space: nowrap; transition: border-color .3s, color .3s; }
.pm-item[aria-hidden="true"], .pm-row[aria-hidden="true"] { display: none; }
/* A partner's own logo: kept whole on white, as partners ask, and never tilted. */
.pmark-logo { object-fit: contain; box-sizing: content-box; padding: 4px 6px; background: #fff; border: 1px solid var(--color-divider); }
.ptile:hover .pmark.pmark-logo { transform: none; }
.pmark-noted { display: grid; gap: 6px; justify-items: start; }
.ptile-note { font-size: 12px; font-weight: 600; color: var(--t-70); }
.pm-item .pmark, .ptile .pmark { display: block; flex: none; color: var(--color-text); }
.pm-item:hover { border-color: var(--color-accent); }
.pm-item:hover .pmark { color: var(--color-accent); }
.ptiles {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  border-top: 2px solid var(--color-divider); border-inline-start: 2px solid var(--color-divider);
}
.ptile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 30px; background: var(--color-bg); border-inline-end: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); overflow: hidden; transition: background-color .3s; }
.ptile::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; background: var(--color-accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .ptile::before { transform-origin: 100% 50%; }
.ptile:hover { background-color: var(--color-surface); }
.ptile:hover::before { transform: none; }
.ptile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ptile .pmark { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.ptile:hover .pmark { color: var(--color-accent); transform: rotate(-8deg) scale(1.08); }
.ptile-since { padding: 4px 8px; border: 1px solid var(--color-divider); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--t-70); font-variant-numeric: tabular-nums; }
.ptile-k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); }
.ptile-n { margin: 0; font-size: 21px; line-height: 1.2; }
.ptile-d { margin: 0; font-size: 15px; line-height: 1.55; color: var(--t-80); }

/* Client and partner quotes (page.mjs → testimonials). */
.tgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-flow: dense; }
.tcard { position: relative; margin: 0; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 34px); background: var(--color-surface); border: 2px solid var(--color-divider); overflow: hidden; transition: border-color .3s; }
.tcard[hidden] { display: none; }
.tcard:hover { border-color: var(--color-accent); }
.tq-mark { position: absolute; top: -28px; inset-inline-end: 16px; font-family: var(--font-heading); font-weight: 800; font-size: 170px; line-height: 1; color: color-mix(in srgb, var(--color-accent) 18%, transparent); pointer-events: none; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.tcard:hover .tq-mark { color: color-mix(in srgb, var(--color-accent) 34%, transparent); transform: translateY(8px) rotate(-6deg); }
.tq { margin: 0; position: relative; }
.tq p { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.42; letter-spacing: -0.01em; }
.tres { margin: 0; font-size: 15px; line-height: 1.4; color: var(--t-80); }
.tres b { display: inline-block; margin-inline-end: 4px; font-family: var(--font-heading); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-accent-700); }
.tcap { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tav { display: grid; place-items: center; flex: none; width: 46px; height: 46px; background: var(--color-fill); color: var(--color-on-fill); font-family: var(--font-heading); font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.tcard[data-from="partner"] .tav { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); }
.twho { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.35; }
.twho b { font-size: 15px; }
.twho span { color: var(--t-70); }
.tmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 16px; border-top: 1px solid var(--color-divider); font-size: 13px; }
.tmeta-p { font-weight: 700; color: var(--color-text); text-decoration: none; }
a.tmeta-p:hover { color: var(--color-accent); }
.tmeta-f { margin-inline-start: auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--t-70); }
.tcard-hl { border-inline-start: 6px solid var(--color-accent); background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)), var(--color-surface) 60%); }
@media (min-width: 760px) {
  .tcard-hl { grid-column: span 2; }
  .tcard-hl .tq p { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Timeline: until a milestone is reached its year is an outline, its dot is
     hollow and its card waits off to the side. */
  .tl-year { transition: --tl-fill .5s ease, background-size 1s cubic-bezier(.2, .7, .2, 1), -webkit-text-stroke-color .5s; }
  .tl-dot { transition: rotate .7s cubic-bezier(.3, 1.6, .5, 1), background-color .4s, border-color .4s, scale .4s; }
  .tl-card { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1), border-color .4s, box-shadow .4s; }
  .tl-card::before { transition: transform .8s cubic-bezier(.2, .7, .2, 1) .25s; }
  html.js .tl-item:not(.is-on) .tl-year { background-size: 100% 0%; -webkit-text-stroke-color: var(--color-divider); }
  html.js .tl-item:not(.is-on) .tl-dot { rotate: -45deg; scale: .8; background: var(--color-bg); border-color: var(--color-divider); }
  html.js .tl-item:not(.is-on) .tl-card { opacity: 0; translate: 0 28px; }
  html.js .tl-item:not(.is-on) .tl-card::before { transform: scaleX(0); }
  html.js .tl-item .tl-ic .ico [pathLength] { transition: stroke-dashoffset 1.1s cubic-bezier(.45, 0, .2, 1) .25s, fill-opacity .6s ease .9s; }
  html.js .tl-item:not(.is-on) .tl-ic .ico [pathLength] { stroke-dashoffset: 1.02; fill-opacity: 0; }
  .tl-item.is-cur .tl-dot { scale: 1.25; }
  .tl-now .tl-dot::after { animation: pulsering 2s ease-out infinite; }
  .tl-live::before { animation: pulse 1.6s ease-in-out infinite; }
  @media (min-width: 900px) {
    html.js .tl-item:not(.is-on) .tl-card { translate: 56px 0; }
    html.js .tl-item:nth-child(even):not(.is-on) .tl-card { translate: -56px 0; }
    html.js[dir="rtl"] .tl-item:not(.is-on) .tl-card { translate: -56px 0; }
    html.js[dir="rtl"] .tl-item:nth-child(even):not(.is-on) .tl-card { translate: 56px 0; }
  }

  /* Startup programmes: the rows drift in opposite directions and stop under the pointer. */
  .pmarquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .pm-track { flex-wrap: nowrap; width: max-content; animation: tick 46s linear infinite; }
  .pm-b .pm-track { animation-duration: 54s; animation-direction: reverse; }
  [dir="rtl"] .pm-track { animation-name: tick-rtl; }
  .pm-item[aria-hidden="true"] { display: inline-flex; }
  .pm-row[aria-hidden="true"] { display: block; }
  .pmarquee:hover .pm-track, .pmarquee:focus-within .pm-track { animation-play-state: paused; }
  .pm-item .pmark { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
  .pm-item:hover .pmark { transform: rotate(-10deg) scale(1.12); }

  /* Quotes: the cards a filter brings back fade up into place. */
  .tcard.is-back { animation: vt-in .5s cubic-bezier(.2, .7, .2, 1) calc(var(--k, 0) * 60ms) both; }
}

@media print {
  .pm-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .pm-item[aria-hidden="true"], .pm-row[aria-hidden="true"] { display: none !important; }
  .tl-card { opacity: 1 !important; translate: none !important; }
  .tl-year { background-size: 100% 100% !important; }
}

/* ============ Responsive ============ */
@media (min-width: 720px) {
  .kv-row { grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr); }
}
@media (max-width: 719px) {
  .plist-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .plist-d { grid-column: 1 / -1; }
  .plist-arrow { display: none; }
  .modal-step { padding: 12px 14px; }
  .modal-head, .modal-form, .modal-slots, .modal-done { padding-inline-start: 20px; padding-inline-end: 20px; }
  .calc-in, .calc-out { padding: 24px 20px; }
  .door-row { grid-template-columns: 96px 1fr; }
  .split-labels { font-size: 12px; }
}
@media (min-width: 760px) {
  .utility-nav { display: flex; }
  .hdr-demo { display: inline-flex; }
}
@media (max-width: 519px) {
  .hdr-find { display: none; }
  .btn-xl, .btn-hero, .btn-blk, .btn-ink, .btn-outline-ink, .modal-submit, .slots-confirm { width: 100%; min-width: 0; }
  .site-search .btn { padding-inline: 14px; }
  .lib-search { max-width: none; margin-inline-start: 0; flex-basis: 100%; }
  .currency-label { display: none; }
  .utility-in { justify-content: center; }
  .calc-in, .calc-out { padding: 20px; }
}
@media (min-width: 1240px) {
  .main-nav { display: flex; }
  .hamburger, .mobile-menu { display: none !important; }
}
@media (max-width: 1239px) {
  .menu-panel { display: none !important; }
}
@media (max-width: 1000px) {
  .menu-mega { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .utility, .site-header, .site-footer, .band, .final-cta, .memo, .ticker, .hero-fx, .post-aside, .post-nav, .phero-orb, .vault-bg { display: none; }
  .wr .w, .wr .w-one { opacity: 1 !important; transform: none !important; }
  .rv { opacity: 1 !important; transform: none !important; }
  .post-grid { display: block; }
  body { background: #fff; color: #000; }
}

/* ============ Languages ============ */
/* Arrows that point along the reading direction turn round in Arabic. */
[dir="rtl"] .i-dir { transform: scaleX(-1); }
/* Archivo has no Arabic or Japanese letters: Latin words keep it, the rest falls through
   to the system fonts. Tracking is for Latin capitals only. */
:root:lang(ar) {
  --font-heading: "Archivo", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
  --font-body: "Archivo", "Segoe UI", "Geeza Pro", "Noto Sans Arabic", Tahoma, system-ui, sans-serif;
}
:root:lang(ja) {
  --font-heading: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Archivo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, "Noto Sans JP", system-ui, sans-serif;
}
:lang(ar) *, :lang(ja) * { letter-spacing: 0 !important; }
:root:lang(ar) body { line-height: 1.7; }
:root:lang(ar) :is(h1, h2, h3, h4, legend, blockquote, .stat-v, .glance-v, .cosaas-big, .calc-big, .roi-pick-v, .roi-kpi-v, .final-p, .band-sub, .footer-line, .pcard-line, .menu-feature-title, .modal-title) { line-height: 1.35; }
:root:lang(ja) :is(h1, h2, h3, h4, legend, blockquote, .stat-v, .glance-v, .cosaas-big, .calc-big, .roi-pick-v, .roi-kpi-v, .final-p, .band-sub, .footer-line, .pcard-line, .menu-feature-title, .modal-title) { line-height: 1.3; word-break: auto-phrase; }
/* Legal pages stay in English: a note says so above the text. */
.legal-lang { max-width: 900px; padding: 14px 18px; border-inline-start: 4px solid var(--color-accent); background: var(--color-surface); font-weight: 600; }

/* ============ Events (/company/events) ============ */
/* community.mjs writes the shell, site.js fills it from api/events.php. A month calendar
   (sticky on wide screens) beside what is coming up; past events below with their photos;
   a full-screen photo viewer. */
.evs { border-bottom: 2px solid var(--color-divider); }
.evs-in { padding-block: clamp(40px, 6vw, 80px); display: flex; flex-direction: column; gap: clamp(48px, 6vw, 80px); }
.evs-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
@media (min-width: 960px) {
  .evs-top { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 56px; }
}
@media (min-width: 960px) and (min-height: 640px) {
  .cal { position: sticky; top: calc(var(--hdr-h) + 24px); }
}

.cal { padding: 20px; background: var(--color-surface); border-top: 4px solid var(--color-accent); overflow: hidden; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-h { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; }
.cal-nav { display: flex; gap: 4px; flex: none; }
.cal-btn, .cal-today {
  display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; color: var(--color-text);
  background: transparent; border: 1px solid var(--color-divider); border-radius: 0;
}
.cal-btn { padding: 0; }
.cal-btn:hover, .cal-today:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.cal-chev { display: grid; transform: rotate(90deg); }
.cal-btn-next .cal-chev { transform: rotate(-90deg); }
[dir="rtl"] .cal-chev { transform: rotate(-90deg); }
[dir="rtl"] .cal-btn-next .cal-chev { transform: rotate(90deg); }
.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-dow { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--t-70); }
.cal-d {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; min-width: 0; padding: 0;
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--color-text);
  background: transparent; border: 0; border-radius: 0;
}
.cal-d.is-blank { visibility: hidden; }
.cal-d.is-gone { color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.cal-d.is-today { box-shadow: inset 0 0 0 2px var(--color-accent); font-weight: 800; }
.cal-d.has-ev { cursor: pointer; font-weight: 800; background: color-mix(in srgb, var(--color-accent) 18%, transparent); transition: background .2s, color .2s; }
.cal-d.has-ev.is-gone { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.cal-d.has-ev:hover { background: color-mix(in srgb, var(--color-accent) 34%, transparent); }
.cal-d.is-picked, .cal-d.is-picked:hover { background: var(--color-fill); color: var(--color-on-fill); }
.cal-dots { position: absolute; inset-inline: 0; bottom: 14%; display: flex; justify-content: center; gap: 3px; }
.cal-dots i { width: 5px; height: 5px; background: var(--color-accent); }
.cal-dots i.is-past { background: var(--color-neutral-500); }
.cal-d.is-picked .cal-dots i { background: currentColor; }
.cal-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 12px; color: var(--t-70); }
.cal-key-i { width: 12px; height: 12px; flex: none; }
.cal-key-i.is-ev { background: color-mix(in srgb, var(--color-accent) 34%, transparent); }
.cal-key-i.is-today { box-shadow: inset 0 0 0 2px var(--color-accent); margin-inline-start: 8px; }

.evs-next { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.evs-list { display: flex; flex-direction: column; gap: 18px; }
.evs-list:empty { display: none; }
.evs-wait { padding: 20px 0; color: var(--t-70); }
.evs-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px; border: 2px dashed var(--color-divider); }
.evs-empty[hidden] { display: none; }
.evs-empty-i { color: var(--color-accent); margin-bottom: 4px; }
.evs-empty-h { font-family: var(--font-heading); font-size: 20px; font-weight: 800; line-height: 1.25; }
.evs-past { display: flex; flex-direction: column; gap: 18px; scroll-margin-top: 90px; }
.evs-past[hidden] { display: none; }
.evs-past-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; align-items: start; }

/* An event */
.evc { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--color-surface); border-top: 2px solid var(--color-divider); scroll-margin-top: 100px; transition: border-color .2s; }
.evc:hover { border-top-color: var(--color-accent); }
.evc-in { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px; }
.evc-date { display: flex; flex-direction: column; align-items: center; padding: 8px 0 7px; border: 2px solid var(--color-accent); line-height: 1.05; text-align: center; align-self: start; }
.evc.is-past .evc-date { border-color: var(--color-divider); }
.evc-mon { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); }
.evc.is-past .evc-mon { color: var(--t-70); }
.evc-day { font-family: var(--font-heading); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.evc-yr { font-size: 11px; color: var(--t-70); }
.evc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.evc-kind { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); }
.evc-h { font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.evc-when { font-size: 14px; font-weight: 700; }
.evc-where { font-size: 14px; color: var(--t-80); }
.evc-sum { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--t-80); white-space: pre-line; overflow-wrap: anywhere; }
.evc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.evc-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--color-neutral-200); border: 0; border-radius: 0; }
.evs-list .evc-cover { aspect-ratio: 21 / 9; }
.evc-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.evc-cover:hover .evc-cover-img { transform: scale(1.05); }
.evc-count { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 5px 9px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(10, 12, 11, .72); }
.evc-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.evc-th { position: relative; width: 60px; height: 60px; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--color-neutral-200); border: 1px solid var(--color-divider); border-radius: 0; }
.evc-th-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.evc-th:hover .evc-th-img { transform: scale(1.1); }
.evc-th:hover { border-color: var(--color-accent); }
.evc-more { display: grid; place-items: center; font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.evc.is-flash { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (max-width: 520px) {
  .evc-in { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .evc-day { font-size: 23px; }
  .evc-h { font-size: 19px; }
  .evc-acts .btn { flex: 1 1 auto; justify-content: center; }
}

/* The photo viewer: dark in both themes, like any photo app. */
html.lbx-on { overflow: hidden; }
.lbx {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  color: #f2f4f3; background: rgba(6, 8, 7, .96); border: 0; overflow: hidden;
}
.lbx::backdrop { background: rgba(0, 0, 0, .6); }
.lbx-fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; margin: 0; }
.lbx-stage { display: grid; place-items: center; min-height: 0; padding: 64px clamp(12px, 7vw, 84px) 8px; touch-action: pan-y; }
.lbx-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform: scale(.985); transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1); user-select: none; -webkit-user-drag: none; }
.lbx-img.is-in { opacity: 1; transform: none; }
.lbx-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 12px clamp(16px, 7vw, 84px) 22px; font-size: 14px; line-height: 1.45; }
.lbx-t { min-width: 0; overflow-wrap: anywhere; }
.lbx-n { flex: none; color: rgba(242, 244, 243, .7); font-variant-numeric: tabular-nums; }
.lbx-b {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; cursor: pointer;
  color: #f2f4f3; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); border-radius: 0;
  transition: background .2s, border-color .2s;
}
.lbx-b:hover { background: var(--color-fill); border-color: var(--color-fill); color: var(--color-on-fill); }
.lbx-b[hidden] { display: none; }
.lbx-x { top: 12px; inset-inline-end: 12px; }
.lbx-prev, .lbx-next { top: 50%; margin-top: -40px; }
.lbx-prev { inset-inline-start: 12px; }
.lbx-next { inset-inline-end: 12px; }
.lbx-prev span, .lbx-next span { display: grid; }
.lbx-prev span { transform: rotate(90deg); }
.lbx-next span { transform: rotate(-90deg); }
[dir="rtl"] .lbx-prev span { transform: rotate(-90deg); }
[dir="rtl"] .lbx-next span { transform: rotate(90deg); }
@media (max-width: 640px) {
  .lbx-stage { padding-inline: 8px; }
  .lbx-prev, .lbx-next { top: auto; bottom: 14px; margin: 0; width: 44px; height: 44px; }
  .lbx-cap { padding-inline: 16px; padding-bottom: 72px; }
}

/* ============ Alumni (/company/alumni) ============ */
.alum { border-bottom: 2px solid var(--color-divider); }
.alum-in { padding-block: clamp(40px, 6vw, 80px); }
.alum-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
.alum-grid[hidden] { display: none; }
@media (min-width: 960px) {
  .alum-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 580px); gap: 64px; }
}
.alum-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.alum-side .sec-label + * { margin-top: -6px; }
.al-perks, .al-steps { list-style: none; margin: 0; padding: 0; }
.al-perks { display: grid; gap: 20px; margin-bottom: 14px; }
.al-perks li { display: flex; gap: 16px; align-items: flex-start; }
.al-perk-i { display: grid; place-items: center; width: 52px; height: 52px; flex: none; color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.al-perks li:hover .al-perk-i { transform: rotate(-6deg) scale(1.06); }
.al-perks b { display: block; font-family: var(--font-heading); font-size: 17px; line-height: 1.3; }
.al-perks li > span:last-child > span { display: block; margin-top: 2px; font-size: 15px; color: var(--t-80); }
.al-steps { border-top: 2px solid var(--color-divider); }
.al-steps li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--color-divider); font-size: 15px; line-height: 1.5; }
.al-step-n { flex: none; min-width: 2.2ch; font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }

.al-card { min-width: 0; background: var(--color-surface); border-top: 4px solid var(--color-accent); scroll-margin-top: 90px; }
.al-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--color-divider); }
.al-tab {
  position: relative; padding: 16px 12px; cursor: pointer;
  font-family: var(--font-heading); font-size: 15px; font-weight: 800; color: var(--t-70);
  background: transparent; border: 0; border-radius: 0;
}
.al-tab::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 3px; background: var(--color-accent); transform: scaleX(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.al-tab:hover { color: var(--color-text); }
.al-tab[aria-selected="true"] { color: var(--color-text); }
.al-tab[aria-selected="true"]::after { transform: none; }
.al-tab:focus-visible { outline-offset: -4px; }
.al-panel { padding: clamp(20px, 3vw, 32px); }
.al-panel[hidden] { display: none; }
.al-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.al-form[hidden] { display: none; }
@media (max-width: 560px) { .al-form { grid-template-columns: minmax(0, 1fr); } }
.al-form .field { min-width: 0; }
.al-form .field > label { font-size: 13px; color: var(--t-80); }
.al-form .field > label small { font-size: 12px; color: var(--t-70); }
.al-form .input { min-height: 44px; font-size: 15px; }
.al-form textarea.input { min-height: 84px; }
.al-form .consent { margin-top: 2px; }
.al-form .field-err[hidden] { display: none; }
.al-form [aria-busy="true"] { cursor: progress; opacity: .7; }
.al-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 4px; }
.field-hint { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--t-70); }
.pw { position: relative; }
.pw .input { padding-inline-end: 76px; }
.pw-show {
  position: absolute; top: 4px; bottom: 4px; inset-inline-end: 4px; padding: 0 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-700); background: transparent; border: 0; border-radius: 0;
}
.pw-show:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.al-done { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 8px 0; outline: 0; }
.al-done[hidden] { display: none; }
.al-done-i { color: var(--color-accent); }
.al-done-h { font-size: 24px; line-height: 1.2; }
.al-done p { color: var(--t-80); }
.al-noscript { padding: 0 clamp(20px, 3vw, 32px) 24px; font-size: 14px; }

/* Signed in: the alumni area */
.al-home { display: flex; flex-direction: column; gap: 22px; padding: clamp(22px, 3vw, 36px); background: var(--color-surface); border-top: 4px solid var(--color-accent); outline: 0; }
.al-home[hidden] { display: none; }
.al-home-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; }
.al-badge { display: grid; place-items: center; width: 68px; height: 68px; flex: none; color: var(--color-on-fill); background: var(--color-fill); }
.al-home-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.al-home-h { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em; }
.al-home-sub { color: var(--t-80); }
.al-home-sub:empty { display: none; }
.al-home-note { font-size: 15px; color: var(--t-80); }
.al-soon { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.al-soon-c { display: flex; min-width: 0; }
.al-soon-a { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 22px; color: var(--color-text); background: var(--color-bg); text-decoration: none; transition: background .2s; }
a.al-soon-a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); }
.al-soon-i { color: var(--color-accent); }
.al-soon-t { font-family: var(--font-heading); font-size: 17px; line-height: 1.3; }
.al-soon-s { font-size: 14px; line-height: 1.5; color: var(--t-80); }
.al-soon-tag { align-self: flex-start; margin-top: auto; padding: 4px 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--t-70); border: 1px dashed var(--color-divider); }
.al-soon-tag.is-live { color: var(--color-accent-700); border: 1px solid var(--color-accent); }

@media (prefers-reduced-motion: no-preference) {
  html.js .evs-wait { animation: pulse 1.4s ease-in-out infinite; }
  .evs.is-ready .evc { animation: evc-in .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 80ms) both; }
  .evc.is-flash { animation: ev-flash 1.2s ease-out 2; }
  .cal-grid.slide-next { animation: cal-from-end .38s cubic-bezier(.2, .7, .2, 1); }
  .cal-grid.slide-prev { animation: cal-from-start .38s cubic-bezier(.2, .7, .2, 1); }
  [dir="rtl"] .cal-grid.slide-next { animation-name: cal-from-start; }
  [dir="rtl"] .cal-grid.slide-prev { animation-name: cal-from-end; }
  .cal-d.has-ev:not(.is-gone) .cal-dots i { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
  .lbx[open] { animation: lbx-in .25s ease-out; }
  .alum.is-in .al-home { animation: evc-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .alum.is-in .al-soon-c { animation: evc-in .6s cubic-bezier(.2, .7, .2, 1) both; }
  .alum.is-in .al-soon-c:nth-child(2) { animation-delay: 80ms; }
  .alum.is-in .al-soon-c:nth-child(3) { animation-delay: 160ms; }
  .alum.is-in .al-soon-c:nth-child(4) { animation-delay: 240ms; }
  .al-panel:not([hidden]) { animation: vt-in .35s cubic-bezier(.2, .7, .2, 1); }
  .al-done:not([hidden]) .al-done-i { animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) .1s both; }
  .al-badge { animation: bob 3.6s ease-in-out infinite; }
}
@keyframes evc-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes ev-flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes cal-from-end { from { opacity: 0; transform: translateX(22px); } }
@keyframes cal-from-start { from { opacity: 0; transform: translateX(-22px); } }
@keyframes lbx-in { from { opacity: 0; } }