/* ==========================================================================
   AI Hub design system, round 2 ("airy").  Static mockup, not production.
   One file, shared by every v2 page.  Page-specific rules go in css/<page>.css.

   Contents
    1  Tokens (colour, type, space, motion)
    2  Base, focus, skip link, container, sections, reveal
    3  Typography (eyebrow, display, h2, lead, italic accent)
    4  Buttons and text links
    5  Chips, tags, icon tile
    6  Header, mega-menus, mobile drawer
    7  Hero (split: headline left, intro right)
    8  Framed product window (+ video)
    9  Proof panel (U-08) + motion moment (counter and monthly fee)
   10  Hairline grid (U-09)
   11  Accordion (L-19)
   12  Pill tabs + split panel (L-13)
   13  Carousel + product card (U-16) and "Hear it" player
   14  System diagram (L-16 / D-04A)
   15  Deployment columns (L-23)
   16  Dark closing band (U-10)
   17  Footer (U-12)
   18  WhatsApp button
   19  Responsive + reduced motion
   20  Card hover (near-black on hover and focus)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Colour: coral is for FILLS and BUTTONS (white text, 16px+ semibold).
     --coral-text is for small coral TEXT on light backgrounds (AA).
     --coral-lt is for small coral text on dark panels. */
  --coral: #C96A5A;
  --coral-hover: #BE6252;
  --coral-fill: #C0523F;          /* FILL behind white text (4.65:1); --coral stays for lines, accents and icons */
  --coral-fill-hover: #A94632;    /* hover for that fill (5.8:1) */
  --coral-text: #B84B39;
  --coral-lt: #E4917F;
  --coral-soft: #F6E6E1;          /* tint behind coral icons / chips */

  /* Warm paper surfaces */
  --paper: #FAF9F5;               /* default page */
  --paper-2: #F7F3ED;             /* alternate section */
  --tan: #EFE8DD;                 /* soft tan: card bodies, icon tiles */
  --tan-2: #E6DCCB;
  --white: #FFFFFF;

  /* Ink */
  --ink: #141413;
  --ink-2: #4A4741;               /* secondary text on paper (AA) */
  --ink-3: #6B655C;               /* tertiary text on paper (AA) */

  /* Dark panels */
  --dark: #1B1714;
  --dark-2: #211C19;
  --dark-3: #2A2420;
  --on-dark: #F2EFE6;
  --on-dark-2: rgba(242, 239, 230, .74);
  --on-dark-3: rgba(242, 239, 230, .58);

  /* Hairlines */
  --line: rgba(20, 20, 19, .12);
  --line-strong: rgba(20, 20, 19, .24);
  --line-dark: rgba(242, 239, 230, .12);
  --line-dark-strong: rgba(242, 239, 230, .24);

  /* Type */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --fs-display: clamp(2.6rem, 4.2vw + 1rem, 4.5rem);   /* h1 */
  --fs-h2: clamp(2rem, 2.2vw + 1.2rem, 3rem);          /* section h2 */
  --fs-h3: clamp(1.25rem, .6vw + 1.05rem, 1.5rem);
  --fs-lead: clamp(1.0625rem, .35vw + 1rem, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-micro: .8125rem;

  /* Space: calm, not sparse */
  --section-y: clamp(44px, 4.4vw, 64px);    /* section padding top and bottom (tightened, round 3) */
  --gap-head: clamp(28px, 3vw, 40px);      /* heading block -> content */
  --gap-block: clamp(32px, 3.4vw, 48px);   /* between sub-blocks inside one section */
  --container: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --measure: 640px;                         /* max width of text blocks */
  --header-h: 76px;

  /* Shape and depth */
  --r-sm: 10px;
  --r-md: 12px;                             /* framed windows */
  --r-lg: 20px;
  --shadow-frame: 0 30px 60px -32px rgba(20, 20, 19, .22);   /* framed product UI only */

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: .25s;
  --focus: #141413;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer { --focus: #F2EFE6; color: var(--on-dark); }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* Section: one idea per section. Variants set the background only. */
.section { padding-block: var(--section-y); position: relative; }
.section--paper-2 { background: var(--paper-2); }
.section--tan { --coral-text: #AE4534; }   /* 4.66:1 on the tan band; the page token is 4.21:1 there */
.section--dark { background: var(--dark); color: var(--on-dark); --focus: #F2EFE6; }
.section--flush-top { padding-top: 0; }
.section__head { display: grid; gap: 14px; margin-bottom: var(--gap-head); }
.section__head.center { justify-items: center; }
.section__head .lead { max-width: var(--measure); }
.stack-l > * + * { margin-top: var(--gap-block); }   /* big gap between sub-blocks of one section */

/* Reveal: fade + 8px translate. Disabled by reduced motion and by ?static=1 */
.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in, .js.no-reveal .reveal { opacity: 1; transform: none; }

/* ---------- 3. Typography ---------- */
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--coral-text); }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .eyebrow { color: var(--coral-lt); }
.display, .h2, .h3 { font-family: var(--font-serif); font-weight: 600; letter-spacing: -.015em; color: inherit; }
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.display--stack em, .h2--stack em { display: block; }
.h2 { font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); line-height: 1.25; }
/* The italic coral accent phrase: wrap it in <em> inside any heading */
.display em, .h2 em, .h3 em, .italic-accent { font-style: italic; font-weight: 500; color: var(--coral); }
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.center .lead, .cta-band .lead { text-wrap: balance; }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .lead { color: var(--on-dark-2); }
.small { font-size: var(--fs-small); color: var(--ink-3); }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .small { color: var(--on-dark-3); }
.micro { font-size: var(--fs-micro); letter-spacing: .02em; color: var(--ink-3); }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .micro { color: var(--on-dark-3); }

