/* ============================================================
   ClearGrid — cleargrid.co
   v3 · Brand: Geist / Geist Mono / Tajawal · teal on near-black
   Five bands: dark – light – dark – light – dark
   ============================================================ */

:root {
  --ink: #0A0A08;
  --paper: #F5F6F7;
  --teal: #069494;
  --teal-hover: #57B7B6;
  --teal-active: #008989;
  --teal-deep: #04655E;
  --teal-wash: #E6F4F4;
  --teal-on-light: #04716D;

  --dark-muted: rgba(245, 246, 247, 0.64);
  --dark-faint: rgba(245, 246, 247, 0.44);
  --dark-line: rgba(245, 246, 247, 0.09);
  --dark-card: #131618;

  --light-muted: rgba(10, 10, 8, 0.62);
  --light-faint: rgba(10, 10, 8, 0.45);
  --light-line: rgba(10, 10, 8, 0.11);

  --sans: "Geist", "Helvetica Neue", -apple-system, Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
  --arabic: "Tajawal", "IBM Plex Sans Arabic", var(--sans);

  --container: 1200px;
  --margin: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  font-family: var(--sans);
  background: var(--ink);
  color: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* NO overflow-x here. It makes body a scroll container, which breaks every
     position:sticky descendant - including the console explorer's pin, whose
     1000vh track then renders as a huge blank void. Clip individual wide
     elements instead (see .hero-wave-zone). */
}

img { display: block; max-width: 100%; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin); }
::selection { background: var(--teal-deep); color: #fff; }

/* Inline content links: white with teal underline, never browser blue */
a:not([class]) {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(6, 148, 148, 0.65);
  transition: text-decoration-color .15s;
}
a:not([class]):hover { text-decoration-color: var(--teal-hover); }

/* ---------- Type ---------- */
.d1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; }
.d2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.01em; }
.h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.1; font-weight: 600; letter-spacing: -0.01em; }
.h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
.h4 { font-size: 21px; line-height: 1.33; font-weight: 600; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; font-weight: 400; }
.small { font-size: 15px; line-height: 1.47; }
.num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums; }

.kicker {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-hover);
  display: block;
  margin-bottom: 16px;
}
.band-light .kicker { color: var(--teal-on-light); }

.on-dark-muted { color: var(--dark-muted); }
.on-light-muted { color: var(--light-muted); }

/* Arabic must never inherit letter-spacing / mono / uppercase */
.ar-text, [lang="ar"] {
  font-family: var(--arabic) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 1.15em;
}
.toast { font-family: var(--arabic); }

/* ---------- Bands ---------- */
.band-dark { background: var(--ink); color: var(--paper); }
.band-light {
  background: #0D0F0E; color: var(--paper);
  --ink: #F5F6F7;
  --light-muted: rgba(245, 246, 247, 0.64);
  --light-faint: rgba(245, 246, 247, 0.44);
  --light-line: rgba(245, 246, 247, 0.09);
  --teal-on-light: #57B7B6;
  --teal-wash: rgba(6, 148, 148, 0.10);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 10px;
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-hover); color: var(--ink); }
.btn-primary:active { background: var(--teal-active); color: #fff; }
.btn-primary:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.btn-secondary { background: transparent; border: 1px solid; border-color: currentColor; color: inherit; opacity: .9; }
.btn-secondary { border-color: rgba(245,246,247,.28); }
.band-light .btn-secondary { border-color: rgba(245,246,247,.28); }
.btn-secondary:hover { border-color: currentColor; background: rgba(127,127,127,.06); opacity: 1; }
.btn-sm { height: 40px; padding: 0 20px; font-size: 15px; white-space: nowrap; }
.textlink {
  font-size: 17px; font-weight: 500; color: var(--teal-hover); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.band-light .textlink { color: var(--teal-on-light); }
.textlink .ar { transition: transform .15s ease; }
.textlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover .ar { transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100; height: 64px;
  transition: background .2s ease, border-color .2s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 8, 0.72);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--dark-line);
}
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--margin); height: 64px; display: flex; align-items: center; gap: 36px; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; gap: 28px; align-items: center; margin-inline-start: auto; }
.nav-links a:not(.btn) { font-size: 15px; font-weight: 500; color: rgba(245,246,247,.8); text-decoration: none; transition: color .15s; }
.nav-links a:not(.btn):hover { color: var(--paper); }
.nav-links a.btn-primary, .nav-links a.btn-primary:active { color: #fff; }
.nav-links a.btn-primary:hover { color: var(--ink); }
.nav-lang { font-family: var(--arabic); font-size: 15px; background: none; border: none; color: rgba(245,246,247,.8); cursor: pointer; padding: 4px 2px; }
.nav-lang:hover { color: var(--paper); }

/* ---------- Dark-band texture (dot grid + teal atmosphere, from brand cover) ---------- */
.hero, .page-hero, .demo { position: relative; }
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(245,246,247,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(75% 95% at 72% 5%, black, transparent 72%);
  mask-image: radial-gradient(75% 95% at 72% 5%, black, transparent 72%);
}
.hero::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 75% at 88% 0%, rgba(6,148,148,.16), transparent 70%);
}
.page-hero .container, .hero .container { position: relative; z-index: 2; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 176px 0 0; overflow: hidden; }
.hero-content { position: relative; z-index: 2; }
.hero h1 { max-width: 980px; margin-bottom: 32px; }
.hero .lede { max-width: 600px; color: var(--dark-muted); margin-bottom: 48px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.hero-trust {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--dark-faint); margin-bottom: 40px;
}
/* Brand tagline pair. Two short lines, stacked, mono and spaced so they read as a
   statement of origin rather than a claim - deliberately quieter than the H1. The
   teal rule on the inline-start edge is what makes them read as one unit. */
.tagline {
  display: inline-flex; flex-direction: column; gap: 6px; text-align: start;
  border-inline-start: 2px solid var(--teal); padding-inline-start: 16px;
  margin: 4px 0 34px;
}
.tagline span {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em;
  color: var(--dark-muted); line-height: 1.45;
}
.tagline span b { color: var(--paper); font-weight: 500; }
.band-light .tagline span { color: var(--light-muted); }
.band-light .tagline span b { color: var(--ink); }
@media (max-width: 743px) { .tagline span { font-size: 12px; } }

.hero-wave-zone { position: relative; height: 320px; margin-top: 24px; }
.hero-wave {
  position: absolute; inset-inline: 0; bottom: -2px; width: 100%; height: 100%;
  object-fit: cover; object-position: left bottom;
  -webkit-mask-image: linear-gradient(to top, black 40%, transparent 100%);
  mask-image: linear-gradient(to top, black 40%, transparent 100%);
}

