/* Monnai prototype — components
   Every page is assembled from these. New component → add it here and to system/components.html first.
   Deliberately absent: three-card row, icon grid, stat tiles, testimonial carousel, gradient hero, logo marquee. */

/* ============ Buttons and links ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-pill); border: var(--stroke-diagram) solid transparent;
  font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn--sm { min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-small); }
.btn--primary { background: var(--c-accent); color: var(--c-on-accent); }
.btn--primary:hover { background: var(--c-accent-ink); color: var(--c-on-accent); text-decoration: none; }
.btn--secondary { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--secondary:hover { background: var(--c-ink); color: var(--c-ground); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.link-text {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--c-ink); font-weight: var(--fw-bold); text-decoration: underline;
  text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.link-text:hover { color: var(--c-accent); }
.link-button { background: none; border: 0; padding: 0; color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.2em; min-height: 44px; }

/* ============ Review mode: gap markers and visual placeholders ============ */
.gap {
  display: inline; margin-left: 0.25em; padding: 0.05em 0.45em;
  background: var(--c-gap-bg); color: var(--c-gap-ink);
  border: 1px dashed var(--c-gap-line); border-radius: var(--r-1);
  font-family: var(--font-sans); font-size: 0.78em; font-weight: var(--fw-medium);
  letter-spacing: 0; line-height: 1.4; white-space: normal; vertical-align: 0.05em;
}
.gap::before { content: attr(data-gap) " \00b7 "; font-weight: var(--fw-heavy); }
.gap--block { display: block; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); }
.review-off .gap { display: none; }

.visual-ph {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; background: var(--c-panel); border: 1px solid var(--c-line); border-radius: var(--r-3);
  color: var(--c-muted); text-align: center; padding: var(--s-5);
}
.visual-ph__label { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.visual-ph__meta { font-size: var(--fs-small); max-width: 36ch; }
.visual-ph--16x9 { aspect-ratio: 16 / 9; }
.visual-ph--4x3 { aspect-ratio: 4 / 3; }
.visual-ph--1x1 { aspect-ratio: 1 / 1; }

.review-toggle {
  position: fixed; left: calc(var(--s-4) + env(safe-area-inset-left, 0px)); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-review);
  min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  background: var(--c-ground); color: var(--c-ink-2); border: 1px solid var(--c-line-strong);
  font-size: var(--fs-small); font-weight: var(--fw-medium); box-shadow: var(--shadow-float);
}
.review-toggle[aria-pressed="true"] { background: var(--c-gap-bg); color: var(--c-gap-ink); border-color: var(--c-gap-line); }

/* ============ Header and mega-menu ============ */
/* The header stays on screen while you scroll (Eva, 26 Oct). Fixed rather than sticky, so no wrapper
   or overflow rule in a host page can make it scroll away. The page reserves its height (--hdr-h,
   kept equal to the real bar height by site.js), and in-page links land below it. */
:root { --hdr-h: 73px; }
html { scroll-padding-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + var(--s-4)); }
[data-page] { padding-top: var(--hdr-h); }
.site-header { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: var(--z-header); background: var(--c-ground); border-bottom: 1px solid var(--c-line); }
/* Phones with a notch (hosted preview): paint the strip above the fixed header. Zero height elsewhere. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--z-header); background: var(--c-ground); }
.site-header__bar { display: flex; align-items: center; gap: var(--s-5); min-height: 72px; }
.site-header__brand { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; }
.logo-word { font-size: 1.625rem; font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1; }
.logo:hover { color: var(--c-ink); }
.site-nav { flex: 1 1 auto; }
.nav-list { list-style: none; display: flex; gap: var(--s-1); justify-content: center; }
.nav-top { position: static; }
.nav-trigger {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3);
  background: none; border: 0; border-radius: var(--r-2);
  color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none;
}
.nav-trigger:hover, .nav-top.is-open > .nav-trigger { background: var(--c-panel); color: var(--c-ink); text-decoration: none; }
.nav-top.is-current > .nav-trigger { box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 0; }
.nav-caret { transition: transform var(--dur-1) var(--ease); }
.nav-top.is-open .nav-caret { transform: rotate(180deg); }
.site-header__actions { display: flex; align-items: center; gap: var(--s-3); flex: 0 0 auto; }

.mm-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
  background: var(--c-ground); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  box-shadow: var(--shadow-float);
}
.mm-inner { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-7); grid-template-columns: 1.35fr 1fr 1fr; }
.mm-inner--industries { grid-template-columns: 2fr 1fr; }
.mm-inner--company { grid-template-columns: minmax(0, 360px); }
.mm-title { margin: 0 0 var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.mm-group ul { list-style: none; display: grid; gap: var(--s-1); }
.mm-group--wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
.mm-link {
  display: block; padding: var(--s-3); margin-inline: calc(-1 * var(--s-3));
  border-radius: var(--r-2); color: var(--c-ink); text-decoration: none;
}
.mm-link:hover, .mm-link:focus-visible { background: var(--c-panel); color: var(--c-ink); }
.mm-link[aria-current="page"] .mm-label { color: var(--c-accent); }
.mm-label { display: block; font-weight: var(--fw-bold); line-height: 1.3; }
.mm-group--primary .mm-label { font-size: var(--fs-h4); }
.mm-line { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-muted); line-height: 1.45; }
.mm-note { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); margin-left: var(--s-1); }

.nav-burger {
  display: none; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3);
  background: none; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); color: var(--c-ink);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
}
.nav-burger__box { display: grid; gap: 5px; width: 16px; }
.nav-burger__box span { display: block; height: 1.5px; background: currentColor; }
.mobile-menu { border-top: 1px solid var(--c-line); background: var(--c-ground); max-height: calc(100vh - var(--hdr-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; padding-block: var(--s-5) var(--s-8); }
/* A tall mega-menu scrolls inside itself, since the header no longer scrolls away. */
.mm-panel { max-height: calc(100vh - var(--hdr-h) - env(safe-area-inset-top, 0px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
@supports (height: 100dvh) {
  .mobile-menu, .mm-panel { max-height: calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px)); }
}
.mob-pinned { list-style: none; display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.mob-pinned .mm-label { font-size: var(--fs-h4); }
.mob-sections { list-style: none; }
.mob-sec { border-bottom: 1px solid var(--c-line); }
.mob-trigger, .mob-direct {
  display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 56px;
  background: none; border: 0; padding: 0; color: var(--c-ink); font-size: var(--fs-body); font-weight: var(--fw-bold); text-decoration: none; text-align: left;
}
.mob-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.mob-list { list-style: none; padding-bottom: var(--s-4); }
.menu-open body { overflow: hidden; }

@media (max-width: 1100px) {
  .site-nav { display: none; }
  .nav-burger { display: inline-flex; }
  .site-header__actions { margin-left: auto; }
}
@media (min-width: 1101px) { .mobile-menu { display: none !important; } }
@media (max-width: 420px) {
  .site-header__actions .btn { padding: 0 var(--s-3); }
  .nav-burger__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============ Footer ============ */
.site-footer { background: var(--c-ink); color: var(--c-on-ink); padding-block: var(--s-8) var(--s-9); margin-top: 0; }
.site-footer a { color: var(--c-ground); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--c-ground); }
.site-footer .btn--primary { color: var(--c-on-accent); }
.site-footer .btn--primary:hover { text-decoration: none; }
.site-footer :focus-visible { outline-color: var(--c-ground); }
.ft-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--s-8); }
.ft-brand { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.ft-brand .logo, .ft-brand .logo:hover { color: var(--c-ground); }
.ft-def { color: var(--c-on-ink-muted); font-size: var(--fs-small); max-width: 34ch; }
.ft-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-5); }
.ft-title { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-on-ink-muted); margin-bottom: var(--s-3); letter-spacing: 0; }
.ft-col ul { list-style: none; display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.ft-col a { display: inline-block; padding-block: 2px; }
.ft-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--c-ink-line); font-size: var(--fs-small); }
.ft-proto { color: var(--c-on-ink-muted); }
.ft-legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); }
.review-inline { margin-left: auto; min-height: 44px; padding: 0 var(--s-4); background: transparent; color: var(--c-ground); border: 1px solid var(--c-ink-line-strong); border-radius: var(--r-pill); font-size: var(--fs-small); }
@media (max-width: 1100px) { .ft-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .ft-top { grid-template-columns: 1fr; gap: var(--s-7); }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-inline { margin-left: 0; }
}

/* ============ Hero with diagram ============ */
.hero { padding-block: var(--s-8) var(--section-y); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s-8); align-items: center; }
.hero h1 { font-size: var(--fs-display); max-width: 14ch; }
.hero__sub { margin-top: var(--s-5); max-width: 52ch; }
.hero__paths { display: grid; gap: var(--s-1); margin-top: var(--s-5); list-style: none; }
.hero__paths a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-lead); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.hero__paths a:hover { color: var(--c-accent); }
.hero .btn-row { margin-top: var(--s-6); }
@media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ============ Shared diagram language ============
   Same line weight, node style, label style and accent rule everywhere. */
.dgm { --node-stroke: var(--c-line-strong); color: var(--c-ink); }
.dgm svg { width: 100%; height: auto; overflow: visible; }
.band__svg-wrap svg { max-width: 860px; }
.graph svg { max-width: 860px; margin-inline: auto; }
.inset svg { max-width: 760px; }
.dgm text { font-family: var(--font-sans); fill: var(--c-ink); }
.dgm .t-label { font-size: 13px; font-weight: 500; fill: var(--c-ink-2); }
.dgm .t-value { font-family: var(--font-mono); font-size: 12.5px; fill: var(--c-ink); }
.dgm .t-muted { font-size: 12px; fill: var(--c-muted); }
.dgm .t-strong { font-size: 14px; font-weight: 600; fill: var(--c-ink); }
.dgm .node { fill: var(--c-ground); stroke: var(--node-stroke); stroke-width: 1.5; }
.dgm .node--soft { fill: var(--c-panel); stroke: var(--c-line); }
.dgm .node--accent { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 2; }
.dgm .edge { fill: none; stroke: var(--node-stroke); stroke-width: 1.5; }
.dgm .edge--accent { stroke: var(--c-accent); stroke-width: 2; }
.dgm .edge--dash { stroke-dasharray: 4 4; }
.dgm .dot-approve { fill: var(--c-status-approve); }
.dgm .dot-review { fill: var(--c-status-review); }
.dgm .dot-decline { fill: var(--c-status-decline); }
.dgm .dot-neutral { fill: var(--c-status-neutral); }
.dgm-caption { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
.dgm-tag { display: inline-block; padding: 2px var(--s-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); }
.dgm-text-eq { margin-top: var(--s-3); }

/* ---- Legibility visual ---- */
.legibility { border: 1px solid var(--c-line); border-radius: var(--r-3); padding: var(--s-5); background: var(--c-ground); }
.legibility__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.seg { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); padding: var(--s-1); background: var(--c-panel); border-radius: var(--r-pill); }
.seg button { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.seg button[aria-pressed="true"] { background: var(--c-ground); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line-strong); }
.legibility__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-5); align-items: stretch; }
.appform { border: 1px solid var(--c-line-strong); border-radius: var(--r-2); padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; background: var(--c-ground); }
.appform__title { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.appform__field { display: grid; gap: 2px; padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line); }
.appform__field:last-child { border-bottom: 0; padding-bottom: 0; }
.appform__k { font-size: var(--fs-micro); color: var(--c-muted); }
.appform__v { font-family: var(--font-mono); font-size: var(--fs-mono); }
.reads { list-style: none; display: grid; gap: var(--s-2); }
.read { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); border-radius: var(--r-2); background: var(--c-panel); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.read.is-in { opacity: 1; transform: none; }
.read__dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; }
.read__dot--good { background: var(--c-status-approve); }
.read__dot--review { background: var(--c-status-review); }
.read__dot--risk { background: var(--c-status-decline); }
.read__k { font-size: var(--fs-micro); color: var(--c-muted); }
.read__v { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.4; }
.read__state { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.legibility__out { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-2); border: 2px solid var(--c-accent); background: var(--c-accent-soft); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
.legibility__out strong { font-size: var(--fs-h4); }
@media (max-width: 640px) { .legibility__grid { grid-template-columns: 1fr; } .legibility { padding: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .read { opacity: 1; transform: none; } }

/* ---- Decision band ---- */
.band { position: relative; }
.band__svg-wrap { position: relative; }
.band-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); font-size: var(--fs-small); }
.band-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.swatch--approve { background: var(--c-status-approve); }
.swatch--review { background: var(--c-status-review); }
.swatch--decline { background: var(--c-status-decline); }
.band__zone { cursor: default; }
.band__zone:focus-visible { outline: none; }
.band__zone:focus-visible rect.zone-hit, .band__zone:hover rect.zone-hit { stroke: var(--c-accent); stroke-width: 2; }
.band__detail { margin-top: var(--s-4); padding: var(--s-4); border-left: 3px solid var(--c-status-review); background: var(--c-panel); border-radius: 0 var(--r-2) var(--r-2) 0; min-height: 88px; }
.band__detail h3 { font-size: var(--fs-h4); margin-bottom: var(--s-1); }

/* ---- Pipeline ---- */
.pipeline { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); counter-reset: step; }
.pipe { position: relative; padding: var(--s-5); border: 1px dashed var(--c-line-strong); border-radius: var(--r-3); background: var(--c-panel); color: var(--c-muted); transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.pipe h3, .pipe p, .pipe .pipe__mini { color: var(--c-muted); }
.pipe.is-on { background: var(--c-ground); border-style: solid; border-color: var(--c-line); color: var(--c-ink); }
.pipe.is-on h3 { color: var(--c-ink); }
.pipe.is-on p, .pipe.is-on .pipe__mini { color: var(--c-ink-2); }
.pipe.is-focus { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }
.pipe__n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--c-ink); font-weight: var(--fw-bold); font-size: var(--fs-small); }
.pipe.is-focus .pipe__n { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); }
.pipe h3 { font-size: var(--fs-h4); margin: var(--s-4) 0 var(--s-2); }
.pipe p { font-size: var(--fs-small); color: var(--c-ink-2); }
.pipe__mini { margin: var(--s-4) 0 0; white-space: pre-wrap; }
.pipe:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--s-5) + 16px); right: calc(-1 * var(--s-4)); width: var(--s-4); height: 1.5px; background: var(--c-line-strong); }
.pipeline-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
@media (max-width: 900px) {
  .pipeline { grid-template-columns: 1fr; }
  .pipe:not(:last-child)::after { top: auto; bottom: calc(-1 * var(--s-4)); left: calc(var(--s-5) + 16px); right: auto; width: 1.5px; height: var(--s-4); }
}


/* ---- Connection graph ---- */
.graph { border: 1px solid var(--c-line); border-radius: var(--r-3); padding: var(--s-5); }
.graph .ring-edge { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.graph.is-connected .ring-edge { opacity: 1; }
.graph .ring-node { transition: stroke var(--dur-2) var(--ease), fill var(--dur-2) var(--ease); }
.graph.is-connected .ring-node { stroke: var(--c-status-decline); stroke-width: 2; }
.graph.is-connected .ring-flag { opacity: 1; }
.graph .ring-flag { opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.graph__controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
@media (prefers-reduced-motion: reduce) { .graph .ring-edge, .graph .ring-flag { transition: none; } }

/* ---- Where-it-sits inset ---- */
.inset { border: 1px solid var(--c-line); border-radius: var(--r-3); padding: var(--s-4) var(--s-5); background: var(--c-ground); }

/* ============ Two-column argument ============ */
.argument { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.argument__head h2 { max-width: 16ch; }
.argument__body { display: grid; gap: var(--s-5); }
.argument__body > p { max-width: var(--w-read); color: var(--c-ink-2); font-size: var(--fs-lead); line-height: 1.55; }
.argument__line { padding-left: var(--s-4); border-left: 3px solid var(--c-accent); font-weight: var(--fw-bold); font-size: var(--fs-h4); }
@media (max-width: 900px) { .argument { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ============ Evidence ledger ============ */
.ledger { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ledger caption { text-align: left; font-size: var(--fs-small); color: var(--c-muted); padding-bottom: var(--s-3); }
.ledger th { text-align: left; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1.5px solid var(--c-ink); }
.ledger td { padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.ledger__customer { font-weight: var(--fw-heavy); font-size: var(--fs-h4); }
.ledger__customer small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-small); color: var(--c-muted); }
.ledger__result { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: -0.01em; }
.ledger__result small { display: block; margin-top: var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-muted); letter-spacing: 0; }
@media (max-width: 768px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: 100%; }
  .ledger tr { padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
  .ledger td { border: 0; padding: var(--s-1) 0; }
  .ledger td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-micro); color: var(--c-muted); }
}

/* ============ Pull-quote ============ */
.pullquote { margin: 0; display: grid; gap: var(--s-5); }
.pullquote blockquote { margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: var(--fw-medium); line-height: 1.28; letter-spacing: -0.015em; text-wrap: balance; }
.pullquote blockquote p::before { content: "\201C"; }
.pullquote blockquote p::after { content: "\201D"; }
.pullquote figcaption { font-size: var(--fs-small); color: var(--c-ink-2); }
.pullquote figcaption strong { display: block; color: var(--c-ink); font-size: var(--fs-body); }

/* ============ Index list (self-selection) ============ */
.index-list { list-style: none; border-top: 1.5px solid var(--c-ink); }
.index-list li { border-bottom: 1px solid var(--c-line); }
.index-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center;
  padding: var(--s-5) 0; color: var(--c-ink); text-decoration: none;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: -0.01em;
}
.index-list a:hover .index-list__go, .index-list a:focus-visible .index-list__go { color: var(--c-accent); text-decoration: underline; text-underline-offset: 0.25em; }
.index-list__go { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); white-space: nowrap; }
@media (max-width: 640px) { .index-list a { grid-template-columns: 1fr; gap: var(--s-2); } }

/* ============ Editor's selection ============ */
.selection { list-style: none; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-5); }
.selection li:first-child { grid-row: span 2; }
.pick { display: grid; align-content: start; gap: var(--s-2); height: 100%; padding: var(--s-5); border: 1px solid var(--c-line); border-radius: var(--r-3); background: var(--c-ground); color: var(--c-ink); text-decoration: none; }
.pick:hover { border-color: var(--c-ink); color: var(--c-ink); }
.pick__type { font-size: var(--fs-small); color: var(--c-muted); }
.pick__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.2; }
.selection li:not(:first-child) .pick__title { font-size: var(--fs-h4); }
.pick__why { color: var(--c-ink-2); font-size: var(--fs-small); }
@media (max-width: 768px) { .selection { grid-template-columns: 1fr; } .selection li:first-child { grid-row: auto; } }

/* ============ FAQ accordion ============ */
.faq { border-top: 1.5px solid var(--c-ink); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__q { margin: 0; font-size: var(--fs-body); }
.faq__btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 64px; padding: var(--s-3) 0; background: none; border: 0; text-align: left;
  font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-ink);
}
.faq__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: currentColor; transition: transform var(--dur-1) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 var(--s-5); max-width: var(--w-read); color: var(--c-ink-2); }

/* "For technical readers" expander */
.tech { border: 1px solid var(--c-line); border-radius: var(--r-2); }
.tech__btn { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 var(--s-4); background: var(--c-panel); border: 0; border-radius: var(--r-2); font-weight: var(--fw-bold); color: var(--c-ink); text-align: left; }
.tech__btn[aria-expanded="true"] { border-radius: var(--r-2) var(--r-2) 0 0; }
.tech__btn[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }
.tech__body { padding: var(--s-4); }
.spec { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.spec th, .spec td { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.spec th { width: 34%; font-weight: var(--fw-bold); }

/* ============ Closing form with "what happens next" ============ */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
.closing h2 { max-width: 18ch; }
.steps { list-style: none; counter-reset: s; display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--c-ink); font-weight: var(--fw-bold); font-size: var(--fs-small); }
.steps strong { display: block; }
.steps span { color: var(--c-ink-2); font-size: var(--fs-small); }
.form { display: grid; gap: var(--s-4); padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-3); background: var(--c-ground); }
.field { display: grid; gap: var(--s-1); }
.field label, .field legend { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.field .hint { font-size: var(--fs-micro); color: var(--c-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: var(--s-2) var(--s-3);
  background: var(--c-ground); border: 1.5px solid var(--c-line-strong); border-radius: var(--r-2); color: var(--c-ink);
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.field.is-invalid .input, .field.is-invalid .select { border-color: var(--c-status-decline); }
.field__error { font-size: var(--fs-small); color: var(--c-error-ink); font-weight: var(--fw-medium); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form__note { font-size: var(--fs-small); color: var(--c-muted); }
.form__done { display: grid; gap: var(--s-3); padding: var(--s-6); border: 2px solid var(--c-accent); border-radius: var(--r-3); background: var(--c-accent-soft); }
@media (max-width: 900px) { .closing { grid-template-columns: 1fr; gap: var(--s-6); } .field-row { grid-template-columns: 1fr; } .form { padding: var(--s-5); } }

/* ============ Trust panel ============ */
.trust { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); padding: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-3); }
.trust dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.trust dt { font-weight: var(--fw-bold); }
.trust dd { margin: var(--s-1) 0 0; color: var(--c-ink-2); font-size: var(--fs-small); }
@media (max-width: 900px) { .trust { grid-template-columns: 1fr; } .trust dl { grid-template-columns: 1fr; } }

/* ============ Coverage matrix ============ */
.matrix-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-3); }
.matrix { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--fs-small); }
.matrix th, .matrix td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--c-line); text-align: center; }
.matrix thead th { font-weight: var(--fw-bold); background: var(--c-panel); }
.matrix tbody th, .matrix thead th:first-child { text-align: left; font-weight: var(--fw-medium); }
.depth { display: inline-flex; gap: 3px; vertical-align: middle; }
.depth i { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid var(--c-accent); }
.depth i.on { background: var(--c-accent); }
.depth--unknown i { border-color: var(--c-line-strong); border-style: dashed; }

/* ============ Calculator controls ============ */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); }
.calc__inputs { display: grid; gap: var(--s-5); }
.calc__inputs > .btn { justify-self: start; }
.presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.presets button { min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: var(--c-ground); font-size: var(--fs-small); font-family: var(--font-mono); }
.presets button[aria-pressed="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); }
.slider-twin { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s-3); align-items: center; }
.range { width: 100%; accent-color: var(--c-accent); min-height: 44px; }
.check { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; font-size: var(--fs-small); }
.check input { width: 20px; height: 20px; accent-color: var(--c-accent); }
.calc__out { padding: var(--s-6); border-radius: var(--r-3); background: var(--c-panel); display: grid; gap: var(--s-4); align-content: start; }
.calc__row { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.calc__k { font-size: var(--fs-small); color: var(--c-muted); }
.calc__v { font-size: var(--fs-h3); font-weight: var(--fw-bold); font-family: var(--font-sans); }
.calc__await { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

/* ============ Proof strip ============ */
.proofstrip { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-4); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding-block: var(--s-5); }
.proofstrip a { display: grid; gap: var(--s-1); justify-items: start; color: var(--c-ink); text-decoration: none; padding: var(--s-2) 0; }
.proofstrip a:hover .proofstrip__name { color: var(--c-accent); }
.proofstrip__name { font-weight: var(--fw-heavy); font-size: var(--fs-h4); letter-spacing: -0.01em; }
.proofstrip__seg { font-size: var(--fs-micro); color: var(--c-muted); }
@media (max-width: 1024px) { .proofstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .proofstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============ next.html ============ */
.next-page { padding-block: var(--s-9); }
.next-kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); margin-bottom: var(--s-3); }
.next-page h1 { max-width: 18ch; }
.next-page .lead { margin-top: var(--s-4); max-width: var(--w-read); }
.next-dl { margin: var(--s-6) 0 0; display: grid; gap: var(--s-4); max-width: var(--w-read); }
.next-dl dt { font-weight: var(--fw-bold); }
.next-dl dd { margin: var(--s-1) 0 0; color: var(--c-ink-2); }
.next-back { margin-top: var(--s-6); }

/* Review-only controls (e.g. calculator demo values) */
.review-off .review-only { display: none !important; }

/* =====================================================================
   HOMEPAGE V2 COMPONENTS — 26 Oct 2026
   Eva: "hyper modern, clear, branded, interactive, popularised, catchy".
   Brand art and accents use the brand book gradient; no gradient section backgrounds.
   ===================================================================== */

/* ---- Shared ---- */
.grad-text { background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; color: var(--c-accent); -webkit-text-fill-color: transparent; }
.on-dark .grad-text { background-image: var(--gradient-text-dark); color: var(--c-brand-yellow); }
@media (forced-colors: active) { .grad-text { -webkit-text-fill-color: currentColor; background: none; } }
.sec-head { display: grid; gap: var(--s-4); max-width: 860px; margin-bottom: var(--s-7); }
.sec-head h2, .display-2 { font-size: var(--fs-display-2); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--fw-heavy); }
.sec-head .lead { max-width: 60ch; }
.on-dark { color: var(--c-on-ink); }
.on-dark .lead { color: var(--c-on-ink-muted); }
.on-dark .link-text { color: var(--c-on-ink); text-decoration-color: var(--g-3); }
.on-dark .link-text:hover { color: var(--c-on-ink); }
.on-dark :focus-visible { outline-color: var(--c-on-ink); }
.btn--light { background: var(--c-on-ink); color: var(--c-ink); }
.btn--light:hover { background: var(--c-line); color: var(--c-ink); text-decoration: none; }
.btn--outline-light { background: transparent; color: var(--c-on-ink); border-color: var(--c-on-ink); }
.btn--outline-light:hover { background: var(--c-on-ink); color: var(--c-ink); text-decoration: none; }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } }
.tag-illus { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-muted); font-size: var(--fs-micro); font-weight: var(--fw-medium); }

/* ---- Hero ---- */
.hx { position: relative; padding-block: var(--s-7) var(--s-9); overflow: hidden; }
.hx__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hx__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 16ch; }
.hx__title > span { display: block; }
.hx__title > span + span { margin-top: 0.08em; }
.hx__sub { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); max-width: 50ch; }
.hx__cta { margin-top: var(--s-6); }

.aud { margin-top: var(--s-6); }
.aud__label { font-size: var(--fs-small); font-weight: var(--fw-bold); margin-bottom: var(--s-3); }
.aud__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line); background: var(--c-ground); color: var(--c-ink);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.chip:hover { border-color: var(--c-ink); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-ink); }
.aud__pitch { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--c-panel); display: grid; gap: var(--s-2); max-width: 580px; position: relative; overflow: hidden; }
.aud__pitch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gradient-brand); }
.aud__headline { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.25; }
.aud__line { color: var(--c-ink-2); font-size: var(--fs-small); }
.aud__proof { font-size: var(--fs-small); color: var(--c-ink); }
.aud__proof strong { font-weight: var(--fw-heavy); }
.aud__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.aud__links .link-text { min-height: 36px; font-size: var(--fs-small); }
.is-swapping { animation: swapIn 460ms var(--ease); }
@keyframes swapIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.hx__stage { position: relative; min-height: 600px; }
.art { position: absolute; top: 0; right: 0; width: min(540px, 92%); aspect-ratio: 1 / 1; }
.art svg { width: 100%; height: 100%; display: block; }
.art .tile { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)); transition: transform 1100ms var(--ease); }
.js .art .tile { animation: tileIn 900ms var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes tileIn { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(0.6); } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .art .tile { transition: none; } .js .art .tile { animation: none; } }

.dcard {
  position: absolute; left: 0; bottom: 0; width: min(390px, 94%);
  background: var(--c-ground); border-radius: 20px; padding: var(--s-5);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--c-line);
  display: grid; gap: var(--s-3);
}
.dcard__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.dcard__context { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.who { display: flex; gap: var(--s-3); align-items: center; }
.avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: var(--fw-heavy); font-size: var(--fs-small); }
.avatar--risk { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.who__name { font-weight: var(--fw-bold); line-height: 1.25; }
.who__tag { font-size: var(--fs-micro); color: var(--c-muted); }
.dcard__sub { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.checks { list-style: none; display: grid; gap: var(--s-2); }
.ck { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: center; font-size: var(--fs-small); line-height: 1.35; }
.ck__icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.ck__icon svg { width: 12px; height: 12px; }
.ck--ok .ck__icon { background: var(--c-accent-soft); color: var(--c-accent); }
.ck--risk .ck__icon { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.ck--warn .ck__icon { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.ck--pending .ck__icon { background: var(--c-panel); border: 1.5px dashed var(--c-line-strong); }
.ck--pending .ck__text { color: var(--c-muted); }
.js .dcard.is-swapping .ck { animation: swapIn 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
.verdict { border-radius: var(--r-2); padding: var(--s-3) var(--s-4); display: grid; gap: 2px; }
.verdict--ok { background: var(--c-accent-soft); }
.verdict--risk { background: var(--c-risk-soft); }
.verdict__title { font-weight: var(--fw-heavy); font-size: var(--fs-h4); letter-spacing: -0.01em; }
.verdict--ok .verdict__title { color: var(--c-accent-ink); }
.verdict--risk .verdict__title { color: var(--c-risk-ink); }
.verdict__score { font-size: var(--fs-small); color: var(--c-ink-2); }
.dcard__rule { font-size: var(--fs-micro); color: var(--c-muted); }
.dcard__rule strong { color: var(--c-ink); }

@media (max-width: 1024px) {
  .hx__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hx__stage { min-height: 0; display: grid; }
  .art { position: relative; width: min(420px, 78%); justify-self: end; }
  .dcard { position: relative; width: min(420px, 100%); margin-top: -34%; }
}
@media (max-width: 520px) { .dcard { margin-top: -28%; padding: var(--s-4); } .hx { padding-top: var(--s-6); } }

/* ---- Proof band ---- */
.pband { border-block: 1px solid var(--c-line); padding-block: var(--s-6); }
.pband__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-7); align-items: center; }
.pband__label { font-size: var(--fs-small); color: var(--c-muted); margin-bottom: var(--s-3); }
.pband__names { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.pband__names li { font-size: 1.375rem; font-weight: var(--fw-heavy); letter-spacing: -0.025em; color: var(--c-ink-2); }
.figs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.figs li { display: grid; gap: var(--s-2); align-content: start; padding-left: var(--s-4); border-left: 1px solid var(--c-line); }
.figs strong { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); font-weight: var(--fw-heavy); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.figs span { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.35; }
@media (max-width: 1024px) { .pband__grid { grid-template-columns: 1fr; gap: var(--s-5); } }
@media (max-width: 640px) { .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } .pband__names li { font-size: 1.125rem; } }

/* ---- Invisible: the problem, why we exist, where we work ---- */
.inv__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
.inv__body { margin-top: var(--s-5); font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); max-width: 54ch; }
.inv__founders { margin-top: var(--s-5); padding-left: var(--s-4); border-left: 4px solid var(--c-accent); color: var(--c-ink); max-width: 54ch; }
.bigstat { font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.375rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-medium); }
.bigstat strong { font-weight: var(--fw-heavy); }
.bigstat + .bigstat { margin-top: var(--s-4); }
.inv__source { margin-top: var(--s-3); font-size: var(--fs-micro); color: var(--c-muted); }
.inv__source a { color: var(--c-muted); }
.inv__punch { margin-top: var(--s-5); font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.2; }
@media (max-width: 900px) { .inv__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.map { margin: var(--s-8) 0 0; }
.map__frame { position: relative; border-radius: 24px; background: var(--c-panel); padding: var(--s-6) var(--s-5) var(--s-4); }
.map svg { width: 100%; height: auto; display: block; overflow: visible; }
.map .land { fill: none; stroke: var(--c-map-land); stroke-width: 4.2; stroke-linecap: round; }
.map .mk { fill: none; stroke: var(--c-brand-blue); stroke-width: 5.2; stroke-linecap: round; transition: stroke var(--dur-2) var(--ease); }
.map .mkg { cursor: default; outline: none; }
.map .mkg:hover .mk, .map .mkg:focus .mk, .map .mkg.is-active .mk { stroke: var(--c-brand-pink); }
.map .pin { fill: var(--c-brand-blue); }
.map .pulse { fill: none; stroke: var(--c-brand-blue); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pulse 2.6s var(--ease) infinite; }
.map .mkg:nth-child(2n) .pulse { animation-delay: 0.8s; }
.map .mkg:nth-child(3n) .pulse { animation-delay: 1.6s; }
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map .pulse { animation: none; opacity: 0; } }
.map .mlabel { font-family: var(--font-sans); font-size: 15px; font-weight: 700; fill: var(--c-ink); paint-order: stroke; stroke: var(--c-panel); stroke-width: 5px; stroke-linejoin: round; }
.map .callout rect { fill: var(--c-ground); stroke: var(--c-line); }
.map .callout .c-big { font-family: var(--font-sans); font-size: 22px; font-weight: 800; fill: var(--c-ink); }
.map .callout .c-txt { font-family: var(--font-sans); font-size: 13px; font-weight: 500; fill: var(--c-ink-2); }
.map .callout .c-src { font-family: var(--font-sans); font-size: 11px; fill: var(--c-muted); }
.map .callout-line { stroke: var(--c-ink); stroke-width: 1.2; fill: none; }
.map__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.map__cap-title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.map__markets { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.map__markets li { padding: 2px var(--s-3); border-radius: var(--r-pill); background: var(--c-ground); border: 1px solid var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.map__mobile-stat { display: none; margin-top: var(--s-3); font-size: var(--fs-small); color: var(--c-ink-2); }
@media (max-width: 760px) {
  .map__frame { padding: var(--s-4) var(--s-3) var(--s-3); }
  .map .callout { display: none; }
  .map .mlabel { font-size: 24px; stroke-width: 7px; }
  .map__mobile-stat { display: block; }
}

/* ---- How it works: run the check ---- */
.rc { background: var(--c-ground); border-radius: 28px; padding: var(--s-6); box-shadow: 0 0 0 1px var(--c-line); }
.rc__head { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.rc__title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.rc__controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.rc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.pcard { border: 1px solid var(--c-line); border-radius: 20px; padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; }
.pcard__form { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: var(--c-panel); border-radius: var(--r-2); }
.pcard__field { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); }
.pcard__field span:first-child { color: var(--c-muted); }
.pcard__field span:last-child { font-family: var(--font-mono); font-size: var(--fs-mono); text-align: right; }
.pcard .verdict { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.pcard.is-pending .verdict { opacity: 0.35; filter: grayscale(1); }
.scorebar { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--gradient-risk); margin-top: var(--s-2); }
.scorebar__dot { position: absolute; top: 50%; left: var(--pos, 0%); width: 24px; height: 24px; border-radius: 50%; background: var(--c-ground); border: 3px solid var(--c-ink); transform: translate(-50%, -50%); transition: left 1400ms var(--ease); }
.scorebar__scale { display: flex; justify-content: space-between; margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--c-muted); }
.pcard.is-pending .scorebar__dot { left: 0%; opacity: 0.4; }
@media (prefers-reduced-motion: reduce) { .scorebar__dot { transition: none; } }
@media (max-width: 860px) { .rc { padding: var(--s-4); border-radius: 20px; } .rc__grid { grid-template-columns: 1fr; } }

.steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-8); counter-reset: st; }
.steps3 li { counter-increment: st; display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-ink); }
.steps3 li::before { content: counter(st, decimal-leading-zero); font-weight: var(--fw-heavy); font-size: var(--fs-small); color: var(--c-accent); }
.steps3 h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.steps3 p { color: var(--c-ink-2); font-size: var(--fs-small); }
.how__cta { margin-top: var(--s-7); }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---- Stories (dark) ---- */
.stories { position: relative; overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); padding-block: var(--section-y); }
.stories__art { position: absolute; top: -40px; right: -60px; width: 340px; opacity: 0.95; pointer-events: none; }
.stories .container { position: relative; }
.tabs__list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.tab {
  display: grid; justify-items: start; gap: 2px; min-height: 56px; padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); background: transparent; color: var(--c-on-ink);
  border: 1.5px solid var(--c-ink-line-strong); text-align: left;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.tab:hover { border-color: var(--c-on-ink); }
.tab__name { font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1.2; }
.tab__meta { font-size: var(--fs-micro); color: var(--c-on-ink-muted); }
.tab[aria-selected="true"] { background: var(--c-on-ink); color: var(--c-ink); border-color: var(--c-on-ink); }
.tab[aria-selected="true"] .tab__meta { color: var(--c-muted); }
.story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); align-items: end; }
.story__num { font-size: clamp(4.5rem, 2rem + 9vw, 10rem); font-weight: var(--fw-heavy); line-height: 0.88; letter-spacing: -0.06em; background-image: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; color: var(--c-brand-yellow); -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.story__label { margin-top: var(--s-4); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: 1.12; letter-spacing: -0.025em; max-width: 16ch; }
.story__side { display: grid; gap: var(--s-4); align-content: end; }
.story__facts { list-style: none; border-top: 1px solid var(--c-ink-line); }
.story__facts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-ink-line); font-size: var(--fs-small); }
.story__facts li span:first-child { color: var(--c-on-ink-muted); }
.story__quote { margin: 0; font-size: var(--fs-h4); line-height: 1.4; font-weight: var(--fw-medium); }
.story__quote p::before { content: "\201C"; }
.story__quote p::after { content: "\201D"; }
.story__quote footer { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.stories__cta { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c-ink-line); display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: center; justify-content: space-between; }
.stories__cta p { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: var(--s-6); } .stories__art { width: 200px; right: -50px; top: -30px; opacity: 0.6; } }

/* ---- Next step: three doors ---- */
.doors { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 0.9fr); gap: var(--s-4); align-items: stretch; }
.door { border-radius: 24px; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.door--cold { background: var(--c-panel); }
.door--calc { background: var(--c-ground); box-shadow: 0 0 0 1.5px var(--c-ink); }
.door--hot { background: var(--c-accent); color: var(--c-on-accent); }
.door__kicker { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.door--hot .door__kicker { color: var(--c-on-accent); }
.door h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.15; }
.door p { font-size: var(--fs-small); }
.door--cold p, .door--calc p { color: var(--c-ink-2); }
.door__actions { margin-top: auto; padding-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.door--hot .btn--light { color: var(--c-accent-ink); }
.door--hot .link-text { color: var(--c-on-accent); text-decoration-color: var(--c-on-accent); }
.door--hot :focus-visible { outline-color: var(--c-on-accent); }
@media (max-width: 1100px) { .doors { grid-template-columns: 1fr 1fr; } .door--calc { grid-column: 1 / -1; order: -1; } }
@media (max-width: 700px) { .doors { grid-template-columns: 1fr; } .door { padding: var(--s-5); } }

.mc__modes { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-panel); align-self: flex-start; }
.mc__modes button { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.mc__modes button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }
.mc__fields { display: grid; gap: var(--s-3); }
.mc__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--s-3); align-items: center; }
.mc__row label { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.3; }
.mc__row .input, .mc__row .select { min-height: 44px; font-family: var(--font-mono); font-size: var(--fs-mono); }
.mc__money { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--s-1); }
.mc__out { padding: var(--s-4) var(--s-5); border-radius: var(--r-3); background: var(--c-accent-soft); display: grid; gap: var(--s-1); }
.mc__out-k { font-size: var(--fs-small); color: var(--c-ink-2); font-weight: var(--fw-medium); }
.mc__big { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem); font-weight: var(--fw-heavy); letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mc__small { font-size: var(--fs-small); color: var(--c-ink-2); }
.mc__note { font-size: var(--fs-micro); color: var(--c-muted); line-height: 1.45; }
@media (max-width: 520px) { .mc__row { grid-template-columns: 1fr; gap: var(--s-1); } }

/* ---- Funnel-aware floating CTA ---- */
.fcta { position: fixed; right: calc(var(--s-4) + env(safe-area-inset-right, 0px)); bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-review); display: grid; justify-items: end; gap: var(--s-1); pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.fcta.is-visible { opacity: 1; transform: none; }
.fcta__btn { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-5); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-ink); font-weight: var(--fw-bold); text-decoration: none; box-shadow: var(--shadow-float); }
.fcta__btn:hover { color: var(--c-on-ink); background: var(--c-ink-2); text-decoration: none; }
.fcta[data-stage="hot"] .fcta__btn { background: var(--c-accent); }
.fcta[data-stage="hot"] .fcta__btn:hover { background: var(--c-accent-ink); }
.fcta__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gradient-brand); }
.fcta.is-bump .fcta__btn { animation: bump 520ms var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.fcta__why { pointer-events: auto; max-width: 280px; padding: 2px var(--s-2); border-radius: var(--r-1); background: var(--c-gap-bg); color: var(--c-gap-ink); border: 1px dashed var(--c-gap-line); font-size: var(--fs-micro); text-align: right; }
.review-off .fcta__why { display: none; }
@media (prefers-reduced-motion: reduce) { .fcta { transition: none; } .fcta.is-bump .fcta__btn { animation: none; } }
@media (max-width: 520px) {
  .fcta { right: var(--s-3); bottom: var(--s-3); }
  .fcta__btn { min-height: 48px; padding: 0 var(--s-4); font-size: var(--fs-small); }
  .fcta__why { max-width: 200px; }
  .review-toggle { left: var(--s-3); bottom: var(--s-3); padding: 0 var(--s-3); font-size: var(--fs-micro); }
}

/* Header logo (brand book file) */
.logo svg { display: block; height: 26px; width: auto; }
.site-footer .logo svg { height: 28px; }
@media (max-width: 520px) {
  .site-header__bar { gap: var(--s-3); }
  .logo svg { height: 20px; }
  .site-header__actions { gap: var(--s-2); }
  .site-header__actions .btn--sm { padding: 0 var(--s-3); }
}
/* Hero CTA sits above the audience switcher */
.hx__cta { margin-top: var(--s-5); }
.chip { padding: 0 var(--s-4); }
@media (min-width: 1025px) { .chip { padding: 0 14px; } }
/* Report cover (cold door) */
.cover { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-3); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); margin-block: var(--s-2); }
.cover__art { width: 112px; aspect-ratio: 1 / 1; margin-bottom: var(--s-2); }
.cover__art svg { width: 100%; height: 100%; display: block; }
.cover__title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.015em; }
.cover__meta { font-size: var(--fs-micro); color: var(--c-muted); }
/* Back-test steps (hot door) */
.door__steps { list-style: none; counter-reset: ds; display: grid; gap: var(--s-3); margin-block: var(--s-2); }
.door__steps li { counter-increment: ds; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: var(--s-3); font-size: var(--fs-small); }
.door__steps li::before { content: counter(ds); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--c-on-accent); font-weight: var(--fw-bold); font-size: var(--fs-micro); }
.door__steps span { opacity: 0.92; }
/* Spacing inside grid components comes from gap, not from p + p */
.aud__pitch p + p, .who p + p, .dcard p + p, .pcard p + p, .cover p + p, .door p + p, .story p + p, .rc p + p { margin-top: 0; }
/* Text links inside a sentence stay inline */
.aud__proof .link-text, .inv__source a, .map p .link-text { display: inline; min-height: 0; }
.hx__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 1024px) { .hx__grid { grid-template-columns: 1fr; } }
.figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .figs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-3); } .figs--3 li { padding-left: var(--s-3); } .figs--3 strong { font-size: 1.75rem; } }
@media (max-width: 760px) { .map .mlabel { font-size: 34px; stroke-width: 9px; } }
@media (max-width: 700px) { .stories__art { display: none; } }
.tag-illus { white-space: nowrap; flex: 0 0 auto; }

/* =====================================================================
   HOMEPAGE V3 — 26 Oct 2026 (evening)
   Story-first hero, ten segments, three product families, real logos and
   photos, global coverage map, two ways to talk, multi-level menus.
   ===================================================================== */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.01em; color: var(--c-accent-ink); }
.eyebrow::before { content: ""; flex: 0 0 auto; width: 28px; height: 4px; border-radius: 2px; background: var(--gradient-brand); }
.sec-head .eyebrow { margin-bottom: calc(-1 * var(--s-2)); }
.sec-head h2 > span { display: block; }

/* ---- Story hero: a day behind the screen ---- */
.hx--story { padding-block: var(--s-6) var(--s-7); }
.hx--story .hx__grid > * { min-width: 0; }
.hx--story .hx__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); row-gap: var(--s-6); }
.hx--story .hx__title { margin-top: var(--s-4); font-size: clamp(2.5rem, 1.25rem + 3.2vw, 3.8rem); max-width: 13ch; }
.hx--story .hx__stage { min-height: 470px; }
.hx--story .art { width: min(470px, 88%); }
.moments { position: absolute; left: 0; bottom: 0; width: min(410px, 92%); }
.moment { background: var(--c-ground); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-float), 0 0 0 1px var(--c-line); }
.moment p + p { margin-top: 0; }
.moment__screen { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5) var(--s-5); }
.moment__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.moment__title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.moment__line { font-size: var(--fs-small); color: var(--c-ink-2); }
.moment__btn { justify-self: start; display: inline-flex; align-items: center; min-height: 34px; margin-top: var(--s-1); padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.moment__behind { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); background: var(--c-panel); border-top: 1.5px dashed var(--c-line-strong); }
.moment__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.moment__q { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.js .moment.is-swapping .ck { animation: swapIn 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
.moment.is-swapping .moment__screen { animation: swapIn 360ms var(--ease) both; }
.fam-tag { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); }
.beta { display: inline-flex; align-items: center; padding: 1px var(--s-2); border-radius: var(--r-pill); border: 1.5px dashed var(--c-accent); background: var(--c-ground); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; }

.day { grid-column: 1 / -1; }
.day__track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.day__node { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--s-2); padding: 0 var(--s-2) var(--s-2); border: 0; background: none; color: var(--c-ink); font: inherit; text-align: center; cursor: pointer; }
.day__node:focus-visible { outline-offset: 2px; border-radius: var(--r-3); }
.day__time { font-size: 1.375rem; line-height: 1.1; font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.day__line { position: relative; justify-self: stretch; display: grid; place-items: center; margin-inline: calc(-1 * var(--s-2)); }
.day__line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--gradient-brand); background-size: 600% 100%; background-position: calc(var(--i, 0) * 20%) 0; }
.day__icon { position: relative; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ground); border: 2.5px solid var(--c-accent); color: var(--c-accent); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.day__icon svg { width: 24px; height: 24px; }
.day__node:hover .day__icon { transform: scale(1.06); }
.day__node[aria-selected="true"] .day__icon { background: var(--c-accent); color: var(--c-on-accent); transform: scale(1.1); box-shadow: 0 0 0 7px var(--c-accent-soft); }
.day__scene { max-width: 17ch; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; text-wrap: balance; }
.day__q { padding: 3px var(--s-2); border-radius: var(--r-2); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-micro); line-height: 1.3; }
.day__node[aria-selected="true"] .day__q { background: var(--c-accent-ink); color: var(--c-on-accent); }
.day__bar { width: 56px; height: 3px; border-radius: 2px; background: var(--c-line); overflow: hidden; visibility: hidden; }
.day__node[aria-selected="true"] .day__bar { visibility: visible; }
.day__bar::after { content: ""; display: block; height: 100%; background: var(--c-accent); transform-origin: left center; transform: scaleX(1); }
.is-playing .day__node[aria-selected="true"] .day__bar::after { animation: dayFill 5200ms linear both; }
.is-held .day__node[aria-selected="true"] .day__bar::after, .is-away .day__node[aria-selected="true"] .day__bar::after { animation-play-state: paused; }
@keyframes dayFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.day__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.day__caption { max-width: 80ch; font-size: var(--fs-small); color: var(--c-ink-2); }
.day__play { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: var(--c-ground); color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.day__play:hover { border-color: var(--c-ink); }
.day__play-icon { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.day__play[aria-pressed="false"] .day__play-icon { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (prefers-reduced-motion: reduce) { .day__icon { transition: none; } .is-playing .day__node[aria-selected="true"] .day__bar::after { animation: none; } }
@media (max-width: 1024px) {
  .hx--story .hx__grid { grid-template-columns: 1fr; row-gap: var(--s-6); }
  .hx--story .day { order: 2; }
  .hx--story .hx__stage { order: 3; min-height: 0; display: grid; }
  .hx--story .art { position: relative; width: min(380px, 70%); justify-self: end; }
  .moments { position: relative; width: min(440px, 100%); margin-top: -30%; }
}
@media (max-width: 860px) {
  .day__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 42%); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-top: var(--s-2); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .day__track::-webkit-scrollbar { display: none; }
  .day__node { scroll-snap-align: center; }
}
@media (max-width: 520px) { .moments { margin-top: -24%; } .moment__screen, .moment__behind { padding-inline: var(--s-4); } }

/* ---- Avatars with a photo ---- */
.avatar--photo { padding: 0; overflow: hidden; background: var(--c-panel); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Customers: logo marquee ---- */
.pband__logos { min-width: 0; }
.marq { display: flex; gap: var(--s-8); overflow: hidden; margin-block: var(--s-2) var(--s-3); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq__track { list-style: none; flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-8); min-width: 100%; justify-content: space-around; animation: marq 26s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(calc(-100% - var(--s-8))); } }
.marq__item { display: flex; align-items: center; height: 44px; }
.clogo { display: block; width: auto; max-width: none; opacity: 0.72; transition: opacity var(--dur-1) var(--ease); }
.clogo:hover { opacity: 1; }
.clogo--inv { filter: invert(1); }
.clogo--mono { filter: grayscale(1) contrast(1.15); }
.clogo--clip { clip-path: inset(12% 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .marq { flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
  .marq__track { animation: none; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-4) var(--s-7); }
  .marq__track[aria-hidden="true"] { display: none; }
}

/* ---- Your side of the screen (audience switcher) ---- */
.yours { background: var(--c-panel); }
.yours .sec-head { margin-bottom: var(--s-6); max-width: 920px; }
.yours .aud { margin-top: 0; }
.yours .chip { background: var(--c-ground); }
.yours .chip[aria-pressed="true"] { background: var(--c-ink); }
.aud__stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; margin-top: var(--s-5); }
.yours .aud__pitch { margin-top: 0; max-width: none; padding: var(--s-6) var(--s-6) var(--s-6) var(--s-7); gap: var(--s-3); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.yours .aud__pitch::before { width: 6px; }
.yours .aud__headline { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.025em; }
.yours .aud__line { font-size: var(--fs-lead); line-height: 1.5; }
.yours .aud__proof { font-size: var(--fs-body); }
.yours .aud__links .link-text { font-size: var(--fs-body); }
.yours .dcard { position: relative; left: auto; bottom: auto; width: 100%; max-width: 430px; margin-top: 0; justify-self: center; }
@media (max-width: 960px) { .aud__stage { grid-template-columns: 1fr; } .yours .dcard { justify-self: start; max-width: 460px; } }
@media (max-width: 700px) {
  .aud__chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-2); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .aud__chips::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; scroll-snap-align: start; }
  .yours .aud__pitch { padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); }
}

/* ---- Why we exist: photo, six figures, coverage map ---- */
.inv__grid { align-items: center; }
.inv .display-2 { margin-top: var(--s-3); }
.inv__photo { position: relative; margin: 0; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; background: var(--c-panel); }
.inv__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; display: block; }
.inv__photo::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.72)); pointer-events: none; }
.inv__over { position: absolute; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); z-index: 1; color: #FFFFFF; font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.inv__over span { color: #FFD9A0; }
.inv__chip { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1; display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: 16px; background: rgba(255, 255, 255, 0.94); box-shadow: var(--shadow-float); max-width: 250px; }
.inv__chip p + p { margin-top: 0; }
.inv__chip .ck { font-size: var(--fs-micro); }
.inv__chip-k { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.inv__chip-v { margin-top: var(--s-1) !important; font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.stat6 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-8); }
.stat6 li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 18px; background: var(--c-panel); }
.stat6 p + p { margin-top: 0; }
.stat6__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-risk-ink); }
.stat6__n { font-size: clamp(2.1rem, 1.4rem + 1.9vw, 3.1rem); font-weight: var(--fw-heavy); letter-spacing: -0.04em; line-height: 1; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.stat6__t { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink); }
.stat6__s { font-size: var(--fs-micro); color: var(--c-muted); }
.stat6__s a { color: var(--c-muted); }
.inv > .container > .inv__source { margin-top: var(--s-3); }
@media (max-width: 900px) { .stat6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inv__over { font-size: var(--fs-h4); } }
@media (max-width: 520px) { .stat6 { grid-template-columns: 1fr; } .inv__chip { top: var(--s-3); right: var(--s-3); padding: var(--s-2) var(--s-3); } .inv__photo { aspect-ratio: 1 / 1; } }

.map__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-4); }
.map__head .map__cap-title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.15; max-width: 22ch; }
.map__legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-small); color: var(--c-ink-2); }
.map__legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.sw--live { background: var(--c-map-live); }
.sw--verify { background: var(--c-map-verify); }
.sw--signals { background: var(--c-map-signals); }
.sw--pin { background: var(--c-ground); box-shadow: inset 0 0 0 3px var(--c-brand-blue); }
.map .tier { fill: none; stroke-width: 4.2; stroke-linecap: round; }
.map .tier--live { stroke: var(--c-map-live); }
.map .tier--verify { stroke: var(--c-map-verify); }
.map .tier--signals { stroke: var(--c-map-signals); }
.map .mk { stroke: var(--c-brand-pink); }
.map .mkg:hover .mk, .map .mkg:focus .mk, .map .mkg.is-active .mk { stroke: var(--c-brand-yellow); }
.map .pin { fill: var(--c-ground); stroke: var(--c-brand-blue); stroke-width: 3; }
.regions { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.regions li { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-3); border-top: 2px solid var(--c-accent); font-size: var(--fs-small); color: var(--c-ink-2); }
.regions strong { color: var(--c-ink); font-weight: var(--fw-heavy); }
@media (max-width: 1100px) { .regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .regions { grid-template-columns: 1fr 1fr; } .map__head .map__cap-title { font-size: var(--fs-h4); } }

/* ---- Three product families ---- */
.fam { margin-top: var(--s-8); }
.fam__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-bottom: var(--s-5); }
.fam__title { font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.025em; line-height: 1.1; max-width: 22ch; }
.fam__head p { max-width: 46ch; color: var(--c-ink-2); }
.fam__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.fam__card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.fam__card p + p { margin-top: 0; }
.fam__card--beta { background: transparent; box-shadow: none; border: 1.5px dashed var(--c-accent); }
.fam__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.fam__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }
.fam__icon svg { width: 24px; height: 24px; }
.fam__name { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.15; color: var(--c-accent-ink); }
.fam__q { font-weight: var(--fw-bold); color: var(--c-ink); }
.fam__text { font-size: var(--fs-small); color: var(--c-ink-2); }
.fam__items { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.fam__items li { padding: 3px var(--s-2); border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-ink-2); font-size: var(--fs-micro); font-weight: var(--fw-medium); }
.fam__card--beta .fam__items li { background: var(--c-ground); }
.fam__card .link-text { justify-self: start; }
@media (max-width: 960px) { .fam__grid { grid-template-columns: 1fr; } }

/* ---- Multi-level menus (rails: By outcome / By capability) ---- */
.mm-rails { display: grid; grid-template-columns: 260px minmax(0, 1fr) 250px; gap: 0; padding-block: 0; }
.mm-rail { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-6) 0; border-right: 1px solid var(--c-line); }
.mm-rail__btn { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 64px; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-3); background: none; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.mm-rail__btn:hover { background: var(--c-panel); }
.mm-rail__btn[aria-selected="true"] { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.mm-rail__label { display: block; font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.mm-rail__line { display: block; margin-top: 2px; font-size: var(--fs-micro); color: var(--c-muted); }
.mm-rail__btn[aria-selected="true"] .mm-rail__line { color: var(--c-accent-ink); }
.mm-chev { flex: 0 0 auto; opacity: 0.7; }
.mm-rail__panels { padding: var(--s-6) var(--s-6) var(--s-7); min-width: 0; }
.mm-rail__panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-content: start; }
.mm-rail__panel--1 { grid-template-columns: minmax(0, 1fr); }
.mm-rail__panel--1 .mm-g__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.mm-g { display: grid; gap: var(--s-2); align-content: start; }
.mm-g p + p { margin-top: 0; }
.mm-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); justify-self: start; padding-bottom: var(--s-2); border-bottom: 2px solid var(--c-accent); color: var(--c-ink); font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; text-decoration: none; }
a.mm-h:hover { color: var(--c-accent-ink); }
.mm-desc { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.45; }
.mm-g__list { list-style: none; display: grid; gap: 0; margin-top: var(--s-1); }
.mm-g__list .mm-link { padding-block: var(--s-2); }
.mm-g__list .mm-label { font-weight: var(--fw-medium); }
.mm-featured { padding: var(--s-6) var(--s-5) var(--s-7); background: var(--c-accent-soft); }
.mm-featured .mm-h { margin-bottom: var(--s-3); }
.mm-featured ul { list-style: none; display: grid; gap: var(--s-1); }
.mm-featured .mm-link:hover { background: var(--c-ground); }
.mm-note { display: inline-flex; align-items: center; padding: 0 var(--s-2); border-radius: var(--r-pill); border: 1px dashed var(--c-accent); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.mob-sub { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.mob-sub:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Talk to an expert: two ways in ---- */
.contact { width: min(880px, calc(100% - 2 * var(--gutter))); max-height: calc(100% - 2 * var(--s-5)); padding: var(--s-6); border: 0; border-radius: 26px; background: var(--c-ground); color: var(--c-ink); box-shadow: var(--shadow-float); overflow: auto; }
.contact::backdrop { background: rgba(10, 6, 30, 0.55); }
.contact[open] { animation: swapIn 280ms var(--ease); }
.contact p + p { margin-top: 0; }
.contact__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.contact__x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--c-panel); color: var(--c-ink); cursor: pointer; }
.contact__x svg { width: 18px; height: 18px; }
.contact__title { margin-top: var(--s-2); font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.025em; line-height: 1.1; }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.contact__opt { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-panel); border: 2px solid transparent; }
.contact__opt.is-chosen { border-color: var(--c-accent); background: var(--c-ground); }
.contact__opt h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.contact__opt > p { color: var(--c-ink-2); font-size: var(--fs-small); }
.contact__opt .btn { justify-self: start; }
.contact__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }
.contact__icon svg { width: 24px; height: 24px; }
.contact__note { font-size: var(--fs-micro); color: var(--c-muted); }
.contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.contact__form .contact__error, .contact__form .btn, .contact__form .contact__note { grid-column: 1 / -1; }
@media (max-width: 520px) { .contact__form { grid-template-columns: 1fr; } }
.contact__field { display: grid; gap: var(--s-1); }
.contact__field label { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.contact__field .input { width: 100%; }
.contact__field .input[aria-invalid="true"] { border-color: var(--c-error-ink); }
.contact__error { font-size: var(--fs-small); color: var(--c-error-ink); }
.contact__form .btn { justify-self: start; }
.contact__done { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-3); background: var(--c-accent-soft); color: var(--c-accent-ink); }
.contact__done-title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
@media (max-width: 760px) { .contact { padding: var(--s-5); } .contact__grid { grid-template-columns: 1fr; } }

/* ---- Our story page ---- */
.story-hero { padding-block: var(--s-8) var(--s-8); }
.story-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.story-hero__copy { display: grid; gap: var(--s-4); }
.story-hero__copy p + p { margin-top: 0; }
.story-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 12ch; }
.story-hero__take { padding-left: var(--s-4); border-left: 4px solid var(--c-accent); font-weight: var(--fw-bold); }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.founder { margin: 0; display: grid; gap: var(--s-3); }
.founder__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: var(--gradient-brand); }
.founder__photo::after { content: "Photo to add"; position: absolute; left: var(--s-3); bottom: var(--s-3); padding: 2px var(--s-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.9); color: var(--c-ink-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__photo:has(img)::after { content: none; }
.founder__photo span { font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem); font-weight: var(--fw-heavy); letter-spacing: -0.04em; color: #FFFFFF; }
.founder figcaption { display: grid; gap: 2px; }
.founder figcaption strong { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.founder figcaption span { font-size: var(--fs-small); color: var(--c-muted); }
.founders__note { grid-column: 1 / -1; }
.why3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.why3 li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.why3 h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.why3 p { color: var(--c-ink-2); }
.miles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); counter-reset: none; }
.miles li { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-4); border-top: 3px solid var(--c-accent); }
.miles p + p { margin-top: 0; }
.mile__when { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.mile__what { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.mile__more { font-size: var(--fs-small); color: var(--c-ink-2); }
.story-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); }
.story-cta h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; max-width: 24ch; }
@media (max-width: 960px) { .story-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); } .why3 { grid-template-columns: 1fr; } .miles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .founders { gap: var(--s-3); } .miles { grid-template-columns: 1fr; } }
.sw--pin { background: var(--c-brand-pink); box-shadow: none; }
/* Founders with photos: round portraits in a brand-gradient ring */
.founder__photo--img { aspect-ratio: 1 / 1; border-radius: 50%; padding: 6px; background: var(--gradient-brand); }
.founder__photo--img::after { content: none; }
.founder__photo--img img { border-radius: 50%; background: var(--c-panel); }
.founder { justify-items: center; text-align: center; }
.founder figcaption { justify-items: center; }

/* ---- Flat desktop panels (Platform, Resources, Company) in the same layered style ---- */
.mm-flat { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 0; }
.mm-flat--feat { grid-template-columns: minmax(0, 1fr) 270px; }
.mm-flat__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); align-content: start; padding: var(--s-6) var(--s-6) var(--s-7) 0; }
.mm-flat__groups--1 { grid-template-columns: minmax(0, 1fr); }
.mm-flat__groups--1 .mm-g__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.mm-flat .mm-g__list .mm-label { font-weight: var(--fw-bold); }
.mm-flat .mm-g__list .mm-link { padding-block: var(--s-3); }

/* ---- Layered menu for narrow screens: sections → perspectives → groups ---- */
.mnav { display: grid; gap: var(--s-5); align-items: start; }
.mnav__root { display: grid; gap: var(--s-2); align-content: start; }
.mnav__list { list-style: none; display: grid; margin-top: var(--s-2); border-top: 1px solid var(--c-line); }
.mnav__item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding: 0 var(--s-2); border: 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink); font: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); text-align: left; text-decoration: none; cursor: pointer; }
.mnav__item:hover { background: var(--c-panel); color: var(--c-ink); text-decoration: none; }
.mnav__item[aria-expanded="true"] { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.mnav__pane { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.mnav__pane p + p { margin-top: 0; }
.mnav__back { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-3) 0 0; border: 0; background: none; color: var(--c-accent-ink); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; }
.mnav__title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.15; }
.mnav__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mnav__tab { min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-pill); border: 1.5px solid var(--c-line); background: var(--c-ground); color: var(--c-ink); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; }
.mnav__tab[aria-selected="true"] { background: var(--c-accent-soft); border-color: var(--c-accent); color: var(--c-accent-ink); }
.mnav__rail { display: grid; gap: var(--s-5); align-content: start; }
.mnav__line { font-size: var(--fs-small); color: var(--c-muted); }
.mnav__group { display: grid; gap: var(--s-1); align-content: start; }
.mnav__h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); justify-self: start; padding-bottom: var(--s-1); border-bottom: 2px solid var(--c-accent); color: var(--c-ink); font-weight: var(--fw-heavy); text-decoration: none; }
a.mnav__h:hover { color: var(--c-accent-ink); }
.mnav__desc { font-size: var(--fs-small); color: var(--c-muted); }
.mnav__group ul, .mnav__featured ul { list-style: none; display: grid; }
.mnav__group .mm-link, .mnav__featured .mm-link { padding-block: var(--s-2); }
.mnav__featured { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-3); background: var(--c-accent-soft); }
.mnav__featured .mm-link:hover { background: var(--c-ground); }
@media (max-width: 699px) {
  .mnav[data-level="2"] .mnav__root { display: none; }
  .mnav[data-level="1"] .mnav__panes { display: none; }
}
@media (min-width: 700px) {
  .mnav { grid-template-columns: minmax(210px, 0.75fr) minmax(0, 2fr); gap: var(--s-7); }
  .mnav__back { display: none; }
  .mnav__panes { padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
  .mnav__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
  .mnav__rail .mnav__line { grid-column: 1 / -1; }
}
.menu-open .fcta, .menu-open .review-toggle { display: none; }

/* ============ Capability pages (first one: Government ID, 26 Oct, late) ============ */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; font-size: var(--fs-small); color: var(--c-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--c-line-strong); }
.crumbs a { color: var(--c-ink-2); }
.crumbs a:hover { color: var(--c-accent); }
.crumbs [aria-current="page"] { color: var(--c-ink); font-weight: var(--fw-medium); }

.cap-hero { padding-block: var(--s-7) var(--s-8); }
.cap-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); align-items: center; }
.cap-hero__copy { display: grid; gap: var(--s-4); }
.cap-hero__copy p + p { margin-top: 0; }
.cap-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 14ch; }
.cap-hero__title > span { display: block; }
.cap-hero__take { padding-left: var(--s-4); border-left: 4px solid var(--c-accent); color: var(--c-ink-2); max-width: 52ch; }
.cap-hero__take strong { color: var(--c-ink); }

/* The six answers a check returns, as pills. Hollow dot = "couldn't check". */
.res { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.res::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.res--match { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.res--partial { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.res--nomatch { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.res--grey { background: var(--c-ground); color: var(--c-muted); box-shadow: inset 0 0 0 1.5px var(--c-line); }
.res--grey::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.res--plain { text-transform: none; letter-spacing: 0; }

/* Example check card (hero): what the person typed, what the record says */
.idc { margin: 0; position: relative; display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: 26px; background: var(--c-ground); box-shadow: var(--shadow-float), 0 0 0 1px var(--c-line); }
.idc::before { content: ""; position: absolute; inset: 0 26px auto; height: 4px; border-radius: 0 0 4px 4px; background: var(--gradient-brand); }
.idc__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-3); }
.idc__context { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.idc__head, .idc__rows li { display: grid; grid-template-columns: 28% minmax(0, 1fr) 9.5rem; gap: var(--s-3); align-items: center; }
.idc__head { padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-line); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); }
.idc__head span:last-child { text-align: right; }
.idc__rows { list-style: none; display: grid; margin-top: calc(-1 * var(--s-4) + var(--s-1)); }
.idc__rows li { padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.idc__k { font-weight: var(--fw-medium); color: var(--c-muted); }
.idc__typed { font-family: var(--font-mono); font-size: var(--fs-mono); overflow-wrap: anywhere; }
.idc__r { justify-self: end; }
.idc__rule { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--c-panel); font-size: var(--fs-small); }
.idc__rule p + p { margin-top: 0; }
.idc__out { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--c-ink-2); }
.js .idc[data-reveal] .idc__rows .res, .js .idc[data-reveal] .idc__out .res { opacity: 0; transform: scale(0.85); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); transition-delay: calc(var(--i, 0) * 160ms + 300ms); }
.js .idc[data-reveal].is-in .idc__rows .res, .js .idc[data-reveal].is-in .idc__out .res { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .idc[data-reveal] .res { opacity: 1; transform: none; transition: none; } }

/* Six answers */
.ans { display: grid; gap: var(--s-6); }
.ans__row { display: grid; gap: var(--s-3); }
.ans__label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.ans__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.ans__card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ans__card p + p { margin-top: 0; }
.ans__card .res { justify-self: start; margin-bottom: var(--s-1); }
.ans__means { font-weight: var(--fw-bold); font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: 1.3; }
.ans__eg { font-size: var(--fs-small); color: var(--c-ink-2); }
.ans__eg span, .ans__next span { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.ans__card .ans__next { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line-strong); font-size: var(--fs-small); color: var(--c-ink-2); }
.ans__row--grey .ans__card { background: transparent; box-shadow: none; border: 1.5px dashed var(--c-line-strong); }
.ans__take { margin-top: var(--s-7); padding-left: var(--s-4); border-left: 4px solid var(--c-accent); font-size: var(--fs-lead); line-height: 1.5; max-width: 62ch; color: var(--c-ink-2); }
.ans__take strong { color: var(--c-ink); }

/* The catch: a stolen identity passes Government ID alone */
.catch__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); align-items: stretch; }
.catch__card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.catch__card--caught { box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-float); }
.catch__step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.catch__rows { list-style: none; display: grid; }
.catch__rows li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.catch__rows li > span:first-child { min-width: 0; }
.catch__rows em { display: block; font-style: normal; font-size: var(--fs-micro); color: var(--c-muted); }
.verdict--warn { background: var(--c-warn-soft); }
.verdict--warn .verdict__title { color: var(--c-warn-ink); }
.catch__after { margin-top: var(--s-7); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-5) var(--s-8); align-items: center; }
.catch__after p { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); }
.catch__after p strong { color: var(--c-ink); }
.catch__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }

/* Country by country */
.where { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); align-items: start; }
.where__copy { display: grid; gap: var(--s-4); }
.where__copy p + p { margin-top: 0; }
.where__copy h2 { font-size: var(--fs-display-2); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--fw-heavy); }
.ctry { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ctry li { padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.ctry .ctry__more { background: transparent; box-shadow: none; border: 1.5px dashed var(--c-line-strong); color: var(--c-ink-2); }
.where__more { display: grid; gap: var(--s-2); justify-items: start; padding-top: var(--s-4); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }
.where__more p { margin: 0; }
.where__card { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.where__card h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.send { list-style: none; display: grid; gap: var(--s-5); }
.send li { display: grid; gap: var(--s-2); }
.send__h { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.send__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.send__chips span { padding: 4px var(--s-3); border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.send__chips--maybe span { background: var(--c-panel); color: var(--c-ink-2); }
.send__no { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-3); background: var(--c-panel); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.send__no svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--c-accent); }

/* Where it fits: a four-step onboarding flow */
.fits__stat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: center; max-width: 760px; margin-bottom: var(--s-7); padding: var(--s-5) var(--s-6); border-radius: 20px; background: var(--c-ink); color: var(--c-on-ink); }
.fits__stat strong { font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-brand-pink); }
.fits__stat p { color: var(--c-on-ink); }
.fits__stat small { display: block; margin-top: var(--s-1); font-size: var(--fs-micro); color: var(--c-on-ink-muted); }
.fits__stat a { color: var(--c-on-ink-muted); }
.flow { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.flow li { position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-panel); }
.flow li p + p { margin-top: 0; }
.flow li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: calc(-1 * var(--s-5) / 2 - 7px); width: 14px; height: 14px; border-top: 2px solid var(--c-line-strong); border-right: 2px solid var(--c-line-strong); transform: translateY(-50%) rotate(45deg); }
.flow h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.flow p { font-size: var(--fs-small); color: var(--c-ink-2); }
.flow__tag { justify-self: start; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-ground); color: var(--c-muted); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.flow .flow--mon { background: var(--c-accent-soft); }
.flow .flow--mon .flow__tag { color: var(--c-accent-ink); }
.flow .flow--here { background: var(--c-ink); color: var(--c-on-ink); }
.flow .flow--here p { color: var(--c-on-ink-muted); }
.flow .flow--here .flow__tag { background: var(--c-accent); color: var(--c-on-accent); }

/* Cards with a row of links (who it's for) */
.link-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-1); }

/* FAQ on native <details> (works without JavaScript) */
.qa { max-width: 900px; border-top: 1.5px solid var(--c-ink); }
.qa details { border-bottom: 1px solid var(--c-line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--c-accent-ink); }
.qa details[open] .faq__icon::after { transform: rotate(0deg); }
.qa__a { padding: 0 0 var(--s-5); max-width: var(--w-read); color: var(--c-ink-2); }
.qa__a p + p { margin-top: var(--s-3); }

/* Related checks */
.rel { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.rel li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.rel li p + p { margin-top: 0; }
.rel h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.rel p { color: var(--c-ink-2); font-size: var(--fs-small); }
.rel .link-text, .rel .fam-tag { justify-self: start; }
.rel .fam-tag { font-size: var(--fs-micro); font-weight: var(--fw-bold); }

@media (max-width: 1100px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:nth-child(2)::after { display: none; }
}
@media (max-width: 980px) {
  .cap-hero__grid, .where { grid-template-columns: 1fr; gap: var(--s-6); }
  .idc { max-width: 560px; }
  .ans__grid, .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catch__after { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .ans__grid, .rel, .catch__grid, .flow { grid-template-columns: 1fr; }
  .flow li:not(:last-child)::after { display: block; top: auto; bottom: calc(-1 * var(--s-5) / 2 - 7px); right: 50%; transform: translateX(50%) rotate(135deg); }
  .fits__stat { grid-template-columns: 1fr; padding: var(--s-5); }
  .idc { padding: var(--s-5); }
  .idc__head { display: none; }
  .idc__rows { margin-top: 0; }
  .idc__rows li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k r" "v r"; row-gap: 2px; }
  .idc__k { grid-area: k; font-size: var(--fs-micro); }
  .idc__typed { grid-area: v; }
  .idc__r { grid-area: r; }
  .idc::before { inset: 0 20px auto; }
  .catch__card { padding: var(--s-5); }
}
.fam__items .fam__item--link { padding: 0; background: var(--c-accent-soft); }
.fam__items .fam__item--link a { display: inline-block; padding: 3px var(--s-2); color: var(--c-accent-ink); font-weight: var(--fw-bold); text-decoration: none; }
.fam__items .fam__item--link a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ============ Homepage v4 (27 Oct 2026): statement hero, AI console, global + local, people + businesses, POC ============ */
.on-dark .eyebrow { color: var(--c-violet-on-dark); }

/* Statement hero (like Anthropic's: one clear statement, bold first sentence) */
.st-hero { position: relative; overflow: hidden; padding-block: var(--s-8) var(--s-7); }
.st-hero__glow { position: absolute; z-index: 0; top: -40%; right: -16%; width: 64vw; max-width: 900px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(81, 0, 255, 0.13), rgba(255, 0, 170, 0.08) 45%, rgba(251, 157, 0, 0.06) 70%, rgba(251, 157, 0, 0) 100%); pointer-events: none; }
.st-hero > .container { position: relative; z-index: 1; }
.st { margin: 0; max-width: 23em; font-size: clamp(1.875rem, 1rem + 2.7vw, 3.375rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: var(--fw-regular); color: var(--c-ink-2); text-wrap: pretty; }
.st strong { font-weight: var(--fw-heavy); color: var(--c-ink); }
.st-hero__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5) var(--s-6); margin-top: var(--s-7); }
.st__chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.st__chips li { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink); }
.st__chips svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--c-accent); }
.st-hero__note { margin-top: var(--s-3); }
.st-hero__logos { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }

/* Why: they miss the good, they let the bad through */
.why4__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
.why4__photo { aspect-ratio: auto; min-height: 460px; height: 100%; }
.why4__cards { display: grid; gap: var(--s-5); align-content: start; }
.prob { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.prob p + p { margin-top: 0; }
.prob__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.prob--risk .prob__k { color: var(--c-risk-ink); }
.prob__num { font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.prob__text { font-size: var(--fs-h4); line-height: 1.4; color: var(--c-ink); max-width: 42ch; }
.prob__src { font-size: var(--fs-micro); color: var(--c-muted); }
.prob__src a { color: var(--c-muted); }
.prob .prob__out { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-weight: var(--fw-bold); color: var(--c-ink); }
.outc { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-7) 0 0; padding: 0; }
.outc li { display: grid; gap: var(--s-1); align-content: start; }
.outc__icon, .ai3__icon { width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 14px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }
.outc__icon svg, .ai3__icon svg { width: 22px; height: 22px; }
.outc strong { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.outc li > span:last-child { font-size: var(--fs-small); color: var(--c-ink-2); }

/* AI console: one request, what our AI infers, the decision */
.aic { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.aic__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.aic__title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.aic__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.aic__stage { min-height: 250px; }
.aic__panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 0.9fr); gap: var(--s-6); align-items: stretch; }
.aic__col { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 20px; }
.aic__col p + p { margin-top: 0; }
.aic__col:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: calc(-1 * var(--s-6) / 2 - 7px); width: 14px; height: 14px; border-top: 2px solid var(--c-line-strong); border-right: 2px solid var(--c-line-strong); transform: translateY(-50%) rotate(45deg); }
.aic__req { background: var(--c-panel); }
.aic__ai { background: linear-gradient(160deg, #F3EDFF, #FFF0F8); box-shadow: inset 0 0 0 1.5px rgba(81, 0, 255, 0.16); }
.aic__dec { background: var(--c-ink); color: var(--c-on-ink); }
.aic__k { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.aic__k svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--c-accent); }
.aic__dec .aic__k { color: var(--c-on-ink-muted); }
.aic__ctx { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; }
.aic__ctx .beta { vertical-align: middle; }
.aic__inputs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.aic__inputs li { padding: 3px var(--s-2); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.aic__ins { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.ins { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: 14px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ins__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); }
.ins--warn .ins__dot { background: var(--c-status-review); }
.ins--risk .ins__dot { background: var(--c-status-decline); }
.ins__fam { padding: 2px 8px; border-radius: var(--r-pill); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; }
.ins__fam--credit { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.ins__fam--fraud { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.ins__fam--kyc { background: var(--c-panel); color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.ins__fam--kyb { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.ins__t { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; }
.dec { justify-self: start; display: inline-flex; align-items: center; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.dec--ok { background: var(--c-accent); color: var(--c-on-accent); }
.dec--review { background: var(--c-status-review); color: #1A0E00; }
.dec--risk { background: var(--c-status-decline); color: #FFFFFF; }
.aic__why { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-on-ink); }
.aic__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-micro); color: var(--c-on-ink-muted); }
.aic__meta span { display: inline-flex; align-items: center; gap: 6px; }
.aic__meta svg { width: 14px; height: 14px; color: var(--c-brand-yellow); }
.js .aic__panel.is-swapping .ins { animation: swapIn 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 140ms); }
.js .aic__panel.is-swapping .dec, .js .aic__panel.is-swapping .aic__why { animation: swapIn 420ms var(--ease) both; animation-delay: 560ms; }
.aic .day__track { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.aic .day__node { justify-items: start; text-align: left; gap: 4px; padding: var(--s-3); border-radius: 14px; color: var(--c-ink-2); }
.aic .day__node:hover { background: var(--c-panel); }
.aic .day__node[aria-selected="true"] { background: var(--c-panel); color: var(--c-ink); }
.aic .day__time { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0; color: var(--c-muted); }
.aic .day__node[aria-selected="true"] .day__time { color: var(--c-accent); }
.aic__tabname { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.25; }
.aic .day__bar { width: 100%; margin-top: var(--s-1); }
@media (prefers-reduced-motion: reduce) { .js .aic__panel.is-swapping .ins, .js .aic__panel.is-swapping .dec, .js .aic__panel.is-swapping .aic__why { animation: none; } }

/* Three points (AI, global) */
.ai3, .glob3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin: var(--s-7) 0 0; padding: 0; }
.ai3 li, .glob3 li { display: grid; gap: var(--s-1); align-content: start; }
.ai3 li p + p, .glob3 li p + p { margin-top: 0; }
.ai3 h3, .glob3 h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.ai3 p, .glob3 p { font-size: var(--fs-small); color: var(--c-ink-2); }
.glob__story { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }
.map--v4 .map__head { margin-bottom: var(--s-3); }

/* People and businesses */
.pb2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.pb2__card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.pb2__card p + p { margin-top: 0; }
.pb2__card--beta { background: transparent; box-shadow: none; border: 1.5px dashed var(--c-accent); }
.pb2__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.pb2__top h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.pb2__q { font-size: var(--fs-h4); line-height: 1.4; color: var(--c-ink); max-width: 46ch; }
.pb2__fam { display: grid; gap: var(--s-2); }
.pb2__fname { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.link-row .btn { margin-right: var(--s-2); }
.inds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.inds__label { font-weight: var(--fw-bold); }
.inds__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.inds__list a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); text-decoration: none; }
.inds__list a:hover { box-shadow: 0 0 0 1.5px var(--c-accent); color: var(--c-accent-ink); }

/* Customers: global platforms and local leaders */
.cases { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr); gap: var(--s-6); align-items: start; }
.cases__col { display: grid; gap: var(--s-4); align-content: start; }
.cases__label { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.cases__label svg { width: 18px; height: 18px; color: var(--c-accent); }
.cases__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.case { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.case p + p { margin-top: 0; }
.case--global { background: var(--c-ink); color: var(--c-on-ink); box-shadow: none; }
.case__tag { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); color: var(--c-muted); }
.case__tag span { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: var(--fw-bold); }
.case--global .case__tag { color: var(--c-on-ink-muted); }
.case--global .case__tag span { background: var(--c-accent); color: var(--c-on-accent); }
.case__num { margin-top: var(--s-2) !important; font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); color: var(--c-accent); }
.case--global .case__num { background-image: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-brand-yellow); }
.case__label { font-weight: var(--fw-bold); line-height: 1.35; }
.case__name { font-size: var(--fs-small); color: var(--c-muted); }
.case--global .case__name { color: var(--c-on-ink-muted); }
.case__quote { margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: 3px solid var(--c-accent); font-size: var(--fs-small); color: var(--c-ink-2); }
.case__quote p { margin: 0; }
.case__quote footer { margin-top: var(--s-1); font-size: var(--fs-micro); color: var(--c-muted); }
.case .link-text { justify-self: start; margin-top: var(--s-2); }
.case--global .link-text, .case--global .link-text:hover { color: var(--c-on-ink); text-decoration-color: var(--g-3); }
.cases__note { padding-left: var(--s-3); border-left: 3px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-2); }

/* Proof of concept (dark band) */
.poc { position: relative; overflow: hidden; padding-block: var(--section-y); background: var(--c-ink); }
.poc__art { position: absolute; right: -70px; top: -50px; width: 300px; opacity: 0.45; pointer-events: none; }
.poc > .container { position: relative; z-index: 1; }
.poc__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; counter-reset: poc; }
.poc__steps li { counter-increment: poc; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 20px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px var(--c-ink-line); }
.poc__steps li p + p { margin-top: 0; }
.poc__icon { width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 14px; display: grid; place-items: center; background: rgba(143, 102, 255, 0.2); color: var(--c-violet-on-dark); }
.poc__icon svg { width: 22px; height: 22px; }
.poc__steps h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--c-on-ink); }
.poc__steps h3::before { content: counter(poc, decimal-leading-zero) "  "; color: var(--c-on-ink-muted); font-size: var(--fs-small); white-space: pre; }
.poc__steps p { font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.poc__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5) var(--s-8); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-ink-line); }
.poc__see-k { margin-bottom: var(--s-3); font-weight: var(--fw-bold); }
.poc__see { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.poc__see li { position: relative; padding-left: var(--s-5); }
.poc__see li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--gradient-brand); }
.poc__note { margin-top: var(--s-5); }

@media (max-width: 1100px) {
  .outc, .poc__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .why4__grid, .pb2 { grid-template-columns: 1fr; }
  .why4__photo { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .aic__panel { grid-template-columns: 1fr; gap: var(--s-5); }
  .aic__col:not(:last-child)::after { top: auto; bottom: calc(-1 * var(--s-5) / 2 - 7px); right: 50%; transform: translateX(50%) rotate(135deg); }
  .ai3, .glob3 { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 860px) {
  .aic { padding: var(--s-5); }
  .aic .day__track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(132px, 40%); margin-inline: 0; padding-inline: 0; }
  .cases__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .outc, .poc__steps { grid-template-columns: 1fr; }
  .st-hero { padding-block: var(--s-7) var(--s-6); }
  .st-hero__row { margin-top: var(--s-6); }
  .aic { padding: var(--s-4); border-radius: 22px; }
  .aic__col { padding: var(--s-4); }
  .prob { padding: var(--s-5); }
  .pb2__card { padding: var(--s-5); }
}
.pb2__card--beta .fam__items li { background: var(--c-ground); }
.poc::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-ink-line); }
.poc__art { opacity: 0.32; }
.aic__sub { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-ink-2); }
/* Hero v4.1 (Eva, 27 Oct): a short catchy tagline, then a mission statement in the Anthropic manner */
.st-tag { margin: 0; max-width: 14ch; font-size: clamp(2.75rem, 1.1rem + 5.4vw, 6.25rem); line-height: 0.98; letter-spacing: -0.045em; font-weight: var(--fw-heavy); color: var(--c-ink); text-wrap: balance; }
.st-mission { margin: var(--s-5) 0 0; max-width: 36em; font-size: clamp(1.25rem, 0.95rem + 1.05vw, 1.875rem); line-height: 1.35; letter-spacing: -0.015em; color: var(--c-ink-2); text-wrap: pretty; }
/* New photo (Eva, 27 Oct: "super modern", no old-school filter): neon in the brand's own colors */
.why4__photo img { object-position: 38% 40%; }
.why4__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(10, 4, 30, 0.72) 100%); pointer-events: none; }
.why4__photo .inv__chip, .why4__photo .inv__over { z-index: 2; }
@media (max-width: 640px) { .why4__photo { aspect-ratio: 4 / 5; } .why4__photo img { object-position: 40% 50%; } }
/* Hero v4.2 (Eva, 27 Oct): a one-line category kicker, the tagline, then the mission */
.st-kicker { margin: 0 0 var(--s-4); font-size: var(--fs-lead); }
.st-kicker::before { width: 36px; height: 5px; }
.st-tag { max-width: none; font-size: clamp(2.5rem, 1rem + 4.6vw, 5.25rem); line-height: 1.02; }
.st-tag .grad-text { display: block; }
.sec-head .lead strong { color: var(--c-ink); }
.st-kicker { align-items: flex-start; }
.st-kicker::before { margin-top: 0.6em; }
/* Signal iris (Eva, 27 Oct: modern, intangible, no stock photo): an iris made of data points, drawn in code */
.sig { position: relative; margin: 0; border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 46%, #1D0C40 0%, #0B0720 52%, #05040B 100%); }
.sig__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sig__ring { transform-box: view-box; transform-origin: 300px 300px; animation: sigSpin var(--dur, 120s) linear infinite; animation-direction: var(--dir, normal); }
@keyframes sigSpin { to { transform: rotate(360deg); } }
.sig__hit { transform-box: fill-box; transform-origin: center; animation: sigPulse 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.45s); }
@keyframes sigPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.sig .inv__chip, .sig .inv__over { z-index: 2; }
.sig.why4__photo::after { background: linear-gradient(180deg, rgba(5, 4, 11, 0) 55%, rgba(5, 4, 11, 0.78) 100%); }
@media (prefers-reduced-motion: reduce) { .sig__ring, .sig__hit { animation: none; } }

/* Gap map (Why Monnai, 27 Oct): legacy data vs with Monnai, good customers and fraudsters, with and without a record */
.gapm { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: 26px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.gapm__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.gapm__title { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.gapm__toggle { display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--c-panel); }
.gapm__toggle button { min-height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.gapm__toggle button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }
.gapm__toggle button[data-gapm-mode="monnai"][aria-pressed="true"] { background: var(--c-accent); }
.gapm__grid { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: var(--s-2); }
.gapm__corner { grid-column: 1; grid-row: 1; }
.gapm__colh { grid-row: 1; margin: 0; text-align: center; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.gapm__colh:nth-of-type(1) { grid-column: 2; }
.gapm__colh:nth-of-type(2) { grid-column: 3; }
.gapm__rowh { grid-column: 1; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.gapm__rowh--1 { grid-row: 2; }
.gapm__rowh--2 { grid-row: 3; }
.gapm__cells { grid-column: 2 / 4; grid-row: 2 / 4; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: var(--s-2); margin: 0; padding: 0; }
.gapm__cell { display: grid; align-content: start; min-height: 132px; padding: var(--s-4); border-radius: 18px; background: var(--c-panel); border: 1.5px solid transparent; transition: background-color 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.gapm__cell--gap { background: var(--c-ground); border: 1.5px dashed var(--c-line-strong); }
[data-mode="monnai"] .gapm__cell--good { background: var(--c-accent-soft); border: 1.5px solid var(--c-accent); }
[data-mode="monnai"] .gapm__cell--bad { background: var(--c-risk-soft); border: 1.5px solid var(--c-risk-ink); }
.gapm__k { display: none; margin: 0 0 var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.gapm__state { display: grid; gap: var(--s-2); align-content: start; }
.gapm__state p { margin: 0; }
[data-mode="legacy"] .gapm__state--monnai, [data-mode="monnai"] .gapm__state--legacy { display: none; }
.js [data-mode="monnai"] .gapm__state--monnai { animation: swapIn 520ms var(--ease) both; }
.gapm__t { display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); line-height: 1.3; }
.gapm__ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.gapm__ic svg { width: 11px; height: 11px; }
.gapm__ic--ok { background: var(--c-accent); color: var(--c-on-accent); }
.gapm__ic--warn { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.gapm__ic--risk { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.gapm__sub { font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.4; }
.gapm__plus { justify-self: start; padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-ground); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); box-shadow: 0 0 0 1px var(--c-line); }
.gapm__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gapm__chips span { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-ground); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-line); }
.gapm__dec { justify-self: start; padding: 4px var(--s-3); border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-heavy); }
.gapm__dec--ok { background: var(--c-accent); color: var(--c-on-accent); }
.gapm__dec--risk { background: var(--c-status-decline); color: #FFFFFF; }
.gapm__proof { font-size: var(--fs-micro); line-height: 1.45; color: var(--c-ink-2); }
.gapm__proof a { color: var(--c-ink-2); }
.gapm__foot { font-size: var(--fs-small); color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .gapm__cell { transition: none; } .js [data-mode="monnai"] .gapm__state--monnai { animation: none; } }
@media (max-width: 1180px) and (min-width: 961px) { .why4__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
@media (max-width: 640px) {
  .gapm { padding: var(--s-4); }
  .gapm__grid { grid-template-columns: minmax(0, 1fr); }
  .gapm__colh, .gapm__rowh, .gapm__corner { display: none; }
  .gapm__cells { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); }
  .gapm__k { display: block; }
  .gapm__cell { min-height: 0; }
}
/* Both states share one grid cell, so the map keeps its height when it switches (no jump below it) */
.gapm__cell { grid-template-rows: auto 1fr; }
.gapm__k { grid-row: 1; grid-column: 1; }
.gapm__state { grid-row: 2; grid-column: 1; transition: opacity 0.45s var(--ease), visibility 0.45s; }
[data-mode="legacy"] .gapm__state--monnai, [data-mode="monnai"] .gapm__state--legacy { display: grid; visibility: hidden; opacity: 0; }
.js [data-mode="monnai"] .gapm__state--monnai { animation: none; }
@media (prefers-reduced-motion: reduce) { .gapm__state { transition: none; } }

/* ============ Homepage v5 (27 Oct 2026, afternoon): sober hero, use cases, stack fit, industries, trust, FAQ ============
   Eva's inspirations: Attio and Bindplane (sober hero, quiet moving background, big margins), Lovable (typed gradient
   words, gradients, FAQ), Heka ("Built for the teams that…", stack fit), Skello (top bar, solution carousel),
   Trustfull (industry banner). More contrast between blocks; buttons rather than underlined links. */
[data-page="home"] .section { padding-block: var(--sec5-y); }
[data-page="home"] .sec-head { margin-bottom: var(--s-8); }
.sec-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-self: center; }
.sec-head--center .lead { margin-inline: auto; }

/* Buttons: an arrow that nudges, a large size, an outline on dark */
.btn--lg { min-height: 56px; padding: 0 var(--s-6); }
.btn--arrow svg { flex: 0 0 auto; width: 18px; height: 18px; margin-right: -2px; transition: transform var(--dur-1) var(--ease); }
.btn--arrow:hover svg { transform: translateX(3px); }
.btn--outline-light { background: transparent; color: var(--c-on-ink); border-color: rgba(255, 255, 255, 0.6); }
.btn--outline-light:hover { background: var(--c-on-ink); color: var(--c-ink); border-color: var(--c-on-ink); text-decoration: none; }
.btn-row--center { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .btn--arrow svg { transition: none; } }

/* Typed emphasis (Lovable): the gradient words type themselves once, when the title comes into view.
   The real text stays in place (screen readers, copy, search) and shows again when typing ends;
   an aria-hidden copy on top does the typing. Without JavaScript nothing is hidden. */
[data-type] { position: relative; display: block; }
.js [data-type] { visibility: hidden; }
.js [data-type]:not(.tw-ready) { animation: twFallback 0s linear 2.5s forwards; }
@keyframes twFallback { to { visibility: visible; } }
.js [data-type].tw-done { visibility: visible; animation: none; }
.tw-ov { position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; display: block; visibility: visible; pointer-events: none; -webkit-user-select: none; user-select: none; }
.tw-ov--one { white-space: nowrap; }
/* the copy itself must be visible for its gradient to paint; its letters stay hidden until typed */
.grad-text > .tw-ov { background-image: inherit; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tw-c { visibility: hidden; }
.tw-c.is-on { visibility: visible; }
.tw-c.is-cur { position: relative; }
.tw-c.is-cur::after { content: ""; position: absolute; left: 100%; top: 0.1em; bottom: 0.06em; width: 0.06em; min-width: 3px; margin-left: 0.04em; border-radius: 2px; background: var(--c-brand-pink); visibility: visible; animation: twBlink 0.9s steps(1) infinite; }
.on-dark .tw-c.is-cur::after { background: var(--c-brand-yellow); }
@keyframes twBlink { 50% { opacity: 0; } }

/* ---- 1. Hero: sober and centered, a quiet grid with traveling signals, a soft glow ---- */
.hx5 { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 1.5rem + 7.5vw, 9.5rem) clamp(3rem, 2rem + 3vw, 5rem); background: var(--c-ground); text-align: center; }
.hx5__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hx5__grid { --cell: 64px; position: absolute; inset: 0; overflow: hidden; background-image: linear-gradient(to right, rgba(81, 0, 255, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(81, 0, 255, 0.07) 1px, transparent 1px); background-size: var(--cell) var(--cell); -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 34%, #000 22%, transparent 76%); mask-image: radial-gradient(ellipse 72% 78% at 50% 34%, #000 22%, transparent 76%); }
.beam { position: absolute; display: block; border-radius: 2px; opacity: 0.75; }
.beam--h { top: calc(var(--n) * var(--cell) - 0.5px); left: -220px; width: 200px; height: 2px; background: linear-gradient(90deg, rgba(81, 0, 255, 0), rgba(255, 0, 170, 0.7) 70%, rgba(251, 157, 0, 0.9)); animation: beamX var(--d) linear infinite; animation-delay: var(--w); }
.beam--v { left: calc(var(--n) * var(--cell) - 0.5px); top: -220px; width: 2px; height: 200px; background: linear-gradient(180deg, rgba(81, 0, 255, 0), rgba(81, 0, 255, 0.6) 65%, rgba(255, 0, 170, 0.85)); animation: beamY var(--d) linear infinite; animation-delay: var(--w); }
@keyframes beamX { to { transform: translateX(calc(100vw + 440px)); } }
@keyframes beamY { to { transform: translateY(1400px); } }
.hx5__glow { position: absolute; left: 50%; bottom: -40%; width: min(1320px, 150vw); aspect-ratio: 2.1 / 1; transform: translateX(-50%); background: radial-gradient(36% 52% at 32% 58%, rgba(251, 157, 0, 0.26), rgba(251, 157, 0, 0) 72%), radial-gradient(40% 58% at 66% 55%, rgba(255, 0, 170, 0.22), rgba(255, 0, 170, 0) 72%), radial-gradient(56% 70% at 50% 50%, rgba(81, 0, 255, 0.2), rgba(81, 0, 255, 0) 76%); filter: blur(8px); animation: glowDrift 14s ease-in-out infinite alternate; }
@keyframes glowDrift { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-47%) scale(1.07); } }
.hx5__in { position: relative; display: grid; justify-items: center; }
.hx5__kicker { display: inline-flex; align-items: center; gap: var(--s-2); max-width: 100%; padding: 7px var(--s-4) 7px var(--s-3); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 1px var(--c-line), 0 8px 24px -14px rgba(81, 0, 255, 0.45); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); line-height: 1.3; text-align: left; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hx5__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gradient-brand); box-shadow: 0 0 0 4px rgba(255, 0, 170, 0.12); }
.hx5__title { margin: var(--s-6) 0 0; font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem); line-height: 1.02; letter-spacing: -0.045em; font-weight: var(--fw-heavy); color: var(--c-ink); text-wrap: balance; }
.hx5__mission { margin: var(--s-6) auto 0; max-width: 34em; font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--c-ink-2); text-wrap: pretty; }
.hx5__ctas { justify-content: center; margin-top: var(--s-7); }
.hx5__facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); margin: var(--s-6) 0 0; padding: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.hx5__facts li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hx5__facts svg { width: 18px; height: 18px; color: var(--c-accent); }
.hx5__note { margin-top: var(--s-3); }
.hx5__logos { position: relative; margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.hx5__logos-k { margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .beam { display: none; } .hx5__glow { animation: none; } }
.hx5 .btn--secondary { background: var(--c-ground); }
.hx5 .btn--secondary:hover { background: var(--c-ink); }
@media (max-width: 640px) { .hx5__grid { --cell: 48px; } .beam--v { display: none; } .hx5__ctas .btn { flex: 1 1 100%; } .hx5__kicker { font-size: var(--fs-micro); } }

/* ---- 2. Use cases: who it is for, and a preview of each solution (plays like a carousel) ---- */
.sol5 { background: var(--gradient-soft); }
.sol { display: grid; gap: var(--s-5); }
.sol .day__track.sol__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.sol .sol__tab.day__node { display: inline-flex; align-items: center; justify-items: start; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-5) 0 var(--s-2); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink-2); font-weight: var(--fw-bold); text-align: left; overflow: hidden; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.sol .sol__tab.day__node:hover { box-shadow: 0 0 0 1.5px var(--c-ink); color: var(--c-ink); }
.sol .sol__tab.day__node[aria-selected="true"] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: 0 12px 30px -14px rgba(7, 5, 26, 0.6); }
.sol__ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }
.sol__ico svg { width: 18px; height: 18px; }
.sol__tab[aria-selected="true"] .sol__ico { background: rgba(255, 255, 255, 0.14); color: var(--c-on-ink); }
.sol__name { display: inline-flex; align-items: center; white-space: nowrap; }
.sol__beta { margin-left: var(--s-2); padding: 1px 7px; border-radius: var(--r-pill); background: var(--c-warn-soft); color: var(--c-warn-ink); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; }
.sol .sol__tab .day__bar { position: absolute; left: 22px; right: 22px; bottom: 6px; width: auto; height: 2px; margin: 0; background: rgba(255, 255, 255, 0.18); }
.sol .sol__tab .day__bar::after { background: var(--gradient-brand); }
.sol.is-playing .day__node[aria-selected="true"] .day__bar::after { animation-duration: 8000ms; }
.sol__stage { display: grid; }
.sol__stage > .sol__panel { grid-area: 1 / 1; }
.sol__stage > .sol__panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; }
.sol__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: center; padding: clamp(1.5rem, 0.8rem + 3vw, 3.5rem); border-radius: 32px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 40px 90px -50px rgba(40, 10, 120, 0.35); transition: opacity 0.35s var(--ease), visibility 0.35s; }
.sol__copy { display: grid; gap: var(--s-4); align-content: center; }
.sol__copy p + p, .pv p + p, .stk p + p, .indb__panel p + p, .trust5 p + p, .faq5 p + p, .poc5 p + p, .aib p + p, .why5 p + p, .glob5__story p + p, .case p + p { margin-top: 0; }
.sol__for { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.sol__h { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--fw-heavy); }
.tick { list-style: none; display: grid; gap: var(--s-3); margin: var(--s-1) 0; padding: 0; }
.tick li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; line-height: 1.45; }
.tick__i { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); }
.tick__i svg { width: 12px; height: 12px; }
.sol__copy .btn-row { margin-top: var(--s-2); }
.sol__prod { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }
.sol__prod > span:first-child { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-panel); color: var(--c-ink-2); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; }
.sol__prod a { padding: 1px 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-weight: var(--fw-bold); text-decoration: none; }
.sol__prod a:hover { background: var(--c-accent); color: var(--c-on-accent); }
.sol__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); color: var(--c-muted); }
/* The preview: what Monnai sends back for one request */
.pv { display: grid; border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); overflow: hidden; }
.pv__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--c-line); background: var(--c-panel); }
.pv__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.mark { display: inline-block; width: 26px; height: auto; flex: 0 0 auto; }
.pv__row { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
.pv__row + .pv__row { border-top: 1px dashed var(--c-line); }
.pv__k { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.pv__k svg { width: 16px; height: 16px; color: var(--c-accent); }
.pv__ctx { font-weight: var(--fw-bold); line-height: 1.3; }
.pv__ctx .beta { vertical-align: middle; }
.pv__inputs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.pv__inputs li { padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.pv__ai { background: linear-gradient(160deg, #F3EDFF, #FFF0F8); }
.pv__ai .ins { padding: var(--s-2) var(--s-3); }
.pv__decrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.pv__dec .dec { padding: 6px var(--s-4); font-size: var(--fs-h4); }
.pv__why { font-weight: var(--fw-bold); line-height: 1.3; }
.pv__meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-micro); color: var(--c-muted); }
.pv__meta span { display: inline-flex; align-items: center; gap: 6px; }
.pv__meta svg { width: 14px; height: 14px; color: var(--c-accent); }
.js .sol__panel.is-swapping .ins { animation: swapIn 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 120ms + 160ms); }
.js .sol__panel.is-swapping .pv__dec { animation: swapIn 420ms var(--ease) both; animation-delay: 560ms; }
@media (prefers-reduced-motion: reduce) { .js .sol__panel.is-swapping .ins, .js .sol__panel.is-swapping .pv__dec { animation: none; } .sol__panel { transition: none; } }
@media (max-width: 960px) { .sol__panel { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .sol .day__track.sol__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-block: var(--s-2); }
  .sol .sol__tab.day__node { flex: 0 0 auto; scroll-snap-align: center; }
}
@media (max-width: 520px) { .sol__panel { border-radius: 24px; } .pv__row, .pv__top { padding-inline: var(--s-4); } }

/* ---- 3. Why Monnai: the gap map, with what sets Monnai apart beside it ---- */
.why5__grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.why5 .sec-head { margin-bottom: var(--s-7); }
.why5 .sec-head h2 { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem); }
.outc5 { list-style: none; display: grid; gap: var(--s-5); margin: 0; padding: 0; }
.outc5 li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.outc5 .outc__icon { margin: 0; }
.outc5 strong { display: block; font-size: var(--fs-h4); letter-spacing: -0.01em; }
.outc5 li > span:last-child > span { display: block; font-size: var(--fs-small); color: var(--c-ink-2); }
.why5 .gapm { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); }
@media (max-width: 1024px) { .why5__grid { grid-template-columns: 1fr; } .why5 .gapm { position: static; } .outc5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .outc5 { grid-template-columns: 1fr; } }

/* ---- 4. Our AI (dark band): the story behind every customer, with the signal iris ---- */
.aib { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sec5-y); background: var(--c-ink-deep); color: var(--c-on-ink); }
.aib__glow { position: absolute; z-index: -1; right: -18%; bottom: -55%; width: 80vw; max-width: 1100px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(81, 0, 255, 0.38), rgba(255, 0, 170, 0.12) 55%, rgba(255, 0, 170, 0) 100%); pointer-events: none; }
.aib__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.aib .sec-head { margin-bottom: var(--s-7); }
.aib .lead strong { color: var(--c-on-ink); }
.aib__pts { list-style: none; display: grid; gap: var(--s-5); margin: 0; padding: 0; }
.aib__pts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.aib__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(143, 102, 255, 0.18); color: var(--c-violet-on-dark); }
.aib__icon svg { width: 22px; height: 22px; }
.aib__pts strong { display: block; font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--c-on-ink); }
.aib__pts li > span:last-child > span { display: block; font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.aib .inv__chip { color: var(--c-ink); }
.aib__iris { min-height: 560px; height: 100%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 120px -40px rgba(81, 0, 255, 0.55); }
.aib__iris::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 4, 11, 0) 55%, rgba(5, 4, 11, 0.8) 100%); pointer-events: none; }
@media (max-width: 960px) { .aib__grid { grid-template-columns: 1fr; } .aib__iris { min-height: 0; aspect-ratio: 1 / 1; } }
@media (max-width: 520px) { .aib__iris { aspect-ratio: 4 / 5; } }

/* ---- 5. Stack fit: your tools and Monnai both feed your decision engine ---- */
.stk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) minmax(0, 1fr); align-items: center; }
.stk__col { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6); border-radius: 28px; }
.stk__yours { background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.stk__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.stk__tools { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.stk__tools li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: var(--s-3); border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.stk__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--c-panel); color: var(--c-ink-2); }
.stk__ic svg { width: 20px; height: 20px; }
.stk__tools strong { display: block; font-size: var(--fs-small); line-height: 1.3; }
.stk__tools li > span:last-child > span { display: block; font-size: var(--fs-micro); line-height: 1.35; color: var(--c-muted); }
.stk__hub { position: relative; display: grid; align-items: center; padding-inline: 40px; }
.stk__engine { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4); border-radius: 26px; background: var(--c-ink); color: var(--c-on-ink); text-align: center; box-shadow: var(--shadow-float); }
.stk__eic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: var(--c-on-ink); }
.stk__eic svg { width: 24px; height: 24px; }
.stk__ek { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.stk__out { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.stk__out .dec { padding: 4px 9px; font-size: var(--fs-micro); }
.stk__rules { font-size: var(--fs-micro); color: var(--c-on-ink-muted); }
.stk__wire { position: absolute; top: 50%; width: 40px; height: 2px; margin-top: -1px; }
.stk__wire::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; border-top: 2px solid; border-right: 2px solid; }
.stk__wire--a { left: 0; background: var(--c-line-strong); color: var(--c-line-strong); }
.stk__wire--a::after { right: 1px; transform: translateY(-50%) rotate(45deg); }
.stk__wire--b { right: 0; overflow: visible; background: linear-gradient(90deg, var(--g-4), var(--g-3)); color: var(--g-4); }
.stk__wire--b::after { left: 1px; transform: translateY(-50%) rotate(-135deg); }
.stk__wire--b i { position: absolute; inset: 0; overflow: hidden; }
.stk__wire--b i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 5px 16px); animation: wireFlow 0.8s linear infinite; }
@keyframes wireFlow { to { transform: translateX(-16px); } }
.stk__monnai { position: relative; background: var(--c-ink-deep); color: var(--c-on-ink); box-shadow: 0 40px 90px -46px rgba(81, 0, 255, 0.75); }
.stk__monnai::before { content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; background: var(--gradient-brand); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.stk__monnai .stk__k { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; text-transform: none; color: var(--c-on-ink); }
.stk__plus { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gradient-brand); color: var(--c-on-ink); font-size: 1.125rem; line-height: 1; }
.tick--light li { font-size: var(--fs-small); color: var(--c-on-ink); }
.tick--light .tick__i { background: rgba(143, 102, 255, 0.28); color: var(--c-on-ink); }
.tick--light .beta { margin-left: var(--s-1); }
.stk__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-micro); color: var(--c-on-ink-muted); }
.stk__meta span { display: inline-flex; align-items: center; gap: 6px; }
.stk__meta svg { width: 14px; height: 14px; color: var(--c-brand-yellow); }
.stk__cost { display: flex; align-items: center; gap: var(--s-3); max-width: 780px; margin: var(--s-7) auto var(--s-6); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); border-radius: var(--r-pill); background: var(--c-warn-soft); font-size: var(--fs-small); color: var(--c-ink); }
.stk__cic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-ground); color: var(--c-warn-ink); }
.stk__cic svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .stk__wire--b i::before { animation: none; } }
@media (max-width: 1024px) {
  .stk { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .stk__hub { padding: 44px 0; }
  .stk__wire { left: 50%; right: auto; width: 2px; height: 44px; margin: 0 0 0 -1px; }
  .stk__wire--a { top: 0; }
  .stk__wire--a::after { top: auto; bottom: 1px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .stk__wire--b { top: auto; bottom: 0; background: linear-gradient(0deg, var(--g-4), var(--g-3)); }
  .stk__wire--b::after { top: 1px; left: 50%; transform: translateX(-50%) rotate(-45deg); }
  .stk__wire--b i::before { left: 0; right: 0; top: 0; bottom: -16px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 5px 16px); animation-name: wireFlowV; }
  @keyframes wireFlowV { to { transform: translateY(-16px); } }
}
@media (max-width: 640px) { .stk__col { padding: var(--s-5); } .stk__cost { border-radius: 22px; align-items: flex-start; } }

/* ---- 6. Global and local ---- */
.glob5 .map { margin-top: 0; }
.glob5__story { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }

/* ---- 7. Industries banner: a photo behind, one tab per industry ---- */
.indb { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sec5-y); background: var(--c-ink-deep); color: var(--c-on-ink); }
.indb__media { position: absolute; inset: 0; z-index: -2; }
.indb__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 70% 50%; opacity: 0; transform: scale(1.05); transition: opacity 0.8s var(--ease), transform 7s var(--ease); }
.indb__img.is-on { opacity: 1; transform: scale(1); }
.indb__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 5, 26, 0.94) 0%, rgba(7, 5, 26, 0.82) 36%, rgba(7, 5, 26, 0.3) 68%, rgba(7, 5, 26, 0.38) 100%), linear-gradient(0deg, rgba(7, 5, 26, 0.6), rgba(7, 5, 26, 0) 45%); }
.indb__in { display: grid; gap: var(--s-6); }
.indb .sec-head { margin-bottom: 0; max-width: 660px; }
.indb__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.indb__tab { min-height: 44px; padding: 0 var(--s-4); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.07); color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.indb__tab:hover { background: rgba(255, 255, 255, 0.16); }
.indb__tab[aria-selected="true"] { background: var(--c-on-ink); border-color: var(--c-on-ink); color: var(--c-ink); }
.indb__panels { display: grid; max-width: 620px; }
.indb__panels > .indb__panel { grid-area: 1 / 1; }
.indb__panels > .indb__panel[hidden] { display: grid !important; visibility: hidden; opacity: 0; }
.indb__panel { display: grid; gap: var(--s-4); align-content: start; transition: opacity 0.4s var(--ease), visibility 0.4s; }
.indb__panel h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--fw-heavy); color: var(--c-on-ink); }
.indb__panel > p:not(.small) { font-size: var(--fs-lead); line-height: 1.5; color: var(--c-on-ink-muted); max-width: 52ch; }
.indb__panel .btn-row { margin-top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .indb__img { transition: opacity 0.2s; transform: none; } .indb__panel { transition: none; } }
@media (max-width: 860px) {
  .indb__shade { background: linear-gradient(180deg, rgba(7, 5, 26, 0.78) 0%, rgba(7, 5, 26, 0.86) 45%, rgba(7, 5, 26, 0.95) 100%); }
  .indb__tabs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: var(--s-1) var(--gutter); scrollbar-width: none; }
  .indb__tabs::-webkit-scrollbar { display: none; }
  .indb__tab { flex: 0 0 auto; }
}

/* ---- 8. Customers: logos on the cards, buttons instead of underlined links ---- */
.case__logo { display: block; width: auto; max-width: 150px; margin-bottom: var(--s-2); opacity: 0.88; }
.cases5 .cases { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.cases5 .case { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.cases5 .case__num { font-size: clamp(2.5rem, 1.6rem + 2.2vw, 3.75rem); white-space: nowrap; }
.cases5 .case__label { margin-bottom: var(--s-3); }
.cases5 .case__quote { margin-bottom: var(--s-3); }
@media (max-width: 1100px) { .cases5 .cases { grid-template-columns: 1fr; } }
.case__logo.clogo--white { filter: none; opacity: 0.95; }
.case__logo.clogo--mono.clogo--white { filter: brightness(0) invert(1); }
.case .btn { justify-self: start; margin-top: auto; }
.case--global .btn--light { background: var(--c-on-ink); color: var(--c-ink); }
.cases5__note { margin-top: var(--s-5); }
.cases5 .btn-row--center { margin-top: var(--s-7); }

/* ---- 9. Trust and security: certification slots stay empty until Monnai confirms (J14) ---- */
.trust5__badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5) var(--s-7); margin: 0; padding: 0; }
.trust5__slot { display: grid; justify-items: center; gap: 2px; width: 140px; text-align: center; }
.trust5__ring { width: 96px; height: 96px; margin-bottom: var(--s-2); border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--c-line-strong); background: var(--c-ground); color: var(--c-muted); }
.trust5__ring svg { width: 34px; height: 34px; }
.trust5__name { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.trust5__st { font-size: var(--fs-micro); color: var(--c-muted); }
.trust5__note { margin-top: var(--s-4); text-align: center; }
.trust5__pts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-8) 0 0; padding: 0; }
.trust5__pts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: start; padding: var(--s-5); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.trust5__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--c-accent-soft); color: var(--c-accent); }
.trust5__ic svg { width: 22px; height: 22px; }
.trust5__pts strong { display: block; font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: 1.25; }
.trust5__pts li > span:last-child > span { display: block; margin-top: var(--s-1); font-size: var(--fs-small); color: var(--c-ink-2); }
.trust5 .btn-row--center { margin-top: var(--s-7); }
@media (max-width: 960px) { .trust5__pts { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (max-width: 520px) { .trust5__badges { gap: var(--s-4); } .trust5__slot { width: 120px; } .trust5__ring { width: 80px; height: 80px; } }

/* ---- 10. FAQ (Lovable's sobriety) ---- */
.faq5__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.faq5__head { position: sticky; top: calc(var(--hdr-h) + var(--s-6)); }
[data-page="home"] .faq5__head { margin-bottom: 0; }
.faq5__head .btn-row { margin-top: var(--s-2); }
.faq5__list { display: grid; gap: var(--s-3); }
.qa5 { border-radius: 20px; background: var(--c-panel); transition: background-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.qa5[open] { background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 18px 44px -28px rgba(20, 10, 60, 0.3); }
.qa5 summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 68px; padding: var(--s-4) var(--s-5); list-style: none; cursor: pointer; font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: -0.01em; line-height: 1.3; }
.qa5 summary::-webkit-details-marker { display: none; }
.qa5 summary:focus-visible { outline-offset: -3px; border-radius: 20px; }
.qa5__icon { position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); transition: background-color var(--dur-2) var(--ease); }
.qa5__icon::before, .qa5__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 1px; background: var(--c-ink); transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.qa5__icon::after { transform: rotate(90deg); }
.qa5[open] .qa5__icon { background: var(--c-ink); box-shadow: none; }
.qa5[open] .qa5__icon::before, .qa5[open] .qa5__icon::after { background: var(--c-on-ink); }
.qa5[open] .qa5__icon::after { transform: rotate(0deg); }
.qa5__a { padding: 0 var(--s-5) var(--s-5); max-width: 66ch; color: var(--c-ink-2); }
@media (max-width: 960px) { .faq5__grid { grid-template-columns: 1fr; } .faq5__head { position: static; } }
@media (max-width: 520px) { .qa5 summary { padding-inline: var(--s-4); font-size: var(--fs-body); } .qa5__a { padding-inline: var(--s-4); } }

/* ---- 11. Proof of concept: the closing call, on the brand gradient ---- */
.poc5 { padding-block: var(--s-6) var(--sec5-y); background: var(--c-ground); }
.poc5__card { position: relative; overflow: hidden; isolation: isolate; border-radius: 36px; background: #1A0B4A; color: var(--c-on-ink); }
.poc5__bg { position: absolute; inset: -10%; z-index: -1; background: radial-gradient(55% 75% at 8% 0%, rgba(81, 0, 255, 0.95), rgba(81, 0, 255, 0) 70%), radial-gradient(40% 60% at 96% 6%, rgba(255, 0, 170, 0.5), rgba(255, 0, 170, 0) 70%), radial-gradient(45% 65% at 100% 100%, rgba(251, 157, 0, 0.42), rgba(251, 157, 0, 0) 70%), radial-gradient(55% 60% at 28% 104%, rgba(166, 13, 179, 0.55), rgba(166, 13, 179, 0) 70%), linear-gradient(135deg, #2A0B7A 0%, #14063A 100%); animation: pocDrift 16s ease-in-out infinite alternate; }
@keyframes pocDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(2%, -2%) scale(1.05); } }
.poc5__in { display: grid; gap: var(--s-6); padding: clamp(2rem, 0.8rem + 4.5vw, 5.5rem); }
.poc5 .sec-head { margin-bottom: 0; max-width: 900px; }
.poc5 .eyebrow { color: var(--c-on-ink); }
.poc5 .lead { color: rgba(255, 255, 255, 0.84); }
.on-dark .grad-text.grad-text--warm { background-image: var(--gradient-text-warm); color: #FFD08A; }
.poc5__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; counter-reset: poc5; }
.poc5__steps li { counter-increment: poc5; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 22px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.poc5__steps li p + p { margin-top: 0; }
.poc5__icon { width: 44px; height: 44px; margin-bottom: var(--s-2); border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: var(--c-on-ink); }
.poc5__icon svg { width: 22px; height: 22px; }
.poc5__steps h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; color: var(--c-on-ink); }
.poc5__steps h3::before { content: counter(poc5, decimal-leading-zero) "  "; white-space: pre; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.66); }
.poc5__steps p { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.8); }
.poc5__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5) var(--s-8); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.poc5__see-k { margin-bottom: var(--s-3); font-weight: var(--fw-bold); }
.poc5__see { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; color: rgba(255, 255, 255, 0.88); }
.poc5__see li { position: relative; padding-left: var(--s-5); }
.poc5__see li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; border-radius: 50%; background: var(--gradient-text-warm); }
.poc5__note { margin-top: calc(-1 * var(--s-2)); }
@media (prefers-reduced-motion: reduce) { .poc5__bg { animation: none; } }
@media (max-width: 1100px) { .poc5__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .poc5__steps { grid-template-columns: 1fr; } .poc5__card { border-radius: 28px; } .poc5__bottom .btn { flex: 1 1 100%; white-space: normal; text-align: center; } }

/* ---- Top bar: book a demo (Skello). Lives in the fixed header on every page; folds away once you scroll ---- */
[data-page] { padding-top: calc(var(--hdr-h) + var(--ann-h, 0px)); }
.ann { position: relative; overflow: hidden; max-height: 120px; background: var(--c-ink-deep); color: var(--c-on-ink); transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease); }
.ann::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 220% at 12% 50%, rgba(81, 0, 255, 0.6), rgba(81, 0, 255, 0) 70%), radial-gradient(34% 200% at 88% 50%, rgba(255, 0, 170, 0.38), rgba(255, 0, 170, 0) 70%); pointer-events: none; }
.ann__in { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-2) var(--s-4); min-height: 44px; padding-block: 6px; padding-right: calc(var(--gutter) + 40px); padding-left: calc(var(--gutter) + 40px); }
.ann__text { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; }
.ann__tag { flex: 0 0 auto; padding: 2px 10px; border-radius: var(--r-pill); background: var(--gradient-brand); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; }
.ann__short { display: none; }
.ann__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s-3) 0 var(--s-4); border-radius: var(--r-pill); background: var(--c-on-ink); color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; }
.ann__cta:hover { background: var(--c-accent-soft); color: var(--c-ink); text-decoration: none; }
.ann__cta svg { width: 16px; height: 16px; }
.ann__x { position: absolute; top: 50%; right: var(--gutter); width: 32px; height: 32px; margin-top: -16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.78); display: grid; place-items: center; }
.ann__x:hover { background: rgba(255, 255, 255, 0.14); color: var(--c-on-ink); }
.ann__x svg { width: 16px; height: 16px; }
.ann :focus-visible { outline-color: var(--c-on-ink); }
.is-scrolled .ann, .menu-open .ann { max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), visibility 0s 0.3s; }
.mm-panel { max-height: calc(100vh - var(--hdr-h) - var(--ann-now, 0px) - env(safe-area-inset-top, 0px)); }
@supports (height: 100dvh) { .mm-panel { max-height: calc(100dvh - var(--hdr-h) - var(--ann-now, 0px) - env(safe-area-inset-top, 0px)); } }
@media (prefers-reduced-motion: reduce) { .ann { transition: none; } }
@media (max-width: 720px) {
  .ann__tag, .ann__long { display: none; }
  .ann__short { display: inline; }
  .ann__in { justify-content: flex-start; column-gap: var(--s-3); padding-left: var(--gutter); }
  .ann__text { font-size: 0.875rem; }
}

/* ---- Customers menu: logos on industry photos (Eva, 27 Oct: for the case studies, in the menu) ---- */
.mm-stories { display: grid; grid-template-columns: minmax(200px, 0.75fr) minmax(0, 3fr); gap: var(--s-6); padding-block: var(--s-6) var(--s-7); }
.mm-stories__intro { display: grid; gap: var(--s-3); align-content: start; }
.mm-stories__intro p + p { margin-top: 0; }
.mm-stories__title { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.15; }
.mm-stories__line { font-size: var(--fs-small); color: var(--c-muted); }
.mm-stories__intro .btn { justify-self: start; }
.cs-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
.cs-tile { position: relative; isolation: isolate; display: grid; align-content: space-between; gap: var(--s-5); min-height: 240px; height: 100%; padding: var(--s-4); border-radius: 20px; overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); text-decoration: none; }
.cs-tile:hover { color: var(--c-on-ink); text-decoration: none; }
.cs-tile__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--ease); }
.cs-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 5, 26, 0.5) 0%, rgba(7, 5, 26, 0.18) 38%, rgba(7, 5, 26, 0.9) 100%); }
.cs-tile:hover .cs-tile__photo, .cs-tile:focus-visible .cs-tile__photo { transform: scale(1.06); }
.cs-tile__logo { display: block; height: 26px; width: auto; max-width: 75%; object-fit: contain; object-position: left center; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45)); }
.cs-tile__logo--mono { filter: brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0, 0, 0, 0.45)); }
.cs-tile__body { display: grid; gap: 2px; }
.cs-tile__num { font-size: 2rem; line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; }
.cs-tile__what { font-size: var(--fs-small); line-height: 1.3; color: rgba(255, 255, 255, 0.9); }
.cs-tile__tag { margin-top: var(--s-1); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.72); }
.cs-tile:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cs-tile__photo { transition: none; } }
.mnav .cs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block: var(--s-3); }
.mnav .cs-tile { min-height: 176px; padding: var(--s-3); gap: var(--s-3); }
.mnav .cs-tile__num { font-size: 1.5rem; }
.mnav .cs-tile__logo { height: 20px; }
@media (max-width: 380px) { .mnav .cs-tiles { grid-template-columns: 1fr; } }

.mnav__rail > ul { list-style: none; margin: 0; padding: 0; }

/* ============ Homepage v5.1 (27 Oct 2026, evening): lighter, a light touch under the mouse, a clickable map ============ */
/* Use cases: no caption, no products line, no progress line under the tabs (it still times the carousel, unseen) */
.sol .sol__tab .day__bar { opacity: 0; }
.sol__foot { justify-content: flex-end; }
.sol__play.day__play { width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
.inl { color: var(--c-accent-ink); font-weight: var(--fw-bold); text-decoration: none; }
.inl:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }

/* A light touch under the mouse: a soft glow follows the cursor inside cards, cards lift a little, icons nudge.
   Only with a mouse (hover: hover) and never with reduced motion. */
.has-spot { position: relative; isolation: isolate; }
.spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(81, 0, 255, 0.11), rgba(255, 0, 170, 0.05) 45%, rgba(255, 0, 170, 0) 70%); transition: opacity 0.35s var(--ease); }
.has-spot:hover > .spot { opacity: 1; }
.on-dark .spot, .stk__monnai > .spot, .stk__engine > .spot, .case--global > .spot { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 65%); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .case, .trust5__pts li, .poc5__steps li, .stk__tools li, .outc5 li, .aib__pts li { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
  .case:hover, .trust5__pts li:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--c-line), 0 22px 44px -26px rgba(20, 10, 60, 0.35); }
  .case--global:hover { box-shadow: 0 22px 44px -22px rgba(81, 0, 255, 0.55); }
  .poc5__steps li:hover { transform: translateY(-4px); }
  .stk__tools li:hover { transform: translateX(4px); }
  .outc__icon, .aib__icon, .trust5__ic, .stk__ic, .ai3__icon, .poc5__icon { transition: transform 0.35s var(--ease), background-color 0.35s var(--ease), color 0.35s var(--ease); }
  .outc5 li:hover .outc__icon, .trust5__pts li:hover .trust5__ic, .glob3 li:hover .ai3__icon { transform: translateY(-3px) rotate(-6deg); background: var(--c-accent); color: var(--c-on-accent); }
  .aib__pts li:hover .aib__icon, .poc5__steps li:hover .poc5__icon { transform: translateY(-3px) rotate(-6deg); }
  .stk__tools li:hover .stk__ic { background: var(--c-accent-soft); color: var(--c-accent); }
  /* Stack fit: hover a side and its wire carries the signal into your decision engine */
  .stk__wire--a::before { content: ""; position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(90deg, var(--c-accent) 0 5px, rgba(81, 0, 255, 0) 5px 12px); transition: opacity 0.3s var(--ease); animation: wireFlowR 0.8s linear infinite; }
  .stk__yours:hover + .stk__hub .stk__wire--a::before { opacity: 1; }
  .stk__yours:hover + .stk__hub .stk__engine, .stk:has(.stk__monnai:hover) .stk__engine { box-shadow: 0 0 0 4px rgba(255, 0, 170, 0.22), var(--shadow-float); }
  .stk:has(.stk__monnai:hover) .stk__wire--b i::before { animation-duration: 0.35s; }
  .stk__engine { transition: box-shadow 0.3s var(--ease); }
  /* Menus: an arrow slides in next to the link under the mouse */
  .mm-link .mm-label::after { content: "→"; display: inline-block; width: 1em; margin-left: 6px; margin-right: calc(-1em - 6px); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); } /* takes no room: never makes a label wrap */
  .mm-link:hover .mm-label::after { opacity: 1; transform: none; }
}
@keyframes wireFlowR { from { background-position: 0 0; } to { background-position: 12px 0; } }
@media (max-width: 1024px) { .stk__wire--a::before { display: none; } }

/* Hero: the grid lights up around the mouse */
.hx5__hot { --cell: 64px; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: radial-gradient(circle at var(--mx, -400px) var(--my, -400px), rgba(255, 0, 170, 0.07), rgba(255, 0, 170, 0) 160px), linear-gradient(to right, rgba(81, 0, 255, 0.42) 1px, transparent 1px), linear-gradient(to bottom, rgba(81, 0, 255, 0.42) 1px, transparent 1px); background-size: 100% 100%, var(--cell) var(--cell), var(--cell) var(--cell); -webkit-mask-image: radial-gradient(230px circle at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 100%); mask-image: radial-gradient(230px circle at var(--mx, -400px) var(--my, -400px), #000 0%, rgba(0, 0, 0, 0.4) 45%, transparent 100%); transition: opacity 0.4s var(--ease); }
.hx5.is-hot .hx5__hot { opacity: 1; }
@media (max-width: 640px) { .hx5__hot { --cell: 48px; } }
@media (hover: none), (prefers-reduced-motion: reduce) { .hx5__hot { display: none; } }

/* Top bar: one button only */
.ann__in { padding-left: var(--gutter); padding-right: var(--gutter); }

/* Menus: plain lists, like the industry menus Eva sent (no line of text under each link) */
.mm-line, .mm-desc, .mm-rail__line, .mnav__desc, .mnav__line { display: none; }
.mm-g .mm-h { margin-bottom: var(--s-1); }
.mm-flat .mm-link { padding-block: var(--s-2); }

/* ---- Clickable map: hover a country, click it or pick a market, see Monnai there ---- */
.map5 { display: grid; gap: var(--s-4); }
.map5__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.map5__chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.map5__chips-k { margin-right: var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.map5__chip { min-height: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-bold); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.map5__chip:hover { box-shadow: 0 0 0 1.5px var(--c-accent); color: var(--c-accent-ink); }
.map5__chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: none; }
.map5__more select { min-height: 36px; padding: 0 var(--s-6) 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--c-ground) url("/assets/img/css/f37ac8b971.svg") no-repeat right 12px center; box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-medium); -webkit-appearance: none; appearance: none; cursor: pointer; }
.map5__frame { position: relative; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.map5__map { margin: 0; }
.map5 svg { cursor: pointer; }
.map5 .mc { fill: none; stroke-width: 4.2; stroke-linecap: round; transition: stroke 0.25s var(--ease), stroke-width 0.25s var(--ease); }
.map5 .mc--live { stroke: var(--c-map-live); }
.map5 .mc--verify { stroke: var(--c-map-verify); }
.map5 .mc--signals { stroke: var(--c-map-signals); }
.map5 .mc--home { stroke: var(--c-brand-blue); stroke-width: 5.2; }
.map5 .mc.is-hover { stroke: var(--c-accent-ink); stroke-width: 6; }
.map5 .mc.is-sel { stroke: var(--c-brand-pink); stroke-width: 6.2; }
.map5 .mkg { cursor: pointer; }
.map5 .mkg.is-sel .pin { fill: var(--c-brand-pink); }
.map5 .mkg.is-sel .pulse { stroke: var(--c-brand-pink); }
.map5 .mlabel { stroke: var(--c-ground); }
.map5__tip { position: absolute; z-index: 2; left: 0; top: 0; margin: 0; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 12px)); }
.map5__hint { position: absolute; right: var(--s-4); bottom: var(--s-3); margin: 0; font-size: var(--fs-micro); color: var(--c-muted); pointer-events: none; }
.map5__cards { display: grid; }
.map5__cards > * { grid-area: 1 / 1; }
.mcard { display: grid; gap: var(--s-5); padding: var(--s-6); border-radius: 26px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 30px 70px -48px rgba(40, 10, 120, 0.35); }
.mcard p + p, .map5 p + p { margin-top: 0; }
.js .mcard:not([hidden]) { animation: swapIn 420ms var(--ease) both; }
.mcard__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-line); }
.mcard__k { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-muted); }
.mcard__home { padding: 2px 10px; border-radius: var(--r-pill); background: var(--gradient-brand); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.mcard__name { margin-top: var(--s-1); font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1.1; }
.mcard__tiers { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.mcard__tiers li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.mcard__tiers .sw { width: 9px; height: 9px; }
.mcard__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.mcard__grid--lite { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard__col { display: grid; gap: var(--s-3); align-content: start; }
.mcard__ck { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.mcard__stats { list-style: none; display: grid; gap: var(--s-3); margin: 0; padding: 0; }
.mcard__stats li { display: grid; gap: 2px; }
.mcard__stats li span { font-size: var(--fs-small); color: var(--c-ink-2); }
.xx { justify-self: start; font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.1; color: var(--c-muted); border-bottom: 2px dashed var(--c-gap-line); }
.mcard__col .xx { font-size: var(--fs-h3); }
.tick--sm li { font-size: var(--fs-small); grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); }
.tick--sm .tick__i { width: 20px; height: 20px; }
.tick--sm .tick__i svg { width: 10px; height: 10px; }
.tick--sm .xx { font-size: inherit; letter-spacing: 0; border-bottom-width: 1.5px; }
.mcard__who { display: grid; gap: 2px; font-size: var(--fs-small); color: var(--c-ink-2); }
.mcard__who span { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink); }
.mcard__proof { font-size: var(--fs-body); line-height: 1.4; color: var(--c-ink); }
.mcard__proof strong { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--c-accent); }
.mcard__proof span { display: block; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.mcard .btn-row { margin-top: var(--s-1); }
.map5__notes { margin: 0; }
@media (prefers-reduced-motion: reduce) { .js .mcard:not([hidden]) { animation: none; } .map5 .mc { transition: none; } }
@media (max-width: 960px) { .mcard__grid { grid-template-columns: 1fr; gap: var(--s-5); } .mcard__grid--lite { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .mcard { padding: var(--s-5); } .map5__hint { display: none; } .map5__chips-k { width: 100%; } }
.mm-label .gap { font-size: 0.7em; vertical-align: 0.15em; }
/* Use cases, lighter still: a smaller headline (two lines, not three) */
.sol__h { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.12; }
/* Monnai in figures ("Who we are" slide, Eva 27 Oct): four numbers above the map */
.stats5 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--s-2); padding: 0; }
.stats5 li { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-2) var(--s-5); border-left: 1px solid var(--c-line); }
.stats5 li:first-child { border-left: 0; padding-left: 0; }
.stats5 strong { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); justify-self: start; }
.stats5 span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.stats5__note { margin: 0 0 var(--s-6); }
.glob5 .map5 { margin-top: var(--s-4); }
@media (max-width: 860px) { .stats5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } .stats5 li:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (forced-colors: active) { .stats5 strong { -webkit-text-fill-color: currentColor; background: none; } }

/* ------------------------------------------------------------------
   v5.3 (27 Oct, night) — menus: Use cases and Products
   An icon, the name and a few words on each link (after a competitor's "fraud types", which Eva liked).
   The other menus stay plain lists. */
.mm-link--tile { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--s-3); align-items: start; }
.mm-ico { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; color: var(--c-accent); transition: color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.mm-ico svg { width: 22px; height: 22px; }
.mm-tx { display: grid; min-width: 0; }
.mm-panel--tiles .mm-line, .mnav__pane--tiles .mm-line { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.4; }
.mm-panel--tiles .mm-featured .mm-line, .mnav__pane--tiles .mnav__featured .mm-line { display: none; }
.mm-panel--tiles .mm-flat__groups { column-gap: var(--s-7); }
.mm-panel--tiles .mm-g__list { gap: 2px; }
.mm-panel--tiles .mm-g__list .mm-link { padding-block: var(--s-3); }
.mm-panel--tiles .mm-g__list .mm-label { font-weight: var(--fw-bold); }
.mm-link--tile:hover .mm-ico, .mm-link--tile:focus-visible .mm-ico { color: var(--c-accent-ink); }
.mm-link--tile[aria-current="page"] .mm-ico { color: var(--c-accent-ink); }
.mm-g > .gap, .mnav__group > .gap { justify-self: start; }
/* Products: Verification and Business Risk Intelligence stacked on the left, Risk Intelligence across two columns */
.mm-flat__groups--products .mm-g--wide { grid-column: span 2; grid-row: span 2; }
.mm-flat__groups--products .mm-g--wide .mm-g__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); }
.mnav__pane--tiles .mnav__group .mm-link { padding-block: var(--s-3); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .mm-link--tile:hover .mm-ico { transform: translateY(-1px) scale(1.08); }
}

/* ------------------------------------------------------------------
   v5.3 — hero: speed behind "in milliseconds." (Eva, 27 Oct, night)
   Thin streaks in the brand gradient run behind the words, left to right, once they are typed,
   then again every few seconds. Behind the letters, masked at both ends; off with reduced motion. */
.hx5__fast { position: relative; display: block; width: fit-content; max-width: 100%; margin-inline: auto; isolation: isolate; }
.hx5__speed { position: absolute; inset: 0.06em -0.7em 0.02em; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.hx5__speed i, .hx5__speed b { position: absolute; left: 0; display: block; opacity: 0; transform: translateX(-105%); will-change: transform, opacity; }
.hx5__speed i { height: 0.03em; min-height: 1.5px; border-radius: 1em; background: var(--gradient-speed); }
.hx5__speed i:nth-child(1) { top: 24%; width: 44%; --to: 245%; }
.hx5__speed i:nth-child(2) { top: 40%; width: 30%; --to: 360%; }
.hx5__speed i:nth-child(3) { top: 57%; width: 54%; --to: 205%; height: 0.045em; }
.hx5__speed i:nth-child(4) { top: 71%; width: 26%; --to: 415%; }
.hx5__speed i:nth-child(5) { top: 85%; width: 38%; --to: 285%; }
.hx5__speed b { top: 8%; height: 84%; width: 36%; --to: 300%; background: var(--glow-speed); }
.js .hx5__fast:has(.tw-done) .hx5__speed > * { animation: hxSpeed 6.5s cubic-bezier(.55, .1, .25, 1) infinite; }
.js .hx5__fast:has(.tw-done) .hx5__speed i:nth-child(2) { animation-delay: 0.09s; }
.js .hx5__fast:has(.tw-done) .hx5__speed i:nth-child(3) { animation-delay: 0.04s; }
.js .hx5__fast:has(.tw-done) .hx5__speed i:nth-child(4) { animation-delay: 0.15s; }
.js .hx5__fast:has(.tw-done) .hx5__speed i:nth-child(5) { animation-delay: 0.11s; }
.js .hx5__fast:has(.tw-done) .hx5__speed b { animation-delay: 0.02s; }
@keyframes hxSpeed {
  0% { transform: translateX(-105%); opacity: 0; }
  2% { opacity: 1; }
  9% { opacity: 1; }
  12% { transform: translateX(var(--to, 250%)); opacity: 0; }
  100% { transform: translateX(var(--to, 250%)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hx5__speed { display: none; } }
@media (forced-colors: active) { .hx5__speed { display: none; } }
.mm-label .gap { white-space: nowrap; }
@media (max-width: 1366px) {
  .mm-panel--tiles .mm-flat--feat { grid-template-columns: minmax(0, 1fr) 230px; }
  .mm-panel--tiles .mm-flat__groups { column-gap: var(--s-5); }
}

/* v5.3 — use-case cards without the request row (Eva, 27 Oct, night): the beta tag sits in the card's top bar */
.pv__tags { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-2); }

/* ------------------------------------------------------------------
   v5.3 — Customers, lighter (Eva, 27 Oct, night: "too heavy, not UX oriented")
   One row of results on a soft panel; each result is one link (logo, figure, what it means, market, arrow).
   No per-card buttons, no tags, no quote: one button below for every story. */
.cres-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 24px; background: var(--c-panel); box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.cres-row > li { display: flex; min-width: 0; }
.cres-row > li + li { border-left: 1px solid var(--c-line); }
.cres { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); width: 100%; padding: var(--s-6) var(--s-5) var(--s-5); color: var(--c-ink); text-decoration: none; transition: background var(--dur-2) var(--ease); }
.cres:hover, .cres:focus-visible { background: var(--c-ground); color: var(--c-ink); text-decoration: none; }
.cres:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: -3px; }
.cres__logo { width: auto; max-width: 150px; margin-bottom: var(--s-4); opacity: 0.8; }
.cres:hover .cres__logo, .cres:focus-visible .cres__logo { opacity: 1; }
.cres__num { font-size: clamp(2.25rem, 1.5rem + 1.8vw, 3.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); white-space: nowrap; background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.cres__what { font-weight: var(--fw-medium); color: var(--c-ink-2); line-height: 1.35; text-wrap: balance; }
.cres__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; margin-top: auto; padding-top: var(--s-5); font-size: var(--fs-small); color: var(--c-muted); }
.cres__go { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c-line-strong); color: var(--c-ink); transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.cres__go svg { width: 16px; height: 16px; }
.cres:hover .cres__go, .cres:focus-visible .cres__go { background: var(--c-accent); color: var(--c-on-accent); box-shadow: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .cres:hover .cres__go { transform: translateX(3px); } }
.cust6 .cases5__note { margin-top: var(--s-4); }
.cust6 .btn-row--center { margin-top: var(--s-6); }
@media (max-width: 1023px) {
  .cres-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cres-row > li:nth-child(3) { border-left: 0; }
  .cres-row > li:nth-child(n + 3) { border-top: 1px solid var(--c-line); }
}
@media (max-width: 520px) {
  .cres { padding: var(--s-5) var(--s-4) var(--s-4); }
  .cres__logo { margin-bottom: var(--s-2); transform: scale(0.88); transform-origin: left center; }
  .cres__num { font-size: 2rem; }
  .cres__what { font-size: var(--fs-small); }
  .cres__meta { padding-top: var(--s-3); font-size: var(--fs-micro); }
  .cres__go { width: 28px; height: 28px; }
}
.cres__meta > span:first-child { min-width: 0; }
/* logos of different shapes sit in one 32px band, so the four figures line up */
.cres__brand { display: flex; align-items: center; height: 32px; margin-bottom: var(--s-4); }
.cres__brand .cres__logo { margin-bottom: 0; }
@media (max-width: 520px) { .cres__brand { height: 28px; margin-bottom: var(--s-2); } }

/* ==================================================================
   v6 (27 Oct, night) — the AI story, after the team's "Home v2" draft, in our style:
   the risk gap · the problem with legacy data · from data to decisions · one AI engine, three layers */

/* ---- The risk gap ---- */
.gap6__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5) clamp(2rem, 1rem + 4vw, 6rem); align-items: end; margin-bottom: var(--s-7); }
.gap6__head .sec-head { margin-bottom: 0; }
.gap6__head > .lead { margin: 0; color: var(--c-ink-2); }
.gapc { margin: 0; border-radius: 28px; background: var(--gradient-soft); box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.gapc__plot { position: relative; aspect-ratio: 1000 / 340; }
.gapc__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gapc__axis { fill: none; stroke: var(--c-line-strong); stroke-width: 1; }
.gapc__today { fill: none; stroke: var(--c-line-strong); stroke-width: 1; stroke-dasharray: 3 5; }
.gapc__legacy { fill: none; stroke: var(--c-muted); stroke-width: 2; stroke-dasharray: 9 8; }
.gapc__curve { fill: none; stroke: url(#gapLine); stroke-width: 4; stroke-linecap: round; }
.gapc__fill { fill: url(#gapFill); }
.gapc__l { position: absolute; display: grid; gap: 2px; margin: 0; font-size: var(--fs-small); color: var(--c-ink-2); line-height: 1.35; }
.gapc__l span { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; }
.gapc__l--ai { right: 4%; top: 5%; text-align: right; }
.gapc__l--ai span { color: var(--c-warn-ink); }
.gapc__l--old { right: 4%; top: 77%; text-align: right; }
.gapc__l--old span { color: var(--c-muted); }
.gapc__gap { position: absolute; left: 59%; top: 33%; display: grid; margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.gapc__gap strong { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: var(--fw-heavy); color: var(--c-ink); }
.gapc__today-l { position: absolute; left: 56%; top: 1.5%; transform: translateX(-50%); margin: 0; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-ground); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.gapc__x { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 4% var(--s-4); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.gapc__x .tag-illus { letter-spacing: 0; text-transform: none; }
.js .gapc[data-reveal] .gapc__draw { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease) 0.2s; }
.js .gapc[data-reveal].is-in .gapc__draw { clip-path: inset(0 0 0 0); }
.js .gapc[data-reveal] .gapc__gap, .js .gapc[data-reveal] .gapc__l { opacity: 0; transition: opacity 0.6s var(--ease) 1.4s; }
.js .gapc[data-reveal].is-in .gapc__gap, .js .gapc[data-reveal].is-in .gapc__l { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .gapc[data-reveal] .gapc__draw { clip-path: none; transition: none; } .js .gapc[data-reveal] .gapc__gap, .js .gapc[data-reveal] .gapc__l { opacity: 1; transition: none; } }
.gap6__cards { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.gc { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.gc::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gradient-brand); }
.gc p + p, .gc__ai p { margin: 0; }
.gc__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.gc__k svg { width: 18px; height: 18px; color: var(--c-accent); }
.gc h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -0.02em; }
.gc__ai { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); border-radius: 16px; background: var(--c-panel); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.gc__aik { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.gc__aik svg { width: 16px; height: 16px; }
.gc__cost { margin-top: auto !important; padding-top: var(--s-2); font-weight: var(--fw-bold); color: var(--c-risk-ink); }
.gap6__note { margin-top: var(--s-4); }
@media (max-width: 1023px) { .gap6__head { grid-template-columns: 1fr; align-items: start; } .gap6__cards { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .gapc__plot { aspect-ratio: 1000 / 620; }
  .gapc__l { font-size: var(--fs-micro); }
  .gapc__l--ai { top: 3%; max-width: 46%; }
  .gapc__l--old { top: 80%; max-width: 60%; }
  .gapc__gap { left: 44%; top: 34%; font-size: var(--fs-micro); max-width: 50%; }
  .gapc__today-l { display: none; }
}

/* ---- The problem with legacy data: a crowd of applicants ---- */
.lg6__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.lg6 .sec-head { margin-bottom: var(--s-5); }
.lg6 .sec-head h2 { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem); }
.lg6__strong { font-size: var(--fs-h4); font-weight: var(--fw-bold); color: var(--c-ink); }
.crowd { display: grid; gap: var(--s-4); padding: clamp(1rem, 0.6rem + 1.5vw, 2rem); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.crowd__toggle { justify-self: start; display: inline-flex; padding: 4px; border-radius: var(--r-pill); background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.crowd__toggle button { padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-muted); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.crowd__toggle button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }
.crowd__toggle button:hover { color: var(--c-ink); }
.crowd__toggle button[aria-pressed="true"]:hover { color: var(--c-on-ink); }
.crowd__cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: clamp(5px, 0.7vw, 10px); }
.cw { position: relative; aspect-ratio: 1; border: 1.5px dashed transparent; border-radius: 8px; background: var(--c-accent); transition: background-color 0.5s var(--ease), border-radius 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 28ms); }
.cw--ghostbad, .cw--oldbad { background: var(--c-status-decline); }
.cw--ghostbad::before, .cw--ghostbad::after, .cw--oldbad::before, .cw--oldbad::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 2px; margin: -1px 0 0 -23%; border-radius: 1px; background: var(--c-ground); transition: opacity 0.4s var(--ease); transition-delay: inherit; }
.cw--ghostbad::before, .cw--oldbad::before { transform: rotate(45deg); }
.cw--ghostbad::after, .cw--oldbad::after { transform: rotate(-45deg); }
.crowd[data-mode="legacy"] .cw--old, .crowd[data-mode="legacy"] .cw--oldbad { background: var(--c-map-land); }
.crowd[data-mode="legacy"] .cw--ghost, .crowd[data-mode="legacy"] .cw--ghostbad { background: transparent; border-color: var(--c-line-strong); border-radius: 50%; transform: scale(0.86); }
.crowd[data-mode="legacy"] .cw::before, .crowd[data-mode="legacy"] .cw::after { opacity: 0; }
.crowd__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--fs-small); color: var(--c-ink-2); }
.crowd__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.crowd[data-mode="legacy"] .crowd__legend--monnai, .crowd[data-mode="monnai"] .crowd__legend--legacy { display: none; }
.cwk { position: relative; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; background: var(--c-accent); }
.cwk--ghost { border: 1.5px dashed var(--c-line-strong); border-radius: 50%; background: transparent; }
.cwk--old { background: var(--c-map-land); }
.cwk--bad { background: var(--c-status-decline); }
.cwk--bad::before, .cwk--bad::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; margin-top: -0.75px; background: var(--c-ground); transform: rotate(45deg); }
.cwk--bad::after { transform: rotate(-45deg); }
.crowd__note { margin: 0; font-size: var(--fs-micro); line-height: 1.5; color: var(--c-muted); }
@media (prefers-reduced-motion: reduce) { .cw, .cw::before, .cw::after { transition: none; } }
@media (max-width: 1023px) { .lg6__grid { grid-template-columns: 1fr; } }

/* ---- From data to decisions ---- */
.dd6__panels { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: var(--s-5); align-items: stretch; }
.dd__panel { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; padding: clamp(1.25rem, 0.8rem + 1.4vw, 2.25rem); border-radius: 28px; }
.dd__panel p { margin: 0; }
.dd__panel--old { background: var(--c-panel); box-shadow: 0 0 0 1px var(--c-line); }
.dd__panel--new { border: 2px solid transparent; background: linear-gradient(var(--c-ground), var(--c-ground)) padding-box, var(--gradient-brand) border-box; box-shadow: var(--shadow-float); }
.dd__k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.dd__panel--new .dd__k > span:first-child { color: var(--c-accent-ink); }
.dd__note { font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; }
.dd__cap { margin-top: auto !important; font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-ink); }
.dd__cap--old { color: var(--c-muted); }
.dd__oldflow { display: grid; grid-template-columns: minmax(0, 1fr) clamp(40px, 5vw, 72px) minmax(0, 0.95fr); align-items: stretch; flex: 1 1 auto; }
.dd__vendors { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 10px; }
.dd__vendors li { display: flex; align-items: center; gap: var(--s-2); min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.dd__vendors li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--c-line-strong); }
.dd__vendors .dd__more { background: transparent; box-shadow: none; outline: 1.5px dashed var(--c-line-strong); outline-offset: -1.5px; color: var(--c-muted); font-weight: var(--fw-medium); }
.dd__lines { display: block; width: 100%; height: 100%; }
.dd__lines path { fill: none; stroke: var(--c-line-strong); stroke-width: 1.5; stroke-dasharray: 4 5; }
.dd__stack { align-self: center; display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: 16px; border: 1.5px dashed var(--c-line-strong); background: var(--c-ground); }
.dd__sk { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.dd__stack p + p { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.dd__flow { display: grid; grid-template-columns: minmax(0, 1fr) 24px auto 24px minmax(0, 1.15fr) 24px auto; align-items: center; flex: 1 1 auto; }
.dd__col { display: grid; gap: var(--s-2); min-width: 0; }
.dd__h { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.dd__sig { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dd__sig li { padding: 5px 10px; border-radius: 10px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd__wire { position: relative; height: 2px; background: linear-gradient(90deg, var(--g-5), var(--g-3)); }
.dd__wire--out { background: linear-gradient(90deg, var(--g-3), var(--g-1)); }
.dd__wire i { position: absolute; inset: 0; overflow: hidden; }
.dd__wire i::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 5px 16px); animation: wireFlow 0.8s linear infinite; }
.dd__hub { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-3); border-radius: 20px; background: var(--c-ink-deep); color: var(--c-on-ink); box-shadow: 0 0 0 4px rgba(81, 0, 255, 0.16), 0 18px 40px -16px rgba(81, 0, 255, 0.6); }
.dd__hub .mark { width: 30px; height: auto; }
.dd__brand { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.dd__tags { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.dd__tags span { padding: 1px 6px; border-radius: 6px; background: var(--c-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); text-align: center; }
.dd__tags span:nth-child(2) { background: var(--c-status-decline); }
.dd__tags span:nth-child(3) { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.dd__tags .dd__tag--beta { background: var(--c-warn-ink); }
.dd__grp { display: grid; gap: 4px; }
.dd__grp + .dd__grp { margin-top: var(--s-2); }
.dd__grp > p { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--grp-c, var(--c-accent-ink)); }
.dd__grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dd__grp li { padding: 4px 10px; border-left: 3px solid var(--grp-c, var(--c-accent)); border-radius: 0 8px 8px 0; background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd__grp--credit { --grp-c: var(--c-accent); }
.dd__grp--fraud { --grp-c: var(--c-risk-ink); }
.dd__grp--kyc { --grp-c: var(--c-warn-ink); }
.dd__dec { display: grid; justify-items: center; gap: 4px; padding: var(--s-4) var(--s-3); border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 0 0 6px rgba(249, 158, 28, 0.16), var(--shadow-float); text-align: center; }
.dd__check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.dd__check svg { width: 16px; height: 16px; }
.dd__dw { font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.dd__ds { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); max-width: 9em; }
.dd__vs { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.dd__vs li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5); border-radius: 20px; background: var(--c-panel); text-align: center; }
.dd__was { color: var(--c-muted); text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.dd__to { display: inline-grid; color: var(--c-accent); }
.dd__to svg { width: 18px; height: 18px; }
.dd__vs strong { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .dd__wire i::before { animation: none; } }
@media (max-width: 1100px) { .dd6__panels { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .dd__oldflow { grid-template-columns: 1fr; gap: var(--s-4); }
  .dd__vendors { display: flex; flex-wrap: wrap; gap: 8px; }
  .dd__lines { display: none; }
  .dd__stack { position: relative; }
  .dd__flow { grid-template-columns: 1fr; justify-items: stretch; gap: 0; }
  .dd__sig { display: flex; flex-wrap: wrap; }
  .dd__wire { justify-self: center; width: 2px; height: 26px; background: linear-gradient(180deg, var(--g-5), var(--g-3)); }
  .dd__wire--out { background: linear-gradient(180deg, var(--g-3), var(--g-1)); }
  .dd__wire i::before { left: 0; right: 0; top: 0; bottom: -16px; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 5px 16px); animation-name: wireFlowDown; }
  .dd__hub { grid-auto-flow: column; justify-content: center; align-items: center; }
  .dd__tags { grid-template-columns: repeat(4, auto); }
  .dd__dec { grid-auto-flow: column; justify-content: center; align-items: center; gap: var(--s-3); }
  .dd__ds { max-width: none; }
  .dd__vs { grid-template-columns: 1fr; }
}
@keyframes wireFlowDown { from { transform: translateY(-16px); } to { transform: translateY(0); } }

/* ---- How it works: one AI engine, three layers (deep band, replaces "Our AI") ---- */
.hw6 { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--sec5-y); background: var(--c-ink-deep); color: var(--c-on-ink); }
.hw6__glow { position: absolute; z-index: -1; left: -20%; top: 10%; width: 80vw; max-width: 1100px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(81, 0, 255, 0.36), rgba(255, 0, 170, 0.1) 55%, rgba(255, 0, 170, 0) 100%); pointer-events: none; }
.hw6__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-5) clamp(2rem, 1rem + 4vw, 6rem); align-items: end; margin-bottom: var(--s-7); }
.hw6__head .sec-head { margin-bottom: 0; }
.hw6__head > .lead { margin: 0; }
.hw6__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.hw6__visual { display: grid; gap: var(--s-4); justify-items: center; min-width: 0; }
.hw__art { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.08; perspective: 1800px; }
.hw__plate { position: absolute; left: 21%; width: 52%; aspect-ratio: 1; border-radius: 30px; border: 1.5px solid; transform: rotateX(58deg) rotateZ(-45deg); transform-style: preserve-3d; transition: top 1s var(--ease), box-shadow 0.4s var(--ease), opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.hw__plate--observe { top: 46%; border-color: rgba(143, 176, 255, 0.7); background: linear-gradient(135deg, rgba(41, 98, 255, 0.28), rgba(81, 0, 255, 0.14)); }
.hw__plate--infer { top: 23%; border-color: rgba(255, 143, 196, 0.6); background: linear-gradient(135deg, rgba(255, 0, 170, 0.2), rgba(81, 0, 255, 0.16)); }
.hw__plate--decide { top: 0%; border-color: rgba(201, 166, 255, 0.75); background: linear-gradient(135deg, rgba(81, 0, 255, 0.5), rgba(143, 102, 255, 0.24)); }
.js .hw__art[data-reveal] .hw__plate { top: 23%; }
.js .hw__art[data-reveal].is-in .hw__plate--observe { top: 46%; }
.js .hw__art[data-reveal].is-in .hw__plate--infer { top: 23%; }
.js .hw__art[data-reveal].is-in .hw__plate--decide { top: 0%; }
.hw__chips { position: absolute; inset: 13%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 9px 8px; }
.hwc { padding: 4px 8px; border-radius: 8px; background: rgba(143, 102, 255, 0.42); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.5); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hwc--biz { background: rgba(251, 157, 0, 0.32); box-shadow: inset 0 0 0 1px rgba(255, 208, 138, 0.55); }
.hw__ann { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: rgba(7, 5, 26, 0.85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-on-ink); white-space: nowrap; transition: top 1s var(--ease); }
.hw__ann svg { width: 14px; height: 14px; color: var(--c-brand-yellow); }
.hw__ann--decide { top: 16%; }
.hw__ann--infer { top: 40%; }
.hw__ann--observe { top: 63%; }
.js .hw__art[data-reveal]:not(.is-in) .hw__ann { top: 40%; opacity: 0; }
.hw__ann { transition: top 1s var(--ease), opacity 0.6s var(--ease) 0.5s; }
.hw__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.hw__legend span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hwk { width: 12px; height: 12px; border-radius: 3px; background: rgba(143, 102, 255, 0.8); }
.hwk--biz { background: rgba(251, 157, 0, 0.8); }
.hw__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: var(--s-4); }
.hw__step { --step-c: var(--c-layer-observe); position: relative; display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); border-radius: 22px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hw__step--infer { --step-c: var(--c-layer-infer); }
.hw__step--decide { --step-c: var(--c-layer-decide); }
.hw__step::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; border-radius: 3px; background: var(--step-c); }
.hw__step p, .hw__step h3 { margin: 0; }
.hw__n { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--step-c); }
.hw__step h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; color: var(--c-on-ink); }
.hw__step p:not(.hw__n):not(.hw__badge) { color: var(--c-on-ink-muted); }
.hw__badge { justify-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 4px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--c-brand-yellow); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: #FFD08A; }
.hw__step:hover { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.hw6:has(.hw__step:hover) .hw__plate { opacity: 0.4; filter: saturate(0.6); }
.hw6:has(.hw__step--observe:hover) .hw__plate--observe, .hw6:has(.hw__step--infer:hover) .hw__plate--infer, .hw6:has(.hw__step--decide:hover) .hw__plate--decide { opacity: 1; filter: none; box-shadow: 0 0 0 2px var(--step-glow, rgba(255, 143, 196, 0.9)), 0 0 60px rgba(255, 0, 170, 0.35); }
@media (prefers-reduced-motion: reduce) { .hw__plate, .hw__ann { transition: none; } .js .hw__art[data-reveal]:not(.is-in) .hw__ann { opacity: 1; } }
@media (max-width: 1023px) { .hw6__head, .hw6__grid { grid-template-columns: 1fr; } .hw__art { max-width: 420px; } }
@media (max-width: 520px) { .hw__chips { inset: 11%; gap: 6px; } .hwc { padding: 3px 5px; } .hw__ann { font-size: var(--fs-micro); padding: 4px 9px; } }
/* v6 fixes after the first screenshots */
.gapc__gap { left: 53%; top: 30%; }
.gapc__key { display: none; }
.cw--ghost { background: var(--c-violet-on-dark); }
.cwk--new { background: var(--c-violet-on-dark); }
.dd__vs li { flex-direction: column; gap: 2px; }
.dd__vs strong { display: inline-flex; align-items: center; gap: var(--s-2); }
.hw__badge svg { width: 14px; height: 14px; }
.hw__q { margin: 0; }
@media (max-width: 720px) {
  .gapc__l, .gapc__gap span, .gapc__gap { display: none; }
  .gapc__key { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0 4% var(--s-4); font-size: var(--fs-micro); line-height: 1.4; color: var(--c-ink-2); }
  .gapc__key li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-2); align-items: center; }
  .gk { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #8F66FF, #F81B69, #F99E1C); }
  .gk--old { height: 0; border-top: 2px dashed var(--c-muted); background: none; }
  .gk--gap { height: 12px; border-radius: 3px; background: linear-gradient(90deg, rgba(248, 27, 105, 0.14), rgba(248, 27, 105, 0.34)); }
  .gapc__x { padding-bottom: var(--s-3); }
}
@media (max-width: 520px) {
  .hw__plate { left: 14%; width: 62%; }
  .hw__chips { inset: 16%; grid-template-columns: 1fr; gap: 6px; }
  .hwc:nth-child(n + 4) { display: none; }
  .hw__ann { display: none; }
}

/* ------------------------------------------------------------------
   v6.1 (27 Oct, night) — a lighter homepage (Eva: "a bit heavy for a home page"), the depth on How Monnai works */
/* Home: the risk gap keeps the chart and one line per team */
.gap6__outs { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.gap6__outs li { display: grid; gap: 4px; align-content: start; padding: var(--s-5); }
.gap6__outs li + li { border-left: 1px solid var(--c-line); }
.gap6__outs p { margin: 0; }
.go__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.go__k svg { width: 18px; height: 18px; color: var(--c-accent); }
.go__h { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.go__c { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-risk-ink); }
@media (max-width: 760px) { .gap6__outs { grid-template-columns: 1fr; } .gap6__outs li + li { border-left: 0; border-top: 1px solid var(--c-line); } }
/* Home: the lighter "with Monnai" side of the comparison */
.dd__flow--lite .dd__sig li { font-size: var(--fs-small); }
.dd__sig .dd__plus { background: transparent; box-shadow: none; outline: 1.5px dashed var(--c-line-strong); outline-offset: -1.5px; color: var(--c-muted); font-weight: var(--fw-medium); }
.dd__ins { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dd__ins li { padding: 6px 12px; border-left: 3px solid var(--grp-c, var(--c-accent)); border-radius: 0 10px 10px 0; background: var(--c-panel); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.dd__ins--credit { --grp-c: var(--c-accent); }
.dd__ins--fraud { --grp-c: var(--c-risk-ink); }
.dd__ins--kyc { --grp-c: var(--c-warn-ink); }
.dd6__more { margin-top: var(--s-6); }
@media (max-width: 760px) { .dd__ins { display: flex; flex-wrap: wrap; } }

/* How Monnai works (platform/index.html) */
.pl-hero { padding-block: var(--s-8) var(--s-7); background: var(--gradient-soft); }
.pl-hero__copy { max-width: 920px; }
.pl-hero__title { max-width: 16ch; }
.pl-jump { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0 0; padding: 0; }
.pl-jump a { display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); text-decoration: none; }
.pl-jump a:hover { color: var(--c-accent-ink); box-shadow: inset 0 0 0 1px var(--c-accent); text-decoration: none; }
[data-page="platform"] .section { padding-block: var(--section-y); }
.miss { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.miss li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.miss li h3, .miss li p { margin: 0; }
.miss__n { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.14em; color: var(--c-accent-ink); }
.miss h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.miss p { color: var(--c-ink-2); }
.pl-miss .btn-row--center { margin-top: var(--s-6); }
.pl-fam__list li { display: flex; flex-direction: column; align-items: flex-start; }
.pl-fam__list .btn { margin-top: auto; }
.pl-fam__list .beta { margin-top: calc(-1 * var(--s-2)); }
.pl-fam__note { margin-top: var(--s-4); }
@media (max-width: 860px) { .miss { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------
   v6.2 (27 Oct, night) — the risk gap as a ledger, no chart (Eva: "the graph is still too heavy, too AI-generated").
   Type and hairlines only: one row per team, what goes wrong, what it costs. */
.gap6__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-6) clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.gap6__grid > .sec-head { margin-bottom: 0; }
.gap6 .sec-head h2 { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem); }
.ledger { margin: 0; border-top: 2px solid var(--c-ink); }
.ledger__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; padding: var(--s-5) 0; border-bottom: 1px solid var(--c-line); }
.ledger dt { grid-row: span 3; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); transition: color var(--dur-1) var(--ease); }
.ledger dd { grid-column: 2; margin: 0; }
.ledger__what { font-size: var(--fs-h3); font-weight: var(--fw-heavy); line-height: 1.15; letter-spacing: -0.02em; color: var(--c-ink); }
.ledger__ai { margin-top: var(--s-2) !important; max-width: 58ch; font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-2); }
.ledger__cost { margin-top: 6px !important; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-risk-ink); }
.ledger__cost::before { content: "→ "; color: var(--c-muted); font-weight: var(--fw-medium); }
.ledger__row:hover dt { color: var(--c-accent-ink); }
.gap6__note { margin-top: var(--s-4); }
@media (max-width: 1023px) { .gap6__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .ledger__row { grid-template-columns: 1fr; row-gap: 4px; }
  .ledger dt { grid-row: auto; }
  .ledger dd { grid-column: 1; }
}

/* ------------------------------------------------------------------
   v7 (28 Oct) — hero: figures replace the logo band (Eva: "not proud enough of the logo list yet").
   Four of Monnai's own figures, centered under the hero, count up once on view (site.js, [data-count-to]). */
.hx5__proof { position: relative; margin-top: clamp(3.5rem, 2rem + 4vw, 6rem); }
.hx5__figs { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-line); }
.hx5__figs li { display: grid; justify-items: center; align-content: start; gap: var(--s-2); padding: var(--s-1) var(--s-4); border-left: 1px solid var(--c-line); }
.hx5__figs li:first-child { border-left: 0; }
.hx5__figs strong { font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.hx5__figs span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.hx5__proof .hx5__note { margin-top: var(--s-4); }
@media (max-width: 760px) { .hx5__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } .hx5__figs li:nth-child(3) { border-left: 0; } }
@media (forced-colors: active) { .hx5__figs strong { -webkit-text-fill-color: currentColor; background: none; } }

/* v7 — Why now: the threat in one public figure (Deloitte), then four short columns, one per team */
.ai7__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 6rem); align-items: center; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.ai7__top > .sec-head { margin-bottom: 0; }
.ai7 .sec-head h2 { font-size: clamp(2.125rem, 1.4rem + 2.2vw, 3.5rem); }
.thr { margin: 0; display: grid; gap: var(--s-5); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.thr__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); }
.thr__rows { display: grid; gap: var(--s-5); }
.thr__row { display: grid; gap: var(--s-2); }
.thr__lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: 0; }
.thr__yr { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.thr__yr span { font-weight: var(--fw-medium); color: var(--c-muted); }
.thr__val { font-size: var(--fs-h3); font-weight: var(--fw-heavy); line-height: 1; letter-spacing: -0.02em; color: var(--c-ink); }
.thr__row--now .thr__val { font-size: clamp(3rem, 2.2rem + 2.4vw, 4.25rem); letter-spacing: -0.045em; }
.thr__chip { align-self: center; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--c-risk-soft); color: var(--c-risk-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; }
.thr__chip svg { width: 16px; height: 16px; }
.thr__bar { display: block; width: calc(var(--v) * 100%); height: 20px; border-radius: 0 4px 4px 0; background: var(--c-status-neutral); transform-origin: left center; }
.thr__row--now .thr__bar { background: var(--gradient-threat); }
.js .thr[data-reveal] .thr__bar { transform: scaleX(0); transition: transform 1.1s var(--ease) 0.35s; }
.js .thr[data-reveal] .thr__row--now .thr__bar { transition-duration: 1.6s; transition-delay: 0.6s; }
.js .thr[data-reveal].is-in .thr__bar { transform: none; }
.thr__src { margin: 0; font-size: var(--fs-micro); color: var(--c-muted); }
.thr__src a { color: var(--c-ink-2); }
@media (prefers-reduced-motion: reduce) { .js .thr[data-reveal] .thr__bar { transform: none; transition: none; } }
@media (forced-colors: active) { .thr__bar { background: CanvasText; } .thr__row--now .thr__bar { background: Highlight; } }
.ledger7 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6) clamp(1.25rem, 0.5rem + 2vw, 2.5rem); margin: 0; }
.ledger7__col { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--c-ink); }
.ledger7 dt { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); transition: color var(--dur-1) var(--ease); }
.ledger7__col:hover dt { color: var(--c-accent-ink); }
.ledger7 dd { margin: 0; }
.ledger7__what { font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: 1.2; letter-spacing: -0.01em; color: var(--c-ink); }
.ledger7__ai { font-size: var(--fs-small); line-height: 1.55; color: var(--c-ink-2); }
.ledger7__cost { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-risk-ink); }
.ledger7__cost::before { content: "→ "; color: var(--c-muted); font-weight: var(--fw-medium); }
.ledger7__more a { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.ledger7__more a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ledger7__more svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.ledger7__more a:hover svg { transform: translateX(3px); }
.tag-new { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.02em; line-height: 1.4; }
@media (max-width: 1023px) { .ai7__top { grid-template-columns: 1fr; } .ledger7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ledger7 { grid-template-columns: 1fr; } }

/* v7 — the legacy crowd plays by itself (Eva: "animate alone"): a passive label shows which side you see, a small pause button */
.crowd__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.crowd__state { position: relative; isolation: isolate; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px; border-radius: var(--r-pill); background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.crowd__state::before { content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--c-ink); transition: transform 0.55s var(--ease), background-color 0.55s var(--ease); }
.crowd[data-mode="monnai"] .crowd__state::before { transform: translateX(100%); background: var(--c-accent); }
.crowd__s { padding: 8px 16px; text-align: center; white-space: nowrap; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); transition: color 0.4s var(--ease); }
.crowd[data-mode="legacy"] .crowd__s--legacy, .crowd[data-mode="monnai"] .crowd__s--monnai { color: var(--c-on-ink); }
.crowd__play.day__play { flex: 0 0 auto; width: 36px; min-height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
html:not(.js) .crowd__play { display: none; }
@media (prefers-reduced-motion: reduce) { .crowd__play { display: none; } .crowd__state::before { transition: none; } }
.hw6__more { margin-top: var(--s-5); }
/* v7 — How Monnai works: four product families */
.pl-fam__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pl-fam__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
@media (max-width: 1180px) { .pl-fam__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pl-fam__list { grid-template-columns: 1fr; } }

/* v7 — Global and local: live across five regions (Eva, 28 Oct: no country map, it gives away our limits).
   A dotted world (the coverage map's dot grid, all grey), five region pins, light arcs between them, one card per region. */
.reg5 .sec-head { margin-bottom: var(--s-6); }
.reg5__map { margin: 0 auto; max-width: 1100px; }
.reg5__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.reg5__land { fill: none; stroke: var(--c-map-land); stroke-width: 4.2; stroke-linecap: round; }
.reg5__arc { fill: none; stroke: var(--c-accent); stroke-width: 1.5; stroke-opacity: 0.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.reg5__pin .pin { fill: var(--c-accent); stroke: var(--c-ground); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: transform var(--dur-2) var(--ease); transform-box: fill-box; transform-origin: center; }
.reg5__pin .pulse { fill: var(--c-accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.reg5__pin text { font-size: 15px; font-weight: var(--fw-heavy); fill: var(--c-ink); letter-spacing: -0.01em; paint-order: stroke; stroke: var(--c-panel); stroke-width: 5px; stroke-linejoin: round; }
.js .reg5__map[data-reveal] .reg5__arc { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) 0.5s; }
.js .reg5__map[data-reveal].is-in .reg5__arc { stroke-dashoffset: 0; }
.js .reg5__map[data-reveal] .reg5__pin { opacity: 0; transition: opacity 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 200ms); }
.js .reg5__map[data-reveal].is-in .reg5__pin { opacity: 1; }
.js .reg5__map[data-reveal].is-in .reg5__pin .pulse { animation: regPulse 2.6s var(--ease) 3; animation-delay: calc(var(--i, 0) * 140ms + 600ms); }
@keyframes regPulse { 0% { transform: scale(1); opacity: 0.35; } 100% { transform: scale(3.2); opacity: 0; } }
.reg5__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.regc { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.regc:hover { box-shadow: 0 0 0 1.5px var(--c-accent), var(--shadow-float); transform: translateY(-2px); }
.regc__k { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--c-ink); }
.regc__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); }
.regc__types { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.regc__types li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.reg5:has(.regc--na:hover) .reg5__pin--na .pin, .reg5:has(.regc--latam:hover) .reg5__pin--latam .pin, .reg5:has(.regc--eu:hover) .reg5__pin--eu .pin,
.reg5:has(.regc--af:hover) .reg5__pin--af .pin, .reg5:has(.regc--apac:hover) .reg5__pin--apac .pin { transform: scale(1.6); }
.reg5__notes { margin-top: var(--s-4); text-align: center; }
@media (prefers-reduced-motion: reduce) { .js .reg5__map[data-reveal] .reg5__arc { stroke-dashoffset: 0; transition: none; } .js .reg5__map[data-reveal] .reg5__pin { opacity: 1; transition: none; } .reg5__pin .pulse { animation: none !important; } .regc, .reg5__pin .pin { transition: none; } }
@media (max-width: 1100px) { .reg5__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .reg5__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reg5__pin text { display: none; } }
@media (max-width: 460px) { .reg5__list { grid-template-columns: 1fr; } }
/* v7 — customer logos to come (Eva, 28 Oct): a placeholder in the menu tiles and the homepage results */
.cs-tile__ph { justify-self: start; display: inline-flex; align-items: center; height: 28px; padding: 0 var(--s-3); border-radius: 8px; border: 1.5px dashed rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.85); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.mnav .cs-tile__ph { height: 24px; }
/* v7 — certifications: a small line in the footer (Eva, 28 Oct), no section */
.ft-cert { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-on-ink); }
.ft-cert svg { width: 18px; height: 18px; color: var(--c-on-ink-muted); }
/* v7 — homepage customer results: logo placeholders */
.logo-ph { display: inline-flex; align-items: center; height: 30px; padding: 0 var(--s-3); border-radius: 8px; border: 1.5px dashed var(--c-line-strong); color: var(--c-muted); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
/* v7 — AI agents in the use-case previews */
.ins__fam--agent { background: var(--c-tint-violet); color: var(--c-accent-ink); box-shadow: inset 0 0 0 1px var(--c-accent-soft); }
.dec--limit { background: var(--c-accent-soft); color: var(--c-accent-ink); box-shadow: inset 0 0 0 1.5px var(--c-accent); }

/* ------------------------------------------------------------------
   v7 (28 Oct) — menus, a fresh look (Eva: "not a big fan of the underlining in the menu, that's not modern").
   A floating card under the header; small uppercase group labels instead of underlined titles; icons in soft
   squares that fill on hover; a light rounded highlight on hover; the current section marked with a dot.
   Same content, same behavior, same keyboard support. */
.nav-trigger { position: relative; border-radius: var(--r-pill); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.nav-top.is-current > .nav-trigger { box-shadow: none; border-radius: var(--r-pill); color: var(--c-accent-ink); }
.nav-top.is-current > .nav-trigger::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--c-accent); }
.mm-panel { padding: var(--s-2) var(--gutter) var(--s-8); background: transparent; border: 0; box-shadow: none; pointer-events: none; }
.mm-panel > .container { pointer-events: auto; max-width: 1240px; border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px rgba(20, 16, 60, 0.07), 0 32px 72px -28px rgba(20, 16, 60, 0.34); }
.mm-panel:not([hidden]) > .container { animation: mmIn 0.22s var(--ease) both; }
@keyframes mmIn { from { opacity: 0; transform: translateY(-6px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mm-panel:not([hidden]) > .container { animation: none; } }
.mm-flat__groups { padding: var(--s-6) var(--s-5) var(--s-6) 0; }
.mm-h, .mm-g .mm-h, .mm-featured .mm-h { margin: 0 0 var(--s-1); padding: 0; border: 0; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
a.mm-h { transition: color var(--dur-1) var(--ease); }
a.mm-h::after { content: "→"; letter-spacing: 0; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
a.mm-h:hover { color: var(--c-accent-ink); text-decoration: none; }
a.mm-h:hover::after, a.mm-h:focus-visible::after { opacity: 1; transform: none; }
.mm-note { margin-left: var(--s-1); padding: 1px 8px; border: 0; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.02em; text-transform: none; vertical-align: 0.1em; }
.mm-link { border-radius: 14px; transition: background-color var(--dur-1) var(--ease); }
.mm-link:hover, .mm-link:focus-visible { background: var(--c-panel); }
.mm-link[aria-current="page"] { background: var(--c-tint-violet); }
.mm-link[aria-current="page"] .mm-label { color: var(--c-accent-ink); }
.mm-link--tile { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.mm-ico { width: 40px; height: 40px; margin: 0; border-radius: 12px; background: var(--c-tint-violet); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.08); color: var(--c-accent); transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.mm-ico svg { width: 20px; height: 20px; }
.mm-link--tile:hover .mm-ico, .mm-link--tile:focus-visible .mm-ico, .mm-link--tile[aria-current="page"] .mm-ico { background: var(--c-accent); color: var(--c-on-accent); }
.mm-panel--tiles .mm-g__list .mm-link { padding: 10px 12px; margin-inline: -12px; }
.mm-panel--tiles .mm-line { margin-top: 1px; }
/* The aside: a soft card inside the menu card */
.mm-flat--feat .mm-featured, .mm-rails .mm-featured { align-self: stretch; margin: var(--s-3) calc(var(--s-3) - var(--gutter)) var(--s-3) 0; padding: var(--s-5) var(--s-5) var(--s-6); border-radius: 18px; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.06); }
.mm-featured .mm-link:hover { background: rgba(255, 255, 255, 0.85); }
.mm-featured .mm-label { font-weight: var(--fw-bold); }
/* Products: people on the first row (Verification & KYC, Risk Intelligence across two columns), businesses and AI agents on the second */
.mm-flat__groups--products { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "ver ri ri" "bri ag ag"; row-gap: var(--s-6); }
.mm-flat__groups--products .mm-g--wide { grid-column: auto; grid-row: auto; }
.mm-flat__groups--products .mm-g--ver { grid-area: ver; }
.mm-flat__groups--products .mm-g--ri { grid-area: ri; }
.mm-flat__groups--products .mm-g--bri { grid-area: bri; }
.mm-flat__groups--products .mm-g--ag { grid-area: ag; }
/* Plain menus (Industries, Resources, Company) */
.mm-panel--flat:not(.mm-panel--tiles) .mm-g__list .mm-link { padding: 8px 12px; margin-inline: -12px; }
/* Customers: the stories panel inside the card */
.mm-stories { padding: var(--s-6) 0; }
/* Phone and tablet menu: the same labels, no underline */
.mnav__h { padding-bottom: 0; border-bottom: 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
a.mnav__h:hover { color: var(--c-accent-ink); }
.mnav__featured { border-radius: 18px; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.06); }
.mnav__item { border-radius: 12px; }
.mnav__pane--tiles .mnav__group .mm-link { padding: 10px 12px; margin-inline: -12px; }
.mm-panel > .container { max-width: 1320px; }
.mm-panel--tiles .mm-flat--feat { grid-template-columns: minmax(0, 1fr) 250px; }
.mm-panel--tiles .mm-flat__groups { column-gap: var(--s-6); }
@media (max-width: 1366px) { .mm-panel--tiles .mm-flat--feat { grid-template-columns: minmax(0, 1fr) 220px; } .mm-panel--tiles .mm-flat__groups { column-gap: var(--s-5); } }
.mm-stories { padding-block: var(--s-6); padding-inline: var(--gutter); }
/* The "New" card at the foot of the Products aside */
.mm-flat--feat .mm-featured { display: flex; flex-direction: column; }
.mm-promo { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 4px; margin-top: auto; padding: var(--s-4); border-radius: 16px; background: var(--c-ink-deep); color: var(--c-on-ink); text-decoration: none; }
.mm-featured .mm-promo { margin-top: max(var(--s-5), auto); }
.mm-promo::before { content: ""; position: absolute; inset: -40% -30% auto auto; z-index: -1; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 0, 170, 0.45), rgba(81, 0, 255, 0.25) 55%, rgba(81, 0, 255, 0)); transition: transform 0.5s var(--ease); }
.mm-promo:hover { color: var(--c-on-ink); text-decoration: none; }
.mm-promo:hover::before { transform: scale(1.15); }
.mm-promo__tag { justify-self: start; padding: 1px 8px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.14); color: var(--c-on-ink); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.mm-promo__t { margin-top: 4px; font-size: var(--fs-body); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.mm-promo__l { font-size: var(--fs-small); line-height: 1.4; color: var(--c-on-ink-muted); }
.mm-promo__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.mm-promo__go svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.mm-promo:hover .mm-promo__go svg { transform: translateX(3px); }
.mm-promo:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 2px; }
.mnav__featured .mm-promo { margin-top: var(--s-2); }
@media (prefers-reduced-motion: reduce) { .mm-promo::before, .mm-promo__go svg { transition: none; } }
.mm-flat--feat .mm-featured, .mm-rails .mm-featured { align-self: start; }
.mm-featured .mm-promo { margin-top: var(--s-4); }

/* ------------------------------------------------------------------
   v7 (28 Oct) — Agent Pass (KYA), the first product one-pager (platform/agent-pass.html) */
.ap-hero__k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ap-kinds { margin: 0; display: grid; gap: var(--s-4); padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); border-radius: 28px; background: var(--gradient-soft); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.ap-kinds__k { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.ap-kinds__k .tag-illus { letter-spacing: 0; text-transform: none; }
.ap-kinds__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.apk { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.apk__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-tint-violet); color: var(--c-accent); }
.apk__ico svg { width: 22px; height: 22px; }
.apk--fake .apk__ico, .apk--bot .apk__ico { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.apk__t { display: grid; min-width: 0; }
.apk__t strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--c-ink); line-height: 1.25; }
.apk__t span { font-size: var(--fs-small); color: var(--c-muted); line-height: 1.35; }
.js .ap-kinds[data-reveal] .apk { opacity: 0; transform: translateX(14px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 130ms + 250ms); }
.js .ap-kinds[data-reveal].is-in .apk { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ap-kinds[data-reveal] .apk { opacity: 1; transform: none; transition: none; } }
/* Decisions: one chip per answer */
.apdec { display: inline-flex; align-items: center; justify-self: start; padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: var(--fw-heavy); white-space: nowrap; line-height: 1.2; }
.apdec--allow { background: var(--c-accent); color: var(--c-on-accent); }
.apdec--limit { background: var(--c-accent-soft); color: var(--c-accent-ink); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
.apdec--step { background: var(--c-status-review); color: #1A0E00; }
.apdec--block { background: var(--c-status-decline); color: #FFFFFF; }
.apdec--wait { background: var(--c-panel); color: var(--c-muted); box-shadow: inset 0 0 0 1.5px var(--c-line); }
@media (max-width: 480px) { .apk { grid-template-columns: 40px minmax(0, 1fr); } .apk .apdec { grid-column: 2; } .apk__ico { width: 40px; height: 40px; } }
/* The demo */
.ap-demo .sec-head { margin-bottom: var(--s-6); }
.apd { display: grid; gap: var(--s-5); }
.apd__top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-3); }
.apd__picks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.apd__pick { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4) 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink-2); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.apd__pick svg { width: 18px; height: 18px; color: var(--c-accent); }
.apd__pick:hover { color: var(--c-ink); box-shadow: 0 0 0 1.5px var(--c-ink); }
.apd__pick[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: none; }
.apd__pick[aria-pressed="true"] svg { color: var(--c-on-ink); }
.apd__play.day__play { width: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .apd__play { display: none; } }
.apd__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-5); align-items: start; }
.apd__shop { position: relative; overflow: hidden; border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.apd__bar { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-4); border-bottom: 1px solid var(--c-line); background: var(--c-panel); }
.apd__dots { display: inline-flex; gap: 6px; }
.apd__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-line-strong); opacity: 0.45; }
.apd__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 12px; border-radius: var(--r-pill); background: var(--c-ground); font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--c-muted); }
.apd__body { display: grid; gap: var(--s-3); padding: var(--s-5); }
.apd__order { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.apd__order > span:nth-child(2) { display: grid; font-size: var(--fs-small); color: var(--c-muted); }
.apd__order strong { color: var(--c-ink); font-weight: var(--fw-heavy); }
.apd__thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-panel); color: var(--c-ink-2); }
.apd__thumb svg { width: 20px; height: 20px; }
.apd__price { font-size: var(--fs-body); }
.apd__field { display: grid; gap: 4px; }
.apd__lab { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.apd__box { display: flex; align-items: center; min-height: 42px; padding: 0 var(--s-3); border-radius: 10px; background: var(--c-ground); box-shadow: inset 0 0 0 1.5px var(--c-line); font-size: var(--fs-small); color: var(--c-ink); white-space: nowrap; overflow: hidden; transition: box-shadow var(--dur-1) var(--ease); }
.apd__box.is-on { box-shadow: inset 0 0 0 2px var(--c-accent), 0 0 0 4px var(--c-accent-soft); }
.apd__caret { display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; background: var(--c-accent); animation: twBlink 0.9s steps(1) infinite; }
.apd__pay { display: grid; place-items: center; min-height: 46px; margin-top: var(--s-1); border-radius: var(--r-pill); background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.apd__secure { margin: 0; text-align: center; font-size: var(--fs-micro); color: var(--c-muted); }
.apd__cursor { position: absolute; left: 0; top: 0; z-index: 2; width: 22px; height: 22px; color: var(--c-ink); transform: translate(30px, 30px); transition-property: transform, opacity; transition-timing-function: cubic-bezier(.45, .05, .3, 1); pointer-events: none; }
.apd__cursor svg { width: 22px; height: 22px; fill: var(--c-ground); stroke: var(--c-ink); stroke-width: 1.6; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.apd__cursor.is-hidden { opacity: 0; }
.apd__shop.is-agent .apd__cursor svg { fill: var(--c-accent-soft); stroke: var(--c-accent); }
.apd__ring { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c-accent); opacity: 0; pointer-events: none; }
.apd__ring.is-go { animation: apdRing 0.5s var(--ease); }
@keyframes apdRing { from { opacity: 0.9; scale: 0.4; } to { opacity: 0; scale: 1.4; } }
.apd__panel { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.apd__ph { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); margin: 0; }
.apd__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-heavy); color: var(--c-ink); }
.apd__brand .mark { width: 30px; height: auto; }
.aps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.aps { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 16px; background: var(--c-panel); transition: box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.aps.is-live { background: var(--c-ground); box-shadow: 0 0 0 1.5px var(--c-accent), 0 8px 24px -14px rgba(81, 0, 255, 0.45); }
.aps__h { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.aps__n { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-heavy); }
.aps__t { flex: 1 1 auto; font-weight: var(--fw-heavy); color: var(--c-ink); }
.aps__v { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); white-space: nowrap; }
.aps__v--live { color: var(--c-accent-ink); box-shadow: inset 0 0 0 1px var(--c-accent); }
.aps__v--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--c-accent); vertical-align: 0.1em; animation: apdPulse 1s ease-in-out infinite alternate; }
@keyframes apdPulse { from { opacity: 0.25; } to { opacity: 1; } }
.aps__v--good { background: var(--c-accent); color: var(--c-on-accent); box-shadow: none; }
.aps__v--warn { background: var(--c-warn-soft); color: var(--c-warn-ink); box-shadow: none; }
.aps__v--bad { background: var(--c-risk-soft); color: var(--c-risk-ink); box-shadow: none; }
.aps__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.aps__rows:empty { display: none; }
.apr { display: grid; grid-template-columns: 20px 5.5rem minmax(0, 1fr); align-items: center; gap: var(--s-2); font-size: var(--fs-small); opacity: 0.18; transition: opacity 0.35s var(--ease); }
.apr.is-in { opacity: 1; }
.apr__ic { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.apr__ic svg { width: 12px; height: 12px; }
.apr--good .apr__ic { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.apr--warn .apr__ic { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.apr--bad .apr__ic { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.apr__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.apr__v { color: var(--c-ink); font-weight: var(--fw-medium); }
.apdec-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.apdec-row .apdec { font-size: var(--fs-body); padding: 6px 16px; }
.apd__why { flex: 1 1 14rem; margin: 0; font-size: var(--fs-small); color: var(--c-ink-2); }
.apd__score { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); }
.apd__sk { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.apd__track { height: 8px; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; }
.apd__track i { display: block; width: 0; height: 100%; border-radius: var(--r-pill); background: var(--c-line-strong); transition: width 0.9s var(--ease); }
.apd__track i.is-allow, .apd__track i.is-limit { background: var(--c-accent); }
.apd__track i.is-block { background: var(--c-status-decline); }
.apd__sn { min-width: 3.5em; text-align: right; font-weight: var(--fw-heavy); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.apd__note { margin-top: var(--s-4); text-align: center; }
@media (prefers-reduced-motion: reduce) { .apd__cursor, .apd__ring, .aps__v--live::before { display: none; } .apr, .aps, .apd__track i { transition: none; } }
@media (max-width: 960px) { .apd__grid { grid-template-columns: 1fr; } .apd__shop { max-width: 560px; width: 100%; justify-self: center; } }
@media (max-width: 480px) { .apr { grid-template-columns: 20px minmax(0, 1fr); } .apr__k { display: none; } .apd__body { padding: var(--s-4); } .apd__panel { padding: var(--s-4); } }
/* Four answers */
.ap-dec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.ap-dec li { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ap-dec p { margin: 0; color: var(--c-ink-2); }
.ap-dec__note { margin-top: var(--s-4); text-align: center; }
@media (max-width: 960px) { .ap-dec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ap-dec { grid-template-columns: 1fr; } }
/* Why it works: the deep band */
.ap-data { position: relative; overflow: hidden; padding-block: var(--section-y); background: var(--c-ink-deep); color: var(--c-on-ink); }
.ap-data::before { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 0, 170, 0.22), rgba(81, 0, 255, 0.16) 55%, rgba(81, 0, 255, 0)); pointer-events: none; }
.ap-data__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-6) var(--s-8); align-items: center; }
.ap-data .sec-head { margin-bottom: 0; }
.ap-data .sec-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }
.ap-data .lead { color: var(--c-on-ink-muted); }
.ap-data__chips { list-style: none; margin: var(--s-5) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ap-data__chips li { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.ap-data__chips svg { width: 16px; height: 16px; color: var(--c-layer-infer); }
@media (max-width: 1023px) { .ap-data__grid { grid-template-columns: 1fr; } }
/* Where it fits */
.ap-fits__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-tint-violet); color: var(--c-accent); }
.ap-fits__ico svg { width: 22px; height: 22px; }
/* Small menus open as a smaller card */
#mm-company > .container { max-width: 820px; }
@media (max-width: 760px) { .reg5__pin .pin, .reg5__pin .pulse { r: 13px; } .reg5__land { stroke-width: 5; } }
/* Phone menu: fills the screen; the New card on the first screen */
.mobile-menu { min-height: calc(100vh - var(--hdr-h) - env(safe-area-inset-top, 0px)); }
@supports (height: 100dvh) { .mobile-menu { min-height: calc(100dvh - var(--hdr-h) - env(safe-area-inset-top, 0px)); } }
.mnav__root > .mm-promo { margin: var(--s-2) 0 var(--s-3); }
.mob-pinned { border-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------------
   v7.1 (28 Oct) — the test, bold: "Don't trust us. Test us." (Eva: not engaging or salesy enough).
   Copy and the button on the left, the blind test as a white sheet on the right (its rows check in one after another),
   then what customers measured. Certifications as small badges by the button: light, but seen. */
.poc7 { padding-block: var(--sec5-y); }
.poc7__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.poc7__copy { display: grid; gap: var(--s-6); align-content: start; }
.poc7__copy .sec-head { margin: 0; }
.poc7__title { font-size: clamp(2.75rem, 1.4rem + 4.4vw, 5.25rem); line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
.poc7__copy .btn-row { margin: 0; }
.poc7__trust { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.poc7__trust li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-on-ink); }
.poc7__trust svg { width: 16px; height: 16px; color: #FFD08A; }
/* The blind test sheet */
.bt { margin: 0; display: grid; gap: var(--s-3); padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem); border-radius: 26px; background: var(--c-ground); color: var(--c-ink); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.bt__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); padding-bottom: var(--s-2); }
.bt__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.bt__k .mark { width: 30px; height: auto; }
.bt__tag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.bt__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.bt__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 12px 0; border-top: 1px solid var(--c-line); }
.bt__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-tint-violet); color: var(--c-accent); }
.bt__ic svg { width: 20px; height: 20px; }
.bt__t { display: grid; min-width: 0; line-height: 1.3; }
.bt__t strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--c-ink); }
.bt__t span { font-size: var(--fs-small); color: var(--c-ink-2); }
.bt__st { padding: 4px 11px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: var(--fw-heavy); white-space: nowrap; background: var(--c-accent-soft); color: var(--c-accent-ink); }
.bt__row--lock .bt__ic { background: var(--c-ink); color: var(--c-on-ink); }
.bt__row--lock .bt__st { background: var(--c-ink); color: var(--c-on-ink); }
.bt__row--go .bt__st { background: var(--c-accent); color: var(--c-on-accent); }
.bt__row--you .bt__ic { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.bt__row--you .bt__st { background: var(--gradient-text-light); color: #FFFFFF; }
.bt__foot { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.bt__foot svg { width: 18px; height: 18px; color: var(--c-accent); }
.js .bt[data-reveal] .bt__row { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 260ms + 300ms); }
.js .bt[data-reveal] .bt__st { opacity: 0; transform: scale(0.7); transition: opacity 0.3s var(--ease), transform 0.35s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 260ms + 620ms); }
.js .bt[data-reveal].is-in .bt__row, .js .bt[data-reveal].is-in .bt__st { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .bt[data-reveal] .bt__row, .js .bt[data-reveal] .bt__st { opacity: 1; transform: none; transition: none; } }
/* What customers measured */
.poc7__proof { display: grid; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.poc7__pk { margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.poc7__nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.poc7__nums li { display: grid; gap: 4px; align-content: start; }
.poc7__nums strong { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.035em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD08A; justify-self: start; }
.poc7__nums span { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-on-ink); line-height: 1.35; }
.poc7__nums em { font-style: normal; font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.66); }
.poc7__honest { margin: 0; max-width: 72ch; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.8); }
.poc7__honest strong { color: var(--c-on-ink); }
@media (forced-colors: active) { .poc7__nums strong { -webkit-text-fill-color: currentColor; background: none; } }
@media (max-width: 1023px) { .poc7__grid { grid-template-columns: 1fr; } .bt { max-width: 640px; } }
@media (max-width: 860px) { .poc7__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .poc7__copy .btn-row .btn { flex: 1 1 100%; white-space: normal; text-align: center; } .bt__row { grid-template-columns: 36px minmax(0, 1fr); } .bt__row .bt__st { grid-column: 2; justify-self: start; } .bt__ic { width: 36px; height: 36px; } }
/* The FAQ now closes the page, after the test */
.poc7 + .faq5 { padding-top: 0; }
@media (min-width: 1024px) { .poc7__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(2rem, 1rem + 3vw, 3.5rem); } }
.poc7__trust li { border-radius: 14px; }
.ft-cert { padding: 6px 12px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.06); font-weight: var(--fw-bold); }
.ft-cert svg { color: #FFD08A; }

/* ------------------------------------------------------------------
   v7.2 (28 Oct) — Customers page (customers/index.html): eight anonymized stories.
   The spread reads at once: four figures, a mosaic of the eight places, a map colored by kind of business. */
.cu-hero { padding-block: var(--s-7) var(--s-8); background: var(--gradient-soft); overflow: hidden; }
.cu-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.cu-hero__copy { display: grid; gap: var(--s-4); align-content: start; }
.cu-hero__copy p + p { margin-top: 0; }
.cu-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 15ch; }
.cu-hero__title > span { display: block; }
.cu-hero .lead { max-width: 54ch; }
.cu-hero .btn-row { margin-top: var(--s-2); }
.cu-stats { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); max-width: 560px; }
.cu-stats li { display: grid; gap: 2px; padding-top: var(--s-3); border-top: 2px solid var(--c-ink); }
.cu-stats strong { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); font-variant-numeric: tabular-nums; }
.cu-stats span { font-size: var(--fs-small); color: var(--c-muted); font-weight: var(--fw-medium); }
.cu-mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(96px, 8vw, 132px); gap: 10px;
  grid-template-areas: "a a b c" "a a d e" "f g h h"; }
.cu-mosaic__t--1 { grid-area: a; } .cu-mosaic__t--2 { grid-area: b; } .cu-mosaic__t--3 { grid-area: c; } .cu-mosaic__t--4 { grid-area: d; }
.cu-mosaic__t--5 { grid-area: e; } .cu-mosaic__t--6 { grid-area: f; } .cu-mosaic__t--7 { grid-area: g; } .cu-mosaic__t--8 { grid-area: h; }
.cu-mosaic__t { min-width: 0; }
.cu-mosaic__t a { position: relative; isolation: isolate; display: block; height: 100%; border-radius: 18px; overflow: hidden; background: var(--c-ink-deep); }
.cu-mosaic__t img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--ease); }
.cu-mosaic__t a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 5, 26, 0) 45%, rgba(7, 5, 26, 0.62) 100%); }
.cu-mosaic__t a:hover img, .cu-mosaic__t a:focus-visible img { transform: scale(1.06); }
.cu-mosaic__t a:focus-visible { outline-offset: 3px; }
.cu-mosaic__l { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.94); color: var(--c-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap; }
.cu-kdot { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--c-kind-bank); }
.cu-kdot--lender { background: var(--c-kind-lender); }
.cu-kdot--platform { background: var(--c-kind-platform); }
.js .cu-mosaic__t { opacity: 0; transform: translateY(10px) scale(0.97); animation: cu-in 0.6s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes cu-in { to { opacity: 1; transform: none; } }

/* At a glance: the map and the stories by kind of business */
.cu-glance .sec-head { margin-bottom: var(--s-6); }
.cu-glance__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.cu-map { margin: 0 auto; display: grid; gap: var(--s-4); width: 100%; max-width: 1120px; min-width: 0; }
.cu-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.cu-map__land { fill: none; stroke: var(--c-map-land); stroke-width: 4.2; stroke-linecap: round; }
.cu-pin { --kc: var(--c-kind-bank); transition: opacity var(--dur-2) var(--ease); }
.cu-pin--lender { --kc: var(--c-kind-lender); }
.cu-pin--platform { --kc: var(--c-kind-platform); }
.cu-pin__dot { fill: var(--kc); stroke: var(--c-ground); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.cu-pin__pulse { fill: var(--kc); opacity: 0; transform-box: fill-box; transform-origin: center; animation: cu-pulse 3s var(--ease) infinite; animation-delay: calc(var(--i, 0) * 0.35s); }
.cu-pin text { fill: var(--c-on-accent); font-family: var(--font-sans); font-size: 13px; font-weight: var(--fw-heavy); pointer-events: none; }
@keyframes cu-pulse { 0% { opacity: 0.45; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(2.4); } }
.cu-glance__grid.has-hl .cu-pin { opacity: 0.16; }
.cu-glance__grid.has-hl .cu-pin.is-hl { opacity: 1; }
.cu-map__key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.cu-map__key span { display: inline-flex; align-items: center; gap: var(--s-2); }
.cu-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; min-width: 0; }
.cu-legend__g { --kc: var(--c-kind-bank); display: grid; gap: var(--s-2); align-content: start; }
.cu-legend__g--lender { --kc: var(--c-kind-lender); }
.cu-legend__g--platform { --kc: var(--c-kind-platform); }
.cu-legend__k { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.cu-legend__ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--kc); color: var(--c-on-accent); }
.cu-legend__ic svg { width: 16px; height: 16px; }
.cu-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cu-legend a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--s-3); align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.cu-legend a:hover, .cu-legend a:focus-visible { box-shadow: 0 0 0 1.5px var(--kc); transform: translateX(2px); color: var(--c-ink); text-decoration: none; }
.cu-legend__n { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--kc); font-variant-numeric: tabular-nums; }
.cu-legend__t { display: grid; gap: 3px; min-width: 0; }
.cu-legend__t strong { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.25; }
.cu-legend__t > span { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-small); color: var(--c-muted); line-height: 1.3; }
.cu-legend__t em { font-style: normal; }
/* The decision each story was about */
.cu-dec { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1.5; }
.cu-dec--credit { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.cu-dec--fraud { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.cu-dec--identity { background: var(--c-warn-soft); color: var(--c-warn-ink); }

/* The stories */
.cu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.cu-card { --kc: var(--c-kind-bank); scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-4)); display: grid; min-width: 0; border-radius: 26px; overflow: hidden; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow var(--dur-2) var(--ease); }
.cu-card--lender { --kc: var(--c-kind-lender); }
.cu-card--platform { --kc: var(--c-kind-platform); }
.cu-card:target { box-shadow: 0 0 0 2px var(--kc), var(--shadow-float); }
.cu-card__media { position: relative; isolation: isolate; aspect-ratio: 3 / 1; overflow: hidden; background: var(--c-ink-deep); }
.cu-card__media img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cu-card__media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 5, 26, 0.62), rgba(7, 5, 26, 0.05) 60%); }
.cu-card__n { position: absolute; left: var(--s-5); top: 50%; transform: translateY(-50%); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: var(--fw-heavy); letter-spacing: -0.04em; line-height: 1; color: var(--c-on-ink); }
.cu-card__kind { position: absolute; right: var(--s-4); top: var(--s-4); display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: var(--r-pill); background: var(--kc); color: var(--c-on-accent); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.cu-card__kind svg { width: 16px; height: 16px; }
.cu-card__body { display: grid; gap: var(--s-3); align-content: start; min-width: 0; padding: var(--s-5) var(--s-6) var(--s-6); }
.cu-card__body p + p { margin-top: 0; }
.cu-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-card__tags span { padding: 2px 10px; border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.cu-card__name { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-heavy); }
.cu-card__title { font-size: var(--fs-lead); line-height: 1.35; font-weight: var(--fw-medium); color: var(--c-ink-2); }
.cu-card__use { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--c-muted); }
.cu-card__res { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1.5px solid var(--c-ink); }
.cu-card__res li { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.cu-card__res strong { justify-self: start; white-space: nowrap; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.cu-card__res span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); }
.cu-card__how { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-small); color: var(--c-ink-2); }
.cu-card__how svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--c-accent); }
.cu-card__more { border-top: 1px solid var(--c-line); }
.cu-card__more summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 48px; cursor: pointer; list-style: none; font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.cu-card__more summary::-webkit-details-marker { display: none; }
.cu-card__more summary:hover { color: var(--c-accent); }
.cu-card__more[open] summary .faq__icon::after { transform: rotate(0deg); }
.cu-card__story { display: grid; gap: var(--s-2); padding-bottom: var(--s-2); }
.cu-card__story p + p { margin-top: 0; }
.cu-card__story h4 { margin-top: var(--s-3); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.cu-card__story h4:first-child { margin-top: 0; }
.cu-card__story p { color: var(--c-ink-2); }
.cu-card__fn { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
/* #5: the risk ladder */
.cu-lad { margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); padding: var(--s-4); border-radius: 16px; background: var(--c-panel); }
.cu-lad figcaption { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.cu-lad ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cu-lad__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.5rem; gap: var(--s-3); align-items: center; }
.cu-lad__k { display: grid; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; }
.cu-lad__k em { font-style: normal; font-weight: var(--fw-regular); font-size: var(--fs-micro); color: var(--c-muted); }
.cu-lad__bar { height: 12px; border-radius: 6px; overflow: hidden; background: var(--c-ground); }
.cu-lad__bar i { display: block; width: calc(var(--v, 1) * 100%); height: 100%; border-radius: 6px; background: var(--c-status-approve); transform-origin: left center; }
.cu-lad__row--review .cu-lad__bar i { background: var(--c-status-review); }
.cu-lad__row--reject .cu-lad__bar i { background: var(--c-status-decline); }
.cu-lad__row strong { font-size: var(--fs-small); font-weight: var(--fw-heavy); text-align: right; font-variant-numeric: tabular-nums; }
.js .cu-card[data-reveal] .cu-lad__bar i { transform: scaleX(0); transition: transform 0.9s var(--ease) 0.35s; }
.js .cu-card[data-reveal].is-in .cu-lad__bar i { transform: none; }
.cu-cta__in .sec-head { max-width: 760px; }
@media (prefers-reduced-motion: reduce) {
  .js .cu-mosaic__t { opacity: 1; transform: none; animation: none; }
  .cu-pin__pulse { animation: none; }
  .js .cu-card[data-reveal] .cu-lad__bar i { transform: none; transition: none; }
}
@media (max-width: 1024px) {
  .cu-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cu-mosaic { max-width: 760px; }
}
@media (max-width: 900px) {
  .cu-grid { grid-template-columns: minmax(0, 1fr); }
  .cu-legend { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cu-hero { padding-block: var(--s-6) var(--s-7); }
  .cu-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .cu-mosaic { grid-auto-rows: 76px; gap: 6px; }
  .cu-mosaic__t a { border-radius: 12px; }
  .cu-mosaic__t:not(.cu-mosaic__t--1):not(.cu-mosaic__t--8) .cu-mosaic__l { display: none; }
  .cu-pin text { display: none; }
  .cu-pin__dot { transform: scale(1.5); }
}
@media (max-width: 480px) {
  .cu-card { border-radius: 20px; }
  .cu-card__media { aspect-ratio: 2.4 / 1; }
  .cu-card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
  .cu-card__res li { grid-template-columns: 8.25rem minmax(0, 1fr); gap: var(--s-3); }
  .cu-card__res strong { font-size: 1.375rem; }
  .cu-lad { padding: var(--s-3); }
  .cu-lad__row { grid-template-columns: 6.25rem minmax(0, 1fr) 3rem; gap: var(--s-2); }
}

/* Customers menu (v7.2): the descriptive name in place of a logo, four facts in the intro, eight tiles */
.cs-tile__name { max-width: 16ch; font-size: var(--fs-body); font-weight: var(--fw-heavy); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.mm-stories__facts { list-style: none; margin: var(--s-1) 0 var(--s-2); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
.mm-stories__facts li { display: grid; font-size: var(--fs-micro); color: var(--c-muted); font-weight: var(--fw-medium); }
.mm-stories__facts strong { font-size: 1.625rem; line-height: 1.05; letter-spacing: -0.03em; font-weight: var(--fw-heavy); color: var(--c-ink); }
.mm-panel--stories .cs-tile { min-height: 200px; }
.mm-panel--stories .cs-tile__num { font-size: 1.625rem; }
.mm-flat__groups--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* v7.2 (28 Oct): the four results on the homepage open their story */
.poc7__nums li { display: block; }
.poc7__nums a { display: grid; gap: 4px; align-content: start; height: 100%; color: inherit; text-decoration: none; }
.poc7__nums a:hover, .poc7__nums a:focus-visible { color: inherit; text-decoration: none; }
.poc7__nums a:hover em, .poc7__nums a:focus-visible em { color: var(--c-on-ink); text-decoration: underline; text-underline-offset: 3px; }
.poc7__all { margin-top: calc(-1 * var(--s-2)); font-weight: var(--fw-bold); }

/* ------------------------------------------------------------------
   v7.2 (28 Oct) — Resources (draft): the hub, the blind-test guide, the glossary.
   Organized by the question a buyer asks; real content only (stories, the blind test, definitions). */
.rs-hero { padding-block: var(--s-7) var(--s-8); background: var(--gradient-soft); }
.rs-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.rs-hero__copy { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.rs-hero__copy p + p { margin-top: 0; }
.rs-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 12ch; }
.rs-hero .lead { max-width: 52ch; }
/* Search, shared with the glossary */
.rs-find { position: relative; z-index: 3; max-width: 600px; margin-top: var(--s-2); }
.rs-search { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 60px; padding: 0 var(--s-5); border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 14px 34px -20px rgba(10, 10, 30, 0.35); cursor: text; }
.rs-search:focus-within { box-shadow: 0 0 0 2px var(--c-accent), 0 14px 34px -20px rgba(10, 10, 30, 0.35); }
.rs-search svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--c-accent); }
.rs-search input { flex: 1 1 auto; min-width: 0; height: 56px; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--fs-body); color: var(--c-ink); outline: none; -webkit-appearance: none; appearance: none; }
.rs-search input::placeholder { color: var(--c-muted); opacity: 1; }
.rs-hits { position: absolute; left: 0; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: var(--s-2); max-height: 420px; overflow-y: auto; border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.rs-hits a { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: 10px 12px; border-radius: 12px; color: var(--c-ink); text-decoration: none; }
.rs-hits a:hover, .rs-hits a:focus-visible { background: var(--c-panel); color: var(--c-ink); text-decoration: none; }
.rs-hit__y { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.rs-hit__t { font-weight: var(--fw-bold); line-height: 1.3; }
.rs-hit--none { padding: 12px; font-size: var(--fs-small); color: var(--c-ink-2); }
.rs-pop { display: grid; gap: var(--s-2); }
.rs-pop > p { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.rs-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rs-pop a { display: inline-flex; padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink-2); text-decoration: none; }
.rs-pop a:hover { color: var(--c-accent-ink); box-shadow: inset 0 0 0 1px var(--c-accent); text-decoration: none; }
/* The featured guide */
.rs-feat { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-4); min-width: 0; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 30px; background: var(--c-ink-deep); color: var(--c-on-ink); text-decoration: none; box-shadow: var(--shadow-float); }
.rs-feat:hover { color: var(--c-on-ink); text-decoration: none; }
.rs-feat:focus-visible { outline-offset: 4px; }
.rs-feat__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); }
.rs-feat__tag { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-on-ink); color: var(--c-ink); font-size: var(--fs-micro); font-weight: var(--fw-heavy); }
.rs-feat__meta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.rs-feat__meta svg { width: 16px; height: 16px; }
.rs-feat__t { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: var(--fw-heavy); }
.rs-feat__t .grad-text { display: block; }
.rs-feat__l { max-width: 46ch; font-size: var(--fs-body); line-height: 1.5; color: var(--c-on-ink-muted); }
.rs-feat__rows { display: grid; gap: 8px; padding: var(--s-3); border-radius: 18px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.rs-feat__rows > span { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.rs-feat__rows i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); }
.rs-feat__rows i svg { width: 18px; height: 18px; }
.rs-feat__rows b { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-heavy); white-space: nowrap; }
.rs-feat__rows b.is-lock { background: var(--c-ink); color: var(--c-on-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.rs-feat__rows b.is-you { background: var(--gradient-text-light); color: var(--c-on-accent); }
.rs-feat__go { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); }
.rs-feat__go svg { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease); }
.rs-feat:hover .rs-feat__go svg { transform: translateX(4px); }
/* Six questions */
.rs-qgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.rs-q { scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-4)); display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s-3); padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow var(--dur-2) var(--ease); }
.rs-q:target { box-shadow: 0 0 0 2px var(--c-accent), var(--shadow-float); }
.rs-q p + p { margin-top: 0; }
.rs-q h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.rs-q__a { color: var(--c-ink-2); }
.rs-q__links { list-style: none; margin: var(--s-2) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.rs-q__links a { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) 16px; gap: var(--s-3); align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.rs-q__links a:hover { color: var(--c-accent-ink); text-decoration: none; }
.rs-q__links svg { width: 16px; height: 16px; align-self: center; color: var(--c-accent); transition: transform var(--dur-1) var(--ease); }
.rs-q__links a:hover svg { transform: translateX(3px); }
.rs-q__y { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.rs-q__l { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.35; }
.cu-dec.rs-dec--test { background: var(--c-ink); color: var(--c-on-ink); }
/* Rows with a heading and a button */
.rs-row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-5); margin-bottom: var(--s-6); }
.rs-row-head .sec-head { margin-bottom: 0; }
.rs-tiles .cs-tile { min-height: 280px; }
.rs-terms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.rs-term { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); border-radius: 20px; background: var(--c-panel); color: var(--c-ink); text-decoration: none; transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.rs-term:hover { background: var(--c-tint-violet); box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-ink); text-decoration: none; }
.rs-term .gl-cat { justify-self: start; }
.rs-term strong { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.rs-term > span:last-child { font-size: var(--fs-small); color: var(--c-ink-2); }
/* Coming soon */
.rs-soon__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.rs-next { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-2); align-content: start; padding: calc(var(--s-6) + 128px) var(--s-6) var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.rs-next p + p { margin-top: 0; }
.rs-next__art { position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 128px; background-color: var(--c-ink-deep); }
.rs-next--research .rs-next__art { background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1.2px, transparent 1.7px), radial-gradient(60% 130% at 18% 0%, rgba(81, 0, 255, 0.95), rgba(81, 0, 255, 0) 70%), radial-gradient(50% 110% at 92% 100%, rgba(255, 0, 170, 0.6), rgba(255, 0, 170, 0) 70%); background-size: 14px 14px, auto, auto; }
.rs-next--webinar .rs-next__art { background-image: radial-gradient(circle at 78% 55%, rgba(255, 255, 255, 0.95) 0 5px, rgba(255, 255, 255, 0) 6px), repeating-radial-gradient(circle at 78% 55%, rgba(255, 255, 255, 0.2) 0 1.5px, rgba(255, 255, 255, 0) 2px 20px), var(--gradient-threat); }
.rs-next::after { content: "Coming soon"; position: absolute; top: var(--s-4); left: var(--s-4); padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.94); color: var(--c-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); }
.rs-next h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.rs-next > p:not(.small):not(.rs-next__y) { color: var(--c-ink-2); }
.rs-next__y { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.rs-next__y svg { width: 16px; height: 16px; }
.rs-notify { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6); border-radius: 24px; background: var(--c-ink-deep); color: var(--c-on-ink); }
.rs-notify p + p { margin-top: 0; }
.rs-notify__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.rs-notify__k svg { width: 22px; height: 22px; color: var(--c-violet-on-dark); }
.rs-notify > p:not(.rs-notify__k):not(.small) { color: var(--c-on-ink-muted); }
.rs-notify .field { display: block; margin: 0; }
.rs-notify .input { width: 100%; }
.rs-notify .btn { justify-self: start; }
.rs-notify__done { color: var(--c-on-ink); }
.rs-stories .sec-head h2, .rs-gloss .sec-head h2, .rs-soon .sec-head h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); }

/* The guide (resources/blind-test-guide.html) */
.art-hero { padding-block: var(--s-6) var(--s-8); background: var(--gradient-soft); }
.art-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.art-hero__copy { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.art-hero__copy p + p { margin-top: 0; }
.art-hero__k { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.art-meta { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); color: var(--c-muted); }
.art-meta svg { width: 16px; height: 16px; }
.art-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 15ch; }
.art-hero__title > span { display: block; }
.art-hero .lead { max-width: 56ch; }
.art-by { font-size: var(--fs-small); color: var(--c-muted); }
.art-hero .bt { justify-self: end; width: 100%; max-width: 540px; }
.gdoc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 6rem); align-items: start; padding-block: var(--s-8) var(--section-y); }
.gdoc__toc { position: sticky; top: calc(var(--hdr-h, 88px) + var(--s-5)); display: grid; gap: var(--s-3); }
.gdoc__toc-k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.gdoc__toc ol { list-style: none; margin: 0; padding: 0; display: grid; border-left: 2px solid var(--c-line); }
.gdoc__toc a { display: block; margin-left: -2px; padding: 8px 0 8px var(--s-4); border-left: 2px solid transparent; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-ink-2); text-decoration: none; }
.gdoc__toc a:hover { color: var(--c-accent-ink); text-decoration: none; }
.gdoc__toc a[aria-current="true"] { border-left-color: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); }
.gdoc__body { display: grid; gap: var(--s-8); min-width: 0; max-width: 780px; }
.art-sec { display: grid; gap: var(--s-4); scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-5)); }
.art-sec p + p { margin-top: 0; }
.art-sec > h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -0.03em; font-weight: var(--fw-heavy); }
.art-sec > p { max-width: 68ch; line-height: 1.65; color: var(--c-ink-2); }
.art-trio { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.art-trio li { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4); border-radius: 18px; background: var(--c-panel); }
.art-trio strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.art-trio span { font-size: var(--fs-small); color: var(--c-ink-2); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.g-step { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); padding-bottom: var(--s-5); }
.g-step::before { content: ""; position: absolute; left: 23px; top: 54px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--c-line); }
.g-step:last-child { padding-bottom: 0; }
.g-step:last-child::before { content: none; }
.g-step__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--c-tint-violet); color: var(--c-accent); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.1); }
.g-step__ic svg { width: 22px; height: 22px; }
.g-step__t { display: grid; gap: var(--s-1); padding-top: 4px; }
.g-step__t p + p { margin-top: 0; }
.g-step h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.g-step__n { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); font-variant-numeric: tabular-nums; }
.g-step p { line-height: 1.6; color: var(--c-ink-2); }
.g-step p a { font-weight: var(--fw-bold); }
.js .g-steps[data-reveal] .g-step { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .g-steps[data-reveal].is-in .g-step { opacity: 1; transform: none; }
.pm { margin: var(--s-2) 0 0; display: grid; overflow: hidden; border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.pm__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line); background: var(--gradient-soft); }
.pm__k { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.pm__k .mark { width: 28px; height: auto; }
.pm__copy { gap: 6px; }
.pm__copy svg { width: 16px; height: 16px; }
.pm__rows { margin: 0; display: grid; }
.pm__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--c-line); }
.pm__row dt { display: grid; gap: 2px; }
.pm__row dt strong { font-weight: var(--fw-heavy); }
.pm__row dt span { font-size: var(--fs-small); color: var(--c-muted); }
.pm__row dd { margin: 0; padding: 7px 10px; border-radius: 8px 8px 2px 2px; background: var(--c-panel); border-bottom: 1.5px dashed var(--c-line-strong); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--c-ink); }
.pm__sign { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding: var(--s-4) var(--s-5); font-size: var(--fs-small); color: var(--c-muted); }
.pm__sign i { display: inline-block; min-width: 9ch; margin-left: 6px; padding-bottom: 2px; border-bottom: 1px solid var(--c-line-strong); font-style: normal; color: var(--c-ink-2); }
.art-note { color: var(--c-muted); }
.art-check { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.art-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-4); border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); font-weight: var(--fw-medium); line-height: 1.45; }
.art-check svg { width: 20px; height: 20px; margin-top: 2px; color: var(--c-accent); }
.art-cc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.art-cc__col { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 20px; }
.art-cc__col--can { background: var(--c-tint-violet); }
.art-cc__col--cant { background: var(--c-tint-rose); box-shadow: inset 0 0 0 1px var(--c-risk-soft); }
.art-cc__col h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); }
.art-cc__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.art-cc__col li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.art-cc__col svg { width: 18px; height: 18px; margin-top: 2px; }
.art-cc__col--can svg { color: var(--c-accent); }
.art-cc__col--cant svg { color: var(--c-risk-ink); }
.art-end__card { border-radius: 28px; }
.art-end__in { display: grid; gap: var(--s-4); padding: clamp(1.75rem, 1rem + 3vw, 3rem); }
.art-end__in p + p { margin-top: 0; }
.art-end__in .eyebrow { color: var(--c-on-ink); }
.art-end__in h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.03em; font-weight: var(--fw-heavy); color: var(--c-on-ink); }
.rs-related { padding-block: var(--s-8); }
.rs-related__h { margin-bottom: var(--s-5); font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.rs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.rs-card { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.rs-card:hover { box-shadow: 0 0 0 1.5px var(--c-accent), var(--shadow-float); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.rs-card__y { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-ink); }
.rs-card__y svg { width: 16px; height: 16px; }
.rs-card strong { font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: 1.25; }
.rs-card > span:last-child { font-size: var(--fs-small); color: var(--c-ink-2); }

/* The glossary (resources/glossary.html) */
.gl-hero { padding-block: var(--s-6); background: var(--gradient-soft); }
.gl-hero .container { display: grid; gap: var(--s-4); }
.gl-hero .container > p + p { margin-top: 0; }
.gl-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 16ch; }
.gl-hero .lead { max-width: 60ch; }
.gl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
.gl-search { flex: 1 1 320px; max-width: 460px; min-height: 52px; }
.gl-search input { height: 48px; }
.gl-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.gl-chip { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink-2); font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); cursor: pointer; }
.gl-chip:hover { box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-accent-ink); }
.gl-chip[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: none; }
.gl-count { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-muted); }
.gl-az ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gl-az a, .gl-az span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.gl-az a { background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; }
.gl-az a:hover { background: var(--c-accent); box-shadow: none; color: var(--c-on-accent); text-decoration: none; }
.gl-az a.is-off { opacity: 0.35; pointer-events: none; }
.gl-az span { color: var(--c-line-strong); }
.gl-body { padding-block: var(--s-7) var(--section-y); }
.gl-letter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-5); padding-block: var(--s-5); border-top: 1.5px solid var(--c-ink); scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-4)); }
.gl-letter__h { font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.gl-terms { margin: 0; display: grid; }
.gl-term { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: var(--s-3) var(--s-6); padding: var(--s-4) var(--s-3); margin-inline: calc(-1 * var(--s-3)); border-bottom: 1px solid var(--c-line); border-radius: 0; scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-4)); transition: background-color var(--dur-2) var(--ease); }
.gl-term:last-child { border-bottom: 0; }
.gl-term:target { border-radius: 14px; background: var(--c-tint-violet); }
.gl-term dt { display: flex; flex-wrap: wrap; align-items: baseline; align-content: start; gap: var(--s-2); }
.gl-term__t { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.gl-term dd { margin: 0; display: grid; gap: var(--s-2); }
.gl-term dd p { color: var(--c-ink-2); line-height: 1.6; }
.gl-term dd p + p { margin-top: 0; }
.gl-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--fs-small); }
.gl-more:empty { display: none; }
.gl-where { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
.gl-where svg { width: 16px; height: 16px; }
.gl-rel { color: var(--c-muted); }
.gl-cat { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; }
.gl-cat--fraud { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.gl-cat--identity { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.gl-cat--models { background: var(--c-panel); color: var(--c-ink-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.gl-none { padding: var(--s-6) 0; font-size: var(--fs-lead); color: var(--c-ink-2); }
@media (prefers-reduced-motion: reduce) { .js .g-steps[data-reveal] .g-step { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1100px) {
  .rs-qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-soon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-notify { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .rs-hero__grid, .art-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .rs-feat { max-width: 640px; }
  .art-hero .bt { justify-self: start; }
  .gdoc { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-7) var(--section-y); }
  .gdoc__toc { position: static; }
  .rs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rs-terms, .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-check, .art-cc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rs-qgrid, .rs-soon__grid { grid-template-columns: minmax(0, 1fr); }
  .art-trio { grid-template-columns: minmax(0, 1fr); }
  .gl-letter { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .gl-term { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pm__row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rs-terms, .rs-cards, .rs-tiles { grid-template-columns: minmax(0, 1fr); }
  .rs-hits a { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rs-q, .rs-next, .rs-notify { padding-inline: var(--s-5); }
  .rs-q { padding-block: var(--s-5); }
  .rs-search { padding: 0 var(--s-4); }
  .g-step { grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); }
  .g-step__ic { width: 40px; height: 40px; border-radius: 12px; }
  .g-step::before { left: 19px; top: 46px; }
  .pm__top, .pm__row, .pm__sign { padding-inline: var(--s-4); }
}
.poc7__guide { font-size: var(--fs-small); font-weight: var(--fw-bold); }
.poc7__more { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-on-ink); font-weight: var(--fw-bold); text-decoration: none; }
.poc7__more svg { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease); }
.poc7__more:hover { color: var(--c-on-ink); text-decoration: none; }
.poc7__more:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------
   v7.3 (28 Oct, after Eva's review) */

/* Customers page, lighter: plain labels on the mosaic (no dots), a typographic index under the map, cards that open
   the story's own page */
.cu-mosaic__l { left: 12px; right: 12px; bottom: 10px; padding: 0; border-radius: 0; background: none; color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-heavy); letter-spacing: -0.005em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); }
.cu-mosaic__t a::after { background: linear-gradient(180deg, rgba(7, 5, 26, 0) 50%, rgba(7, 5, 26, 0.7) 100%); }
.cu-index { list-style: none; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); border-top: 1.5px solid var(--c-ink); }
.cu-index li { border-bottom: 1px solid var(--c-line); }
.cu-ix { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 20px; gap: var(--s-3); align-items: center; padding-block: var(--s-4); color: var(--c-ink); text-decoration: none; }
.cu-ix:hover, .cu-ix:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.cu-ix__n { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.cu-ix__t { display: grid; gap: 2px; min-width: 0; }
.cu-ix__t strong { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.2; }
.cu-ix__t span { font-size: var(--fs-small); color: var(--c-muted); }
.cu-ix svg { width: 20px; height: 20px; color: var(--c-accent); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.cu-ix:hover svg, .cu-ix:focus-visible svg { opacity: 1; transform: none; }
.cu-card { transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.cu-card:hover { box-shadow: 0 0 0 1.5px var(--c-accent), var(--shadow-float); transform: translateY(-2px); }
.cu-card__link { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--c-ink); text-decoration: none; }
.cu-card__link:hover, .cu-card__link:focus-visible { color: var(--c-ink); text-decoration: none; }
.cu-card__link:focus-visible { outline-offset: -3px; }
.cu-card__media { display: block; aspect-ratio: 2.2 / 1; }
.cu-card__media img { transition: transform 0.6s var(--ease); }
.cu-card__link:hover .cu-card__media img { transform: scale(1.04); }
.cu-card__body { display: grid; align-content: start; gap: var(--s-2); }
.cu-card__k { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-muted); }
.cu-card__name, .cu-card__title { display: block; }
.cu-card__key { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.cu-card__key strong { white-space: nowrap; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.cu-card__key > span { flex: 1 1 14rem; font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); }
.cu-card__go { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.cu-card__go svg { width: 18px; height: 18px; transition: transform var(--dur-1) var(--ease); }
.cu-card__link:hover .cu-card__go svg { transform: translateX(4px); }
@media (max-width: 900px) { .cu-index { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; } }

/* One page per story (customers/<id>.html) */
.st2-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(380px, 54vh, 580px); background: var(--c-ink-deep); color: var(--c-on-ink); }
.st2-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.st2-hero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 5, 26, 0.94) 0%, rgba(7, 5, 26, 0.6) 45%, rgba(7, 5, 26, 0.2) 100%); }
.st2-hero__in { display: grid; gap: var(--s-3); padding-block: var(--s-9) var(--s-7); }
.st2-hero__in p + p { margin-top: 0; }
.st2-hero .crumbs ol { color: rgba(255, 255, 255, 0.72); }
.st2-hero .crumbs a { color: rgba(255, 255, 255, 0.88); }
.st2-hero .crumbs a:hover { color: var(--c-on-ink); }
.st2-hero .crumbs [aria-current="page"] { color: var(--c-on-ink); }
.st2-hero .crumbs li + li::before { color: rgba(255, 255, 255, 0.5); }
.st2-hero .eyebrow { color: var(--c-on-ink); }
.st2-hero__title { max-width: 18ch; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); color: var(--c-on-ink); }
.st2-hero__lead { max-width: 40ch; font-size: var(--fs-lead); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.9); }
.st2-res { padding-block: var(--s-7) var(--s-6); border-bottom: 1px solid var(--c-line); }
.st2-res__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.st2-res__list li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-ink); }
.st2-res__list strong { justify-self: start; font-size: var(--fs-figure); line-height: 1; letter-spacing: -0.045em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.st2-res__list span { max-width: 32ch; font-size: var(--fs-body); line-height: 1.45; color: var(--c-ink-2); }
.js .st2-res__list[data-reveal] li { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .st2-res__list[data-reveal] li:nth-child(2) { transition-delay: 0.12s; }
.js .st2-res__list[data-reveal] li:nth-child(3) { transition-delay: 0.24s; }
.js .st2-res__list[data-reveal].is-in li { opacity: 1; transform: none; }
.st2-how { display: flex; gap: var(--s-2); align-items: flex-start; margin-top: var(--s-5); font-size: var(--fs-small); color: var(--c-ink-2); }
.st2-how svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--c-accent); }
.st2-lad { max-width: 640px; margin-top: var(--s-5); }
.js .st2-lad[data-reveal] .cu-lad__bar i { transform: scaleX(0); transition: transform 0.9s var(--ease) 0.3s; }
.js .st2-lad[data-reveal].is-in .cu-lad__bar i { transform: none; }
.st2-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 6rem); align-items: start; padding-block: var(--s-8) var(--section-y); }
.st2-side { position: sticky; top: calc(var(--hdr-h, 88px) + var(--s-5)); display: grid; gap: var(--s-4); }
.st2-side p + p { margin-top: 0; }
.st2-facts { margin: 0; display: grid; border-top: 1.5px solid var(--c-ink); }
.st2-facts div { display: grid; gap: 2px; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.st2-facts dt { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.st2-facts dd { margin: 0; font-weight: var(--fw-bold); line-height: 1.35; }
.st2-side .btn { justify-self: start; }
.st2-art { display: grid; gap: var(--s-7); min-width: 0; max-width: 720px; }
.st2-sec { display: grid; gap: var(--s-3); }
.st2-sec p + p { margin-top: 0; }
.st2-sec h2 { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.st2-sec p { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); }
.st2-ex { margin: 0; display: grid; gap: var(--s-3); padding: var(--s-6); border-radius: 22px; background: var(--gradient-soft); box-shadow: inset 4px 0 0 var(--c-accent); }
.st2-ex figcaption { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.st2-ex blockquote { margin: 0; }
.st2-ex p { font-size: var(--fs-lead); line-height: 1.5; font-weight: var(--fw-medium); color: var(--c-ink); }
.st2-fn { padding-top: var(--s-4); border-top: 1px dashed var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
.st2-more__h { font-size: var(--fs-h2); font-weight: var(--fw-heavy); letter-spacing: -0.03em; }
.st2-more__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.st2-mini { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: 22px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.st2-mini:hover, .st2-mini:focus-visible { box-shadow: 0 0 0 1.5px var(--c-accent), var(--shadow-float); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.st2-mini img { display: block; width: 100%; max-width: 100%; aspect-ratio: 2.4 / 1; object-fit: cover; }
.st2-mini__t { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-4) var(--s-5) var(--s-5); }
.st2-mini__k { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); }
.st2-mini strong { font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: 1.25; }
.st2-mini__r { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); }
.st2-mini__r b { font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
@media (prefers-reduced-motion: reduce) { .js .st2-res__list[data-reveal] li { opacity: 1; transform: none; transition: none; } .js .st2-lad[data-reveal] .cu-lad__bar i { transform: none; transition: none; } }
@media (max-width: 1024px) {
  .st2-body { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding-block: var(--s-7) var(--section-y); }
  .st2-side { position: static; order: 2; }
  .st2-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .st2-res__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .st2-more__list { grid-template-columns: minmax(0, 1fr); }
  .st2-hero__in { padding-block: var(--s-8) var(--s-6); }
  .st2-ex { padding: var(--s-5); }
}

/* Customers menu: four stories, a name and one result each (Eva: "too packed, too busy"); a plain list on phones */
.mm-panel--stories .cs-tile { min-height: 236px; }
.mm-stories__intro .btn--arrow svg { width: 16px; height: 16px; }
.mnav__stories { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-story { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--s-3); align-items: center; margin-inline: -8px; padding: 8px; border-radius: 14px; color: var(--c-ink); text-decoration: none; }
.mm-story:hover, .mm-story:focus-visible { background: var(--c-panel); color: var(--c-ink); text-decoration: none; }
.mm-story img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.mm-story > span { display: grid; gap: 2px; min-width: 0; }
.mm-story strong { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.25; }
.mm-story > span > span { font-size: var(--fs-small); line-height: 1.35; color: var(--c-muted); }
.mm-story b { font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.mm-link--all { display: inline-flex; align-items: center; gap: var(--s-2); }
.mm-link--all svg { width: 16px; height: 16px; }

/* Footer: five columns, and below that the lists flow into columns, so a short list never leaves a hole */
.ft-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ft-cols { display: block; columns: 3 170px; column-gap: var(--s-5); } .ft-col { break-inside: avoid; margin-bottom: var(--s-6); } }
@media (max-width: 560px) { .ft-cols { columns: 2 140px; } }

/* The legacy crowd switches faster, so people see it happen (Eva) */
.cw { transition-duration: 0.35s; transition-delay: calc(var(--i, 0) * 9ms); }

/* Why now: the World Economic Forum figure, a hundred leaders as a hundred squares */
.thr--wef { gap: var(--s-4); }
.thr__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.waf { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; width: clamp(150px, 13vw, 196px); }
.waf i { aspect-ratio: 1; border-radius: 3px; background: var(--c-line); }
.waf i.on { background: var(--c-accent); background: color-mix(in srgb, #F81B69 calc(var(--k) * 1.37%), #5100FF); }
.js .thr--wef[data-reveal] .waf i.on { background: var(--c-line); transition: background-color 0.3s var(--ease); transition-delay: calc(var(--k) * 14ms + 250ms); }
.js .thr--wef[data-reveal].is-in .waf i.on { background: var(--c-accent); background: color-mix(in srgb, #F81B69 calc(var(--k) * 1.37%), #5100FF); }
.thr__big { display: grid; gap: var(--s-2); margin: 0; }
.thr__big strong { justify-self: start; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: var(--fw-heavy); background-image: var(--gradient-threat); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.thr__big span { max-width: 26ch; font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.35; color: var(--c-ink); }
.thr__more { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.thr__more li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.thr__more strong { font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: var(--c-risk-ink); }
.thr__more span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); }
@media (prefers-reduced-motion: reduce) { .js .thr--wef[data-reveal] .waf i.on { transition: none; background: var(--c-accent); background: color-mix(in srgb, #F81B69 calc(var(--k) * 1.37%), #5100FF); } }
@media (forced-colors: active) { .waf i { background: Canvas; border: 1px solid CanvasText; } .waf i.on { background: Highlight; } }
@media (max-width: 480px) { .thr__grid { grid-template-columns: minmax(0, 1fr); } .waf { width: 160px; } }


/* The homepage map: one icon per kind of customer, region by region (no arcs, pins or tag chips) */
.reg8__map svg text { font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-heavy); fill: var(--c-ink); paint-order: stroke; stroke: var(--c-panel); stroke-width: 4px; stroke-linejoin: round; letter-spacing: -0.01em; }
.reg8__b circle { fill: var(--c-ground); stroke: var(--c-line-strong); stroke-width: 1; }
.reg8__ic { fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reg8__b { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-1) var(--ease); cursor: default; }
.reg8__b:hover { transform: scale(1.18); }
.reg8__b:hover circle { stroke: var(--c-accent); }
.js .reg8__map[data-reveal] .reg8__b { opacity: 0; transform: scale(0.4); transition: opacity 0.35s var(--ease), transform 0.45s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--i, 0) * 70ms + 200ms); }
.js .reg8__map[data-reveal].is-in .reg8__b { opacity: 1; transform: none; }
.js .reg8__map[data-reveal].is-in .reg8__b:hover { transform: scale(1.18); transition-delay: 0s; }
.reg8__key ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); }
.reg8__key li { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--c-ink-2); }
.reg8__key svg { width: 18px; height: 18px; color: var(--c-accent); }
.reg8__list { display: none; }
@media (prefers-reduced-motion: reduce) { .js .reg8__map[data-reveal] .reg8__b { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  .reg8__map svg text, .reg8__key { display: none; }
  .reg8__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; border-top: 1.5px solid var(--c-ink); }
  .reg8__list li { display: grid; gap: 2px; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
  .reg8__list strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); }
  .reg8__list span { font-size: var(--fs-small); color: var(--c-ink-2); }
}

/* v7.3 (Eva: "this design tag, I don't want it, it's too AI"): kinds and decisions as plain small labels, no pills */
.cu-dec, .gl-cat { padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }
.cu-dec--credit, .gl-cat { color: var(--c-accent-ink); }
.cu-dec--fraud, .gl-cat--fraud { color: var(--c-risk-ink); }
.cu-dec--identity, .gl-cat--identity { color: var(--c-warn-ink); }
.gl-cat--models { color: var(--c-ink-2); box-shadow: none; background: none; }
.cu-dec.rs-dec--test { background: none; color: var(--c-ink); }
/* v7.3 refinements */
.cu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 470px; }
.cu-stats li { align-content: start; }
.reg8__ic { stroke-width: 2.2; }
@media (max-width: 640px) { .cu-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .cu-stats strong { font-size: 1.75rem; } }

/* ------------------------------------------------------------------
   v7.3 — Placeholders (Eva, 28 Oct: "put placeholders with ideal content in gray for things we are not sure of, don't
   have the content for yet, or didn't discuss"). One look everywhere: grey, dashed, a faint hatch, labeled. */
.ph-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ph-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: 1.5px dashed var(--c-line-strong); border-radius: 20px; background-color: var(--c-panel); background-image: repeating-linear-gradient(135deg, rgba(133, 133, 150, 0.07) 0 1px, transparent 1px 9px); color: var(--c-muted); }
.ph-card p + p { margin-top: 0; }
.ph-card__k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.ph-card__st { color: var(--c-ink-2); }
.ph-card h3 { font-size: var(--fs-h4); font-weight: var(--fw-heavy); line-height: 1.25; color: var(--c-ink-2); }
.ph-card__lab { margin-top: var(--s-1); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.ph-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ph-card li { position: relative; padding-left: var(--s-4); font-size: var(--fs-small); line-height: 1.4; }
.ph-card li::before { content: "–"; position: absolute; left: 0; color: var(--c-line-strong); }
@media (max-width: 1024px) { .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ph-grid { grid-template-columns: minmax(0, 1fr); } }
/* Placeholder links in the menus: greyed out, dashed icon */
.mm-link.is-ph .mm-label, .mm-link.is-ph .mm-line { color: var(--c-muted); }
.mm-link.is-ph .mm-label { font-weight: var(--fw-medium); }
.mm-link.is-ph .mm-ico { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line); color: var(--c-muted); }
.mm-link.is-ph:hover .mm-ico, .mm-link.is-ph:focus-visible .mm-ico { background: var(--c-panel); color: var(--c-ink-2); }

/* Resources hub v7.3: a real customer story as the featured card */
.rs-feat--story { min-height: 420px; align-content: end; background: var(--c-ink-deep); }
.rs-feat__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--ease); }
.rs-feat--story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7, 5, 26, 0.94) 0%, rgba(7, 5, 26, 0.55) 55%, rgba(7, 5, 26, 0.15) 100%); }
.rs-feat--story:hover .rs-feat__img { transform: scale(1.04); }
.rs-feat--story .rs-feat__top { align-self: start; }
.rs-feat__res { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.rs-feat__res b { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD08A; }
.rs-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rs-qgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rs-qgrid { grid-template-columns: minmax(0, 1fr); } }
.rs-hero__title { max-width: 16ch; }

/* ------------------------------------------------------------------
   v7.4 — Why now, simplified (Eva, 28 Oct, on the four scene cards: "this requires too much effort to understand").
   One comparison read in two seconds: real customers turned away on the left, fakes let in on the right, paired row
   by row (the same check, both answers wrong). One panel, hairlines, no cards inside cards, no chips. */
.why9__k { margin-bottom: var(--s-4); font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.why9__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); overflow: hidden; }
.why9__col { grid-row: span 4; display: grid; grid-template-rows: subgrid; min-width: 0; padding: var(--s-5) var(--s-6) var(--s-2); }
.why9__col + .why9__col { border-left: 1px solid var(--c-line); }
.why9__h { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding-bottom: var(--s-4); border-bottom: 1.5px solid var(--c-ink); font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.1; color: var(--c-ink); }
.why9__h small { display: block; margin-bottom: 4px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.why9__mark { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }
.why9__mark svg { width: 18px; height: 18px; }
.why9__col--real .why9__mark { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.why9__col--fake .why9__mark { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.why9__list { grid-row: span 3; display: grid; grid-template-rows: subgrid; list-style: none; margin: 0; padding: 0; }
.why9__row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.why9__row:last-child { border-bottom: 0; }
.why9__row p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--c-ink-2); }
.why9__row strong { font-weight: var(--fw-heavy); color: var(--c-ink); }
.why9__av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
span.why9__av { display: grid; place-items: center; }
.why9__av svg { width: 20px; height: 20px; }
.why9__av--agent { background: var(--c-tint-violet); color: var(--c-accent); }
.why9__av--fake { border: 1.5px dashed var(--c-line-strong); color: var(--c-muted); }
.why9__note { margin-top: var(--s-3); color: var(--c-muted); }
.js .why9[data-reveal] .why9__row { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.js .why9[data-reveal] .why9__col--fake .why9__row { transition-delay: calc(var(--i, 0) * 120ms + 450ms); }
.js .why9[data-reveal].is-in .why9__row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .why9[data-reveal] .why9__row { opacity: 1; transform: none; transition: none; } }
@media (max-width: 760px) {
  .why9__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border-radius: 20px; }
  .why9__col { grid-row: auto; grid-template-rows: none; padding: var(--s-4) var(--s-4) var(--s-1); }
  .why9__col + .why9__col { border-left: 0; border-top: 1px solid var(--c-line); }
  .why9__list { grid-row: auto; grid-template-rows: none; }
  .why9__row { gap: var(--s-3); padding-block: var(--s-3); }
}

/* ------------------------------------------------------------------
   v7.4 — Industry pages (Eva, 28 Oct: "build the industries pages and talk to their challenges as an industry, linking
   to the relevant case studies when we have some"). One template: the story-page photo hero with the industry's
   promise; three challenges, each answered by Monnai, as a two-column table (hairlines, no cards); the industry's
   customer stories, or the closest one (labeled) and a gray placeholder; the test. */
.ind2-hero { min-height: clamp(460px, 64vh, 640px); }
.ind2-hero__title { max-width: 19ch; }
.ind2-hero__lead { max-width: 48ch; }
.ind2-hero .btn-row { margin-top: var(--s-2); }
.ind2-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); max-width: 760px; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid rgba(255, 255, 255, 0.24); color: var(--c-on-ink); text-decoration: none; }
.ind2-proof:hover, .ind2-proof:focus-visible { color: var(--c-on-ink); text-decoration: none; }
.ind2-proof b { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD08A; }
.ind2-proof span { font-size: var(--fs-body); color: rgba(255, 255, 255, 0.9); }
.ind2-proof em { display: inline-flex; align-items: center; gap: var(--s-2); font-style: normal; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-on-ink); }
.ind2-proof em svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.ind2-proof:hover em svg { transform: translateX(4px); }
@media (forced-colors: active) { .ind2-proof b { -webkit-text-fill-color: currentColor; background: none; } }

.ind2-ch__list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--c-ink); }
.ind2-ch__row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-5) clamp(2rem, 1rem + 4vw, 6rem); padding-block: var(--s-6); border-bottom: 1px solid var(--c-line); }
.ind2-ch__pb { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--s-3); align-content: start; }
.ind2-ch__n { grid-row: span 2; padding-top: 0.3em; font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.ind2-ch__pb h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--fw-heavy); color: var(--c-ink); text-wrap: balance; }
.ind2-ch__pb p { margin-top: var(--s-2); max-width: 46ch; font-size: var(--fs-body); color: var(--c-ink-2); }
.ind2-ch__ans { display: grid; gap: var(--s-2); align-content: start; padding-left: var(--s-5); border-left: 2px solid var(--c-accent); }
.ind2-ch__ans p { margin: 0; }
.ind2-ch__lab { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.ind2-ch__a { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.45; font-weight: var(--fw-medium); color: var(--c-ink); }
.ind2-ch__go { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; margin-top: var(--s-1); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.ind2-ch__go svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.ind2-ch__go:hover { text-decoration: none; }
.ind2-ch__go:hover svg { transform: translateX(4px); }
.ind2-notes { margin-top: var(--s-4); }
.js .ind2-ch__row[data-reveal] .ind2-ch__ans { opacity: 0; transform: translateX(-8px); transition: opacity 0.5s var(--ease) 0.2s, transform 0.5s var(--ease) 0.2s; }
.js .ind2-ch__row[data-reveal].is-in .ind2-ch__ans { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ind2-ch__row[data-reveal] .ind2-ch__ans { opacity: 1; transform: none; transition: none; } }
@media (max-width: 860px) {
  .ind2-ch__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-5); }
  .ind2-ch__ans { margin-left: calc(2.75rem + var(--s-3)); padding-left: var(--s-4); }
}
@media (max-width: 480px) {
  .ind2-ch__pb { grid-template-columns: minmax(0, 1fr); }
  .ind2-ch__n { grid-row: auto; padding-top: 0; margin-bottom: var(--s-1); }
  .ind2-ch__ans { margin-left: 0; }
}

.ind2-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); align-items: stretch; }
.ind2-stories .cu-card__media { aspect-ratio: 2.2 / 1; }
.ind2-stories .cu-card__body { padding: var(--s-5) var(--s-5) var(--s-6); }
.ind2-stories .cu-card__name { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.ind2-stories .cu-card__title { font-size: var(--fs-body); }
.ind2-stories .ph-card { align-content: center; min-height: 100%; }
.ind2-stories--solo { grid-template-columns: minmax(0, 1fr); }
.ind2-stories--solo .cu-card__link { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; }
.ind2-stories--solo .cu-card__media { aspect-ratio: auto; min-height: 300px; }
.ind2-stories--solo .cu-card__body { align-content: center; padding: var(--s-6) var(--s-7); }
@media (max-width: 760px) {
  .ind2-stories--solo .cu-card__link { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ind2-stories--solo .cu-card__media { aspect-ratio: 2.2 / 1; min-height: 0; }
  .ind2-stories--solo .cu-card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
}

/* The hub: three groups, a plain index with a small photo */
.ind2-hubhero { padding-block: var(--s-9) var(--s-6); }
.ind2-hubhero .container { display: grid; gap: var(--s-4); justify-items: start; }
.ind2-hubhero p + p { margin-top: 0; }
.ind2-hubhero__title { max-width: 17ch; font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); text-wrap: balance; }
.ind2-hubhero .lead { max-width: 58ch; }
.ind2-hub { padding-top: var(--s-6); }
.ind2-hub__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); align-items: start; }
.ind2-hub__h { padding-bottom: var(--s-3); border-bottom: 1.5px solid var(--c-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.ind2-hub__list { list-style: none; margin: 0; padding: 0; }
.ind2-hub__list li { border-bottom: 1px solid var(--c-line); }
.ind2-ix { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; gap: var(--s-4); align-items: center; padding-block: var(--s-4); color: var(--c-ink); text-decoration: none; }
.ind2-ix:hover, .ind2-ix:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.ind2-ix img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; }
.ind2-ix__t { display: grid; gap: 2px; min-width: 0; }
.ind2-ix__t strong { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: var(--fw-heavy); letter-spacing: -0.015em; line-height: 1.2; }
.ind2-ix__t span { font-size: var(--fs-small); line-height: 1.35; color: var(--c-muted); }
.ind2-ix > svg { width: 18px; height: 18px; color: var(--c-muted); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.ind2-ix:hover > svg { transform: translateX(4px); color: var(--c-accent); }
@media (max-width: 1080px) { .ind2-hub__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ind2-hubhero { padding-block: var(--s-8) var(--s-4); } .ind2-hub__groups { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* Story pages: the industry pages that tell this story */
.st2-facts dd a { font-weight: var(--fw-bold); }

/* ------------------------------------------------------------------
   v7.5 — Use case pages (Eva, 28 Oct: "the use case pages"). Same family as the industry pages: the Government ID
   two-column hero with one illustrative case as Monnai sees it (hairline rows, small marks, no pills), the
   two-column "why it's hard / what changes" table, the industries where it hurts most, stories, the test. */
.uc2-hero__title { max-width: 20ch; font-size: clamp(2.375rem, 1.35rem + 2.6vw, 3.75rem); }
.uc2-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); max-width: 620px; margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.uc2-proof:hover, .uc2-proof:focus-visible { color: var(--c-ink); text-decoration: none; }
.uc2-proof b { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.uc2-proof span { font-size: var(--fs-small); color: var(--c-ink-2); }
.uc2-proof em { display: inline-flex; align-items: center; gap: var(--s-2); font-style: normal; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.uc2-proof em svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.uc2-proof:hover em svg { transform: translateX(4px); }
@media (forced-colors: active) { .uc2-proof b { -webkit-text-fill-color: currentColor; background: none; } }

.uc2-case { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-5) var(--s-6) var(--s-5); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.uc2-case p { margin: 0; }
.uc2-case__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.uc2-case__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-heavy); color: var(--c-ink); }
.uc2-case__brand svg { width: 22px; height: auto; }
.uc2-case__ill { font-size: var(--fs-micro); color: var(--c-muted); }
.uc2-case__req { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.3; color: var(--c-ink); }
.uc2-case__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.uc2-case__sig { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.uc2-sig { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--s-3); align-items: center; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-ink); }
.uc2-sig__i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.uc2-sig__i svg { width: 12px; height: 12px; }
.uc2-sig--ok .uc2-sig__i { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.uc2-sig--warn .uc2-sig__i { background: var(--c-warn-soft); color: var(--c-warn-ink); }
.uc2-sig--risk .uc2-sig__i { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.uc2-case__dec { display: grid; gap: var(--s-2); margin-top: var(--s-1); }
.uc2-case__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.uc2-dec { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.1; }
.uc2-dec--ok { color: var(--c-accent-ink); }
.uc2-dec--review { color: var(--c-warn-ink); }
.uc2-dec--risk { color: var(--c-risk-ink); }
.uc2-case__out span { font-size: var(--fs-small); color: var(--c-ink-2); }
.uc2-case__used { padding-top: var(--s-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
.js .uc2-case[data-reveal] .uc2-sig { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 250ms); }
.js .uc2-case[data-reveal] .uc2-case__dec { opacity: 0; transition: opacity 0.45s var(--ease) 0.8s; }
.js .uc2-case[data-reveal].is-in .uc2-sig, .js .uc2-case[data-reveal].is-in .uc2-case__dec { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .uc2-case[data-reveal] .uc2-sig, .js .uc2-case[data-reveal] .uc2-case__dec { opacity: 1; transform: none; transition: none; } }
@media (max-width: 960px) { .uc2-hero .cap-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }
@media (max-width: 480px) { .uc2-case { padding: var(--s-4); border-radius: 20px; } }

.uc2-where { padding-top: 0; }
.uc2-inds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); border-top: 1.5px solid var(--c-ink); }
.uc2-inds li { border-bottom: 1px solid var(--c-line); }
@media (max-width: 1080px) { .uc2-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .uc2-inds { grid-template-columns: minmax(0, 1fr); } }

/* The use cases hub: the menu's icon in a soft square instead of a photo */
.uc2-ix__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--c-tint-violet); color: var(--c-accent); }
.uc2-ix__ico svg { width: 24px; height: 24px; }
.uc2-ix:hover .uc2-ix__ico { background: var(--c-accent-soft); }
.ind2-hub__list li > .gap { display: inline-block; margin: 0 0 var(--s-3) calc(56px + var(--s-4)); }

/* ------------------------------------------------------------------
   v7.6 — The challenge section in five layouts (Eva, 28 Oct: "we can't have all the pages with 'why it's hard, what
   changes with Monnai', we need some variants"). rows = the v7.4 table (above); versus, columns, dark, sticky below.
   Same content everywhere: three problems, each answered by Monnai with a link. */

/* versus: one panel, Today against With Monnai, paired row by row */
.vs2__panel { border-radius: 26px; overflow: hidden; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.vs2__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs2__h { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-5) var(--s-6); font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.vs2__h--today { background: var(--c-panel); color: var(--c-ink-2); }
.vs2__h--mon { color: var(--c-ink); box-shadow: inset 3px 0 0 var(--c-accent); }
.vs2__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.vs2__mark svg { width: 13px; height: 13px; }
.vs2__h--today .vs2__mark { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.vs2__h--mon .vs2__mark { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.vs2__rows { list-style: none; margin: 0; padding: 0; }
.vs2__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-line); }
.vs2__today, .vs2__mon { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-6) var(--s-6); }
.vs2__today p, .vs2__mon p { margin: 0; }
.vs2__today { background: var(--c-panel); }
.vs2__mon { box-shadow: inset 3px 0 0 var(--c-accent); }
.vs2__today h3 { font-size: var(--fs-h4); line-height: 1.25; font-weight: var(--fw-heavy); color: var(--c-ink); }
.vs2__today p { max-width: 48ch; color: var(--c-ink-2); }
.vs2__a { max-width: 46ch; font-size: var(--fs-lead); line-height: 1.45; font-weight: var(--fw-medium); color: var(--c-ink); }
.vs2__lab { display: none; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; }
.vs2__go, .col3__go, .dk3__go, .stk3__go { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; margin-top: var(--s-1); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.vs2__go svg, .col3__go svg, .dk3__go svg, .stk3__go svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.vs2__go:hover, .col3__go:hover, .dk3__go:hover, .stk3__go:hover { text-decoration: none; }
.vs2__go:hover svg, .col3__go:hover svg, .dk3__go:hover svg, .stk3__go:hover svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .vs2__panel { border-radius: 20px; }
  .vs2__head { display: none; }
  .vs2__row { grid-template-columns: minmax(0, 1fr); }
  .vs2__row:first-child { border-top: 0; }
  .vs2__today, .vs2__mon { padding: var(--s-4) var(--s-4) var(--s-5); }
  .vs2__lab { display: block; }
  .vs2__today .vs2__lab { color: var(--c-risk-ink); }
  .vs2__mon .vs2__lab { color: var(--c-accent-ink); }
}

/* columns: three editorial columns, a large number, the answer under a rule */
.col3__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; border-top: 1.5px solid var(--c-ink); }
/* subgrid: number, title, text and answer line up across the three columns */
.col3__item { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: var(--s-3); align-content: start; min-width: 0; padding: var(--s-6) clamp(1.25rem, 0.5rem + 2vw, 2.5rem) var(--s-5); }
.col3__ans { align-self: start; }
.col3__item:first-child { padding-left: 0; }
.col3__item:last-child { padding-right: 0; }
.col3__item + .col3__item { border-left: 1px solid var(--c-line); }
.col3__item p { margin: 0; }
.col3__n { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height: 1; letter-spacing: -0.05em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.col3__item h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--fw-heavy); text-wrap: balance; }
.col3__p { color: var(--c-ink-2); }
.col3__ans { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--c-accent); }
.col3__lab { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.col3__a { font-weight: var(--fw-medium); color: var(--c-ink); }
.js .col3__list[data-reveal] .col3__item { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.js .col3__list[data-reveal].is-in .col3__item { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .col3__list[data-reveal] .col3__item { opacity: 1; transform: none; transition: none; } }
@media (forced-colors: active) { .col3__n { -webkit-text-fill-color: currentColor; background: none; } }
@media (max-width: 900px) {
  .col3__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .col3__item { grid-row: auto; grid-template-rows: none; }
  .col3__item, .col3__item:first-child, .col3__item:last-child { padding: var(--s-5) 0; }
  .col3__item + .col3__item { border-left: 0; border-top: 1px solid var(--c-line); }
}

/* dark: the deep band, each problem a big statement, the answer under it */
.dk3 { position: relative; overflow: hidden; isolation: isolate; padding-block: var(--s-9); background: var(--c-ink-deep); color: var(--c-on-ink); }
.dk3__glow { position: absolute; z-index: -1; left: -20%; top: -30%; width: 80vw; max-width: 1100px; aspect-ratio: 1; background: radial-gradient(closest-side, rgba(81, 0, 255, 0.34), rgba(255, 0, 170, 0.1) 55%, rgba(255, 0, 170, 0) 100%); pointer-events: none; }
.dk3 .sec-head h2 { color: var(--c-on-ink); }
.dk3__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-ink-line-strong); }
.dk3__item { display: grid; grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(1.5rem, 0.5rem + 3vw, 4rem); row-gap: var(--s-2); padding-block: var(--s-7); border-bottom: 1px solid var(--c-ink-line); }
.dk3__item p { margin: 0; }
.dk3__n { grid-row: span 2; padding-top: 0.55em; font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-violet-on-dark); font-variant-numeric: tabular-nums; }
.dk3__t { grid-column: 2; font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--fw-heavy); color: var(--c-on-ink); text-wrap: balance; }
.dk3__p { grid-column: 2; max-width: 46ch; color: var(--c-on-ink-muted); }
.dk3__ans { grid-column: 3; grid-row: 1 / span 2; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 18px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.dk3__lab { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-violet-on-dark); }
.dk3__a { font-size: var(--fs-lead); line-height: 1.45; font-weight: var(--fw-medium); color: var(--c-on-ink); }
.dk3__go { color: #FFFFFF; }
.dk3 .ind2-notes { color: var(--c-on-ink-muted); }
.js .dk3__item[data-reveal] .dk3__ans { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease) 0.2s, transform 0.5s var(--ease) 0.2s; }
.js .dk3__item[data-reveal].is-in .dk3__ans { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .dk3__item[data-reveal] .dk3__ans { opacity: 1; transform: none; transition: none; } }
@media (max-width: 900px) {
  .dk3 { padding-block: var(--s-8); }
  .dk3__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-block: var(--s-6); }
  .dk3__n, .dk3__t, .dk3__p, .dk3__ans { grid-column: 1; grid-row: auto; }
  .dk3__n { padding-top: 0; }
  .dk3__ans { margin-top: var(--s-3); padding: var(--s-4); }
}

/* sticky: the headline stays on the left, the problems scroll on the right, answers in a soft panel */
.stk3__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8) clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.stk3__head { position: sticky; top: calc(var(--hdr-h) + var(--s-6)); margin-bottom: 0; }
.stk3__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-7); }
.stk3__item { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1.5px solid var(--c-ink); }
.stk3__item p { margin: 0; }
.stk3__n { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-accent); font-variant-numeric: tabular-nums; }
.stk3__item h3 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.03em; font-weight: var(--fw-heavy); text-wrap: balance; }
.stk3__p { max-width: 52ch; font-size: var(--fs-lead); color: var(--c-ink-2); }
.stk3__ans { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding: var(--s-5); border-radius: 18px; background: var(--gradient-soft); }
.stk3__lab { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.stk3__a { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--c-ink); }
@media (max-width: 900px) {
  .stk3__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .stk3__head { position: static; }
  .stk3__list { gap: var(--s-6); }
  .stk3__item h3 { font-size: var(--fs-h3); }
}

/* v7.6 — customers and partners named by Eva for an industry, described (never named); no story page yet, so the card
   does not link, and a result we don't have is a gray placeholder inside the card */
.ind2-cust__in { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--c-ink); }
.ind2-cust__ph { display: grid; gap: 4px; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--c-line-strong); border-radius: 14px; background-color: var(--c-panel); background-image: repeating-linear-gradient(135deg, rgba(133, 133, 150, 0.07) 0 1px, transparent 1px 9px); font-size: var(--fs-small); color: var(--c-muted); }
.ind2-cust__phk { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }
.ind2-cust__note { display: block; margin-top: var(--s-2); }
.ind2-stories--solo .ind2-cust__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: none; }
.ind2-stories--solo .ind2-cust__in .cu-card__media { aspect-ratio: auto; min-height: 300px; }
.ind2-stories--solo .ind2-cust__in .cu-card__body { align-content: center; padding: var(--s-6) var(--s-7); }
@media (max-width: 760px) {
  .ind2-stories--solo .ind2-cust__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ind2-stories--solo .ind2-cust__in .cu-card__media { aspect-ratio: 2.2 / 1; min-height: 0; }
  .ind2-stories--solo .ind2-cust__in .cu-card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
}

/* ================================================================ v7.7 — Verification & KYC product pages, short (vf2)
   Eva (28 Oct): "not so long". Hero with one illustrative check · how it works in three columns · better together · CTA.
   Answers are a small mark and a plain colored word: no pills. */
.vf2-hero .cap-hero__title { max-width: 15ch; }

/* The example check */
.vf2-card { display: grid; gap: var(--s-4); margin: 0; padding: var(--s-5) var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.vf2-card p { margin: 0; }
.vf2-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); }
.vf2-card__ctx { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.vf2-card__ill { font-size: var(--fs-micro); color: var(--c-muted); }
.vf2-card .who__tag { font-size: var(--fs-small); color: var(--c-muted); }
.vf2-card__head, .vf2-rows li { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr) 10.25rem; gap: var(--s-3); align-items: center; }
.vf2-card__head { margin-bottom: calc(var(--s-2) * -1); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.vf2-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.vf2-rows li { padding-block: 11px; border-bottom: 1px solid var(--c-line); }
.vf2-rows__k { font-size: var(--fs-small); color: var(--c-muted); }
.vf2-rows__v { min-width: 0; font-weight: var(--fw-medium); color: var(--c-ink); overflow-wrap: anywhere; }
.vf2-a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; white-space: nowrap; }
.vf2-a__i { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; }
.vf2-a__i svg { width: 10px; height: 10px; }
.vf2-a--match { color: var(--c-accent-ink); }
.vf2-a--match .vf2-a__i { background: var(--c-accent-soft); }
.vf2-a--partial { color: var(--c-warn-ink); }
.vf2-a--partial .vf2-a__i { background: var(--c-warn-soft); }
.vf2-a--nomatch { color: var(--c-risk-ink); }
.vf2-a--nomatch .vf2-a__i { background: var(--c-risk-soft); }
.vf2-a--grey { color: var(--c-muted); font-weight: var(--fw-medium); }
.vf2-a--grey .vf2-a__i { background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line-strong); }
.vf2-card__dec { display: grid; gap: var(--s-2); }
.vf2-card__rule { font-size: var(--fs-small); color: var(--c-ink-2); }
.vf2-card__rule span { display: block; margin-bottom: 2px; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.vf2-card__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.vf2-card__out span { font-size: var(--fs-small); color: var(--c-ink-2); }
.vf2-dec { font-size: var(--fs-h3); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.1; }
.vf2-dec--ok { color: var(--c-accent-ink); }
.vf2-dec--review { color: var(--c-warn-ink); }
.vf2-card__note { padding-top: var(--s-3); border-top: 1px dashed var(--c-line); font-size: var(--fs-small); color: var(--c-muted); text-wrap: pretty; }
.vf2-card__out span, .vf2-card__rule { text-wrap: pretty; }
.js .vf2-card[data-reveal] .vf2-rows li { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(var(--i, 0) * 130ms + 250ms); }
.js .vf2-card[data-reveal] .vf2-card__dec, .js .vf2-card[data-reveal] .vf2-card__note { opacity: 0; transition: opacity 0.45s var(--ease) 0.95s; }
.js .vf2-card[data-reveal].is-in .vf2-rows li, .js .vf2-card[data-reveal].is-in .vf2-card__dec, .js .vf2-card[data-reveal].is-in .vf2-card__note { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .vf2-card[data-reveal] .vf2-rows li, .js .vf2-card[data-reveal] .vf2-card__dec, .js .vf2-card[data-reveal] .vf2-card__note { opacity: 1; transform: none; transition: none; } }

/* How it works: three columns under one rule */
.vf2-how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-7); border-top: 2px solid var(--c-ink); }
.vf2-how__col { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-6) 0 0; min-width: 0; }
.vf2-how__col + .vf2-how__col { padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
.vf2-how__col p { margin: 0; }
.vf2-how__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.vf2-send { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.vf2-send li, .vf2-how__big { font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.015em; line-height: 1.3; color: var(--c-ink); }
.vf2-how__big { max-width: 22ch; text-wrap: balance; }
.vf2-how__s { max-width: 36ch; font-size: var(--fs-small); color: var(--c-ink-2); text-wrap: pretty; }
.vf2-how, .vf2-tog { padding-block: clamp(3.5rem, 2rem + 4.5vw, 6rem); }
.vf2-cta { background: var(--c-panel); padding-block: var(--s-8); }
.vf2-ans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.vf2-ans li { display: grid; gap: 2px; }
.vf2-ans__m { padding-left: 28px; font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); text-wrap: pretty; }
.vf2-how__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-5) var(--s-8); align-items: start; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.vf2-how__foot p { margin: 0; }
.vf2-take { max-width: 44ch; color: var(--c-ink-2); }
.vf2-take strong, .vf2-cover strong { color: var(--c-ink); }
.vf2-cover { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; color: var(--c-ink-2); }
.vf2-cover__i { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; color: var(--c-accent); }
.vf2-cover__i svg { width: 22px; height: 22px; }
.vf2-cover__m { display: block; margin-top: var(--s-2); }
.vf2-ph { display: grid; gap: 4px; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px dashed var(--c-line-strong); border-radius: 14px; background-color: var(--c-ground); background-image: repeating-linear-gradient(135deg, rgba(133, 133, 150, 0.07) 0 1px, transparent 1px 9px); font-size: var(--fs-small); color: var(--c-muted); }
.vf2-ph__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-ink-2); }

/* Better together: the catch on the left, the checks that answer it on the right */
.vf2-tog__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--s-6) var(--s-9); align-items: start; }
.vf2-tog__head .lead { max-width: 44ch; }
.vf2-pairs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.vf2-pairs li { border-bottom: 1px solid var(--c-line); }
.vf2-pair { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: var(--s-4); align-items: center; padding-block: var(--s-4); color: var(--c-ink); text-decoration: none; }
.vf2-pair:hover, .vf2-pair:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.vf2-pair__i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c-tint-violet); color: var(--c-accent); }
.vf2-pair__i svg { width: 22px; height: 22px; }
.vf2-pair__t { display: grid; gap: 2px; min-width: 0; }
.vf2-pair__t strong { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: var(--fw-heavy); letter-spacing: -0.015em; line-height: 1.2; }
.vf2-pair__t span { font-size: var(--fs-small); line-height: 1.4; color: var(--c-muted); text-wrap: pretty; }
.vf2-pair > svg { width: 18px; height: 18px; color: var(--c-muted); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.vf2-pair:hover > svg { transform: translateX(4px); color: var(--c-accent); }
.vf2-used { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0 0; }
.vf2-used__k { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.vf2-used__a { font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 4px; }
.vf2-used__a:hover { text-decoration-color: currentColor; }

@media (max-width: 960px) {
  .vf2-hero .cap-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .vf2-tog__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .vf2-how__grid { grid-template-columns: minmax(0, 1fr); }
  .vf2-how__col { padding: var(--s-5) 0; }
  .vf2-how__col + .vf2-how__col { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .vf2-how__foot { grid-template-columns: minmax(0, 1fr); margin-top: var(--s-3); }
}
@media (max-width: 520px) {
  .vf2-card { padding: var(--s-4); border-radius: 20px; }
  .vf2-card__head { display: none; }
  .vf2-rows li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k a" "v a"; row-gap: 0; }
  .vf2-rows__k { grid-area: k; font-size: var(--fs-micro); }
  .vf2-rows__v { grid-area: v; }
  .vf2-rows__a { grid-area: a; }
}

/* v7.7 — photo hero (Eva, 28 Oct: "for some pages have just title, picture and small paragraphs"): the right column
   holds one photo instead of an illustrative card; two short paragraphs on the left */
.cap-photo { margin: 0; min-width: 0; }
.cap-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px; background: var(--c-panel); }
.cap-hero--photo .cap-hero__copy .lead { max-width: 46ch; }
@media (min-width: 761px) and (max-width: 980px) {
  .cap-hero--photo .cap-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-6); }
}
@media (max-width: 760px) {
  .cap-photo { max-width: 440px; }
  .cap-photo img { border-radius: 20px; }
}

/* ================================================================ v7.8 — certifications as a strip (Eva's reference,
   28 Oct, evening): an icon, a bold name, a small line, thin dividers. White on the dark footer and on the test card. */
.cert3 { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) 0; margin: 0; padding: 0; color: var(--c-on-ink); }
.cert3 li { display: inline-flex; align-items: center; gap: 10px; padding-inline: var(--s-5); border-left: 1px solid rgba(255, 255, 255, 0.24); }
.cert3 li:first-child { padding-left: 0; border-left: 0; }
.cert3__i { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; color: var(--c-on-ink); }
.cert3__i svg { width: 34px; height: 34px; stroke-width: 1.6; }
.cert3__t { display: grid; gap: 1px; line-height: 1.1; }
.cert3__t strong { font-size: 1.1875rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-on-ink); }
.cert3__t > span { font-size: var(--fs-small); color: var(--c-on-ink-muted); }
/* the old pill badges, retired */
.poc7__trust.cert3 li { padding: 0 var(--s-5); border-radius: 0; background: none; box-shadow: none; font-size: inherit; font-weight: inherit; }
.poc7__trust.cert3 li:first-child { padding-left: 0; }
.poc7__trust.cert3 svg { width: 34px; height: 34px; color: var(--c-on-ink); }
.poc7__trust.cert3 .cert3__t > span { color: rgba(255, 255, 255, 0.78); }
.site-footer .cert3 { margin-block: var(--s-1) var(--s-2); }
@media (max-width: 360px) {
  .cert3 li { padding-inline: var(--s-4); }
}

/* ================================================================ v7.8 — industry figures, a stack of cards (Eva's
   reference: "that is cool too"). Public figures, checked at the source; one card in front, blank sheets behind. */
.fs2__head { max-width: 760px; }
.fs2__stage { position: relative; max-width: 880px; margin: var(--s-7) auto 0; }
.fs2__deck { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.fs2__card { display: grid; align-content: start; gap: var(--s-2); min-width: 0; padding: clamp(1.5rem, 0.9rem + 2.6vw, 3.25rem); border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 22px 44px -26px rgba(10, 10, 30, 0.35); }
.fs2__card p { margin: 0; }
.fs2__k { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-accent); }
.fs2__n { margin-top: var(--s-5) !important; font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem); font-weight: var(--fw-heavy); letter-spacing: -0.045em; line-height: 0.95; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.fs2__t { max-width: 24ch; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem); font-weight: var(--fw-heavy); letter-spacing: -0.025em; line-height: 1.12; color: var(--c-ink); text-wrap: balance; }
.fs2__p { margin-top: var(--s-3) !important; max-width: 48ch; font-size: var(--fs-lead); color: var(--c-ink-2); text-wrap: pretty; }
.fs2__src { margin-top: var(--s-4) !important; font-size: var(--fs-small); color: var(--c-muted); }
.fs2__src a { color: var(--c-ink-2); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: 3px; }
.fs2__src a:hover { color: var(--c-accent-ink); text-decoration-color: currentColor; }
.fs2__nav { display: none; }
.fs2__note { margin-top: var(--s-5); text-align: center; }
/* stacked, once site.js is ready */
.js .fs2__stage.is-ready .fs2__deck { grid-template-areas: "c"; gap: 0; padding: 0 0 26px 26px; }
.js .fs2__stage.is-ready .fs2__card { grid-area: c; transform-origin: 50% 100%; transition: transform 0.55s var(--ease), opacity 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.js .fs2__stage.is-ready .fs2__card > * { transition: opacity 0.3s var(--ease); }
.js .fs2__stage.is-ready .fs2__card[data-pos="0"] { z-index: 4; }
.js .fs2__stage.is-ready .fs2__card[data-pos="1"] { z-index: 3; transform: translate(-13px, 12px) rotate(-1.4deg); }
.js .fs2__stage.is-ready .fs2__card[data-pos="2"] { z-index: 2; transform: translate(-24px, 21px) rotate(-2.8deg); }
.js .fs2__stage.is-ready .fs2__card[data-pos="3"] { z-index: 1; transform: translate(-24px, 21px) rotate(-2.8deg); opacity: 0; }
.js .fs2__stage.is-ready .fs2__card:not([data-pos="0"]) { box-shadow: 0 0 0 1px var(--c-line), 0 10px 24px -18px rgba(10, 10, 30, 0.3); }
.js .fs2__stage.is-ready .fs2__card:not([data-pos="0"]) > * { opacity: 0; }
.js .fs2__stage.is-ready .fs2__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-5); }
.fs2__dots { display: flex; gap: 2px; }
.fs2__dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.fs2__dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c-line-strong); transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.fs2__dot:hover::before { background: var(--c-muted); }
.fs2__dot[aria-current="true"]::before { background: var(--c-accent); transform: scale(1.15); }
.fs2__next { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); cursor: pointer; }
.fs2__next svg { width: 18px; height: 18px; }
.fs2__next:hover { color: var(--c-accent-ink); box-shadow: 0 0 0 1px var(--c-accent); }
@media (prefers-reduced-motion: reduce) {
  .js .fs2__stage.is-ready .fs2__card, .js .fs2__stage.is-ready .fs2__card > * { transition: none; }
}
@media (max-width: 600px) {
  .js .fs2__stage.is-ready .fs2__deck { padding: 0 0 18px 14px; }
  .js .fs2__stage.is-ready .fs2__card[data-pos="1"] { transform: translate(-7px, 9px) rotate(-1.2deg); }
  .js .fs2__stage.is-ready .fs2__card[data-pos="2"], .js .fs2__stage.is-ready .fs2__card[data-pos="3"] { transform: translate(-13px, 16px) rotate(-2.2deg); }
}
.poc7__agree { display: flex; align-items: flex-start; gap: var(--s-2); margin: var(--s-3) 0 0; font-size: var(--fs-small); color: rgba(255, 255, 255, 0.82); }
.poc7__agree svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; color: var(--c-on-ink); }

/* v7.8 photo heroes and figure cards (the logo-peaks touches they carried were removed in v8) */
.cap-photo { position: relative; }
.fs2__card { position: relative; }
.vf2-card__ctx { display: inline-flex; align-items: center; gap: 8px; }

/* ================================================================ v7.8 — the ask, lean (Eva: "very catchy… as it is
   it's too packed"): headline, one line, one button and a quiet call-back link, three steps in big type, the two
   certifications. The customers' results sit on their own light band just before. */
.poc8__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--s-7) clamp(2rem, 1rem + 5vw, 6rem); }
.poc8__copy { display: grid; gap: var(--s-5); align-content: start; }
.poc8__copy .eyebrow { color: var(--c-on-ink); }
.poc8__lead { max-width: 30ch; margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.4; color: rgba(255, 255, 255, 0.88); }
.poc8__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-2); }
.poc8__call { color: var(--c-on-ink); font-weight: var(--fw-bold); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.4); text-underline-offset: 5px; }
.poc8__call:hover { text-decoration-color: currentColor; }
.poc8__steps { list-style: none; margin: 0; padding: 0; display: grid; }
.poc8__steps li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-5); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.poc8__steps li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.poc8__n { font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); }
.poc8__steps p { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: rgba(255, 255, 255, 0.78); }
.poc8__steps strong { display: block; margin-bottom: 4px; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.1; color: var(--c-on-ink); }
.poc8__foot { grid-column: 1 / -1; padding-top: var(--s-2); }
.poc8 .poc5__note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 960px) { .poc8__in { grid-template-columns: minmax(0, 1fr); } }

.res8 { padding-block: var(--s-8) var(--s-6); }
.res8__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--s-4) var(--s-6); margin-bottom: var(--s-6); }
.res8__head .sec-head { margin: 0; }
.res8__nums { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
.res8__nums a { display: grid; gap: 6px; align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--c-ink); color: var(--c-ink); text-decoration: none; }
.res8__nums a:hover em { color: var(--c-accent-ink); }
.res8__nums strong { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; }
.res8__nums span { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-ink); }
.res8__nums em { font-style: normal; font-size: var(--fs-micro); color: var(--c-muted); }
.res8__honest { margin-top: var(--s-5); max-width: 72ch; color: var(--c-ink-2); }
@media (forced-colors: active) { .res8__nums strong { -webkit-text-fill-color: currentColor; background: none; } }
@media (max-width: 860px) { .res8__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ v7.8 — Risk Intelligence product pages (ri2), same
   family as the Verification pages: the illustrative card reads insights, never a verdict; the score card; what it reads
   in three or four columns; the same signals read for fraud and for credit. */
.ri2-card__subj { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.ri2-card__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.ri2-card__rows li { display: grid; grid-template-columns: minmax(7rem, 0.75fr) minmax(0, 1.25fr); gap: var(--s-3); align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--c-line); }
.ri2-card__k { font-size: var(--fs-small); color: var(--c-muted); }
.ri2-card__v { min-width: 0; font-weight: var(--fw-medium); color: var(--c-ink); }
.ri2-card__reads { display: grid; gap: 2px; margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-accent-ink); }
.ri2-card__reads span { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.js .ri2-card[data-reveal] .ri2-card__rows li { opacity: 0; transform: translateX(-6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.js .ri2-card[data-reveal] .ri2-card__rows li:nth-child(2) { transition-delay: 0.12s; }
.js .ri2-card[data-reveal] .ri2-card__rows li:nth-child(3) { transition-delay: 0.24s; }
.js .ri2-card[data-reveal] .ri2-card__rows li:nth-child(4) { transition-delay: 0.36s; }
.js .ri2-card[data-reveal] .ri2-card__rows li:nth-child(5) { transition-delay: 0.48s; }
.js .ri2-card[data-reveal].is-in .ri2-card__rows li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ri2-card[data-reveal] .ri2-card__rows li { opacity: 1; transform: none; transition: none; } }
/* the score card */
.ri2-score__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.ri2-score__n { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ri2-score__n strong { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: var(--fw-heavy); letter-spacing: -0.045em; line-height: 1; color: var(--c-risk-ink); font-variant-numeric: tabular-nums; }
.ri2-score__n span { font-size: var(--fs-body); color: var(--c-muted); }
.ri2-score__band { margin: 0; font-weight: var(--fw-bold); color: var(--c-risk-ink); }
.ri2-score__bar { position: relative; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c-accent-soft), var(--c-warn-soft), var(--c-risk-soft)); }
.ri2-score__bar span { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 16px; height: 16px; border-radius: 50%; background: var(--c-ground); box-shadow: 0 0 0 3px var(--c-risk-ink); transform: translate(-50%, -50%); }
.ri2-score__k { margin: var(--s-2) 0 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-muted); }
.ri2-score__why { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--c-line); }
.ri2-score__why li { position: relative; padding: 10px 0 10px var(--s-5); border-bottom: 1px solid var(--c-line); font-weight: var(--fw-medium); color: var(--c-ink); }
.ri2-score__why li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 2px; background: var(--c-risk-ink); }
/* what it reads */
.ri2-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--s-7) 0 0; padding: 0; border-top: 2px solid var(--c-ink); }
.ri2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ri2-grid li { min-width: 0; padding: var(--s-5) var(--s-6) 0 0; }
.ri2-grid li + li { padding-left: var(--s-6); border-left: 1px solid var(--c-line); }
.ri2-grid h3 { margin: 0 0 var(--s-2); font-size: var(--fs-h4); letter-spacing: -0.015em; }
.ri2-grid p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; }
.ri2-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); }
.ri2-two__col { padding: var(--s-5) var(--s-6); border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ri2-two__col p { margin: 0; }
.ri2-two__k { margin-bottom: var(--s-2) !important; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-ink); }
.ri2-two__col p:last-child { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-ink); text-wrap: pretty; }
.ri2-note { margin: var(--s-5) 0 0; max-width: 72ch; font-size: var(--fs-small); color: var(--c-ink-2); }
@media (max-width: 1100px) { .ri2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); } .ri2-grid--4 li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 860px) {
  .ri2-grid, .ri2-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ri2-grid li, .ri2-grid--4 li { padding: var(--s-5) 0; }
  .ri2-grid li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .ri2-two { grid-template-columns: minmax(0, 1fr); }
}

/* v7.9 — industries banner, the menu's segmentation (Eva): three tabs (the menu's groups), each panel lists its
   industries by their menu names, as plain white links with an arrow */
.indb__links { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--s-2) var(--s-6); margin: var(--s-4) 0 var(--s-5); padding: 0; }
.indb__links a { display: inline-flex; align-items: center; gap: 8px; color: var(--c-on-ink); font-weight: var(--fw-bold); text-decoration: none; }
.indb__links a svg { width: 16px; height: 16px; opacity: 0.7; transition: transform var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
.indb__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.indb__links a:hover svg { transform: translateX(3px); opacity: 1; }
@media (max-width: 600px) { .indb__links { grid-template-columns: minmax(0, 1fr); } }
/* three tabs now: they wrap on phones instead of scrolling */
@media (max-width: 860px) {
  .indb__tabs { flex-wrap: wrap; overflow-x: visible; margin-inline: 0; padding: 0; }
}

/* ==========================================================================
   v8 (29 Oct 2026): Eva's review of v30
   ========================================================================== */

/* "I don't like this font, it looks too AI" (the small uppercase, letter-spaced labels: "WITH MONNAI", "WHAT YOU SEND").
   Every micro-label is now sentence case, set like text: semibold, a touch larger, no tracking. */
.stat6__k,
.mob-sub,
.res,
.aic__k,
.ins__fam,
.gapm__rowh,
.gapm__k,
.sol__prod > span:first-child,
.pv__k,
.stk__k,
.mcard__ck,
.gapc__l span,
.gapc__today-l,
.gapc__x,
.gc__k,
.gc__aik,
.dd__k,
.dd__sk,
.dd__h,
.dd__ds,
.hw__n,
.go__k,
.ledger dt,
.thr__k,
.ledger7 dt,
.mm-h,
.mm-g .mm-h,
.mm-featured .mm-h,
.mnav__h,
.ap-kinds__k,
.apr__k,
.apd__sk,
.poc7__pk,
.cu-legend__k,
.cu-card__story h4,
.cu-lad figcaption,
.rs-hit__y,
.rs-pop > p,
.rs-q__y,
.rs-next__y,
.gdoc__toc-k,
.rs-card__y,
.st2-facts dt,
.st2-ex figcaption,
.cu-dec,
.gl-cat,
.ph-card__k,
.why9__h small,
.ind2-ch__lab,
.ind2-hub__h,
.uc2-case__k,
.vs2__lab,
.col3__lab,
.dk3__lab,
.stk3__lab,
.ind2-cust__phk,
.vf2-card__head,
.vf2-card__rule span,
.vf2-how__k,
.vf2-ph__k,
.vf2-used__k,
.fs2__k,
.ri2-card__reads span,
.ri2-score__k,
.ri2-two__k { text-transform: none; letter-spacing: -0.005em; font-size: 0.875rem; font-weight: var(--fw-bold); }

/* "These titles shouldn't be cut like this": gradient words keep their descenders (j, g, y) inside the painted box */
.grad-text { padding-bottom: 0.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cap-hero__title > .grad-text, .st-tag .grad-text, .rs-feat__t .grad-text { margin-bottom: -0.12em; }

/* "We should have margin above Industries, that's too packed": on a use case page, the industries block that follows a
   dark band (Fraud rings) gets its full top spacing back */
.on-dark + .uc2-where, .section--panel + .uc2-where { padding-top: var(--section-y); }

/* ---------------------------------------------------------------- Products menu: three families (Eva's reference) */
.mm-flat__groups--families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); padding-block: var(--s-4); }
.mm-flat__groups--families .mm-g { display: flex; flex-direction: column; gap: 6px; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: 16px; background: #F6F3FE; box-shadow: inset 0 3px 0 var(--c-accent); }
.mm-flat__groups--families .mm-g--bri { box-shadow: inset 0 3px 0 #A60DB3; }
.mm-flat__groups--families .mm-h, .mm-flat__groups--families .mm-h--link { margin: 0; font-size: 1.1875rem; font-weight: var(--fw-heavy); letter-spacing: -0.015em; color: var(--c-ink); text-decoration: none; }
.mm-flat__groups--families .mm-h--link:hover { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.mm-flat__groups--families .mm-desc { display: block; margin: 0 0 var(--s-2); font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.mm-flat__groups--families .mm-g__list { display: grid; gap: 0; margin: 0; }
.mm-flat__groups--families .mm-g__list .mm-link { position: relative; display: block; margin: 0; padding: 4px 0 4px 20px; border-radius: 0; background: none; }
.mm-flat__groups--families .mm-g__list .mm-link::before { content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--c-ink-2); }
.mm-flat__groups--families .mm-g__list .mm-label { font-weight: var(--fw-medium); color: var(--c-ink); }
.mm-flat__groups--families .mm-g__list .mm-link:hover .mm-label { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.mm-meta { font-weight: var(--fw-regular); color: var(--c-muted); }
.mnav__pane[data-mpane="products"] .mnav__desc { display: block; }

/* ---------------------------------------------------------------- Customers: five regions in the mosaic */
.cu-mosaic--regions { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(120px, 10.5vw, 172px); grid-template-areas: "na na latam eu" "na na mea apac"; }
.cu-mosaic__t--na { grid-area: na; } .cu-mosaic__t--latam { grid-area: latam; } .cu-mosaic__t--eu { grid-area: eu; }
.cu-mosaic__t--mea { grid-area: mea; } .cu-mosaic__t--apac { grid-area: apac; }
/* Eva, 29 Oct: "Middle East & Africa" was cut on narrow tiles. Region names wrap instead of running off the tile. */
.cu-mosaic.cu-mosaic--regions .cu-mosaic__l { display: block; white-space: normal; text-wrap: balance; line-height: 1.15; }
@media (max-width: 640px) {
  .cu-mosaic--regions { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 104px; grid-template-areas: "na na" "latam eu" "mea apac"; }
  .cu-mosaic.cu-mosaic--regions .cu-mosaic__t .cu-mosaic__l { display: block; }
}
/* gray placeholders for the stories still to collect */
.cu-ph { display: grid; gap: 4px; margin: 0; padding: var(--s-4) var(--s-5); border: 1.5px dashed var(--c-line-strong); border-radius: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(133, 133, 150, 0.08) 9px 10px), var(--c-ground); color: var(--c-muted); font-size: var(--fs-small); line-height: 1.5; }
.cu-ph__k { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.cu-ph--page { max-width: 62ch; }
.cu-card--ph .cu-card__media img { filter: grayscale(1); opacity: 0.55; }
.cu-ix.is-ph .cu-ix__t strong, .cu-ix.is-ph .cu-ix__n { color: var(--c-muted); }

/* ---------------------------------------------------------------- Homepage map: countries linked (Eva, 29 Oct) */
.net8__map { margin: 0 auto; max-width: 1100px; }
.net8__map svg { display: block; width: 100%; height: auto; overflow: visible; }
.net8__arc { fill: none; stroke: url(#net8-g); stroke-width: 1.2; stroke-opacity: 0.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.net8__pulse { fill: none; stroke: #FF00AA; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 100; stroke-dashoffset: 105; vector-effect: non-scaling-stroke; opacity: 0; }
.net8__dot { fill: #8F66FF; stroke: var(--c-panel); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.net8__b--hub .net8__dot { fill: var(--c-accent); stroke-width: 2.5; }
.net8__halo { fill: var(--c-accent); opacity: 0.12; }
.net8__lab { font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-bold); fill: var(--c-ink-2); paint-order: stroke; stroke: var(--c-panel); stroke-width: 4px; stroke-linejoin: round; }
.js .net8__map[data-reveal] .net8__arcs { opacity: 0; transition: opacity 1.2s var(--ease) 0.5s; }
.js .net8__map[data-reveal].is-in .net8__arcs { opacity: 1; }
.js .net8__map[data-reveal] .net8__b { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
.js .net8__map[data-reveal].is-in .net8__b { opacity: 1; transform: none; }
.net8__map.is-in .net8__pulse { animation: net8-pulse 5.6s linear infinite; animation-delay: calc(var(--i, 0) * 0.8s + 1.6s); }
@keyframes net8-pulse { 0% { stroke-dashoffset: 105; opacity: 0; } 8% { opacity: 1; } 70% { opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.net8__list { list-style: none; margin: var(--s-6) auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.net8__list li { display: grid; gap: 6px; align-content: start; font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.net8__list strong { color: var(--c-ink); }
.net8__ic { display: flex; gap: 6px; color: var(--c-accent); }
.net8__ic svg { width: 20px; height: 20px; }
@media (max-width: 1000px) { .net8__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .net8__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .net8__lab { display: none; } }
@media (max-width: 420px) { .net8__list { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .js .net8__map[data-reveal] .net8__arcs, .js .net8__map[data-reveal] .net8__b { opacity: 1; transform: none; transition: none; }
  .net8__map.is-in .net8__pulse { animation: none; }
}

/* ---------------------------------------------------------------- Verification: how it works, as a flow (Eva, 29 Oct) */
.flow9 { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 0; }
.flow9__step { position: relative; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: var(--s-5) var(--s-6); }
.flow9__step + .flow9__step { padding-left: calc(var(--s-6) + 28px); }
.flow9__k { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.flow9__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 0.8125rem; font-weight: var(--fw-heavy); }
.flow9__fields { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 260px; }
.flow9__fields li { padding: 11px 14px; border-radius: 10px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 6px 16px -10px rgba(20, 10, 60, 0.25); font-weight: var(--fw-medium); color: var(--c-ink); }
.flow9__src { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.flow9__src strong { font-size: 1.125rem; line-height: 1.35; font-weight: var(--fw-bold); color: var(--c-ink); }
.flow9__src-i { display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: var(--c-accent-soft); color: var(--c-accent); }
.flow9__src-i svg { width: 28px; height: 28px; }
.flow9__s { margin: 0; max-width: 36ch; font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); }
.flow9__ans { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.flow9__ans li { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.flow9__m { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.flow9__link { position: absolute; left: -6px; top: calc(var(--s-5) + 40px); bottom: auto; width: 34px; height: 16px; display: flex; align-items: center; color: var(--c-accent); }
.flow9__line { position: relative; flex: 1 1 auto; height: 2px; overflow: hidden; border-radius: 2px; background: linear-gradient(90deg, rgba(81, 0, 255, 0.15), rgba(81, 0, 255, 0.55)); }
.flow9__line i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, #FF00AA, transparent); animation: flow9-run 2.6s var(--ease) infinite; }
.flow9__link svg { flex: 0 0 auto; width: 8px; height: 14px; margin-left: -4px; }
@keyframes flow9-run { to { left: 100%; } }
.flow9__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-4) var(--s-8); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }
.flow9__foot p { margin: 0; }
.flow9__foot strong { color: var(--c-ink); }
.flow9__cover { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.flow9__cover-i { display: grid; place-items: center; width: 24px; height: 24px; color: var(--c-accent); }
.flow9__cover-i svg { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .flow9 { grid-template-columns: minmax(0, 1fr); }
  .flow9__step, .flow9__step + .flow9__step { padding: var(--s-4) 0 var(--s-4) 0; }
  .flow9__step + .flow9__step { padding-top: calc(var(--s-4) + 30px); }
  .flow9__link { left: 10px; top: -2px; width: 16px; height: 30px; flex-direction: column; }
  .flow9__line { width: 2px; height: auto; flex: 1 1 auto; background: linear-gradient(180deg, rgba(81, 0, 255, 0.15), rgba(81, 0, 255, 0.55)); }
  .flow9__line i { left: 0; top: -40%; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, #FF00AA, transparent); animation-name: flow9-down; }
  .flow9__link svg { transform: rotate(90deg); margin: -4px 0 0; }
  .flow9__foot { grid-template-columns: minmax(0, 1fr); }
}
@keyframes flow9-down { to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .flow9__line i { animation: none; display: none; } }

/* ---------------------------------------------------------------- Mission band (Our story) */
.mission9__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.mission9__copy h2 { max-width: 18ch; }
.mission9__copy .lead { max-width: 46ch; }
@media (max-width: 860px) { .mission9__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- Digital Footprint: local by design (Eva, 29 Oct) */
.fp9__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.fp9__big { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-5); }
.fp9__big strong { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); padding-bottom: 0.08em; }
.fp9__big span { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.fp9__phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: end; }
.fp9__phone { margin: 0; display: grid; gap: var(--s-3); justify-items: center; }
.fp9__phone:nth-child(2) { transform: translateY(-18px); }
.fp9__screen { width: 100%; max-width: 168px; aspect-ratio: 9 / 16; padding: 20% 12% 12%; border-radius: 26px; background: var(--c-ground); box-shadow: 0 0 0 6px #E4DEFA, 0 24px 48px -24px rgba(40, 20, 120, 0.35); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 12%; }
.fp9__app { display: block; aspect-ratio: 1; border-radius: 26%; background: #EFEBFC; }
.fp9__app.is-lit { background: linear-gradient(135deg, #FF00AA, #5100FF); box-shadow: 0 6px 14px -6px rgba(81, 0, 255, 0.55); }
.fp9__phone figcaption { font-weight: var(--fw-bold); color: var(--c-ink); }
.fp9__note { grid-column: 1 / -1; margin: var(--s-2) 0 0; text-align: center; font-size: var(--fs-small); color: var(--c-muted); }
.js .fp9__phones[data-reveal] .fp9__app.is-lit { opacity: 0.25; transform: scale(0.7); transition: opacity 0.5s var(--ease), transform 0.5s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(var(--i, 0) * 220ms + var(--k, 0) * 40ms + 300ms); }
.fp9__phone { --i: 0; }
.js .fp9__phones[data-reveal].is-in .fp9__app.is-lit { opacity: 1; transform: none; }
@media (max-width: 900px) { .fp9__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .fp9__phones { gap: var(--s-3); } .fp9__screen { border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .js .fp9__phones[data-reveal] .fp9__app.is-lit { opacity: 1; transform: none; transition: none; } }
/* Our story (v8.1, Eva, 29 Oct: no founder photos, no logo-peaks landscape, "not to look like heroes"): a plain,
   centered, text-only hero */
.story-hero--text { padding-block: var(--s-8) var(--s-7); }
.story-hero--text .story-hero__copy { justify-items: center; text-align: center; }
.story-hero--text .eyebrow { justify-self: center; }
.story-hero--text .story-hero__title { max-width: 16ch; text-wrap: balance; }
.story-hero--text .lead { max-width: 60ch; }
.mission9--text .mission9__copy { display: grid; justify-items: center; gap: var(--s-3); text-align: center; }
.mission9--text .mission9__copy h2 { max-width: 22ch; }

/* ---------------------------------------------------------------- Customers menu v8 (Eva, 29 Oct): stories by kind,
   names only, one featured story */
.mm-stories--v8 { grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2.6fr) minmax(220px, 1fr); align-items: start; }
.mm-sgroups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.mm-sg { display: grid; gap: var(--s-2); align-content: start; }
.mm-sg__h { margin: 0; font-size: 0.875rem; font-weight: var(--fw-bold); color: var(--c-muted); }
.mm-sg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mm-sg__a { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); margin-inline: -10px; padding: 8px 10px; border-radius: 10px; font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-ink); text-decoration: none; }
.mm-sg__a svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--c-accent); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.mm-sg__a:hover, .mm-sg__a:focus-visible { background: var(--c-panel); color: var(--c-accent-ink); text-decoration: none; }
.mm-sg__a:hover svg, .mm-sg__a:focus-visible svg { opacity: 1; transform: none; }
.mm-sfeat { position: relative; isolation: isolate; display: grid; align-content: end; gap: 4px; min-height: 230px; padding: var(--s-5); border-radius: 18px; overflow: hidden; color: var(--c-on-ink); text-decoration: none; background: var(--c-ink-deep); }
.mm-sfeat img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 0.6s var(--ease); }
.mm-sfeat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7, 5, 26, 0.05) 20%, rgba(7, 5, 26, 0.82) 100%); }
.mm-sfeat:hover { color: var(--c-on-ink); text-decoration: none; }
.mm-sfeat:hover img { transform: scale(1.05); }
.mm-sfeat__k { font-size: 0.8125rem; font-weight: var(--fw-bold); color: #D9CCFF; }
.mm-sfeat__t { font-size: 1.125rem; font-weight: var(--fw-heavy); line-height: 1.2; letter-spacing: -0.01em; }
.mm-sfeat__l { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.82); }
.mm-sfeat__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); font-weight: var(--fw-bold); }
.mm-sfeat__go svg { width: 16px; height: 16px; }
.mm-story--feat { grid-template-columns: 72px minmax(0, 1fr); margin-bottom: var(--s-3); }
.mm-story--feat img { width: 72px; height: 72px; }
.mm-story--feat .mm-sfeat__k { color: var(--c-accent-ink); }
@media (max-width: 1200px) { .mm-stories--v8 { grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.6fr); } .mm-stories--v8 .mm-sfeat { display: none; } }

/* ---------------------------------------------------------------- Footer: Follow us (Eva, 29 Oct) */
.ft-follow { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: none; }
.ft-follow svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ft-follow:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer a.ft-follow { display: inline-flex; white-space: nowrap; }   /* v8.7: the LinkedIn icon sat above its name */

/* ---------------------------------------------------------------- Newsletter: a small panel under the menu bar */
.nl { position: fixed; z-index: calc(var(--z-header) - 1);   /* v8.4: under the header, so open menus cover it */
   top: calc(var(--ann-now, 0px) + var(--hdr-h, 88px) + 12px); right: max(16px, var(--gutter, 24px)); width: min(360px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: var(--s-5) var(--s-5) var(--s-4); border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 24px 60px -20px rgba(20, 10, 60, 0.35);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.nl.is-open { opacity: 1; transform: none; }
.nl { grid-template-columns: minmax(0, 1fr); }   /* v8.2: nothing may push the panel wider than itself */
.nl p { margin: 0; }
.nl__x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-muted); cursor: pointer; }
.nl__x:hover { background: var(--c-panel); color: var(--c-ink); }
.nl__x svg { width: 16px; height: 16px; }
.nl__t { padding-right: 32px; font-size: 1.0625rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.nl__l { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.nl__f { display: flex; gap: 8px; margin-top: 4px; }
.nl__f .btn { flex: 0 0 auto; }
.nl__in { flex: 1 1 0; width: 0; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--c-line-strong); border-radius: 10px; font: inherit; font-size: var(--fs-small); color: var(--c-ink); background: var(--c-ground); }
.nl__in:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.nl__in[aria-invalid="true"] { border-color: var(--c-error-ink); }
.nl__ok { font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.nl__s { font-size: 0.8125rem; color: var(--c-muted); }
.nl__s a { color: inherit; }
@media (max-width: 640px) { .nl { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; transform: translateY(8px); } .nl.is-open { transform: none; } }
@media (prefers-reduced-motion: reduce) { .nl { transition: none; transform: none; } }

/* ---------------------------------------------------------------- Our story v8: figures over the map, careers */
.story-figs__nums { list-style: none; margin: var(--s-6) auto var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); max-width: 980px; text-align: center; }
.story-figs__nums li { display: grid; gap: 4px; }
.story-figs__nums strong { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: var(--fw-heavy); letter-spacing: -0.03em; line-height: 1; padding-bottom: 0.08em; background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.story-figs__nums span { font-size: var(--fs-small); color: var(--c-ink-2); }
.story-figs__note { margin-top: var(--s-4); text-align: center; }
.careers__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.careers__list { display: grid; gap: var(--s-6); }
.careers__team h3 { margin: 0 0 var(--s-2); font-size: 1rem; font-weight: var(--fw-bold); color: var(--c-muted); }
.careers__team ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: var(--s-4); align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--c-line); color: var(--c-ink); text-decoration: none; }
.job__t { font-weight: var(--fw-bold); }
.job__l { font-size: var(--fs-small); color: var(--c-muted); text-align: right; }
.job svg { width: 18px; height: 18px; color: var(--c-accent); transition: transform var(--dur-1) var(--ease); }
.job:hover, .job:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.job:hover svg, .job:focus-visible svg { transform: translateX(3px); }
@media (max-width: 860px) { .careers__grid { grid-template-columns: minmax(0, 1fr); } .story-figs__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .job { grid-template-columns: minmax(0, 1fr) 20px; } .job__l { grid-column: 1; grid-row: 2; text-align: left; } .job svg { grid-row: 1 / span 2; grid-column: 2; } }

/* ---------------------------------------------------------------- Which problem is yours? (v8, draft) */
.rt9-sec { padding-block: calc(var(--s-9) + var(--s-4)) var(--s-9); }
.rt9 { display: grid; gap: var(--s-4); justify-items: start; }
.rt9 > p { margin: 0; }
.rt9 .lead { max-width: 52ch; }
.rt9__form { display: grid; gap: var(--s-7); width: 100%; margin-top: var(--s-5); }
.rt9__q { min-width: 0; margin: 0; padding: 0; border: 0; }
.rt9__q legend { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); padding: 0; font-size: 1.25rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.rt9__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.rt9__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 780px; }
.rt9__opts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rt9__opt { position: relative; display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); cursor: pointer; transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.rt9__opt:hover { box-shadow: 0 0 0 1.5px var(--c-accent), 0 18px 40px -24px rgba(40, 20, 120, 0.45); transform: translateY(-2px); }
.rt9__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rt9__opt:has(input:checked) { background: var(--c-accent-soft); box-shadow: 0 0 0 2px var(--c-accent); }
.rt9__opt:has(input:focus-visible) { outline: 3px solid var(--c-accent); outline-offset: 3px; }
.rt9__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--c-accent-soft); color: var(--c-accent); }
.rt9__opt:has(input:checked) .rt9__ico { background: var(--c-ground); }
.rt9__ico svg { width: 24px; height: 24px; }
.rt9__t { display: grid; gap: 4px; }
.rt9__t strong { font-size: 1.125rem; font-weight: var(--fw-heavy); color: var(--c-ink); }
.rt9__t span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.rt9__opt--sm { padding: var(--s-4) var(--s-5); }
.rt9__opt--sm .rt9__t strong { font-size: 1rem; font-weight: var(--fw-bold); }
.rt9__result { width: 100%; display: grid; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-6); border-radius: 20px; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.08); }
.rt9__result > * { margin: 0; }
.rt9__k { font-size: 0.875rem; font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.rt9__h { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.rt9__line { color: var(--c-ink-2); }
.rt9__also { font-size: var(--fs-small); color: var(--c-ink-2); }
.rt9__also > span:first-child { font-weight: var(--fw-bold); color: var(--c-ink); }
.rt9__reset { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rt9__plain { display: grid; gap: var(--s-2); }
@media (max-width: 900px) { .rt9__opts, .rt9__opts--2, .rt9__opts--4 { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .rt9__opt { transition: none; } .rt9__opt:hover { transform: none; } }

/* ---------------------------------------------------------------- Why Monnai in four cards (v8, Eva's reference) */
.why4 { padding-block: var(--s-5) var(--s-6); }
.why4__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.why4__list li { display: grid; align-content: start; gap: 6px; padding: 20px 22px 22px; border-radius: 8px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.why4__list li:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 22px 44px -28px rgba(40, 20, 120, 0.45); transform: translateY(-3px); }
.why4__i { display: block; width: 26px; height: 26px; margin-bottom: 10px; color: var(--c-accent); }
.why4__i svg { width: 26px; height: 26px; stroke-width: 1.7; }
.why4__list h3 { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.why4__list p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.why4__note { margin-top: var(--s-4); text-align: center; }
@media (max-width: 1100px) { .why4__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .why4__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .why4__list li { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) { .why4__list li { transition: none; } .why4__list li:hover { transform: none; } }

/* ---------------------------------------------------------------- 3D illustrations (v8.1, Eva, 29 Oct: "related 3D
   designs, sober, modern and explanatory"; the hover she liked on MiTrust). Transparent renders on a soft panel; with a
   fine pointer the object tilts toward it, lifts a little and a soft light follows. */
.cap-photo--ill { position: relative; margin: 0; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #F6F3FF 0%, #FCF6FC 100%); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.05); }
.cap-photo--ill img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; background: none;
  transform: perspective(1000px) translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform 0.8s var(--ease); }
.cap-photo--ill.is-tilting { --sc: 1.035; }
.cap-photo--ill.is-tilting img { transition: transform 0.18s ease-out; }
.cap-photo--ill::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--ease);
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%); }
.cap-photo--ill.is-tilting::after { opacity: 1; }
@media (max-width: 720px) { .cap-photo--ill { border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .cap-photo--ill img { transform: none; transition: none; } .cap-photo--ill::after { display: none; } }
/* Use cases hub: the three families on one base, beside the title */
.ind2-hubhero--ill .container { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; gap: var(--s-6) clamp(2rem, 1rem + 4vw, 5rem); justify-items: stretch; }
.ind2-hubhero__copy { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.ind2-hubhero__copy p + p { margin-top: 0; }
.hub-ill { width: 100%; }
@media (max-width: 900px) { .ind2-hubhero--ill .container { grid-template-columns: minmax(0, 1fr); } .hub-ill { max-width: 560px; } }

/* ---------------------------------------------------------------- Start your test: the proof-of-concept landing page
   (v8.6, Eva, 29 Oct: "Start your test should open a POC landing page, not the normal form") */
.tst-hero { padding-block: var(--s-8) var(--s-8); background: linear-gradient(180deg, #F6F3FF 0%, var(--c-ground) 100%); }
.tst-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.tst-hero__copy { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-4); }
.tst-hero__copy p + p { margin-top: 0; }
.tst-hero__title { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.04em; font-weight: var(--fw-heavy); max-width: 13ch; text-wrap: balance; }
.tst-hero__copy .lead { max-width: 48ch; }
.tst-facts { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.tst-facts li { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-bold); color: var(--c-ink); }
.tst-facts__i { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-accent); }
.tst-facts__i svg { width: 20px; height: 20px; stroke-width: 1.8; }
.tst-form { position: relative; scroll-margin-top: calc(var(--hdr-h, 88px) + var(--ann-now, 0px) + 16px); }
.tst-form .form { gap: var(--s-4); padding: var(--s-6); border-radius: 22px; box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px -36px rgba(40, 20, 120, 0.35); }
.tst-form__head { display: grid; gap: 4px; margin-bottom: var(--s-1); }
.tst-form__head p { margin: 0; }
.tst-form__t { font-size: 1.375rem; font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--c-ink); }
.tst-form__l { color: var(--c-ink-2); font-size: var(--fs-small); }
.tst-form__go { justify-self: stretch; justify-content: center; }
.tst-form__done { border-radius: 22px; }
.tst-form__done p { margin: 0; }
.tst-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.tst-steps li { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 2px solid var(--c-line-strong); }
.tst-steps__n { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.04em; padding-bottom: 0.06em;
  background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.tst-steps h3 { margin: var(--s-2) 0 0; font-size: 1.125rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.tst-steps p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.tst-io__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.tst-io__list li { display: grid; align-content: start; gap: 6px; padding: 20px 22px 22px; border-radius: 8px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.tst-io__i { display: block; width: 26px; height: 26px; margin-bottom: 10px; color: var(--c-accent); }
.tst-io__i svg { width: 26px; height: 26px; stroke-width: 1.7; }
.tst-io__list h3 { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.tst-io__list p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.tst-io__honest { margin-top: var(--s-4); color: var(--c-ink-2); }
.tst-trust { padding-block: var(--s-6); border-block: 1px solid var(--c-line); }
.tst-trust .cert3 { justify-content: center; color: var(--c-ink); }
.tst-trust .cert3 li { border-left-color: var(--c-line-strong); }
.tst-trust .cert3__i { color: var(--c-accent); }
.tst-trust .cert3__t strong { color: var(--c-ink); font-size: 1.0625rem; }
.tst-trust .cert3__t > span { color: var(--c-muted); }
@media (max-width: 980px) {
  .tst-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tst-form { max-width: 640px; }
  .tst-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tst-hero { padding-block: var(--s-7) var(--s-6); }
  .tst-form .form { padding: var(--s-5); }
  .tst-io__list { grid-template-columns: minmax(0, 1fr); }
  .tst-trust .cert3 { justify-content: flex-start; }
  .tst-trust .cert3 li { padding-inline: 0; border-left: 0; flex: 1 1 100%; }
}
@media (max-width: 480px) { .tst-steps { grid-template-columns: minmax(0, 1fr); } }
/* labels of different lengths side by side: the fields line up at their bottom edge, at their own height */
.tst-form .field-row { align-items: end; }
.tst-form .field { align-content: end; }

/* ---------------------------------------------------------------- Homepage panel: the invitation to the test (v8.7) */
.nl--poc { gap: 8px; }
.nl__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.nl__go { justify-self: start; margin-top: 6px; }

/* ---------------------------------------------------------------- Articles (v8.7, Eva, 29 Oct: "a nice design for
   article"): an editorial page. Cover, title and standfirst, byline; then a reading column (about 68 characters) with
   a table of contents that follows the reading, figures and a pull quote set apart, a table, the ask and the sources. */
.art-progress { position: fixed; z-index: calc(var(--z-header) - 1); top: calc(env(safe-area-inset-top, 0px) + var(--ann-now, 0px) + var(--hdr-h, 88px) - 1px); left: 0; right: 0; height: 3px; pointer-events: none; }
.art-progress span { display: block; height: 100%; background: var(--gradient-brand); transform: scaleX(0); transform-origin: 0 50%; }
.art-head { padding-block: var(--s-7) var(--s-6); }
.art-head .container { display: grid; gap: var(--s-4); }
.art-head .container > * { margin: 0; }
.art-title { max-width: 21ch; font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--fw-heavy); text-wrap: balance; }
.art-standfirst { max-width: 62ch; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); line-height: 1.5; color: var(--c-ink-2); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-small); color: var(--c-muted); }
.art-meta > span:first-child { font-weight: var(--fw-bold); color: var(--c-ink); }
.art-cover { margin: 0 0 var(--s-8); }
.art-layout { display: grid; grid-template-columns: 220px minmax(0, 46rem); justify-content: center; gap: clamp(2rem, 1rem + 4vw, 5rem); padding-bottom: var(--s-8); }
.art-toc { position: sticky; top: calc(var(--ann-now, 0px) + var(--hdr-h, 88px) + 32px); display: grid; gap: var(--s-3); }
.art-toc__h { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.art-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--c-line); }
.art-toc a { display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent; font-size: var(--fs-small); line-height: 1.35; color: var(--c-ink-2); text-decoration: none; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.art-toc a:hover { color: var(--c-ink); }
.art-toc a[aria-current="true"] { border-left-color: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--fw-bold); }
.art-body { min-width: 0; font-size: 1.125rem; line-height: 1.75; color: var(--c-ink); }
.art-body > p { margin: 0 0 1.25em; }
.art-body h2 { margin: 2.1em 0 0.6em; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-heavy); scroll-margin-top: calc(var(--ann-now, 0px) + var(--hdr-h, 88px) + 24px); }
.art-body :is(p, li, figcaption, td, th) a { color: var(--c-accent-ink); text-decoration: underline; text-decoration-color: rgba(81, 0, 255, 0.35); text-underline-offset: 3px; }
.art-body :is(p, li, figcaption, td, th) a:hover { text-decoration-color: currentColor; }
.art-fn { margin-left: 2px; font-size: 0.7em; line-height: 0; }
.art-fn a { text-decoration: none; font-weight: var(--fw-bold); }
.art-stat { display: grid; gap: 6px; margin: 2em 0; padding: 4px 0 4px 22px; border-left: 4px solid; border-image: var(--gradient-brand) 1; }
.art-stat strong { font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; font-weight: var(--fw-heavy); padding-bottom: 0.05em;
  background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.art-stat figcaption { max-width: 40ch; font-size: 1.0625rem; line-height: 1.5; color: var(--c-ink-2); }
.art-scale { display: grid; gap: 10px; margin: 0.4em 0 2.2em; padding: 22px 24px 20px; border-radius: 18px; background: var(--c-panel); }
.art-scale__bar { position: relative; height: 46px; border-radius: 10px; background: repeating-linear-gradient(90deg, #DCD5F5 0 1px, transparent 1px 12px), #ECE8FA; }
.art-scale__half { position: absolute; top: -6px; bottom: -6px; left: calc(50% - var(--w) / 2); width: var(--w); border-radius: 8px; background: var(--gradient-brand); box-shadow: 0 10px 22px -12px rgba(81, 0, 255, 0.6); }
.art-scale__half b { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-ink); }
.art-scale { padding-top: 40px; }
.art-scale__axis { display: flex; justify-content: center; font-size: var(--fs-micro); color: var(--c-muted); border-top: 1px dashed var(--c-line-strong); padding-top: 6px; }
.art-scale figcaption { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.art-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0.4em 0 2em; }
.art-split__c { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.art-split__c p { margin: 0; }
.art-split__k { font-size: var(--fs-small); color: var(--c-muted); }
.art-split__t { font-size: 1.125rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.3; }
.art-split__c:first-child .art-split__t { color: #B4007A; }
.art-split__d { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.art-split__mid { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: var(--fs-micro); color: var(--c-muted); }
.art-quote { margin: 2.2em 0; padding: 0 0 0 26px; border-left: 4px solid; border-image: var(--gradient-brand) 1; }
.art-quote p { margin: 0; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); color: var(--c-ink); text-wrap: balance; }
.art-table { margin: 1.6em 0 2em; }
.art-table__scroll { overflow-x: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--c-line); }
.art-table__scroll:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.art-table table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; }
.art-table th, .art-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.art-table thead th { background: var(--c-panel); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.art-table tbody tr:last-child > * { border-bottom: 0; }
.art-table tbody th { width: 34%; font-weight: var(--fw-heavy); }
.art-table tbody th span { display: block; margin-top: 2px; font-weight: var(--fw-regular); color: var(--c-muted); }
.art-table td { color: var(--c-ink); font-weight: var(--fw-medium); }
.art-table figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--c-muted); }
.art-list { list-style: none; counter-reset: a; margin: 0.6em 0 1.6em; padding: 0; display: grid; gap: 1.1em; }
.art-list li { counter-increment: a; position: relative; padding-left: 52px; }
.art-list li::before { content: counter(a); position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-brand); color: #fff; font-size: 0.9375rem; font-weight: var(--fw-heavy); }
.art-ask { display: grid; gap: var(--s-4); margin: 2.6em 0 2.2em; padding: 28px 30px; border-radius: 22px; background: linear-gradient(135deg, #F3EEFF 0%, #FCF2FA 100%); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.08); }
.art-ask__t { margin: 0; max-width: 32ch; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.015em; font-weight: var(--fw-heavy); }
.art-sources { display: grid; gap: 8px; padding-top: 1.4em; border-top: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.55; color: var(--c-muted); }
.art-sources p { margin: 0; }
.art-sources__h { font-weight: var(--fw-bold); color: var(--c-ink); }
.art-sources ol { margin: 0; padding-left: 1.2em; }
.art-sources li:target { color: var(--c-ink); }
.art-sources a { color: var(--c-ink-2); }
.art-ext { display: inline-block; width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; }
.art-rel__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.art-rel__a { display: grid; gap: 6px; height: 100%; padding: 22px 24px; border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.art-rel__a:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 22px 44px -28px rgba(40, 20, 120, 0.45); transform: translateY(-2px); text-decoration: none; }
.art-rel__n { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; padding-bottom: 0.06em;
  background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.art-rel__l { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.art-rel__w { margin-top: 4px; font-size: var(--fs-small); font-weight: var(--fw-bold); }
@media (max-width: 1100px) {
  .art-layout { grid-template-columns: minmax(0, 46rem); }
  .art-aside { display: none; }
}
@media (max-width: 720px) {
  .art-head { padding-block: var(--s-6) var(--s-5); }
  .art-cover { margin-bottom: var(--s-6); }
  .art-body { font-size: 1.0625rem; line-height: 1.7; }
  .art-split { grid-template-columns: minmax(0, 1fr); }
  .art-rel__list { grid-template-columns: minmax(0, 1fr); }
  .art-ask { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .art-rel__a { transition: none; } .art-rel__a:hover { transform: none; } }

/* Resources hub: the newest article, featured beside the title */
.rs-art { display: grid; gap: 10px; align-content: start; min-width: 0; color: var(--c-ink); text-decoration: none; }
.rs-art:hover { text-decoration: none; color: var(--c-ink); }
.rs-art__img { display: block; margin-bottom: 6px; }
.rs-art__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.rs-art__t { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; letter-spacing: -0.025em; font-weight: var(--fw-heavy); text-wrap: balance; }
.rs-art__l { font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink-2); }
.rs-art__go { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.rs-art__go svg { width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease); }
.rs-art:hover .rs-art__go svg { transform: translateX(3px); }

/* ================================================================ v8.8 — a tighter rhythm (Eva, 29 Oct: "all pages are a
   bit text heavy… reduce margins within sections so we don't need to scroll too much"). NN/g (2018): 57% of viewing
   time is spent above the fold and 74% in the first two screenfuls; people read about 20% of a page's words. So less
   air between and inside sections, and heroes that hand over sooner. Section padding comes from the tokens
   (--section-y, --sec5-y); the rules below tighten what does not use them. */
.sec-head { gap: var(--s-3); margin-bottom: var(--s-6); }
[data-page="home"] .sec-head { margin-bottom: var(--s-6); }
.hx5 { padding-block: clamp(3rem, 1rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.cap-hero, .cu-hero, .rs-hero { padding-block: var(--s-6) var(--s-7); }
.pl-hero, .st-hero, .story-hero, .story-hero--text, .tst-hero { padding-block: var(--s-7) var(--s-6); }
.ind2-hubhero { padding-block: var(--s-7) var(--s-5); }
.ind2-hero { min-height: clamp(400px, 56vh, 560px); }
.st2-hero__in { padding-block: var(--s-7) var(--s-6); }
.dk3 { padding-block: var(--s-7); }
.res8 { padding-block: var(--s-7) var(--s-5); }
.vf2-cta, .rs-related { padding-block: var(--s-7); }
.stat6, .fam, .steps3, .stories__cta { margin-top: var(--s-6); }
.ind2-ch__row { padding-block: var(--s-5); }
.site-footer { padding-block: var(--s-7) var(--s-7); }
.ft-bottom { margin-top: var(--s-6); }
.art-head { padding-block: var(--s-6) var(--s-5); }
.art-cover { margin-bottom: var(--s-7); }
.art-layout { padding-bottom: var(--s-7); }
@media (max-width: 720px) {
  .cap-hero, .cu-hero, .rs-hero, .pl-hero, .st-hero, .story-hero, .story-hero--text, .tst-hero { padding-block: var(--s-6) var(--s-5); }
  .ind2-hubhero { padding-block: var(--s-6) var(--s-4); }
  .sec-head { margin-bottom: var(--s-5); }
}
/* v8.8, second pass: the visuals that set a section's height */
.hw6__head { margin-bottom: var(--s-6); }
.hw6 .hw__art { max-width: 430px; }
.lg6 .crowd { max-width: 500px; justify-self: center; width: 100%; }
.net8__map, .reg5__map { max-width: 920px; }
.net8__list { margin-top: var(--s-5); max-width: 980px; }
.glob5__story { margin-top: var(--s-5); padding-top: var(--s-4); }
.sol__panel { padding: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem); }
.vf2-how, .vf2-tog { padding-block: var(--section-y); }
/* Customers: three stories a row, lower photos */
.cu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.cu-card__media { aspect-ratio: 2.4 / 1; }
@media (max-width: 1100px) { .cu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cu-grid { grid-template-columns: minmax(0, 1fr); } }
/* Our story: the six figures and the reasons, tighter */
.why3 li { padding: var(--s-5); }
.stat6 { gap: var(--s-3); }

/* ==========================================================================
   v8.9 (Eva, 29 Oct: "all pages are a bit text heavy… reduce margins within section so we don't need to scroll too
   much… adjust everywhere"). Third pass, after the spacing tokens (v8.8): things side by side instead of stacked,
   section titles one step smaller, a shorter footer, a lighter closing call to action. Targets at 1440 × 900
   (STATE.md): homepage ≤ 8 screens, hubs ≤ 4.5, use case and industry pages ≤ 3.5, product and story pages ≤ 3.
   ========================================================================== */

/* Section titles: the token is one step smaller (52 px at 1440, was 60); the homepage blocks that had their own size follow it */
.why5 .sec-head h2, .lg6 .sec-head h2, .gap6 .sec-head h2, .ai7 .sec-head h2 { font-size: var(--fs-display-2); }

/* Footer: Follow us under the brand (it no longer adds a row under the columns); tighter link rows; Industries a little wider */
.ft-top { gap: var(--s-7); }
.ft-col ul { gap: 2px; }
.ft-follow-box { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.ft-follow-box .ft-title { margin: 0; }
.ft-follow-box ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; font-size: var(--fs-small); }
@media (min-width: 1101px) { .ft-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 0.9fr) minmax(0, 0.75fr); } }

/* Closing call to action (use case, industry, customer and test pages): one band, the ask on the left, the buttons on the right */
.cu-cta { padding-block: var(--s-5) var(--s-7); }
.cu-cta .poc5__in { padding: clamp(1.75rem, 0.75rem + 3vw, 3.5rem); gap: var(--s-5); }
@media (min-width: 1024px) {
  .cu-cta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--s-7); }
  .cu-cta__in .btn-row { flex-direction: column; align-items: stretch; }
}

/* The three challenges (use case and industry pages), every variant a little tighter */
.stk3__list { gap: var(--s-5); }
.stk3__item { gap: var(--s-2); padding-top: var(--s-4); }
.stk3__item h3 { font-size: var(--fs-h3); line-height: 1.15; }
.stk3__p { font-size: var(--fs-body); }
.stk3__ans { margin-top: var(--s-1); padding: var(--s-4) var(--s-5); }
.dk3__item { padding-block: var(--s-5); }
.dk3__t { font-size: var(--fs-h3); line-height: 1.15; }
.dk3__ans { padding: var(--s-4) var(--s-5); }
.dk3__a { font-size: 1.125rem; }
.ind2-ch__row { padding-block: var(--s-4); }
.ind2-ch__a { font-size: 1.125rem; }
.vs2__h { padding: var(--s-4) var(--s-5); }
.vs2__today, .vs2__mon { padding: var(--s-4) var(--s-5) var(--s-5); }
.col3__n { font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem); }
.col3__item { padding-block: var(--s-5) var(--s-4); }

/* Industry pages: the public figures next to their title, the card a little smaller */
.fs2__card { padding: clamp(1.25rem, 0.7rem + 2vw, 2.5rem); }
.fs2__n { margin-top: var(--s-3) !important; font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.25rem); }
.fs2__t { font-size: clamp(1.375rem, 1rem + 1vw, 1.875rem); }
.fs2__p { margin-top: var(--s-2) !important; font-size: var(--fs-body); }
.fs2__src { margin-top: var(--s-3) !important; }
.js .fs2__stage.is-ready .fs2__nav { margin-top: var(--s-4); }
@media (min-width: 1024px) {
  .fs2 > .container { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
  .fs2 .fs2__head { justify-items: start; margin: 0; max-width: none; text-align: left; }
  .fs2 .fs2__head .eyebrow { justify-self: start; }
  .fs2 .fs2__head .lead { margin-inline: 0; }
  .fs2 .fs2__stage { margin: 0; max-width: none; }
  .fs2 .fs2__note { grid-column: 1 / -1; text-align: left; }
}

/* Customer stories on use case and industry pages: shorter photos */
.ind2-stories .cu-card__media { aspect-ratio: 2.7 / 1; }
.ind2-stories .cu-card__body { padding: var(--s-4) var(--s-5) var(--s-5); }

/* Customers: the map and its index side by side; four stories a row on large screens */
@media (min-width: 1100px) {
  .cu-glance__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 1rem + 3vw, 4rem); }
  .cu-glance .cu-map { max-width: none; }
  .cu-glance .cu-index { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; max-width: none; }
  .cu-glance .cu-ix { padding-block: var(--s-2); }
  .cu-glance .cu-ix__t strong { font-size: var(--fs-body); line-height: 1.3; }
  .cu-glance .cu-ix__t span { font-size: var(--fs-micro); }
}
.cu-stories .cu-card__media { aspect-ratio: 2.6 / 1; }
.cu-stories .cu-card__body { padding: var(--s-4) var(--s-5) var(--s-5); }
@media (min-width: 1101px) { .cu-stories .cu-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* v71k late (Eva: “this one doesn’t need to be bigger”): ten equal cards, four a row from 1101 px (was 1240) */

/* Homepage */
.hx5 { padding-block: clamp(2.5rem, 0.5rem + 5vw, 5.5rem) clamp(2rem, 1rem + 2vw, 3rem); }
.hx5__ctas { margin-top: var(--s-6); }
.hx5__proof { margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem); }
.ai7__top:last-child { margin-bottom: 0; }                 /* the homepage version has nothing under it */
.lg6 .crowd { max-width: 440px; }
.sol5 .sec-head { max-width: 1000px; }
@media (min-width: 1200px) {                               /* the pause button sits at the end of the tab row */
  .sol { position: relative; }
  .sol__foot { position: absolute; top: 6px; right: 0; }
}
.hw6 .hw__art { max-width: 400px; }
.hw__step { padding: var(--s-4) var(--s-5) var(--s-4) var(--s-6); }
.indb .sec-head { max-width: 900px; }
.poc8 .poc8__in { padding: clamp(1.75rem, 0.75rem + 3.2vw, 4rem); }
.poc8 .poc7__title { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 4.25rem); }
.poc8__steps li { padding-block: var(--s-4); }
.poc8__steps strong { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.5rem); }
.qa5 summary { min-height: 56px; padding: var(--s-3) var(--s-5); }
.faq5__list { gap: var(--s-2); }
@media (min-width: 1100px) {                               /* Global and local: the map and the region list side by side */
  .net8 > .container { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
  .net8 > .container > .sec-head, .net8 > .container > .reg5__notes, .net8 > .container > .glob5__story { grid-column: 1 / -1; }
  .net8 .net8__map { grid-column: 1; max-width: none; margin: 0; }
  .net8 .net8__list { grid-column: 2; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); margin: 0; max-width: none; }
  .net8 .net8__list li { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-3); row-gap: 2px; }
  .net8 .net8__list li > span:last-child { grid-column: 1 / -1; }
}

/* How Monnai works: three families, three columns; their names as plain labels, not pills */
@media (min-width: 1181px) { .pl-fam__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pl-fam__list .fam-tag { padding: 0; border-radius: 0; background: none; font-size: var(--fs-small); }

/* Our story */
.mission9--text .eyebrow { justify-self: center; }
.stat6 li { padding: var(--s-4) var(--s-5); }
.story-figs .net8__map { max-width: 780px; }
.story-figs__nums { margin-block: var(--s-5) var(--s-4); }

/* second round, same day: still a little long */
.hx5__title { margin-top: var(--s-5); }
.indb__in { gap: var(--s-5); }
.poc8__lead { max-width: 36ch; }
.lg6 .crowd { max-width: 410px; }
@media (min-width: 1024px) {                               /* Agent Pass: questions next to their title, as on the homepage */
  .ap-faq > .container { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
  .ap-faq .sec-head { margin-bottom: 0; }
}
.indb__links { margin-block: var(--s-3) var(--s-4); }
.poc8 .poc8__lead { max-width: 40ch; font-size: var(--fs-lead); }
@media (min-width: 961px) {                                /* the certifications sit under the three steps, not on a row of their own */
  .poc8 .poc8__copy { grid-row: span 2; }
  .poc8 .poc8__steps { align-self: end; }
  .poc8 .poc8__foot { grid-column: 2; align-self: start; padding-top: 0; }
}
@media (min-width: 1100px) {                               /* Global and local: a wider list, one line of words per region */
  .net8 > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); }
  .net8 .net8__list { gap: var(--s-3); }
}
@media (min-width: 1024px) { .cap-hero .cap-photo--ill { width: 100%; max-width: 540px; justify-self: end; } }   /* illustrated heroes a little shorter */
.hx5__mission { margin-top: var(--s-5); }
.hx5__proof { margin-top: clamp(2rem, 1rem + 2vw, 3rem); }
.why4 { padding-block: var(--s-4) var(--s-5); }
.hw6__head { margin-bottom: var(--s-5); }
.hw6 .hw__art { max-width: 380px; }
.qa5 summary { min-height: 52px; }
.sol { gap: var(--s-4); }
.hw__steps { gap: var(--s-3); }
.res8__head { margin-bottom: var(--s-5); }
.faq5__list { gap: 6px; }
.indb__in { gap: var(--s-4); }

/* Phones (v8.9): customer stories in a row you swipe, the next card peeking, instead of a long stack; the four
   reasons two by two; a smaller engine drawing */
@media (max-width: 720px) {
  .cu-stories .cu-grid, .ind2-stories:not(.ind2-stories--solo) {
    grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; align-items: stretch;
    gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter);
  }
  .cu-stories .cu-grid > *, .ind2-stories:not(.ind2-stories--solo) > * { scroll-snap-align: start; }
  .js .cu-stories .cu-grid > [data-reveal], .js .ind2-stories > [data-reveal] { opacity: 1; transform: none; }
  .why4__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .why4__list li { padding: 14px 14px 16px; }
  .hw6 .hw__art { max-width: 300px; }
}
/* the footer's certification strip stays on one line in the narrower brand column */
.site-footer .cert3 li { gap: 8px; padding-inline: var(--s-4); }
.site-footer .cert3 li:first-child { padding-left: 0; }
.site-footer .cert3__i { width: 30px; height: 30px; }
.site-footer .cert3__i svg { width: 28px; height: 28px; }
.site-footer .cert3__t strong { font-size: 1.0625rem; }

/* ==========================================================================
   Articles, v8.9 (29 Oct): the second article ("One data layer, five lending decisions", Eva's text) brings an
   opening line, numbered sections, the five decisions drawn on one layer, bullets, gray placeholders for the figures
   and the customer story still to come, an ask with its own title, and a "Read next" card to the other articles.
   ========================================================================== */
.art-lede { margin: 0 0 0.9em; font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.32; letter-spacing: -0.015em; font-weight: var(--fw-bold); color: var(--c-ink); text-wrap: balance; }
.art-body h2 .art-h2__n { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 0.45em; vertical-align: 0.14em; border-radius: 50%;
  background: var(--gradient-brand); color: #FFFFFF; font-size: 0.6em; line-height: 1; letter-spacing: 0; font-weight: var(--fw-heavy); }
.art-bullets { list-style: none; margin: 0.2em 0 1.5em; padding: 0; display: grid; gap: 0.7em; }
.art-bullets li { position: relative; padding-left: 26px; }
.art-bullets li::before { content: ""; position: absolute; left: 4px; top: 0.66em; width: 9px; height: 9px; border-radius: 50%; background: var(--gradient-brand); }
.art-layer { display: grid; gap: 10px; margin: 1.6em 0 1.8em; padding: 18px; border-radius: 20px; background: var(--c-panel); }
.art-layer__dec { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.art-layer__dec li { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px 12px 14px; border-radius: 14px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.art-layer__dec li::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 2px; height: 10px; background: var(--c-line-strong); }
.art-layer__n { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.art-layer__dec strong { font-size: 0.9375rem; line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.art-layer__q { font-size: var(--fs-micro); line-height: 1.4; color: var(--c-ink-2); }
.art-layer__base { display: grid; gap: 2px; padding: 14px 16px 12px; border-radius: 12px; color: var(--c-ink);
  background: linear-gradient(90deg, #FB9D00, #FF00AA 50%, #5100FF) top / 100% 4px no-repeat, var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.art-layer__base strong { font-size: 1rem; line-height: 1.3; font-weight: var(--fw-heavy); }
.art-layer__base span { font-size: var(--fs-micro); line-height: 1.45; color: var(--c-ink-2); }
.art-layer figcaption { font-size: var(--fs-small); line-height: 1.5; color: var(--c-muted); }
.art-ph { display: grid; gap: 4px; margin: 1.2em 0 1.6em; padding: 14px 18px; border: 1.5px dashed var(--c-line-strong); border-radius: 14px;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(133, 133, 150, 0.08) 9px 10px), var(--c-ground); color: var(--c-muted); font-size: var(--fs-small); line-height: 1.55; }
.art-ph p { margin: 0; }
.art-ph__k { font-weight: var(--fw-bold); color: var(--c-ink-2); }
.art-ph--story { gap: 8px; padding: 20px 22px; }
.art-ph__t { font-size: 1rem; color: var(--c-ink-2); }
.art-ph__steps { margin: 0; padding-left: 1.25em; display: grid; gap: 4px; }
.art-ph__steps b { color: var(--c-ink-2); }
.art-ask--section { gap: var(--s-3); scroll-margin-top: calc(var(--ann-now, 0px) + var(--hdr-h, 88px) + 24px); }
.art-body .art-ask__h { margin: 0; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); line-height: 1.15; letter-spacing: -0.025em; font-weight: var(--fw-heavy); }
.art-ask__p { margin: 0; max-width: 56ch; color: var(--c-ink-2); }
.art-nexts { display: grid; gap: var(--s-3); margin-top: 2em; }
.art-next { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; border-radius: 18px; background: var(--c-ground);
  box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.art-next:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 22px 44px -28px rgba(40, 20, 120, 0.45); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.art-next__img { display: block; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #F6F3FF 0%, #FCF6FC 100%); }
.art-next__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-next__txt { display: grid; gap: 4px; min-width: 0; line-height: 1.3; }
.art-next__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.art-next__t { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: var(--fw-heavy); text-wrap: balance; }
.art-next__m { font-size: var(--fs-small); color: var(--c-muted); }
@media (max-width: 620px) {
  .art-layer { padding: 14px; }
  .art-layer__dec { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .art-layer__dec li { grid-template-columns: 1.25rem 7.25rem minmax(0, 1fr); align-items: baseline; gap: 8px; padding: 10px 12px; }
  .art-layer__dec li::after { display: none; }
  .art-next { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .art-next { transition: none; } .art-next:hover { transform: none; } }
/* Resources hub: every article, just below the hero (#articles; the Resources menu's Articles link lands here) */
.rs-arts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.rs-ai { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; height: 100%; padding: 14px; border-radius: 20px; background: var(--c-ground);
  box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.rs-ai:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 22px 44px -28px rgba(40, 20, 120, 0.45); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.rs-ai__img { display: block; aspect-ratio: 2 / 1; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #F6F3FF 0%, #FCF6FC 100%); }
.rs-ai__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-ai__txt { display: grid; gap: 6px; min-width: 0; }
.rs-ai__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.rs-ai__t { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: var(--fw-heavy); text-wrap: balance; }
.rs-ai__l { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.rs-ai__m { font-size: var(--fs-micro); color: var(--c-muted); }
@media (max-width: 1100px) { .rs-arts__list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .rs-ai { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .rs-ai { transition: none; } .rs-ai:hover { transform: none; } }
.art-title--break .grad-text { display: block; }
/* Resources hub, v8.9: the hero holds the words only (no featured card); the articles are listed right below it */
.rs-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
.rs-hero__grid--solo .rs-hero__title { max-width: 20ch; }

/* ================================================================ v42 (29 Oct 2026) — the last planned pages: Privacy
   policy and Terms of use (the current monnai.com text), Contact, Press, Where we work. */

/* Legal: the article layout, set for long legal text — numbered clauses with the number in the margin, a contents
   list that scrolls on its own, and a folding one on tablets and phones. */
.lg-title { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--fw-heavy); }
.lg-meta a { color: var(--c-accent-ink); font-weight: var(--fw-medium); }
.lg-toc { max-height: calc(100vh - var(--ann-now, 0px) - var(--hdr-h, 88px) - 64px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }
.lg-body { font-size: 1rem; line-height: 1.7; color: var(--c-ink-2); }
.lg-sec + .lg-sec { margin-top: var(--s-7); }
.lg-body h2 { margin: 0 0 var(--s-4); font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--c-ink); }
.lg-sec__n { color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lg-h3 { margin: var(--s-5) 0 var(--s-3); font-size: 1.0625rem; line-height: 1.3; font-weight: var(--fw-bold); color: var(--c-ink); }
.lg-p { margin: 0 0 var(--s-3); }
.lg-p:not(.lg-p--plain) { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 var(--s-2); }
.lg-p__n { color: var(--c-muted); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.lg-items { list-style: none; margin: 0 0 var(--s-3); padding: 0 0 0 calc(3.5rem + var(--s-2)); display: grid; gap: var(--s-2); }
.lg-items li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 var(--s-1); }
.lg-items__n { color: var(--c-muted); }
.lg-list { margin: 0 0 var(--s-3); padding-left: calc(3.5rem + var(--s-2) + 1.1em); }
.lg-lines { margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--c-panel); color: var(--c-ink); }
.lg-gap { margin: 0 0 var(--s-3); }
.lg-body a { overflow-wrap: anywhere; }
.lg-toc-m { display: none; }
@media (max-width: 1100px) {
  .lg-toc-m { display: block; margin-bottom: var(--s-6); border: 1px solid var(--c-line); border-radius: var(--r-3); background: var(--c-ground); }
  .lg-toc-m summary { cursor: pointer; padding: var(--s-3) var(--s-4); font-weight: var(--fw-bold); color: var(--c-ink); }
  .lg-toc-m ol { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-4); display: grid; gap: 2px; font-size: var(--fs-small); }
  .lg-toc-m a { display: block; padding: 6px 0; color: var(--c-ink-2); text-decoration: none; }
}
@media (max-width: 720px) {
  .lg-p:not(.lg-p--plain) { grid-template-columns: minmax(0, 1fr); }
  .lg-items { padding-left: 0; }
  .lg-list { padding-left: 1.2em; }
}

/* Contact: the routes and the registered office beside one form (the current monnai.com fields, plus a topic). */
.ct2 { padding-block: var(--s-7); }
.ct2__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ct2__copy { display: grid; gap: var(--s-4); min-width: 0; }
.ct2__copy > * { margin: 0; }
.ct2__title { font-size: var(--fs-display-2); line-height: 1.04; letter-spacing: -0.035em; font-weight: var(--fw-heavy); }
.ct2-r { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.ct2-r li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.ct2-r__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-accent-soft); color: var(--c-accent-ink); }
.ct2-r__i svg { width: 22px; height: 22px; }
.ct2-r__h { margin: 0 0 2px; font-size: 1rem; line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: 0; }
.ct2-r p { margin: 0 0 4px; font-size: var(--fs-small); color: var(--c-ink-2); }
.ct2-r a { font-size: var(--fs-small); overflow-wrap: anywhere; }
.ct2__office { padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.ct2__office address { font-style: normal; font-size: var(--fs-small); line-height: 1.6; color: var(--c-ink-2); }
.ct2__formt { margin: 0; font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.ct2__form .form { box-shadow: 0 30px 60px -44px rgba(40, 20, 120, 0.4); }
@media (max-width: 960px) { .ct2__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .ct2-r { grid-template-columns: minmax(0, 1fr); } }

/* Press: announcements and coverage, with the press kit beside them. */
.pr { padding-top: 0; }
.pr__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.pr__main { display: grid; gap: var(--s-4); min-width: 0; }
.pr__main > * { margin: 0; }
.pr__h { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.pr-list { list-style: none; padding: 0; display: grid; margin-bottom: var(--s-5) !important; }
.pr-item { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-top: 1px solid var(--c-line); }
.pr-item:last-child { border-bottom: 1px solid var(--c-line); }
.pr-item > * { margin: 0; }
.pr-item__meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-muted); }
.pr-item__t { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); text-wrap: balance; max-width: 34ch; }
.pr-item__d { max-width: 62ch; color: var(--c-ink-2); }
.pr-item__a { justify-self: start; }
.pr-cov { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pr-cov__a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "o i" "d i"; align-items: center; gap: 2px var(--s-3); height: 100%; padding: var(--s-4) var(--s-5); border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.pr-cov__a:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 18px 36px -26px rgba(40, 20, 120, 0.45); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.pr-cov__o { grid-area: o; font-weight: var(--fw-bold); }
.pr-cov__d { grid-area: d; font-size: var(--fs-small); color: var(--c-ink-2); }
.pr-cov__a > svg { grid-area: i; width: 18px; height: 18px; color: var(--c-accent-ink); }
.pr__side { display: grid; gap: var(--s-4); min-width: 0; }
.pr-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-panel); }
.pr-card > * { margin: 0; }
.pr-card__h { font-size: 1rem; line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: 0; }
.pr-card p { font-size: var(--fs-small); line-height: 1.6; color: var(--c-ink-2); }
.pr-card .art-ph { margin: 0; }
.pr-logos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.pr-logo { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; padding: 14px; border-radius: 12px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.pr-logo svg { width: 100%; height: auto; }
.pr-logo--dark { background: #0b0b12; box-shadow: none; }
@media (max-width: 960px) {
  .pr__grid { grid-template-columns: minmax(0, 1fr); }
  .pr__side { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
}
@media (max-width: 560px) { .pr-cov { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .pr-cov__a { transition: none; } .pr-cov__a:hover { transform: none; } }

/* Where we work: the figures, the homepage's map of live markets, then how deep each family goes. */
.cov-figs { margin-block: var(--s-6) var(--s-3); }
.cov-figs__note { margin: 0; text-align: center; }
.cov-d { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.cov-d li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.cov-d li > * { margin: 0; }
.cov-d__h { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.cov-d__t { color: var(--c-ink-2); }
.cov-d__l { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--fs-small); }
@media (max-width: 960px) { .cov-d { grid-template-columns: minmax(0, 1fr); } }

/* v42 (Eva: "and my pop ups !!!!!!"): in the footer's prototype bar, beside the review switch — shows the page's
   pop-up again (they open by themselves once per browser). */
.review-inline--pop { margin-left: auto; }
.review-inline--pop + .review-inline { margin-left: 0; }
.review-inline--pop:hover, .review-inline:hover { border-color: var(--c-ground); }
@media (max-width: 720px) { .review-inline--pop { margin-left: 0; } }

/* v43 (29 Oct 2026): French and Spanish versions — the language switcher: in the header (wide screens), at the foot
   of the phone menu, and in the footer's bottom bar as "English · Français · Español". */
.lang-sw { list-style: none; display: flex; align-items: center; gap: 0; margin: 0 var(--s-1) 0 0; padding: 0; font-size: var(--fs-small); }
.lang-sw a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 5px; border-radius: 8px;   /* v108l: 5 px (was 7): a fourth language (PT) and the menus still on one line at 1280 px */ color: var(--c-ink-2); font-weight: var(--fw-medium); text-decoration: none; }
.lang-sw a:hover { color: var(--c-ink); background: var(--c-panel); text-decoration: none; }
.lang-sw a[aria-current="true"] { color: var(--c-ink); font-weight: var(--fw-bold); }
@media (max-width: 1240px) { .site-header__actions .lang-sw { display: none; } }
@media (min-width: 1241px) and (max-width: 1299px) { .nav-trigger { padding: 0 var(--s-2); } }   /* v108l: just above the switcher's cut, the longer menus (ES, PT “Casos de uso”) stay on one line */
.mnav__lang { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-6) 0 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--c-line); font-size: var(--fs-small); }
.mnav__lang a { color: var(--c-ink-2); font-weight: var(--fw-medium); }
.mnav__lang a[aria-current="true"] { color: var(--c-ink); font-weight: var(--fw-bold); }
.ft-lang { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; font-size: var(--fs-small); }
.ft-lang li + li::before { content: "·"; margin-right: var(--s-2); color: var(--c-on-ink-muted); }
.ft-lang a { color: var(--c-on-ink-muted); }
.ft-lang a:hover, .ft-lang a[aria-current="true"] { color: var(--c-ground); }
.ft-lang a[aria-current="true"] { font-weight: var(--fw-bold); }
.ft-en { color: var(--c-on-ink-muted); font-size: var(--fs-micro); }
/* v43: longer French and Spanish labels must not widen the page on phones */
@media (max-width: 860px) { .sol .day__track.sol__tabs { min-width: 0; max-width: 100%; } }
.crowd__head, .crowd__state { min-width: 0; }
@media (max-width: 400px) { .crowd__s { padding: 8px 12px; } }
/* v43: a long French or Spanish button label wraps on a phone instead of widening the page */
.sol { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; padding-block: 10px; } }

/* v44 (Eva, 30 Oct: "there is too much text"): the lean flow on the Verification pages — labels only under "You get",
   one short coverage line under the three steps */
.flow9-sec--lean .flow9__ans li { align-items: center; }
.flow9__cover--lean { display: flex; align-items: flex-start; gap: var(--s-3); margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--c-line); color: var(--c-ink-2); }
.flow9__cover--lean .flow9__cover-i svg { width: 22px; height: 22px; color: var(--c-accent); }

/* =====================================================================================================================
   v44 (30 Oct) — menus
   Eva: "make Credit, Fraud and Identity stand out better". Every menu's group titles: violet, heavier and larger than
   the links, a hairline under them (never small uppercase letters). */
.mm-panel .mm-g > .mm-h,
.mm-panel .mm-sg__h,
.mm-panel .mm-arts > .mm-h {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; margin: 0 0 var(--s-2); padding: 0 0 12px;
  border-bottom: 1px solid var(--c-line); font-size: 1.0625rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em;
  line-height: 1.25; text-transform: none; color: var(--c-accent-ink);
}
.mm-panel a.mm-h:hover { color: var(--c-accent); }
.mnav .mnav__h, .mnav__arts > .mm-h { font-size: 1rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; text-transform: none; color: var(--c-accent-ink); }

/* Products (Eva: "this menu is not beautiful"): no tinted cards, no bullets. A family per column, its question under
   its name, its products as icon rows; Risk Intelligence over two columns. */
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3), .mm-panel--tiles :is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--s-6); }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-g > .mm-h { margin-bottom: 2px; padding-bottom: 0; border-bottom: 0; }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-desc { display: block; margin: 0 0 var(--s-2); padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.4; color: var(--c-muted); }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-g--ri .mm-g__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-link--tile { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-ico { width: 36px; height: 36px; border-radius: 10px; }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-ico svg { width: 18px; height: 18px; }
.mm-panel--tiles :is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-g__list .mm-link { padding: 8px 10px; margin-inline: -10px; }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-g > .gap { margin-top: var(--s-1); }

/* Customers: the market in bold, the kind of company under it; a plain link to every story (no button wider than
   its column) */
.mm-all { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.mm-all svg { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.mm-all:hover { color: var(--c-accent); text-decoration: none; }
.mm-all:hover svg { transform: translateX(3px); }
.mm-sg ul { gap: 4px; }
.mm-sg__a { align-items: center; }
.mm-sg__t { display: grid; gap: 1px; min-width: 0; }
.mm-sg__t strong { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-ink); }
.mm-sg__t span { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-muted); }
.mm-sg__a:hover .mm-sg__t strong, .mm-sg__a:focus-visible .mm-sg__t strong { color: var(--c-accent-ink); }
.mm-link--story { display: block; }

/* Resources (Eva: "not appealing… I want a better way to represent it"): the links on the left, the latest articles
   as cards with their covers */
.mm-flat--res { grid-template-columns: minmax(250px, 0.8fr) minmax(0, 2.2fr); column-gap: var(--s-7); }
.mm-flat--res .mm-flat__groups { padding-right: 0; }
.mm-flat--res .mm-flat__groups--1 .mm-g__list { grid-template-columns: minmax(0, 1fr); }
.mm-arts { min-width: 0; padding: var(--s-6) 0; }
.mm-arts__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-3) 0 0; padding: 0; }
.mm-art { display: grid; gap: 6px; align-content: start; border-radius: 18px; color: var(--c-ink); text-decoration: none; }
.mm-art__img { display: block; aspect-ratio: 2 / 1; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.06); }
.mm-art__img img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s var(--ease); }
.mm-art__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 0.8125rem; font-weight: var(--fw-medium); color: var(--c-muted); }
.mm-art__t { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; text-wrap: balance; }
.mm-art:hover, .mm-art:focus-visible { color: var(--c-ink); text-decoration: none; }
.mm-art:hover .mm-art__t, .mm-art:focus-visible .mm-art__t, .mm-art[aria-current="page"] .mm-art__t { color: var(--c-accent-ink); }
.mm-art:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .mm-art:hover .mm-art__img img { transform: scale(1.04); } }
@media (max-width: 1200px) { .mm-flat--res { grid-template-columns: minmax(220px, 0.8fr) minmax(0, 2fr); column-gap: var(--s-5); } }
.mnav__arts { display: grid; gap: var(--s-2); }
.mnav__arts .mm-arts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-1); }
@media (max-width: 520px) { .mnav__arts .mm-arts__list { grid-template-columns: minmax(0, 1fr); } }

/* v44 — Business Risk Intelligence: its two products, the question each answers, what each reads */
.bri2-prods { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: var(--s-7) 0 0; padding: 0; }
.bri2-prod { display: grid; align-content: start; gap: var(--s-2); min-width: 0; padding: var(--s-6); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); scroll-margin-top: calc(var(--hdr-h, 88px) + var(--s-5)); transition: box-shadow var(--dur-2) var(--ease); }
.bri2-prod h3 { margin: 0; font-size: var(--fs-h3); letter-spacing: -0.02em; }
.bri2-prod__q { margin: 0; font-size: var(--fs-body); color: var(--c-ink-2); }
.bri2-prod__pts { list-style: none; display: grid; margin: var(--s-3) 0 0; padding: 0; border-top: 1px solid var(--c-line); }
.bri2-prod__pts li { display: grid; gap: 4px; padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line); }
.bri2-prod__pts li:last-child { padding-bottom: 0; border-bottom: 0; }
.bri2-prod__pts strong { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-ink); }
.bri2-prod__pts span { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; }
.bri2-prod:target { box-shadow: 0 0 0 2px var(--c-accent); }
@media (max-width: 860px) { .bri2-prods { grid-template-columns: minmax(0, 1fr); } .bri2-prod { padding: var(--s-5); } }
/* the three family questions end on one line, so the hairlines under them line up */
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-desc { min-height: calc(2.8em + 12px); }
.mm-meta { white-space: nowrap; }
.mm-all { display: inline; line-height: 1.4; }
.mm-all svg { display: inline-block; margin-left: 6px; vertical-align: -3px; }
/* no line under the group titles: color, weight and size do the work (Eva, 28 Oct: "not a big fan of the underlining
   in the menu") */
.mm-panel .mm-g > .mm-h, .mm-panel .mm-sg__h, .mm-panel .mm-arts > .mm-h { padding-bottom: 0; border-bottom: 0; margin-bottom: var(--s-2); }
:is(.mm-flat__groups--fam2, .mm-flat__groups--fam3) .mm-desc { padding-bottom: 0; border-bottom: 0; min-height: 2.8em; }

/* =====================================================================================================================
   v45 (30 Oct) */
/* Eva: "it shouldn't be blue on blue when trying to click, that's not visible": on dark surfaces a link stays light
   under the mouse (the global a:hover turns links dark violet) */
.on-dark a:not(.btn):hover, .on-dark a:not(.btn):focus-visible,
.site-footer a:not(.btn):hover, .site-footer a:not(.btn):focus-visible { color: #fff; }
.poc8__call:hover, .poc8__call:focus-visible { color: #fff; text-decoration-color: currentColor; text-decoration-thickness: 2px; }
/* Eva, 30 Oct: "add for the POC that we commit to return in 10 days!!!": the commitment, in big warm figures, under the
   lead of every "Test us" band */
.poc-days { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: 2px; margin: var(--s-4) 0 0; max-width: 34rem; color: var(--c-on-ink); }
.poc-days strong { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; background-image: var(--gradient-text-warm, linear-gradient(90deg, #FFC46B, #FF8FD0)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFC46B; padding-bottom: 0.08em; }
.poc-days span { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.4; color: var(--c-on-ink); }
.poc8 .poc-days { margin: var(--s-5) 0 var(--s-2); }
@media (forced-colors: active) { .poc-days strong { -webkit-text-fill-color: currentColor; background: none; } }

/* Verification, how it works (Eva, 30 Oct: "still not a big fan… we can do it better"): one connected picture. The
   details you send, wired into the record we check, one answer on the row of each detail; the wires light up in order */
.vflow { position: relative; margin: var(--s-7) 0 0; padding: var(--s-7) var(--s-7) var(--s-6); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px -42px rgba(20, 16, 60, 0.35); }
.vflow__ill { position: absolute; top: var(--s-4); right: var(--s-5); margin: 0; font-size: 0.75rem; color: var(--c-muted); }
.vflow__heads, .vflow__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr); }
.vflow__heads { margin-bottom: var(--s-3); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.vflow__heads span:nth-child(2) { text-align: center; }
.vflow__grid { align-items: start; }
.vflow__ins, .vflow__outs { list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; min-width: 0; }
.vflow__in, .vflow__out { display: grid; align-content: center; gap: 2px; height: 76px; min-width: 0; padding: 0 var(--s-5); border-radius: 16px; }
.vflow__in { background: #F7F6FB; box-shadow: inset 0 0 0 1px var(--c-line); }
.vflow__k { font-size: 0.8125rem; line-height: 1.3; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vflow__v { font-size: var(--fs-body); line-height: 1.3; font-weight: var(--fw-bold); color: var(--c-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vflow__out { background: #F4F4F7; }
.vflow__out--match { background: #F3EFFF; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.16); }
.vflow__out--partial { background: #FFF6E6; box-shadow: inset 0 0 0 1px rgba(251, 157, 0, 0.3); }
.vflow__out--nomatch { background: #FFEEF8; box-shadow: inset 0 0 0 1px rgba(255, 0, 170, 0.22); }
.vflow__out .vf2-a { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.vflow__mid { position: relative; height: 260px; }
.vflow__wires { position: absolute; left: 0; top: 0; width: 420px; height: 260px; overflow: visible; }
.vflow__w { fill: none; stroke: #DDD5F7; stroke-width: 2; }
.vflow__p { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; opacity: 0; }
.vflow__node { position: absolute; left: 95px; top: 84px; width: 230px; height: 92px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 14px 30px -18px rgba(81, 0, 255, 0.45); }
.vflow__node-i { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--c-tint-violet); color: var(--c-accent); }
.vflow__node-i svg { width: 26px; height: 26px; }
.vflow__node strong { min-width: 0; font-size: 0.9375rem; line-height: 1.25; color: var(--c-ink); }
.vflow__node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(81, 0, 255, 0.35); opacity: 0; pointer-events: none; }
.vflow__never { position: absolute; left: 0; right: 0; top: 190px; margin: 0; text-align: center; font-size: 0.875rem; color: var(--c-muted); }
.vflow__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
.vflow__legend .vf2-a { font-size: var(--fs-small); }
@media (prefers-reduced-motion: no-preference) {
  .js .vflow__out { opacity: 0; }
  .js .vflow.is-in .vflow__out { animation: vflowAns 0.45s var(--ease) both; animation-delay: calc(1.35s + var(--i) * 0.14s); }
  .js .vflow.is-in .vflow__p--in { animation: vflowPulse 4.2s linear infinite; animation-delay: calc(var(--i) * 0.12s); }
  .js .vflow.is-in .vflow__p--out { animation: vflowPulse 4.2s linear infinite; animation-delay: calc(0.85s + var(--i) * 0.12s); }
  .js .vflow.is-in .vflow__node::after { animation: vflowPing 4.2s ease-out infinite; animation-delay: 0.62s; }
}
@keyframes vflowPulse { 0% { stroke-dashoffset: 16; opacity: 1; } 16% { stroke-dashoffset: -100; opacity: 1; } 17%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes vflowPing { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(81, 0, 255, 0.35); } 14% { opacity: 0; box-shadow: 0 0 0 16px rgba(81, 0, 255, 0); } 100% { opacity: 0; } }
@keyframes vflowAns { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .vflow { padding-inline: var(--s-6); } }
@media (max-width: 999px) {
  .vflow { padding: var(--s-6) var(--s-5) var(--s-5); }
  .vflow__ill { position: static; margin-bottom: var(--s-3); }
  .vflow__heads, .vflow__wires { display: none; }
  .vflow__grid { grid-template-columns: minmax(0, 1fr); }
  .vflow__mid { height: auto; display: grid; justify-items: center; gap: 10px; padding: 0; }
  .vflow__mid::before, .vflow__mid::after { content: ""; width: 2px; height: 24px; background: #DDD5F7; }
  .vflow__node { position: relative; left: auto; top: auto; width: auto; max-width: 100%; height: auto; padding: 14px 18px; }
  .vflow__never { position: static; }
  .vflow__ins, .vflow__outs { gap: 10px; }
  .vflow__in, .vflow__out { height: auto; min-height: 64px; padding-block: 12px; }
}
.vflow__node { left: 85px; width: 250px; }
@media (max-width: 999px) { .vflow__node { left: auto; width: auto; } }
/* Eva, 30 Oct: "I don't like these black lines, it looks like a bug": every thick black rule over a list or a figure
   becomes a light hairline (the round step numbers keep their outline) */
.ledger th, .why9__h, .ind2-hub__h { border-bottom: 1px solid var(--c-line); }
.index-list, .faq, .qa, .steps3 li, .ledger, .ledger7__col, .cu-stats li, .cu-card__res, .gl-letter, .cu-index, .st2-res__list li,
.st2-facts, .reg8__list, .ind2-ch__list, .uc2-inds, .col3__list, .stk3__item, .vf2-how__grid, .res8__nums a, .ri2-grid { border-top: 1px solid var(--c-line); }
.on-dark .ledger th, .on-dark .why9__h, .on-dark .ind2-hub__h { border-bottom-color: rgba(255, 255, 255, 0.16); }
.on-dark :is(.index-list, .faq, .qa, .steps3 li, .ledger, .ledger7__col, .cu-stats li, .cu-card__res, .gl-letter, .cu-index, .st2-res__list li,
.st2-facts, .reg8__list, .ind2-ch__list, .uc2-inds, .col3__list, .stk3__item, .vf2-how__grid, .res8__nums a, .ri2-grid) { border-top-color: rgba(255, 255, 255, 0.16); }

/* v45: on a phone the review-notes switch sat on the pop-up's button; while a pop-up is open it steps aside */
@media (max-width: 640px) { html:has(.nl.is-open) .review-toggle { visibility: hidden; } }

/* ---------------------------------------------------------------- v46: the homepage test pop-up, dark and shiny
   (Eva, 30 Oct: "make it more shiny, exclusive, to catch eyes"): the deep violet of the test section, a thin brand-gradient
   edge that turns slowly with a bright point running round it, a gloss, one sweep of light as it opens, the 10 days as
   the figure to remember, a white button that glints now and then. Nothing moves with reduced motion. */
@property --pocn-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nl.nl--poc { width: min(384px, calc(100vw - 32px)); gap: 0; padding: 26px 26px 24px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #160741; color: #fff;
  box-shadow: 0 30px 70px -20px rgba(58, 0, 190, 0.6), 0 12px 32px -14px rgba(255, 0, 170, 0.35);
  transform: translateY(-10px) scale(0.97); transform-origin: 100% 0;
  transition: opacity 0.35s var(--ease), transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.12); }
.nl.nl--poc.is-open { transform: none; }
.pocn__glow { position: absolute; inset: -40%; z-index: -3; pointer-events: none;
  background: radial-gradient(38% 34% at 22% 26%, rgba(81, 0, 255, 0.95), rgba(81, 0, 255, 0) 70%),
    radial-gradient(30% 30% at 80% 28%, rgba(255, 0, 170, 0.55), rgba(255, 0, 170, 0) 70%),
    radial-gradient(34% 32% at 74% 78%, rgba(251, 157, 0, 0.4), rgba(251, 157, 0, 0) 70%),
    linear-gradient(150deg, #2A0B7A 0%, #14063A 70%);
  animation: pocDrift 12s ease-in-out infinite alternate; }
.nl.nl--poc::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--pocn-a), #F99E1C, #F81B69 14%, #A60DB3 28%, #5100FF 42%, #FFFFFF 50%, #5100FF 58%, #A60DB3 72%, #F81B69 86%, #F99E1C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pocnSpin 6s linear infinite; }
@keyframes pocnSpin { to { --pocn-a: 360deg; } }
.nl.nl--poc::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0) 40%); }
.pocn__sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-140%) skewX(-12deg); }
.nl--poc.is-open .pocn__sheen { animation: pocnSheen 1.5s 0.45s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
@keyframes pocnSheen { from { transform: translateX(-140%) skewX(-12deg); } to { transform: translateX(280%) skewX(-12deg); } }
.nl--poc .nl__k { font-size: var(--fs-small); font-weight: var(--fw-bold); color: #D9CCFF; }
.nl--poc .nl__t { margin-top: 6px; padding-right: 30px; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.nl--poc .nl__l { margin-top: 8px; font-size: 0.9375rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.nl--poc .pocn__days { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 12px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pocn__days strong { flex: 0 0 auto; font-size: 2.25rem; line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; padding-bottom: 0.06em;
  background-image: var(--gradient-text-warm); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFD08A; }
.pocn__days span { font-size: 0.875rem; line-height: 1.35; font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.9); }
.nl--poc .pocn__go { justify-self: start; margin-top: 18px; position: relative; overflow: hidden; isolation: isolate; background: #fff; color: #14063A;
  box-shadow: 0 10px 26px -10px rgba(255, 255, 255, 0.45); }
.nl--poc .pocn__go:hover { background: #F3EEFF; color: #14063A; text-decoration: none; }
.nl--poc .pocn__go:focus-visible, .nl--poc .nl__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nl--poc .pocn__go::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(249, 158, 28, 0.32) 35%, rgba(248, 27, 105, 0.26) 55%, rgba(81, 0, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-16deg); }
.nl--poc.is-open .pocn__go::after { animation: pocnGlint 5s 2s ease-in-out infinite; }
@keyframes pocnGlint { 0% { transform: translateX(-120%) skewX(-16deg); } 24%, 100% { transform: translateX(330%) skewX(-16deg); } }
.nl--poc .nl__x { top: 12px; right: 12px; color: rgba(255, 255, 255, 0.72); }
.nl--poc .nl__x:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
/* v68b (Eva, 4 Nov, on the panel: "text is broken"): "5 business days" is longer than "10 days" was, so the sentence
   goes under the figure instead of beside it */
.nl--poc .pocn__days { display: grid; justify-items: start; gap: 6px; padding: 14px 18px 16px; }
.pocn__days strong { font-size: 2rem; white-space: nowrap; }
.pocn__days span { font-size: 0.9375rem; }
@media (max-width: 640px) { .nl.nl--poc { width: auto; transform: translateY(14px); transform-origin: 50% 100%; } .nl.nl--poc.is-open { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pocn__glow, .nl.nl--poc::before, .nl--poc.is-open .pocn__go::after { animation: none; }
  .pocn__sheen { display: none; }
  .nl.nl--poc { transition: opacity 0.2s; transform: none; }
}
@media (forced-colors: active) {
  .pocn__glow, .pocn__sheen, .nl.nl--poc::before, .nl.nl--poc::after, .nl--poc .pocn__go::after { display: none; }
  .pocn__days strong { -webkit-text-fill-color: currentColor; background: none; }
  .nl.nl--poc { border: 1px solid CanvasText; }
}

/* ---------------------------------------------------------------- v46: product flows (Risk Intelligence, Business)
   Eva, 30 Oct: "a drawing not too heavy, then a representation of how it works and that's it… for all products". The
   Verification flow's frame, wires and light; here one input is read from a few angles (or a few inputs go into one
   check) and comes back as one reading, insights never raw data. */
.rflow__ins { position: relative; height: 260px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.vflow__in.rflow__in { position: absolute; left: 0; right: 0; top: var(--y); transform: translateY(-50%); height: auto; min-height: 76px; padding-block: 12px; }
.rflow__sub { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.3; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rflow__nodes { list-style: none; margin: 0; padding: 0; }
.rflow__node { position: absolute; left: 85px; width: 250px; top: var(--y); transform: translateY(-50%); min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 14px 30px -18px rgba(81, 0, 255, 0.45); scroll-margin-top: calc(var(--hdr-h, 88px) + 120px); }
.rflow__node .vflow__node-i { width: 44px; height: 44px; border-radius: 12px; }
.rflow__node .vflow__node-i svg { width: 22px; height: 22px; }
.rflow__node--solo { min-height: 92px; padding-inline: 16px; }
.rflow__node--solo .vflow__node-i { width: 52px; height: 52px; border-radius: 14px; }
.rflow__node--solo .vflow__node-i svg { width: 26px; height: 26px; }
.rflow__nt { display: grid; gap: 2px; min-width: 0; }
.rflow__nt strong { font-size: 0.9375rem; line-height: 1.25; color: var(--c-ink); }
.rflow__nt span { font-size: 0.8125rem; line-height: 1.3; color: var(--c-muted); }
.rflow__node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(81, 0, 255, 0.35); opacity: 0; pointer-events: none; }
.rflow__out { display: grid; align-items: center; min-height: 260px; min-width: 0; }
.rflow__get { display: grid; gap: 8px; padding: 20px 22px; border-radius: 20px; background: #F3EFFF; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.16); }
.rflow__get--risk { background: #FFEEF8; box-shadow: inset 0 0 0 1px rgba(255, 0, 170, 0.22); }
.rflow__get p { margin: 0; }
.rflow__rk { font-size: 0.8125rem; line-height: 1.3; color: var(--c-muted); }
.rflow__verdict { display: flex; align-items: flex-start; gap: 10px; font-size: 1.125rem; line-height: 1.3; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-accent-ink); }
.rflow__get--risk .rflow__verdict { color: var(--c-risk-ink); }
.rflow__m { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--c-accent); color: #fff; }
.rflow__m--risk { background: #E0007F; }
.rflow__m svg { width: 14px; height: 14px; }
.rflow__pts { list-style: none; display: grid; gap: 6px; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(81, 0, 255, 0.14); }
.rflow__get--risk .rflow__pts { border-top-color: rgba(255, 0, 170, 0.2); }
.rflow__pts li { position: relative; padding-left: 16px; font-size: 0.9375rem; line-height: 1.35; color: var(--c-ink); text-wrap: pretty; }   /* v71j: no lone last word on a phone */
.rflow__pts li::before { content: ""; position: absolute; left: 2px; top: 0.56em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); opacity: 0.45; }
.rflow__get--risk .rflow__pts li::before { background: #E0007F; }
.rflow__score { display: flex; align-items: baseline; gap: 8px; }
.rflow__score strong { font-size: 2.5rem; line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; color: var(--c-ink); }
.rflow__score span { font-size: 0.9375rem; color: var(--c-muted); }
.rflow__score em { margin-left: auto; font-style: normal; font-size: 0.9375rem; font-weight: var(--fw-bold); color: var(--c-risk-ink); }
.rflow__bar { position: relative; height: 8px; margin: 2px 0 4px; border-radius: 4px; background: rgba(23, 18, 43, 0.08); overflow: hidden; }
.rflow__bar span { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--at) * 100%); border-radius: inherit; background: linear-gradient(90deg, #5100FF, #FF00AA 60%, #FB9D00); }
@media (prefers-reduced-motion: no-preference) {
  .js .rflow .rflow__get { opacity: 0; }
  .js .rflow.is-in .rflow__get { animation: vflowAns 0.5s var(--ease) both; animation-delay: 1.35s; }
  .js .rflow.is-in .rflow__node::after { animation: vflowPing 4.2s ease-out infinite; animation-delay: calc(0.62s + var(--i) * 0.1s); }
}
@media (max-width: 999px) {
  .rflow__ins { height: auto; display: grid; gap: 10px; }
  .vflow__in.rflow__in { position: static; transform: none; }
  .rflow__nodes { display: grid; gap: 10px; justify-self: stretch; }
  .rflow__node { position: relative; left: auto; top: auto; width: auto; transform: none; }
  .rflow__out { min-height: 0; }
}
.vflow__in.rflow__in { left: auto; width: min(100%, 330px); }
.rflow__get--score .rflow__pts { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 999px) { .vflow__in.rflow__in { width: auto; } }

/* ---------------------------------------------------------------- v47: product pages, the name, why it matters, the end
   Eva, 30 Oct: "put back the product name somewhere, and try why it matters with a business reason, if it's not
   repeating". The name sits above the headline with its menu icon (not a pill); the business reason is one line with
   a violet edge; the page ends on the test (10 days) with a customer result beside it where a story used the product. */
.prod-name { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-body); line-height: 1.2; font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.prod-name__i { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--c-tint-violet); color: var(--c-accent); }
.prod-name__i svg { width: 19px; height: 19px; }
.prod-name__new { margin-left: 2px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.prod-name + .cap-hero__title { margin-top: calc(var(--s-1) * -1); }
.prod-why { max-width: 54ch; font-size: var(--fs-body); line-height: 1.5; }
.prod-why strong { display: block; margin-bottom: 2px; font-size: var(--fs-small); color: var(--c-accent-ink); }
.prod-cta__grid { display: grid; gap: var(--s-6) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.prod-cta__grid--proof { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.prod-cta__go { display: grid; gap: var(--s-4); justify-items: start; min-width: 0; }
.prod-cta__go h2 { margin: 0; }
.prod-cta .btn-row { margin-top: var(--s-2); }
.poc-days--light { margin: 0; color: var(--c-ink); }
.poc-days--light strong { background-image: var(--gradient-text-light); color: var(--c-accent); }
.poc-days--light span { color: var(--c-ink-2); }
.prod-proof-wrap { display: grid; gap: var(--s-2); align-content: center; min-width: 0; padding-right: clamp(2rem, 1rem + 4vw, 5rem); border-right: 1px solid var(--c-line); }
.prod-proof { display: grid; gap: 8px; color: var(--c-ink); text-decoration: none; }
.prod-proof__n { width: fit-content; padding-bottom: 0.05em; font-size: clamp(2.75rem, 1.8rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -0.045em; font-weight: var(--fw-heavy);
  background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
.prod-proof__t { max-width: 30ch; font-size: var(--fs-lead); font-weight: var(--fw-medium); line-height: 1.35; }
.prod-proof__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--fs-small); color: var(--c-muted); }
.prod-proof__go { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--c-accent-ink); white-space: nowrap; }
.prod-proof__go svg { width: 14px; height: 14px; }
.prod-proof:hover .prod-proof__go, .prod-proof:focus-visible .prod-proof__go { text-decoration: underline; text-underline-offset: 3px; }
.prod-proof__mk { margin: 0; }
@media (max-width: 860px) {
  .prod-cta__grid--proof { grid-template-columns: minmax(0, 1fr); }
  .prod-proof-wrap { padding-right: 0; padding-bottom: var(--s-5); border-right: 0; border-bottom: 1px solid var(--c-line); }
}
@media (forced-colors: active) { .prod-proof__n, .poc-days--light strong { -webkit-text-fill-color: currentColor; background: none; } }
@media (min-width: 861px) {   /* v47: with no customer result, the end keeps its two sides: the headline, then the 10 days and the buttons */
  .prod-cta__grid:not(.prod-cta__grid--proof) .prod-cta__go { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
  .prod-cta__grid:not(.prod-cta__grid--proof) .prod-cta__go h2 { grid-row: span 2; }
}

/* ---------------------------------------------------------------- v48: Today / With Monnai, as pairs (vs4)
   Eva, 30 Oct: "content is good but can we improve the UX / template". Each challenge reads across: a quiet card for
   today, an arrow, a white card for what changes with Monnai, both the same height and centred; no table lines. */
.vs4__heads { display: grid; grid-template-columns: minmax(0, 0.85fr) 56px minmax(0, 1.15fr); margin: var(--s-6) 0 var(--s-3); }
.vs4__h { margin: 0; padding-inline: var(--s-5); font-size: var(--fs-small); font-weight: var(--fw-bold); }
.vs4__h--today { color: var(--c-risk-ink); }
.vs4__h--mon { color: var(--c-accent-ink); }
.vs4__rows { list-style: none; display: grid; gap: var(--s-4); margin: 0; padding: 0; }
.vs4__row { display: grid; grid-template-columns: minmax(0, 0.85fr) 56px minmax(0, 1.15fr); align-items: stretch; }
.vs4__today, .vs4__mon { display: flex; align-items: center; gap: var(--s-4); min-width: 0; padding: var(--s-5); border-radius: 20px; }
.vs4__today { background: #F7F5FA; box-shadow: inset 0 0 0 1px var(--c-line); }
.vs4__mon { background: var(--c-ground); box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.22), 0 16px 34px -22px rgba(81, 0, 255, 0.45); }
.vs4__tx { display: grid; gap: 6px; min-width: 0; }
.vs4__tx p { margin: 0; }
.vs4__lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read aloud; shown on phones */
.vs4__today h3 { margin: 0; font-size: var(--fs-lead); line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-ink-2); }
.vs4__a { font-size: var(--fs-lead); line-height: 1.35; font-weight: var(--fw-bold); letter-spacing: -0.01em; color: var(--c-ink); }
.vs4__mark { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.vs4__mark svg { width: 15px; height: 15px; }
.vs4__mark--today { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.vs4__mark--mon { background: var(--c-accent); color: #fff; }
.vs4__arrow { display: grid; place-items: center; align-self: center; justify-self: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-tint-violet); color: var(--c-accent); }
.vs4__arrow svg { width: 18px; height: 18px; }
.vs4__go { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.vs4__go svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
.vs4__go:hover svg, .vs4__go:focus-visible svg { transform: translateX(4px); }
@media (prefers-reduced-motion: no-preference) {
  .js .vs4__rows[data-reveal] .vs4__row { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(var(--i) * 0.09s); }
  .js .vs4__rows[data-reveal].is-in .vs4__row { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .vs4__heads { display: none; }
  .vs4__rows { gap: var(--s-6); }
  .vs4__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vs4__today, .vs4__mon { align-items: flex-start; padding: var(--s-4); border-radius: 16px; }
  .vs4__lab { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-size: var(--fs-small); font-weight: var(--fw-bold); }
  .vs4__today .vs4__lab { color: var(--c-risk-ink); }
  .vs4__mon .vs4__lab { color: var(--c-accent-ink); }
  .vs4__arrow { transform: rotate(90deg); width: 30px; height: 30px; }
}

/* v48 (Eva: "this shouldn't bug"): a single story beside its photo. The later "shorter photos" rule (2.7 / 1) also hit
   it and, with its 300 px minimum height, made the photo 810 px wide, over the text. */
.ind2-stories.ind2-stories--solo .cu-card__media { aspect-ratio: auto; min-height: 300px; min-width: 0; }
.ind2-stories.ind2-stories--solo .cu-card__body { align-content: center; padding: var(--s-6) var(--s-7); }
@media (max-width: 760px) {
  .ind2-stories.ind2-stories--solo .cu-card__media { aspect-ratio: 2.2 / 1; min-height: 0; }
  .ind2-stories.ind2-stories--solo .cu-card__body { padding: var(--s-4) var(--s-4) var(--s-5); }
}

/* v48 (Eva: "this needs to be aligned"): a figure beside a few lines of text sits on their middle, not on the first line */
.cu-card__key, .uc2-proof, .ind2-proof, .rs-feat__res { align-items: center; }
.cu-card__res li { align-items: center; }

/* v48 Company menu block: replaced in v49 (see "v49 Company menu" below) */

/* v48 (Eva, 30 Oct: "I don't like the UX of this part"): Our mission beside the picture it describes. A crowd of
   applicants, unseen at first; when it comes into view the real customers light up, one after the other, and the three
   fakes stand out. Without JavaScript or with reduced motion, the final picture shows straight away. */
.mission10__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-7) clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.mission10 .mission9__copy { display: grid; gap: var(--s-3); justify-items: start; text-align: left; }
.mission10 .mission9__copy h2 { max-width: 16ch; }
.mission10 .mission9__copy .lead { max-width: 40ch; }
.msn { display: grid; gap: var(--s-4); margin: 0; padding: clamp(1.25rem, 0.8rem + 1.5vw, 2rem); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px -42px rgba(20, 16, 60, 0.35); }
.msn__crowd { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(6px, 0.4rem + 0.4vw, 12px); margin: 0; padding: 0; }
.msn__p { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--c-tint-violet); color: var(--c-accent);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.msn__p svg { width: 60%; height: 60%; fill: currentColor; }
.msn__p--fake { background: var(--c-risk-soft); color: #E0007F; }
.msn__x { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; background: #E0007F; box-shadow: 0 0 0 2px var(--c-ground);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); transition-delay: calc(0.4s + var(--i) * 45ms); }
.msn__x::before, .msn__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 2px; margin: -1px 0 0 -4.5px; border-radius: 1px; background: #fff; transform: rotate(45deg); }
.msn__x::after { transform: rotate(-45deg); }
.msn__legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-small); color: var(--c-ink-2); }
.msn__legend span { display: inline-flex; align-items: center; gap: 8px; }
.msn__k { width: 12px; height: 12px; border-radius: 4px; }
.msn__k--real { background: var(--c-accent); }
.msn__k--fake { background: #E0007F; }
@media (prefers-reduced-motion: no-preference) {
  .js .msn:not(.is-in) .msn__p { background: #F3F1F7; color: #D6D1E3; }
  .js .msn:not(.is-in) .msn__x { opacity: 0; transform: scale(0.4); }
}
@media (max-width: 860px) {
  .mission10__grid { grid-template-columns: minmax(0, 1fr); }
  .msn__p { border-radius: 9px; }
}

/* ---------------------------------------------------------------- v49 product headlines (Eva, 30 Oct: "we need this
   layout for all product pages", on Identity and Behavior): two lines on every product page, the black part on the
   first, the gradient part on the second, the same size everywhere. Each part is short enough to fit its line (8.3em
   at most in English, 8.6em in French, 8.4em in Spanish); the copy column is a size container, so a part never wraps
   and the size only gives way, slightly, where a column is narrower than its longest line. */
.prod-copy { container-type: inline-size; }
/* v50: the headline carries the search keyword now, so lines are longer; each page sets --fit (the em width of its
   longest line, measured per language: the h1fit block at the end of this file) and the size follows the column */
.prod-copy > .cap-hero__title { max-width: none; font-size: min(var(--fs-hero), 100cqi / var(--fit, 8.3)); }
.prod-copy > .cap-hero__title > span { white-space: nowrap; }
@container (max-width: 460px) {
  .prod-copy > .cap-hero__title { font-size: max(2rem, min(var(--fs-hero), 100cqi / var(--fit, 8.3))); }
  .prod-copy > .cap-hero__title > span { white-space: normal; }
}

/* ---------------------------------------------------------------- v49 flow titles (Eva, 30 Oct: "titles alignments
   please", on the SIM Swap flow): each column title starts where its cards start. The inputs of a product flow sit at
   the right of their column (330px at most), the check or the angles start 85px into the middle column, the answers
   fill theirs. Phones hide the titles, as before. */
.vflow__heads span:nth-child(2) { text-align: left; padding-left: 85px; }
.rflow .vflow__heads span:first-child { justify-self: end; width: min(100%, 330px); }

/* ---------------------------------------------------------------- v49 Company menu (Eva, 30 Oct: "this is bad UX", on
   the three figures): it opens like Resources. The four links on the left under "Who we are"; on the right "Our
   mission", one card with its picture (a row of applicants, the real ones checked, one fake flagged) and the mission
   sentence, the way into Our story. On phones the card follows the links. */
.mm-flat--co { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: var(--s-7); }
.mm-flat--co .mm-flat__groups { padding-right: 0; }
.mm-flat--co .mm-flat__groups--1 .mm-g__list { grid-template-columns: minmax(0, 1fr); }
.mm-arts--co .mm-art, .mnav__arts--co .mm-art { gap: 8px; }
.mm-art__go { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.mm-art__go svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
.mm-art:hover .mm-art__go svg, .mm-art:focus-visible .mm-art__go svg { transform: translateX(4px); }
.mnav__arts--co .mm-art { max-width: 460px; }
@media (max-width: 1200px) { .mm-flat--co { column-gap: var(--s-5); } }

/* ---------------------------------------------------------------- v50 SEO pass (Eva, 2 Nov: "the point is this website to be
   SEO driven"). The homepage's category line is its H1 (the keywords), the big tagline stays a paragraph. */
h1.hx5__kicker { margin: 0; letter-spacing: normal; text-wrap: wrap; }

/* "What is …?": the keyword answered in a few sentences, light, before the end of each product page */
.prod-def { padding-block: var(--s-7); }
.prod-def__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-6); align-items: start; padding-top: var(--s-6); border-top: 1px solid var(--c-line); }
.prod-def__q { margin: 0; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: var(--fw-heavy); color: var(--c-ink); }
.prod-def__a { margin: 0; max-width: 62ch; font-size: var(--fs-body); line-height: 1.6; color: var(--c-ink-2); }
@media (max-width: 760px) { .prod-def__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

/* The discreet call to action (Eva, 2 Nov: "I like this CTA, pretty discrete"): a work email and one button in a pill */
.ecta { display: flex; align-items: center; gap: 6px; width: min(100%, 460px); margin: var(--s-2) 0 0; padding: 6px 6px 6px var(--s-5); border-radius: 999px; background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line), 0 14px 32px -24px rgba(20, 16, 60, 0.45); transition: box-shadow var(--dur-1) var(--ease); }
.ecta:focus-within { box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 14px 32px -22px rgba(81, 0, 255, 0.35); }
.ecta__in { flex: 1 1 auto; min-width: 0; padding: 12px 0; border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--c-ink); outline: none; }
.ecta__in::placeholder { color: var(--c-muted); opacity: 1; }
.ecta__in[aria-invalid="true"] { color: var(--c-risk-ink); }
.ecta__go { flex: 0 0 auto; min-height: 46px; padding: 0 var(--s-5); border: 0; border-radius: 999px; background: var(--c-ink); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: var(--fw-bold); cursor: pointer; transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.ecta__go:hover { background: var(--c-accent); }
.ecta__go:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 3px; }
.ecta__err { margin: var(--s-2) 0 0 var(--s-5); color: var(--c-risk-ink); }
@media (max-width: 420px) {
  .ecta { flex-wrap: wrap; padding: 6px; border-radius: 22px; }
  .ecta__in { padding: 12px 14px; }
  .ecta__go { width: 100%; }
}
@media (forced-colors: active) { .ecta { border: 1px solid CanvasText; } }

/* Use case and industry headlines now name the problem and the keyword: a little smaller, so they keep to three lines */
.uc2-hero__title, .ind2-hero__title { font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.6rem); max-width: 18ch; }
.ind2-hubhero__title { max-width: 20ch; }

/* h1fit:start (generated by test/h1fit.js: the em width of each product headline's longest line, per language) */
html[lang="en"] .prod-copy > .cap-hero__title { --fit: 14.2; }
@container (min-width: 461px) and (max-width: 512px) { html[lang="en"] .prod-copy > .cap-hero__title { font-size: 2.25rem; } html[lang="en"] .prod-copy > .cap-hero__title > span { white-space: normal; } }
html[lang="fr"] .prod-copy > .cap-hero__title { --fit: 20.15; }
@container (min-width: 461px) and (max-width: 726px) { html[lang="fr"] .prod-copy > .cap-hero__title { font-size: 2.25rem; } html[lang="fr"] .prod-copy > .cap-hero__title > span { white-space: normal; } }
html[lang="es"] .prod-copy > .cap-hero__title { --fit: 16.95; }
@container (min-width: 461px) and (max-width: 611px) { html[lang="es"] .prod-copy > .cap-hero__title { font-size: 2.25rem; } html[lang="es"] .prod-copy > .cap-hero__title > span { white-space: normal; } }
html[lang="pt-BR"] .prod-copy > .cap-hero__title { --fit: 18; }
@container (min-width: 461px) and (max-width: 648px) { html[lang="pt-BR"] .prod-copy > .cap-hero__title { font-size: 2.25rem; } html[lang="pt-BR"] .prod-copy > .cap-hero__title > span { white-space: normal; } }
/* h1fit:end */

/* v50 (SEO): a customer story's H1 holds the customer and the result; each line keeps its own look */
.st2-hero__h1 { display: grid; gap: var(--s-3); margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.st2-hero__h1 > span { display: block; }
.st2-hero__h1 > .st2-hero__lead { line-height: var(--lh-body); letter-spacing: normal; text-wrap: pretty; }

/* v50 (Pierre: the region list beside the map was confusing; Eva: "adjust that section"): the map alone, centered */
@media (min-width: 1100px) {
  .net8 > .container { display: block; }
  .net8 .net8__map { max-width: 860px; margin: 0 auto; }
}
/* v50: the homepage stays within eight screens: the test's title on two lines */
.poc8 .poc7__title { font-size: clamp(2.5rem, 1.3rem + 3vw, 3.4rem); }
/* review notes inside a menu item wrap with it instead of stretching it under the next column */
.mm-label .gap { white-space: normal; }

/* ====================================================================
   v51 (2 Nov 2026): charts from the customers' proof-of-concept reports (Pierre: "visually much stronger").
   Credit risk and the Mexico story: one scale, two scores. Business lending and the Brazil story: the gain by
   segment and the default rate by grade. Thin marks (12px bars, 24px columns), hairline grid, the bureau and the
   reference row in gray, Monnai in the accent; every value printed beside its mark; the hover only lifts a row.
   ==================================================================== */
.pc-grid { display: grid; gap: var(--s-4); align-items: start; }
.pc-grid--1 { max-width: 920px; }
.pc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pc { --pc-k: 10.5rem; --pc-v: 6.5rem; --pc-h: 168px; margin: 0; min-width: 0; display: grid; gap: var(--s-4); align-content: start;
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.75rem); border-radius: 16px; background: var(--c-panel); }
.pc--bars { --pc-k: 13rem; --pc-v: 4.75rem; }
.pc__cap { display: grid; gap: var(--s-1); }
.pc__t { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: 1.25; color: var(--c-ink); text-wrap: balance; }
.pc__s { max-width: 62ch; font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.pc__grp { display: grid; gap: var(--s-2); }
.pc__gh { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-ink-2); }
.pc__rows { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
/* the grid behind the marks: a hairline at each quarter of the scale (range), or the zero line (bars) */
.pc__rows--grid::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: calc(var(--pc-k) + var(--s-3)); right: calc(var(--pc-v) + var(--s-3));
  background: repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 25%); border-right: 1px solid var(--c-line); pointer-events: none; }
.pc__rows--base0::before { background: none; border-right: 0; border-left: 1px solid var(--c-line-strong); }
.pc__row { position: relative; z-index: 1; display: grid; grid-template-columns: var(--pc-k) minmax(0, 1fr) var(--pc-v); gap: var(--s-3); align-items: center; transition: opacity 0.2s var(--ease); }
.pc__row--ref { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.pc__k { font-size: var(--fs-small); line-height: 1.3; color: var(--c-ink-2); }
.pc__v { display: grid; justify-items: end; text-align: right; line-height: 1.25; }
.pc__v strong { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-ink); white-space: nowrap; }
.pc__v em { font-style: normal; font-size: var(--fs-micro); color: var(--c-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc__track { position: relative; height: 12px; }
.pc__track i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 6px; background: var(--c-accent); transform-origin: left center; }
.pc--bars .pc__track i { border-radius: 0 4px 4px 0; }
.pc__row--base .pc__track i { background: var(--c-line-strong); }
.pc__dot, .pc__mk { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c-panel); }
.pc__dot { background: var(--c-line-strong); }
.pc__mk { background: var(--c-ink); }
.pc__mk span { position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); font-size: var(--fs-micro); font-weight: var(--fw-heavy); line-height: 1; color: var(--c-ink); }
.pc__row--mk { padding-top: 18px; }
.pc__axisrow { display: grid; grid-template-columns: var(--pc-k) minmax(0, 1fr) var(--pc-v); gap: var(--s-3); margin-top: calc(var(--s-2) * -1); }
.pc__axis { position: relative; height: 1.25rem; font-size: var(--fs-micro); line-height: 1.25rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.pc__axis span { position: absolute; top: 0; left: calc(var(--x) * 100%); transform: translateX(-50%); }
.pc__axis span:first-child { transform: none; }
.pc__axis span:last-child { transform: translateX(-100%); }
.pc__keys { list-style: none; margin: 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--c-line); display: grid; gap: var(--s-2); }
.pc__keys li { display: grid; grid-template-columns: 1.375rem minmax(0, 1fr); gap: var(--s-2); align-items: start; font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.pc__keys b { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-top: 0.05rem; border-radius: 50%; background: var(--c-ink); color: var(--c-on-ink); font-size: var(--fs-micro); font-weight: var(--fw-heavy); line-height: 1; }
.pc__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; min-height: calc(var(--pc-h) + 3.25rem); }
.pc__cols li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: opacity 0.2s var(--ease); }
.pc__cv { order: 1; margin-bottom: 6px; font-size: var(--fs-micro); font-weight: var(--fw-heavy); line-height: 1.2; color: var(--c-ink); white-space: nowrap; }
.pc__col { order: 2; display: block; width: min(24px, 70%); height: max(3px, calc(var(--v) * var(--pc-h))); border-radius: 4px 4px 0 0; background: var(--c-accent); transform-origin: center bottom; }
.pc__ck { order: 3; align-self: stretch; padding-top: 6px; border-top: 1px solid var(--c-line-strong); text-align: center; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; color: var(--c-ink-2); }
.pc__ends { display: flex; justify-content: space-between; margin: calc(var(--s-3) * -1) 0 0; font-size: var(--fs-micro); color: var(--c-muted); }
.pc__src { margin-top: var(--s-4); color: var(--c-muted); }
.st2-res .pc-grid { margin-top: var(--s-6); }
@media (hover: hover) {
  .pc__rows:hover > .pc__row:not(:hover), .pc__cols:hover > li:not(:hover) { opacity: 0.45; }
}
.js .pc[data-reveal] .pc__track i { transform: scaleX(0); transition: transform 0.9s var(--ease) 0.25s; }
.js .pc[data-reveal].is-in .pc__track i { transform: none; }
.js .pc[data-reveal] .pc__col { transform: scaleY(0); transition: transform 0.8s var(--ease) 0.25s; }
.js .pc[data-reveal].is-in .pc__col { transform: none; }
.js .pc[data-reveal] :is(.pc__mk, .pc__dot) { opacity: 0; transition: opacity 0.4s var(--ease) 0.9s; }
.js .pc[data-reveal].is-in :is(.pc__mk, .pc__dot) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js .pc[data-reveal] .pc__track i, .js .pc[data-reveal] .pc__col { transform: none; transition: none; }
  .js .pc[data-reveal] :is(.pc__mk, .pc__dot) { opacity: 1; transition: none; }
}
@media (max-width: 1100px) { .pc-grid--2 { grid-template-columns: minmax(0, 1fr); max-width: 920px; } }
@media (max-width: 720px) {
  .pc__row, .pc__axisrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k v" "t t"; row-gap: 6px; }
  .pc__k { grid-area: k; }
  .pc__v { grid-area: v; }
  .pc__track, .pc__axis { grid-area: t; }
  .pc__axisrow > span:not(.pc__axis) { display: none; }
  .pc__axisrow { margin-top: 0; }
  .pc__rows--grid::before { display: none; }
  .pc__row--mk { padding-top: 0; }
  .pc__row--mk .pc__track { margin-top: 16px; }
  .pc { --pc-h: 140px; }
}
/* one chart: the title, the lead and the link on the left, the chart on the right (Eva's length targets) */
.pc-sec--side .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); column-gap: clamp(2rem, 1rem + 3vw, 4.5rem); align-items: start; }
.pc-sec--side .rs-row-head { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-4); margin-bottom: 0; }
.pc-sec--side .pc-grid--1 { max-width: none; }
.pc-sec--side .pc__src { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .pc-sec--side .container { grid-template-columns: minmax(0, 1fr); }
  .pc-sec--side .rs-row-head { margin-bottom: var(--s-6); }
  .pc-sec--side .pc-grid--1 { max-width: 920px; }
}
/* v51 (Fernando, Eva): the test request's thank-you names the use case and the geographies, as typed */
.tst-done__dl { margin: 0; display: grid; gap: var(--s-1); }
.tst-done__dl div { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.tst-done__dl dt { font-weight: var(--fw-bold); color: var(--c-ink); }
.tst-done__dl dt::after { content: ":"; }
:lang(fr) .tst-done__dl dt::after { content: "\00a0:"; }
.tst-done__dl dd { margin: 0; color: var(--c-ink-2); }

/* v66 (Pierre, 2 Nov: "100+ customers" is underwhelming): three hero figures, one row at every width */
.hx5__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
@media (max-width: 760px) {
  .hx5__figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx5__figs li { padding-inline: var(--s-2); }
  .hx5__figs li:nth-child(3) { border-left: 1px solid var(--c-line); }
  .hx5__figs strong { font-size: clamp(1.5rem, 0.9rem + 3vw, 2.25rem); }
}

/* v67 (twenty customer stories): the map on top and its index under it in columns; two rows of stories, the rest
   one click away (a link to a story further down opens them, site.js) */
.cu-glance__grid { grid-template-columns: minmax(0, 1fr) !important; row-gap: var(--s-6); }
.cu-glance .cu-map { max-width: 1120px; margin-inline: auto; }
.cu-glance .cu-index { display: block; columns: 4 15rem; column-gap: clamp(1.5rem, 1rem + 2vw, 3rem); max-width: 1120px; margin-inline: auto; }
.cu-glance .cu-index li { break-inside: avoid; }
.cu-glance .cu-ix { padding-block: var(--s-2); }
.cu-glance .cu-ix__t strong { font-size: var(--fs-body); line-height: 1.3; }
.cu-glance .cu-ix__t span { font-size: var(--fs-micro); }
.cu-more { margin-top: var(--s-6); }
.cu-more[open] { margin-top: var(--s-4); }
.cu-more > summary { list-style: none; display: flex; width: fit-content; margin-inline: auto; cursor: pointer; }
.cu-more > summary::-webkit-details-marker { display: none; }
.cu-more[open] > summary { display: none; }

/* v67: four charts for the Tier-1 bank (two rows of two); the Customers index a little smaller in its columns */
.pc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px) { .pc-grid--4 { grid-template-columns: minmax(0, 1fr); max-width: 920px; } }
.cu-glance .cu-index { columns: 4 14rem; }
.cu-glance .cu-ix { grid-template-columns: 2rem minmax(0, 1fr) 16px; gap: var(--s-2); }
.cu-glance .cu-ix__t strong { font-size: var(--fs-small); line-height: 1.3; }

/* v67: the product family pages (Consumer Risk Intelligence, Verification): the products as a two-column list */
.fam-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 3vw, 4rem); border-top: 0; }
.fam-grid li { border-bottom: 1px solid var(--c-line); }
.fam-grid li:nth-child(-n+2) { border-top: 1px solid var(--c-line); }
@media (max-width: 760px) { .fam-grid { grid-template-columns: minmax(0, 1fr); } .fam-grid li:nth-child(2) { border-top: 0; } }

/* v67 (Pierre: "page is sterile, add content and visuals"): planned pages show what they will hold and where to go meanwhile */
.next-grid { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); max-width: 1000px; }
.next-grid li { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-surface, var(--c-ground)); font-size: var(--fs-small); line-height: 1.45; }
.next-grid li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--gradient-brand, var(--c-accent)); }
.next-h2 { margin-top: var(--s-8); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }
.next-go { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--s-3); max-width: 1000px; }
.next-go a { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border: 1px solid var(--c-line); border-radius: 16px; color: var(--c-ink); text-decoration: none; transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.next-go a:hover, .next-go a:focus-visible { border-color: var(--c-accent); transform: translateY(-2px); }
.next-go strong { font-weight: var(--fw-heavy); }
.next-go span { font-size: var(--fs-small); color: var(--c-muted); }

/* v67b: the markers chart has four columns, not eight: they share the card's width, and every label keeps two lines'
   room so the bars stand on one baseline when "Three or more" wraps on a phone */
.pc--flags .pc__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pc--flags .pc__ck { min-height: calc(2.4em + 7px); }
.pc--flags .pc__col { width: min(40px, 60%); }
/* v67b: the family titles run a little longer than the product ones ("from a phone, an email or an IP."): a slightly
   smaller fit keeps each line inside the copy column */
html[lang="en"] .fam-hero .prod-copy > .cap-hero__title { --fit: 13.5; }

/* v67b (Eva, 3 Nov: "now that we have more stories, don't limit and make the menu broader"): every customer story in
   the Customers menu, four kinds side by side; the featured story sits under the intro so the columns get the width */
.mm-stories--v8.mm-stories--all { grid-template-columns: minmax(220px, 0.9fr) minmax(0, 4.2fr); gap: var(--s-6); }
.mm-sgroups--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.mm-sgroups--4 .mm-sg ul { gap: 0; }
.mm-sgroups--4 .mm-sg__a { padding-block: 6px; }
.mm-stories--all .mm-stories__intro .mm-sfeat { min-height: 170px; margin-top: var(--s-2); padding: var(--s-4); }
.mm-stories--all .mm-stories__intro .mm-sfeat__t { font-size: 1rem; }
@media (max-width: 1200px) {
  .mm-stories--v8.mm-stories--all { grid-template-columns: minmax(170px, 0.7fr) minmax(0, 4fr); gap: var(--s-5); }
  .mm-sgroups--4 { gap: var(--s-3) var(--s-4); }
}
/* v67b: press coverage, each article's angle on one line and its date under it (dates no longer break mid-line) */
.pr-cov__a { grid-template-areas: "o i" "d i" "m i"; align-content: center; }
.pr-cov__m { grid-area: m; margin-top: 2px; font-size: var(--fs-micro); color: var(--c-muted); }
/* the featured story under the Customers menu intro: name and link only, so the intro stays as short as the columns */
.mm-stories--all .mm-stories__intro .mm-sfeat__l { display: none; }
/* v67b (Eva, 3 Nov: “a bit heavy… and redundant design wise”): the test page’s steps carry what you send and what you
   get back (the separate cards are gone); lighter numbers, and the limits line under the steps */
.tst-steps__n { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.tst-how__note { margin-top: var(--s-5); color: var(--c-ink-2); }


/* ================================================================ v68 product pages (4 Nov 2026: Ravish's brief "Website
   product pages and customer stories", the product kits and the before-and-after copy). Page order: hero · proof bar ·
   how it works · what you get · why · comparison · use cases and works with · customer story · FAQ · the test. */

/* Products menu: Consumer Risk Intelligence over two columns with Risk Score under it, Identity Verification (KYC) in
   one tall column, Business Risk Intelligence (KYB) with Agent Pass under it. Groups of one product have no title. */
.mm-flat__groups--fam3, .mm-panel--tiles .mm-flat__groups--fam3 { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ri ver bri" "rs ver kya"; column-gap: var(--s-6); row-gap: var(--s-3); align-items: start; }
.mm-flat__groups--fam3 .mm-g--ri { grid-area: ri; }
.mm-flat__groups--fam3 .mm-g--rs { grid-area: rs; }
.mm-flat__groups--fam3 .mm-g--ver { grid-area: ver; }
.mm-flat__groups--fam3 .mm-g--bri { grid-area: bri; }
.mm-flat__groups--fam3 .mm-g--kya { grid-area: kya; }
.mm-flat__groups--fam3 .mm-g--rs, .mm-flat__groups--fam3 .mm-g--kya { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.mm-flat__groups--fam3 .mm-g--rs .mm-g__list, .mm-flat__groups--fam3 .mm-g--kya .mm-g__list { grid-template-columns: minmax(0, 1fr); }
.mm-flat__groups--fam3 .mm-line { font-size: 0.8125rem; }
@media (max-width: 1200px) { .mm-flat__groups--fam3, .mm-panel--tiles .mm-flat__groups--fam3 { column-gap: var(--s-5); } }
/* v68b (Eva, 4 Nov: "make the agent pass stand out as a 'new' side"): Agent Pass leaves the families for a card of its
   own at the top of the side column, dark, with its drawing; "New" is a word with a dot, not a pill; How it fits sits
   under it as before. On phones the card follows the families. */
.mm-flat__groups--fam3, .mm-panel--tiles .mm-flat__groups--fam3 { grid-template-areas: "ri ver bri" "rs ver ."; }
.mm-side { display: grid; align-content: start; gap: var(--s-3); min-width: 0; margin: var(--s-3) calc(var(--s-3) - var(--gutter)) var(--s-3) 0; }
.mm-flat--feat .mm-side > .mm-featured { margin: 0; }
.mm-side > .mm-promo, .mnav__pane > .mm-promo { margin: 0; }
.mm-promo__tag { display: inline-flex; align-items: center; gap: 8px; padding: 0; border-radius: 0; background: none; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0; color: #FFB8EC; }
.mm-promo__tag i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #FB9D00, #FF00AA); box-shadow: 0 0 0 4px rgba(255, 0, 170, 0.22); }
.mm-promo--img { gap: 2px; padding: 0 var(--s-5) var(--s-5); border-radius: 18px; box-shadow: 0 22px 44px -30px rgba(81, 0, 255, 0.7); }
.mm-promo--img::before { inset: -30% -40% auto auto; width: 300px; height: 300px; }
.mm-promo__img { display: block; height: 150px; margin: 0 calc(-1 * var(--s-5)) var(--s-2); overflow: hidden; }
.mm-promo__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 74%; transform: scale(1.18); transform-origin: 62% 80%; transition: transform 0.6s var(--ease); }
.mm-promo--img:hover .mm-promo__img img, .mm-promo--img:focus-visible .mm-promo__img img { transform: scale(1.24); }
.mm-promo--img .mm-promo__t { margin-top: 4px; font-size: 1.25rem; line-height: 1.2; }
.mm-promo__s { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.35; color: rgba(255, 255, 255, 0.9); }
.mm-promo--img .mm-promo__l { margin-top: 6px; }
.mnav__pane > .mm-promo--img { margin-block: var(--s-4); }
.mnav__pane > .mm-promo--img .mm-promo__img { height: 168px; }
@media (prefers-reduced-motion: reduce) { .mm-promo__img img { transition: none; } }
@media (forced-colors: active) { .mm-promo { border: 1px solid CanvasText; } }

/* ---- hero: the product name with its plain-word label, the outcome headline, the lead, one button */
.prod-name__tag { margin-left: 2px; padding-left: 12px; border-left: 1px solid var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-muted); }
.prod-name__tag--ok { color: var(--c-accent-ink); }
.prod-name__tag--soon { color: var(--c-warn-ink); }
.pg-hero .crumbs { margin-bottom: var(--s-4); }
.pg-hero .lead { max-width: 44ch; }
.pg-hero__go { margin-top: var(--s-2); }
.pg-hero { padding-bottom: var(--s-6); }

/* ---- proof bar: two or three results, stat first, each opening its story */
.pg-proof { padding-block: 0 var(--s-7); }
.pg-proof__list { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); margin: 0; padding: 0; border-block: 1px solid var(--c-line); }
.pg-proof__list--1 { --n: 1; } .pg-proof__list--2 { --n: 2; } .pg-proof__list--3 { --n: 3; }
.pg-proof__list li + li { border-left: 1px solid var(--c-line); }
.pg-proof__t { display: grid; align-content: start; gap: 6px; height: 100%; padding: var(--s-5) var(--s-5) var(--s-5) 0; color: inherit; text-decoration: none; }
.pg-proof__list li + li .pg-proof__t { padding-left: var(--s-6); }
.pg-proof__n { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); line-height: 1; font-weight: var(--fw-heavy); letter-spacing: -0.03em; background: var(--gradient-text-light, linear-gradient(90deg, #5100FF, #FF00AA)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-proof__x { font-size: var(--fs-body); line-height: 1.35; font-weight: var(--fw-bold); color: var(--c-ink); text-wrap: pretty; }
.pg-proof__who { font-size: var(--fs-small); line-height: 1.35; color: var(--c-muted); }
a.pg-proof__t:hover .pg-proof__who, a.pg-proof__t:focus-visible .pg-proof__who { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .pg-proof__list { grid-template-columns: minmax(0, 1fr); }
  .pg-proof__list li + li { border-left: 0; border-top: 1px solid var(--c-line); }
  .pg-proof__list li + li .pg-proof__t { padding-left: 0; }
}

/* the KYC pages: no customer result yet, so the test takes its place (brief) */
.pg-test { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) auto; gap: var(--s-6); align-items: center; padding: var(--s-5) 0; border-block: 1px solid var(--c-line); }
.pg-test p { margin: 0; }
.pg-test__k { display: grid; gap: 2px; }
.pg-test__k strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); color: var(--c-ink); }
.pg-test__k span { font-size: var(--fs-small); color: var(--c-muted); }
.pg-test__steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; }
.pg-test__steps li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); line-height: 1.35; color: var(--c-ink-2); }
.pg-test__steps strong { color: var(--c-ink); }
.pg-test__n { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-tint-violet); color: var(--c-accent-ink); font-size: 0.875rem; font-weight: var(--fw-heavy); }
.pg-test__go { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); white-space: nowrap; }
.pg-test__go svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
.pg-test__go:hover svg { transform: translateX(4px); }
@media (max-width: 1000px) { .pg-test { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); } }
@media (max-width: 640px) { .pg-test__steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }

/* ---- how it works: Eva's three columns with the Trusted / Risky switch, a flag count, the strip under it */
.pg-how .sec-head { margin-bottom: var(--s-5); }
.pg-fig { margin-top: 0; }
.pg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.pg-tog { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.pg-tog__b { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); cursor: pointer; transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.pg-tog__b:hover { color: var(--c-ink); }
.pg-tog__b[aria-pressed="true"] { background: var(--c-ground); color: var(--c-ink); box-shadow: 0 1px 2px rgba(20, 16, 60, 0.12), 0 0 0 1px var(--c-line); }
.pg-tog__b:focus-visible { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 2px; }
.pg-tog__d { width: 9px; height: 9px; border-radius: 50%; background: var(--c-accent); }
.pg-tog__d--risk { background: #E0007F; }
.pg-ill { margin: 0; font-size: var(--fs-micro); color: var(--c-muted); }
.pg-fig[data-pg-show="a"] .pg-st--b, .pg-fig[data-pg-show="b"] .pg-st--a { display: none !important; }
.pg-get .pg-next { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(81, 0, 255, 0.14); }
.rflow__get--risk .pg-next { border-top-color: rgba(255, 0, 170, 0.2); }
.pg-next span { font-size: 0.8125rem; color: var(--c-muted); }
.pg-next strong { font-size: 1rem; font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.rflow__get--risk .pg-next strong { color: var(--c-risk-ink); }
.rflow__m--part { background: #FB9D00; }
.pg-more { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); margin: var(--s-5) 0 0; padding: 0; }
.pg-more a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.pg-more a svg { width: 15px; height: 15px; flex: 0 0 auto; transition: transform var(--dur-1) var(--ease); }
.pg-more a:hover svg { transform: translateX(4px); }

/* the strip under the graphic */
.pg-strip { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line); }
.pg-strip__k { margin: 0 0 var(--s-4); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.pg-tl { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 22px 0 0; }
.pg-tl::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #FB9D00, #FF00AA 50%, #5100FF); transform-origin: left center; }
.pg-tl li { position: relative; display: grid; gap: 2px; min-width: 0; }
.pg-tl li::before { content: ""; position: absolute; left: 0; top: -22px; width: 14px; height: 14px; border-radius: 50%; background: var(--c-ground); box-shadow: inset 0 0 0 3px var(--c-accent); }
.pg-st--b .pg-tl li::before, .rflow__get--risk ~ .pg-tl li::before { box-shadow: inset 0 0 0 3px var(--c-accent); }
.pg-tl strong { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-ink); }
.pg-tl span { font-size: var(--fs-small); line-height: 1.35; color: var(--c-ink-2); }
.pg-kinds { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.pg-kind { display: grid; justify-items: center; gap: 6px; width: 92px; font-size: 0.8125rem; line-height: 1.25; text-align: center; color: var(--c-ink); }
.pg-kind i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #5100FF, #A100FF); color: #fff; box-shadow: 0 10px 20px -14px rgba(81, 0, 255, 0.8); }
.pg-kind i svg { width: 22px; height: 22px; }
.pg-kind.is-off { color: var(--c-muted); }
.pg-kind.is-off i { background: transparent; color: var(--c-line-strong); box-shadow: inset 0 0 0 1.5px var(--c-line-strong); border: 0; opacity: 0.55; }
.pg-kind.is-off span:first-of-type { text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
.pg-kinds__key { display: flex; gap: var(--s-5); margin: var(--s-4) 0 0; font-size: 0.8125rem; color: var(--c-muted); }
.pg-kinds__key span { display: inline-flex; align-items: center; gap: 8px; }
.pg-kinds__key span::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #5100FF, #A100FF); }
.pg-kinds__key .is-off::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.pg-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.pg-pair p { margin: 0; }
.pg-pair__b { display: grid; gap: 2px; padding: 14px 18px; border-radius: 14px; background: #F7F6FB; box-shadow: inset 0 0 0 1px var(--c-line); min-width: 0; }
.pg-pair__b span { font-size: 0.8125rem; color: var(--c-muted); }
.pg-pair__b strong { font-size: var(--fs-body); line-height: 1.3; color: var(--c-ink); }
.pg-pair__rel span { display: inline-block; padding: 8px 14px; border-radius: 12px; background: #F3EFFF; color: var(--c-accent-ink); font-size: var(--fs-small); font-weight: var(--fw-heavy); white-space: nowrap; }
.pg-st--b .pg-pair__rel span { background: #FFEEF8; color: var(--c-risk-ink); }
.pg-fig--score .pg-st--a .pg-pair__rel span { background: #F3EFFF; }

/* Risk Score: the optional building blocks, the score, then the bands */
.pg-blk.vflow__in.rflow__in { min-height: 44px; padding-block: 6px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); border-radius: 12px; transition: opacity var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease); }
.pg-blk .vflow__v { font-size: 0.9375rem; }
.pg-blk__s { font-size: 0.75rem; font-weight: var(--fw-bold); }
.pg-blk__on { color: var(--c-accent-ink); }
.pg-blk__off { color: var(--c-muted); }
.pg-fig[data-pg-show="a"] .pg-blk:not([data-on~="a"]), .pg-fig[data-pg-show="b"] .pg-blk:not([data-on~="b"]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-line); }
.pg-fig[data-pg-show="a"] .pg-blk:not([data-on~="a"]) .vflow__v, .pg-fig[data-pg-show="b"] .pg-blk:not([data-on~="b"]) .vflow__v { color: var(--c-muted); font-weight: var(--fw-medium); }
.pg-fig[data-pg-show="a"] .pg-blk[data-on~="a"], .pg-fig[data-pg-show="b"] .pg-blk[data-on~="b"] { background: #F3EFFF; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.22); }
.pg-fig[data-pg-show="a"] .pg-blk[data-on~="a"] .pg-blk__off, .pg-fig[data-pg-show="b"] .pg-blk[data-on~="b"] .pg-blk__off,
.pg-fig[data-pg-show="a"] .pg-blk:not([data-on~="a"]) .pg-blk__on, .pg-fig[data-pg-show="b"] .pg-blk:not([data-on~="b"]) .pg-blk__on { display: none; }
.pg-bands { position: relative; padding-top: 34px; }
.pg-bands__row { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.pg-band { flex: var(--w) 1 0; min-width: 0; padding: 10px 12px; border-radius: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.pg-band--0 { background: #F3EFFF; }
.pg-band--1 { background: #FFF6E6; }
.pg-band--2 { background: #FFEEF8; }
.pg-band.is-at { box-shadow: inset 0 0 0 1.5px currentColor; }
.pg-band--0.is-at { color: var(--c-accent-ink); }
.pg-band--1.is-at { color: var(--c-warn-ink); }
.pg-band--2.is-at { color: var(--c-risk-ink); }
.pg-bands__at { position: absolute; top: 0; left: calc(var(--at) * 100%); margin: 0; transform: translateX(-50%); }
.pg-bands__at span { display: block; padding: 3px 9px; border-radius: 8px; background: var(--c-ink); color: #fff; font-size: 0.8125rem; font-weight: var(--fw-heavy); }
.pg-bands__at::after { content: ""; display: block; width: 0; height: 0; margin: 0 auto; border: 5px solid transparent; border-top-color: var(--c-ink); }
.pg-bands__note { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--c-muted); }

/* the customer journey (KYC): they type, we clean, we check, you get */
.pg-fig--jy { position: relative; padding: var(--s-6) var(--s-7); border-radius: 28px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 30px 60px -42px rgba(20, 16, 60, 0.35); }
.pg-jy { display: grid; gap: var(--s-3); align-items: start; }
.pg-jy--4 { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1.1fr); }
.pg-jy--3 { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1.1fr); }
.pg-jy__go { align-self: center; display: grid; place-items: center; color: var(--c-line-strong); }
.pg-jy__go svg { width: 10px; height: 16px; }
.pg-jy__col { display: grid; gap: 10px; min-width: 0; }
.pg-jy__h { margin: 0 0 2px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.pg-jy__list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pg-jy__f, .pg-jy__a, .pg-jy__c { display: grid; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: 12px; }
.pg-jy__f { background: #F7F6FB; box-shadow: inset 0 0 0 1px var(--c-line); }
.pg-jy__f--clean { background: #F3EFFF; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.16); }
.pg-jy__f > span, .pg-jy__a > span:first-child, .pg-jy__c > span > span { font-size: 0.8125rem; line-height: 1.3; color: var(--c-muted); }
.pg-jy__f strong, .pg-jy__c strong { font-size: 0.9375rem; line-height: 1.3; color: var(--c-ink); overflow-wrap: anywhere; }
.pg-jy__f.is-empty strong { font-weight: var(--fw-medium); color: var(--c-muted); }
.pg-jy__c { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: start; background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); }
.pg-jy__c > span:last-child { display: grid; gap: 2px; }
.pg-jy__c .rflow__m { width: 20px; height: 20px; margin-top: 2px; }
.pg-jy__c .rflow__m svg { width: 12px; height: 12px; }
.pg-jy__a { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; background: #F4F4F7; }
.pg-jy__a .vf2-a { font-size: 0.9375rem; font-weight: var(--fw-bold); }
.pg-jy__v { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; padding: 12px 14px; border-radius: 14px; background: #F3EFFF; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.16); }
.pg-jy__v strong { font-size: 1rem; line-height: 1.3; font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.pg-jy__v--risk { background: #FFEEF8; box-shadow: inset 0 0 0 1px rgba(255, 0, 170, 0.22); }
.pg-jy__v--risk strong { color: var(--c-risk-ink); }
.pg-jy__note { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-2); }
@media (max-width: 999px) {
  .pg-fig--jy { padding: var(--s-5); }
  .pg-jy--4, .pg-jy--3 { grid-template-columns: minmax(0, 1fr); }
  .pg-jy__go { transform: rotate(90deg); height: 20px; }
}

/* entrances: the flags one by one, the timeline from left to right, the answers in order; after a switch, at once */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-fig:not(.is-in) .pg-pts li, .js .pg-fig:not(.is-in) .pg-next { opacity: 0; }
  .js .pg-fig.is-in .pg-pts li { animation: pgIn 0.4s var(--ease) both; animation-delay: calc(1.6s + var(--i) * 0.28s); }
  .js .pg-fig.is-in .pg-next { animation: pgIn 0.4s var(--ease) both; animation-delay: 2.5s; }
  .js .pg-fig.is-in .pg-tl::before { animation: pgDraw 1.1s var(--ease) both; animation-delay: 0.3s; }
  .js .pg-fig.is-in .pg-tl li { animation: pgIn 0.45s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 0.4s); }
  .js .pg-fig.is-in .pg-kind { animation: pgPop 0.35s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 0.08s); }
  .js .pg-fig.is-in .pg-pair__b, .js .pg-fig.is-in .pg-pair__rel { animation: pgIn 0.45s var(--ease) both; }
  .js .pg-fig.is-in .pg-pair__rel { animation-delay: 0.45s; }
  .js .pg-fig.is-in .pg-pair__b + .pg-pair__rel + .pg-pair__b { animation-delay: 0.25s; }
  .js .pg-fig.is-in .pg-bands__at { animation: pgSlide 0.9s var(--ease) both; animation-delay: 0.4s; }
  .js .pg-fig--jy.is-in .pg-jy__col { animation: pgIn 0.45s var(--ease) both; }
  .js .pg-fig--jy.is-in .pg-jy__col:nth-child(3) { animation-delay: 0.35s; }
  .js .pg-fig--jy.is-in .pg-jy__col:nth-child(5) { animation-delay: 0.7s; }
  .js .pg-fig--jy.is-in .pg-jy__col:nth-child(7) { animation-delay: 1.05s; }
  .js .pg-fig--jy.is-in .pg-jy__a { animation: pgIn 0.35s var(--ease) both; }
  .js .pg-fig--jy.is-in .pg-jy--4 .pg-jy__a { animation-delay: calc(1.2s + var(--n, 0) * 0.15s); }
  .js .pg-fig--jy.is-in .pg-jy--3 .pg-jy__a { animation-delay: calc(0.85s + var(--n, 0) * 0.15s); }
  .js .pg-fig.is-tog .rflow__get { animation-delay: 0s; }
  .js .pg-fig.is-tog .pg-pts li { animation-delay: calc(0.15s + var(--i) * 0.22s); }
  .js .pg-fig.is-tog .pg-next { animation-delay: 0.85s; }
  .js .pg-fig--jy.is-tog .pg-jy__col { animation-delay: 0s; animation-duration: 0.3s; }
  .js .pg-fig--jy.is-tog .pg-jy__a { animation-delay: calc(0.15s + var(--n, 0) * 0.12s); }
}
@keyframes pgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pgPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes pgDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes pgSlide { from { left: 0; opacity: 0; } 20% { opacity: 1; } to { left: calc(var(--at) * 100%); opacity: 1; } }
@media (max-width: 999px) {
  .pg-bar { flex-wrap: wrap; }
  .pg-pair { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .pg-tl { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding: 0 0 0 26px; }
  .pg-tl::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, #FB9D00, #FF00AA 50%, #5100FF); transform-origin: center top; }
  .pg-tl li::before { left: -26px; top: 2px; }
  .js .pg-fig.is-in .pg-tl::before { animation-name: pgDrawY; }
}
@keyframes pgDrawY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* small phones (French and Spanish run longer): the two switch buttons share the row or take one each, and an answer
   goes under its label instead of pushing the figure wider than the screen */
@media (max-width: 760px) { .pg-fig { margin-inline: 0; } }   /* a figure's default 40px side margins cost a phone a fifth of its width */
@media (max-width: 480px) {
  .pg-tog { display: flex; flex-wrap: wrap; width: 100%; }
  .pg-tog__b { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  .pg-jy__a { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .pg-jy__a .vf2-a { white-space: normal; }
}

/* ---- what you get: labelled groups of insights, or a table */
.pg-groups { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--s-4); }
.pg-groups--2 { --n: 2; } .pg-groups--3 { --n: 3; } .pg-groups--4 { --n: 4; }
.pg-group { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-5); border-radius: 20px; background: var(--c-panel); }
.pg-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); }
.pg-group__tag { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-accent-ink); }
.pg-group ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.pg-group li { position: relative; padding-left: 26px; font-size: var(--fs-body); line-height: 1.4; color: var(--c-ink-2); }
.pg-group li::before { content: ""; position: absolute; left: 2px; top: 0.3em; width: 14px; height: 14px; border-radius: 50%; background: var(--c-accent-soft) url("/assets/img/css/77ea38d04e.svg") center / 10px no-repeat; }
.pg-group--ni { background: var(--c-tint-violet); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.12); }
.pg-group__ex { margin: var(--s-2) 0 0; padding-top: var(--s-3); border-top: 1px solid rgba(81, 0, 255, 0.14); font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
@media (max-width: 960px) { .pg-groups { grid-template-columns: repeat(min(var(--n, 2), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .pg-groups { grid-template-columns: minmax(0, 1fr); } }
.pg-tw { overflow-x: auto; border-radius: 20px; box-shadow: 0 0 0 1px var(--c-line); }
.pg-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--fs-body); line-height: 1.45; }
.pg-table th, .pg-table td { padding: 14px 20px; text-align: left; vertical-align: top; border-top: 1px solid var(--c-line); }
.pg-table thead th, .pg-table thead td { border-top: 0; background: var(--c-panel); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink-2); }
.pg-table tbody th { width: 24%; font-weight: var(--fw-bold); color: var(--c-ink); }
.pg-table td { color: var(--c-ink-2); }
.pg-table--cmp td, .pg-table--cmp thead th { width: 38%; }
.pg-table--cmp .is-us { background: var(--c-tint-violet); color: var(--c-ink); }
.pg-table--cmp thead .is-us { background: #EDE6FF; color: var(--c-accent-ink); }
.pg-table--cmp tbody td.is-us { font-weight: var(--fw-medium); }

/* ---- why: claim tiles */
.pg-claims { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; }
.pg-claims li { display: grid; align-content: start; gap: 8px; padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.pg-claims strong { font-size: var(--fs-h4); line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); text-wrap: balance; }
.pg-claims span { font-size: var(--fs-body); line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; }
.pg-claims--4 { --cols: 2; }
.pg-claims--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pg-claims--5 li { grid-column: span 2; }
.pg-claims--5 li:nth-child(n + 4) { grid-column: span 3; }
.pg-claims--6 { --cols: 3; }
@media (max-width: 960px) { .pg-claims, .pg-claims--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-claims--5 li, .pg-claims--5 li:nth-child(n + 4) { grid-column: auto; } }
@media (max-width: 600px) { .pg-claims, .pg-claims--5 { grid-template-columns: minmax(0, 1fr); } }

/* v68b (Eva, 4 Nov: "maybe slightly more contrast between sections so we don't get bored"): the why section becomes
   the page's one deep band, as on the homepage, with its claims as quiet glass tiles; the rest keeps the light rhythm
   (gray, white) and the closing card stays dark */
.section.pg-why { position: relative; isolation: isolate; overflow: hidden; background: var(--c-ink-deep); color: var(--c-on-ink); }
.section.pg-why::before, .section.pg-why::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.section.pg-why::before { top: -260px; right: -160px; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(81, 0, 255, 0.42), rgba(81, 0, 255, 0)); }
.section.pg-why::after { bottom: -300px; left: -200px; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(255, 0, 170, 0.2), rgba(255, 0, 170, 0)); }
.pg-why .sec-head h2 { color: #fff; }
.pg-why .sec-head .lead { color: var(--c-on-ink-muted); }
.pg-why .pg-claims li { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.pg-why .pg-claims strong { color: #fff; }
.pg-why .pg-claims span { color: var(--c-on-ink-muted); }
.pg-why :focus-visible { outline-color: #fff; }
@media (forced-colors: active) { .section.pg-why::before, .section.pg-why::after { display: none; } }
/* the KYC pages have no story section, so their FAQ follows the gray "Use it for" directly: white there */
.section.pg-fit + .section.pg-faq { background: var(--c-ground); }

/* ---- use it for, and combine it with */
.pg-fit__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--s-8); align-items: start; }
.pg-fit h2 { margin: 0; font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.02em; font-weight: var(--fw-heavy); }
.pg-fit .lead { margin: var(--s-2) 0 var(--s-5); font-size: var(--fs-body); color: var(--c-ink-2); }
.pg-uses { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.pg-uses li { border-bottom: 1px solid var(--c-line); }
.pg-uses li > span, .pg-uses a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 56px; padding-block: 12px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--c-ink); }
.pg-uses li > span { font-weight: var(--fw-medium); color: var(--c-ink-2); }
.pg-uses a svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-muted); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.pg-uses a:hover { color: var(--c-accent-ink); text-decoration: none; }
.pg-uses a:hover svg { transform: translateX(4px); color: var(--c-accent); }
.pg-works .vf2-pair { padding-block: 14px; }
@media (max-width: 900px) { .pg-fit__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); } }

/* ---- the customer story and the FAQ */
.pg-story .ind2-stories--solo { margin-top: 0; }
.pg-faq .faq5__head h2 { font-size: var(--fs-display-2); }
.pg-cta { padding-block: var(--section-y); }
.fam-card__tag { margin-left: 10px; font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: 0; color: var(--c-muted); }
.fam-clean .pg-table tbody th { width: 22%; }
.pg-table--cmp thead td { width: 24%; }
.pg-uses a, .pg-uses a:hover, .pg-more a { text-decoration: none; }
.pg-more a:hover span, .pg-more a:hover { color: var(--c-accent); }
.rflow__get--ok .rflow__score em { color: var(--c-accent-ink); }

/* v68 homepage (brief: 7 sections, 900–1,000 words): why now, the engine and the map as one line and a link each,
   under the four tiles; the industries one click from the use cases; the data policy beside the certifications */
.why4__more { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: var(--s-6) 0 0; padding: 0; border-block: 1px solid var(--c-line); }
.why4__more li + li { border-left: 1px solid var(--c-line); }
.why4__more a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); align-items: center; height: 100%; padding: var(--s-4) var(--s-5); color: var(--c-ink); text-decoration: none; transition: background-color var(--dur-1) var(--ease); }
.why4__more li:first-child a { padding-left: 0; }
.why4__more a:hover { background: var(--c-tint-violet); }
.why4__more strong { display: block; font-size: var(--fs-body); font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.why4__more span { display: block; grid-column: 1; font-size: var(--fs-small); color: var(--c-muted); }
.why4__more svg { grid-row: 1 / span 2; grid-column: 2; width: 18px; height: 18px; color: var(--c-muted); transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.why4__more a:hover svg { transform: translateX(4px); color: var(--c-accent); }
@media (max-width: 860px) {
  .why4__more { grid-template-columns: minmax(0, 1fr); }
  .why4__more li + li { border-left: 0; border-top: 1px solid var(--c-line); }
  .why4__more a, .why4__more li:first-child a { padding-inline: 0; }
}
.sol__foot { justify-content: space-between; }
.sol__ind { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.sol__ind svg { width: 15px; height: 15px; transition: transform var(--dur-1) var(--ease); }
.sol__ind:hover svg { transform: translateX(4px); }
.poc8__data { margin: var(--s-3) 0 0; font-size: var(--fs-small); line-height: 1.45; color: var(--c-on-ink-muted, rgba(255, 255, 255, 0.72)); max-width: 36ch; }
/* v68 coverage: a gray placeholder for the lists the product pages point to (KYC markets, expected hit rates) */
.cov-ph { display: grid; gap: 2px; margin: var(--s-2) 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--c-line-strong); background: repeating-linear-gradient(135deg, var(--c-panel) 0 8px, #EEEEF3 8px 16px); font-size: var(--fs-small); color: var(--c-ink-2); }
.cov-ph span { font-size: 0.75rem; font-weight: var(--fw-bold); color: var(--c-muted); }
.sol__more { margin: var(--s-5) 0 0; text-align: center; }
.sol__foot { justify-content: flex-end; }
.pc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 1100px) { .pc-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 920px; } }

/* v68c — the stories outside Ravish's brief, in gray (Eva, 4 Nov: "put the ones not asked by Ravish in the brief in
   grey"): the photo in gray, the figure and the words muted, a dashed outline and one short label, as on the other
   gray placeholders; still a link, so the team can read them */
.cu-card__gray, .st2-gray { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-muted); }
.cu-card__gray::before, .st2-gray i { content: ""; flex: 0 0 auto; display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed currentColor; }
.cu-card--gray { box-shadow: none; border: 1.5px dashed var(--c-line-strong); background-color: var(--c-panel); background-image: repeating-linear-gradient(135deg, rgba(133, 133, 150, 0.07) 0 1px, transparent 1px 9px); }
.cu-card--gray:hover { box-shadow: var(--shadow-float); }
.cu-card--gray .cu-card__media img { filter: grayscale(1); opacity: 0.55; }
.cu-card--gray :is(.cu-card__k, .cu-card__name, .cu-card__title, .cu-card__key > span) { color: var(--c-muted); }
.cu-card--gray .cu-card__key strong { background-image: none; -webkit-text-fill-color: currentColor; color: var(--c-muted); }
.cu-card--gray .cu-card__go { color: var(--c-ink-2); }
.cu-card--gray .cu-card__key { border-top-color: var(--c-line-strong); border-top-style: dashed; }
.cu-pin.is-gray { --kc: var(--c-line-strong); }
.cu-pin.is-gray .cu-pin__pulse { animation: none; }
.cu-ix.is-gray :is(.cu-ix__n, .cu-ix__t strong) { color: var(--c-muted); }
.cu-ix.is-gray .cu-ix__t strong { font-weight: var(--fw-bold); }
.mm-sg__a--gray .mm-sg__t strong, .mm-sg__a--gray .mm-sg__t span { color: var(--c-muted); }
.mm-sg__a--gray .mm-sg__t strong { font-weight: var(--fw-medium); }
.mm-link--gray { color: var(--c-muted); }
.mm-link--gray :is(strong, span, .mm-label) { color: var(--c-muted); }
.st2-hero--gray .st2-hero__img { filter: grayscale(1); }
.st2-hero--gray .st2-gray { color: rgba(255, 255, 255, 0.82); }
:is(.ind2-proof, .uc2-proof).is-gray b { background-image: none; -webkit-text-fill-color: currentColor; }
.ind2-proof.is-gray b { color: rgba(255, 255, 255, 0.7); }
.uc2-proof.is-gray b, .uc2-proof.is-gray span { color: var(--c-muted); }
:is(.ind2-proof, .uc2-proof) .cu-card__gray { flex-basis: 100%; }
.ind2-proof .cu-card__gray { color: rgba(255, 255, 255, 0.72); }
.art-rel__a.is-gray { box-shadow: none; border: 1.5px dashed var(--c-line-strong); background: var(--c-panel); }
.art-rel__a.is-gray .art-rel__n { background-image: none; -webkit-text-fill-color: currentColor; color: var(--c-muted); }
.art-rel__a.is-gray :is(.art-rel__l, .art-rel__w) { color: var(--c-muted); }
.art-rel__a .cu-card__gray { margin-top: 4px; }

/* v68c — Phone and Email: the brief's hero line for Network Intelligence, under the lead */
.pg-hero__ni { display: flex; align-items: flex-start; gap: 10px; max-width: 62ch; margin: calc(-1 * var(--s-1)) 0 var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.45; color: var(--c-ink-2); }
.pg-hero__ni svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--c-accent); }
/* v68c — every product page links to How Monnai works (brief: "Product pages carry only what is true of that product,
   plus a link here") */
.pg-fit__more { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); font-weight: var(--fw-bold); color: var(--c-accent-ink); text-decoration: none; }
.pg-fit__more svg { width: 16px; height: 16px; transition: transform var(--dur-1) var(--ease); }
.pg-fit__more:hover { color: var(--c-accent); text-decoration: none; }
.pg-fit__more:hover svg { transform: translateX(4px); }
.tst-trust__data { margin: var(--s-3) 0 0; text-align: center; font-size: var(--fs-small); color: var(--c-muted); }

/* v68c — Integration and Trust & security (Eva, 4 Nov: "those pages are still missing"). The hero's right column
   holds what the page is about instead of an illustration: an illustrative request, or the data policy at a glance */
.int-code { margin: 0; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--c-ink-deep); color: #E9E6FF; box-shadow: var(--shadow-float); }
.int-code__bar { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.int-code__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.int-code__bar span { margin-left: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-micro); color: rgba(255, 255, 255, 0.66); }
.int-code__pre { margin: 0; padding: var(--s-5) var(--s-5) var(--s-4); overflow-x: auto; font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7; color: #E9E6FF; white-space: pre; tab-size: 2; }
.int-code__pre code { font: inherit; color: inherit; }
.int-code__pre .k { color: #B9A6FF; }
.int-code__pre .s { color: #FFD08A; }
.int-code__cap { padding: 0 var(--s-5) var(--s-5); font-size: var(--fs-small); color: rgba(255, 255, 255, 0.66); }
.int-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.int-steps li { position: relative; }
.int-steps__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-tint-violet); color: var(--c-accent); }
.int-steps__i svg { width: 22px; height: 22px; }
.int-steps .tst-steps__n { position: absolute; top: var(--s-4); right: 0; }
.int-steps p { margin: 0; color: var(--c-ink-2); }
@media (max-width: 1000px) { .int-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .int-steps { grid-template-columns: minmax(0, 1fr); } }
.int-live__list { margin-top: var(--s-2); }
.int-test, .trs-test { padding-block: var(--s-2) var(--s-6); }
.trs-card { margin: 0; min-width: 0; padding: var(--s-6); border-radius: 26px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.trs-card__list { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.trs-card__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-4); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-2); }
.trs-card__list li:first-child { padding-top: 0; }
.trs-card__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.trs-card__list strong { display: block; font-size: var(--fs-h4); line-height: 1.2; font-weight: var(--fw-heavy); letter-spacing: -0.015em; color: var(--c-ink); }
.trs-card__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-tint-violet); color: var(--c-accent); }
.trs-card__i svg { width: 22px; height: 22px; }
.trs-facts { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.trs-facts li { display: grid; grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr); gap: var(--s-4); align-items: baseline; padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.trs-facts__k { font-weight: var(--fw-bold); color: var(--c-ink); }
.trs-facts__v { display: flex; gap: 10px; align-items: baseline; color: var(--c-ink-2); }
.trs-facts__v svg { flex: 0 0 auto; width: 16px; height: 16px; transform: translateY(2px); color: var(--c-accent); }
.trs-facts__ph { background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(133, 133, 150, 0.07) 9px 10px); }
.trs-facts__ph .trs-facts__k, .trs-facts__ph .trs-facts__v { color: var(--c-muted); }
.trs-facts__ph .trs-facts__v { display: block; }
@media (max-width: 900px) { .trs-facts { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .trs-facts li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .trs-card { padding: var(--s-5); } }

/* v69 (Eva: "we can put new here"): the AI agents tab says New, as Agent Pass does in the Products menu (a word and a dot,
   no pill) */
.sol__new { display: inline-flex; align-items: center; gap: 6px; margin-left: 2px; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: #C2007F; }
.sol__new i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #FB9D00, #FF00AA); box-shadow: 0 0 0 3px rgba(255, 0, 170, 0.18); }
.sol__tab[aria-selected="true"] .sol__new { color: #FFB8EC; }

/* v69 — Products menu (Eva: "too much white below, and things are not aligned in a UX way"): three family columns and
   the Agent Pass card; each family lists its products one under the other, every row the same height, every list
   starting on the same line (the questions under the titles keep two lines); Risk Score closes the consumer family;
   How it fits fills the space under Business Risk Intelligence */
.mm-panel--tiles .mm-flat--prod { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s-6); }
.mm-flat__groups--prod, .mm-panel--tiles .mm-flat__groups--prod { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-6); row-gap: 0; padding-right: 0; align-items: start; }
.mm-flat__groups--prod .mm-col { display: grid; align-content: start; gap: var(--s-4); min-width: 0; }
.mm-flat__groups--prod .mm-g > .mm-h { margin-bottom: 2px; padding-bottom: 0; border-bottom: 0; }
.mm-flat__groups--prod .mm-desc { display: block; min-height: 2.8em; margin: 0 0 var(--s-2); padding: 0; border: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--c-muted); }
.mm-flat__groups--prod .mm-g__list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.mm-flat__groups--prod .mm-link--tile { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 52px; }
.mm-panel--tiles .mm-flat__groups--prod .mm-g__list .mm-link { padding: 6px 10px; margin-inline: -10px; }
.mm-flat__groups--prod .mm-ico { width: 36px; height: 36px; border-radius: 10px; }
.mm-flat__groups--prod .mm-ico svg { width: 18px; height: 18px; }
.mm-flat__groups--prod .mm-line { font-size: 0.8125rem; line-height: 1.35; }
.mm-flat__groups--prod :is(.mm-g--rs, .mm-g--fits) { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.mm-flat__groups--prod .mm-g--fits > .mm-h { margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.mm-panel--tiles .mm-flat__groups--prod .mm-g--fits .mm-link { min-height: 0; padding-block: 5px; }
.mm-flat__groups--prod .mm-g--fits .mm-line { display: none; }
.mm-flat--prod .mm-side { align-self: start; }
@media (max-width: 1200px) { .mm-panel--tiles .mm-flat--prod { grid-template-columns: minmax(0, 1fr) 260px; } .mm-flat__groups--prod, .mm-panel--tiles .mm-flat__groups--prod { column-gap: var(--s-5); } }

/* v70 (Pierre, 2 Nov, on the planned pages: "add content and visuals"): the API documentation preview shows the
   Integration page's illustrative request under its lead */
.next-code { max-width: 640px; margin: var(--s-6) 0 0; }

/* v70 (Pierre: "highlight more the insights coming from network intelligence"): the Network label in the homepage examples */
.ins__fam--net { background: var(--c-tint-violet); color: var(--c-accent-ink); box-shadow: inset 0 0 0 1px var(--c-accent-soft); }

/* v71 (Eva, 4 Nov: How it fits under Business Risk Intelligence "feels included into" it): How it fits gets a column of
   its own, its title in gray so it reads as the platform, not a fourth family; Business Risk Intelligence sits under
   Identity Verification, after a hairline like Risk Score's */
.mm-flat__groups--prod .mm-col--fits .mm-g--fits { padding-top: 0; border-top: 0; }
.mm-flat__groups--prod .mm-col--fits .mm-g--fits > .mm-h { margin-bottom: 2px; font-size: var(--fs-h4); font-weight: var(--fw-heavy); color: var(--c-muted); }

.mm-flat__groups--prod .mm-g--bri { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
/* v71 (Eva: "this coming soon mention is weird"): a quiet status under the name, an open dot and the words */
.mm-soon { display: inline-flex; align-items: center; gap: 6px; color: var(--c-muted); }
.mm-soon i { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }

/* v71 (Eva: "remove the grey success stories… keep the points on the map… with a preview of what is it… just to show
   scale"): smaller dots without a number for the customers without a story; hover or focus shows who they are */
.cu-map { position: relative; }
.cu-pin--scale { cursor: default; outline: none; }
.cu-pin--scale .cu-pin__dot { fill: var(--kc); opacity: 0.5; stroke-width: 2; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.cu-pin--scale:is(:hover, :focus-visible, .is-on) .cu-pin__dot { opacity: 1; transform: scale(1.35); }
.cu-pin--scale:focus-visible .cu-pin__dot { stroke: var(--c-accent); stroke-width: 3; }
.cu-glance__grid.has-hl .cu-pin--scale { opacity: 0.16; }
.cu-tip { position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 260px; padding: 10px 14px; border-radius: 12px; background: var(--c-ink); color: var(--c-on-ink); box-shadow: 0 10px 30px rgba(14, 10, 40, 0.22); pointer-events: none; font-size: var(--fs-small); line-height: 1.35; }
.cu-tip strong { font-weight: var(--fw-bold); }
.cu-tip span { color: rgba(255, 255, 255, 0.72); }
.cu-tip[hidden] { display: none; }
.cu-map__key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
.cu-map__key span { display: inline-flex; align-items: center; gap: 8px; }
.cu-map__key i { width: 12px; height: 12px; border-radius: 50%; background: var(--c-kind-bank); }
.cu-map__key i.k-scale { width: 9px; height: 9px; opacity: 0.5; }

/* v71 (Eva, 4 Nov: "blocks should have the same sizes"): story cards in a row share one height; the result and "Read the
   story" sit at the bottom of every card, the figure always above its words */
.cu-grid { align-items: stretch; }
.cu-grid > .cu-card { height: 100%; }
.cu-card__body { display: flex; flex-direction: column; gap: var(--s-2); }
.cu-card__key { display: grid; justify-items: start; gap: var(--s-2); margin-top: auto; }
.cu-card__key > span { flex: none; }
.cu-card__k + .cu-card__name, .cu-card__name + .cu-card__title { margin-top: 0; }
.cu-card__title + .cu-card__key { margin-top: auto; }
.cu-card__body > .cu-card__title { margin-bottom: var(--s-3); }
.ind2-stories--solo .cu-card__body { justify-content: center; }
.ind2-stories--solo .cu-card__key { margin-top: var(--s-2); }

/* v71 (Eva, 4 Nov: "the certifications here are good but look packed"): more air around and between the three */
.tst-trust { padding-block: var(--s-8); }
.tst-trust .cert3 { row-gap: var(--s-5); }
.tst-trust .cert3 li { gap: 14px; padding-inline: clamp(1.75rem, 1rem + 3vw, 4rem); }
.tst-trust .cert3 li:first-child { padding-left: 0; }
.tst-trust .cert3 li:last-child { padding-right: 0; }
.tst-trust .cert3__t { gap: 4px; }
.tst-trust .tst-trust__data { margin-top: var(--s-6); }
@media (max-width: 720px) { .tst-trust { padding-block: var(--s-6); } .tst-trust .cert3 li { padding-inline: 0; } }

/* v71 (Eva, 4 Nov: "we want to choose not to type… those forms need to have the most perfect UX… if we don't want drop
   off"): one tap per answer, every field the same height, the same corners, the same focus ring */
.tst-form :is(.input, .select) { height: 50px; min-height: 50px; padding: 0 14px; font-size: 1rem; line-height: 1.2; border-radius: var(--r-2); }
.tst-form .select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("/assets/img/css/b1e13cb707.svg"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; cursor: pointer; }
.tst-form .select:invalid { color: var(--c-muted); }
.tst-form .select option { color: var(--c-ink); }
.tst-form .field-row { align-items: start; }
.field--opts { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: var(--s-2); }
.field--opts legend { float: left; width: 100%; margin: 0 0 var(--s-2); padding: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); }
.field--opts legend .hint { margin-left: 6px; font-weight: var(--fw-regular); color: var(--c-muted); }
.field--opts .opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.opt { position: relative; display: inline-flex; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1.5px solid var(--c-line-strong); border-radius: var(--r-2); background: var(--c-ground); color: var(--c-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.2; transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.opt input[type="checkbox"] + span::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--c-line-strong); border-radius: 4px; background: var(--c-ground) center / 10px 8px no-repeat; }
.opt input[type="radio"] + span::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1.5px solid var(--c-line-strong); border-radius: 50%; background: var(--c-ground); }
.opt:hover span { border-color: var(--c-accent); }
.opt input:checked + span { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-ink); }
.opt input[type="checkbox"]:checked + span::before { border-color: var(--c-accent); background-color: var(--c-accent); background-image: url("/assets/img/css/0ad145e5e6.svg"); }
.opt input[type="radio"]:checked + span::before { border-color: var(--c-accent); box-shadow: inset 0 0 0 3.5px var(--c-ground); background: var(--c-accent); }
.opt input:focus-visible + span { outline: var(--stroke-focus) solid var(--c-accent); outline-offset: 2px; }
.field--opts.is-invalid .opt span { border-color: var(--c-status-decline); }
/* v71: the status dot, filled and spaced (an open ring read as the letter "o") */
.mm-tx .mm-line.mm-soon { display: flex; align-items: center; gap: 7px; }
.mm-tx .mm-soon i { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border: 0; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* v71b (Eva: "those links under How it fits should look as product and be a bit more separated"): the same tiles as the
   products, with icons, in a column set apart by a hairline */
.mm-flat__groups--prod .mm-col--fits { padding-left: var(--s-5); border-left: 1px solid var(--c-line); }
.mm-panel--tiles .mm-flat__groups--prod .mm-col--fits .mm-g--fits .mm-link { min-height: 52px; padding-block: 6px; }

/* v71b (Eva: "too much white on the right"): the Customers menu with two kinds: intro, the two lists, the featured story */
.mm-stories--v8.mm-stories--two { grid-template-columns: minmax(200px, 0.8fr) minmax(0, 2.2fr) minmax(260px, 1.05fr); gap: var(--s-6); }
.mm-stories--two .mm-sgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mm-stories--two .mm-sfeat { min-height: 260px; }
@media (max-width: 1200px) { .mm-stories--v8.mm-stories--two { grid-template-columns: minmax(180px, 0.8fr) minmax(0, 2.6fr); } }

/* v71c (Eva, 4 Nov: "maybe the how it fits should go bottom right ... to keep the three families visible in the menu";
   "maybe horizontally all along at the menu bottom?"; then "this need to be aligned in 3 clear distincts proper
   organized columns. the how it fits is either not there either way more discrete"): the three families in three
   columns of their own (the consumer family with Risk Score; Identity Verification; Business Risk Intelligence), set
   apart by hairlines, every row on the same line across the columns; the Agent Pass card on the right as before; and How
   it fits as one quiet line of plain links along the bottom, under a hairline, no icons. Family columns keep their v69
   widths. */
.mm-flat--bar > .mm-flat__groups--prod { align-items: stretch; padding-bottom: var(--s-5); }
.mm-flat--bar .mm-flat__groups--prod > .mm-col { position: relative; align-content: start; }
.mm-flat--bar .mm-flat__groups--prod > .mm-col + .mm-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--s-6) / -2); border-left: 1px solid var(--c-line); }
.mm-flat--bar .mm-flat__groups--prod .mm-g--bri { padding-top: 0; border-top: 0; }
.mm-flat--bar .mm-flat__groups--prod .mm-desc { min-height: 0; margin-bottom: var(--s-3); }
/* rows on the same lines: every tile one height, its name at the same place whether or not a short line follows */
.mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-g__list .mm-link--tile { align-items: start; height: 56px; min-height: 0; padding-block: 5px; }
.mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-link--tile .mm-ico { margin-top: 0; }
.mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-link--tile .mm-tx { padding-top: 7px; }
/* How it fits: one quiet line along the bottom */
.mm-fitsbar { grid-column: 1 / -1; min-width: 0; padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--c-line); }
.mm-fitsbar .mm-g--fits { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-5); padding: 0; border: 0; }
.mm-panel .mm-fitsbar .mm-g--fits .mm-h { flex: 0 0 auto; width: auto; margin: 0; padding: 0; border: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0; text-transform: none; color: var(--c-muted); }
.mm-fitsbar .mm-g__list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0; }
.mm-panel--tiles .mm-fitsbar .mm-link { display: inline; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; }
.mm-panel .mm-fitsbar .mm-label { font-size: var(--fs-small); font-weight: var(--fw-medium, 500); color: var(--c-ink); }
.mm-panel--tiles .mm-fitsbar .mm-link:is(:hover, :focus-visible) { background: none; }
.mm-panel--tiles .mm-fitsbar .mm-link:is(:hover, :focus-visible) .mm-label, .mm-fitsbar .mm-link[aria-current="page"] .mm-label { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.mm-fitsbar .mm-label::after { display: none; }
/* a family title that is a link shows its hover arrow outside the line, so the arrow never pushes the title onto a
   second line in a narrow column */
.mm-flat--bar a.mm-h { position: relative; }
.mm-flat--bar a.mm-h::after { position: absolute; top: 50%; left: 100%; margin-left: 6px; transform: translate(-4px, -50%); }
.mm-flat--bar a.mm-h:is(:hover, :focus-visible)::after { transform: translate(0, -50%); }
/* narrower desktop windows (1101 to 1279 px; the menu is mobile below): a narrower Agent Pass card, then tighter tiles,
   so every line still fits on one line in English, French and Spanish */
@media (max-width: 1279px) { .mm-panel--tiles .mm-flat--prod.mm-flat--bar { grid-template-columns: minmax(0, 1fr) 260px; } }
@media (max-width: 1200px) {
  .mm-panel--tiles .mm-flat--prod.mm-flat--bar { grid-template-columns: minmax(0, 1fr) 240px; column-gap: var(--s-5); }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod { column-gap: 20px; }
  .mm-flat--bar .mm-flat__groups--prod > .mm-col + .mm-col::before { left: -10px; }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-link--tile { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-ico { width: 32px; height: 32px; }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-link--tile .mm-tx { padding-top: 6px; }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-label { font-size: 1rem; }
  .mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-desc { font-size: 0.875rem; }
}

/* v71d (Pierre, 4 Nov; Eva, 5 Nov): Our story. The hero's second paragraph (what Monnai specializes in) under the lead;
   the timeline gives way to a light, neutral band: "Backed by", the investors' names where their logos will go, and
   each round's figure */
.story-hero__more { max-width: 62ch; margin: var(--s-3) auto 0; font-size: var(--fs-body); line-height: 1.6; color: var(--c-muted); }
.section.inv-band { padding-block: clamp(32px, 4vw, 52px); }
.inv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4) var(--s-7); }
.inv__t { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0; color: var(--c-muted); }
.inv__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) clamp(32px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.inv__item { display: grid; gap: 2px; }
.inv__logo { font-size: 1.5rem; font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.15; color: var(--c-ink); opacity: 0.78; }
.inv__fig { font-size: var(--fs-small); color: var(--c-muted); }
.inv__note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 720px) { .inv { grid-template-columns: minmax(0, 1fr); } }

/* v71d (Pierre, 4 Nov: five investors and the $20M raised): the figure leads into the five names, "$20M raised, backed
   by…", in one row on laptop and wider screens; the head above the names on tablets; two columns on phones */
.inv--five { gap: var(--s-4) clamp(40px, 4vw, 64px); }
.inv--five .inv__t { max-width: 11em; text-wrap: balance; }
.inv__t .inv__total { display: block; margin-bottom: 2px; font-size: 2rem; font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1.05; color: var(--c-ink); }
.inv--five .inv__list { flex-wrap: nowrap; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.inv--five .inv__logo { font-size: 1.375rem; white-space: nowrap; }
@media (max-width: 1359px) { .inv--five .inv__logo { font-size: 1.25rem; } }
@media (max-width: 1239px) { .inv--five { grid-template-columns: minmax(0, 1fr); } .inv--five .inv__t { max-width: none; } .inv--five .inv__list { flex-wrap: wrap; justify-content: flex-start; gap: var(--s-3) clamp(32px, 5vw, 56px); } }
@media (max-width: 720px) { .inv--five .inv__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-5); } .inv--five .inv__logo { font-size: 1.125rem; white-space: normal; } }

/* v71d (Eva, 5 Nov): Credit risk's coverage line in her words, the figure inside the sentence, the source after it */
.uc2-proof--line span { font-size: var(--fs-body); line-height: 1.45; color: var(--c-ink); }
.uc2-proof--line span b { font-size: inherit; line-height: inherit; letter-spacing: 0; }

/* v71f (Eva, 5 Nov: "we want their logos"): investor logos, once their files are in assets/img/investors/, in one neutral gray */
.inv__img { display: block; height: 30px; width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1) brightness(0.35); opacity: 0.8; }
@media (max-width: 720px) { .inv__img { height: 24px; max-width: 140px; } }

/* v71g (Pierre, 4 Nov; Eva, 5 Nov: "Add a strip of 3 numbers under each product hero"): three short facts under the
   hero's button, split by hairlines, the number first in the brand gradient; one per line when the copy column is narrow
   (tablets, phones, and the longer French and Spanish lines) */
.pg-stats-w { container-type: inline-size; display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-2); }
.pg-stats-w .gap { margin-left: 0; }
.pg-stats { list-style: none; justify-self: stretch; max-width: 38rem; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--c-line); }
.pg-stats li { min-width: 0; padding: 0 var(--s-5); border-left: 1px solid var(--c-line); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.35; color: var(--c-ink); text-wrap: balance; }
.pg-stats li:first-child { padding-left: 0; border-left: 0; }
.pg-stats b { white-space: nowrap; font-weight: var(--fw-heavy); background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
@container (max-width: 34rem) {
  .pg-stats { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding-top: var(--s-3); }
  .pg-stats li { padding: 0; border-left: 0; }
}
@media (forced-colors: active) { .pg-stats b { -webkit-text-fill-color: currentColor; background: none; } }

/* v71g (Eva, 5 Nov: the five logo files she sent): each logo sized by its visual weight rather than one height (a long
   wordmark lower, a stacked logo taller), all in the band's one neutral gray */
.inv__img { width: auto; height: auto; max-width: 100%; max-height: var(--h, 30px); }
.inv__img--motive-partners { --h: 15px; }
.inv__img--tiger-global { --h: 21px; }   /* v71k (6 Nov): Eva’s sharper file (830 × 88), the same width on the page as before */
.inv__img--commerce-ventures { --h: 36px; }
.inv__img--better-tomorrow-ventures { --h: 60px; }
.inv__img--500-global { --h: 34px; }   /* v71k (6 Nov, Pierre: “a bit too big compared to the other ones”; Eva: “true”) */
@media (max-width: 720px) { .inv__img { max-height: calc(var(--h, 30px) * 0.8); } }

/* v71i (Pierre: "show gambling… can we show more breadth?"; Eva, 5 Nov: "Show 20+ categories as chips"): Digital
   Footprint's 22 kinds of apps as quiet chips (rounded corners, sentence case), found ones tinted with a small brand
   mark, missing ones outlined and struck through; the same order in both examples so the toggle shows what changes */
.pg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.pg-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 10px; font-size: 0.8125rem; line-height: 1.25; font-weight: var(--fw-medium); color: var(--c-ink); background: var(--c-tint-violet); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.18); }
.pg-chip.is-on::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 3px; background: linear-gradient(135deg, #5100FF, #A100FF); }
.pg-chip.is-off { color: var(--c-muted); background: transparent; box-shadow: inset 0 0 0 1px var(--c-line); text-decoration: line-through; text-decoration-color: var(--c-line-strong); }
@media (max-width: 560px) { .pg-chips { gap: 6px; } .pg-chip { padding: 5px 9px; font-size: 0.75rem; } }
@media (prefers-reduced-motion: no-preference) { .js .pg-fig.is-in .pg-chip { animation: pgPop 0.35s var(--ease) both; animation-delay: calc(0.3s + var(--i) * 0.03s); } }
@media (forced-colors: active) { .pg-chip { border: 1px solid CanvasText; } }

/* v71i (Pierre: "add a section for agents"; Eva: "…under KYA main menu"): the Use cases menu gets a fourth heading, AI
   agents, set under Credit (the shortest column) after a hairline; Fraud and Identity keep their full columns */
.mm-flat__groups--uc4 { grid-template-rows: auto 1fr; }
.mm-flat__groups--uc4 > .mm-g { align-self: start; }
.mm-flat__groups--uc4 > .mm-g:nth-child(2), .mm-flat__groups--uc4 > .mm-g:nth-child(3) { grid-row: span 2; }
.mm-flat__groups--uc4 > .mm-g:nth-child(4) { grid-column: 1; padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
/* v71i (Eva: "add a agent product in the menu! as another product"): Agent Pass as a product under Business Risk
   Intelligence, after a hairline like Risk Score's; its "New" is a plain word under the name */
.mm-flat--bar .mm-flat__groups--prod .mm-g--kya { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
.mm-flat__groups--prod .mm-g--kya .mm-desc { min-height: 0; }

/* v71j (Ravish's Mobile KYC case study): a story page with its own lead under the headline, its results market by
   market in a small table under the three figures, and sections that are short lists */
.st2-hero__p { max-width: 62ch; margin: var(--s-4) 0 0; font-size: var(--fs-lead); line-height: 1.5; color: rgba(255, 255, 255, 0.88); }
.st2-tw { margin-top: var(--s-6); }
.st2-tw .pg-table td { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
/* v71j: the story's results table fits a phone: the figures take narrow columns, the result line the rest */
.st2-tw .pg-table { min-width: 0; }
.st2-tw .pg-table tbody th { width: 56%; }
.st2-tw .pg-table thead th + th, .st2-tw .pg-table td { width: 22%; }
@media (max-width: 640px) {
  .st2-tw .pg-table th, .st2-tw .pg-table td { padding: 12px 14px; }
  .st2-tw .pg-table tbody th { width: auto; font-size: var(--fs-small); }
  .st2-tw .pg-table thead th + th, .st2-tw .pg-table td { width: 1%; }
  .st2-tw .pg-table td { white-space: nowrap; }
}
.st2-ul { display: grid; gap: var(--s-2); margin: 0; padding-left: 1.2em; }
.st2-ul li { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-2); }   /* v71k (Eva: “text shouldn't be smaller”): the same size as the story’s paragraphs */
.st2-ul li::marker { color: var(--c-accent); }
/* v71j (Eva: "maybe no bullet for the line and 16 more"): a quiet closing line under a group's list */
.pg-group__more { margin: var(--s-2) 0 0; padding-left: 26px; font-size: var(--fs-small); color: var(--c-muted); }

/* v71j (Eva, 5 Nov: "should we center it? or less lines around?"): How it fits keeps its left edge, in line with the
   columns above, but loses its hairline: a soft band along the bottom of the menu instead */
.mm-fitsbar { margin: var(--s-1) calc(-1 * var(--s-4)) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 0; border-radius: 12px; background: var(--c-panel); }

/* v71k (Eva, thread c74b0768: “looks like we only do it in 17 markets… convey it’s a case study”): a product page with
   one customer result shows it as a customer story card under the hero, not as a lone big figure */
.pg-proof--one .container { display: grid; }
.pg-one { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--s-5); align-items: center; padding: var(--s-3); border-radius: 24px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
a.pg-one:hover { box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.35), 0 22px 44px -30px rgba(40, 20, 120, 0.5); transform: translateY(-2px); color: var(--c-ink); text-decoration: none; }
.pg-one__img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; border-radius: 16px; }
.pg-one__body { display: grid; gap: var(--s-2); min-width: 0; padding-block: var(--s-2); padding-right: var(--s-4); }
.pg-one__body > * { margin: 0; }
.pg-one__k { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.01em; color: var(--c-accent-ink); }
.pg-one__k::before { content: ""; flex: 0 0 auto; width: 28px; height: 4px; border-radius: 2px; background: var(--gradient-brand); }
.pg-one__t { max-width: 46ch; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: var(--fw-heavy); text-wrap: balance; }
.pg-one__t strong { font-weight: inherit; background-image: var(--gradient-text-light); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--c-accent); }
@media (forced-colors: active) { .pg-one__t strong { -webkit-text-fill-color: currentColor; background: none; } }
.pg-one__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pg-one__foot > * { margin: 0; }
.pg-one__who { font-size: var(--fs-small); color: var(--c-muted); }
.pg-one__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.pg-one__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
a.pg-one:hover .pg-one__go svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .pg-one { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .pg-one__img { aspect-ratio: 16 / 9; }
  .pg-one__body { padding: 0 var(--s-2) var(--s-2); }
}
@media (prefers-reduced-motion: reduce) { .pg-one, .pg-one__go svg { transition: none; } a.pg-one:hover { transform: none; } a.pg-one:hover .pg-one__go svg { transform: none; } }

/* v71k (Eva, 5 Nov: “show wherever we touch on it that we can combine multiproduct in the same API… each product page
   need to claim that”): one line under every product hero’s button, the products it pairs with as small icons */
.pg-combo { display: inline-flex; align-items: center; justify-self: start; gap: 12px; margin-top: var(--s-1); color: var(--c-ink-2); text-decoration: none; }
.pg-combo__is { display: inline-flex; flex: 0 0 auto; }
.pg-combo__i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-tint-violet); color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-ground); }
.pg-combo__i + .pg-combo__i { margin-left: -8px; }
.pg-combo__i svg { width: 15px; height: 15px; }
.pg-combo__t { display: inline; margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.4; text-wrap: pretty; }
.pg-combo__t svg { display: inline-block; width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; color: var(--c-accent-ink); transition: transform var(--dur-2) var(--ease); }
.pg-combo:hover, .pg-combo:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.pg-combo:hover .pg-combo__t, .pg-combo:focus-visible .pg-combo__t { text-decoration: underline; text-underline-offset: 3px; }
.pg-combo:hover .pg-combo__t svg { transform: translateX(3px); }
#combine { scroll-margin-top: calc(var(--ann-now, 0px) + var(--hdr-h, 88px) + 24px); }
@media (prefers-reduced-motion: reduce) { .pg-combo__t svg { transition: none; } .pg-combo:hover .pg-combo__t svg { transform: none; } }

/* v71k (Eva, 5 Nov: “PR articles based on Pierre Demarche’s name”): Press, a line under Interviews and talks */
.pr__lead { margin-top: calc(-1 * var(--s-2)) !important; max-width: 62ch; color: var(--c-ink-2); }

/* v71k (Eva: “talk more first about the client and a small tag of global vs which market”): in the Customers menu, the
   client in bold, its market small and quiet under it (the existing small line style) */
.mm-sg__t .mm-sg__m { color: var(--c-muted); }

/* v71k (Eva, 5 Nov: “the icons are not centered”): in the Products menu, each icon sits in the middle of its row, for one
   line or two (the rows keep their fixed height, so they still line up across the columns) */
.mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-g__list .mm-link--tile { align-items: center; }
.mm-panel--tiles .mm-flat--bar .mm-flat__groups--prod .mm-link--tile .mm-tx { padding-top: 0; }

/* v71k: nine customer stories sit three by three on wide screens, with no card alone on the last row */
@media (min-width: 1101px) { .cu-stories .cu-grid.cu-grid--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* v71k late (Eva, on the first story taking a whole row: “this one doesn’t need to be bigger than other”): no featured
   story; every card the same size (the cu-grid--feat2 spans are gone) */

/* v71k (Eva, thread f4150826: “we want the preview when going on the pins a bit bigger.. thats small to read”): the map
   dots’ preview, larger type and more room */
.cu-tip { gap: 4px; min-width: 190px; max-width: 340px; padding: 14px 18px; border-radius: 14px; }
.cu-tip strong { font-size: 1.1875rem; line-height: 1.25; }
.cu-tip span { font-size: 1rem; line-height: 1.35; }

/* v71k late: the spread chart's words wrap inside their column (French and Spanish ran past the chart's edge, and past
   the page at 1101–1180 px in Spanish); a little more room for them */
.pc--range { --pc-v: 7.5rem; }
.pc--range .pc__v em { white-space: normal; text-wrap: balance; }

/* v71k late (Eva, 5 Nov: “why so much variations in font sizes… be consistent”): the Customers page keeps one small
   scale. 15 px for every small line (the index's focus lines, the card's market, the figure's label, Read the story),
   17 px for the story's sentence, 20 px for every name (the index and the cards alike), 28 px for the figures and the
   cards' numbers. */
.cu-glance .cu-index .cu-ix__t strong, .cu-stories .cu-card .cu-card__name { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; }
.cu-glance .cu-index .cu-ix__t span, .cu-stories .cu-card .cu-card__k, .cu-stories .cu-card .cu-card__key > span, .cu-stories .cu-card .cu-card__go { font-size: var(--fs-small); line-height: 1.4; }
.cu-stories .cu-card .cu-card__title { font-size: var(--fs-body); line-height: 1.45; }
.cu-stories .cu-card .cu-card__key strong { font-size: var(--fs-h3); letter-spacing: -0.03em; }
.cu-stories .cu-card .cu-card__n { font-size: var(--fs-h3); top: auto; bottom: var(--s-3); left: var(--s-4); transform: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
.cu-glance .cu-index .cu-ix__n { font-size: var(--fs-small); }

/* ============ v71k late: the Agent Pass launch (KYA), almost full screen ============
   Eva, 5 Nov: “a landing page type of pop up that takes almost the whole page to introduce the KYA as our new shiny
   stuff… it appears then gets closed or closes by itself… very futuristic, but aligned with the rest of the web”.
   The site's deep violet-black, its brand gradient and line icons; the agent at the center of what Agent Pass reads
   (person, business, transaction, context), checked one by one; a pass card; a countdown line (site.js, 14 s). */
html.kya-lock { overflow: hidden; }
.kya { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(7, 5, 26, 0.6); -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0; transition: opacity 0.45s var(--ease); }
.kya[hidden] { display: none; }
.kya.is-open { opacity: 1; }
.kya__panel { --kya-line: rgba(201, 166, 255, 0.2); --kya-lilac: #C9A6FF; position: relative; isolation: isolate; width: min(1320px, 100%); height: min(840px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; border-radius: 30px; color: var(--c-on-ink); background: var(--c-ink-deep);
  box-shadow: 0 0 0 1px rgba(143, 102, 255, 0.42), 0 30px 120px rgba(81, 0, 255, 0.45); outline: none;
  transform: translateY(24px) scale(0.965); transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); }
.kya.is-open .kya__panel { transform: none; }
.kya__aurora { position: absolute; inset: -20%; z-index: -2; pointer-events: none; filter: blur(12px);
  background: radial-gradient(36% 40% at 76% 32%, rgba(81, 0, 255, 0.6), transparent 70%), radial-gradient(28% 34% at 92% 88%, rgba(248, 27, 105, 0.38), transparent 70%),
    radial-gradient(26% 30% at 10% 96%, rgba(249, 158, 28, 0.22), transparent 70%), radial-gradient(40% 48% at 18% 8%, rgba(143, 102, 255, 0.2), transparent 70%);
  animation: kya-aurora 16s ease-in-out infinite alternate; }
@keyframes kya-aurora { to { transform: translate3d(-4%, 3%, 0) rotate(5deg) scale(1.08); } }
.kya__floor { position: absolute; left: -15%; right: -15%; bottom: -4%; height: 48%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--kya-line) 1px, transparent 1px), linear-gradient(90deg, var(--kya-line) 1px, transparent 1px); background-size: 56px 56px;
  transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 85%); mask-image: linear-gradient(to top, #000 8%, transparent 85%);
  animation: kya-floor 3.2s linear infinite; }
@keyframes kya-floor { to { background-position: 0 56px, 0 0; } }
.kya__stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6;
  background-image: radial-gradient(1.4px 1.4px at 8% 14%, #fff, transparent), radial-gradient(1px 1px at 22% 48%, #fff, transparent), radial-gradient(1.2px 1.2px at 38% 9%, #fff, transparent),
    radial-gradient(1px 1px at 47% 72%, #fff, transparent), radial-gradient(1.4px 1.4px at 58% 18%, #fff, transparent), radial-gradient(1px 1px at 66% 58%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 6%, #fff, transparent), radial-gradient(1px 1px at 88% 36%, #fff, transparent), radial-gradient(1.4px 1.4px at 95% 64%, #fff, transparent),
    radial-gradient(1px 1px at 31% 88%, #fff, transparent), radial-gradient(1px 1px at 82% 92%, #fff, transparent);
  animation: kya-twinkle 3.5s ease-in-out infinite alternate; }
@keyframes kya-twinkle { from { opacity: 0.3; } to { opacity: 0.85; } }
.kya__x { position: absolute; top: 18px; right: 18px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; transition: background-color 0.2s var(--ease), transform 0.3s var(--ease); }
.kya__x:hover { background: rgba(255, 255, 255, 0.16); transform: rotate(90deg); }
.kya__x svg { width: 20px; height: 20px; }
.kya__x:focus-visible, .kya__go:focus-visible, .kya__skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kya__copy { position: relative; z-index: 1; min-width: 0; display: grid; align-content: center; gap: var(--s-4); padding: clamp(28px, 4.5vw, 72px); padding-right: clamp(12px, 2vw, 32px); }
.kya__copy > * { opacity: 0; transform: translateY(14px); }
.kya.is-open .kya__copy > * { animation: kya-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.kya.is-open .kya__copy > :nth-child(2) { animation-delay: 0.08s; }
.kya.is-open .kya__copy > :nth-child(3) { animation-delay: 0.16s; }
.kya.is-open .kya__copy > :nth-child(4) { animation-delay: 0.24s; }
.kya.is-open .kya__copy > :nth-child(5) { animation-delay: 0.32s; }
.kya.is-open .kya__copy > :nth-child(6) { animation-delay: 0.4s; }
.kya.is-open .kya__copy > :nth-child(7) { animation-delay: 0.48s; }
@keyframes kya-up { to { opacity: 1; transform: none; } }
.kya__kicker { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.kya__star { display: inline-block; font-size: 1.25rem; line-height: 1; background-image: var(--gradient-text-dark); -webkit-background-clip: text; background-clip: text; color: transparent; animation: kya-spin 7s linear infinite; }
@keyframes kya-spin { to { transform: rotate(360deg); } }
.kya__new { font-weight: var(--fw-heavy); color: #fff; }
.kya__title { margin: 0; font-size: clamp(2.25rem, 1.1rem + 3.3vw, 4.5rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: var(--fw-heavy); text-wrap: balance; }
.kya__l1, .kya__l2 { display: block; }
.kya__l2 { padding-bottom: 0.06em; background-image: linear-gradient(90deg, #F99E1C 0%, #F81B69 34%, #C9A6FF 66%, #8F66FF 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: #FFB3E1; -webkit-text-fill-color: transparent; animation: kya-sheen 5s ease-in-out infinite alternate; }
@keyframes kya-sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.kya__sub { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-bold); color: #fff; }
.kya__lead { margin: 0; max-width: 52ch; font-size: var(--fs-body); line-height: 1.55; color: rgba(255, 255, 255, 0.8); }
.kya__facts { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.kya__facts li { display: grid; gap: var(--s-2); align-content: start; font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; color: #fff; }
.kya__fi { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(143, 102, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.32); color: var(--kya-lilac); }
.kya__fi svg { width: 22px; height: 22px; }
.kya__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.kya__go { color: #fff; background: linear-gradient(90deg, #F81B69 0%, #A60DB3 50%, #5100FF 100%); box-shadow: 0 10px 36px rgba(248, 27, 105, 0.32); }
.kya__go:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.kya__go svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease); }
.kya__go:hover svg { transform: translateX(4px); }
.kya__skip { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.36); cursor: pointer; }
.kya__skip:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.kya__fine { margin: 0; font-size: var(--fs-small); color: var(--c-on-ink-muted); }
.kya__fine .gap { margin-left: var(--s-2); }
.kya__viz { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: var(--s-4);
  padding: clamp(28px, 3.5vw, 56px) clamp(24px, 3.5vw, 56px) clamp(28px, 3.5vw, 56px) 0; }
.kya__orbit { --orb: max(220px, min(480px, calc(100vh - 400px), 36vw)); position: relative; width: var(--orb); height: var(--orb); }
.kya__sweep { position: absolute; inset: 5%; border-radius: 50%; opacity: 0.6;
  background: conic-gradient(from 0deg, transparent 0deg, transparent 250deg, rgba(143, 102, 255, 0.35) 335deg, rgba(255, 255, 255, 0.5) 359deg, transparent 360deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 34%, #000 35%); mask-image: radial-gradient(closest-side, transparent 34%, #000 35%);
  animation: kya-rot 4.5s linear infinite; }
@keyframes kya-rot { to { transform: rotate(360deg); } }
.kya__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kya__rings circle { fill: none; stroke: rgba(201, 166, 255, 0.22); stroke-width: 0.3; }
.kya__ring-o { stroke-dasharray: 0.6 1.8; transform-origin: 50% 50%; transform-box: view-box; animation: kya-rot 50s linear infinite; }
.kya__spoke { stroke: rgba(201, 166, 255, 0.3); stroke-width: 0.35; }
.kya__pulse { stroke: #fff; stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 8 100; stroke-dashoffset: 8; opacity: 0; filter: drop-shadow(0 0 1.2px #F81B69);
  animation: kya-pulse 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes kya-pulse { 0% { stroke-dashoffset: 8; opacity: 0; } 15%, 85% { opacity: 1; } 100% { stroke-dashoffset: -92; opacity: 0; } }
.kya__core { position: absolute; left: 50%; top: 50%; width: 31%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; align-content: center; gap: 4px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #8F66FF 0%, #5100FF 48%, #250070 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 40px rgba(81, 0, 255, 0.8), 0 0 90px rgba(248, 27, 105, 0.32); animation: kya-breathe 3s ease-in-out infinite; }
@keyframes kya-breathe { 50% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 60px rgba(81, 0, 255, 0.95), 0 0 120px rgba(248, 27, 105, 0.5); } }
.kya__corei { display: block; width: 36%; color: #fff; }
.kya__corei svg { display: block; width: 100%; height: auto; }
.kya__corel { font-size: var(--fs-small); font-weight: var(--fw-bold); color: #fff; }
.kya__node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; }
.kya__node--p { left: 20%; top: 22%; }
.kya__node--b { left: 80%; top: 22%; }
.kya__node--t { left: 80%; top: 78%; }
.kya__node--c { left: 20%; top: 78%; }
.kya__dot { position: relative; width: calc(var(--orb) * 0.14); height: calc(var(--orb) * 0.14); min-width: 40px; min-height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(13, 9, 40, 0.9); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.36); color: var(--kya-lilac); }
.kya__dot > svg { width: 44%; height: 44%; }
.kya__ok { position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #F81B69, #5100FF); color: #fff; opacity: 0; transform: scale(0.4); }
.kya__ok svg { width: 14px; height: 14px; stroke-width: 2.6; }
.kya__lab { font-size: var(--fs-small); font-weight: var(--fw-bold); color: #fff; white-space: nowrap; }
.kya.is-open .kya__dot { animation: kya-lit 0.6s var(--ease) forwards; animation-delay: calc(1.1s + var(--i) * 0.6s); }
.kya.is-open .kya__ok { animation: kya-ok 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; animation-delay: calc(1.3s + var(--i) * 0.6s); }
@keyframes kya-lit { to { color: #fff; box-shadow: inset 0 0 0 1.5px var(--kya-lilac), 0 0 26px rgba(143, 102, 255, 0.7); } }
@keyframes kya-ok { to { opacity: 1; transform: none; } }
.kya__pass { width: min(100%, 440px); padding: var(--s-4) var(--s-5); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 60px rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translateY(16px); }
.kya.is-open .kya__pass { animation: kya-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards; }
.kya__ph { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-small); }
.kya__ph strong { color: #fff; }
.kya__live { width: 8px; height: 8px; border-radius: 50%; background: #FF00AA; animation: kya-ping 1.6s ease-out infinite; }
@keyframes kya-ping { from { box-shadow: 0 0 0 0 rgba(255, 0, 170, 0.6); } to { box-shadow: 0 0 0 10px rgba(255, 0, 170, 0); } }
.kya__ex { margin-left: auto; color: var(--c-on-ink-muted); }
.kya__rows { margin: 0; }
.kya__rows > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s-3); padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.09); font-size: var(--fs-small); line-height: 1.4; }
.kya__rows dt { color: var(--c-on-ink-muted); }
.kya__rows dd { margin: 0; color: #fff; font-weight: var(--fw-medium); }
.kya__verdict dd { display: grid; }
.kya__v1, .kya__v2 { grid-area: 1 / 1; }
.kya__v1 { color: var(--kya-lilac); }
.kya__v2 { display: grid; gap: 2px; opacity: 0; }
.kya__v2 b { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: var(--fw-heavy); }
.kya__v2 b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8F66FF; box-shadow: 0 0 12px #8F66FF; }
.kya__v2 span { color: var(--c-on-ink-muted); font-weight: var(--fw-regular); }
.kya.is-open .kya__v1 { animation: kya-out 0.4s ease 3.9s forwards; }
.kya.is-open .kya__v2 { animation: kya-up 0.5s ease 4.1s forwards; }
@keyframes kya-out { to { opacity: 0; } }
.kya__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, 0.08); transition: opacity 0.4s var(--ease); }
.kya__bar i { display: block; height: 100%; background: linear-gradient(90deg, #F99E1C, #F81B69, #5100FF); transform-origin: 0 50%; }
.kya.is-open .kya__bar i { animation: kya-count 14s linear forwards; }
@keyframes kya-count { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.kya.is-held .kya__bar { opacity: 0; }
@media (min-width: 901px) and (max-height: 780px) {
  .kya__title { font-size: clamp(2rem, 0.9rem + 2.8vw, 3.5rem); }
  .kya__copy { gap: var(--s-3); padding-block: 28px; }
  .kya__facts li { grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
  .kya__fi { width: 32px; height: 32px; border-radius: 10px; }
  .kya__fi svg { width: 18px; height: 18px; }
  .kya__pass { padding: var(--s-3) var(--s-4); }
  .kya__rows > div { padding: 5px 0; }
}
@media (max-width: 900px) {
  .kya { padding: 0; }
  .kya__panel { width: 100%; height: 100%; border-radius: 0; grid-template-columns: minmax(0, 1fr); align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .kya__viz { order: -1; grid-template-rows: auto; padding: calc(64px + env(safe-area-inset-top, 0px)) 16px 0; }
  .kya__orbit { --orb: min(250px, 62vw, calc(100vh - 560px)); min-width: 200px; min-height: 200px; }
  .kya__pass { display: none; }
  .kya__cta { position: sticky; bottom: 0; z-index: 2; margin-inline: -16px; padding: var(--s-4) 16px calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(7, 5, 26, 0) 0, var(--c-ink-deep) 22%); }
  .kya__cta .btn { flex: 1 1 100%; }
  .kya__copy { align-content: start; gap: var(--s-3); padding: var(--s-4) max(16px, env(safe-area-inset-right, 0px)) var(--s-5) max(16px, env(safe-area-inset-left, 0px)); }
  .kya__copy > .kya__cta { order: 10; }
  .kya__copy > .kya__fine { order: 9; }
  .kya__facts { grid-template-columns: minmax(0, 1fr); }
  .kya__facts li { grid-template-columns: 36px minmax(0, 1fr); align-items: center; }
  .kya__fi { width: 36px; height: 36px; border-radius: 10px; }
  .kya__x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); background: rgba(7, 5, 26, 0.6); }
  .kya__bar { position: fixed; }
  .kya__floor { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .kya, .kya__panel { transition: none; }
  .kya__aurora, .kya__floor, .kya__stars, .kya__star, .kya__l2, .kya__sweep, .kya__ring-o, .kya__core, .kya__live { animation: none !important; }
  .kya__pulse, .kya__sweep, .kya__v1, .kya__bar { display: none; }
  .kya__copy > *, .kya__pass, .kya__v2, .kya__ok { opacity: 1 !important; transform: none !important; animation: none !important; }
  .kya__dot { animation: none !important; color: #fff; box-shadow: inset 0 0 0 1.5px var(--kya-lilac); }
}
@media (forced-colors: active) {
  .kya__panel { border: 1px solid CanvasText; }
  .kya__l2, .kya__star { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}
.cu-glance .cu-index { max-width: 1280px; }   /* v71k late: the 20 px names on one line where they can */

/* ============ v71k evening: Agent Pass, Ravish's positioning option (“Monnai for the agentic internet”) ============ */
.ap-uses__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.ap-use { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); min-width: 0; }
.ap-use__k { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-muted); }
.ap-use__k svg { width: 20px; height: 20px; color: var(--c-accent); }
.ap-use__t { margin: 0; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: var(--fw-heavy); text-wrap: pretty; }
.ap-use__rows { margin: 0; display: grid; gap: var(--s-2); }
.ap-use__rows > div { display: grid; gap: 2px; padding: var(--s-3); border-radius: 12px; font-size: var(--fs-small); line-height: 1.4; }
.ap-use__rows dt { font-weight: var(--fw-bold); }
.ap-use__rows dd { margin: 0; color: var(--c-ink-2); }
.ap-use__one { background: var(--c-panel); }
.ap-use__one dt { color: var(--c-muted); }
.ap-use__one dd { text-decoration: line-through; text-decoration-color: rgba(181, 0, 122, 0.55); text-decoration-thickness: 1.5px; }
.ap-use__mn { background: var(--c-accent-soft); }
.ap-use__mn dt { color: var(--c-accent-ink); }
.ap-use__out { margin: auto 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line); display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); font-weight: var(--fw-heavy); }
.ap-use__out::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-status-approve); }
.ap-use--hold .ap-use__out::before { background: var(--c-status-review); }
.ap-use--no .ap-use__out::before { background: var(--c-status-decline); }
.ap-uses__note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); color: var(--c-muted); }
.ap-cmp__wrap { overflow-x: auto; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--c-line); }
.ap-cmp__t { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.4; }
.ap-cmp__t th, .ap-cmp__t td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.ap-cmp__t tbody tr:last-child > * { border-bottom: 0; }
.ap-cmp__t thead th { font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-ink); background: var(--c-panel); }
.ap-cmp__t tbody th { font-weight: var(--fw-bold); color: var(--c-ink); width: 28%; }
.ap-cmp__t td { color: var(--c-ink-2); }
.ap-cmp__t .ap-cmp__mn { background: var(--c-accent-soft); color: var(--c-ink); font-weight: var(--fw-bold); }
.ap-cmp__t thead .ap-cmp__mn { background: var(--c-accent); color: var(--c-on-accent); }
.ap-cmp__y, .ap-cmp__n { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); }
.ap-cmp__y::before { content: ""; width: 14px; height: 8px; margin-top: -3px; border-left: 2.5px solid var(--c-accent); border-bottom: 2.5px solid var(--c-accent); transform: rotate(-45deg); }
.ap-cmp__n { color: var(--c-muted); }
@media (max-width: 1000px) { .ap-uses__list { grid-template-columns: minmax(0, 1fr); max-width: 640px; } }
/* How Monnai works: Agent Pass on top of the three layers */
.hw__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 0; padding: var(--s-4) var(--s-5); border-radius: 18px;
  background: linear-gradient(90deg, rgba(248, 27, 105, 0.16), rgba(81, 0, 255, 0.22)); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.35); color: var(--c-on-ink); font-size: var(--fs-body); }
.hw__top > svg { flex: none; width: 28px; height: 28px; color: #C9A6FF; }
.hw__top > span { flex: 1 1 24rem; min-width: 0; }
.hw__top strong { color: #fff; }
.hw__top-go { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-bold); color: #fff; text-decoration: none; transition: color var(--dur-2) var(--ease); }   /* v99c (Eva: “I don’t like the underline under text”) */
.hw__top-go:hover, .hw__top-go:focus-visible { color: var(--c-layer-decide); text-decoration: none; }
.hw__top-go svg { transition: transform var(--dur-2) var(--ease); }
.hw__top-go:hover svg { transform: translateX(3px); }
.hw__top-go svg { width: 18px; height: 18px; }
.section.ap-uses, .section.ap-cmp, [data-page="agent-pass"] .section.ap-faq { padding-block: 40px; }
.ap-uses .sec-head, .ap-cmp .sec-head { margin-bottom: var(--s-5); }
.ap-use { gap: var(--s-2); padding: var(--s-4); }
.ap-use__rows > div { padding: 8px 12px; }   /* v71k evening: the page within its length target (4.5 screens at 1440) */
.ap-cmp__t th, .ap-cmp__t td { padding: 10px var(--s-4); }
.hw6__head .hw__top { margin: var(--s-3) 0 0; padding: 10px 16px; gap: 4px var(--s-3); font-size: var(--fs-small); line-height: 1.4; }   /* v71k night: beside the title, so the page keeps its length */
.hw6__head .hw__top > svg { display: none; }
.hw6__head .hw__top > span { flex-basis: 100%; }

/* ================================================================ v99 (6 Nov 2026): the homepage for customers and their AI agents
   Eva: "expand the positioning … add more weight to the agent word … make the homepage very wow", then "closer to my
   branding than to what Ravish did … not AI generated" and "the current branding of the current prototype" (v99c). So the
   new pieces are the site's own: the hero's grid and glow, the use cases' Monnai preview card (.pv, family tags, decision
   chips), tick lists, pill tabs with icon circles, a soft panel like the product heroes' illustrations; and Agent Pass on
   top of the platform drawn as How Monnai works draws its layers (.hw6). Reduced motion: final states. */
.hx5.hx9 { text-align: left; padding-block: clamp(1.75rem, 0.5rem + 2.8vw, 3.5rem) clamp(1.5rem, 1rem + 1.1vw, 2.25rem); }
.hx5.hx9 .hx5__glow { left: 72%; bottom: -46%; width: min(1100px, 130vw); }
.hx5.hx9 .hx5__grid { -webkit-mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 80% at 60% 40%, #000 20%, transparent 78%); }
.hx9__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); align-items: center; gap: clamp(1.5rem, -2rem + 5vw, 4.5rem); }
.hx9__copy { display: grid; justify-items: start; align-content: center; min-width: 0; }
.hx5.hx9 .hx5__kicker { text-align: left; }
.hx5.hx9 .hx5__title { margin: var(--s-5) 0 0; font-size: clamp(2.6rem, 1.1rem + 4vw, 4.85rem); line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }
.hx9__and { display: block; width: fit-content; max-width: 100%; padding-bottom: 0.06em; }
.hx9__lead { margin: var(--s-5) 0 0; max-width: 34em; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-ink-2); text-wrap: pretty; }
.hx5.hx9 .hx5__ctas { justify-content: flex-start; margin-top: var(--s-6); }
.hx9__new { display: flex; align-items: baseline; gap: 10px; max-width: 36em; margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.hx9__new .sol__new { flex: 0 0 auto; margin: 0; }
.hx9__new strong { color: var(--c-ink); font-weight: var(--fw-bold); }
.hx5.hx9 .hx5__proof { margin-top: clamp(1.5rem, 0.75rem + 1.6vw, 2.5rem); }

/* ---- The live check ---- */
.lv { position: relative; margin: 0; min-width: 0; display: grid; gap: var(--s-3); }
.lv__stage { position: relative; height: 520px; border-radius: 24px; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px var(--c-line); overflow: hidden; }
.lv__scene { position: absolute; inset: 0; }
.lv__who { position: absolute; left: 22px; top: 22px; z-index: 1; width: calc(46% - 22px); display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.lv__wh { display: flex; align-items: center; gap: var(--s-3); }
.lv__who--bot .sol__ico { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.lv__wt { margin: 0; font-size: 1rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; line-height: 1.2; }
.lv__wl { margin: 2px 0 0; font-size: var(--fs-micro); line-height: 1.3; color: var(--c-muted); }
.lv__ask { justify-self: start; margin: 0; padding: var(--s-2) var(--s-3); border-radius: 14px 14px 14px 4px; background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; }
.lv__steps.tick { margin: 0; gap: var(--s-2); }
.lv__steps.tick li { font-size: var(--fs-small); color: var(--c-ink-2); }
.lv__who--bot .tick__i { background: var(--c-line-strong); }
.lv__pv.pv { position: absolute; right: 22px; bottom: 22px; z-index: 2; width: calc(54% - 6px); }
.lv__pv .pv__row { padding: var(--s-3) var(--s-4); }
.lv__pv .pv__top { padding: var(--s-2) var(--s-4); }
.lv__pv .pv__ai .ins { padding: 7px var(--s-3); }
.lv__pv .aic__ins { gap: 6px; }
.lv__pv .pv__dec .dec { padding: 4px var(--s-4); font-size: 1.0625rem; }
.lv__pv .pv__why { font-size: var(--fs-small); }
.ins--na .ins__dot { background: var(--c-status-neutral); }
.ins--na .ins__t { color: var(--c-muted); font-weight: var(--fw-medium); }
.js .lv__scene .lv__who, .js .lv__scene .lv__pv { animation: swapIn 460ms var(--ease) both; }
.js .lv__scene .lv__pv { animation-delay: 200ms; }
.js .lv__scene .lv__ask { animation: swapIn 420ms var(--ease) both 250ms; }
.js .lv__scene .lv__steps li { animation: swapIn 420ms var(--ease) both; animation-delay: calc(450ms + var(--i, 0) * 380ms); }
.js .lv__scene .ins { animation: swapIn 420ms var(--ease) both; animation-delay: calc(1550ms + var(--i, 0) * 260ms); }
.js .lv__scene .pv__dec { animation: swapIn 420ms var(--ease) both 2700ms; }

/* the four moments: the use cases' pill tabs, smaller */
.lv__foot { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.lv .lv__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; grid-auto-flow: unset; }
.lv .lv__tab.day__node { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4) 0 6px; border-radius: var(--r-pill); background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); color: var(--c-ink-2); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; scroll-snap-align: none; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.lv .lv__tab .sol__ico { width: 32px; height: 32px; }
.lv .lv__tab .sol__ico svg { width: 16px; height: 16px; }
.lv .lv__tab.day__node:hover { box-shadow: 0 0 0 1.5px var(--c-ink); color: var(--c-ink); }
.lv .lv__tab.day__node[aria-selected="true"] { background: var(--c-ink); color: var(--c-on-ink); box-shadow: 0 12px 30px -14px rgba(7, 5, 26, 0.6); }
.lv .lv__tab.day__node[aria-selected="true"] .sol__ico { background: rgba(255, 255, 255, 0.14); color: var(--c-on-ink); }
.lv .lv__tab .day__bar { position: absolute; left: 18px; right: 18px; bottom: 5px; width: auto; height: 2px; margin: 0; background: rgba(255, 255, 255, 0.18); }
.lv .lv__tab .day__bar::after { background: var(--gradient-brand); }
.lv .lv__tab .day__bar { opacity: 0; }   /* v101 (Eva: “I don’t like the multicolour line”): hidden, as on the use cases' tabs; it still times the moments */
.lv.is-playing .day__node[aria-selected="true"] .day__bar::after { animation-duration: 7500ms; }
.lv__play.day__play { flex: 0 0 auto; margin-left: auto; min-height: 44px; padding: 0 14px; }
.lv__note { margin: 0; font-size: var(--fs-micro); color: var(--c-muted); }

@media (max-width: 1279px) and (min-width: 1180px) {
  .lv__who { padding: var(--s-4); }
}
@media (max-width: 1179px) {
  .hx9__in { grid-template-columns: minmax(0, 1fr); }
  .hx9__copy { justify-items: center; text-align: center; }
  .hx5.hx9 .hx5__kicker { text-align: center; }
  .hx9__and { margin-inline: auto; }
  .hx9__lead { margin-inline: auto; }
  .hx5.hx9 .hx5__ctas { justify-content: center; }
  .hx9__new { text-align: left; }
  .lv { width: min(100%, 640px); justify-self: center; }
}
@media (max-width: 680px) {
  .lv__stage { height: auto; padding: var(--s-3); }
  .lv__scene { position: relative; inset: auto; display: grid; gap: var(--s-3); }
  .lv__who, .lv__pv.pv { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; }
  .lv__foot { align-items: flex-start; }
  .lv .lv__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
  .lv .lv__tabs::-webkit-scrollbar { display: none; }
  .lv .lv__tab.day__node { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js .lv__scene .lv__who, .js .lv__scene .lv__pv, .js .lv__scene .lv__ask, .js .lv__scene .lv__steps li, .js .lv__scene .ins, .js .lv__scene .pv__dec { animation: none; }
}

/* ---- Agent Pass on top of the platform: How Monnai works' layers, Agent Pass as the top plate ---- */
.ps9 .hw6__head .lead { max-width: 34em; }
.ps9 .hw__plate--decide { background: linear-gradient(135deg, rgba(251, 157, 0, 0.42), rgba(255, 0, 170, 0.34) 50%, rgba(81, 0, 255, 0.5)); border-color: rgba(255, 208, 138, 0.8); }
.ps9 .hw__step { gap: var(--s-1); padding-block: var(--s-4); }
.ps9__go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2); color: var(--c-on-ink); font-size: var(--fs-small); font-weight: var(--fw-bold); text-decoration: none; transition: color var(--dur-2) var(--ease); }
.ps9__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.ps9__go:hover, .ps9__go:focus-visible { color: var(--step-c); text-decoration: none; }
.ps9__go:hover svg { transform: translateX(3px); }
.ps9 .hw__step--decide { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 143, 196, 0.45); }
.ps9 .hw__art { max-width: 520px; }
.ps9 .hwc { padding: 4px 6px; }
@media (max-width: 1023px) { .ps9 .hw__art { max-width: 440px; } }
.ps9 .hw6__head { margin-bottom: var(--s-5); }
.ps9 .hw__steps { gap: var(--s-3); }
.ps9 .hw__step { padding-block: var(--s-4); }
.ps9.hw6 { padding-block: clamp(2.25rem, 1.25rem + 2vw, 3rem); }
/* v103 (Eva): the figures take the place of the New line, in the hero's copy column; New moves to the Agent Pass layer card */
.hx5.hx9 .hx9__figs { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; max-width: none; margin: var(--s-6) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--c-line); }
.hx5.hx9 .hx9__figs li { justify-items: start; padding: 0 var(--s-6) 0 0; margin-right: var(--s-6); }
.hx5.hx9 .hx9__figs li:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.hx5.hx9 .hx9__figs li + li { border-left: 0; }
.hx5.hx9 .hx9__figs li:not(:last-child) { border-right: 1px solid var(--c-line); }
.hx5.hx9 .hx9__figs strong { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }
.hx5.hx9 .hx9__copy .hx5__note { margin-top: var(--s-2); }
@media (max-width: 1179px) { .hx5.hx9 .hx9__figs { justify-content: center; } }
@media (max-width: 520px) { .hx5.hx9 .hx9__figs li { padding-right: var(--s-4); margin-right: var(--s-4); } .hx5.hx9 .hx9__figs span { font-size: var(--fs-micro); } }
.hw__n .ps9__new { margin-left: var(--s-2); color: #FF8FC4; }
/* ---- v104 (Eva: "too similar to the How Monnai works one … find an alternative"): Agent Pass on top of the platform as a
   stack of the site's own cards, narrowing to the top, on a soft panel; no dark band, no plates ---- */
.ps10__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--s-6) clamp(2rem, 0rem + 4vw, 5rem); }
.ps10__head { margin-bottom: 0; }
.ps10__stack { list-style: none; margin: 0; padding: clamp(1rem, 0.5rem + 1.5vw, 1.75rem); display: grid; justify-items: center; gap: 22px; border-radius: 24px; background: var(--gradient-soft); box-shadow: inset 0 0 0 1px var(--c-line); }
.ps10__l { position: relative; width: 100%; display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), var(--shadow-float); }
.ps10__l--decide { width: 76%; background: linear-gradient(160deg, #F3EDFF, #FFF0F8); box-shadow: 0 0 0 1.5px var(--c-accent), var(--shadow-float); }
.ps10__l--infer { width: 88%; }
.ps10__l + .ps10__l::before { content: ""; position: absolute; left: 50%; top: -22px; width: 1.5px; height: 22px; margin-left: -0.75px; background: var(--c-line-strong); }
.ps10__l + .ps10__l::after { content: ""; position: absolute; left: 50%; top: -24px; width: 7px; height: 7px; margin-left: -4px; border-left: 1.5px solid var(--c-line-strong); border-top: 1.5px solid var(--c-line-strong); transform: rotate(45deg); }
.ps10__t { display: grid; gap: 2px; }
.ps10__n { margin: 0; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.ps10__n .sol__new { margin: 0; }
.ps10__l h3 { margin: 0; font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.015em; color: var(--c-ink); }
.ps10__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ps10__tags .ins__fam { display: inline-block; padding: 3px 10px; font-size: var(--fs-micro); text-transform: none; letter-spacing: 0; }
.ps10__tags--plain li { padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-panel); font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.ps10__d { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.ps10__go { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; font-weight: var(--fw-bold); color: var(--c-accent); text-decoration: none; white-space: nowrap; }
.ps10__go:hover, .ps10__go:focus-visible { color: var(--c-accent-ink); text-decoration: none; }
.ps10__go svg { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease); }
.ps10__go:hover svg { transform: translateX(3px); }
.js .ps10__stack[data-reveal] .ps10__l { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.js .ps10__stack[data-reveal].is-in .ps10__l { opacity: 1; transform: none; }
.js .ps10__stack[data-reveal].is-in .ps10__l--observe { transition-delay: 0ms; }
.js .ps10__stack[data-reveal].is-in .ps10__l--infer { transition-delay: 150ms; }
.js .ps10__stack[data-reveal].is-in .ps10__l--decide { transition-delay: 300ms; }
@media (max-width: 1023px) { .ps10__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ps10__l--decide, .ps10__l--infer { width: 100%; } .ps10__l { padding: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { .js .ps10__stack[data-reveal] .ps10__l { opacity: 1; transform: none; transition: none; } }
/* ---- v105 (Eva: the stacked cards were "visually complex + too AI-native"): the layers as a plain list of link rows ---- */
.ps11__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--s-6) clamp(2rem, 0rem + 4vw, 5rem); }
.ps11__head { margin-bottom: 0; }
.ps11__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.ps11__l a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-3) var(--s-5) var(--s-2); border-bottom: 1px solid var(--c-line); color: inherit; text-decoration: none; transition: background-color var(--dur-2) var(--ease); }
.ps11__l a:hover, .ps11__l a:focus-visible { background: var(--c-panel); text-decoration: none; }
.ps11__n { font-size: 2.25rem; font-weight: var(--fw-light); line-height: 1; letter-spacing: -0.02em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.ps11__l--decide .ps11__n { color: var(--c-accent); font-weight: var(--fw-bold); }
.ps11__b { display: grid; gap: 3px; min-width: 0; }
.ps11__k { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.ps11__k .sol__new { margin: 0; }
.ps11__b strong { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.015em; color: var(--c-ink); }
.ps11__d { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.ps11__l a > svg { width: 20px; height: 20px; color: var(--c-ink); transition: transform var(--dur-2) var(--ease); }
.ps11__l a:hover > svg { transform: translateX(3px); }
@media (max-width: 1023px) { .ps11__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .ps11__l a { grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--s-3); } .ps11__n { font-size: 1.75rem; } }

/* ================================================================ v106 (6 Nov 2026)
   The four cards carry their own link (Eva: "2 layers here is a bit too much … a combined view"); the row of links goes. */
.why4 .why4__list--go li { display: flex; padding: 0; }
.why4__list--go .why4__card { flex: 1 1 auto; }
.why4__card { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start; gap: 6px; height: 100%; padding: 20px 22px 18px; border-radius: inherit; color: inherit; text-decoration: none; }
.why4__card:hover, .why4__card:focus-visible { color: inherit; text-decoration: none; }
.why4__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-ink); }
.why4__go svg { flex: 0 0 auto; width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.why4__card:hover .why4__go svg { transform: translateX(3px); }
@media (max-width: 720px) { .why4__card { padding: 14px 14px 16px; } }

/* v106b (Eva: "the black is maybe too contrastic, just colour wise"): Agent Pass in the accent tint, the foundation on the soft panel.
   Agent Pass on top: a built-on view, from the front (Eva: "a different framework, but not something flat as 3 bullet
   points"; How Monnai works keeps its plates). Roof: Agent Pass. Columns: the five things it checks, each on the Monnai
   product it reads; the agent check is the one Agent Pass adds, drawn like the roof. Foundation: the data. */
/* v106c (Eva: "too crowded? … a background colour other than white or split a bit"): the section on a soft rounded panel, white cards on it;
   one colour for Agent Pass (violet), neutral icons for the four checks that already run on Monnai */
.ps12s .ps11__grid { padding: clamp(1.5rem, 0.5rem + 3vw, 3.5rem); border-radius: 32px; background: var(--c-panel); }
@media (min-width: 1180px) { .ps12s .ps11__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
@media (max-width: 680px) { .ps12s .ps11__grid { margin-inline: calc(-1 * var(--s-2)); border-radius: 24px; } }
.ps12 { display: grid; gap: 10px; min-width: 0; }
.ps12__roof { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: 18px 22px; border-radius: 18px; background: var(--c-accent-soft); color: var(--c-ink); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.22), 0 18px 38px -28px rgba(81, 0, 255, 0.5); }
.ps12__roof:hover, .ps12__roof:focus-visible { color: var(--c-ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(81, 0, 255, 0.45), 0 18px 38px -28px rgba(81, 0, 255, 0.5); }
.ps12__roof .sol__ico, .ps12__col--agent .ps12__ci { background: var(--c-ground); color: var(--c-accent); box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.16); }
.ps12__rt { display: grid; gap: 3px; min-width: 0; }
.ps12__rk { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-accent-ink); }
.ps12__rk .sol__new { margin: 0; }
.ps12__rt strong { font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.3125rem); line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.015em; }
.ps12__roof > svg { color: var(--c-accent); }
.ps12__roof > svg, .ps12__go svg { flex: 0 0 auto; width: 20px; height: 20px; transition: transform var(--dur-2) var(--ease); }
.ps12__roof:hover > svg, .ps12__base:hover .ps12__go svg { transform: translateX(3px); }
.ps12__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ps12__col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 156px; padding: 16px 14px 14px; border-radius: 14px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ps12__ci { flex: 0 0 auto; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; display: grid; place-items: center; }
.ps12__ci svg { width: 18px; height: 18px; }
.ps12__col:not(.ps12__col--agent) .ps12__ci { background: var(--c-panel); color: var(--c-ink-2); }
.ps12__col strong { font-size: 1rem; line-height: 1.25; font-weight: var(--fw-heavy); letter-spacing: -0.01em; color: var(--c-ink); hyphens: auto; }
.ps12__from { margin-top: auto; width: 100%; padding-top: 9px; border-top: 1px solid var(--c-line); font-size: var(--fs-micro); line-height: 1.35; color: var(--c-ink-2); }
.ps12__col--agent { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.22); }
.ps12__col--agent .ps12__from { color: var(--c-accent-ink); border-top-color: rgba(81, 0, 255, 0.2); }
.ps12__base { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: 18px 22px; border-radius: 18px; background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); color: var(--c-ink); text-decoration: none; }
.ps12__base:hover, .ps12__base:focus-visible { color: var(--c-ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--c-line-strong); }
.ps12__bt { display: grid; gap: 3px; min-width: 0; }
.ps12__bt strong { font-size: 1.0625rem; line-height: 1.3; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.ps12__bt span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.ps12__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); white-space: nowrap; }
.ps12__go svg { width: 16px; height: 16px; }
/* built from the ground up as it comes into view: foundation, then the five columns, then the roof */
.js .ps12[data-reveal] { transform: none; }
.js .ps12[data-reveal] .ps12__base { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.js .ps12[data-reveal] .ps12__col { opacity: 0; transform: translateY(18px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); transition-delay: calc(220ms + var(--i, 0) * 90ms); }
.js .ps12[data-reveal] .ps12__roof { opacity: 0; transform: translateY(-14px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: 760ms; }
.js .ps12[data-reveal].is-in .ps12__base, .js .ps12[data-reveal].is-in .ps12__col, .js .ps12[data-reveal].is-in .ps12__roof { opacity: 1; transform: none; }
@media (max-width: 1179px) and (min-width: 1024px) { .ps12s .ps11__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); } }
@media (max-width: 680px) {
  .ps12__cols { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ps12__col { min-height: 0; flex-direction: row; align-items: center; gap: var(--s-3); padding: 12px 14px; }
  .ps12__ci { width: 32px; height: 32px; margin: 0; }
  .ps12__from { margin: 0 0 0 auto; width: auto; padding: 0; border: 0; text-align: right; }
  .ps12__roof, .ps12__base { padding: 16px; gap: var(--s-3); }
  .ps12__base { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .js .ps12[data-reveal] .ps12__base, .js .ps12[data-reveal] .ps12__col, .js .ps12[data-reveal] .ps12__roof { opacity: 1; transform: none; transition: none; }
}
[data-page="home"] .ps12s { padding-block: clamp(1rem, 0.5rem + 1.2vw, 2rem); }

/* ================================================================ v106 (6 Nov 2026): the Agent Pass page, rebuilt from Ravish's
   launch screens in the prototype's own design (Eva: "use this content (not the layout)"; the five-part view: "functionally
   it works, design-wise we can make better"). Violet stays Agent Pass's colour, status dots use the site's status colours. */
/* ---- One agent. Everything behind it. ---- */
.ap1 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(1.5rem, 0.5rem + 2.5vw, 3rem); margin-top: var(--s-6); padding: clamp(1rem, 0.25rem + 2.2vw, 2.5rem); border-radius: 28px; background: var(--c-panel); }
.ap1__map { display: grid; gap: var(--s-4); min-width: 0; }
.ap1__stage { position: relative; aspect-ratio: 16 / 11; }
.ap1__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ap1__ln { stroke: var(--c-line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke var(--dur-2) var(--ease); }
.ap1__ln[data-st="ok"] { stroke: var(--c-status-approve); }
.ap1__ln[data-st="warn"] { stroke: var(--c-status-review); }
.ap1__ln[data-st="risk"] { stroke: var(--c-status-decline); }
.ap1__ln[data-st="na"] { stroke: var(--c-line-strong); stroke-dasharray: 3 5; opacity: 0.6; }
.ap1__nodes { position: absolute; inset: 0; }
.ap1__node { position: absolute; z-index: 1; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(42%, 230px); margin: 0; padding: 10px 14px 10px 10px; border: 0; border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line), 0 12px 26px -20px rgba(20, 10, 60, 0.4); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: box-shadow var(--dur-2) var(--ease); }
.ap1__node--agent { left: 50%; top: 50%; width: min(42%, 220px); padding: 14px 16px 14px 12px; background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.24), 0 16px 32px -22px rgba(81, 0, 255, 0.55); }
.ap1__node--person { left: 22%; top: 13%; }
.ap1__node--business { left: 78%; top: 13%; }
.ap1__node--transaction { left: 78%; top: 87%; }
.ap1__node--context { left: 22%; top: 87%; }
.ap1__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-panel); color: var(--c-ink-2); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.ap1__ico svg { width: 18px; height: 18px; }
.ap1__node--agent .ap1__ico { width: 44px; height: 44px; background: var(--c-ground); color: var(--c-accent); }
.ap1__node--agent .ap1__ico svg { width: 22px; height: 22px; }
.ap1__nt { display: grid; gap: 1px; min-width: 0; }
.ap1__nt strong { font-size: 0.9375rem; font-weight: var(--fw-heavy); line-height: 1.2; letter-spacing: -0.01em; }
.ap1__nt span { font-size: var(--fs-micro); line-height: 1.3; color: var(--c-muted); }
.ap1__node--agent .ap1__nt strong { font-size: 1.0625rem; }
.ap1__dot, .ap1__kk i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--c-status-neutral); transition: background-color var(--dur-2) var(--ease); }
.ap1__node[data-st="ok"] .ap1__dot, .ap1__kk--ok i { background: var(--c-status-approve); }
.ap1__node[data-st="warn"] .ap1__dot, .ap1__kk--warn i { background: var(--c-status-review); }
.ap1__node[data-st="risk"] .ap1__dot, .ap1__kk--risk i { background: var(--c-status-decline); }
.ap1__node[data-st="na"] .ap1__dot, .ap1__kk--na i { background: transparent; box-shadow: inset 0 0 0 2px var(--c-status-neutral); }
.ap1__node:not([data-st="ok"]) .ap1__sw--ok, .ap1__node:not([data-st="warn"]) .ap1__sw--warn, .ap1__node:not([data-st="risk"]) .ap1__sw--risk, .ap1__node:not([data-st="na"]) .ap1__sw--na { display: none; }
.ap1__node:hover { box-shadow: 0 0 0 1.5px var(--c-ink), 0 12px 26px -20px rgba(20, 10, 60, 0.4); }
.ap1__node[aria-selected="true"] { box-shadow: 0 0 0 2px var(--c-accent), 0 16px 32px -18px rgba(81, 0, 255, 0.5); }
.ap1__node[aria-selected="true"]:not(.ap1__node--agent) .ap1__ico { background: var(--c-accent-soft); color: var(--c-accent); }
.ap1__node:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.ap1__key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; font-size: var(--fs-micro); color: var(--c-ink-2); }
.ap1__kk { display: inline-flex; align-items: center; gap: 6px; }
.ap1__kk i { width: 10px; height: 10px; }
.ap1__panels { display: grid; min-width: 0; }
.js .ap1__ex { grid-area: 1 / 1; align-self: start; }
.js .ap1__ex:not(.is-on) { visibility: hidden; }
.js .ap1__ex.is-on { animation: swapIn 420ms var(--ease) both; }
.js .ap1__ex.is-on .ins { animation: swapIn 380ms var(--ease) both; }
.js .ap1__ex.is-on .ins:nth-child(2) { animation-delay: 140ms; }
.js .ap1__ex.is-on .pv__dec { animation: swapIn 380ms var(--ease) both 300ms; }
.ap1__where { font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); text-align: right; }
.ap1__q { margin: 0; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.ap1__case { margin: 0; line-height: 1.5; color: var(--c-ink-2); }
.ap1 .ins, .apm .ins { padding: 8px var(--s-3); }
.ap1 .ins { grid-template-columns: auto minmax(0, 1fr); }
.ap1 .pv__dec .dec { padding: 4px var(--s-4); font-size: 1.0625rem; }
.ap1__why { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 0; padding: 0; }
.ap1__why li { display: grid; align-content: start; gap: 6px; padding: 20px 22px 22px; border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ap1__wi { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); }
.ap1__wi svg { width: 18px; height: 18px; }
.ap1__why .ap1__wi { margin-bottom: 8px; }
.ap1__why h3 { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-heavy); letter-spacing: -0.01em; }
.ap1__why p { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
@media (max-width: 1100px) { .ap1__why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .ap1 { grid-template-columns: minmax(0, 1fr); } .ap1__map { width: min(100%, 620px); justify-self: center; } }
@media (max-width: 600px) {
  .ap1__stage { aspect-ratio: 1 / 0.95; }
  .ap1__node { width: 44%; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 8px 10px 8px 8px; border-radius: 14px; }
  .ap1__node--agent { width: 46%; padding: 10px; }
  .ap1__node .ap1__dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; }
  .ap1__ico { width: 30px; height: 30px; } .ap1__ico svg { width: 16px; height: 16px; }
  .ap1__node--agent .ap1__ico { width: 34px; height: 34px; }
  .ap1__nt strong { font-size: 0.875rem; } .ap1__nt span { font-size: 0.6875rem; }
  .ap1__node--person, .ap1__node--context { left: 24%; } .ap1__node--business, .ap1__node--transaction { left: 76%; }
  .ap1__node--person, .ap1__node--business { top: 15%; } .ap1__node--context, .ap1__node--transaction { top: 85%; }
  .ap1__why { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}
@media (prefers-reduced-motion: reduce) { .js .ap1__ex.is-on, .js .ap1__ex.is-on .ins, .js .ap1__ex.is-on .pv__dec { animation: none; } }

/* ---- Six agent moments: six cards ---- */
.apm__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; }
.apm { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; padding: 22px; border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.apm__k { display: flex; align-items: center; gap: var(--s-3); margin: 0; }
.apm__k > span:last-child { display: grid; gap: 1px; min-width: 0; }
.apm__k strong { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.25; }
.apm__k span span { font-size: var(--fs-micro); line-height: 1.3; color: var(--c-muted); }
.apm__t { margin: 0; font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.apm__ask { align-self: flex-start; margin: 0; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--c-accent-soft); color: var(--c-accent-ink); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.35; }
.apm__ins { gap: 6px; }
.apm .ins { grid-template-columns: auto 6.5em minmax(0, 1fr); gap: 10px; }
.apm__ck { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.apm__out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-2); }
.apm__out .dec { padding: 3px 12px; font-size: var(--fs-small); }
.apm__miss { margin: auto 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.4; color: var(--c-ink); }
@media (max-width: 1100px) { .apm__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .apm__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .apm__list::-webkit-scrollbar { display: none; }
  .apm { scroll-snap-align: start; padding: 18px; }
  .js .apm__list > [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Every tool sees one slice: the categories, five columns ---- */
.ap3__wrap { margin-top: var(--s-5); overflow-x: auto; border-radius: 20px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.ap3 { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-small); }
.ap3 th, .ap3 td { padding: 14px 16px; border-bottom: 1px solid var(--c-line); text-align: center; vertical-align: middle; }
.ap3 thead th { padding-block: 18px 14px; font-weight: var(--fw-bold); color: var(--c-ink-2); }
.ap3__h { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.ap3__h svg { width: 20px; height: 20px; color: var(--c-ink-2); }
.ap3 tbody th { padding-left: 24px; text-align: left; font-weight: var(--fw-bold); color: var(--c-ink); white-space: nowrap; }
.ap3 tbody tr:last-child th, .ap3 tbody tr:last-child td { border-bottom: 0; }
.ap3__y { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent); vertical-align: middle; }
.ap3__y svg { width: 15px; height: 15px; stroke-width: 2.4; }
.ap3__n { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: var(--c-line); vertical-align: middle; }
.ap3__mn th, .ap3__mn td { background: var(--c-accent-soft); }
.ap3__mn th { color: var(--c-accent-ink); font-weight: var(--fw-heavy); }
.ap3__mn .ap3__y { background: var(--c-accent); color: var(--c-on-accent); }
.ap3__note { margin: var(--s-3) 0 0; text-align: center; }
.ap3__note:empty { display: none; }

/* ---- Built on everything Monnai already knows: How Monnai works' layers, on a light ground (Eva: "keep the layers
   design for the product page") ---- */
.apl { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: clamp(1.5rem, 0rem + 4vw, 4rem); margin-top: var(--s-5); }
.apl .hw__art { justify-self: center; max-width: 500px; }
.apl .hw__plate { left: 8%; width: 56%; }
.apl .hwc { padding: 3px 6px; font-size: 0.6875rem; }
.apl .hw__plate--observe { border-color: rgba(81, 0, 255, 0.4); background: linear-gradient(135deg, rgba(81, 0, 255, 0.16), rgba(143, 176, 255, 0.24)); }
.apl .hw__plate--infer { border-color: rgba(255, 0, 170, 0.32); background: linear-gradient(135deg, rgba(255, 0, 170, 0.08), rgba(201, 166, 255, 0.2)); }
.apl .hw__plate--decide { border-color: rgba(81, 0, 255, 0.5); background: linear-gradient(135deg, rgba(81, 0, 255, 0.24), rgba(255, 143, 196, 0.22)); }
.apl .hwc { background: var(--c-accent); box-shadow: none; color: var(--c-on-accent); }
.apl .hwc--biz { background: #D98400; }
.apl .hw__plate--infer .hwc { background: rgba(81, 0, 255, 0.55); }
.apl .hw__plate--infer .hwc--biz { background: rgba(217, 132, 0, 0.75); }
.apl__steps { list-style: none; display: grid; gap: var(--s-3); margin: 0; padding: 0; }
.apl__step { --step-c: var(--c-layer-observe); position: relative; display: grid; gap: 6px; padding: 20px 22px 20px 28px; border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.apl__step::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--step-c); }
.apl__step--infer { --step-c: var(--c-layer-infer); }
.apl__step--decide { --step-c: var(--c-accent); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.24), 0 16px 34px -26px rgba(81, 0, 255, 0.5); }
.apl__step p, .apl__step h3 { margin: 0; }
.apl__n { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.apl__step--decide .apl__n { color: var(--c-accent-ink); }
.apl__step h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.apl__step > p:not(.apl__n) { font-size: var(--fs-small); line-height: 1.5; color: var(--c-ink-2); }
.apl__go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration: none; }
.apl__go:hover { color: var(--c-ink); text-decoration: none; }
.apl__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.apl__go:hover svg { transform: translateX(3px); }
.apl:has(.apl__step:hover) .hw__plate { opacity: 0.45; filter: saturate(0.6); }
.apl:has(.apl__step--observe:hover) .hw__plate--observe, .apl:has(.apl__step--infer:hover) .hw__plate--infer, .apl:has(.apl__step--decide:hover) .hw__plate--decide { opacity: 1; filter: none; box-shadow: 0 0 0 2px rgba(81, 0, 255, 0.45); }
@media (max-width: 1023px) { .apl { grid-template-columns: minmax(0, 1fr); } .apl .hw__art { max-width: 420px; } }
@media (max-width: 680px) {
  .apm .ins { grid-template-columns: auto minmax(0, 1fr); row-gap: 1px; }
  .apm .ins .ins__dot { grid-row: span 2; }
  .apm__ck, .apm .ins__t { grid-column: 2; }
}
@media (max-width: 600px) {
  .ap3 { min-width: 0; table-layout: fixed; font-size: var(--fs-micro); }
  .ap3 th, .ap3 td { padding: 10px 2px; }
  .ap3 thead th:first-child, .ap3 tbody th { width: 34%; padding-left: 14px; padding-right: 6px; white-space: normal; line-height: 1.3; }
  .ap3__h span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .ap3__y { width: 24px; height: 24px; } .ap3__y svg { width: 13px; height: 13px; }
}
/* the screen-reader words inside the moment cards and the table stay inside their scrollers (a positioned ancestor) */
.apm, .ap3__wrap { position: relative; }

/* v106b (Eva, on the six moments: "way too heavy, not clear"): each moment in two lines, one check alone and what Agent
   Pass decides instead */
.apm2__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin: 0; padding: 0; }
.apm2 { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 24px 24px; border-radius: 18px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.apm2__k { margin: 0; font-size: var(--fs-micro); font-weight: var(--fw-medium); color: var(--c-muted); }
.apm2__t { margin: 0; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; }
.apm2__cmp { display: grid; gap: var(--s-3); margin: auto 0 0; padding-top: var(--s-3); }
.apm2__cmp div { display: grid; gap: 4px; }
.apm2__cmp dt { font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.apm2__cmp dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--c-ink-2); }
.apm2__one dd { color: var(--c-muted); }
.apm2__one { padding-bottom: var(--s-3); border-bottom: 1px dashed var(--c-line); }
.apm2__ap dt { color: var(--c-accent-ink); }
.apm2__ap dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.apm2__ap .dec { padding: 2px 10px; font-size: var(--fs-micro); }
.apm2__why { flex: 1 1 12em; color: var(--c-ink); }
@media (max-width: 1100px) { .apm2__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .apm2__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .apm2__list::-webkit-scrollbar { display: none; }
  .apm2 { scroll-snap-align: start; padding: 18px; }
  .js .apm2__list > [data-reveal] { opacity: 1; transform: none; }
}
@media (max-width: 680px) { .apm2__list { align-items: start; } }

/* v106c (Eva: "still too heavy … nobody wants to read all that"): a title and two verdicts per moment */
.ap2s .sec-head { margin-bottom: var(--s-5); }
.apm3__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0; padding: 0; }
.apm3 { position: relative; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: 20px 22px; border-radius: 16px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.apm3__t { margin: 0; font-size: 1.0625rem; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.apm3__v { display: grid; gap: 8px; margin: auto 0 0; }
.apm3__v div { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.apm3__v dt { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.apm3__v dd { margin: 0; font-size: var(--fs-small); }
.apm3__one dt, .apm3__one dd { color: var(--c-muted); font-weight: var(--fw-medium); }
.apm3__x { position: relative; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--c-panel); box-shadow: inset 0 0 0 1px var(--c-line); }
.apm3__x::before, .apm3__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; border-radius: 1px; background: var(--c-muted); transform: translate(-50%, -50%) rotate(45deg); }
.apm3__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.apm3__ap dt svg { width: 18px; height: 18px; }
.apm3__ap .dec { padding: 3px 12px; font-size: var(--fs-small); }
@media (max-width: 1100px) { .apm3__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .apm3__list { grid-template-columns: minmax(0, 1fr); } .apm3 { padding: 16px 18px; gap: var(--s-3); } }

/* v107 (Eva, 6 Nov: the live check, "slightly smaller so it doesn't take all the space"): a size down, and a narrower
   column next to the copy */
@media (min-width: 1180px) {
  .hx9__in { grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); }
  .lv { width: 100%; max-width: 580px; justify-self: end; }
}
@media (min-width: 681px) {
  .lv__stage { height: 448px; border-radius: 22px; }
  .lv__who { left: 18px; top: 18px; width: calc(46% - 18px); gap: 10px; padding: 14px 16px 16px; border-radius: 18px; }
  .lv__pv.pv { right: 18px; bottom: 18px; width: calc(54% - 8px); border-radius: 20px; }
}
.lv__wt { font-size: 0.9375rem; }
.lv__wl { font-size: 0.75rem; }
.lv__who .sol__ico { width: 32px; height: 32px; }
.lv__who .sol__ico svg { width: 16px; height: 16px; }
.lv__ask { padding: 7px 12px; font-size: 0.875rem; }
.lv__steps.tick { gap: 6px; }
.lv__steps.tick li { font-size: 0.875rem; }
.lv__pv .pv__top { padding: 6px var(--s-4); }
.lv__pv .pv__brand { font-size: 0.875rem; }
.lv__pv .pv__row { gap: 6px; padding: 10px var(--s-4); }
.lv__pv .pv__k { font-size: 0.8125rem; }
.lv__pv .aic__ins { gap: 5px; }
.lv__pv .pv__ai .ins { gap: 10px; padding: 5px 10px; border-radius: 12px; }
.lv__pv .ins__t { font-size: 0.8125rem; }
.lv__pv .ins__fam { padding: 1px 7px; font-size: 0.75rem; }
.lv__pv .ins__dot { width: 8px; height: 8px; }
.lv__pv .pv__dec .dec { padding: 3px 14px; font-size: 0.9375rem; }
.lv__pv .pv__why { font-size: 0.8125rem; }
.lv .lv__tab.day__node { min-height: 40px; padding: 0 14px 0 5px; font-size: 0.8125rem; }
.lv .lv__tab .sol__ico { width: 28px; height: 28px; }
.lv .lv__tab .sol__ico svg { width: 14px; height: 14px; }
.lv__play.day__play { min-height: 40px; padding: 0 12px; }
@media (min-width: 1180px) { .hx9__in { grid-template-columns: minmax(0, 1fr) minmax(560px, 0.86fr); } }
.lv .lv__tabs { gap: 6px; }
.lv .lv__tab.day__node { gap: 6px; padding-right: 12px; }
/* the pause button moves into the stage's free top-right corner, so the four tabs keep one row in every language */
@media (min-width: 681px) {
  .lv__play.day__play { position: absolute; top: 12px; right: 12px; z-index: 3; width: 36px; min-height: 36px; height: 36px; margin: 0; padding: 0; justify-content: center; border-radius: 50%; background: var(--c-ground); }
}

/* ================================================================ v108 (9 Nov 2026): the homepage differentiates on AI agents
   (Eva: "the 3 layers framework as the main design … very very simple to understand from first eye"; KYX "precisely
   explained"; the live check as section 2; the global map as section 3) */
/* ---- the hero's KYX layers: three plates, their three labels, KYX around the two identity layers ---- */
@media (min-width: 1180px) { .hx10 .hx9__in { grid-template-columns: minmax(0, 1fr) minmax(580px, 0.95fr); } }
.kyx { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: var(--s-3); width: 100%; max-width: 640px; margin: 0; min-width: 0; justify-self: end; }
.kyx__art.hw__art { width: 100%; max-width: 300px; aspect-ratio: 1 / 1.3; justify-self: center; }
.kyx__art .hw__plate { left: 4%; width: 70%; border-radius: 26px; }
.kyx__art .hw__plate--decide, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--decide { top: 2%; }
.kyx__art .hw__plate--infer, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--infer { top: 31%; }
.kyx__art .hw__plate--observe, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--observe { top: 60%; }
.js .kyx__art.hw__art[data-reveal]:not(.is-in) .hw__plate { top: 31%; }
.kyx__art .hw__plate--observe { border-color: rgba(81, 0, 255, 0.4); background: linear-gradient(135deg, rgba(81, 0, 255, 0.16), rgba(143, 176, 255, 0.26)); }
.kyx__art .hw__plate--infer { border-color: rgba(255, 0, 170, 0.32); background: linear-gradient(135deg, rgba(255, 0, 170, 0.1), rgba(201, 166, 255, 0.22)); }
.kyx__art .hw__plate--decide { border-color: rgba(81, 0, 255, 0.55); background: linear-gradient(135deg, rgba(81, 0, 255, 0.28), rgba(255, 143, 196, 0.24)); box-shadow: 0 30px 60px -30px rgba(81, 0, 255, 0.55); }
.kyx__art .hwc { padding: 4px 8px; background: var(--c-accent); box-shadow: none; color: var(--c-on-accent); font-size: 0.75rem; }
.kyx__art .hw__plate--infer .hwc { background: rgba(81, 0, 255, 0.62); }
.kyx__art .hw__plate--observe .hwc { background: rgba(81, 0, 255, 0.82); }
.kyx__art .hw__plate--decide .hw__chips { grid-template-columns: minmax(0, 1fr); inset: 30%; }
.kyx__art .hw__plate--decide .hwc { padding: 8px 10px; font-size: 0.875rem; background: var(--c-ink); }
.kyx__side { display: grid; gap: var(--s-3); min-width: 0; }
.kyx__grp { display: grid; gap: var(--s-2); padding: 12px; border-radius: 20px; background: rgba(81, 0, 255, 0.045); box-shadow: inset 0 0 0 1.5px rgba(81, 0, 255, 0.3); }
.kyx__x { display: flex; align-items: baseline; gap: 8px; margin: 2px 4px 0; }
.kyx__x strong { font-size: 1.375rem; font-weight: var(--fw-heavy); line-height: 1; letter-spacing: -0.03em; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kyx__x span { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); }
.kyx__xd { margin: 0 4px 4px; font-size: 0.8125rem; line-height: 1.4; color: var(--c-ink-2); }
.kyx__list { list-style: none; display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.kyx__l { --layer-c: var(--c-layer-observe); position: relative; display: grid; gap: 1px; padding: 10px 12px 11px 18px; border-radius: 13px; background: var(--c-ground); box-shadow: 0 0 0 1px var(--c-line); }
.kyx__l::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--layer-c); }
.kyx__l--decide { --layer-c: var(--c-accent); box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.28), 0 14px 30px -22px rgba(81, 0, 255, 0.55); }
.kyx__l--infer { --layer-c: var(--c-layer-decide); }
.kyx__l p { margin: 0; }
.kyx__k { display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--c-muted); }
.kyx__l--decide .kyx__k { color: var(--c-accent-ink); }
.kyx__k .sol__new { margin: 0; }
.kyx__t { font-size: 1rem; font-weight: var(--fw-heavy); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); }
.kyx__d { font-size: 0.8125rem; line-height: 1.4; color: var(--c-ink-2); }
@media (max-width: 1179px) { .kyx { justify-self: center; width: min(100%, 640px); } }
@media (max-width: 600px) {
  .kyx { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kyx__art.hw__art { max-width: 230px; margin-bottom: -12px; }
}

/* ---- section 2: the live check ---- */
.lv2__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: var(--s-6) clamp(2rem, 0rem + 4vw, 5rem); }
.lv2__head { margin-bottom: 0; }
.lv2__go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-4); font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration: none; }
.lv2__go:hover { color: var(--c-ink); text-decoration: none; }
.lv2__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.lv2__go:hover svg { transform: translateX(3px); }
.lv2 .lv { justify-self: end; }
@media (max-width: 1023px) { .lv2__grid { grid-template-columns: minmax(0, 1fr); } .lv2 .lv { justify-self: center; } }

/* ---- section 3: the global map ---- */
.gl2 .cu-map { max-width: 1040px; margin-top: var(--s-4); }
.gl2 .cu-pin--scale .cu-pin__dot { opacity: 0.78; }
.gl2__more { margin: var(--s-4) 0 0; text-align: center; }
.gl2__more a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration: none; }
.gl2__more a:hover { color: var(--c-ink); text-decoration: none; }
.gl2__more svg { width: 16px; height: 16px; }
.kyx__art .hw__plate--decide .hwc { background: var(--c-accent); box-shadow: 0 8px 18px -8px rgba(81, 0, 255, 0.7); }
.kyx__art.hw__art { max-width: 320px; }
.kyx__art .hw__plate { left: 2%; width: 74%; }
.kyx__art .hw__plate:not(.hw__plate--decide) .hwc { padding: 3px 5px; font-size: 0.6875rem; }
.kyx__art .hw__plate:not(.hw__plate--decide) .hw__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .kyx__art.hw__art { max-width: 210px; margin-bottom: -8px; } }
/* v108b (Eva: the chips on the plates were "not readable"): they stand upright on each plate, facing the reader */
.kyx__art .hw__plate .hw__chips, .kyx__art .hw__plate:not(.hw__plate--decide) .hw__chips { inset: 30% 10%; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 6px; transform: rotateZ(45deg) rotateX(-58deg); }
.kyx__art .hw__plate--decide .hw__chips { inset: 34% 30%; grid-template-columns: minmax(0, 1fr); }
.kyx__art .hw__plate .hwc, .kyx__art .hw__plate:not(.hw__plate--decide) .hwc { padding: 4px 6px; border-radius: 8px; font-size: 0.75rem; line-height: 1.2; box-shadow: 0 6px 14px -8px rgba(40, 0, 140, 0.6); }
.kyx__art .hw__plate--decide .hwc { padding: 6px 10px; font-size: 0.9375rem; }

/* v108 (Eva: "all the use cases are applicable for human + agent"): on each use case, the problem when an AI agent acts */
.uc2-agent { padding-block: clamp(1rem, 0.5rem + 1.5vw, 2.25rem); }
.uc2-agent__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: clamp(1.25rem, 0.75rem + 1.5vw, 2rem) clamp(1.25rem, 0.5rem + 2vw, 2.5rem); border-radius: 24px; background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgba(81, 0, 255, 0.22); }
.uc2-agent__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-ground); color: var(--c-accent); box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.16); }
.uc2-agent__ico svg { width: 24px; height: 24px; }
.uc2-agent__b { display: grid; gap: 6px; min-width: 0; }
.uc2-agent__b h2 { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem); line-height: 1.2; letter-spacing: -0.02em; }
.uc2-agent__b p { margin: 0; max-width: 62ch; line-height: 1.5; color: var(--c-ink-2); }
.uc2-agent__go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.uc2-agent__go:hover { color: var(--c-ink); text-decoration: none; }
.uc2-agent__go svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.uc2-agent__go:hover svg { transform: translateX(3px); }
@media (max-width: 760px) { .uc2-agent__card { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } .uc2-agent__ico { width: 44px; height: 44px; } }
/* the agent band stays compact: it follows "What Monnai checks" closely */
.uc2-agent { padding-block: 0 clamp(1rem, 0.5rem + 1.2vw, 2rem); }
.uc2-agent__card { padding-block: clamp(1rem, 0.75rem + 0.8vw, 1.5rem); }
.uc2-agent__b p { font-size: var(--fs-small); }
/* v108c (Ravish: two levels, Agent Pass first; no KYX): the box's title says what the two levels are */
.kyx__x--levels { display: block; margin: 2px 4px 2px; font-size: var(--fs-small); font-weight: var(--fw-heavy); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-accent-ink); }
.kyx__l--infer .kyx__k { color: var(--c-ink-2); }
.kyx__art .hw__plate--decide .hw__chips { inset: 34% 22%; }
.kyx__art .hw__plate--decide .hwc { white-space: nowrap; font-size: 0.875rem; }

/* v108e (Eva: the lowest plate "shouldn't cut"): the figure's box now holds all three plates, so no section edge clips them; on phones the four chips all show and "Agent Pass" fits */
.kyx__art.hw__art { aspect-ratio: 1 / 1.365; }
.kyx__art .hw__plate--decide, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--decide { top: -8.15%; }
.kyx__art .hw__plate--infer, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--infer { top: 19.47%; }
.kyx__art .hw__plate--observe, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--observe { top: 47.08%; }
.js .kyx__art.hw__art[data-reveal]:not(.is-in) .hw__plate { top: 19.47%; }
.kyx__art .hwc:nth-child(n + 4) { display: block; }
@media (max-width: 600px) { .kyx__art.hw__art { max-width: 240px; margin-bottom: 8px; } .kyx__art .hw__plate { left: 13%; } }
/* v108e (Eva: use cases keep their first structure, plus one entry for AI agents): on wide screens the AI agents group sits under credit risk, the shortest column, instead of alone on a second row */
@media (min-width: 1081px) {
  .ind2-hub__groups--uc > #fraud, .ind2-hub__groups--uc > #identity { grid-row: span 2; }
  .ind2-hub__groups--uc > #ai-agents { grid-column: 1; }
}
/* v108f (Eva: “go close to what Ravish wants”): How Monnai works shows his two levels; the agent chips and legend key in the brand blue, the Agent Pass link on its level */
.hwc--agent { background: var(--c-accent); box-shadow: inset 0 0 0 1px rgba(201, 166, 255, 0.6); }
.hwk--agent { background: var(--c-accent); box-shadow: 0 0 0 1px rgba(201, 166, 255, 0.7); }
.hw__go { justify-self: start; margin-top: var(--s-1); font-size: var(--fs-small); }
@media (max-width: 600px) { .hw__badge { flex-wrap: nowrap; align-items: flex-start; border-radius: 14px; } .hw__badge svg { flex: none; margin-top: 2px; } }

/* v108g (Ravish, 9 Nov: “the graphic on the right hand side (3 layers) is not 3d enough (check the original one)”; Eva, with the
   Agent Pass launch page's picture: “I think we want that”): wide translucent plates as on that page, the signals lying on them as
   bars, the identity checks on the middle plate, the agent at the center of the top plate */
@media (min-width: 601px) { .kyx { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); max-width: 700px; } }
.kyx__art.hw__art { max-width: 380px; aspect-ratio: 1 / 1.42; perspective: 1600px; }
.kyx__art .hw__plate { left: 3%; width: 80%; border-width: 1.5px; border-radius: 30px; }
.kyx__art .hw__plate--decide, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--decide { top: -10.56%; }
.kyx__art .hw__plate--infer, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--infer { top: 16.9%; }
.kyx__art .hw__plate--observe, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--observe { top: 44.37%; }
.js .kyx__art.hw__art[data-reveal]:not(.is-in) .hw__plate { top: 16.9%; }
.kyx__art .hw__plate--observe { background: linear-gradient(135deg, rgba(143, 176, 255, 0.5), rgba(201, 166, 255, 0.44)); border-color: rgba(81, 0, 255, 0.5); box-shadow: -22px 22px 44px rgba(81, 0, 255, 0.2); }
.kyx__art .hw__plate--infer { background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(246, 242, 255, 0.5)); border-color: rgba(201, 166, 255, 0.75); box-shadow: -22px 22px 44px rgba(81, 0, 255, 0.08); }
.kyx__art .hw__plate--decide { background: linear-gradient(135deg, rgba(251, 157, 0, 0.2), rgba(255, 0, 170, 0.14) 50%, rgba(201, 166, 255, 0.36)); border-color: rgba(255, 208, 138, 0.85); box-shadow: -22px 22px 44px rgba(255, 0, 170, 0.14); }
/* the bars lie on the plate (no counter-rotation), two to a row */
.kyx__art .hw__plate .hw__chips, .kyx__art .hw__plate:not(.hw__plate--decide) .hw__chips { transform: none; inset: 13% 9%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 7px 9px; }
.kyx__art .hw__plate .hwc, .kyx__art .hw__plate:not(.hw__plate--decide) .hwc { display: block; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; line-height: 1.25; text-align: left; background: rgba(81, 0, 255, 0.86); color: var(--c-on-accent); box-shadow: -2px 2px 0 rgba(40, 0, 140, 0.25); }
.kyx__art .hw__plate .hwc--biz { background: #D98400; }
.kyx__art .hw__plate--infer .hwc { background: rgba(81, 0, 255, 0.6); box-shadow: none; }
.kyx__art .hw__plate--infer .hwc--biz { background: rgba(217, 132, 0, 0.72); }
.kyx__art .hwc:nth-child(n + 4) { display: block; }
/* the agent at the center of the top plate, with the person, business, context and transaction around it */
.kyh { position: absolute; inset: 0; }
.kyh::before, .kyh::after { content: ""; position: absolute; border: 0 dashed rgba(81, 0, 255, 0.3); }
.kyh::before { left: 20%; right: 20%; top: 50%; border-top-width: 1.5px; }
.kyh::after { top: 20%; bottom: 20%; left: 50%; border-left-width: 1.5px; }
.kyh__ring { position: absolute; left: 25%; top: 25%; width: 50%; height: 50%; border-radius: 50%; border: 1.5px dashed rgba(81, 0, 255, 0.32); }
.kyh__core { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFFFFF 0%, #F6EEFF 32%, #DEC4FF 70%, #C9A6FF 100%); box-shadow: -10px 10px 22px rgba(81, 0, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.85); font-size: 0.8125rem; font-weight: var(--fw-heavy); color: var(--c-accent-ink); }
.kyh__c { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; }
.kyx__art .kyh .hwc { padding: 3px 9px; font-size: 0.6875rem; background: rgba(81, 0, 255, 0.72); }
.kyx__art .kyh .hwc--biz { background: rgba(217, 132, 0, 0.85); }
.kyh__c--p { left: 50%; top: 12%; }
.kyh__c--b { left: 88%; top: 50%; }
.kyh__c--x { left: 12%; top: 50%; }
.kyh__c--t { left: 50%; top: 88%; }
@media (max-width: 600px) { .kyx__art.hw__art { max-width: 300px; margin-bottom: 8px; } .kyx__art .hw__plate { left: 10%; } }
/* v108g, closer to the launch page's picture (Eva: “use this … just not the black tags as it's already on the side”): a steeper
   view, long signal bars, a faded middle plate, the agent as a sphere inside its rings */
.kyx__art .hw__plate { left: 2%; width: 82%; border-radius: 34px; transform: rotateX(60deg) rotateZ(-45deg); }
.kyx__art .hw__plate--observe { background: linear-gradient(160deg, rgba(178, 190, 255, 0.62), rgba(214, 200, 255, 0.56)); border-color: rgba(90, 110, 255, 0.62); box-shadow: -26px 26px 52px rgba(81, 0, 255, 0.16); }
.kyx__art .hw__plate--infer { background: linear-gradient(135deg, rgba(255, 244, 250, 0.5), rgba(246, 242, 255, 0.42)); border-color: rgba(214, 180, 220, 0.7); box-shadow: -26px 26px 52px rgba(81, 0, 255, 0.05); }
.kyx__art .hw__plate--decide { background: linear-gradient(135deg, rgba(251, 214, 160, 0.42) 0%, rgba(232, 192, 232, 0.46) 45%, rgba(214, 192, 255, 0.52) 100%); border-color: rgba(255, 208, 138, 0.6); box-shadow: -26px 26px 52px rgba(255, 0, 170, 0.1); }
.kyx__art .hw__plate .hw__chips, .kyx__art .hw__plate:not(.hw__plate--decide) .hw__chips { inset: 15% 7% 11%; gap: 6px 9px; }
.kyx__art .hw__plate--infer .hw__chips { inset: 26% 9% 22%; gap: 9px 11px; }
.kyx__art .hw__plate .hwc, .kyx__art .hw__plate:not(.hw__plate--decide) .hwc { padding: 5px 12px; font-size: 0.75rem; font-weight: var(--fw-heavy); background: rgba(81, 0, 255, 0.86); box-shadow: none; }
.kyx__art .hw__plate .hwc--biz { background: rgba(217, 132, 0, 0.9); }
.kyx__art .hw__plate--infer .hwc { background: rgba(81, 0, 255, 0.42); }
.kyx__art .hw__plate--infer .hwc--biz { background: rgba(217, 132, 0, 0.42); }
.kyh::before, .kyh::after { border-color: rgba(81, 0, 255, 0.26); }
.kyh::before { left: 16%; right: 16%; }
.kyh::after { top: 16%; bottom: 16%; }
.kyh__ring { left: 28%; top: 28%; width: 44%; height: 44%; border: 1.5px solid rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px rgba(81, 0, 255, 0.08); }
.kyh__ring::after { content: ""; position: absolute; inset: -36%; border-radius: 50%; border: 1.5px dashed rgba(81, 0, 255, 0.2); }
.kyh__core { left: 36.5%; top: 36.5%; width: 27%; height: 27%; background: radial-gradient(circle at 35% 28%, #FFFFFF 0%, #F4E6FF 30%, #DCBDF2 64%, #BE92E6 100%); box-shadow: -12px 12px 26px rgba(81, 0, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.kyx__art .kyh .hwc { padding: 3px 10px; font-size: 0.6875rem; background: rgba(110, 70, 230, 0.55); }
.kyx__art .kyh .hwc--biz { background: rgba(217, 150, 70, 0.6); }
@media (max-width: 600px) { .kyx__art.hw__art { max-width: 280px; } .kyx__art .hw__plate { left: 11%; } }
/* v108g: room for the larger plates (the copy column gives a little), and four figures in one row (Ravish: 100M+ businesses) */
@media (min-width: 1180px) { .hx10 .hx9__in { grid-template-columns: minmax(0, 0.9fr) minmax(620px, 1.1fr); } .kyx { max-width: 760px; } }
.kyx__art.hw__art { max-width: 420px; }
.hx5.hx9 .hx10__figs { grid-template-columns: repeat(4, minmax(0, auto)); }
.hx5.hx9 .hx10__figs li { padding-right: var(--s-5); margin-right: var(--s-5); }
.hx5.hx9 .hx10__figs strong { font-size: clamp(1.625rem, 1rem + 1.3vw, 2.375rem); }
@media (max-width: 520px) { .hx5.hx9 .hx10__figs { grid-template-columns: repeat(2, minmax(0, auto)); row-gap: var(--s-4); } .hx5.hx9 .hx10__figs li:nth-child(2) { margin-right: 0; padding-right: 0; border-right: 0; } }
.kyx__art .hw__plate:not(.hw__plate--decide) .hwc--biz { background: rgba(217, 132, 0, 0.9); }
.kyx__art .hw__plate--infer:not(.hw__plate--decide) .hwc { background: rgba(81, 0, 255, 0.42); }
.kyx__art .hw__plate--infer:not(.hw__plate--decide) .hwc--biz { background: rgba(217, 132, 0, 0.45); }
.kyx__art .hw__plate--decide, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--decide { top: -12.06%; }
.kyx__art .hw__plate--infer, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--infer { top: 15.4%; }
.kyx__art .hw__plate--observe, .js .kyx__art.hw__art[data-reveal].is-in .hw__plate--observe { top: 42.87%; }
.js .kyx__art.hw__art[data-reveal]:not(.is-in) .hw__plate { top: 15.4%; }
.kyh__ring { left: 24%; top: 24%; width: 52%; height: 52%; }
.kyh__ring::after { inset: -30%; }
.kyh__core { left: 33%; top: 33%; width: 34%; height: 34%; font-size: 0.9375rem; }
.kyx__art .kyh .hwc { padding: 4px 11px; font-size: 0.75rem; }
.kyh__c--p { left: 50%; top: 11%; }
.kyh__c--b { left: 89%; top: 50%; }
.kyh__c--x { left: 11%; top: 50%; }
.kyh__c--t { left: 50%; top: 89%; }
@media (max-width: 600px) { .kyx__art.hw__art { max-width: 300px; } }
@media (max-width: 420px) { .kyx__art.hw__art { max-width: 264px; } }   /* v108h: the plates' corners stay inside 360 px screens (Agent Pass page) */

/* v108i (Eva, 9 Nov: “less text on the first section / screen of the home page: use less text on the right”, after a hero
   exploration): no list beside the plates; each plate carries one short label, linked to it by a dashed line */
.kyx.kyx--lab { display: block; width: 100%; max-width: 720px; }
.kyx__stage { position: relative; }
/* Each label keeps a readable width (--lw); the plates take the rest. Their projected tips reach 1.16 × the art's width, measured
   from 0.15 × that width to its left, so the dashed line (--lc) ends on each tip. Tip heights: 16.8%, 44.2%, 71.7% of the art. */
@media (min-width: 601px) {
  .kyx__stage { --lw: clamp(204px, 30%, 224px); --lc: 32px; }
  .kyx--lab .kyx__art.hw__art { justify-self: start; width: calc((100% - var(--lw) - var(--lc)) / 1.16); max-width: none; margin: 0 0 0 calc((100% - var(--lw) - var(--lc)) * 0.1293); }
  .kyx__lab { position: absolute; right: 0; width: var(--lw); transform: translateY(-50%); }
  .kyx__lab::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--lc); border-top: 1.5px dashed #C9B6F4; }
  .kyx__lab--decide { top: 16.8%; }
  .kyx__lab--infer { top: 44.2%; }
  .kyx__lab--observe { top: 71.7%; }
}
.kyx__lab { z-index: 1; display: grid; gap: 2px; margin: 0; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 18px 40px -22px rgba(60, 20, 120, 0.55), inset 0 0 0 1px var(--c-line); text-align: left; }
.kyx__lab b { font-size: 1rem; font-weight: var(--fw-heavy); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); }
.kyx__lab small { font-size: 0.8125rem; line-height: 1.35; color: var(--c-muted); }
@media (max-width: 1179px) { .kyx.kyx--lab { justify-self: center; width: min(100%, 680px); } }
@media (max-width: 600px) {
  .kyx--lab .kyx__art.hw__art { margin: 0 auto 8px; }
  .kyx__lab { margin-top: 8px; padding: 9px 13px; }
}

/* v108j (Eva, 9 Nov: “keep the risk features in the figures”; “the second section title is cut when you reach the page … I'd like to see
   it a bit more, to encourage to scroll”): the four figures come back (the v108g rules apply again); the live check's title starts level
   with the top of its card instead of halfway down it, and the section starts a little closer to the hero */
@media (min-width: 1024px) { .lv2__grid { align-items: start; } }
[data-page="home"] .section.lv2 { padding-top: calc(var(--sec5-y) * 0.6); }

/* v108k (Eva, 9 Nov: “a colour code on the points… for the different segments… to also show diversity”): each customer dot
   takes its segment's colour, the Industries menu's three groups, named in a key under the map. The three colours keep 3:1
   or more against the page, and white numbers stay readable on the Customers page's numbered dots. */
:root { --c-seg-fs: #5100FF; --c-seg-pc: #D3175A; --c-seg-dp: #B45309; }
.cu-pin--fs, .seg-key__fs { --kc: var(--c-seg-fs); }
.cu-pin--pc, .seg-key__pc { --kc: var(--c-seg-pc); }
.cu-pin--dp, .seg-key__dp { --kc: var(--c-seg-dp); }
.cu-map figcaption { margin: 0; }
.seg-key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin: var(--s-4) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--c-ink-2); }
.seg-key li { display: inline-flex; align-items: center; gap: var(--s-2); }
.seg-key i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--kc); box-shadow: 0 0 0 2px var(--c-ground); }

/* v108l (Eva, 9 Nov: “do the changes”, Ravish's two levels on the Agent Pass page): the parts carry their level number
   (1 for the agent, 2 around it), each example says its level, the table's columns sit under their level */
.ap1__lv { position: absolute; top: -9px; left: -9px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-ink-2); color: var(--c-ground); font-size: 0.75rem; font-weight: var(--fw-bold); line-height: 1; box-shadow: 0 0 0 3px var(--c-panel); pointer-events: none; }
.ap1__node--agent .ap1__lv { background: var(--c-accent); color: var(--c-on-accent); }
.ap1__lvl { margin: 0 0 6px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.ap1__lvl--1 { color: var(--c-accent-ink); }
.ap3 .ap3__lv th, .ap3 .ap3__lv td { padding: 16px 8px 10px; border-bottom: 0; font-size: var(--fs-micro); font-weight: var(--fw-bold); white-space: nowrap;
  background-image: linear-gradient(var(--lv-c), var(--lv-c)); background-size: calc(100% - 16px) 2px; background-position: center bottom; background-repeat: no-repeat; }
.ap3 .ap3__lv td { background-image: none; }
.ap3 .ap3__lv1 { --lv-c: var(--c-accent); color: var(--c-accent-ink); }
.ap3 .ap3__lv2 { --lv-c: var(--c-line); color: var(--c-ink-2); }
.ap3 .ap3__lv + tr th { padding-top: 12px; }
@media (max-width: 600px) { .ap3__lvt { display: none; } .ap3 .ap3__lv th { padding-inline: 2px; background-size: calc(100% - 6px) 2px; }
  .ap3 .ap3__lv > td:first-child { width: 34%; }   /* the fixed layout takes its widths from this first row: the row names keep their 34% */ }

/* v133 (Eva: “the exact same privacy policy AND terms that are on the current monnai.com. Nothing else.”): the legal pages are
   the PDFs' title and text in one reading column, no contents list beside them */
.lg-plain { max-width: calc(46rem + 2 * var(--gutter, 24px)); }
.lg-layout.lg-plain { display: block; padding-bottom: var(--s-8); }

/* v133 (Eva, 10 Nov: “a larger banner with all four families of product at the top without inconsistencies, and the
   small ‘ad’ … below the only product of agent pass, starting from the top bottom so it looks a bit modern, and no
   ‘new’ label”; “same for the use cases … all families split in 4 columns … the start here content … at the bottom”;
   “the small question under families names are too far, reduce slightly the margin”). Products: Consumer Risk
   Intelligence (with Risk Score), Identity Verification (KYC), Business Risk Intelligence (KYB) and Know Your Agent
   (KYA) side by side, each column the same shape: its name, its question just under it, its products; the Agent Pass
   card under its product, filling the column down to its foot. Use cases: Credit, Fraud, Identity and AI agents in the
   same four-column frame. How it fits and Start here: one quiet line along the bottom of each menu. */
.mm-panel--tiles :is(.mm-flat--prod4, .mm-flat--uc4col) { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0; }
.mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; column-gap: var(--s-6); row-gap: 0; align-items: stretch; padding-bottom: var(--s-5); }
:is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) > .mm-col { position: relative; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
:is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) > .mm-col + .mm-col::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--s-6) / -2); border-left: 1px solid var(--c-line); }
:is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-g { row-gap: 0; }
.mm-panel :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-g > .mm-h { margin: 0 0 var(--s-3); padding: 0; border: 0; line-height: 1.3; }
.mm-panel .mm-flat__groups--prod4 .mm-g > .mm-h { margin-bottom: 0; }
.mm-flat__groups--prod4 .mm-desc { min-height: 0; margin: 2px 0 var(--s-3); line-height: 1.35; }
.mm-flat__groups--prod4 .mm-g--bri { padding-top: 0; border-top: 0; }
.mm-flat__groups--prod4 .mm-g--rs { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }
/* every tile one height, its name in the same place, with or without a short line under it */
.mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-g__list { gap: 2px; }
.mm-panel--tiles .mm-flat__groups--prod4 .mm-g__list .mm-link--tile { align-items: start; height: 56px; min-height: 0; padding-block: 5px; }
.mm-panel--tiles .mm-flat__groups--prod4 .mm-link--tile .mm-ico { margin-top: 0; }
.mm-panel--tiles .mm-flat__groups--prod4 .mm-link--tile .mm-tx { padding-top: 7px; }
/* the Agent Pass card: under its product, down to the foot of the column; picture on top, one line, the way in */
.mm-col--kya { gap: var(--s-3); }
.mm-promo.mm-promo--col { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 230px; margin: 0; padding: 0 var(--s-4) var(--s-4); border-radius: 16px; }
.mm-promo--col .mm-promo__img { flex: 1 1 auto; height: auto; min-height: 120px; margin: 0 calc(-1 * var(--s-4)) var(--s-2); }
.mm-promo--col .mm-promo__img img { object-position: 50% 70%; transform: scale(1.12); }
.mm-promo--col.mm-promo--img:hover .mm-promo__img img, .mm-promo--col.mm-promo--img:focus-visible .mm-promo__img img { transform: scale(1.18); }
.mm-promo--col .mm-promo__l { margin: 0; font-size: 1.0625rem; font-weight: var(--fw-heavy); line-height: 1.3; letter-spacing: -0.01em; color: var(--c-on-ink); text-wrap: balance; }
.mm-promo--col .mm-promo__go { margin-top: 2px; color: rgba(255, 255, 255, 0.86); }
/* the bottom line (How it fits, Start here) sits flush under the columns */
:is(.mm-flat--prod4, .mm-flat--uc4col) > .mm-fitsbar { grid-column: 1; }
/* Use cases: the tiles keep their two lines; the shortest columns simply end earlier */
.mm-panel--tiles .mm-flat__groups--uc4col .mm-link--tile { min-height: 56px; }
/* narrower desktop windows (the menu is mobile below 1101 px): tighter columns, smaller icons */
@media (max-width: 1279px) {
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) { column-gap: var(--s-5); }
  :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) > .mm-col + .mm-col::before { left: calc(var(--s-5) / -2); }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-link--tile { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-ico { width: 32px; height: 32px; }
  .mm-panel--tiles .mm-flat__groups--prod4 .mm-link--tile .mm-tx { padding-top: 6px; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-label { font-size: 1rem; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) :is(.mm-desc, .mm-line) { font-size: 0.8125rem; }
}

/* v133 (Eva, 10 Nov): Talk to an expert as one classic form that makes you want to fill it in. The title across the top;
   what happens next on a quiet panel on the left (three numbered steps); on the right the form, every field the same
   height and its label on its own line above it, the topic and the way to reply as one-tap choices, then the button
   with the privacy line beside it. No calendar, no “prototype” line. Phones: the form first, the steps after it. */
.contact.contact--one { width: min(1000px, calc(100% - 2 * var(--gutter))); }
.contact--one .contact__title { margin: var(--s-2) 0 0; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.12; text-wrap: balance; }
.contact__wrap { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr); gap: var(--s-6); margin-top: var(--s-5); align-items: start; }
.contact__intro { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: 20px; background: var(--c-panel); }
.contact__k { margin: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-muted); }
.contact__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.contact__steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.contact__steps li:not(:last-child)::after { content: ""; position: absolute; top: 36px; bottom: calc(-1 * var(--s-4) + 4px); left: 15.5px; border-left: 1px dashed var(--c-line-strong); }
.contact__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-ground); box-shadow: inset 0 0 0 1.5px var(--c-accent); color: var(--c-accent-ink); font-size: var(--fs-small); font-weight: var(--fw-heavy); }
.contact__steps li > span:last-child { display: grid; gap: 2px; padding-top: 4px; }
.contact__steps strong { font-size: var(--fs-body); font-weight: var(--fw-heavy); line-height: 1.3; color: var(--c-ink); }
.contact__steps strong + span { font-size: var(--fs-small); line-height: 1.45; color: var(--c-muted); }
.contact--one .contact__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); align-items: end; }
.contact--one .contact__set--wide { grid-column: 1 / -1; }
.contact--one .contact__field { gap: 6px; }
.contact--one .contact__field label { font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; }
.contact--one .contact__field .hint, .contact__set legend .hint { font-size: var(--fs-micro); font-weight: var(--fw-regular, 400); color: var(--c-muted); }
.contact--one .input { height: 48px; min-height: 48px; padding: 0 14px; font-size: 1rem; line-height: 1.2; }
.contact--one .textarea { min-height: 84px; padding: 12px 14px; font-size: 1rem; line-height: 1.45; }
.contact--one :is(.input, .textarea)::placeholder { color: var(--c-muted); opacity: 0.8; }
.contact__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact__set legend { float: left; width: 100%; margin: 0 0 var(--s-2); padding: 0; font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3; }
.contact__set .opts { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.contact--one .opt span { min-height: 40px; padding: 0 13px; font-size: var(--fs-small); }
.contact--one .contact__error { grid-column: 1 / -1; margin: 0; }
.contact__go { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-1); }
.contact--one .contact__form .contact__go .btn { justify-self: auto; flex: 0 0 auto; }
.contact__go .contact__note { flex: 1 1 220px; margin: 0; font-size: var(--fs-micro); line-height: 1.45; }
.contact__go .contact__note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.contact--one .contact__done { gap: var(--s-2); padding: var(--s-5); border-radius: 20px; }
.contact--one .contact__done .btn { justify-self: start; margin-top: var(--s-2); }
@media (max-width: 860px) { .contact__wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } .contact__intro { order: 2; } }
@media (max-width: 560px) { .contact--one .contact__form { grid-template-columns: minmax(0, 1fr); } .contact__intro { padding: var(--s-4); } }

/* v133 (Eva, 10 Nov): the newsletter's consent line, a box the visitor ticks themselves, under the email field */
.nl__c { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--c-ink-2); cursor: pointer; }
.nl__c input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--c-accent); cursor: pointer; }
.nl__c input[aria-invalid="true"] { outline: 2px solid var(--c-error-ink); outline-offset: 1px; }
.nl__err { font-size: 0.8125rem; font-weight: var(--fw-bold); color: var(--c-error-ink); }
/* v133: the four columns use the whole width of the menu (no right padding), and below 1366 px a narrower frame,
   smaller icons and gaps, so every name and line stays on one line at 1280 px in the four languages */
.mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) { padding-right: 0; }
@media (max-width: 1365px) {
  .mm-panel--tiles :is(.mm-flat--prod4, .mm-flat--uc4col) { padding-inline: 28px; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) { column-gap: var(--s-5); }
  :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) > .mm-col + .mm-col::before { left: calc(var(--s-5) / -2); }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-link--tile { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) .mm-ico { width: 32px; height: 32px; }
  .mm-panel--tiles :is(.mm-flat__groups--prod4, .mm-flat__groups--uc4col) :is(.mm-desc, .mm-line) { font-size: 0.8125rem; }
}

/* v133 (Eva, 10 Nov: a touch of AI agents in the mission): in Our story's crowd, a few faces are AI agents (the
   customers' own in violet, one bot among the risky ones), and the legend gains their key */
.msn__p--agent svg .msn__eye { fill: var(--c-tint-violet); }
.msn__p--agent.msn__p--fake svg .msn__eye { fill: var(--c-risk-soft); }
.msn__k--agent { background: var(--c-ground); box-shadow: inset 0 0 0 2px var(--c-accent); }
@media (prefers-reduced-motion: no-preference) { .js .msn:not(.is-in) .msn__p--agent svg .msn__eye { fill: #F3F1F7; } }

/* v135 (Eva, 10 Nov, for Ravish: “iso typing ‘types her phone number’ it should actually be the action on the website …
   stay consistent across all animations … more concrete to understand without too much to read”): each moment is the
   screen where it happens, a phone or a browser, the same frame in all four: who is acting (a chip), the page, two fields
   that fill in, one button that is pressed; then Monnai's card answers. With reduced motion, the filled-in screen. */
.lv__who.lvm { display: block; gap: 0; padding: 0; overflow: hidden; }
.lvm__bar { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-bottom: 1px solid var(--c-line); background: var(--c-panel); }
.lvm__dots { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.lvm__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-line-strong); }
.lvm__url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: var(--c-ground); box-shadow: inset 0 0 0 1px var(--c-line); font-size: 0.6875rem; line-height: 1.5; color: var(--c-muted); }
.lvm--phone .lvm__bar { justify-content: space-between; height: 26px; padding: 0 16px; border-bottom: 0; background: var(--c-ground); }
.lvm__time { font-size: 0.6875rem; font-weight: var(--fw-bold); color: var(--c-ink); }
.lvm__sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 9px; }
.lvm__sig i { width: 3px; border-radius: 1px; background: var(--c-ink); }
.lvm__sig i:nth-child(1) { height: 4px; } .lvm__sig i:nth-child(2) { height: 6px; } .lvm__sig i:nth-child(3) { height: 9px; }
.lvm__body { display: grid; gap: 7px; padding: 10px 14px 14px; }
.lvm--phone .lvm__body { padding-top: 4px; }
.lvm__actor { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 2px 10px 2px 2px; border-radius: 999px; background: var(--c-tint-violet); color: var(--c-accent-ink); font-size: 0.75rem; font-weight: var(--fw-bold); line-height: 1.4; }
.lvm__ai { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-ground); }
.lvm__ai svg { width: 12px; height: 12px; }
.lvm--bot .lvm__actor { background: var(--c-risk-soft); color: var(--c-risk-ink); }
.lvm__t { margin: 0; font-size: 0.9375rem; font-weight: var(--fw-heavy); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); }
.lvm__f { display: grid; gap: 3px; min-width: 0; }
.lvm__l { font-size: 0.6875rem; font-weight: var(--fw-bold); line-height: 1.3; color: var(--c-muted); }
.lvm__in { display: flex; align-items: center; min-width: 0; height: 30px; padding: 0 10px; border: 1.5px solid var(--c-line-strong); border-radius: 9px; background: var(--c-ground); overflow: hidden; }
.lvm__v { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; font-size: 0.8125rem; color: var(--c-ink); }
.lvm__btn { position: relative; display: grid; place-items: center; height: 32px; margin-top: 3px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: 0.8125rem; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; }
.lvm--bot .lvm__btn { background: var(--c-ink); color: var(--c-on-ink); }
@media (prefers-reduced-motion: no-preference) {
  .js .lv__scene .lvm__in { animation: lvmFocus 1050ms ease both; animation-delay: calc(450ms + var(--i, 0) * 1100ms); }
  .js .lv__scene .lvm__v { animation: lvmType calc(var(--n, 12) * 50ms) steps(var(--n, 12)) both; animation-delay: calc(550ms + var(--i, 0) * 1100ms); }
  .js .lv__scene .lvm__btn { animation: lvmPress 520ms var(--ease) both 2650ms; }
  .js .lv__scene .lvm--person .lvm__btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); animation: lvmTap 700ms ease-out both 2650ms; }
  /* Monnai's card answers once the button is pressed */
  .js .lv__scene .lv__pv { animation-delay: 2900ms; }
  .js .lv__scene .ins { animation-delay: calc(3150ms + var(--i, 0) * 220ms); }
  .js .lv__scene .pv__dec { animation-delay: 4100ms; }
}
@keyframes lvmType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes lvmFocus { 0% { border-color: var(--c-line-strong); box-shadow: none; } 12%, 88% { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } 100% { border-color: var(--c-line-strong); box-shadow: none; } }
@keyframes lvmPress { 0% { transform: scale(1); } 45% { transform: scale(0.94); filter: brightness(0.82); } 100% { transform: scale(1); filter: none; } }
@keyframes lvmTap { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(2.4); opacity: 0; } }
@media (forced-colors: active) { .lvm__in, .lvm__btn { border: 1px solid CanvasText; } }
@media (min-width: 681px) { .lv__who.lvm { width: calc(42% - 18px); } }   /* v135: the screen clear of Monnai's card */
/* v135 (Eva, 10 Nov: the Agent Pass card “could be squared to save a bit of space on the menu”): a square card under its
   product, not a column-high one */
.mm-promo.mm-promo--col { flex: 0 0 auto; aspect-ratio: 1 / 1; min-height: 0; max-width: 100%; }
.mm-promo--col .mm-promo__img { min-height: 0; }

/* v136 (Eva, 10 Nov: the test form “could be improve”): two numbered steps, the same circles as Talk to an expert's */
.tst-step { display: flex; align-items: center; gap: 10px; margin: var(--s-2) 0 0; font-size: var(--fs-small); font-weight: var(--fw-heavy); color: var(--c-ink); }
.tst-step__n { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--c-ground); box-shadow: inset 0 0 0 1.5px var(--c-accent); color: var(--c-accent-ink); font-size: 0.8125rem; font-weight: var(--fw-heavy); }
.tst-step + .field, .tst-step + .field--opts { margin-top: calc(-1 * var(--s-1)); }
.tst-form .form > .tst-step:not(:first-of-type) { padding-top: var(--s-3); border-top: 1px solid var(--c-line); }