/* ---------- 4. Buttons and text links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 1.0625rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.btn .icon { width: 1.05em; height: 1.05em; transition: transform var(--t); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--coral-fill); color: #fff; }           /* the ONLY filled button style */
.btn--primary:hover { background: var(--coral-fill-hover); }
.btn--outline { border-color: var(--ink); color: var(--ink); }      /* secondary on light */
.btn--outline:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border-color: var(--line-dark-strong); color: var(--on-dark); }   /* secondary on dark */
.btn--ghost:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-block; padding-block: 11px; min-height: 44px; box-sizing: border-box;
  font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px;   /* one underline per wrapped line, never a bar through the box */
  transition: color var(--t);
}
.link-arrow .icon { display: inline-block; width: 1em; height: 1em; margin-left: 8px; vertical-align: -.125em; text-decoration: none; transition: margin-left var(--t); }   /* inline after the last word */
.link-arrow:hover { color: var(--coral-text); }
.link-arrow:hover .icon { margin-left: 12px; }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .link-arrow { color: var(--on-dark); }
:is(.on-dark, .section--dark, .hero, .proof, .flow-panel, .cta-band, .split__dark, .site-footer) .link-arrow:hover { color: var(--coral-lt); }

/* ---------- 5. Chips, tags, icon tile ---------- */
.chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--coral-soft); color: #A8402F; font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap; }   /* #A8402F: 5.0:1 on --coral-soft (--coral-text is 4.2:1) */
.tag { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-text); }
.icon-tile { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--white); color: var(--coral-text); border: 1px solid var(--line); }
.icon-tile .icon { width: 30px; height: 30px; stroke-width: 1.5; }

/* ---------- 6. Header, mega-menus, mobile drawer ---------- */
.site-header { position: sticky; top: 0; z-index: 200; background: rgba(250, 249, 245, .94); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; min-height: 44px; }
.logo img { width: 40px; height: 40px; border-radius: 10px; }
.logo span { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; }
.primary-nav > ul { display: flex; align-items: center; gap: 2px; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); transition: background var(--t), color var(--t); }
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link.active { background: var(--paper-2); color: var(--ink); }
.nav-link .icon { width: 14px; height: 14px; transition: transform var(--t); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 12px; place-items: center; }
.menu-toggle .icon { width: 22px; height: 22px; }

/* Mega-menu: a panel under the header. Icon + name + one-line descriptor per item. */
.mega {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, 6px);
  width: min(1080px, calc(100vw - 2 * var(--gutter)));
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 30px 60px -30px rgba(20, 20, 19, .3);
  padding: 28px 28px 20px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
  max-height: calc(100vh - var(--header-h) - 40px); overflow: auto;
}
.mega::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }   /* hover bridge */
.mega.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.mega--sm { width: 420px; }
.mega-grid { display: grid; gap: 40px; }
.mega--agents .mega-grid { grid-template-columns: 1fr; }
.mega--platforms .mega-grid { grid-template-columns: 1.8fr 1fr; }
.mega--solutions .mega-grid { grid-template-columns: 1fr 1fr; }
.mega-label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px 12px; }
.mega-label:not(:first-child) { margin-top: 24px; }
.mega-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.mega-list--1 { grid-template-columns: 1fr; }
.mega-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 12px; min-height: 44px; transition: background .15s; }
.mega-item:hover { background: var(--paper-2); }
.mi-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--coral-soft); color: var(--coral-text); display: grid; place-items: center; flex: none; }
.mi-icon .icon { width: 19px; height: 19px; }
.mega-item strong { display: block; font-size: .9688rem; font-weight: 600; line-height: 1.3; }
.mega-item .d { display: block; font-size: .875rem; color: var(--ink-3); line-height: 1.45; margin-top: 3px; }
.mega-foot { margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }

/* Mobile drawer (below 1060px the primary nav is replaced by this) */
.mobile-menu { display: none; }
@media (max-width: 1060px) {
  .primary-nav { display: none; }
  .nav-actions .btn { display: none; }
  .menu-toggle { display: grid; }
  .mega { display: none; }
  .mobile-menu { position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 190; background: var(--paper); overflow-y: auto; padding: 8px var(--gutter) 48px; }
  .mobile-menu.open { display: block; }
  .mobile-menu details { border-bottom: 1px solid var(--line); }
  .mobile-menu summary { list-style: none; min-height: 60px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary .icon { transition: transform var(--t); }
  .mobile-menu details[open] summary .icon { transform: rotate(180deg); }
  .mm-group { padding-bottom: 16px; }
  .mm-group h3 { font-family: var(--font-sans); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 16px 0 4px; font-weight: 600; }
  .mm-group a { display: block; padding: 11px 2px; min-height: 44px; color: var(--ink-2); }
  .mobile-menu a.mm-top { display: flex; align-items: center; min-height: 60px; font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; border-bottom: 1px solid var(--line); }
  .mobile-menu .btn { width: 100%; margin-top: 28px; }
}

/* ---------- 7. Hero, split layout (Direction B: headline left, intro + CTAs right) ---------- */
.hero { background: var(--dark); color: var(--on-dark); --focus: #F2EFE6; padding-block: clamp(44px, 4.6vw, 64px) clamp(48px, 5vw, 72px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.6fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.hero__title { display: grid; gap: 24px; }
.hero__side { display: grid; gap: 28px; padding-bottom: 10px; }
.hero__side .lead { max-width: 30em; }
.hero__actions { display: grid; gap: 18px; justify-items: start; }

/* ---------- 8. Framed product window ---------- */
.frame { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--white); overflow: hidden; box-shadow: var(--shadow-frame); }
.frame__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.frame__body { position: relative; background: var(--white); }
.frame__body img, .frame__body video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--white); }
/* --crop-right: drops the left sidebar of a portal screenshot (it lists other organisations) */
.frame__body--crop-right img { aspect-ratio: 1010 / 720; object-position: right top; }
.frame--xl { max-width: var(--container); margin-inline: auto; }
/* Paired frames (homepage section 2): two same-size frames side by side, each with a label and one line. Stacks under 760px. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); max-width: var(--container); margin-inline: auto; }
.duo__item { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.duo__item .frame { box-shadow: var(--shadow-frame); }
.duo__cap { display: grid; gap: 4px; }
.duo__t { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
.duo__d { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; max-width: 34em; text-wrap: balance; }

/* ---------- 9. Proof panel (U-08): italic sentence, three numbers, thin trust line ---------- */
.proof { background: var(--dark); color: var(--on-dark); --focus: #F2EFE6; border-radius: var(--r-lg); padding: clamp(40px, 5.6vw, 72px) clamp(24px, 5vw, 72px); text-align: center; }
.proof__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 2vw + 1.1rem, 2.75rem); line-height: 1.25; max-width: 18em; margin-inline: auto; text-wrap: balance; }
.proof__stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: clamp(32px, 4vw, 52px) auto; max-width: 880px; }
.proof__stat { padding: 8px 24px; border-left: 1px solid var(--line-dark-strong); }
.proof__stat:first-child { border-left: 0; }
.proof__num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(3rem, 4vw + 1rem, 4.75rem); line-height: 1; color: var(--coral); }
.proof__label { margin-top: 12px; color: var(--on-dark-2); font-size: var(--fs-small); }
.proof__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin-bottom: clamp(40px, 5vw, 56px); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.proof__trust li + li::before { content: '\00B7'; margin: 0 14px; color: var(--coral-lt); }

/* Motion moment (section 2): headline, animated users counter beside a calm "monthly fee" of 0.
   The only orchestrated motion on the page. Final state is the default markup (no JS, reduced motion, ?static=1). */