/* ---------- Stats bar — product-card style ---------- */
.stats { padding: 24px 0 128px; }
.stats-caption { font-size: 15px; color: var(--dark-faint); margin-bottom: 28px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stats-row > div {
  background: #0D100F; border: 1px solid rgba(245,246,247,.08); border-radius: 14px;
  padding: 26px 28px; transition: border-color .2s;
}
.stats-row > div:hover { border-color: rgba(6,148,148,.4); }
.stat-v { font-size: clamp(30px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.015em; line-height: 1; }
.stat-k { font-size: 14px; color: var(--dark-muted); margin-top: 12px; max-width: 24ch; line-height: 1.5; }

/* ---------- Hero product shot ---------- */
.hero-shot { padding: 0 0 128px; position: relative; z-index: 2; }
.hero-shot .media-frame { margin-top: -140px; }

/* ---------- Sections ---------- */
.section { padding: 160px 0; }
.section-deep { padding-top: 192px; }
.sec-head { max-width: 720px; }
.sec-head .h2 { margin-bottom: 24px; }
.sec-head .lede { color: var(--dark-muted); }
.band-light .sec-head .lede { color: var(--light-muted); }

/* ---------- Capabilities ---------- */
.cap-rows { margin-top: 96px; display: flex; flex-direction: column; gap: 128px; }
.cap-row { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.cap-row.flip .cap-text { order: 2; }
.cap-row.flip .cap-media { order: 1; }
.cap-text .h3 { margin-bottom: 16px; }
.cap-text p { font-size: 17px; line-height: 1.65; color: var(--light-muted); margin-bottom: 24px; max-width: 46ch; }
.media-frame {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(245,246,247,0.12);
  box-shadow: 0 32px 90px -20px rgba(0,0,0,.75), 0 0 100px -40px rgba(6,148,148,.4);
}
.band-dark .media-frame, .hero-shot .media-frame {
  border-color: rgba(245,246,247,0.12);
  box-shadow: 0 32px 90px -20px rgba(0,0,0,.75), 0 0 100px -40px rgba(6,148,148,.4);
}
.band-light .media-frame img { display: block; }

/* ---------- How it works ---------- */
.steps-wrap { margin-top: 96px; position: relative; }
.steps-line { position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: var(--light-line); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; position: relative; }
.step-marker { width: 8px; height: 8px; background: var(--teal-on-light); margin-bottom: 24px; }
.step-n { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--teal-on-light); margin-bottom: 12px; }
.step .h4 { margin-bottom: 12px; }
.step p { font-size: 15.5px; line-height: 1.6; color: rgba(245,246,247,.6); }

/* ---------- Operating models ---------- */
.models { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; }
.model-panel { background: linear-gradient(180deg, rgba(6,148,148,.14), rgba(6,148,148,.05)); border: 1px solid rgba(6,148,148,.3); border-radius: 16px; padding: 56px; display: flex; flex-direction: column; }
.model-panel .h3 { margin-bottom: 8px; }
.model-mode { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-on-light); margin-bottom: 24px; }
.model-panel > p { font-size: 17px; line-height: 1.65; color: rgba(245,246,247,.72); margin-bottom: 32px; }
.model-best { margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(6,148,148,.25); font-size: 15px; color: rgba(245,246,247,.6); }
.model-best strong { color: var(--paper); font-weight: 500; }
.hybrid-bar {
  margin-top: 32px; border: 1px solid rgba(245,246,247,.09); background: linear-gradient(180deg, #101312, #0B0E0D); border-radius: 16px;
  padding: 32px 56px; display: flex; gap: 40px; align-items: baseline; flex-wrap: wrap;
}
.hybrid-bar .h4 { white-space: nowrap; }
.hybrid-bar p { font-size: 16px; color: var(--light-muted); max-width: 62ch; }
.models-cta { margin-top: 80px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.models-cta .small { color: var(--light-faint); }

/* ---------- Enterprise ---------- */
.ent-grid { margin-top: 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px 32px; max-width: 900px; }
.ent-item .h4 { margin-bottom: 8px; }
.ent-item p { font-size: 17px; line-height: 1.6; color: var(--dark-muted); max-width: 40ch; }
.credentials { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--dark-line); max-width: 900px; }
.credentials-row {
  display: flex; gap: 48px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.06em;
  color: var(--dark-faint);
}
.ent-cta { margin-top: 96px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.ent-cta .small { color: var(--dark-faint); }

/* ---------- Regional ---------- */
.region-wrap { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
.region-h2-ar {
  font-family: var(--arabic); font-size: clamp(28px, 3vw, 40px); font-weight: 500;
  direction: rtl; line-height: 1.4; margin-top: 16px; color: var(--paper);
}
.region-points { margin-top: 40px; display: flex; flex-direction: column; gap: 20px; }
.region-point { display: flex; gap: 16px; align-items: baseline; }
.region-point .sqb { width: 7px; height: 7px; background: var(--teal); flex-shrink: 0; }
.region-point div { font-size: 17px; line-height: 1.6; color: var(--dark-muted); }
.region-point strong { color: var(--paper); font-weight: 500; }

.chat-panel { background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.chat-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-faint); margin-bottom: 4px; }
.bubble { max-width: 88%; padding: 14px 18px; border-radius: 10px; font-size: 15px; line-height: 1.65; }
.bubble.ar { font-family: var(--arabic); font-size: 17px; line-height: 1.9; direction: rtl; text-align: right; align-self: flex-end; background: #122422; border: 1px solid rgba(6,148,148,.3); }
.bubble.en { align-self: flex-start; background: #181B1E; border: 1px solid var(--dark-line); }
.bubble .bmeta { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dark-faint); direction: ltr; text-align: left; }
.bubble.ar .bmeta { text-align: right; }
.chat-note { font-size: 14px; line-height: 1.6; color: var(--dark-faint); border-top: 1px solid var(--dark-line); padding-top: 16px; }

/* ---------- Results ---------- */
.result-stats { margin-top: 96px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.rstat-v { font-size: clamp(44px, 5vw, 76px); font-weight: 600; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.rstat-v .unit { font-size: .5em; }
.rstat-k { font-size: 17px; color: rgba(245,246,247,.62); margin-top: 16px; max-width: 30ch; }
.case { margin-top: 128px; max-width: 820px; }
.case p { font-size: 17px; line-height: 1.7; color: rgba(245,246,247,.66); margin-bottom: 20px; }
.case p strong { color: var(--paper); font-weight: 600; }
.case-note { font-size: 14px; color: var(--light-faint); }

/* ---------- Analysis offer ---------- */
.offer {
  margin-top: 0; background: linear-gradient(180deg, rgba(6,148,148,.13), rgba(6,148,148,.04)); border: 1px solid rgba(6,148,148,.3); border-radius: 16px; padding: 64px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.offer .h3 { margin-bottom: 16px; }
.offer > div > p { font-size: 17px; line-height: 1.65; color: rgba(245,246,247,.72); }
.offer-form .field { margin-bottom: 14px; }
.offer-note { font-size: 13px; color: var(--light-faint); margin-top: 12px; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 4fr 1fr 7fr; align-items: start; }
.faq-title { position: sticky; top: 128px; }
.faq-list { border-top: 1px solid var(--light-line); }
.faq-item { border-bottom: 1px solid var(--light-line); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  padding: 32px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--sans); font-size: 21px; font-weight: 600; line-height: 1.33; color: var(--paper);
  transition: color .15s;
}
.faq-q:hover { color: var(--teal-hover); }
.faq-plus { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: currentColor; transition: transform .3s cubic-bezier(0.4,0,0.2,1); }
.faq-plus::before { width: 14px; height: 2px; top: 6px; }
.faq-plus::after { width: 2px; height: 14px; left: 6px; }
.faq-item.open .faq-plus::before { transform: rotate(45deg); }
.faq-item.open .faq-plus::after { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(0.4,0,0.2,1); }
.faq-a > div { overflow: hidden; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a p { font-size: 17px; line-height: 1.65; color: var(--light-muted); max-width: 640px; padding-bottom: 32px; }

/* ---------- Demo / final CTA ---------- */
.demo { position: relative; overflow: hidden; padding: 0 0 160px; }
.demo-wave-zone { position: relative; height: 240px; margin-bottom: 64px; }
.demo-wave {
  position: absolute; inset-inline: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: left top; opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}
.demo-head { text-align: center; max-width: 800px; margin: 0 auto 72px; }
.demo-head .d2 { margin-bottom: 24px; }
.demo-head .lede { color: var(--dark-muted); }
.demo-form-panel {
  max-width: 640px; margin: 0 auto; background: var(--dark-card);
  border: 1px solid var(--dark-line); border-radius: 12px; padding: 48px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 500; color: var(--dark-muted); margin-bottom: 8px; }
.band-light .field label, .offer .field label { color: rgba(245,246,247,.7); }
.field input, .field select {
  width: 100%; height: 48px; background: var(--ink); border: 1px solid rgba(245,246,247,.18);
  border-radius: 4px; padding: 0 14px; color: var(--paper); font-size: 16px; font-family: var(--sans);
  transition: border-color .15s;
}
.offer .field input, .offer .field select { background: #0A0A08; border-color: rgba(245,246,247,.18); color: var(--paper); }
.field input:focus, .field select:focus { outline: none; border-color: var(--teal-active); }
.field input.err, .field select.err { border-color: #E26161; }
.field .field-err { display: none; font-size: 13px; color: #E26161; margin-top: 6px; }
.field.show-err .field-err { display: block; }
.demo-form-panel .btn, .offer-form .btn { width: 100%; margin-top: 8px; }
.form-note { font-size: 13.5px; line-height: 1.55; color: var(--dark-faint); text-align: center; margin-top: 16px; }
.form-success { display: none; text-align: center; padding: 32px 0; }
.form-success .h3 { margin-bottom: 12px; }
.form-success p { color: var(--dark-muted); font-size: 16px; }
.offer-form .form-success p { color: var(--light-muted); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--dark-line); padding: 96px 0 64px; }
.footer-grid { display: grid; grid-template-columns: 4fr 1fr 2fr 2fr 3fr; gap: 32px; }
.footer-brand img { height: 44px; width: auto; margin-bottom: 24px; }
.footer-brand p { font-size: 15px; line-height: 1.6; color: var(--dark-faint); max-width: 300px; }
.footer-col h4 { font-size: 15px; font-weight: 500; color: var(--dark-faint); margin-bottom: 24px; }
.footer-col ul { list-style: none; }
.footer-col a { display: inline-block; font-size: 16px; line-height: 2; color: rgba(245,246,247,.72); text-decoration: none; transition: color .15s; }
.footer-col a:hover { color: var(--teal-hover); }
.footer-bottom {
  margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--dark-line);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  font-size: 15px; color: var(--dark-faint);
}
.footer-bottom a { color: var(--dark-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--teal-hover); }

/* ---------- Mobile sticky CTA ---------- */
.sticky-cta {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90; display: none;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,10,8,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--dark-line);
}
.sticky-cta .btn { width: 100%; height: 52px; }

/* ============================================================
   v9 skeleton — cinematic hero + console explorer
   ============================================================ */

/* ----- Cinematic centered hero ----- */
.hero-v2 {
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  position: relative; overflow: hidden; padding: 120px 24px 80px;
}
.hero-v2 .d1 { font-size: clamp(46px, 6.6vw, 96px); max-width: 15ch; margin: 36px auto 28px; }
.hero-v2 .lede { max-width: 56ch; margin: 0 auto 44px; color: var(--dark-muted); }
.hero-v2 .hero-ctas { justify-content: center; margin-bottom: 36px; }
.hero-v2 .hero-trust { margin-bottom: 0; }

/* hero logomark (real asset) */
.hero-mark {
  display: block; width: 72px; height: 72px; margin: 0 auto;
  animation: markIn 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes markIn { from { opacity: 0; transform: scale(.65) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-mark { animation: none; } }

@media (max-height: 860px) { .scroll-cue { display: none; } }
.scroll-cue {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dark-faint); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue::after { content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--teal), transparent); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }

/* ----- Console explorer (pinned scrollytelling app shell) ----- */
.console-scroll { height: 340vh; position: relative; }
.console-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.console-frame {
  width: min(1240px, calc(100vw - 48px)); margin: 0 auto; height: min(720px, 82vh);
  background: #070908; border: 1px solid rgba(245,246,247,.12); border-radius: 18px;
  display: grid; grid-template-columns: 264px 1fr; overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.85), 0 0 120px -40px rgba(6,148,148,.45);
}
.console-side { background: #0A0C0B; border-inline-end: 1px solid rgba(245,246,247,.07); padding: 22px 14px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.console-brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.console-brand img { height: 26px; width: auto; }
.console-label { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-faint); padding: 12px 10px 6px; }
.console-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; color: rgba(245,246,247,.6); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; background: none; text-align: left; font-family: var(--sans);
  transition: color .2s, background .2s, border-color .2s;
}
.console-item .ci { width: 8px; height: 8px; background: rgba(245,246,247,.25); flex-shrink: 0; transition: background .2s, box-shadow .2s; }
.console-item { cursor: pointer; }
.console-item:hover { color: var(--paper); background: rgba(245,246,247,.06); }
.console-item:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: -2px; }
.console-item.active { color: var(--paper); background: rgba(6,148,148,.12); border-color: rgba(6,148,148,.3); }
.console-item.active .ci { background: var(--teal-hover); box-shadow: 0 0 10px rgba(87,183,182,.9); }
.console-main { position: relative; }
.console-stage { position: absolute; inset: 0; opacity: 0; transform: scale(.985); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.console-stage.active { opacity: 1; transform: none; pointer-events: auto; }
/* contain, not cover: cover was cropping the right-hand third of every 1440-wide
   capture - which is where Journey GPT, the Analytics button and the RPC/PTP
   columns live. Height reserves a band for the caption so it never sits on data. */
/* A 2880px-wide app screenshot squeezed into a ~580px frame is unreadable. Render it at a size
   where the UI text is legible and let the stage scroll horizontally instead. */
.console-stage { overflow: auto; overscroll-behavior-x: contain; }
.console-stage img { display: block; height: calc(100% - 150px); width: 100%; max-width: 100%; object-fit: contain; object-position: center top; background: #070908; }
.console-stage::-webkit-scrollbar { height: 8px; }
.console-stage::-webkit-scrollbar-thumb { background: rgba(245,246,247,.22); }
.console-stage::-webkit-scrollbar-track { background: rgba(245,246,247,.05); }
@media (min-width: 1300px) {
  /* Show the WHOLE screenshot. An earlier version cropped from the top-left to keep the
     pixel density up, but at these frame sizes that rendered the capture hugely zoomed
     and cut off mid-card, which reads as broken rather than detailed. Fitting the whole
     frame is the right trade: the screenshot is context, and the caption carries the point.
     flex, not calc(100% - Npx) - the caption's height depends on its copy, and every
     hard-coded subtraction left it overlapping the image by whatever the guess was off by. */
  .console-stage { overflow: hidden; display: flex; flex-direction: column; }
  .console-stage img {
    flex: 1 1 auto; min-height: 0;
    width: 100%; max-width: 100%; min-width: 0; height: auto;
    object-fit: contain; object-position: center top;
  }
  .console-stage .console-caption { position: static; flex: 0 0 auto; }
}
.console-caption {
  /* Was absolutely positioned over the screenshot, so it covered the bottom third of
     every screen. It now sits in its own band under the image: nothing is obscured,
     and the copy is on a solid surface instead of over UI chrome. */
  position: absolute; inset-inline: 0; bottom: 0; max-width: none;
  background: #0C0F0E;
  border: none; border-top: 1px solid rgba(245,246,247,.12); border-radius: 0;
  padding: 16px 28px 18px;
  box-shadow: none;
}
.console-caption .kicker { margin-bottom: 8px; font-size: 11px; }
.console-caption h3 { font-size: 20px; font-weight: 600; margin-bottom: 6px; color: var(--paper); }
.console-caption p { font-size: 14px; line-height: 1.55; color: rgba(245,246,247,.66); margin-bottom: 12px; }
.console-caption .textlink { font-size: 14px; }
.console-note {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: #0C0F0E;
  border: 1px solid rgba(6,148,148,.4); border-radius: 999px; padding: 7px 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--paper);
  box-shadow: 0 12px 34px rgba(0,0,0,.5), 0 0 24px -8px rgba(6,148,148,.6);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s .25s ease, transform .5s .25s ease;
}
.console-stage.active .console-note { opacity: 1; transform: none; }
.console-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-hover); box-shadow: 0 0 8px rgba(87,183,182,.9); animation: lcPulse 1.6s ease-in-out infinite; }
@media (max-width: 980px) { .console-note { display: none; } }

.console-progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(245,246,247,.08); }
.console-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), var(--teal-hover)); transition: width .3s ease; }

@media (max-width: 1080px) and (min-width: 701px) {
  .console-frame { grid-template-columns: 190px 1fr; }
  .console-item { font-size: 13px; padding: 8px 10px; }
  .console-caption { left: 18px; right: 18px; bottom: 16px; max-width: none; }
}

@media (max-width: 700px) {
  .console-scroll { height: auto; }
  .console-pin { position: static; height: auto; display: block; padding: 0 20px; }
  .console-frame { grid-template-columns: 1fr; height: auto; }
  .console-side { flex-direction: row; flex-wrap: wrap; gap: 6px; border-inline-end: none; border-bottom: 1px solid rgba(245,246,247,.07); }
  .console-side .console-item { border: 1px solid var(--dark-line); padding: 9px 13px; font-size: 13px; }
  .console-brand, .console-label { display: none; }
  .console-main { position: static; }
  .console-stage { position: relative; inset: auto; opacity: 1; transform: none; display: none; }
  .console-stage.active { display: block; }
  .console-stage img { height: auto; }
  .console-caption { position: static; max-width: none; margin: 16px; }
}

/* ============================================================
   Motion system — "the site performs resolution"
   ============================================================ */

/* Headline word stagger (applied by JS on .js-split) */
.wline { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wword { display: inline-block; transform: translateY(112%); }
.words-in .wword { animation: wordUp .85s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes wordUp { to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wword { transform: none; animation: none !important; } }

/* Hero product: 3D tilt that straightens on scroll */
.tilt-wrap { perspective: 1400px; perspective-origin: 50% 0%; }
.tilt { transform-origin: 50% 0%; will-change: transform; transform: rotateX(16deg) translateY(28px) scale(0.96); }
@media (prefers-reduced-motion: reduce) { .tilt { transform: none !important; } }

/* Live event cards over the hero product frame */
.hero-shot .media-frame { position: relative; overflow: visible; }
.hero-shot .media-frame img { border-radius: 14px; }
.live-card {
  position: absolute; z-index: 3; min-width: 300px; max-width: 340px;
  background: rgba(13, 16, 15, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(245,246,247,.14); border-radius: 12px; padding: 14px 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px -16px rgba(6,148,148,.5);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.live-card.show { opacity: 1; transform: translateY(0) scale(1); }
.live-card .lc-k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-hover); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.live-card .lc-k::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-hover); box-shadow: 0 0 8px rgba(87,183,182,.9); animation: lcPulse 1.6s ease-in-out infinite; }
@keyframes lcPulse { 50% { opacity: .4; } }
.live-card .lc-t { font-size: 14px; font-weight: 600; color: var(--paper); line-height: 1.4; }
.live-card .lc-m { font-size: 12px; color: var(--dark-faint); margin-top: 3px; font-feature-settings: "tnum" 1; }
.live-card.pos-tr { top: -26px; right: -34px; }
.live-card.pos-bl { bottom: 42px; left: -34px; }
@media (max-width: 1199px) { .live-card.pos-tr { right: 0; } .live-card.pos-bl { left: 0; } }
@media (max-width: 743px) { .live-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .live-card { transition: opacity .3s; transform: none; } }

/* Cursor-following glow (hero, desktop only) */
.hero-glow {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(circle, rgba(6,148,148,.13), transparent 62%);
  pointer-events: none; z-index: 1; left: 0; top: 0; will-change: transform;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .6s;
}
.hero:hover .hero-glow { opacity: 1; }
@media (max-width: 1199px), (prefers-reduced-motion: reduce) { .hero-glow { display: none; } }

/* Traveling signal pulse on the how-it-works line */
.steps-line { overflow: visible; }
.steps-line::after {
  content: ""; position: absolute; top: -3px; left: 0; width: 56px; height: 7px; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--teal) 60%, #7BD8D2);
  box-shadow: 0 0 16px rgba(6,148,148,.8);
  animation: signalTravel 7s cubic-bezier(.4,0,.6,1) infinite;
  opacity: 0;
}
.steps-wrap.in .steps-line::after { opacity: 1; }
@keyframes signalTravel {
  0% { left: -60px; opacity: 0; }
  6% { opacity: 1; }
  86% { opacity: 1; }
  96%, 100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .steps-line::after { animation: none; display: none; } }

/* Step markers light up in sequence once visible */
.steps-wrap.in .step-marker { animation: markerOn .5s ease forwards; opacity: .35; }
.steps-wrap.in .step:nth-child(1) .step-marker { animation-delay: .15s; }
.steps-wrap.in .step:nth-child(2) .step-marker { animation-delay: 1.4s; }
.steps-wrap.in .step:nth-child(3) .step-marker { animation-delay: 2.7s; }
.steps-wrap.in .step:nth-child(4) .step-marker { animation-delay: 4.0s; }
.steps-wrap.in .step:nth-child(5) .step-marker { animation-delay: 5.3s; }
@keyframes markerOn { to { opacity: 1; box-shadow: 0 0 14px rgba(6,148,148,.75); } }
@media (prefers-reduced-motion: reduce) { .steps-wrap.in .step-marker { animation: none; opacity: 1; } }

/* Parallax frames */
[data-plx] { will-change: transform; }

/* Wave slow drift (ambient) */
.hero-wave { animation: waveDrift 26s ease-in-out infinite alternate; }
@keyframes waveDrift { from { transform: translateX(0) scale(1.04); } to { transform: translateX(-2.5%) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hero-wave { animation: none; } }

/* ---------- Reveal (section settle) ---------- */
/* THERE IS NO STATE IN WHICH A .reveal BLOCK IS HIDDEN.
   Content is always visible. When JS sees a block scroll into view it adds .in, which
   plays a one-shot settle animation - motion is only ever ADDED. Earlier versions of
   this hid content and revealed it with JS, which blanked the page three separate times
   when the script did not run or the observer did not fire. Do not reintroduce that. */
.reveal { opacity: 1; transform: none; }
@keyframes cg-settle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal.in { animation: cg-settle .6s cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--dark-card); border: 1px solid rgba(245,246,247,.2); color: var(--paper);
  padding: 14px 24px; border-radius: 8px; font-size: 15px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Multi-page: nav mega-menu (gapless, hover-safe) ---------- */
.nav-item { position: relative; display: flex; align-items: center; height: 64px; }
.nav-item > button {
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: rgba(245,246,247,.8);
  background: none; border: none; cursor: pointer; padding: 8px 0; display: inline-flex; align-items: center; gap: 7px;
  height: 64px;
}
.nav-item > button::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; opacity: .7; }
.nav-item:hover > button { color: var(--paper); }
.nav-item:hover > button::after { transform: rotate(225deg) translateY(2px); }
.nav-menu {
  position: absolute; top: 100%; left: -24px; min-width: 280px;
  background: rgba(13, 16, 15, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(245,246,247,.1); border-radius: 14px;
  padding: 12px; box-shadow: 0 32px 90px rgba(0,0,0,.65), 0 0 60px -30px rgba(6,148,148,.25);
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .14s;
}
.nav-menu::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: .5; }
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu {
  visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s;
}
.nav-menu a { display: block; padding: 10px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: rgba(245,246,247,.85); text-decoration: none; transition: background .12s, color .12s; }
.nav-menu a:hover { background: rgba(6,148,148,.12); color: var(--paper); }
.nav-menu .nm-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-hover); padding: 12px 14px 6px; }
.nav-menu a span { display: block; font-size: 12.5px; font-weight: 400; color: var(--dark-faint); margin-top: 2px; }
.nav-menu.mega { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; min-width: 560px; }
.nav-menu.mega .nm-col { min-width: 0; }

/* ---------- Multi-page: page hero ---------- */
.page-hero { padding: 168px 0 88px; }
.page-hero .kicker { margin-bottom: 20px; }
.page-hero h1 { max-width: 880px; margin-bottom: 24px; }
.page-hero .lede { max-width: 640px; color: var(--dark-muted); }
.page-hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }
.breadcrumb { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dark-faint); margin-bottom: 28px; }
.breadcrumb a { color: var(--dark-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-hover); }