.proof__title { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.25rem, 3.4vw + 1rem, 3.75rem); line-height: 1.08; letter-spacing: -.02em; margin-top: 20px; text-wrap: balance; }
.proof__title em { font-style: italic; font-weight: 500; color: var(--coral); }
.proof__lead { max-width: 30em; margin: 24px auto 0; }
.moment { display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; margin: clamp(32px, 4vw, 52px) auto 0; }
.moment__cell { padding: 8px 24px; }
.moment__cell + .moment__cell { border-left: 1px solid var(--line-dark-strong); }
.moment__label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-2); }
.moment__fig { margin-top: 18px; display: flex; align-items: baseline; justify-content: center; gap: 10px; min-height: 1.1em; font-family: var(--font-serif); font-size: clamp(4rem, 6vw + 1rem, 7rem); line-height: 1.1; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.moment__num { display: inline-block; font-weight: 500; }
.moment__cur, .moment__per { font-family: var(--font-sans); font-size: clamp(.9375rem, 1vw + .5rem, 1.25rem); font-weight: 500; color: var(--on-dark-3); letter-spacing: .02em; }
.moment__num.is-counting { color: var(--on-dark-2); }
.moment__num.is-settling { animation: settle .9s var(--ease) both; }
.moment__inf { font-family: var(--font-serif); font-weight: 500; font-size: 1.45em; line-height: .7; display: inline-block; }
.moment--hold .moment__cell + .moment__cell .moment__fig { opacity: 0; transform: translateY(8px); }
.moment__fig.is-settling { animation: settle .9s var(--ease) both; }
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.proof__secondary { margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line-dark); }
.proof__stats--sm { margin: 0 auto clamp(32px, 4vw, 48px); max-width: 720px; }
.proof__stats--sm .proof__num { font-size: clamp(2rem, 2vw + 1rem, 2.75rem); }
.proof__stats--sm .proof__label { margin-top: 8px; font-size: .875rem; }

/* ---------- 10. Hairline grid (U-09): 3 columns, first cell dark ---------- */
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.hgrid__cell { padding: clamp(24px, 2.6vw, 36px); min-height: 180px; display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.hgrid__cell:nth-child(3n) { border-right: 0; }
.hgrid__cell:nth-last-child(-n+3) { border-bottom: 0; }
/* Cell-count modifiers (set by the template from the item count) so a grid never shows an empty bordered cell: 1 item = 1 column, 2 or 4 = two columns. Three or more stay on the three-column default. */
.hgrid--cols-1 { grid-template-columns: 1fr; }
.hgrid--cols-1 .hgrid__cell { border-right: 0; border-bottom: 0; min-height: 0; }
@media (min-width: 861px) {
  .hgrid--cols-2 { grid-template-columns: 1fr 1fr; }
  .hgrid--cols-2 .hgrid__cell:nth-child(3n) { border-right: 1px solid var(--line-strong); }
  .hgrid--cols-2 .hgrid__cell:nth-child(2n) { border-right: 0; }
  .hgrid--cols-2 .hgrid__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-strong); }
  .hgrid--cols-2 .hgrid__cell:nth-last-child(-n+2) { border-bottom: 0; }
}
.hgrid__cell .icon { width: 28px; height: 28px; color: var(--coral-text); stroke-width: 1.5; margin-bottom: 24px; }
.hgrid__cell h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.3125rem; line-height: 1.25; }
.hgrid__cell p { color: var(--ink-2); font-size: 1rem; }
.hgrid__cell--dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.hgrid__cell--dark .icon { color: var(--coral-lt); }
.hgrid__cell--dark p { color: var(--on-dark-2); }

/* ---------- 11. Accordion (L-19): <div class="acc" data-acc> items, first open, coral toggle ---------- */
.acc { border-top: 1px solid var(--line-strong); }
.acc__item { border-bottom: 1px solid var(--line-strong); }
.acc__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 16px 0; text-align: left; font-size: 1.1875rem; font-weight: 500; }
.acc__toggle { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--coral); flex: none; transition: transform var(--t) var(--ease); }
.acc__toggle::before, .acc__toggle::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.75px; background: #fff; transform: translate(-50%, -50%); }
.acc__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform var(--t) var(--ease); }
.acc__q[aria-expanded="true"] .acc__toggle::after { transform: translate(-50%, -50%) rotate(0); }
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acc__a > div { overflow: hidden; }
.acc__a p { max-width: 640px; color: var(--ink-2); padding: 0 56px 22px 0; }
.acc__q[aria-expanded="true"] + .acc__a { grid-template-rows: 1fr; }