/* ---------- Bento cards (site-wide feature language) ---------- */
.feature-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-row {
  position: relative; display: block; padding: 28px 30px;
  background: linear-gradient(180deg, #101312, #0B0E0D);
  border: 1px solid rgba(245,246,247,.09); border-radius: 16px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  overflow: hidden;
}
.feature-row::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; padding: 1px;
  background: linear-gradient(135deg, rgba(6,148,148,.55), transparent 40%, transparent 65%, rgba(6,148,148,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s;
}
.feature-row:hover { transform: translateY(-3px); box-shadow: 0 22px 60px -20px rgba(0,0,0,.8), 0 0 50px -22px rgba(6,148,148,.5); }
.feature-row:hover::before { opacity: 1; }
.band-dark .feature-row {
  background: linear-gradient(180deg, #101312, #0B0E0D);
  border-color: rgba(245,246,247,.09);
}
.band-dark .feature-row:hover { box-shadow: 0 22px 60px -20px rgba(0,0,0,.8), 0 0 50px -22px rgba(6,148,148,.5); }
.feature-row h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--paper); }
.feature-row p { font-size: 15px; line-height: 1.6; color: rgba(245,246,247,.62); }
.band-dark .feature-row p { color: var(--dark-muted); }
.feature-row > div h3 { margin-bottom: 8px; }
.cap-text .feature-rows { grid-template-columns: 1fr; gap: 12px; }
.cap-text .feature-row { padding: 20px 24px; }

/* Bento spans for hero cards in module grids */
.feature-row.span2 { grid-column: span 2; }

/* Gradient text accent */
.grad, .wword.grad {
  background: linear-gradient(100deg, #57B7B6 0%, #7BD8D2 45%, #069494 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Module marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--dark-line); padding: 18px 0; position: relative; }
.marquee-track {
  display: flex; gap: 56px; width: max-content;
  animation: marqueeMove 36s linear infinite;
  font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dark-faint); white-space: nowrap;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track b { color: var(--teal-hover); font-weight: 500; }
@keyframes marqueeMove { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Multi-page: article / legal typography ---------- */
.article { max-width: 760px; }
.article h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; margin: 48px 0 16px; }
.article h3 { font-size: 21px; font-weight: 600; margin: 36px 0 12px; }
.article p { font-size: 17px; line-height: 1.7; color: rgba(245,246,247,.66); margin-bottom: 16px; }
.band-dark .article p { color: var(--dark-muted); }
.article ul, .article ol { margin: 0 0 16px 22px; }
.article li { font-size: 17px; line-height: 1.7; color: rgba(245,246,247,.66); margin-bottom: 8px; }
.band-dark .article li { color: var(--dark-muted); }
.article strong { color: var(--paper); font-weight: 600; }
.band-dark .article strong { color: var(--paper); }
.article a { color: var(--teal-hover); }
.article-meta { font-family: var(--mono); font-size: 13px; letter-spacing: .05em; color: var(--light-faint); margin-bottom: 40px; }

/* ---------- Multi-page: card grids (solutions, resources) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 72px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.link-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--light-line); border-radius: 16px; padding: 36px 32px;
  background: linear-gradient(180deg, #101312, #0B0E0D);
  border-color: rgba(245,246,247,.09);
  transition: border-color .25s, transform .25s, box-shadow .25s;
  overflow: hidden;
}
.link-card::after {
  content: ""; position: absolute; inset: -40% -20% auto; height: 120px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(6,148,148,.16), transparent 70%);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.link-card:hover { border-color: rgba(6,148,148,.55); transform: translateY(-3px); box-shadow: 0 22px 60px -20px rgba(0,0,0,.8), 0 0 50px -22px rgba(6,148,148,.5); }
.band-dark .link-card:hover { box-shadow: 0 22px 60px -20px rgba(0,0,0,.8), 0 0 50px -22px rgba(6,148,148,.5); }
.link-card:hover::after { opacity: 1; }
.link-card .kicker { margin-bottom: 12px; }
.link-card h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; color: var(--paper); }
.link-card p { font-size: 15px; line-height: 1.6; color: rgba(245,246,247,.62); margin-bottom: 18px; }
.band-dark .link-card p { color: var(--dark-muted); }
.link-card .textlink { font-size: 15px; }

/* ---------- Multi-page: stat inline band ---------- */
.inline-stats { display: flex; gap: 64px; flex-wrap: wrap; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--light-line); }
.band-dark .inline-stats { border-color: var(--dark-line); }
.inline-stat .v { font-size: 34px; font-weight: 600; letter-spacing: -0.015em; }
.inline-stat .k { font-size: 14px; color: rgba(245,246,247,.6); margin-top: 4px; }
.band-dark .inline-stat .k { color: var(--dark-muted); }

/* ---------- Multi-page: CTA band ---------- */
.cta-band { padding: 128px 0; text-align: center; }
.cta-band .d2 { margin-bottom: 20px; }
.cta-band .lede { color: var(--dark-muted); max-width: 620px; margin: 0 auto 48px; }
.cta-band .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  :root { --margin: 40px; }
  .section { padding: 112px 0; }
  .section-deep { padding-top: 128px; }
  .cap-row { grid-template-columns: 1fr 1fr; gap: 40px; }
  .steps { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .region-wrap { grid-template-columns: 1fr; gap: 64px; }
  .faq-wrap { grid-template-columns: 4fr 1fr 7fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (max-width: 743px) {
  :root { --margin: 20px; }
  body { font-size: 16px; }
  .section { padding: 80px 0; }
  .section-deep { padding-top: 96px; }
  .hero { padding-top: 128px; }
  .hero-wave-zone { height: 200px; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas { gap: 12px; }
  .stats-row { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .cap-rows { gap: 64px; margin-top: 48px; }
  .cap-row, .cap-row.flip { grid-template-columns: 1fr; gap: 24px; }
  .cap-row.flip .cap-text { order: 1; }
  .cap-row.flip .cap-media { order: 2; }
  .steps-line { display: none; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .steps-wrap { margin-top: 48px; }
  .models { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .model-panel { padding: 40px; }
  .hybrid-bar { padding: 28px 40px; }
  .ent-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; }
  .credentials-row { gap: 20px; flex-direction: column; }
  .result-stats { grid-template-columns: 1fr; gap: 48px; margin-top: 48px; }
  .case { margin-top: 64px; }
  .offer { grid-template-columns: 1fr; padding: 40px 28px; gap: 40px; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-title { position: static; margin-bottom: 48px; }
  .faq-q { font-size: 18px; padding: 24px 0; }
  .demo-form-panel { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .nav-links a:not(.btn), .nav-lang, .nav-item { display: none; }
  .sticky-cta.on { display: block; }
  .nav-inner { gap: 16px; }
  .page-hero { padding: 128px 0 64px; }
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; margin-top: 40px; }
  .feature-rows { grid-template-columns: 1fr; }
  .feature-row.span2 { grid-column: span 1; }
  .inline-stats { gap: 32px; }
  .cta-band { padding: 80px 0; }
}
@media (max-width: 1199px) and (min-width: 744px) {
  /* A three-card product group dropped to two columns leaves an orphan on row two,
     which reads as a mistake rather than a layout. Three cards hold 3-up down to
     744px at ~230px each, which is still legible; only 4+ card groups need 2-up. */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .card-grid:has(> :nth-child(3):last-child) .link-card { padding: 26px 22px; }
  .card-grid:has(> :nth-child(3):last-child) .link-card h3 { font-size: 19px; }
  .feature-row { grid-template-columns: 240px 1fr; }
}

/* Module index - the ten Command modules as a jump grid (features.html) */
.module-index { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--dark-line); border: 1px solid var(--dark-line); }
.module-index a { display: flex; align-items: baseline; gap: 10px; padding: 18px 20px; background: var(--dark-bg); color: var(--paper); font-size: 15px; line-height: 1.35; text-decoration: none; transition: background .18s ease, color .18s ease; }
.module-index a:hover { background: var(--dark-raise); color: var(--teal-hover); }
.module-index a span { font-family: var(--mono); font-size: 12px; color: var(--dark-muted); letter-spacing: .04em; }
@media (max-width: 900px) { .module-index { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   Arabic / RTL
   The layout is mostly logical already; this flips what isn't,
   and switches the type stack to Tajawal.
   ============================================================ */
[dir="rtl"] { font-family: var(--arabic); }
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .d1, [dir="rtl"] .d2, [dir="rtl"] .h2, [dir="rtl"] .h3, [dir="rtl"] .h4,
[dir="rtl"] .lede, [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] .btn { font-family: var(--arabic); }

/* Arabic needs more leading and slightly larger optical size than Geist */
[dir="rtl"] .d1 { line-height: 1.24; letter-spacing: 0; }
[dir="rtl"] .d2, [dir="rtl"] .h2 { line-height: 1.32; letter-spacing: 0; }
[dir="rtl"] .lede { line-height: 1.85; }
[dir="rtl"] p, [dir="rtl"] li { line-height: 1.9; }
[dir="rtl"] .feature-row p, [dir="rtl"] .link-card p, [dir="rtl"] .ent-item p { line-height: 1.85; }

/* Latin runs inside Arabic text (product names, ISO 27001, AED, URLs) stay LTR */
[dir="rtl"] .num, [dir="rtl"] .stat-v, [dir="rtl"] .inline-stat .v,
[dir="rtl"] .kicker, [dir="rtl"] code, [dir="rtl"] .sb {
  direction: ltr; unicode-bidi: isolate; font-family: var(--mono);
}
[dir="rtl"] .kicker { display: inline-block; }
/* Geist Mono has no Arabic glyphs - the tagline and trust line must use the Arabic stack */
[dir="rtl"] .tagline span,
[dir="rtl"] .hero-trust { font-family: var(--arabic); letter-spacing: 0; font-size: 14px; }
[dir="rtl"] .tagline span { line-height: 1.7; }

/* arrows point the other way in RTL */
[dir="rtl"] .ar { display: inline-block; transform: scaleX(-1); }

/* flip the pieces that use physical sides */
[dir="rtl"] .faq-q, [dir="rtl"] .console-item { text-align: right; }
[dir="rtl"] .faq-plus::after { left: auto; right: 6px; }
[dir="rtl"] .nav-menu { left: auto; right: -24px; }
[dir="rtl"] .nav-item > button::after { transform: rotate(-45deg) scaleX(-1); }
[dir="rtl"] .live-card.pos-tr { right: auto; left: -34px; }
[dir="rtl"] .live-card.pos-bl { left: auto; right: -34px; }
@media (max-width: 1199px) {
  [dir="rtl"] .live-card.pos-tr { left: 0; right: auto; }
  [dir="rtl"] .live-card.pos-bl { right: 0; left: auto; }
}
[dir="rtl"] .console-side { border-inline-end: none; border-inline-start: 1px solid rgba(245,246,247,.07); }
[dir="rtl"] .console-stage img { object-position: right top; }
[dir="rtl"] .module-index a span { direction: ltr; }
[dir="rtl"] .bubble.en { direction: ltr; text-align: left; align-self: flex-start; }
[dir="rtl"] .bubble.ar { align-self: flex-start; }

/* the screenshots are English UI; don't mirror them, just let them sit naturally */
[dir="rtl"] .media-frame img { direction: ltr; }

/* the decorative hero wave is wider than the viewport; clip it rather than
   let it create a horizontal scrollbar (visible in RTL, where it spills left) */
.hero-wave-zone { overflow: hidden; }
.hero-wave { max-width: 100%; width: 100%; }
/* NEVER put overflow-x on html or body here. The console explorer is a
   position:sticky pin inside a 1000vh track; any overflow on an ancestor
   silently kills sticky and the pin scrolls away, leaving ~8000px of void.
   Clip the offending element itself instead - see .hero-wave-zone above. */
/* removed: overflow-x on body also breaks the sticky console pin */

/* ============================================================
   PROBLEM → SOLUTION treatment
   Leadership note: a visitor must never momentarily wonder whether a
   negative statement describes ClearGrid. So the problem zone is
   explicitly labelled as the reader's, numbered, and tinted away from
   teal; the turn into the solution is a separate, teal-led statement.
   ============================================================ */
:root { --problem: #E4685D; --problem-dim: rgba(228,104,93,.14); }

.problem-zone {
  border: 1px solid rgba(228,104,93,.20);
  border-radius: 20px;
  padding: 40px 36px 36px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(228,104,93,.055), transparent 58%),
    var(--dark-card);
}
.band-light .problem-zone { background: radial-gradient(120% 100% at 0% 0%, rgba(228,104,93,.06), transparent 58%), #101413; }
.problem-zone > .sec-head { margin-bottom: 30px; }
.problem-zone .kicker,
.kicker.is-problem {
  color: var(--problem);
  display: inline-flex; align-items: center; gap: 8px;
}
.kicker.is-problem::before {
  content: ""; width: 16px; height: 1.5px; background: currentColor; flex: 0 0 auto;
}

/* numbered problem cards */
/* The 1px-gap trick - container painted the line colour, cells painted over it - only
   works when the grid is FULL. With auto-fit this resolved to four columns, so six
   problems left two empty cells and the container background showed through as a big
   pale block. Two changes so that cannot happen again:
   1. cap at three columns, because these grids hold six items and 6 divides by 3, 2
      and 1 but never by 4;
   2. drop the container-background trick entirely and draw the separators on the cells,
      so an incomplete row renders as nothing at all rather than as a panel. */
.problem-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(245,246,247,.09);
  background: transparent;
}
.problem-item {
  background: var(--ink); padding: 24px 24px 26px; min-width: 0;
  border-inline-start: 1px solid rgba(245,246,247,.09);
  border-block-start: 1px solid rgba(245,246,247,.09);
}
/* no seam against the container's own border */
.problem-item:nth-child(3n + 1) { border-inline-start: none; }
.problem-item:nth-child(-n + 3) { border-block-start: none; }
.band-light .problem-item { background: #0D0F0E; }
@media (max-width: 899px) {
  .problem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-item:nth-child(n) { border-inline-start: 1px solid rgba(245,246,247,.09);
                               border-block-start: 1px solid rgba(245,246,247,.09); }
  .problem-item:nth-child(2n + 1) { border-inline-start: none; }
  .problem-item:nth-child(-n + 2) { border-block-start: none; }
}
@media (max-width: 599px) {
  .problem-grid { grid-template-columns: minmax(0, 1fr); }
  .problem-item:nth-child(n) { border-inline-start: none;
                               border-block-start: 1px solid rgba(245,246,247,.09); }
  .problem-item:first-child { border-block-start: none; }
}
.problem-item .pn {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--problem); margin-bottom: 12px;
}
.problem-item h3 { font-size: 16.5px; line-height: 1.35; font-weight: 600; margin-bottom: 8px; }
.problem-item p { font-size: 14.5px; line-height: 1.65; color: var(--dark-muted); }
.band-light .problem-item p { color: var(--dark-muted); }

/* the turn: an explicit, teal-led hand-off out of the problem */
.solution-turn { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--dark-line); }
.band-light .solution-turn { border-color: var(--dark-line); }
.solution-turn .kicker { color: var(--teal-hover); }
.band-light .solution-turn .kicker { color: var(--teal-hover); }
.solution-turn .h2 { margin-top: 10px; }
@media (max-width: 743px) {
  .problem-zone { padding: 28px 20px 24px; border-radius: 16px; }
  .solution-turn { margin-top: 40px; padding-top: 30px; }
}

/* ============================================================
   INLINE CONVERSION MOMENT
   Placed at points on a page where the argument has just landed, so a
   convinced reader never has to scroll to the footer to act.
   ============================================================ */
.cta-inline {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  flex-wrap: wrap;
  margin: 56px 0 0;
  padding: 24px 28px;
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(6,148,148,.10), rgba(6,148,148,.02) 60%, transparent);
}
.band-light .cta-inline { border-color: var(--dark-line); background: linear-gradient(100deg, rgba(6,148,148,.12), rgba(6,148,148,.03) 60%, transparent); }
.cta-inline p { font-size: 16.5px; line-height: 1.5; margin: 0; max-width: 58ch; }
.cta-inline p strong { font-weight: 600; }
.cta-inline .cta-inline-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; }
@media (max-width: 743px) {
  .cta-inline { margin-top: 40px; padding: 20px; gap: 16px; }
  .cta-inline p { font-size: 15.5px; }
  /* the actions row must be allowed to shrink to the card, or a width:100% button
     resolves against an over-wide flex item and spills past the container edge */
  .cta-inline .cta-inline-actions { flex: 1 1 100%; width: 100%; min-width: 0; }
  .cta-inline .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   CARD GRID ALIGNMENT
   Cards in one group share height, and their CTA sits on a common
   baseline regardless of how long the body copy is. Fixed on the
   component, not with per-card margins.
   ============================================================ */
.card-grid { align-items: stretch; }
.card-grid > .link-card,
.card-grid > .ent-item { height: 100%; }
.link-card {
  display: flex; flex-direction: column; align-items: flex-start;
}
.link-card p { flex: 1 1 auto; }
.link-card .textlink { margin-top: auto; padding-top: 4px; }
.link-card .kicker,
.link-card h3 { flex: 0 0 auto; }

/* ============================================================
   CAPABILITY BLOCK — a named capability, a short explanation and a
   purpose-built visual, alternating sides. For the handful of
   capabilities that explain why Command is different.
   ============================================================ */
.capability { display: grid; grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  gap: 56px; align-items: center; }
.capability + .capability { margin-top: 96px; }
.capability.flip > .cap-media { order: -1; }
.capability .cap-copy h3 { font-size: 28px; line-height: 1.22; letter-spacing: -.018em;
  font-weight: 600; margin: 10px 0 14px; }
.capability .cap-copy p { font-size: 16.5px; line-height: 1.7; color: var(--dark-muted); }
.band-light .capability .cap-copy p { color: var(--dark-muted); }
.capability .cap-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.capability .cap-list li { position: relative; padding-inline-start: 20px; font-size: 15px;
  line-height: 1.6; color: var(--dark-muted); }
.band-light .capability .cap-list li { color: var(--dark-muted); }
.capability .cap-list li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 9px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--teal-hover);
}
.cap-media { min-width: 0; }
@media (max-width: 979px) {
  .capability { grid-template-columns: 1fr; gap: 28px; }
  .capability.flip > .cap-media { order: 0; }
  .capability + .capability { margin-top: 64px; }
  .capability .cap-copy h3 { font-size: 23px; }
}

/* ---------- marquee: intentional, and swappable to client logos later ---------- */
.marquee-wrap { border-block: 1px solid var(--dark-line); padding: 20px 0 22px; }
.marquee-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dark-faint); text-align: center; margin: 0 0 14px;
}
.marquee-wrap .marquee { border-block: none; padding: 0; }
.marquee-set { display: inline-flex; align-items: center; gap: 56px; }
/* When this flips to data-marquee-mode="clients", .marquee-item carries logos or names
   at a consistent optical size without touching the track or the animation. */
.marquee-item { display: inline-flex; align-items: center; height: 26px; }
.marquee-item img { height: 100%; width: auto; opacity: .72; filter: grayscale(1); }
[data-marquee-mode="clients"] .marquee-track { text-transform: none; letter-spacing: .02em; font-size: 15px; }

/* ============================================================
   DIAGRAMS
   Built from real HTML text, not images. Two reasons: the copy stays
   selectable, translatable and crawlable by search engines and LLMs
   (a hard requirement), and it reflows at mobile instead of becoming
   an unreadable 300px-wide picture of words.
   ============================================================ */

/* --- .flow: an ordered pipeline. Horizontal on desktop, vertical on mobile. --- */
.flow { display: grid; gap: 0; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; }
.flow-step {
  position: relative; padding: 22px 22px 24px;
  border: 1px solid var(--dark-line); border-inline-end: none;
  background: var(--dark-card);
}
.flow-step:first-child { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.flow-step:last-child { border-inline-end: 1px solid var(--dark-line); border-start-end-radius: 14px; border-end-end-radius: 14px; }
.band-light .flow-step { background: #101413; border-color: var(--dark-line); }
.band-light .flow-step:last-child { border-inline-end-color: var(--dark-line); }
.flow-step .fs-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; margin-bottom: 12px;
  background: rgba(6,148,148,.16); color: var(--teal-hover);
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
}
.band-light .flow-step .fs-n { background: rgba(6,148,148,.16); color: var(--teal-hover); }
.flow-step h4 { font-size: 15.5px; line-height: 1.35; font-weight: 600; margin-bottom: 7px; }
.flow-step p { font-size: 13.5px; line-height: 1.6; color: var(--dark-muted); }
.band-light .flow-step p { color: var(--dark-muted); }
/* the connector chevron between stages */
.flow-step + .flow-step::before {
  content: ""; position: absolute; inset-inline-start: -5px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  border-top: 1.5px solid var(--teal); border-inline-end: 1.5px solid var(--teal);
  transform: rotate(45deg); background: var(--ink); z-index: 2;
}
.band-light .flow-step + .flow-step::before { background: #0D0F0E; }
[dir="rtl"] .flow-step + .flow-step::before { transform: rotate(225deg); }
@media (max-width: 979px) {
  .flow { grid-auto-flow: row; grid-auto-columns: auto; }
  .flow-step { border-inline-end: 1px solid var(--dark-line); border-block-end: none; }
  .band-light .flow-step { border-inline-end-color: var(--light-line); }
  .flow-step:first-child { border-radius: 14px 14px 0 0; }
  .flow-step:last-child { border-radius: 0 0 14px 14px; border-block-end: 1px solid var(--dark-line); }
  .band-light .flow-step:last-child { border-block-end-color: var(--light-line); }
  .flow-step + .flow-step::before {
    inset-inline-start: 50%; top: -5px; margin-top: 0; margin-inline-start: -4.5px;
    transform: rotate(135deg);
  }
  [dir="rtl"] .flow-step + .flow-step::before { transform: rotate(135deg); }
}

/* --- .loop: a closed cycle, for anything that feeds back into itself --- */
.loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  position: relative; }
.loop-node { border: 1px solid var(--dark-line); border-radius: 12px; padding: 18px 18px 20px;
  background: var(--dark-card); }
.band-light .loop-node { background: #101413; border-color: var(--dark-line); }
.loop-node .ln-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-hover); display: block; margin-bottom: 9px; }
.band-light .loop-node .ln-tag { color: var(--teal-hover); }
.loop-node h4 { font-size: 15px; line-height: 1.35; font-weight: 600; margin-bottom: 6px; }
.loop-node p { font-size: 13.5px; line-height: 1.6; color: var(--dark-muted); }
.band-light .loop-node p { color: var(--dark-muted); }
.loop-close {
  margin-top: 14px; padding: 13px 18px; border-radius: 12px;
  border: 1px dashed rgba(6,148,148,.42); background: rgba(6,148,148,.06);
  font-size: 14px; color: var(--dark-muted); display: flex; align-items: center; gap: 10px;
}
.band-light .loop-close { background: rgba(6,148,148,.08); color: var(--dark-muted); }
.loop-close b { color: var(--teal-hover); font-weight: 500; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.band-light .loop-close b { color: var(--teal-hover); }

/* --- .split: a two-column before/after or us/them comparison --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.split-col { border: 1px solid var(--dark-line); border-radius: 14px; padding: 24px 24px 26px;
  background: var(--dark-card); }
.band-light .split-col { background: #101413; border-color: var(--dark-line); }
.split-col.is-before { border-color: rgba(228,104,93,.24); }
.split-col.is-after { border-color: rgba(6,148,148,.34); }
.split-col .sc-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; display: block; margin-bottom: 14px; }
.split-col.is-before .sc-tag { color: var(--problem); }
.split-col.is-after .sc-tag { color: var(--teal-hover); }
.band-light .split-col.is-after .sc-tag { color: var(--teal-hover); }
.split-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.split-col li { font-size: 14.5px; line-height: 1.6; color: var(--dark-muted);
  padding-inline-start: 22px; position: relative; }
.band-light .split-col li { color: var(--dark-muted); }
.split-col li::before { position: absolute; inset-inline-start: 0; top: 0;
  font-family: var(--mono); font-size: 13px; }
.split-col.is-before li::before { content: "\00d7"; color: var(--problem); }
.split-col.is-after li::before { content: "\2713"; color: var(--teal-hover); }
@media (max-width: 743px) { .split { grid-template-columns: 1fr; } }

/* ---------- footer grid: five columns, but only where five columns fit ----------
   This was an inline grid-template-columns of 3fr 2fr 2fr 2fr 2fr, which no media
   query could override. Below ~1000px it forced the document to ~598px wide, and
   because .nav is position:fixed with inset-inline:0 it stretched to the document
   rather than the viewport - putting the nav's "Book a consultation" button
   completely off-screen on mobile, on every page. */
.footer-grid-5 { grid-template-columns: 3fr 2fr 2fr 2fr 2fr; }
@media (max-width: 1099px) { .footer-grid-5 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } }
@media (max-width: 899px)  { .footer-grid-5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 599px)  { .footer-grid-5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 419px)  { .footer-grid-5 { grid-template-columns: minmax(0,1fr); } }
.footer-grid-5 > * { min-width: 0; }
/* belt and braces: the fixed nav must track the viewport, never the document width */
.nav { width: 100%; max-width: 100vw; }
.nav-inner { min-width: 0; }
.nav-links { min-width: 0; }

/* ---------- steps: collapse instead of squeezing ----------
   .steps was a hard repeat(5, 1fr) with no responsive rule. On a 390px viewport the
   four steps on command.html rendered 66px wide each and pushed the document to
   472px, which is both unreadable and a source of horizontal overflow. It also
   drives the same component on the homepage (5 steps) and how-it-works. */
@media (max-width: 1099px) {
  .steps { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 24px; }
  .steps-line { display: none; }   /* the connector only reads as a line in one row */
}
@media (max-width: 743px) {
  .steps { grid-template-columns: minmax(0,1fr); gap: 0; }
  .steps-wrap { margin-top: 48px; }
  .step { padding: 20px 0 22px; border-top: 1px solid var(--dark-line); }
  .band-light .step { border-top-color: var(--light-line); }
  .step:last-child { border-bottom: 1px solid var(--dark-line); }
  .band-light .step:last-child { border-bottom-color: var(--light-line); }
  .step-marker { display: none; }
  .step .h4 { margin-bottom: 6px; }
}
.steps > * { min-width: 0; }

/* ---------- column-count modifiers ----------
   These replace inline grid-template-columns declarations that no media query could
   beat. Same defect as the footer: a component frozen at its desktop column count,
   rendering 87px-wide unreadable columns on a phone and forcing the document wider
   than the viewport. Declared as attributes so the responsive tiers below always win. */
[data-cols="1"] { grid-template-columns: minmax(0,1fr); }
[data-cols="3"] { grid-template-columns: repeat(3, minmax(0,1fr)); }
[data-cols="4"] { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1099px) {
  [data-cols="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 743px) {
  [data-cols="3"], [data-cols="4"] { grid-template-columns: minmax(0,1fr); }
}

/* ============================================================
   TABLET TIER (744-979px)
   This range was never designed. Two consequences were measured:
   the desktop nav row was wider than the viewport, pushing the
   "Book a consultation" button ~105px off-screen; and .cap-row stayed
   two-up until 743px, rendering 2880px-wide product screenshots at
   ~357px, i.e. unreadable without zooming.
   ============================================================ */
@media (max-width: 979px) {
  .nav-links a:not(.btn), .nav-lang, .nav-item { display: none; }
  .nav-inner { gap: 12px; }
  /* the image needs the full column at this width to be legible at all */
  .cap-row, .cap-row.flip { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .cap-row.flip .cap-text { order: 1; }
  .cap-row.flip .cap-media { order: 2; }
  .cap-rows { gap: 72px; }
}

/* ---------- no-JS disclosure nav for narrow viewports ---------- */
.nav-drawer { display: none; }
@media (max-width: 979px) { .nav-drawer { display: block; margin-inline-start: 8px; } }
.nav-drawer > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--dark-line);
  font-size: 14px; font-weight: 500; color: var(--paper); background: rgba(245,246,247,.04);
}
.nav-drawer > summary::-webkit-details-marker { display: none; }
.nav-drawer > summary:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.nav-drawer-bars { position: relative; width: 15px; height: 9px; }
.nav-drawer-bars::before, .nav-drawer-bars::after,
.nav-drawer > summary .nav-drawer-bars { border-top: 1.5px solid currentColor; }
.nav-drawer-bars::before, .nav-drawer-bars::after {
  content: ""; position: absolute; inset-inline: 0; border-top: 1.5px solid currentColor;
}
.nav-drawer-bars::before { top: 3.5px; }
.nav-drawer-bars::after { top: 7.5px; }
.nav-drawer[open] > summary { border-color: rgba(6,148,148,.55); }
.nav-drawer-panel {
  position: absolute; inset-inline: 0; top: 64px;
  background: rgba(10,10,8,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-block: 1px solid var(--dark-line);
  padding: 24px var(--margin) 28px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 24px 28px;
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.nav-drawer-col h4 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dark-faint); margin-bottom: 10px; font-weight: 500;
}
.nav-drawer-col a {
  display: block; padding: 7px 0; font-size: 15px; color: rgba(245,246,247,.82);
  text-decoration: none; min-height: 34px;
}
.nav-drawer-col a:hover, .nav-drawer-col a:focus-visible { color: var(--teal-hover); }


/* ============================================================
   Merged from styles-qa.css (independent design + visual QA pass).
   Duplicates of the footer and nav fixes were dropped - those are
   fixed at source above. Everything below is a distinct defect or a
   new component.
   ============================================================ */
/* ============================================================
   ClearGrid — styles-qa.css
   Design & visual-QA pass. Loads AFTER styles.css.

   Written as a separate file because styles.css is being edited
   concurrently. Everything here either (a) repairs a measured
   defect in styles.css, or (b) adds a reusable component in the
   existing system's idiom. No page-specific magic numbers.

   Tokens, radii, shadows and colours are all inherited from
   styles.css — nothing new is invented here except the two
   variables styles.css references but never defines.
   ============================================================ */


/* ============================================================
   1. REPAIRS
   ============================================================ */

/* --- 1.1 Two variables styles.css uses but never declares ---
   .module-index sets `background: var(--dark-bg)` and
   `:hover { background: var(--dark-raise) }`. Neither exists in
   :root, so the whole jump grid painted transparent and the hover
   state did nothing. Values chosen to match the card surface
   already used by .feature-row / .link-card. */
:root {
  --dark-bg: #0B0E0D;
  --dark-raise: #131817;
}

/* --- 1.4 .cap-row.flip handed the image the narrow column ---
   .cap-row is `5fr 7fr` (text narrow, media wide) and .flip only
   swaps the DOM order, not the track widths. So on every flipped
   row the screenshot rendered into the 5fr track (432px at 1440)
   and the prose stretched into the 7fr track (605px) — the exact
   inverse of the intent. Measured on platform.html: row 1 media
   605px, row 2 media 432px, row 3 media 605px. */
.cap-row.flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 1199px) {
  .cap-row.flip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 743px) {
  .cap-row.flip { grid-template-columns: 1fr; }
}

/* --- 1.5 Two .cap-text children in one .cap-row ---
   Where a .cap-row holds prose on both sides (securitize) the
   5fr/7fr split makes two text columns of unequal measure for no
   reason. Even them up. */
.cap-row.cap-row-even { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 743px) { .cap-row.cap-row-even { grid-template-columns: 1fr; } }

/* --- 1.6 Lazy images collapse .media-frame to 1px ---
   Every product shot is loading="lazy" with no intrinsic size, so
   .media-frame measured 1px tall (its own borders) until the image
   decoded, then jumped to 660px. Fifteen of those on features.html.
   The fragments now carry width/height attributes; this makes the
   browser reserve the box from them and keeps the image fluid. */
.media-frame img { height: auto; }
.media-frame { background: #0A0C0B; }

/* --- 1.7 Standalone .textlink was a 28px touch target ---
   Fine inline, too small as the only affordance at the end of a
   card or column. 44px minimum on touch widths. */
@media (max-width: 743px) {
  .cap-text > .textlink,
  .sec-head > .textlink,
  p > .textlink:only-child { min-height: 44px; }
  a.textlink { padding-block: 8px; }
}

/* --- 1.8 .ent-grid orphans its last item on odd counts ---
   securitize.html has a five-item .ent-grid in a two-column track,
   which left a 361x~120px hole beside the fifth item. Keep the
   deliberate 2-up rhythm (.ent-item p is capped at 40ch for it) and
   only widen a lone tail item so it closes the row instead of
   stranding. Even counts are untouched. */
.ent-grid > :last-child:nth-child(odd) { grid-column: span 2; }
.ent-grid > :last-child:nth-child(odd) p { max-width: 84ch; }
@media (max-width: 743px) {
  .ent-grid > :last-child:nth-child(odd) { grid-column: span 1; }
}

/* --- 1.9 .link-card as a non-interactive div ---
   Several pages use .link-card on a <div>. It kept the hover lift,
   the teal glow and the arrow — an affordance for a click that does
   nothing. Strip the interaction, keep the surface. */
div.link-card { cursor: default; }
div.link-card:hover { transform: none; border-color: rgba(245,246,247,.09); box-shadow: none; }
div.link-card:hover::after { opacity: 0; }


/* ============================================================
   2. SPACING VARIANTS
   Several sections carry 160px of padding around ~200 characters
   of copy and a row of buttons — 680px of viewport for one line.
   These are section-level modifiers, not per-page overrides.
   ============================================================ */

/* A section whose whole job is a heading and a row of links. */
.section.section-compact { padding-top: 88px; padding-bottom: 88px; }
.section.section-compact .models-cta { margin-top: 32px; }
@media (max-width: 1199px) { .section.section-compact { padding-top: 64px; padding-bottom: 64px; } }
@media (max-width: 743px)  { .section.section-compact { padding-top: 56px; padding-bottom: 56px; } }

/* Consecutive sections in the same band shouldn't pay for two
   full paddings at the seam. */
.section.section-tight-top { padding-top: 96px; }
@media (max-width: 743px) { .section.section-tight-top { padding-top: 56px; } }


/* ============================================================
   3. NEW COMPONENTS
   ============================================================ */

/* --- 3.1 Sticky module index (features.html) ---
   features.html measures 30,388px — 33.8 viewports at 1440x900.
   The jump grid existed but scrolled away after the first screen,
   so there was no way back to it without scrolling 33 screens.
   Pinned under the 64px nav it becomes usable navigation. */
.module-index-wrap {
  position: sticky; top: 64px; z-index: 40;
  background: rgba(10, 10, 8, 0.86);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--dark-line);
  padding: 10px 0;
}
.module-index-wrap .module-index { border: none; background: transparent; gap: 6px; }
.module-index-wrap .module-index a {
  background: rgba(245,246,247,.04);
  border: 1px solid var(--dark-line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13.5px;
  align-items: center;
  gap: 8px;
}
.module-index-wrap .module-index a span { font-size: 11px; color: var(--teal-hover); }
.module-index-wrap .module-index a:hover { background: rgba(6,148,148,.14); border-color: rgba(6,148,148,.35); color: var(--paper); }
@media (max-width: 1199px) {
  /* At 834px a 4-across wrap needed 3 rows and the pinned bar
     measured 163px — 18% of the viewport, permanently. Below the
     width where 10 chips fit in two rows, the index becomes a
     single horizontally-scrolling track instead. The page body
     still never scrolls sideways. */
  .module-index-wrap { position: static; padding: 0; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .module-index-wrap .module-index {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  .module-index-wrap .module-index a { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; }
}
/* --- 3.1b Anchor jumps land under the fixed nav ---
   The nav is position:fixed at 64px and nothing in styles.css sets
   scroll-margin, so every in-page #anchor puts its target's top
   64px behind the nav. On features.html the pinned module index
   makes it 132px. Site-wide fix, in logical units. */
section[id], [id].section, div[id].container { scroll-margin-top: 88px; }
.has-subnav section[id] { scroll-margin-top: 140px; }
@media (max-width: 743px) {
  section[id], [id].section { scroll-margin-top: 80px; }
  .has-subnav section[id] { scroll-margin-top: 80px; }
}


/* --- 3.2 Progressive disclosure ---
   Ten feature modules of nine to thirteen cards each is the depth
   the page is for; reading it as one 34-viewport run is not. The
   overflow cards move inside <details>, so the text stays in the
   HTML for crawlers and for anyone who opens it, and the page
   becomes scannable. */
.cg-more { margin-top: 16px; }
.cg-more > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid rgba(6,148,148,.32); border-radius: 10px;
  background: rgba(6,148,148,.07);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--teal-hover);
  transition: background .18s, border-color .18s;
}
.band-light .cg-more > summary { color: var(--teal-on-light); }
.cg-more > summary::-webkit-details-marker { display: none; }
.cg-more > summary:hover { background: rgba(6,148,148,.14); border-color: rgba(6,148,148,.5); }
.cg-more > summary:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.cg-more > summary::after {
  content: ""; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.cg-more[open] > summary::after { transform: rotate(225deg) translateY(2px); }
.cg-more[open] > summary { margin-bottom: 16px; }
.cg-more .feature-rows { margin-top: 0; }


/* --- 3.3 Specification table ---
   For content that is genuinely tabular — the back-up servicing
   readiness tiers are a published tier matrix, and three prose
   cards could not express "which row differs between tiers".
   Scrolls inside itself; the page never scrolls sideways. */
.spec-table-wrap {
  margin-top: 56px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #101312, #0B0E0D);
}
.band-light .spec-table-wrap { border-color: rgba(245,246,247,.09); }
.spec-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.spec-table caption {
  text-align: start; padding: 20px 24px 0;
  font-size: 14px; line-height: 1.55; color: var(--dark-faint);
}
.spec-table th, .spec-table td {
  text-align: start; padding: 16px 20px;
  border-bottom: 1px solid var(--dark-line);
  font-size: 15px; line-height: 1.5;
  vertical-align: top;
}
.spec-table thead th {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal-hover);
  border-bottom-color: rgba(6,148,148,.3);
  white-space: nowrap;
}
.band-light .spec-table thead th { color: var(--teal-on-light); }
.spec-table tbody th {
  font-weight: 500; color: var(--paper);
  width: 30%; min-width: 180px;
}
.spec-table tbody td { color: var(--dark-muted); font-feature-settings: "tnum" 1; }
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover td, .spec-table tbody tr:hover th { background: rgba(6,148,148,.05); }
/* the column the reader is being sold */
.spec-table .col-lead { color: var(--paper); background: rgba(6,148,148,.06); }
.spec-table thead .col-lead { background: rgba(6,148,148,.10); }
@media (max-width: 743px) {
  .spec-table-wrap { margin-top: 40px; }
  .spec-table th, .spec-table td { padding: 13px 16px; font-size: 14px; }
}


/* --- 3.4 Case-study anatomy ---
   Each case study was four run-on paragraphs whose only structure
   was a bold lead-in inside the first sentence — 820px of
   undifferentiated prose per case, six times. Same words, promoted
   to labelled blocks you can read in any order. */
.case-anatomy {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.case-part {
  padding: 28px 30px;
  background: linear-gradient(180deg, #101312, #0B0E0D);
  border: 1px solid rgba(245,246,247,.09);
  border-radius: 16px;
}
.case-part > h3 {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--teal-hover); margin-bottom: 12px;
}
.band-light .case-part > h3 { color: var(--teal-on-light); }
.case-part p { font-size: 16px; line-height: 1.62; color: var(--dark-muted); }
.case-part p + p { margin-top: 12px; }
/* the outcome block earns the accent */
.case-part.is-outcome { border-color: rgba(6,148,148,.34); background: linear-gradient(180deg, rgba(6,148,148,.10), rgba(6,148,148,.03)); }
.case-part.is-outcome p { color: var(--paper); }
.case-part.span2 { grid-column: span 2; }
@media (max-width: 743px) {
  .case-anatomy { grid-template-columns: 1fr; margin-top: 32px; }
  .case-part.span2 { grid-column: span 1; }
  .case-part { padding: 22px 22px; }
}


/* --- 3.5 Diagram frame ---
   One container for every inline SVG on the site, so diagrams
   inherit the same border, radius and ground as .media-frame
   instead of each one inventing its own. */
.cg-figure { margin-top: 56px; }
.cg-figure figcaption {
  margin-top: 16px;
  font-size: 14px; line-height: 1.6; color: var(--dark-faint);
  max-width: 76ch;
}
.cg-diagram {
  border: 1px solid rgba(245,246,247,.12);
  border-radius: 14px;
  background: #0A0C0B;
  padding: 32px;
  box-shadow: 0 32px 90px -20px rgba(0,0,0,.75), 0 0 100px -40px rgba(6,148,148,.4);
  /* A landscape diagram scaled to a phone renders its labels at
     five or six pixels. Measured at a 390px viewport the SVG came
     out 480px wide, a 0.44 scale, which put 12.5px label text at
     5.5px. So the diagram has a legibility floor and scrolls
     inside its own frame below it - the page body never does. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.cg-diagram > svg {
  display: block;
  width: 100%; height: auto;
  min-width: 920px;   /* keeps .dg-body at >=10.5px effective */
}
/* Diagrams that are drawn to reflow can opt out of the floor. */
.cg-diagram--fluid > svg { min-width: 0; }
/* Fade the trailing edge so a scrollable diagram looks scrollable. */
.cg-figure { position: relative; }
.cg-diagram::-webkit-scrollbar { height: 8px; }
.cg-diagram::-webkit-scrollbar-thumb { background: rgba(245,246,247,.22); border-radius: 4px; }
.cg-diagram::-webkit-scrollbar-track { background: rgba(245,246,247,.05); }
.cg-figure .dg-hint {
  display: none;
  margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-hover);
}
@media (max-width: 1099px) {
  .cg-figure .dg-hint { display: block; }
}
@media (max-width: 743px) {
  .cg-figure { margin-top: 36px; }
  .cg-diagram { padding: 16px; }
}
/* SVG type scale - kept in CSS so diagram text obeys the type
   system and stays selectable, translatable and searchable. */
.cg-diagram text { font-family: var(--sans); fill: var(--paper); }
.cg-diagram .dg-title { font-size: 16px; font-weight: 600; }
.cg-diagram .dg-body  { font-size: 13.5px; fill: rgba(245,246,247,.74); }
.cg-diagram .dg-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; fill: var(--teal-hover); }
.cg-diagram .dg-num   { font-family: var(--mono); font-size: 12px; fill: var(--teal-hover); }
.cg-diagram .dg-box   { fill: #131817; stroke: rgba(245,246,247,.17); }
.cg-diagram .dg-box-accent { fill: rgba(6,148,148,.10); stroke: rgba(6,148,148,.34); }
.cg-diagram .dg-box-warn   { fill: rgba(226,97,97,.09); stroke: rgba(226,97,97,.38); }
.cg-diagram .dg-line  { stroke: rgba(245,246,247,.26); fill: none; }
.cg-diagram .dg-line-accent { stroke: var(--teal); fill: none; }
.cg-diagram .dg-fill-accent { fill: var(--teal-hover); }

/* --- 3.6 Phase-grouped process flow ---
   .steps is a flat five-across rail. Where the source material
   groups the stages (pre-invocation / trigger / post-invocation)
   the flat rail throws that grouping away. This keeps the same
   five-across footprint and adds the phase band above it, so the
   grouping costs no extra page height. */
.phase-rail { margin-top: 72px; display: grid; gap: 24px 32px; }
.phase-rail-5 { grid-template-columns: repeat(5, 1fr); }
.phase-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dark-faint);
  padding-bottom: 10px; border-bottom: 1px solid var(--light-line);
}
.band-dark .phase-head { border-bottom-color: var(--dark-line); }
.phase-head.span2 { grid-column: span 2; }
.phase-head.is-trigger { color: #E28A8A; border-bottom-color: rgba(226,97,97,.4); }
/* the one stage neither party chooses gets the warning accent */
.phase-rail .step.is-trigger .step-marker { background: #E28A8A; }
.phase-rail .step.is-trigger .step-n { color: #E28A8A; }
@media (max-width: 1199px) {
  .phase-rail { gap: 20px 20px; }
}
@media (max-width: 743px) {
  .phase-rail, .phase-rail-5 { grid-template-columns: 1fr; margin-top: 40px; gap: 12px; }
  .phase-head.span2 { grid-column: span 1; }
  .phase-head { margin-top: 20px; }
  .phase-head:first-child { margin-top: 0; }
}

/* --- 3.7 Definition rows ---
   For short label/value pairs that were being forced into full
   cards. Denser than .feature-row, still on the system's grid. */
.def-rows { margin-top: 48px; border-top: 1px solid var(--light-line); }
.band-dark .def-rows { border-top-color: var(--dark-line); }
.def-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--light-line);
}
.band-dark .def-row { border-bottom-color: var(--dark-line); }
.def-row dt { font-size: 17px; font-weight: 500; color: var(--paper); }
.def-row dd { font-size: 16px; line-height: 1.62; color: var(--dark-muted); margin: 0; }
@media (max-width: 743px) {
  .def-row { grid-template-columns: 1fr; gap: 8px; padding: 18px 0; }
}


/* --- 3.8 Industry / link chip row ---
   Replaces the pattern of a 680px section holding one sentence and
   three buttons: the same links, but each carrying the label that
   was previously buried in the sentence. */
.chip-row { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--dark-line); border-radius: 10px;
  background: rgba(245,246,247,.04);
  font-size: 15px; color: rgba(245,246,247,.86); text-decoration: none;
  transition: background .18s, border-color .18s, color .18s;
}
.chip:hover { background: rgba(6,148,148,.13); border-color: rgba(6,148,148,.4); color: var(--paper); }
.chip:focus-visible { outline: 2px solid var(--teal-hover); outline-offset: 2px; }
.chip .ar { color: var(--teal-hover); }


/* ============================================================
   4. RTL
   Everything above uses logical properties or is symmetrical,
   except the SVG diagrams: they are drawn left-to-right and
   mirroring them would reverse the arrows without reversing the
   reading order of their labels. Keep them LTR inside an RTL page,
   the same call styles.css already makes for screenshots.
   ============================================================ */
[dir="rtl"] .cg-diagram { direction: ltr; }
[dir="rtl"] .cg-figure figcaption { direction: rtl; }
[dir="rtl"] .spec-table { text-align: right; }
[dir="rtl"] .case-part > h3, [dir="rtl"] .phase-head,
[dir="rtl"] .spec-table thead th { letter-spacing: 0; }


/* --- 3.10 Screenshot dominance cap ---
   The product shots on features.html are 2880px-wide captures
   rendered into a 1103px frame — a 2.61x downscale, which puts the
   product's own 11px UI text at about 4px. They are not legible at
   any width the layout can offer, so they are context, not
   evidence, and each one was still taking 659px: 73% of a 900px
   viewport, fifteen times over.

   Cropping beats shrinking here. Shrinking the frame would reduce
   the pixel density further; capping the height keeps the density
   identical and simply shows less of the screen — and the top of
   each capture is the part that identifies which module it is.

   The real fix is a re-capture at a legible crop, which is outside
   this pass. */
.media-frame--crop { max-height: 480px; }
.media-frame--crop img {
  height: 480px;
  object-fit: cover;
  object-position: left top;
}
@media (max-width: 1199px) {
  .media-frame--crop { max-height: 380px; }
  .media-frame--crop img { height: 380px; }
}
@media (max-width: 743px) {
  /* On a phone the frame is 349px wide; an 8.3x downscale is pure
     texture, so give it the least room that still reads as a
     product surface. */
  .media-frame--crop { max-height: 220px; }
  .media-frame--crop img { height: 220px; }
}

/* --- tall-but-legible capture ---
   Rabab's agent-analytics export is 1440x2401 - a portrait capture that renders at
   0.77 scale in a 1102px frame, so unlike the 2880px shots its UI text IS readable.
   The problem is only height: 1837px, 204% of a 900px viewport, so it dominated two
   full screens. Cropping to the 480px cap would cut the per-agent table, which is
   the part that makes the argument. This cap keeps the density and shows the
   headline metrics plus the start of the breakdown. */
.media-frame--tall { max-height: 720px; }
.media-frame--tall img { height: 720px; object-fit: cover; object-position: left top; }
@media (max-width: 1199px) {
  .media-frame--tall { max-height: 560px; }
  .media-frame--tall img { height: 560px; }
}
@media (max-width: 743px) {
  .media-frame--tall { max-height: 300px; }
  .media-frame--tall img { height: 300px; }
}

/* caption band: two compact lines plus the link, so the image keeps the height */
.console-caption .kicker { margin-bottom: 5px; }
.console-caption h3 { font-size: 19px; line-height: 1.25; margin-bottom: 5px; }
.console-caption p { font-size: 14px; line-height: 1.55; max-width: 78ch; margin-bottom: 7px; }
.console-caption .textlink { font-size: 14px; }
@media (max-width: 1299px) {
  .console-caption { position: static; border-top: 1px solid rgba(245,246,247,.12); }
}

/* ---------- mega menu: one heading owns all ten Command modules ----------
   The third column carried an empty <span class="nm-label">&nbsp;</span>, so four
   modules appeared under no heading, and "All features" / "How it works" sat in the
   same unlabelled list as if they were modules themselves. The ten modules now live
   in one labelled block laid out two-up, numbered so the grouping survives the
   column break, and the third column has a real heading of its own. */
.nav-menu.mega { grid-template-columns: 1fr 1.55fr 0.95fr; min-width: 900px; }
.nm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 6px; }
.nm-grid2 > a { min-width: 0; }
.nm-n {
  font-family: var(--mono); font-style: normal; font-size: 10px;
  color: var(--dark-faint); letter-spacing: .06em;
  margin-inline-end: 7px; vertical-align: 1px;
}
.nav-menu a:hover .nm-n { color: var(--teal-hover); }
@media (max-width: 1279px) {
  .nav-menu.mega { grid-template-columns: 1fr 1.4fr; min-width: 700px; }
  .nav-menu.mega .nm-col:last-child { grid-column: 1 / -1; }
  .nav-menu.mega .nm-col:last-child .nm-label { padding-top: 16px; }
}

/* form send failure — the visitor must never be told we received something we did not */
.form-send-error {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(228,104,93,.34); background: rgba(228,104,93,.10);
  font-size: 14.5px; line-height: 1.55; color: var(--paper);
}
.form-send-error a { color: var(--teal-hover); }

/* ---------- stat tiles: a compact three-up proof row inside a section ---------- */
.stat-tile { border: 1px solid var(--dark-line); border-radius: 12px; padding: 20px 22px 22px;
  background: var(--dark-card); min-width: 0; }
.band-light .stat-tile { background: #101413; }
.stat-tile .st-v { font-size: 36px; font-weight: 600; letter-spacing: -.02em; line-height: 1;
  color: var(--teal-hover); }
.stat-tile .st-k { font-size: 13.5px; line-height: 1.5; color: var(--dark-muted); margin-top: 8px; }
@media (max-width: 743px) {
  #language .cards.c3 { grid-template-columns: minmax(0,1fr) !important; }
  .stat-tile { padding: 16px 18px 18px; }
  .stat-tile .st-v { font-size: 30px; }
}

/* ---------- odd-count grids must not leave a visible hole ----------
   .feature-rows is a two-column grid. With an odd number of items the last row held one
   card and an empty cell beside it, which reads as a missing card rather than as the end
   of a list. The last item now spans the row. */
.feature-rows > .feature-row:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Bank compliance reviewers ask what the data in a screenshot is. Answer it on the frame. */
.media-frame { position: relative; }
.media-frame::after {
  content: "Illustrative data";
  position: absolute; inset-block-end: 10px; inset-inline-end: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,246,247,.55); background: rgba(10,10,8,.72);
  border: 1px solid rgba(245,246,247,.12); border-radius: 5px; padding: 3px 7px;
  pointer-events: none;
}
/* NOTE: do NOT set position on .console-stage here. It is position:absolute with
   inset:0 further up, which is what stacks the ten stages on top of each other inside
   the pinned frame. An earlier version of this rule set position:relative, which won on
   cascade order and laid the stages out vertically instead - the active stage ended up
   over 1500px below a frame with overflow:hidden, so the explorer rendered blank.
   Absolute is already a positioned ancestor, so ::after anchors to it correctly. */