/* ---------- 12. Pill tabs + split panel (L-13) ---------- */
.seg { display: inline-flex; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; margin-bottom: 28px; }
.seg button { min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: background var(--t), color var(--t); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-size: 1rem; font-weight: 600; color: var(--ink-2); transition: background var(--t), color var(--t), border-color var(--t); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--tan-2); transition: background var(--t); }
.pill:hover { border-color: var(--line-strong); color: var(--ink); }
.pill[aria-selected="true"] { background: var(--coral-fill); border-color: var(--coral-fill); color: #fff; }
.pill[aria-selected="true"]::before { background: #fff; }
.split { display: grid; grid-template-columns: 1fr 1.1fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--white); min-height: 520px; }
.split__dark { background: var(--dark); color: var(--on-dark); --focus: #F2EFE6; padding: clamp(28px, 3.6vw, 52px); display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.split__dark .h3 { font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.375rem); line-height: 1.15; }
.split__dark .inset { margin-top: 8px; padding: 16px 20px; border: 1px solid var(--line-dark-strong); border-radius: var(--r-md); background: rgba(242, 239, 230, .04); font-family: var(--font-serif); font-style: italic; color: var(--on-dark); font-size: 1.125rem; line-height: 1.45; }
.split__dark .link-arrow { margin-top: auto; }
.split__light { padding: clamp(28px, 3.6vw, 52px); display: flex; flex-direction: column; gap: 14px; }
.ucard { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); transition: border-color var(--t), background var(--t); }
.ucard:hover { border-color: var(--line-strong); background: var(--paper-2); }
.ucard__t { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--ink); }
.ucard__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.split__products { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-3); }
.split__products b { color: var(--ink); font-weight: 600; margin-right: 6px; }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: fade-in .35s var(--ease); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 13. Carousel (U-16) + product card ---------- */
.carousel__track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* bleed to the right edge, but start aligned with the container */
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-block: 8px; margin-block: -8px; cursor: grab;   /* room for the 6px focus ring (overflow-x makes the track clip vertically) */
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.carousel__track.is-dragging a { pointer-events: none; }
.carousel__bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 32px; margin-top: 24px; }
.carousel__arrows { display: flex; gap: 12px; }
.arrow-btn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: background var(--t), color var(--t), border-color var(--t), opacity var(--t); }
.arrow-btn:hover:not(:disabled) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arrow-btn:disabled { opacity: .35; cursor: default; }
.arrow-btn .icon { width: 20px; height: 20px; }
.carousel__links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; }

.pcard { position: relative; flex: 0 0 min(400px, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--tan); }
.pcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--white); border-bottom: 1px solid var(--line); overflow: hidden; }
.pcard__media > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .3s var(--ease); }
.pcard__media--tile { display: grid; place-items: center; background: var(--tan); }
.pcard__body { display: flex; flex-direction: column; gap: 6px; padding: 20px 24px 22px; flex: 1; }
.pcard__name { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; }
.pcard__line { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.pcard .tag { color: var(--coral-text-s, #A8402F); }   /* #A8402F: 5.4:1 on the sand card (--coral-text is 4.2:1); the card hover swaps it for --coral-lt */
.pcard__more { margin-top: auto; padding-top: 8px; color: var(--ink); }
.pcard__more .icon { width: 20px; height: 20px; transition: transform var(--t); }
.pcard:hover .pcard__more .icon { transform: translateX(4px); }
.pcard__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }   /* whole card is the link */
.pcard__link:focus-visible { outline: none; }
.pcard:has(.pcard__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* "Hear it" compact player: a pill over the preview; playing swaps the preview for a 2-line transcript */
.hear { position: absolute; left: 14px; bottom: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 18px 0 6px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-strong); font-size: .875rem; font-weight: 600; color: var(--ink); transition: background var(--t); }
.hear:hover { background: var(--paper-2); }
.hear__btn { width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; flex: none; }
.hear__btn .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hear .i-pause { display: none; }
.hear[aria-pressed="true"] .i-play { display: none; }
.hear[aria-pressed="true"] .i-pause { display: block; }
.transcript { position: absolute; inset: 0; z-index: 2; background: var(--dark); color: var(--on-dark); display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 20px 80px; opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility 0s .3s; }
.is-hearing .transcript { opacity: 1; visibility: visible; transition-delay: 0s; }
.transcript__line { font-size: .8125rem; line-height: 1.45; color: var(--on-dark-3); padding-left: 12px; border-left: 2px solid transparent; transition: color .25s, border-color .25s; }
.transcript__line.is-active { color: var(--on-dark); border-left-color: var(--coral); }
.transcript__line[lang="ar"] { font-family: var(--font-ar); direction: rtl; text-align: right; padding-left: 0; padding-right: 12px; border-left: 0; border-right: 2px solid transparent; font-size: .9375rem; line-height: 1.6; }
.transcript__line[lang="ar"].is-active { border-right-color: var(--coral); }
/* --focus: long transcripts show only the line being spoken, so the card never overflows */
.transcript--focus .transcript__line { display: none; }
.transcript--focus .transcript__line.is-active { display: block; font-size: .8125rem; line-height: 1.45; border-left-color: transparent; border-right-color: transparent; animation: tx-in .35s var(--ease) both; }
.transcript--focus .transcript__line[lang="ar"].is-active { font-size: 1rem; line-height: 1.65; }
@keyframes tx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .transcript--focus .transcript__line.is-active { animation: none; } }
.transcript__who { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--coral-lt); }
.transcript__cap { position: absolute; right: 16px; bottom: 16px; max-width: 150px; text-align: right; line-height: 1.35; font-size: .6875rem; color: var(--on-dark-3); }
.wave { position: absolute; left: 20px; right: 20px; bottom: 66px; height: 14px; display: flex; align-items: center; gap: 3px; opacity: .8; }
.wave span { flex: 1; height: 3px; border-radius: 2px; background: var(--coral); opacity: .55; }
.is-playing .wave span { animation: wave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * 45ms); }
@keyframes wave { 0%, 100% { height: 3px; } 50% { height: 14px; } }