.console-stage::after {
  content: "Illustrative data";
  position: absolute; top: 10px; inset-inline-end: 14px; z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,246,247,.5); background: rgba(10,10,8,.66);
  border: 1px solid rgba(245,246,247,.12); border-radius: 5px; padding: 3px 7px;
  pointer-events: none;
}
[lang="ar"] .media-frame::after,
[lang="ar"] .console-stage::after { content: "بيانات توضيحية"; font-family: var(--arabic); }

/* Skip link for keyboard and screen-reader users */
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 999;
  background: var(--teal); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 15px; font-weight: 500; text-decoration: none;
}
.skip-link:focus { inset-inline-start: 12px; }

/* Three stacked identical CTAs on mobile - the hero and sticky bar already cover it */
@media (max-width: 743px) { .nav-links .btn-primary { display: none; } }

/* optional-field hint, so required vs optional is readable at a glance */
.field label .opt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dark-faint); margin-inline-start: 7px;
  font-weight: 400;
}
.band-light .field label .opt { color: var(--light-faint); }
.field textarea {
  width: 100%; min-height: 84px; resize: vertical;
  background: var(--dark-card); color: var(--paper);
  border: 1px solid var(--dark-line); border-radius: 10px;
  padding: 12px 14px; font-family: var(--sans); font-size: 16px; line-height: 1.55;
}
.field textarea::placeholder { color: var(--dark-faint); }
.field textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