/* ---------- 14. System diagram (L-16 / D-04A): dark framed panel, 4 numbered columns ---------- */
.flow-panel { background: var(--dark); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(24px, 2.8vw, 36px) clamp(20px, 2.6vw, 32px) clamp(20px, 2.2vw, 28px); }
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr) minmax(0, 1.05fr) minmax(0, 1.25fr); gap: clamp(32px, 3.2vw, 44px); align-items: stretch; }
.flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow__lines .base { fill: none; stroke: var(--on-dark); stroke-opacity: .2; stroke-width: 1; }
.flow__lines .run { fill: none; stroke: var(--coral); stroke-width: 1.2; stroke-dasharray: 2 8; stroke-linecap: round; animation: dash 1.8s linear infinite; opacity: .9; }
.flow__lines .end { fill: var(--coral); }
.flow__lines .pulse { fill: var(--coral-lt); }
@keyframes dash { to { stroke-dashoffset: -40; } }
.flow__col { position: relative; z-index: 1; display: flex; flex-direction: column; }
.flow__head { margin-bottom: 20px; min-height: 84px; }
.flow__num { font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--coral); font-weight: 500; }
.flow__label { margin-top: 8px; font-size: .875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.flow__title { font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; line-height: 1.3; color: var(--on-dark-2); }
.flow__body { flex: 1; display: grid; gap: 10px; align-content: center; }
.node { padding: 11px 16px; border: 1px solid var(--line-dark-strong); border-radius: var(--r-sm); background: rgba(242, 239, 230, .03); font-size: 1rem; line-height: 1.3; }
.flow__box { border: 1px solid var(--line-dark-strong); border-radius: 14px; background: var(--dark-2); padding: 0; }
.flow__box--hub { border-color: rgba(201, 106, 90, .6); padding: 22px 24px 0; display: flex; flex-direction: column; }
.hub__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hub__list h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-lt); margin-bottom: 8px; }
.hub__list li { padding: 5px 0; font-size: .9375rem; line-height: 1.3; border-top: 1px solid var(--line-dark); }
.hub__list li:first-child { border-top: 0; }
.hub__side { display: block; margin-top: 1px; font-size: .875rem; color: var(--on-dark-2); }
.badge-new { margin-left: 8px; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--coral-text); vertical-align: 1px; }
.hub__list .badge-new { color: var(--coral-lt); }
.hub__also { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: .9375rem; color: var(--on-dark-2); }
.hub__gov { margin: 16px -24px 0; padding: 12px 24px; border-top: 1px solid var(--line-dark); background: rgba(242, 239, 230, .04); border-radius: 0 0 13px 13px; font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-2); }
.hub__gov span + span::before { content: '\00B7'; margin: 0 10px; color: var(--coral-lt); }
.flow__rows li { padding: 12px 16px; font-size: 1rem; line-height: 1.3; border-top: 1px solid var(--line-dark); }
.flow__rows li:first-child { border-top: 0; }
.flow__caption { margin-top: clamp(24px, 2.4vw, 32px); padding-top: 18px; border-top: 1px solid var(--line-dark); text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.25rem; color: var(--on-dark-2); }