/* ============================================================
   MOBILE: show whole screenshots, never a zoomed crop
   On a phone the frame is ~350px wide. Cropping a 2880px capture to a fixed pixel
   height showed a magnified corner of one card - unreadable AND misleading, because
   it looks like the product is that sparse. Fit the whole frame instead: the detail
   is gone either way at this width, so the honest choice is the whole screen at a
   size that reads as a product surface.
   ============================================================ */
@media (max-width: 743px) {
  .media-frame--crop,
  .media-frame--tall { max-height: none; }
  .media-frame--crop img,
  .media-frame--tall img,
  .media-frame img {
    height: auto; max-height: 46vh;
    width: 100%; object-fit: contain; object-position: center top;
  }
  /* the console explorer: whole stage, stacked caption, no horizontal scroll */
  .console-stage { overflow: hidden; }
  .console-stage img {
    height: auto !important; max-height: 40vh;
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    object-fit: contain !important; object-position: center top !important;
  }
  .console-caption { position: static; padding: 14px 16px 16px; }
  .console-caption h3 { font-size: 17px; }
  .console-caption p { font-size: 13.5px; }
  .console-note { display: none; }   /* callout pills are unreadable over a 350px frame */

  /* forms stack rather than squeeze two fields into 160px each */
  .form-row { grid-template-columns: 1fr !important; gap: 0; }
  .field textarea { min-height: 96px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .field input, .field select { font-size: 16px; }
}

/* tablet: the same crop problem, less severe */
@media (min-width: 744px) and (max-width: 1023px) {
  .media-frame--crop img,
  .media-frame--tall img { height: auto; max-height: 52vh; object-fit: contain; }
  .media-frame--crop,
  .media-frame--tall { max-height: none; }
}

/* Honeypot. Clipped rather than display:none, which more bots know to skip. No
   negative offset: -9999px is scrollable in RTL and would give the Arabic pages a
   horizontal scrollbar the day contact.html gets translated. Not focusable, not
   announced - a real visitor cannot reach it, so anything in it came from a script. Paired with a fill-time check in google-sheet-endpoint.gs. */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip-path: inset(50%); white-space: nowrap; }