/* ---------- 15. Deployment columns (L-23): title, descriptor, label/value rows ---------- */
.dcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dcols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* two options (Cloud, On-premise, D-04Y) */
.dcol { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; }
.dcol h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.2; }
.dcol > p { color: var(--ink-3); font-size: var(--fs-small); margin-top: 6px; }
.dcol dl { margin-top: 24px; }
.dcol dl div { padding: 12px 0; border-top: 1px solid var(--line); }
.dcol dt { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.dcol dd { margin-top: 4px; font-size: 1.0625rem; color: var(--ink); }
@media (min-width: 861px) { .dcol dl div:first-child dd { min-height: 3.3em; } }

/* ---------- 16. Dark closing band (U-10): one compact row. Serif line left, actions right (round 3: ~190px tall on desktop) ---------- */
.cta-band { background: var(--dark); color: var(--on-dark); --focus: #F2EFE6; padding-block: clamp(32px, 3vw, 40px); }
.cta-band > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h act" "lead note"; column-gap: clamp(32px, 4vw, 64px); row-gap: 8px; align-items: center; }
.cta-band .h2 { grid-area: h; font-size: clamp(1.75rem, 1.5vw + 1.2rem, 2.5rem); line-height: 1.12; max-width: none; margin: 0; text-align: left; }
.cta-band .lead { grid-area: lead; margin: 0; max-width: 34em; font-size: .9375rem; line-height: 1.5; text-align: left; }
.cta-band .btn-row { grid-area: act; margin: 0; justify-content: flex-end; flex-wrap: nowrap; gap: 8px 24px; }
.cta-band .micro { grid-area: note; margin: 0 !important; text-align: right; }

/* ---------- 17. Footer (U-12) ---------- */
.site-footer { background: #130F0D; color: var(--on-dark-2); --focus: #F2EFE6; padding: clamp(36px, 3.6vw, 48px) 0 24px; }
.foot-cols { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
.foot-col h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem; color: var(--on-dark); margin-bottom: 10px; }
.foot-col a { display: block; padding: 3px 0; font-size: .9375rem; line-height: 1.4; color: var(--on-dark-2); transition: color var(--t); }
.foot-col a:hover { color: #fff; }
@media (max-width: 900px), (pointer: coarse) {
  .foot-col a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }   /* 44px touch targets */
}
.foot-bottom { margin-top: clamp(28px, 3vw, 36px); padding-top: 22px; border-top: 1px solid var(--line-dark); display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px 32px; }
.foot-brand { display: grid; gap: 10px; max-width: 360px; }
.foot-brand .logo span { color: var(--on-dark); }
.foot-brand p { font-family: var(--font-serif); font-style: italic; color: var(--on-dark-2); font-size: 1.0625rem; }
.foot-meta { display: grid; gap: 8px; justify-items: end; text-align: right; font-size: .875rem; color: var(--on-dark-3); }
.foot-meta a:hover { color: #fff; }
.social { display: flex; gap: 8px; }
.social a { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark-strong); display: grid; place-items: center; color: var(--on-dark-2); transition: background var(--t), color var(--t); }
.social a:hover { background: var(--on-dark); color: var(--dark); }
.social .icon { width: 18px; height: 18px; }

/* ---------- 18. WhatsApp button: small, icon-only, tucked in the corner ---------- */
.wa-fab { position: fixed; right: 20px; bottom: 20px; z-index: 150; width: 48px; height: 48px; border-radius: 50%; background: #137A45; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 20px -8px rgba(19, 122, 69, .6); transition: background var(--t), transform var(--t); }
.wa-fab:hover { background: #0F6A3A; transform: translateY(-2px); }
.wa-fab .icon { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.wa-fab::after { content: attr(data-label); position: absolute; right: 58px; padding: 7px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity var(--t), transform var(--t); }
.wa-fab:hover::after, .wa-fab:focus-visible::after { opacity: 1; transform: none; }

/* ---------- 20. Card hover: cards keep their light fill and turn near-black on hover and keyboard focus ----------
   One shared rule for the card classes below, or add .card-hover to a new card. The dark state re-points the ink,
   hairline and coral tokens inside the card, so text, rules and links follow; only chips, icon tiles and the use-case
   arrow need their own inverted colours. Colour-only 200ms fade, no layout shift. Hover needs a fine pointer (no sticky
   hover on touch); keyboard focus works everywhere. Reduced motion turns the fade off (section 19). */
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)) { transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
:where(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)) :where(h3, p, span, strong, em, small, dt, dd, li, .icon) { transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover {
  background-color: var(--dark); border-color: var(--dark); color: var(--on-dark);
  --ink: var(--on-dark); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3);
  --coral-text: var(--coral-lt); --coral-text-s: var(--coral-lt); --line: var(--line-dark); --line-strong: var(--line-dark-strong); --focus: #F2EFE6;
}
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover :is(.chip, .chg__label--fact, .ccard__icon) { background: rgba(228, 145, 127, .16); color: var(--coral-lt); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover .chg__label--ill { background: rgba(242, 239, 230, .08); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover :is(.icon-tile, .pcard__media--tile) { background: rgba(242, 239, 230, .06); border-color: var(--line-dark); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover .uc-card__go { background: var(--coral-lt); color: var(--dark); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover .ptl__inset { background: linear-gradient(90deg, rgba(242, 239, 230, .08), rgba(242, 239, 230, 0)); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):hover .pcard__media:not(.pcard__media--tile) { --ink: #141413; --ink-2: #4A4741; --ink-3: #6B655C; --coral-text: #B84B39; --line: rgba(20, 20, 19, .12); --line-strong: rgba(20, 20, 19, .24); color: var(--ink); }   /* screenshots and the Hear it player stay light inside a dark card */
}
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) {
  background-color: var(--dark); border-color: var(--dark); color: var(--on-dark);
  --ink: var(--on-dark); --ink-2: var(--on-dark-2); --ink-3: var(--on-dark-3);
  --coral-text: var(--coral-lt); --coral-text-s: var(--coral-lt); --line: var(--line-dark); --line-strong: var(--line-dark-strong);
}
/* The card keeps the page's own focus colour for its outline (a near-black card on paper needs a dark ring, not a cream one);
   anything focusable inside the dark card gets the light ring. */
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) :where(*) { --focus: #F2EFE6; }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) :is(.chip, .chg__label--fact, .ccard__icon) { background: rgba(228, 145, 127, .16); color: var(--coral-lt); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) .chg__label--ill { background: rgba(242, 239, 230, .08); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) :is(.icon-tile, .pcard__media--tile) { background: rgba(242, 239, 230, .06); border-color: var(--line-dark); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) .uc-card__go { background: var(--coral-lt); color: var(--dark); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) .ptl__inset { background: linear-gradient(90deg, rgba(242, 239, 230, .08), rgba(242, 239, 230, 0)); }
:is(.card-hover, .chg, .qcard, .ccard, .ocard:not(.ocard--dark), .uc-card:not(.uc-card--soon), .pcard, .vtile, .dcol, .ptl__card, .hgrid__cell:not(.hgrid__cell--dark)):has(:focus-visible) .pcard__media:not(.pcard__media--tile) { --ink: #141413; --ink-2: #4A4741; --ink-3: #6B655C; --coral-text: #B84B39; --line: rgba(20, 20, 19, .12); --line-strong: rgba(20, 20, 19, .24); color: var(--ink); }   /* screenshots and the Hear it player stay light inside a dark card */


/* ---------- 19. Responsive + reduced motion ---------- */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .cta-band > .container { grid-template-columns: 1fr; grid-template-areas: "h" "lead" "act" "note"; row-gap: 12px; }
  .cta-band .btn-row { flex-wrap: wrap; justify-content: flex-start; margin-top: 8px; }
  .cta-band .micro { text-align: left; }
  /* diagram stacks: columns become numbered blocks, connectors are hidden */
  .flow { grid-template-columns: 1fr; gap: 32px; }
  .flow__lines { display: none; }
  .flow__head { min-height: 0; margin-bottom: 14px; }
  .flow__body { align-content: start; }
  .flow__col[data-col="in"] .flow__body, .flow__col[data-col="out"] .flow__body { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .duo { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 860px) {
  .hgrid { grid-template-columns: 1fr 1fr; }
  .hgrid__cell:nth-child(3n) { border-right: 1px solid var(--line-strong); }
  .hgrid__cell:nth-child(2n) { border-right: 0; }
  .hgrid__cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--line-strong); }
  .hgrid__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .dcols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .btn-row .link-arrow { align-self: center; }
  .hero__actions { justify-items: stretch; }
  .hgrid { grid-template-columns: 1fr; }
  .hgrid__cell, .hgrid__cell:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line-strong); min-height: 0; }
  .hgrid__cell:last-child { border-bottom: 0; }
  .moment { grid-template-columns: 1fr; gap: 36px; }
  .moment__cell + .moment__cell { border-left: 0; border-top: 1px solid var(--line-dark-strong); padding-top: 36px; }
  .proof__stats { grid-template-columns: 1fr; gap: 28px; }
  .proof__stat { border-left: 0; border-top: 1px solid var(--line-dark-strong); padding-top: 28px; }
  .proof__stat:first-child { border-top: 0; padding-top: 8px; }
  .proof__stats--sm { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .proof__stats--sm .proof__stat, .proof__stats--sm .proof__stat:first-child { border-top: 0; border-left: 1px solid var(--line-dark-strong); padding: 4px 8px; }
  .proof__stats--sm .proof__stat:first-child { border-left: 0; }
  .proof__stats--sm .proof__label { font-size: .75rem; }
  .proof__trust { flex-direction: column; align-items: center; }
  .proof__trust li + li::before { display: none; }
  .flow__col[data-col="in"] .flow__body, .flow__col[data-col="out"] .flow__body { grid-template-columns: 1fr; }
  .hub__lists { grid-template-columns: 1fr; gap: 24px; }
  .flow__box--hub { padding: 22px 20px 0; }
  .hub__gov { margin-inline: -20px; padding-inline: 20px; }
  .pills { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .pills::-webkit-scrollbar { display: none; }
  .pill { flex: none; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-meta { justify-items: start; text-align: left; }
  .carousel__bar { margin-top: 20px; }
  .mega-foot { justify-content: flex-start; }
  .acc__a p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .flow__lines .run { animation: none; stroke-dasharray: none; opacity: .5; }
}

/* Logo row: monochrome mark plus name (connected systems, D-04BI) */
.logo-row { margin-top: 28px; }
.logo-row__list { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 14px; }
.logo-row__list li { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: .9375rem; font-weight: 500; color: var(--ink-2); }
.logo-row__list img { flex: none; width: 34px; height: 24px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .6; }
.logo-row__note { margin-top: 12px; }