/* =================================================================
   NEXUS: shared stylesheet (nexus-clouds.com)
   Demand-Side Platform + Programmatic Advertising pages.
   Vanilla, mobile-first. Breakpoints: tablet 768px, desktop 1024px.
   ================================================================= */

:root {
  /* Primary colors */
  --color-midnight-blue: #020035;
  --color-dark-royalty: #02066F;
  --color-deep-sea: #2000B1;
  --color-dark: #0B0B0B;

  /* Secondary / neutrals */
  --color-white: #FFFFFF;
  --color-anti-flash: #F8F9FA;
  --color-grey-light: #F2F3F4;
  --color-grey: #D9D9D9;

  /* Accent */
  --color-mint: #1DBA9B;
  --color-mint-bright: #3CF5C7;

  /* Semantic tokens */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-anti-flash);
  --color-bg-dark: var(--color-midnight-blue);
  --color-text-primary: var(--color-midnight-blue);
  --color-text-secondary: #3D4456;
  --color-text-on-dark: var(--color-white);
  --color-accent: var(--color-mint);

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --h1-size: clamp(48px, 6vw, 96px);
  --h1-line: 1.04;
  --subtitle-01: clamp(36px, 4vw, 48px);
  --subtitle-02: clamp(32px, 3.4vw, 40px);
  --subtitle-03: clamp(28px, 2.8vw, 36px);
  --subtitle-04: clamp(22px, 2.2vw, 28px);
  --subtitle-05: 20px;
  --content-base: 16px;
  --content-large: 18px;
  --content-line: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale (8pt grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container-max: 1280px;
  --container-padding: clamp(16px, 4vw, 64px);
  --section-padding-y: clamp(64px, 8vw, 128px);

  --shadow-card: 0 1px 2px rgba(2, 0, 53, 0.04), 0 4px 16px rgba(2, 0, 53, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(2, 0, 53, 0.08), 0 12px 32px rgba(2, 0, 53, 0.10);

  --transition-base: 200ms ease;
  --header-h: 72px;
}

/* =================================================================
   RESET / BASE
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--content-base);
  line-height: var(--content-line);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5 { color: var(--color-text-primary); line-height: 1.15; margin: 0; font-weight: var(--weight-bold); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--color-mint); outline-offset: 4px; }

/* Full-bleed controls inside a clipped, rounded card need an INSET ring. With the
   default +4px offset the ring is drawn outside the control, the card's
   overflow:hidden crops its top and sides, and only the bottom edge survives: rendering as a stray mint line under the heading. Safari shows this on mouse
   click (it applies :focus-visible to buttons); Chromium does not, so it only
   reproduces in Safari. Drawing the ring inside keeps it a ring in both. */
.accordion__trigger:focus-visible,
.gallery__tab:focus-visible,
.intmap__tab:focus-visible {
  outline-offset: -3px;
}

/* Anchor jumps clear the sticky header */
[id] { scroll-margin-top: 92px; }

/* Skip to content (a11y / UX) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-midnight-blue); color: var(--color-white);
  padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--weight-semibold); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Floating back-to-top */
.to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--color-midnight-blue); color: var(--color-white);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -10px rgba(2, 0, 53, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s ease;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-deep-sea); transform: translateY(-2px); }

/* =================================================================
   TYPOGRAPHY HELPERS
   ================================================================= */
.subtitle-01 { font-size: var(--subtitle-01); line-height: 1.1; }
.subtitle-02 { font-size: var(--subtitle-02); line-height: 1.15; }
.subtitle-03 { font-size: var(--subtitle-03); line-height: 1.2; font-weight: var(--weight-semibold); }
.subtitle-04 { font-size: var(--subtitle-04); line-height: 1.25; font-weight: var(--weight-semibold); }
.content-large { font-size: var(--content-large); line-height: var(--content-line); }
.accent { color: var(--color-mint); }

/* =================================================================
   LAYOUT PRIMITIVES
   ================================================================= */
.nexus-page { display: block; }
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-padding-y); }
.section--white  { background: var(--color-white); }
.section--subtle { background: var(--color-white); }
/* one calm neutral field: hairline rhythm between consecutive light sections */
.section:not(.section--dark):not(.final-cta) + .section:not(.section--dark):not(.final-cta) { border-top: 1px solid var(--color-grey-light); }
.section--dark   { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--color-text-on-dark); }

.section-head { max-width: 60ch; margin-bottom: var(--space-8); }
.section-eyebrow {
  display: block;
  font-size: 12px; font-weight: var(--weight-bold);
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-deep-sea);
  margin-bottom: var(--space-3);
}
.section--dark .section-eyebrow { color: var(--color-mint); }
.section-title { margin-bottom: var(--space-4); }
.section-lead { color: var(--color-text-secondary); font-size: var(--content-large); line-height: 1.6; max-width: 56ch; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.82); }
.section-cta { margin-top: var(--space-8); display: flex; justify-content: center; }

/* In-content text links (interconnection) */
.section-lead a, .card__body a, .feature__body a, .accordion__panel a, .subblock a, .hero__deck a {
  color: var(--color-deep-sea);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.section-lead a:hover, .card__body a:hover, .feature__body a:hover, .accordion__panel a:hover, .subblock a:hover { color: var(--color-midnight-blue); }
.section--dark .section-lead a, .section--dark .feature__body a, .hero__deck a { color: var(--color-mint); }
.section--dark .section-lead a:hover, .section--dark .feature__body a:hover, .hero__deck a:hover { color: var(--color-mint-bright); }

/* Vertical link cards (industries served) */
.vcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.vcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--color-grey); }
.vcard__title {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--subtitle-05); font-weight: var(--weight-semibold); color: var(--color-midnight-blue);
}
.vcard__title .arrow { color: var(--color-deep-sea); transition: transform var(--transition-base); flex: none; }
.vcard:hover .vcard__title .arrow { transform: translateX(4px); }
.vcard p { color: var(--color-text-secondary); font-size: 15px; }

/* Homepage market-segment cards (the three entry points) */
.seg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.seg-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--color-grey); }
.seg-card__num {
  font-size: 13px; font-weight: var(--weight-bold); color: var(--color-mint);
  letter-spacing: 0.08em;
}
.seg-card__eyebrow { font-size: 12px; font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-deep-sea); }
.seg-card__title { font-size: var(--subtitle-04); font-weight: var(--weight-bold); color: var(--color-midnight-blue); }
.seg-card__body { color: var(--color-text-secondary); flex: 1; }
.seg-card__meta { font-size: 13px; color: var(--color-faint, #9CA3AF); }
.seg-card .link-more { margin-top: var(--space-3); }

/* Homepage editorial "why" split */
.why-split { display: grid; gap: var(--space-7); align-items: start; }
.why-split__lead { font-size: var(--subtitle-03); font-weight: var(--weight-bold); color: var(--color-midnight-blue); line-height: 1.2; }
.why-split__body { color: var(--color-text-secondary); font-size: var(--content-large); line-height: var(--content-line); display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 1024px) { .why-split { grid-template-columns: 1fr 1.2fr; gap: var(--space-9); } }

/* =================================================================
   BUTTONS
   ================================================================= */
.btn-primary {
  background: var(--color-midnight-blue);
  color: var(--color-white);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition-base), transform 150ms ease, background var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.1;
}
.btn-primary:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-primary.btn-sm { padding: 10px 20px; font-size: 14px; }

.btn-secondary {
  background: transparent;
  color: var(--color-midnight-blue);
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  font-size: 15px;
  border: 1.5px solid var(--color-midnight-blue);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  line-height: 1.1;
}
.btn-secondary:hover { background: var(--color-midnight-blue); color: var(--color-white); }

.on-dark .btn-primary, .section--dark .btn-primary { background: var(--color-mint); color: var(--color-midnight-blue); }
.on-dark .btn-primary:hover, .section--dark .btn-primary:hover { background: var(--color-mint-bright); opacity: 1; }
.on-dark .btn-secondary, .section--dark .btn-secondary { color: var(--color-white); border-color: var(--color-white); }
.on-dark .btn-secondary:hover, .section--dark .btn-secondary:hover { background: var(--color-white); color: var(--color-midnight-blue); }

.btn-icon { flex: none; }

.link-more {
  color: var(--color-midnight-blue);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 150ms ease, color 150ms ease;
}
.link-more:hover { gap: 10px; color: var(--color-deep-sea); }

/* =================================================================
   LOGO
   ================================================================= */
.nexus-logo {
  display: inline-flex;
  align-items: center;
  color: var(--color-midnight-blue);
  text-decoration: none;
  flex: none;
}
.nexus-logo svg { height: 22px; width: auto; display: block; }
.site-footer .nexus-logo svg { height: 26px; }

/* =================================================================
   HEADER
   ================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-grey-light);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(2, 0, 53, 0.04), 0 10px 28px -18px rgba(2, 0, 53, 0.3);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
}
.nav-drawer { display: contents; }

.primary-nav { /* desktop: handled in media query */ }
.nav-list { display: flex; align-items: center; gap: var(--space-2); }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
}
.nav-link:hover { color: var(--color-deep-sea); }
.nav-item[aria-current="page"] > .nav-link,
.nav-link[aria-current="page"] {
  color: var(--color-midnight-blue);
  box-shadow: inset 0 -2px 0 var(--color-mint);
}
.chevron { transition: transform var(--transition-base); flex: none; }

.mega-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
}
/* invisible bridge across the 8px gap so the dropdown stays open while the cursor moves into it */
.mega-dropdown::before {
  content: "";
  position: absolute;
  top: -10px; left: 0; right: 0; height: 10px;
}
.mega-dropdown {
  min-width: 460px;
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-6);
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.mega-dropdown--3 { min-width: 640px; grid-template-columns: repeat(3, 1fr); }
.mega-section h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
}
.mega-section ul { display: flex; flex-direction: column; gap: 2px; }
.mega-section a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--weight-medium);
  transition: background var(--transition-base), color var(--transition-base);
}
.mega-section a:hover { background: var(--color-anti-flash); color: var(--color-deep-sea); }

.header-actions { display: flex; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
.nav-utility { text-decoration: none; color: var(--color-text-primary); font-size: 15px; font-weight: var(--weight-medium); }
.nav-utility:hover { color: var(--color-deep-sea); }

/* Hamburger */
.mobile-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-inline-start: auto;
}
.mobile-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-midnight-blue);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.site-header.is-open .mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .mobile-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =================================================================
   HERO
   ================================================================= */
.hero { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 132px); }
/* One restrained glow for depth (competitors stay calm: not "glow soup") */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 55%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(32, 0, 177, 0.38), transparent 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: clamp(var(--space-7), 6vw, var(--space-10)); align-items: center; }
/* Plain eyebrow label, no pill (Trade Desk "OUR PLATFORM" style) */
.hero__eyebrow {
  display: inline-block;
  background: none; border: none; padding: 0;
  color: var(--color-mint);
  font-size: 13px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: var(--space-5);
}
.hero__eyebrow .pulse { display: none; }
.hero__title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-5);
}
/* One short, muted deck line */
.hero__deck {
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: var(--space-7);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
/* One solid CTA + a quiet text link (single clear action, like the references) */
.hero .btn-secondary {
  background: none; border: none; padding: 6px 2px;
  color: rgba(255, 255, 255, 0.8); font-weight: var(--weight-semibold);
}
.hero .btn-secondary:hover { background: none; color: var(--color-white); text-decoration: underline; text-underline-offset: 4px; }

/* Overflow safety: grid items must be allowed to shrink below content width */
html, body { overflow-x: clip; }
.hero__grid > * { min-width: 0; }
.hero__visual { max-width: 100%; }
.dash { max-width: 100%; overflow: hidden; }
.dash__bar { min-width: 0; }
.dash__url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dash__row { min-width: 0; }
.dash__name { overflow: hidden; text-overflow: ellipsis; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(60, 245, 199, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(60, 245, 199, 0); }
  100% { box-shadow: 0 0 0 0 rgba(60, 245, 199, 0); }
}

/* CSS-only hero visual: gradient backdrop holding a product dashboard mockup (V3) */
/* Clean framed dashboard: no gradient panel, no stacked glows */
.hero__visual { position: relative; }

/* ---- Dashboard mockup (V3 Dashboard Composite) ---- */
.dash {
  background: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  font-size: 13px;
}
.dash__bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: var(--color-anti-flash);
  border-bottom: 1px solid var(--color-line, #E5E7EB);
}
.dash__bar i { width: 9px; height: 9px; border-radius: 50%; background: #D9D9D9; display: inline-block; }
.dash__url {
  margin-left: 10px; flex: 1;
  background: var(--color-white);
  border: 1px solid var(--color-line, #E5E7EB);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 11px; color: var(--color-faint, #9CA3AF);
}
.dash__body { padding: 16px; }
.dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash__tabs { display: flex; gap: 16px; font-weight: var(--weight-semibold); color: var(--color-faint, #9CA3AF); }
.dash__tabs .is-active { color: var(--color-midnight-blue); box-shadow: inset 0 -2px 0 var(--color-mint); padding-bottom: 6px; }
.dash__live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: var(--weight-semibold); color: #0f9a80; }
.dash__live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--color-mint); }
.dash__rows { display: flex; flex-direction: column; gap: 8px; }
.dash__row {
  display: grid;
  grid-template-columns: 1.4fr auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--color-line, #E5E7EB);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.dash__name { font-weight: var(--weight-semibold); color: var(--color-midnight-blue); white-space: nowrap; }
.dash__tag { font-size: 11px; font-weight: var(--weight-semibold); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-anti-flash); color: var(--color-deep-sea); white-space: nowrap; }
.dash__spend { color: var(--color-mute, #4B5468); font-variant-numeric: tabular-nums; text-align: right; }
.dash__roas { font-weight: var(--weight-bold); color: #0f9a80; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash__roas.is-opt { color: #B45309; }
.dash__chart { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-line, #E5E7EB); }
.dash__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.dash__bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(var(--color-deep-sea), var(--color-dark-royalty)); }
.dash__bars span:last-child { background: var(--color-mint); }
.dash__chartlabel { margin-top: 8px; font-size: 11px; color: var(--color-faint, #9CA3AF); }

/* Frosted badge removed for a cleaner hero visual */
.dash-badge { display: none; }

/* ---- Capability proof strip (P11): quiet, below the hero ---- */
.proof-strip {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.proof-strip li { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: var(--weight-medium); }
.proof-strip svg { flex: none; color: var(--color-mint); opacity: 0.9; }

/* =================================================================
   CARD GRIDS
   ================================================================= */
.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
/* 4-up card grids. These were centered flex with a 340px cap, which stranded the
   last card on its own row at desktop (3 + 1) on every four-card section. Real
   columns instead: 1 / 2 / 4 across the breakpoints below. */
.grid--4 { grid-template-columns: 1fr; }

/* Generic card */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.card__title {
  font-size: var(--subtitle-05);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.card__body { color: var(--color-text-secondary); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-mint); flex: none; }

/* Capability cards with stat lists */
.stat-list { display: flex; flex-direction: column; gap: 0; }
.stat-list li { color: var(--color-text-secondary); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-grey-light); }
.stat-list li:first-child { padding-top: 0; }
.stat-list li:last-child { border-bottom: none; padding-bottom: 0; }
.stat-value { display: inline-block; color: var(--color-midnight-blue); font-weight: var(--weight-bold); margin-right: var(--space-2); }

/* Data strip */
.data-strip {
  margin-top: var(--space-8);
  background: var(--color-midnight-blue);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  text-align: center;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(32, 0, 177, 0.55), transparent 60%);
}
.data-strip__item { display: flex; flex-direction: column; gap: 4px; }
.data-strip__value { font-weight: var(--weight-bold); color: var(--color-mint); font-size: var(--subtitle-04); line-height: 1; }
.data-strip__label { font-size: 14px; color: rgba(255, 255, 255, 0.78); }

/* Icon chip for cards / features */
.icon-chip {
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-anti-flash);
  color: var(--color-midnight-blue);
  margin-bottom: var(--space-4);
}

/* Channel cards */
.card--channel { display: flex; flex-direction: column; }
.card--channel .card__body { margin-bottom: var(--space-5); flex: 1; }
.card--channel .link-more { margin-top: auto; }

/* Audience cards */
.card--audience { background: var(--color-grey-light); border-color: transparent; box-shadow: none; }
.card--audience:hover { box-shadow: var(--shadow-card); }
.card--audience .check {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(29, 186, 155, 0.16);
  color: var(--color-midnight-blue);
  margin-bottom: var(--space-4);
}

/* Network / property cards (page 2) */
.card--network .card__eyebrow {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-deep-sea); font-weight: var(--weight-semibold); margin-bottom: var(--space-2);
}
.subblock { margin-top: var(--space-8); }
.subblock h3 { margin-bottom: var(--space-4); }
.subblock ul { display: flex; flex-direction: column; gap: var(--space-3); max-width: 70ch; }
.subblock li { position: relative; padding-left: var(--space-5); color: var(--color-text-secondary); }
.subblock li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint); }

/* =================================================================
   PROCESS: intro left, collapsible steps right (accordion)
   ================================================================= */
.proc { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .proc { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-9); align-items: start; }
  .proc__intro { position: sticky; top: 96px; }
}
.proc-step { display: inline-flex; align-items: baseline; }
.proc-num { color: var(--color-mint); font-weight: 800; font-size: 14px; margin-right: var(--space-4); font-variant-numeric: tabular-nums; }
.section--dark .proc-num { color: var(--color-mint); }
/* steps accordion uses the shared .accordion / .accordion__* styles */

/* =================================================================
   COMPARISON TABLE (V/P7: comparison as proof)
   ================================================================= */
.cmp { overflow-x: auto; border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 680px; }
.cmp-table th, .cmp-table td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--color-grey-light); font-size: 15px; vertical-align: top; }
.cmp-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: var(--weight-semibold); background: var(--color-anti-flash); }
.cmp-table tbody td:first-child { font-weight: var(--weight-semibold); color: var(--color-midnight-blue); white-space: nowrap; }
.cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table tr.is-nexus { background: rgba(29, 186, 155, 0.08); }
.cmp-table tr.is-nexus td:first-child { color: var(--color-deep-sea); font-weight: var(--weight-bold); }
.cmp-yes { color: #0f9a80; font-weight: var(--weight-semibold); }

/* =================================================================
   STEPS
   ================================================================= */
.steps { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.step { position: relative; }
.step__num { display: block; font-size: clamp(48px, 7vw, 72px); font-weight: var(--weight-bold); color: var(--color-mint); line-height: 1; margin-bottom: var(--space-4); letter-spacing: -0.02em; }
.step__title { font-size: var(--subtitle-05); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.step__body { color: var(--color-text-secondary); }
.section--dark .step__body { color: rgba(255, 255, 255, 0.8); }

/* =================================================================
   TRUST FEATURES
   ================================================================= */
.features { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
.feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.feature__icon {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(29, 186, 155, 0.18);
  color: var(--color-mint);
}
.feature__title { color: var(--color-white); font-size: var(--subtitle-05); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.feature__body { color: rgba(255, 255, 255, 0.8); }

/* =================================================================
   FAQ ACCORDION
   ================================================================= */
.accordion { display: flex; flex-direction: column; gap: var(--space-4); }
.accordion__item {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-left: 3px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base);
}
.accordion__item.is-open { border-left-color: var(--color-mint); }
.accordion__heading { margin: 0; }
.accordion__trigger {
  width: 100%; background: transparent; border: none; cursor: pointer;
  padding: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  text-align: left;
  font-size: var(--content-large); font-weight: var(--weight-semibold);
  color: var(--color-text-primary); line-height: 1.3;
}
.accordion__chevron { flex: none; color: var(--color-midnight-blue); transition: transform var(--transition-base); }
.accordion__trigger[aria-expanded="true"] .accordion__chevron { transform: rotate(180deg); }
.accordion__panel { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-secondary); }
.accordion__panel[hidden] { display: none; }

/* =================================================================
   RESOURCES & INSIGHTS: POST CARDS
   ================================================================= */
.post-card {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.post-card__image { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--color-grey-light), var(--color-grey)); }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.post-card__tag {
  align-self: flex-start;
  font-size: 12px; font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-deep-sea); background: var(--color-anti-flash);
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.post-card__title { font-size: var(--subtitle-05); font-weight: var(--weight-semibold); }
.post-card__date { color: var(--color-text-secondary); font-size: 14px; }
.post-card .link-more { margin-top: auto; }

/* =================================================================
   FINAL CTA: full-bleed midnight band, edge to edge
   ================================================================= */
.final-cta { background: var(--color-midnight-blue); padding-block: clamp(88px, 13vw, 168px); }
.final-cta__card {
  background: transparent;
  color: var(--color-text-on-dark);
  border-radius: 0;
  padding: 0;
  max-width: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.final-cta__card h2 { color: var(--color-white); font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.02em; }
.final-cta__card p { color: rgba(255, 255, 255, 0.82); max-width: 52ch; margin-left: auto; margin-right: auto; font-size: var(--content-large); }
.final-cta__card .btn-primary { margin-top: var(--space-2); }

/* =================================================================
   IMAGERY + SOCIAL PROOF  (swap placeholders for real assets)
   ================================================================= */
/* Photo slot: replace each .media-ph with <img> at ~4:3 (e.g. 720x540) */
.media-ph {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg);
  border: 1px solid var(--color-grey-light); overflow: hidden;
  background: linear-gradient(135deg, var(--color-anti-flash), #E7ECF4);
  display: flex; align-items: center; justify-content: center;
}
.media-ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(29,186,155,.10), transparent 60%); }
.media-ph span { position: relative; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); opacity: .7; }

/* Who-uses alternating photo / text rows */
.who-rows { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); }
.who-row { display: grid; gap: clamp(24px, 4vw, 64px); align-items: center; }
.who-row__text h3 { font-size: var(--subtitle-03); margin-bottom: var(--space-4); }
.who-row__text p { color: var(--color-text-secondary); font-size: var(--content-large); line-height: 1.6; max-width: 48ch; }
@media (min-width: 768px) {
  .who-row { grid-template-columns: 1fr 1fr; }
  .who-row--reverse .who-row__media { order: 2; }
}

/* Logo strip */
.logos__label { text-align: center; color: var(--color-text-secondary); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-6); }
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 56px); }
.logo-ph { width: 124px; height: 40px; border-radius: var(--radius-sm); background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-deep-sea); opacity: 1; font-weight: 700; }

/* --- Integrations hub-and-spoke diagram --------------------------- */
.hubgraph { max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.hubgraph__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); width: 100%; }
.hub-node { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4); text-align: center; font-size: 15px; font-weight: 700; color: var(--color-midnight-blue); box-shadow: var(--shadow-card); line-height: 1.35; }
.hub-node span { display: block; font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); margin-top: 4px; letter-spacing: .01em; }
.hub-core { position: relative; background: var(--color-midnight-blue); color: #fff; font-weight: 800; letter-spacing: -.01em; font-size: 18px; padding: var(--space-4) var(--space-8); border-radius: var(--radius-pill); box-shadow: 0 14px 34px rgba(2, 0, 53, .28); }
.hub-core::before, .hub-core::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; border-left: 2px dashed var(--color-grey); height: var(--space-6); }
.hub-core::before { bottom: 100%; }
.hub-core::after { top: 100%; }
@media (max-width: 640px) {
  .hubgraph__row { grid-template-columns: 1fr; }
  .hub-core::before, .hub-core::after { display: none; }
}

/* Testimonial */
.testimonial { max-width: 760px; margin: 0 auto; text-align: center; }
.testimonial blockquote { margin: 0 0 var(--space-5); font-size: var(--subtitle-04); line-height: 1.4; font-weight: var(--weight-semibold); color: var(--color-midnight-blue); }
.testimonial__who { color: var(--color-text-secondary); font-size: 15px; }

/* Trust features as white cards on the dark band */
@media (min-width: 1024px) { .section--dark .features { grid-template-columns: repeat(4, 1fr); } }
.section--dark .feature {
  background: var(--color-white); border-radius: 16px; padding: var(--space-6);
  flex-direction: column; gap: var(--space-4);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.section--dark .feature__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-anti-flash); color: var(--color-mint); display: flex; align-items: center; justify-content: center; flex: none; }
.section--dark .feature__title { color: var(--color-midnight-blue); }
.section--dark .feature__body { color: var(--color-text-secondary); }
.section--dark .feature__body a { color: var(--color-deep-sea); }

/* Ad Formats: accordion (left) + photo (right) */
.formats-split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) { .formats-split { grid-template-columns: 1fr 1fr; } }
.formats-split { align-items: start; }
.formats-accordion { gap: 0; }
.formats-split .formats-media { aspect-ratio: 4 / 5; position: sticky; top: 96px; transition: opacity .25s ease; }
.formats-accordion .accordion__item { background: transparent; border: 0; border-bottom: 1px solid var(--color-grey-light); border-radius: 0; }
.formats-accordion .accordion__item:first-child { border-top: 1px solid var(--color-grey-light); }
.formats-accordion .accordion__trigger { font-size: var(--subtitle-05); font-weight: var(--weight-bold); padding: var(--space-4) 0; }
.formats-accordion .accordion__panel { padding: 0 0 var(--space-5); }
.formats-accordion .accordion__panel .link-more { margin-top: var(--space-3); }

/* Mid-page CTA band with photo */
.cta-band { background: var(--color-midnight-blue); border-radius: 24px; padding: clamp(28px, 4vw, 56px); display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; overflow: hidden; }
@media (min-width: 768px) { .cta-band { grid-template-columns: 1.1fr 1fr; } }
.cta-band__text h2, .cta-band__title { font-weight: var(--weight-bold); letter-spacing: -0.02em; color: var(--color-white); font-size: var(--subtitle-02); line-height: 1.15; margin-bottom: var(--space-6); }
.cta-band__media { aspect-ratio: 16 / 10; border-radius: 16px; }
/* real photos filling the media slots */
img.who-row__media, img.cta-band__media, img.formats-media { display: block; width: 100%; object-fit: cover; border-radius: 16px; }

/* --- product mockups (deep-tech visuals) ------------------------- */
/* Needs to out-specify `.formats-split .formats-media`, which locks a 4/5 box and
   sticks the column: both correct for a single photo, both wrong once the column
   stacks a photo above a console mock (the content overflowed the fixed box). */
.formats-split .formats-media--mock {
  aspect-ratio: auto;
  position: static;
  align-self: start;
}
.dash--panel { box-shadow: 0 2px 6px rgba(2,0,53,.05), 0 20px 50px rgba(2,0,53,.13); }
.cta-band__media--mock { aspect-ratio: auto; display: flex; align-items: center; justify-content: flex-end; }
.ad-preview { width: 100%; max-width: 340px; margin-left: auto; display: flex; flex-direction: column; gap: 12px; }
.ad-preview__head { display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,.72); font-size: 12px; font-weight: var(--weight-semibold); }
.ad-preview__lat { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ad-preview__card { position: relative; background: #fff; border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: center; box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.ad-preview__thumb { width: 60px; height: 60px; border-radius: 12px; background: linear-gradient(135deg, var(--color-deep-sea), var(--color-mint)); flex: none; }
.ad-preview__badge { position: absolute; top: 12px; right: 12px; background: var(--color-mint); color: var(--color-midnight-blue); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.ad-preview__meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ad-preview__title { font-weight: 700; color: var(--color-midnight-blue); font-size: 15px; }
.ad-preview__price { color: var(--color-text-secondary); font-size: 13px; }
.ad-preview__bid { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 11px 16px; color: rgba(255,255,255,.82); font-size: 13px; }
.ad-preview__bidv { color: var(--color-mint-bright, #3CF5C7); font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- pillar mockups (audience / clean room / ai / bidstream) ------ */
.section-visual { max-width: 640px; margin: clamp(24px, 4vw, 40px) auto clamp(24px, 4vw, 40px); }
.dash--panel .p-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.p-title { font-weight: 800; font-size: 16px; color: var(--color-midnight-blue); display: block; }
.p-sub { font-size: 12px; color: #8b93a1; display: block; margin-top: 2px; }

/* audience builder */
.abx__group + .abx__group { margin-top: 16px; }
.abx__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9098a6; margin: 0 0 9px; }
.abx__rules { display: flex; flex-wrap: wrap; gap: 7px; }
.abx__chip { background: #F6F8FA; border: 1px solid #EAEDF1; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600; color: #131a2b; }
.abx__chip b { color: #98a0ad; font-weight: 600; }
.abx__dims { display: flex; flex-wrap: wrap; gap: 8px; }
.abx__dim { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; border-radius: 8px; padding: 7px 12px; border: 1px solid #EAEDF1; color: #aab0bc; background: #fff; }
.abx__dim svg { width: 14px; height: 14px; color: #cfd4dc; flex: none; }
.abx__dim--on { color: #131a2b; border-color: rgba(29,186,155,.45); background: rgba(29,186,155,.07); }
.abx__dim--on svg { color: var(--color-mint); }
.abx__reach { margin-top: 18px; border-top: 1px solid #F0F2F5; padding-top: 16px; }
.abx__reach-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.abx__reach-v { display: block; font-size: 32px; font-weight: 800; color: var(--color-midnight-blue); letter-spacing: -.02em; line-height: 1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.abx__reach-of { font-size: 12px; color: #98a0ad; text-align: right; line-height: 1.55; }
.abx__bar { height: 6px; border-radius: 999px; background: #EEF1F4; margin-top: 14px; overflow: hidden; }
.abx__bar span { display: block; height: 100%; width: 14.2%; border-radius: 999px; background: var(--color-mint); }

/* data clean room panel */
.dcrx__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #8b93a1; border: 1px solid #E7EAEE; border-radius: 999px; padding: 5px 10px; }
.dcrx__tag svg { width: 13px; height: 13px; }
.dcrx__steps { display: grid; grid-template-columns: repeat(3, 1fr); position: relative; margin: 8px 0 2px; }
.dcrx__steps::before { content: ""; position: absolute; top: 13px; left: 17%; right: 17%; height: 2px; background: #EAEDF1; }
.dcrx__steps::after { content: ""; position: absolute; top: 13px; left: 17%; width: 33%; height: 2px; background: var(--color-mint); }
.dcrx__step { position: relative; text-align: center; padding: 0 6px; }
.dcrx__dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid #E4E8EC; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #aab0bc; position: relative; z-index: 1; }
.dcrx__dot svg { width: 14px; height: 14px; }
.dcrx__step--done .dcrx__dot { border-color: var(--color-mint); color: var(--color-mint); }
.dcrx__t { font-size: 14px; font-weight: 800; color: var(--color-midnight-blue); margin-top: 12px; }
.dcrx__d { font-size: 12px; color: #98a0ad; margin-top: 3px; line-height: 1.45; }
.dcrx__foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 22px; padding-top: 15px; border-top: 1px solid #F0F2F5; font-size: 12px; color: #98a0ad; text-align: center; }
.dcrx__foot svg { width: 13px; height: 13px; color: #aab0bc; flex: none; }

/* nexus ai loop */
.ailoop { max-width: 560px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ailoop__wf { background: #fff; border: 1px solid #E9EBEF; border-radius: 14px; padding: 18px; box-shadow: 0 8px 24px rgba(2,0,53,.06); display: flex; flex-direction: column; }
.ailoop__k { font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--color-mint); }
.ailoop__t { font-size: 15px; font-weight: 800; color: var(--color-midnight-blue); margin: 9px 0 5px; }
.ailoop__d { font-size: 12.5px; color: var(--color-text-secondary); line-height: 1.45; }
.ailoop__m { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #0f9a80; font-weight: 700; margin-top: 10px; }
.ailoop__band { grid-column: 1 / -1; text-align: center; background: var(--color-midnight-blue); color: #fff; border-radius: 999px; padding: 12px 18px; font-size: 13px; font-weight: 700; }
@media (max-width: 600px) { .ailoop { grid-template-columns: 1fr; } }

/* home bidstream (dark, on --section--dark) */
.bs { display: grid; grid-template-columns: 1fr; gap: 16px; color: #fff; max-width: 1000px; margin: 0 auto; }
@media (min-width: 820px) { .bs { grid-template-columns: 1fr 1.15fr 1fr; align-items: center; } }
.bs__col-h { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 10px; }
.bs__stream { display: flex; flex-direction: column; gap: 7px; }
.bs__req { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 9px; padding: 8px 11px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: rgba(255,255,255,.82); animation: bs-slidein .5s ease both; }
.bs__req .verb { color: var(--color-mint-bright, #3CF5C7); font-weight: 700; }
.bs__req .path { color: #fff; }
@keyframes bs-slidein { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.bs__engine { background: linear-gradient(180deg, rgba(29,186,155,.14), rgba(29,186,155,.02)); border: 1px solid rgba(29,186,155,.4); border-radius: 18px; padding: 22px; text-align: center; box-shadow: 0 0 60px rgba(29,186,155,.14); }
.bs__engine .badge { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-mint-bright, #3CF5C7); }
.bs__engine .name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 8px 0 4px; }
.bs__engine .desc { font-size: 12px; color: rgba(255,255,255,.6); }
.bs__mrow { display: flex; justify-content: center; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.bs__m .mv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bs__m .ml { font-size: 10px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .05em; }
.bs__out { display: flex; flex-wrap: wrap; gap: 7px; }
.bs__ch { font-size: 12px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 8px; padding: 8px 11px; color: #fff; }
.bs__ch .ok { color: var(--color-mint-bright, #3CF5C7); font-family: ui-monospace, monospace; font-size: 10px; margin-left: 6px; }
.bs__flow { position: relative; height: 2px; background: rgba(255,255,255,.1); margin: 8px 0 0; border-radius: 2px; overflow: hidden; }
.bs__flow::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--color-mint)); animation: bs-flow 2.2s linear infinite; }
@keyframes bs-flow { to { left: 110%; } }
@media (prefers-reduced-motion: reduce) { .bs__req { animation: none; } .bs__flow::after { display: none; } }
img.who-row__media { aspect-ratio: 4 / 3; }

/* Metric cards (Why Choose): designer's static big-number cards */
.metric-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .metric-grid { grid-template-columns: repeat(3, 1fr); } }
/* Left-aligned and dense, matching .card: centred airy tiles read as filler,
   especially on the 6-up grid. */
.metric-card { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: 16px; padding: var(--space-5) var(--space-6); box-shadow: var(--shadow-card); text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.metric-card__cat { font-size: 12px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-secondary); margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: 8px; }
.metric-card__cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-mint); flex: none; }
.metric-card__value { font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; color: var(--color-midnight-blue); letter-spacing: -0.025em; line-height: 1; }
.metric-card__sub { color: var(--color-text-secondary); font-size: 14px; margin-top: var(--space-2); }
.metric-card__hint { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--color-mint); font-weight: var(--weight-bold); margin-top: var(--space-5); }

/* Rich hero dashboard (light panel, pops on the dark hero): global */
.dash__topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.dash__title { display: block; color: var(--color-midnight-blue); font-weight: 700; font-size: 15px; }
.dash__sub { color: var(--color-text-secondary); font-size: 11px; }
.dash__range { font-size: 11px; color: var(--color-text-secondary); border: 1px solid var(--color-grey-light); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; }
.dash__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: var(--space-4); }
.dash__stat { background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.dash__stat-l { font-size: 10px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.dash__stat-v { font-size: 16px; font-weight: 700; color: var(--color-midnight-blue); }
.dash__stat-d { font-size: 10px; color: var(--color-text-secondary); }
.dash__stat-d.is-up { color: #0E9F84; }
/* Scoped to the progress block. `.dash__spend` names two different things: this
   block (with .dash__spend-head and a bar) and a status cell inside .dash__row.
   Unscoped, the cell inherited a 16px bottom margin, and align-items:center then
   pushed it 8px above its siblings -- the status text looked misaligned against
   the value beside it on every row of every dashboard mock. */
.dash__body > .dash__spend { margin-bottom: var(--space-4); }
.dash__spend-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 6px; }
.dash__spend-v { color: var(--color-midnight-blue); font-weight: 700; }
.dash__spend-v em { color: #9CA3AF; font-style: normal; font-weight: 400; }
.dash__progress { height: 6px; border-radius: 999px; background: var(--color-grey-light); overflow: hidden; }
.dash__progress span { display: block; height: 100%; background: var(--color-mint); border-radius: 999px; }
.dash__chart2 { background: var(--color-anti-flash); border-radius: 12px; padding: 12px; margin-bottom: var(--space-4); }
.dash__chart2-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--color-text-secondary); margin-bottom: 8px; }
.dash__spark { width: 100%; height: 80px; display: block; }
.dash__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dash__metric { display: flex; flex-direction: column; gap: 2px; }
.dash__metric-l { font-size: 10px; color: var(--color-text-secondary); }
.dash__metric-v { font-size: 14px; font-weight: 700; color: var(--color-midnight-blue); }

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer { background: var(--color-midnight-blue); color: var(--color-white); }
.site-footer .nexus-logo { color: var(--color-white); }
.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  padding-block: var(--space-9) var(--space-7);
}
.footer-col h5 { color: var(--color-white); font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 15px; transition: color var(--transition-base); }
.footer-col a:hover { color: var(--color-mint); }
.footer-brand { max-width: 36ch; }
.footer-tagline { margin-top: var(--space-4); color: rgba(255, 255, 255, 0.72); font-size: 15px; }
.footer-bottom {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-block: var(--space-5) var(--space-7);
  border-top: 1px solid rgba(29, 186, 155, 0.4);
  color: rgba(255, 255, 255, 0.6); font-size: 14px;
}

/* =================================================================
   APP MOCK: mirrors the real NEXUS console (sidebar + topbar + content)
   Structure follows the product: nav rail, account chip, balance, and
   the live Campaign List columns. Palette stays on brand rather than
   copying the product's monochrome UI.
   ================================================================= */
.appmock {
  display: grid; grid-template-columns: 146px minmax(0, 1fr);
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(2, 0, 53, 0.28);
  font-size: 13px; line-height: 1.4;
  text-align: left;
}
.appmock__side { background: var(--color-midnight-blue); padding: var(--space-4) 0; }
.appmock__brand {
  display: block; padding: 0 var(--space-4) var(--space-4);
  color: var(--color-white); font-weight: var(--weight-bold);
  font-size: 15px; letter-spacing: 0.02em;
}
.appmock__nav { display: flex; flex-direction: column; gap: 1px; }
.appmock__nav li {
  padding: 8px var(--space-4);
  color: rgba(255, 255, 255, 0.62);
  border-left: 2px solid transparent;
}
.appmock__nav li.is-active {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.07);
  border-left-color: var(--color-mint);
  font-weight: var(--weight-semibold);
}
.appmock__main { display: flex; flex-direction: column; min-width: 0; }
.appmock__top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-grey-light);
}
.appmock__acct { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); }
.appmock__avatar {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--color-anti-flash); color: var(--color-midnight-blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--weight-bold);
}
.appmock__bal { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); }
.appmock__bal span { color: var(--color-text-secondary); font-weight: var(--weight-regular); margin-right: 6px; }
.appmock__content { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.appmock__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.appmock__title { font-size: 15px; font-weight: var(--weight-bold); color: var(--color-text-primary); }
.appmock__sub { color: var(--color-text-secondary); font-size: 12px; }

/* KPI rail */
.appmock__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.appmock__kpi { border: 1px solid var(--color-grey-light); border-radius: var(--radius-md); padding: 10px; }
.appmock__kpi-l {
  display: block; color: var(--color-text-secondary); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appmock__kpi-v { display: block; color: var(--color-midnight-blue); font-size: 17px; font-weight: var(--weight-bold); letter-spacing: -0.01em; }
.appmock__kpi-d { color: var(--color-text-secondary); font-size: 11px; }
.appmock__kpi-d.is-up { color: #0f9a80; }

/* Pacing / progress */
.appmock__pace-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.appmock__pace-head span:first-child { color: var(--color-text-secondary); font-size: 12px; }
.appmock__pace-v { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); }
.appmock__pace-v em { color: var(--color-text-secondary); font-style: normal; font-weight: var(--weight-regular); }
.appmock__track { height: 6px; border-radius: 999px; background: var(--color-grey-light); overflow: hidden; }
.appmock__track span { display: block; height: 100%; border-radius: 999px; background: var(--color-mint); }

/* Data table: real Campaign List columns */
.appmock__table { width: 100%; border-collapse: collapse; }
.appmock__table th {
  text-align: left; padding: 7px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary); font-weight: var(--weight-semibold);
  border-bottom: 1px solid var(--color-grey-light);
}
.appmock__table td { padding: 9px 8px; border-bottom: 1px solid var(--color-grey-light); color: var(--color-text-secondary); }
.appmock__table tr:last-child td { border-bottom: none; }
.appmock__table td:first-child { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); }
.appmock__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.appmock__id { font-variant-numeric: tabular-nums; color: var(--color-text-secondary) !important; font-weight: var(--weight-regular) !important; }

/* Status pills: same semantics as the product */
.appmock__pill {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: var(--weight-semibold); white-space: nowrap;
}
.appmock__pill--active { background: rgba(29, 186, 155, 0.14); color: #0f7a66; }
.appmock__pill--paused { background: rgba(214, 158, 46, 0.16); color: #9a6f12; }
.appmock__pill--draft, .appmock__pill--done { background: var(--color-grey-light); color: var(--color-text-secondary); }

/* The hero column is never wide enough for the full column set: drop the
   secondary columns there so nothing clips. */
.hero__visual .appmock__table .col-opt { display: none; }

@media (max-width: 767px) {
  .appmock { grid-template-columns: 1fr; font-size: 12px; }
  .appmock__side { display: none; }
  .appmock__kpis { grid-template-columns: repeat(2, 1fr); }
  .appmock__table .col-opt { display: none; }
}

/* =================================================================
   CHANNEL AD-FORMAT VISUALS
   A real environment photo behind, a sharp device in front carrying an
   actual ad. Replaces recycled stock photography: every channel shows
   where its ad physically sits, in a place you recognise.
   ================================================================= */
.chviz {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(2, 0, 53, 0.10);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.chviz__scene {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 9%;
  background: var(--color-midnight-blue);
}
.chviz__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* pushes the room back so the device reads as the subject */
.chviz__wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,0,53,.30), rgba(2,0,53,.52)); }
.chviz__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--color-text-secondary); }
.chviz__cap b { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); font-size: 13px; }

/* ---- devices ---- */
.dev { position: relative; z-index: 2; filter: drop-shadow(0 16px 30px rgba(0,0,0,.48)); }
.dev--tv      { width: 74%; display: flex; flex-direction: column; align-items: center; }
.dev--monitor { width: 80%; display: flex; flex-direction: column; align-items: center; }
.mon__bezel  { width: 100%; background: #0d0f16; border-radius: 8px; padding: 7px 7px 12px; border: 1px solid rgba(255,255,255,.10); }
.mon__screen { background: #fff; border-radius: 3px; overflow: hidden; }
.mon__stand  { width: 46px; height: 11px; background: #0d0f16; }
.mon__foot   { width: 88px; height: 4px; background: #161923; border-radius: 3px; }
.dev--phone   { width: 36%; min-width: 152px; background: #0d0f16; border-radius: 16px; padding: 5px; border: 1px solid rgba(255,255,255,.12); }
.dev--dooh    { width: 33%; min-width: 118px; display: flex; flex-direction: column; align-items: center; }

.tv__bezel { width: 100%; background: #0d0f16; border-radius: 8px; padding: 6px 6px 10px; border: 1px solid rgba(255,255,255,.09); }
.tv__stand { width: 52px; height: 6px; background: #0d0f16; }
.tv__foot  { width: 94px; height: 4px; background: #161923; border-radius: 3px; }

.dooh__frame { width: 100%; background: #0d0f16; border-radius: 6px; padding: 5px; border: 1px solid rgba(255,255,255,.10); }
.dooh__post  { width: 8px; height: 26px; background: #0d0f16; }
.dooh__base  { width: 52px; height: 4px; background: #161923; border-radius: 3px; }

/* ---- screens ---- */
.cscreen { position: relative; overflow: hidden; background: #000; border-radius: 3px; }
.cscreen--16x9 { aspect-ratio: 16 / 9; }
.cscreen--9x16 { aspect-ratio: 9 / 16; }
.cscreen--fill { flex: 1; min-height: 0; border-radius: 11px; }
.ph__screen--ad { padding: 0; }
.cscreen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- ad furniture, shared across channels ---- */
.cad__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.04) 30%, rgba(0,0,0,.84) 100%); }
.cad__scrim--heavy { background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.42) 40%, rgba(0,0,0,.86) 100%); }
.cad__mark { display: inline-flex; width: 1em; height: 1em; flex: none; }
.cad__mark svg { width: 100%; height: 100%; }
.cad__badge {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  background: var(--color-mint); color: var(--color-midnight-blue);
  font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
}
.cad__skip {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.32); color: #fff;
  font-size: 8px; font-weight: var(--weight-semibold); padding: 3px 8px; border-radius: 999px;
}
.cad__x {
  position: absolute; top: 7px; right: 7px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); color: #fff;
  font-size: 9px; display: flex; align-items: center; justify-content: center;
}
.cad__brand { display: block; color: #fff; }
.cad__brand b { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--weight-bold); line-height: 1.2; }
.cad__brand span { display: block; font-size: 9px; opacity: .8; margin-top: 1px; }
.cad__cta { display: inline-block; background: #fff; color: var(--color-midnight-blue); font-size: 9px; font-weight: var(--weight-bold); padding: 4px 10px; border-radius: 999px; }
.cad__bar { position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 3; height: 3px; border-radius: 999px; background: rgba(255,255,255,.26); }
.cad__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--color-mint); }
.cad__body { position: absolute; left: 9px; right: 9px; bottom: 9px; z-index: 3; color: #fff; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cad__body--center { top: 0; align-items: center; justify-content: center; text-align: center; gap: 7px; }
.cad__h { font-size: 11px; font-weight: var(--weight-bold); line-height: 1.25; }
.cad__h--lg { font-size: 14px; letter-spacing: -.01em; }

/* CTV: lockup and CTA sit either side, above the progress bar */
.cscreen--16x9 .cad__brand { position: absolute; left: 9px; bottom: 17px; z-index: 3; }
.cscreen--16x9 .cad__cta   { position: absolute; right: 9px; bottom: 17px; z-index: 3; }

/* ---- disclosure label ---- */
.cslot { position: relative; }
.cslot__tag {
  position: absolute; top: 4px; right: 4px; z-index: 4;
  font-size: 7px; font-weight: var(--weight-bold); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.94); color: var(--color-text-secondary);
  border: 1px solid var(--color-grey-light); border-radius: 3px; padding: 1px 5px;
}

/* ---- browser ---- */
.bw__bar { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: var(--color-anti-flash); border-bottom: 1px solid var(--color-grey-light); }
.bw__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--color-grey); }
.bw__url { flex: 1; margin-left: 4px; background: #fff; border: 1px solid var(--color-grey-light); border-radius: 999px; padding: 2px 8px; font-size: 7px; color: var(--color-text-secondary); }
.bw__page { padding: 8px; }
.bw__cols { display: flex; gap: 8px; margin-top: 8px; }
.bw__main { flex: 1; min-width: 0; }
.bw__side { width: 34%; flex: none; }
.bw__img { height: 46px; border-radius: 4px; overflow: hidden; background: var(--color-grey-light); margin: 6px 0; }
.bw__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) opacity(.5); }

.leader {
  height: 42px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(100deg, #123A5E 0%, #1E6F8C 62%, #2E9AA6 100%);
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; gap: 8px;
}
.leader__l { display: flex; align-items: center; gap: 7px; color: #fff; min-width: 0; }
.leader__l .cad__mark { width: 15px; height: 15px; }
.leader__t b { display: block; font-size: 9px; font-weight: var(--weight-bold); line-height: 1.2; }
.leader__t span { font-size: 7px; opacity: .82; }
.leader__cta { flex: none; background: #fff; color: #123A5E; font-size: 7px; font-weight: var(--weight-bold); padding: 4px 8px; border-radius: 999px; }
.mpu { aspect-ratio: 300 / 250; border-radius: 4px; overflow: hidden; position: relative; background: #000; }
.mpu img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- phone ---- */
.ph__screen { position: relative; background: #fff; border-radius: 12px; overflow: hidden; aspect-ratio: 9 / 17.5; display: flex; flex-direction: column; }
.ph__screen--dark { background: #101322; color: #fff; padding: 9px; }
.ph__bar { height: 14px; background: var(--color-anti-flash); border-bottom: 1px solid var(--color-grey-light); display: flex; align-items: center; padding: 0 6px; flex: none; }
.ph__bar span { font-size: 6px; color: var(--color-text-secondary); }
.ph__body { padding: 7px; flex: 1; min-height: 0; }
.ph__img { height: 40px; border-radius: 4px; overflow: hidden; background: var(--color-grey-light); margin: 6px 0; }
.ph__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) opacity(.5); }

/* native in-feed card */
.natc { position: relative; border: 1.5px solid var(--color-mint); background: rgba(29,186,155,.07); border-radius: 5px; padding: 7px; display: flex; gap: 6px; margin: 7px 0; }
.natc__thumb { width: 46px; height: 46px; border-radius: 4px; overflow: hidden; flex: none; background: var(--color-grey-light); }
.natc__thumb img { width: 100%; height: 100%; object-fit: cover; }
.natc__b { flex: 1; min-width: 0; }
.natc__brand { display: flex; align-items: center; gap: 3px; color: var(--color-deep-sea); margin-bottom: 2px; }
.natc__brand .cad__mark { width: 8px; height: 8px; }
.natc__brand b { font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.natc__brand em { font-style: normal; font-size: 6px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-secondary); background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: 3px; padding: 1px 4px; margin-left: auto; flex: none; }
.natc__t { display: block; font-size: 9px; font-weight: var(--weight-bold); color: var(--color-midnight-blue); line-height: 1.3; }
.natc__m { display: block; font-size: 6px; color: var(--color-text-secondary); margin-top: 2px; }

/* mobile sticky banner */
.sticky { position: relative; border-top: 1.5px solid var(--color-mint); background: #fff; padding: 8px 7px 7px; display: flex; align-items: center; gap: 6px; flex: none; }
.sticky__ic { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(135deg,#123A5E,#2E9AA6); color: #fff; flex: none; display: flex; align-items: center; justify-content: center; }
.sticky__ic .cad__mark { width: 11px; height: 11px; }
.sticky__t { min-width: 0; }
.sticky__t b { display: block; font-size: 8px; white-space: nowrap; font-weight: var(--weight-bold); color: var(--color-midnight-blue); line-height: 1.2; }
.sticky__t span { font-size: 7px; white-space: nowrap; color: var(--color-text-secondary); }
.sticky__cta { margin-left: auto; flex: none; background: var(--color-midnight-blue); color: #fff; font-size: 7px; font-weight: var(--weight-bold); padding: 4px 7px; border-radius: 999px; }

/* audio now-playing */
.np__art { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; margin-bottom: 7px; }
.np__artwork { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg,#1B3A2F,#1DBA9B); color: #fff; }
.np__artwork .cad__mark { width: 34%; height: 34%; }
.np__meta b { display: block; font-size: 9px; font-weight: var(--weight-bold); line-height: 1.2; }
.np__meta span { display: block; font-size: 7px; opacity: .6; margin-bottom: 7px; }
.np__wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-bottom: 5px; }
.np__wave i { flex: 1; background: rgba(255,255,255,.26); border-radius: 1px; }
.np__wave i.on { background: var(--color-mint); }
.np__time { display: flex; justify-content: space-between; font-size: 6px; opacity: .62; }
.np__cta { display: block; text-align: center; background: #fff; color: var(--color-midnight-blue); font-size: 7px; font-weight: var(--weight-bold); padding: 5px; border-radius: 999px; margin-top: 7px; }

/* placeholder text lines */
.chv-line { display: block; height: 5px; border-radius: 3px; background: var(--color-grey-light); margin-bottom: 4px; }
.chv-line.h8 { height: 7px; } .chv-line.h10 { height: 8px; }
.chv-line.dark { background: #cdd2da; }
.chv-line.w50 { width: 50% } .chv-line.w55 { width: 55% } .chv-line.w60 { width: 60% }
.chv-line.w70 { width: 70% } .chv-line.w75 { width: 75% } .chv-line.w80 { width: 80% } .chv-line.w90 { width: 90% }

@media (max-width: 600px) {
  .dev--phone { width: 38%; }
  .dev--dooh  { width: 42%; }
}

/* =================================================================
   STOREFRONT MOCK: the operator's own surface, monetized.
   Commerce Media buyers are retailers and marketplaces: the relevant
   visual is their storefront carrying sponsored placements, not an
   advertiser's campaign console.
   ================================================================= */
.storefront {
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(2, 0, 53, 0.28);
  font-size: 13px; text-align: left;
}
.storefront__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--color-grey-light);
  background: var(--color-anti-flash);
}
.storefront__brand { font-weight: var(--weight-bold); color: var(--color-midnight-blue); font-size: 13px; letter-spacing: -0.01em; }
.storefront__search {
  flex: 1; background: var(--color-white);
  border: 1px solid var(--color-grey-light); border-radius: 999px;
  padding: 5px 12px; color: var(--color-text-secondary); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.storefront__body { padding: var(--space-4); }
.storefront__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.storefront__q { font-weight: var(--weight-semibold); color: var(--color-midnight-blue); }
.storefront__count { color: var(--color-text-secondary); font-size: 12px; }
.storefront .mock-grid { gap: 10px; }
.storefront .mock-tile { aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: flex-end; padding: 8px; gap: 4px; }
.storefront__pname { font-size: 11px; font-weight: var(--weight-semibold); color: var(--color-midnight-blue); line-height: 1.25; }
.storefront__pprice { font-size: 11px; color: var(--color-text-secondary); }
.storefront__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 10px var(--space-4);
  border-top: 1px solid var(--color-grey-light);
  background: var(--color-midnight-blue);
  color: rgba(255, 255, 255, 0.72); font-size: 12px;
}
.storefront__live { display: inline-flex; align-items: center; gap: 6px; }
.storefront__rev { color: var(--color-mint-bright, #3CF5C7); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

@media (max-width: 767px) {
  .storefront .mock-grid { grid-template-columns: repeat(2, 1fr); }
  .storefront .col-opt { display: none; }
}

/* =================================================================
   DOCUMENT PAGES: legal, policy, company
   ================================================================= */
.doc-hero { padding-block: var(--space-9) var(--space-8); }
.doc-hero__inner { max-width: 860px; }
.doc-hero__title {
  color: var(--color-white); font-size: clamp(34px, 4.4vw, 52px);
  font-weight: var(--weight-extrabold, 800); letter-spacing: -0.03em;
  line-height: 1.08; margin: var(--space-4) 0 var(--space-4);
}
.doc-hero__deck { color: rgba(255, 255, 255, 0.72); font-size: var(--content-large); max-width: 68ch; }
.doc-hero__meta {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.55); font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
}

.doc-layout { display: grid; gap: var(--space-7); }
.doc-body { max-width: 74ch; }
.doc-h2 {
  font-size: 24px; font-weight: var(--weight-bold); letter-spacing: -0.01em;
  margin: var(--space-7) 0 var(--space-4); scroll-margin-top: 100px;
}
.doc-body > .doc-h2:first-child { margin-top: 0; }
.doc-h3 { font-size: 18px; font-weight: var(--weight-semibold); margin: var(--space-5) 0 var(--space-3); }
.doc-p { color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.doc-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.doc-list li { position: relative; padding-left: var(--space-5); color: var(--color-text-secondary); }
.doc-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-mint);
}
.doc-note {
  border-left: 3px solid var(--color-mint);
  background: var(--color-anti-flash);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary); font-size: 15px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-5);
}
.doc-body a { color: var(--color-deep-sea); text-decoration: underline; text-underline-offset: 2px; }

.doc-toc { align-self: start; }
.doc-toc h2 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-secondary); margin-bottom: var(--space-3);
}
.doc-toc ul { display: flex; flex-direction: column; gap: var(--space-2); }
.doc-toc a { color: var(--color-text-secondary); font-size: 14px; text-decoration: none; }
.doc-toc a:hover { color: var(--color-midnight-blue); }

/* Legal hub index */
.doc-index { display: grid; gap: var(--space-7); }
.doc-index__group h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-text-secondary); font-weight: var(--weight-semibold);
  padding-bottom: var(--space-3); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-grey-light);
}
.doc-index__group ul { display: flex; flex-direction: column; }
.doc-index__group li { border-bottom: 1px solid var(--color-grey-light); }
.doc-index__group a { display: block; padding: var(--space-4) 0; }
.doc-index__group a:hover .doc-index__t { color: var(--color-deep-sea); }
.doc-index__t { display: block; font-weight: var(--weight-semibold); color: var(--color-midnight-blue); margin-bottom: 2px; }
.doc-index__d { display: block; color: var(--color-text-secondary); font-size: 14px; }

/* Footer legal link row */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-legal a { color: rgba(255, 255, 255, 0.72); font-size: 14px; }
.footer-legal a:hover { color: var(--color-white); }

@media (min-width: 900px) {
  .doc-layout.has-toc { grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-9); }
  .doc-toc { position: sticky; top: 100px; }
  .doc-index { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

/* =================================================================
   RESPONSIVE: TABLET (>= 768px)
   ================================================================= */
@media (min-width: 768px) {
  .grid { gap: var(--space-6); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .data-strip { grid-template-columns: repeat(3, 1fr); text-align: left; gap: 0; }
  .data-strip__item + .data-strip__item { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: var(--space-6); }
  .data-strip__item { padding-right: var(--space-6); }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* =================================================================
   RESPONSIVE: DESKTOP (>= 1024px)
   ================================================================= */
@media (min-width: 1024px) {
  :root { --header-h: 72px; }
  .header-inner { min-height: var(--header-h); }
  .grid { gap: var(--space-7); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .grid--6 { grid-template-columns: repeat(3, 1fr); }

  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }

  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
  .step::after {
    content: ""; position: absolute; top: 28px;
    right: calc(var(--space-6) * -0.5 - 6px);
    width: var(--space-6); height: 2px; background: var(--color-grey);
  }
  .step:last-child::after { display: none; }

  .footer-inner { grid-template-columns: 1.6fr repeat(5, 1fr); }
  .footer-brand { grid-column: auto; }

  /* Desktop nav visible inline; hamburger hidden */
  .mobile-toggle { display: none; }
  .nav-drawer { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--space-5); }
  .mega-dropdown { display: none; }
  .nav-item.has-dropdown:hover .mega-dropdown,
  .nav-item.has-dropdown:focus-within .mega-dropdown,
  .nav-link[aria-expanded="true"] + .mega-dropdown { display: grid; }
  .nav-item.has-dropdown:hover .chevron,
  .nav-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
}

/* =================================================================
   MOBILE NAV (< 1024px)
   ================================================================= */
@media (max-width: 1023px) {
  /* backdrop-filter on the header would make it the containing block for the
     fixed drawer; disable it on mobile so the drawer fills the viewport */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--color-white); }
  .nav-drawer {
    display: none;
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--color-white);
    padding: var(--space-6) var(--container-padding) var(--space-8);
    overflow-y: auto;
    flex-direction: column;
    gap: var(--space-6);
  }
  .site-header.is-open .nav-drawer { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .nav-link { width: 100%; justify-content: space-between; font-size: 18px; padding: 14px 8px; }
  .nav-item.has-dropdown .nav-link { border-bottom: 1px solid var(--color-grey-light); }
  /* Parents navigate; verticals shown inline in the drawer */
  .mega-dropdown, .mega-dropdown--3 {
    position: static; display: grid; min-width: 0; box-shadow: none; border: none;
    border-radius: 0; padding: var(--space-3) 0 var(--space-5) var(--space-4);
    grid-template-columns: 1fr; gap: var(--space-4); background: transparent;
  }
  .nav-item.has-dropdown > .nav-link { border-bottom: none; }
  /* Request Access first in the drawer: the CTA was three screens down behind every expanded group */
  .header-actions { margin-inline-start: 0; flex-direction: column; align-items: stretch; gap: var(--space-3); margin-top: 0; margin-bottom: var(--space-2); order: -1; }
  .mega-section h4 { margin-top: var(--space-2); }
  .header-actions .btn-primary, .header-actions .nav-utility { width: 100%; justify-content: center; text-align: center; }
  .nav-utility { padding: 12px; border: 1px solid var(--color-grey-light); border-radius: var(--radius-pill); }
}

/* =================================================================
   DYNAMIC: scroll-reveal, animated chart, format gallery, marquee
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }

  /* hero dashboard bars grow on load */
  .dash__bars span { transform: scaleY(0); transform-origin: bottom; animation: growBar 0.7s cubic-bezier(.2,.7,.3,1) forwards; }
  .dash__bars span:nth-child(1) { animation-delay: .05s; }
  .dash__bars span:nth-child(2) { animation-delay: .12s; }
  .dash__bars span:nth-child(3) { animation-delay: .19s; }
  .dash__bars span:nth-child(4) { animation-delay: .26s; }
  .dash__bars span:nth-child(5) { animation-delay: .33s; }
  .dash__bars span:nth-child(6) { animation-delay: .40s; }
  .dash__bars span:nth-child(7) { animation-delay: .47s; }
}
@keyframes growBar { to { transform: scaleY(1); } }

/* Interactive format gallery (V12) */
.gallery { display: grid; gap: var(--space-5); }
.gallery__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gallery__tab {
  border: 1px solid var(--color-grey-light); background: var(--color-white);
  color: var(--color-text-secondary); font-weight: var(--weight-semibold); font-size: 14px;
  padding: 10px 18px; border-radius: var(--radius-pill); cursor: pointer; font-family: inherit;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.gallery__tab:hover { border-color: var(--color-grey); }
.gallery__tab.is-active { background: var(--color-midnight-blue); color: var(--color-white); border-color: var(--color-midnight-blue); }
.gallery__stage {
  background: var(--color-anti-flash);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 40px);
  min-height: 320px;
  display: grid;
  align-items: center;
}
.gallery__panel { display: none; }
.gallery__panel.is-active { display: block; }
.gallery__layout { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 768px) { .gallery__layout { grid-template-columns: 1fr 1fr; } }
.gallery__desc h3 { font-size: var(--subtitle-04); margin-bottom: var(--space-3); }
.gallery__desc p { color: var(--color-text-secondary); }
.gallery__mock {
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-card);
}
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mock-tile { background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); aspect-ratio: 3/4; }
.mock-tile.is-ad { border: 1.5px solid var(--color-mint); position: relative; background: rgba(29,186,155,.06); }
.mock-tag { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-deep-sea); background: var(--color-white); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--color-grey-light); }
.mock-bar { height: 12px; border-radius: 4px; background: var(--color-grey-light); margin-bottom: 8px; }
.mock-bar.w70 { width: 70%; } .mock-bar.w50 { width: 50%; }
.mock-banner { border: 1.5px solid var(--color-mint); background: linear-gradient(135deg, rgba(32,0,177,.08), rgba(29,186,155,.10)); border-radius: var(--radius-sm); height: 90px; display: flex; align-items: center; justify-content: center; color: var(--color-midnight-blue); font-weight: 700; position: relative; }
.mock-row { display: flex; gap: var(--space-3); }
.mock-side { flex: none; width: 30%; }

/* API code block (V9: developer credibility, Topsort-style) */
.code-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) { .code-split { grid-template-columns: 1fr 1.05fr; gap: var(--space-9); } }
.code-block {
  background: var(--color-midnight-blue);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(2, 0, 53, 0.6);
  background-image: radial-gradient(120% 120% at 100% 0%, rgba(32, 0, 177, 0.45), transparent 55%);
}
.code-block__bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.code-block__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.code-block__bar span { margin-left: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.5); font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; }
.code-block pre { margin: 0; padding: clamp(16px, 2.4vw, 28px); overflow-x: auto; font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75; color: rgba(255, 255, 255, 0.85); }
.code-block .tok-method { color: var(--color-mint-bright); font-weight: 700; }
.code-block .tok-key { color: #9db2ff; }
.code-block .tok-str { color: var(--color-mint-bright); }
.code-block .tok-com { color: rgba(255, 255, 255, 0.4); }
.code-block .tok-ok { color: var(--color-mint); font-weight: 700; }

/* Integrations marquee (named integrations only: no third-party logos) */
.marquee-wrap { overflow: hidden; }
.marquee-label { text-align: center; color: var(--color-text-secondary); font-size: 14px; margin-bottom: var(--space-5); }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: inline-flex; gap: var(--space-7); white-space: nowrap; padding-left: var(--space-7); }
.marquee__track span { font-size: 22px; font-weight: var(--weight-bold); color: var(--color-midnight-blue); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 26s linear infinite; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* How-it-works intro photo: minimal, quiet, sits under the section head */
.proc__photo { margin: var(--space-6) 0 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-grey-light); }
.proc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .proc__photo { aspect-ratio: 3 / 2; } }

/* Operator photo above the console in the commerce How-it-works split */
.formats-media__photo { margin: 0 0 var(--space-4); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16 / 9; background: var(--color-grey-light); }
.formats-media__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* =================================================================
   INTEGRATION MAP: real supply partners, by channel
   Names come from .claude/intmap.js (engineering's capacity doc).
   ================================================================= */
.intmap { display: flex; flex-direction: column; gap: var(--space-6); }
.intmap__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intmap__tab {
  font-family: inherit; cursor: pointer;
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: 999px; padding: 7px 16px;
  font-size: 14px; font-weight: var(--weight-semibold); color: var(--color-text-secondary);
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.intmap__tab:hover { border-color: var(--color-mint); color: var(--color-midnight-blue); }
.intmap__tab.is-active { background: var(--color-midnight-blue); border-color: var(--color-midnight-blue); color: var(--color-white); }

.intmap__flow { display: grid; gap: var(--space-5); align-items: center; }
.intmap__supply { min-width: 0; }
.intmap__panel { display: none; }
.intmap__panel.is-active { display: block; }
.intmap__count { font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.intmap__count b { color: var(--color-midnight-blue); font-weight: var(--weight-bold); font-size: 15px; }
.intmap__partners { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.intmap__partners li {
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-sm); padding: 8px 13px;
  font-size: 13px; font-weight: var(--weight-medium); color: var(--color-midnight-blue);
}
.intmap__core {
  background: var(--color-midnight-blue); color: var(--color-white);
  border-radius: var(--radius-lg); padding: var(--space-6);
  text-align: center; display: flex; flex-direction: column; gap: 4px;
}
.intmap__core b { font-size: 22px; font-weight: var(--weight-extrabold, 800); letter-spacing: -0.02em; }
.intmap__core-k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-mint); font-weight: var(--weight-bold); }
.intmap__core-s { font-size: 12px; color: rgba(255,255,255,.7); }

.intmap__cross { display: grid; gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-grey-light); }
.intmap__cross-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-secondary); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
.intmap__cross-col ul { display: flex; flex-wrap: wrap; gap: 6px; }
.intmap__cross-col li { font-size: 12px; color: var(--color-midnight-blue); background: var(--color-anti-flash); border-radius: var(--radius-sm); padding: 5px 10px; }

@media (min-width: 860px) {
  .intmap__flow { grid-template-columns: minmax(0,1fr) 230px; gap: var(--space-8); }
  .intmap__cross { grid-template-columns: repeat(3, 1fr); }
}

/* =================================================================
   STEP VISUALS: one per How-it-works step, swapped on open
   A single photo beside five steps says nothing about any one of
   them. Content comes from .claude/stepviz.js.
   ================================================================= */
.stepviz { display: none; }
.stepviz.is-active { display: flex; flex-direction: column; gap: var(--space-4); }
.stepviz__stage {
  background: var(--color-white); border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(2,0,53,.08);
  padding: var(--space-5); min-height: 268px;
  display: flex; align-items: center; justify-content: center;
}
.stepviz__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 12px; color: var(--color-text-secondary); }
.stepviz__cap b { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); font-size: 13px; }

/* 01 integrate */
.sv-wire { display: flex; align-items: center; gap: var(--space-4); width: 100%; }
.sv-platforms { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sv-platforms li { font-size: 12px; font-weight: var(--weight-medium); color: var(--color-midnight-blue); background: var(--color-anti-flash); border-radius: var(--radius-sm); padding: 7px 11px; }
.sv-arrow { flex: none; width: 22px; color: var(--color-mint); }
.sv-arrow svg { width: 100%; }
.sv-core { flex: none; width: 40%; background: var(--color-midnight-blue); color: #fff; border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.sv-core b { display: block; font-size: 16px; font-weight: var(--weight-extrabold, 800); letter-spacing: -.02em; }
.sv-core span { font-size: 10px; color: rgba(255,255,255,.7); }

/* 02 configure */
.sv-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); width: 100%; }
.sv-unit { border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 9px; }
.sv-unit > span { display: block; margin-top: 7px; font-size: 10px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.sv-unit .mock-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sv-unit .mock-tile { aspect-ratio: 1; }
.sv-unit .mock-banner { height: 40px; font-size: 9px; }
.sv-unit .mock-bar { height: 7px; margin-bottom: 4px; }

/* 03 onboard + 05 optimize share the panel shell */
.sv-panel { width: 100%; }
.sv-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.sv-panel__head b { font-size: 13px; color: var(--color-midnight-blue); }
.sv-pill { font-size: 10px; font-weight: var(--weight-semibold); color: var(--color-text-secondary); background: var(--color-anti-flash); border-radius: 999px; padding: 3px 9px; }
.sv-pill--up { color: #0f7a66; background: rgba(29,186,155,.14); }
.sv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sv-table td { padding: 8px 0; border-bottom: 1px solid var(--color-grey-light); color: var(--color-text-secondary); }
.sv-table tr:last-child td { border-bottom: 0; }
.sv-table td:first-child { color: var(--color-midnight-blue); font-weight: var(--weight-semibold); }
.sv-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sv-tag { font-size: 9px; font-weight: var(--weight-semibold); border-radius: 999px; padding: 2px 8px; background: var(--color-grey-light); color: var(--color-text-secondary); }
.sv-tag--on { background: rgba(29,186,155,.14); color: #0f7a66; }

/* 04 launch */
.sv-store { width: 100%; }
.sv-store__bar { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.sv-store__brand { font-size: 12px; font-weight: var(--weight-bold); color: var(--color-midnight-blue); }
.sv-store__q { flex: 1; font-size: 10px; color: var(--color-text-secondary); background: var(--color-anti-flash); border-radius: 999px; padding: 4px 10px; }
.sv-store .mock-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sv-store .mock-tile { aspect-ratio: 4/5; }
.sv-store__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 10px; color: var(--color-text-secondary); }
.sv-store__foot b { color: var(--color-midnight-blue); }
.sv-live { display: inline-flex; align-items: center; gap: 5px; }

/* 05 optimize */
.sv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.sv-kpis div { border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 8px; }
.sv-kpis span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-secondary); }
.sv-kpis b { font-size: 15px; color: var(--color-midnight-blue); letter-spacing: -.01em; }
.sv-chart { display: flex; align-items: flex-end; gap: 4px; height: 62px; }
.sv-chart i { flex: 1; background: var(--color-grey-light); border-radius: 2px 2px 0 0; }
.sv-note { margin-top: 9px; font-size: 10px; color: var(--color-text-secondary); }

@media (max-width: 600px) { .sv-units { grid-template-columns: 1fr; } .sv-wire { flex-direction: column; } .sv-core { width: 100%; } }

/* 03 set up audiences */
.sv-segs { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.sv-seg { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 8px 10px; }
.sv-seg span { font-size: 11px; color: var(--color-text-secondary); }
.sv-seg b { font-size: 12px; color: var(--color-midnight-blue); font-variant-numeric: tabular-nums; }
.sv-seg--new { border-color: var(--color-mint); background: rgba(29,186,155,.06); }
.sv-priv { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--color-text-secondary); }

/* Per-step photograph (same swap mechanism as the rendered step panels) */
.stepphoto { margin: 0; }
.stepphoto.is-active { display: flex; flex-direction: column; gap: var(--space-3); }
.stepphoto img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg); background: var(--color-grey-light);
}

/* =================================================================
   V2 HERO: light ground, solid H1, bordered proof grid
   From the designer's Figma. Reads materially more enterprise than
   the dark hero it replaces; the dark treatment moves down-page.
   ================================================================= */
.hero--light {
  background: var(--color-white);
  padding-block: var(--space-9) var(--space-9);
  border-bottom: 1px solid var(--color-grey-light);
}
.hero--light .hero__eyebrow {
  display: inline-block;
  color: var(--color-deep-sea);
  font-size: 12px; font-weight: var(--weight-bold);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.hero--light .hero__eyebrow .pulse { display: none; }
.hero--light .hero__title {
  color: var(--color-midnight-blue);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: var(--weight-extrabold, 800);
  letter-spacing: -0.03em; line-height: 1.08;
  margin-bottom: var(--space-5);
  max-width: 16ch;
}
.hero--light .hero__deck {
  color: var(--color-text-secondary);
  font-size: var(--content-large);
  max-width: 52ch;
  margin-bottom: var(--space-6);
}
.hero--light .hero__actions { margin-bottom: var(--space-7); }
.hero--light .btn-primary { background: var(--color-midnight-blue); color: var(--color-white); }
.hero--light .btn-primary:hover { background: var(--color-dark-royalty, #02066F); }

/* proof grid: six facts in a bordered box, value over qualifier */
.proofgrid {
  display: grid; grid-template-columns: 1fr;
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: 560px;
}
.proofgrid__cell {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-grey-light);
}
.proofgrid__cell b {
  display: block;
  color: var(--color-midnight-blue);
  font-size: 14px; font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}
.proofgrid__cell span {
  display: block;
  color: var(--color-text-secondary);
  font-size: 12px; margin-top: 1px;
}
/* the hero visual sits on a quiet panel, as in the design */
.hero--light .hero__visual {
  background: var(--color-anti-flash);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex; align-items: center; justify-content: center;
}
.hero--light .hero__visual .dash,
.hero--light .hero__visual .storefront { box-shadow: 0 18px 44px rgba(2, 0, 53, 0.14); }

@media (min-width: 640px) {
  .proofgrid { grid-template-columns: repeat(3, 1fr); }
  .proofgrid__cell { border-right: 1px solid var(--color-grey-light); }
  .proofgrid__cell:nth-child(3n) { border-right: 0; }
  .proofgrid__cell:nth-last-child(-n+3) { border-bottom: 0; }
}
@media (max-width: 639px) {
  .proofgrid__cell:last-child { border-bottom: 0; }
}

/* =================================================================
   WHY-CHOOSE SPEC CARD: white capability grid on a dark section
   ================================================================= */
.speccard {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr;
  box-shadow: 0 24px 60px rgba(2, 0, 53, 0.28);
}
.speccard__cell {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-grey-light);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.speccard__cell:last-child { border-bottom: 0; }
.speccard__label {
  font-size: 13px; font-weight: var(--weight-semibold);
  color: var(--color-midnight-blue);
}
.speccard__value {
  font-size: 19px; font-weight: var(--weight-bold);
  color: var(--color-deep-sea); letter-spacing: -0.01em; line-height: 1.25;
  max-width: 22ch;
}
.speccard__note { font-size: 12px; color: var(--color-text-secondary); line-height: 1.45; }

@media (min-width: 900px) {
  .speccard { grid-template-columns: repeat(2, 1fr); }
  .speccard__cell { border-right: 1px solid var(--color-grey-light); }
  .speccard__cell:nth-child(2n) { border-right: 0; }
  .speccard__cell:nth-last-child(-n+2) { border-bottom: 0; }
}

/* =================================================================
   "WHAT YOU GET" FEATURE GRID  (commerce media platform)
   Each claim pairs a schematic with the copy, so the section shows
   what an operator gets rather than only asserting it.
   ================================================================= */
.featgrid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .featgrid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7); } }

.featcard {
  display: flex; flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.featcard__viz {
  background: var(--color-anti-flash);
  border-bottom: 1px solid var(--color-grey-light);
  padding: var(--space-5);
  /* fixed, not min-height: the four schematics have different natural heights,
     which pushed each card's title to a different baseline across the row */
  display: flex; align-items: center; justify-content: center;
  /* Stacked (one column): let the frame take the height its schematic needs.
     There is no neighbouring card to line up with, and forcing a fixed height
     here is what pushed visuals over the card copy at mobile and tablet. */
  min-height: 200px;
  overflow: hidden;
}
.featcard__viz > * { width: 100%; max-height: 100%; }

@media (min-width: 900px) {
  /* Two across: now the frames must match so titles share a baseline. */
  .featcard__viz { height: 268px; }
  /* Cap the schematic's width too. The tile mocks size by aspect-ratio, so on a
     wide card they grew taller than the frame and spilled over the copy. */
  .featcard__viz > * { max-width: 400px; }
}
.featcard__text { padding: var(--space-5) var(--space-5) var(--space-6); }
.featcard__title { font-size: 19px; font-weight: 700; color: var(--color-midnight-blue); margin-bottom: var(--space-3); }
.featcard__body { color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; }
.featcard__gets { list-style: none; margin-top: var(--space-4); display: grid; gap: 6px; }
.featcard__gets li { position: relative; padding-left: 20px; font-size: 14px; color: var(--color-midnight-blue); font-weight: 600; }
.featcard__gets li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-mint);
}

/* --- schematics --- */
.wv-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wv-unit { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 7px; }
.wv-units .mock-tile { aspect-ratio: 4/3; }
/* Every cell the same height, and every caption on the same baseline. Without
   these the four sub-mocks sized to their own content and the labels stepped up
   and down across the block, which is what made it read as messy. */
/* 1fr rows only resolve against a definite height, and the frame centres its
   child, so the grid was auto-height and the two rows sized to their own
   content (94px vs 115px). Stretch it, then the rows really are equal. */
.wv-units { align-self: stretch; height: 100%; min-height: 190px; grid-auto-rows: minmax(0, 1fr); align-content: stretch; }
.wv-unit { display: flex; flex-direction: column; }
.wv-unit > span { margin-top: auto; padding-top: 6px; }
/* The "Ad" chip is absolutely positioned, so on a 40px banner it sat on top of
   the centred label and ate its first letter ("rand storefront"). Inline it. */
.wv-units .mock-banner { gap: 6px; padding: 0 8px; font-size: 10px; text-align: center; }
.wv-units .mock-banner .mock-tag { position: static; flex: none; }
.wv-units .wv-video, .wv-units .wv-phone { aspect-ratio: auto; height: 58px; }
.wv-units .mock-banner { height: 40px; }
.wv-units .mock-grid { gap: 5px; }
.wv-unit > span { display: block; margin-top: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); }

/* Three columns need ~340px of content; inside a 375px phone with section and
   card padding there is not that much, so the row pushed the whole How-it-works
   section 6px past the viewport. Stack below 560px and turn the arrow upright. */
.wv-wire { display: grid; grid-template-columns: 1fr; align-items: center; gap: 12px; }
@media (min-width: 560px) { .wv-wire { grid-template-columns: 1fr auto 1fr; } }
@media (max-width: 559px) { .wv-wire .wv-arrow { transform: rotate(90deg); justify-self: center; } }
.wv-wire > * { min-width: 0; }
.wv-platforms li { overflow-wrap: anywhere; }
.wv-platforms { list-style: none; display: grid; gap: 5px; }
.wv-platforms li { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 6px 9px; font-size: 12px; font-weight: 600; color: var(--color-midnight-blue); }
.wv-arrow { color: var(--color-grey); }
.wv-arrow svg { width: 22px; height: 22px; display: block; }
.wv-core { background: var(--color-midnight-blue); border-radius: var(--radius-md); padding: 14px 12px; text-align: center; }
.wv-core b { display: block; color: var(--color-white); font-size: 13px; font-weight: 700; }
.wv-core span { display: block; margin-top: 4px; color: var(--color-mint); font-size: 11px; font-weight: 600; }

.wv-panel { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-md); padding: 12px; }
.wv-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.wv-panel__head b { font-size: 13px; color: var(--color-midnight-blue); }
.wv-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--color-midnight-blue); }
.wv-brand i { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, var(--color-deep-sea), var(--color-mint)); display: block; }
.wv-pill { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); border-radius: 999px; padding: 3px 8px; }
.wv-tabs { display: flex; gap: 14px; border-bottom: 1px solid var(--color-grey-light); margin-bottom: 8px; }
.wv-tabs span { font-size: 11px; font-weight: 600; color: var(--color-grey); padding-bottom: 6px; }
.wv-tabs .is-active { color: var(--color-midnight-blue); box-shadow: inset 0 -2px 0 var(--color-mint); }
.wv-table { width: 100%; border-collapse: collapse; }
.wv-table td { font-size: 12px; color: var(--color-midnight-blue); padding: 6px 0; border-bottom: 1px solid var(--color-grey-light); }
.wv-table tr:last-child td { border-bottom: 0; }
.wv-table .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.wv-tag { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); background: var(--color-anti-flash); border-radius: 999px; padding: 2px 7px; }
.wv-tag--on { color: #0b7a5a; background: rgba(45, 212, 165, .16); }
.wv-field { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--color-grey-light); }
.wv-field span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary); font-weight: 700; }
.wv-field b { font-size: 12px; color: var(--color-midnight-blue); text-align: right; }
.wv-bars { display: grid; gap: 7px; margin-top: 10px; }
.wv-barrow { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
.wv-barrow span { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.wv-barrow i { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--color-deep-sea), var(--color-mint)); }
.wv-foot { margin-top: 10px; font-size: 11px; color: var(--color-text-secondary); }

/* Integration marquee: brand mark + wordmark, so the row reads as real
   integrations rather than placeholder text. */
.marquee__brand { display: inline-flex; align-items: center; gap: 10px; }
.marquee__brand img { width: 26px; height: 26px; flex: none; display: block; }

/* --- whyviz primitives: meter, filter list, chips, channel row, video/phone --- */
.wv-meter { display: grid; gap: 8px; }
.wv-mrow { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; }
.wv-ml { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); }
.wv-mv { font-size: 12px; font-weight: 700; color: var(--color-midnight-blue); text-align: right; }
.wv-mb { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--color-grey-light); overflow: hidden; }
.wv-mb u { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--color-deep-sea), var(--color-mint)); }

.wv-thead td { font-size: 10px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary) !important; }

.wv-flist { list-style: none; display: grid; gap: 5px; }
.wv-flist li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border-radius: var(--radius-sm); border: 1px solid var(--color-grey-light); }
.wv-flist span { font-size: 12px; font-weight: 600; color: var(--color-midnight-blue); }
.wv-flist em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.wv-flist .is-pass { background: rgba(29, 186, 155, .07); }
.wv-flist .is-pass em { color: #0b7a5a; }
.wv-flist .is-block { background: rgba(2, 0, 53, .04); }
.wv-flist .is-block em { color: #8A8FA0; }

.wv-chipgroup { display: grid; grid-template-columns: 62px 1fr; gap: 8px; align-items: start; margin-bottom: 7px; }
.wv-chiplabel { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); padding-top: 4px; }
.wv-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wv-chips span { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: 999px; padding: 3px 9px; }
.wv-chips .is-on { color: var(--color-midnight-blue); border-color: var(--color-mint); background: rgba(29, 186, 155, .1); }

.wv-chan { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.wv-chan span { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: 999px; padding: 3px 9px; }
.wv-chan .is-on { color: var(--color-white); background: var(--color-midnight-blue); border-color: var(--color-midnight-blue); }

.wv-video { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16/9; border-radius: var(--radius-sm); background: var(--color-midnight-blue); }
.wv-video em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--color-white); }
.wv-video.is-full { background: linear-gradient(135deg, var(--color-deep-sea), var(--color-midnight-blue)); }
.wv-play { width: 0; height: 0; border-left: 9px solid var(--color-mint); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.wv-phone { display: flex; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 16/9; border-radius: var(--radius-sm); border: 1px solid var(--color-grey-light); background: var(--color-white); }
.wv-phone span { width: 22px; height: 34px; border-radius: 4px; border: 2px solid var(--color-midnight-blue); display: block; }
.wv-phone em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--color-midnight-blue); }

.wv-core em { display: block; font-style: normal; margin-top: 4px; font-size: 10px; color: rgba(255,255,255,.7); }

/* Showcase: one legible mock plus a legend of the rest. Replaces the 2x2
   sampler, which crowded four captioned mocks into one frame. */
.wv-show { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.wv-show__stage { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-sm); padding: 12px; }
.wv-show__stage .mock-tile { aspect-ratio: 4/3; }
.wv-show__stage .mock-banner { height: 62px; }
.wv-show__stage .wv-video, .wv-show__stage .wv-phone { aspect-ratio: auto; height: 84px; }
.wv-show__stage .mock-bar { height: 9px; margin-bottom: 6px; }
.wv-show__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.wv-show__legend li { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: 999px; padding: 3px 9px; }
.wv-show__legend li:first-child { color: var(--color-midnight-blue); border-color: var(--color-mint); background: rgba(29, 186, 155, .1); }

/* Hero photo collage (designer V.02). The artwork already carries its own
   rounded corners and internal gaps, so it needs no frame of its own. */
/* No tray behind it. The light hero puts a grey panel behind its console mocks
   to lift them off the page; the collage already sits on white with its own
   gaps and corners, so the panel just boxed the artwork in. */
.hero--light .hero__visual--photo,
.hero__visual--photo { background: none; padding: 0; display: flex; align-items: center; justify-content: center; }
.hero__visual--photo img { width: 100%; max-width: 556px; height: auto; display: block; }

/* Centred channel hero (designer V.02): no visual, proof points on one line. */
.hero--center .hero__grid, .hero--center .hero__content { display: block; text-align: center; }
.hero--center .hero__content { max-width: 860px; margin-inline: auto; }
.hero--center .hero__deck { margin-inline: auto; max-width: 760px; }
.hero--center .hero__actions { justify-content: center; }
.prooflist {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-3) var(--space-6); margin-top: var(--space-7);
}
.prooflist li { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--color-text-secondary); }
.prooflist svg { color: var(--color-deep-sea); flex: none; }
.prooflist b { font-weight: 600; color: var(--color-midnight-blue); }
.prooflist span { color: var(--color-text-secondary); }
/* The corner glow exists to sit behind the hero mock. With no visual there it
   reads as a smudge floating over the copy, so soften it and centre it. */
.hero--center::before {
  top: -55%; right: 50%; transform: translateX(50%);
  width: 78%;
  background: radial-gradient(circle, rgba(32, 0, 177, 0.13), transparent 62%);
}

/* SSP map (DSP hero). One relationship, stated simply: NEXUS buys through the
   SSPs. The chips cycle through the real partner list so the breadth reads as
   movement rather than a wall of names. */
.ssp { display: grid; gap: 12px; width: 100%; max-width: 460px; margin-inline: auto; }
.ssp__core { background: var(--color-midnight-blue); border-radius: var(--radius-md); padding: 18px 16px; text-align: center; }
.ssp__core span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-mint); }
.ssp__core b { display: block; margin-top: 4px; color: var(--color-white); font-size: 21px; font-weight: 700; letter-spacing: .02em; }
.ssp__wire { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ssp__wire i { flex: 1; max-width: 90px; height: 0; border-top: 2px dashed var(--color-grey); }
.ssp__wire em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--color-text-secondary); }
.ssp__supply { background: var(--color-white); border: 1px solid var(--color-grey-light); border-radius: var(--radius-md); padding: 16px; text-align: center; }
.ssp__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; transition: opacity .3s ease; }
.ssp__chips.is-fading { opacity: 0; }
.ssp__chip {
  font-size: 13px; font-weight: 600; color: var(--color-midnight-blue);
  background: var(--color-anti-flash); border: 1px solid var(--color-grey-light);
  border-radius: 999px; padding: 7px 14px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .ssp__chips { transition: none; } }
.ssp__foot { margin-top: 12px; font-size: 11px; color: var(--color-text-secondary); }
.ssp__foot b { color: var(--color-midnight-blue); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .ssp__chip { animation: none; } }



/* "What you get": one swapping visual beside a list, replacing the 2x2 of tall
   cards. Same navigation model as How it works and Ad Formats. */
.featsplit { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .featsplit { grid-template-columns: 1.05fr 1fr; gap: var(--space-8); } }

.featviz {
  background: var(--color-anti-flash); border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-lg); padding: var(--space-6);
  display: flex; align-items: center; justify-content: center;
  min-height: 300px; overflow: hidden;
}
@media (min-width: 900px) { .featviz { position: sticky; top: 104px; height: 340px; } }
.featviz__item { display: none; width: 100%; }
.featviz__item.is-active { display: block; }
.featviz__item > * { width: 100%; max-width: 420px; margin-inline: auto; max-height: 100%; }

.featitem { border-bottom: 1px solid var(--color-grey-light); }
.featitem:first-child { border-top: 1px solid var(--color-grey-light); }

/* An open dropdown should read as its own block dropping BELOW a divider line,
   not body text jammed against the trigger. Applied to the two accordions
   flagged on Commerce ("what you get" and How it works). */
.featitem.is-open .accordion__trigger,
.proc-item.is-open .accordion__trigger { padding-bottom: var(--space-3); }
.featitem.is-open > .accordion__panel,
.proc-item.is-open > .accordion__panel {
  border-top: 1px solid var(--color-grey-light);
  padding-top: var(--space-4);
}
.featitem__title { font-size: 17px; font-weight: 700; color: var(--color-midnight-blue); text-align: left; }
.featitem .accordion__panel p { color: var(--color-text-secondary); font-size: 15px; line-height: 1.6; }
.featitem__gets { list-style: none; margin-top: var(--space-4); display: grid; gap: 6px; }
.featitem__gets li { position: relative; padding-left: 20px; font-size: 14px; color: var(--color-midnight-blue); font-weight: 600; }
.featitem__gets li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-mint);
}

/* Per-step drawings. Same frame as the photo version they replaced, so the
   swapper, the caption and the audit's parity check all keep working. */
.stepdraw { display: none; }
.stepdraw.is-active { display: block; }
.stepdraw__stage {
  background: var(--color-anti-flash);
  border: 1px solid var(--color-grey-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-height: 232px;
  display: flex; align-items: center; justify-content: center;
}
.stepdraw__stage > * { width: 100%; }
.stepdraw .stepviz__cap { margin-top: var(--space-4); }

/* =================================================================
   BLOG: home, article, tag/category, author.
   Structure from the four design mockups; palette, type and components are
   the NEXUS system (mint on midnight, Inter, doc-* prose, accordion).
   Article visuals are code-drawn pillar schematics: one treatment across
   every image so the blog reads as one brand without a photo library.
   ================================================================= */
.mega-dropdown--slim { min-width: 320px; width: max-content; grid-template-columns: 1fr; }
.mega-dropdown--slim .mega-section a { white-space: nowrap; }
.bl-page { padding-top: var(--space-6); }
.bl-page .container { max-width: 1200px; }
.bl-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-midnight-blue); }
h2.bl-eyebrow { margin: 0; }
.bl-h1 { font-size: var(--subtitle-01); line-height: 1.1; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-4); }
.bl-h2 { font-size: var(--subtitle-04); margin: 0; }
.bl-deck { color: var(--color-text-secondary); font-size: 17px; max-width: 64ch; margin-bottom: var(--space-6); }
/* breadcrumbs */
.bl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-5); }
.bl-crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.bl-crumbs a:hover { color: var(--color-deep-sea); }
.bl-crumbs i { font-style: normal; color: var(--color-grey); }
.bl-crumbs span { color: var(--color-midnight-blue); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
/* intro + filter (home) */
.bl-intro { max-width: 760px; margin-bottom: var(--space-6); }
.bl-intro h1 { font-size: var(--subtitle-01); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.bl-intro p { font-size: 17px; color: var(--color-text-secondary); }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-7); }
.bl-fpill { font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-grey); color: var(--color-midnight-blue); text-decoration: none; background: var(--color-white); transition: border-color var(--transition-base), color var(--transition-base); }
.bl-fpill:hover { border-color: var(--color-mint); color: var(--color-deep-sea); }
.bl-fpill.is-on { background: var(--color-midnight-blue); color: #fff; border-color: var(--color-midnight-blue); }
/* sections */
.bl-sec { margin-bottom: var(--space-8); }
.bl-sec__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-grey-light); }
.bl-sec__title { font-size: var(--subtitle-04); margin: 0; }
.bl-sec__title a { color: inherit; text-decoration: none; }
.bl-sec__title a:hover { color: var(--color-deep-sea); }
.bl-sec__n { font-size: 13px; color: var(--color-text-secondary); }
.bl-more { margin-top: var(--space-5); }
.bl-more a { font-weight: 600; font-size: 14px; color: var(--color-deep-sea); text-decoration: none; }
.bl-more a:hover { color: var(--color-mint); }
/* grid + card */
.bl-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 720px) { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }
.bl-card { display: flex; flex-direction: column; border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.bl-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.bl-card__thumb { display: block; aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--color-midnight-blue); }
.bl-card__c { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); flex: 1; }
.bl-pill { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); color: var(--color-midnight-blue); text-decoration: none; }
.bl-pill:hover { background: rgba(29,186,155,.22); }
.bl-card__t { font-size: 18px; line-height: 1.3; margin: 0; }
.bl-card__t a { color: inherit; text-decoration: none; }
.bl-card__t a:hover { color: var(--color-deep-sea); }
.bl-card__d { color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card__m { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: 12.5px; color: var(--color-text-secondary); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--color-grey-light); }
.bl-mi { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bl-mi svg { color: var(--color-text-secondary); }
.bl-mi--who { margin-right: auto; }
.bl-av { width: 24px; height: 24px; border-radius: 50%; background: var(--color-midnight-blue); color: var(--color-mint-bright); font-weight: 800; font-size: 10px; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bl-av--md { width: 40px; height: 40px; font-size: 14px; }
.bl-av--lg { width: 64px; height: 64px; font-size: 22px; }
/* pager */
.bl-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: var(--space-6); font-size: 14px; }
.bl-pager > * { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--color-grey-light); color: var(--color-text-secondary); text-decoration: none; }
.bl-pager .is-cur { background: var(--color-midnight-blue); color: #fff; border-color: var(--color-midnight-blue); }
.bl-pager .is-arrow { color: var(--color-grey); }
/* tags */
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.bl-tags--end { margin: var(--space-6) 0; }
.bl-tag, .bl-tool { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--color-anti-flash); border: 1px solid var(--color-grey-light); color: var(--color-midnight-blue); text-decoration: none; }
.bl-tag:hover { border-color: var(--color-mint); color: var(--color-deep-sea); }
.bl-tool--alt { background: var(--color-white); }
.bl-tools { display: flex; flex-wrap: wrap; gap: 6px; }
/* ---------- article ---------- */
.bl-progress { position: sticky; top: var(--header-h); z-index: 90; height: 3px; background: transparent; margin-top: -1px; }
.bl-progress__bar { height: 100%; width: 0; background: var(--color-mint); transition: width 80ms linear; }
.bl-art { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .bl-art { grid-template-columns: 220px minmax(0, 1fr) 280px; align-items: start; }
  .bl-rail { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .bl-art { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .bl-rail--l { position: sticky; top: calc(var(--header-h) + 24px); }
  .bl-rail--r { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
.bl-main { min-width: 0; max-width: 760px; }
.bl-toc h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.bl-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 2px solid var(--color-grey-light); }
.bl-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 13.5px; line-height: 1.35; color: var(--color-text-secondary); text-decoration: none; }
.bl-toc a:hover { color: var(--color-midnight-blue); }
.bl-toc a.is-active { color: var(--color-midnight-blue); font-weight: 600; border-left-color: var(--color-mint); }
.bl-title { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin: var(--space-3) 0 var(--space-3); }
.bl-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 13.5px; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.bl-byline { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-grey-light); border-bottom: 1px solid var(--color-grey-light); margin-bottom: var(--space-6); }
.bl-byline__w { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.bl-byline__w b a { color: var(--color-midnight-blue); text-decoration: none; }
.bl-byline__w b a:hover { color: var(--color-deep-sea); }
.bl-byline__w span { color: var(--color-text-secondary); font-size: 13px; }
.bl-share { margin-left: auto; display: flex; gap: 6px; }
.bl-share a, .bl-share button, .bl-social a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-grey-light); background: var(--color-white); color: var(--color-midnight-blue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; transition: border-color var(--transition-base), color var(--transition-base); }
.bl-share a:hover, .bl-share button:hover, .bl-social a:hover { border-color: var(--color-mint); color: var(--color-mint); }
.bl-copy.is-done { border-color: var(--color-mint); background: rgba(29,186,155,.12); color: #0f7d68; }
.bl-social { display: flex; gap: 6px; margin-top: var(--space-3); }
.bl-highlights { padding: var(--space-5) var(--space-6); border-left: 3px solid var(--color-mint); background: var(--color-anti-flash); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-6); }
.bl-highlights h2, .bl-takeaways h2 { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-midnight-blue); font-weight: 700; margin: 0 0 var(--space-3); }
.bl-highlights ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bl-highlights li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--color-midnight-blue); }
.bl-highlights li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-mint); }
.bl-hero { position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-7); box-shadow: var(--shadow-card); }
.bl-body { max-width: none; }
.bl-cta-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-7) 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--color-midnight-blue); color: #fff; }
.bl-cta-h h3 { font-size: 18px; margin: 0 0 4px; color: #fff; }
.bl-cta-h p { margin: 0; font-size: 14px; color: rgba(255,255,255,.8); }
.bl-cta-h p a { color: var(--color-mint-bright); }
.bl-cta-h .btn-primary { text-decoration: none; }
.bl-takeaways { margin: var(--space-7) 0; padding: var(--space-5) var(--space-6); border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-card); }
.bl-takeaways ol { margin: 0; padding-left: 0; list-style: none; counter-reset: tk; display: flex; flex-direction: column; gap: var(--space-3); }
.bl-takeaways li { counter-increment: tk; position: relative; padding-left: 36px; font-size: 15px; line-height: 1.5; }
.bl-takeaways li::before { content: counter(tk); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(29,186,155,.14); color: #0f7d68; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.bl-faq { margin: var(--space-7) 0; }
.bl-faq h2, .bl-related h2, .bl-latest h2 { font-size: var(--subtitle-04); margin: 0 0 var(--space-5); }
.bl-related ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-grey-light); }
.bl-related li { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-grey-light); }
.bl-related__k { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); min-width: 120px; }
.bl-related a { color: var(--color-midnight-blue); font-weight: 600; text-decoration: none; font-size: 15px; }
.bl-related a:hover { color: var(--color-deep-sea); }
.bl-author { display: flex; gap: var(--space-5); align-items: flex-start; padding: var(--space-6); border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); background: var(--color-anti-flash); margin: var(--space-6) 0 var(--space-8); }
.bl-author h2 { font-size: 20px; margin: 0; }
.bl-author h2 a { color: inherit; text-decoration: none; }
.bl-author__role { font-size: 13px; color: var(--color-text-secondary); margin: 2px 0 var(--space-3); }
.bl-author p { font-size: 14.5px; color: var(--color-text-secondary); margin: 0; }
.bl-latest__l { border-bottom: 1px solid var(--color-grey-light); }
.bl-latest .bl-side-art__v { width: 120px; }
.bl-latest .bl-side-art__t { font-size: 16px; }
.bl-side-art__k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
/* right rail */
.bl-rail--r { display: flex; flex-direction: column; gap: var(--space-5); }
.bl-side-cta { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-midnight-blue); color: #fff; }
.bl-side-cta__logo { display: block; font-weight: 900; letter-spacing: .12em; font-size: 14px; color: var(--color-mint-bright); margin-bottom: var(--space-2); }
.bv__bids { position: absolute; right: 6%; top: 8%; display: flex; flex-direction: column; gap: 5px; width: 40%; z-index: 1; }
.bv--marketplace .bv__core { max-width: 44%; }
.bv__bids i { display: flex; justify-content: space-between; font-style: normal; font-size: 11px; padding: 5px 10px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.bv__bids i.is-win { background: rgba(29,186,155,.18); border-color: var(--color-mint); }
.bv__bids b { color: var(--color-mint-bright); }
.bl-side-cta p { font-size: 14px; color: rgba(255,255,255,.82); margin: 0 0 var(--space-4); }
.bl-side-box { padding: var(--space-5); border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); background: var(--color-white); }
.bl-side-box h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.bl-side-art { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-grey-light); text-decoration: none; color: inherit; }
.bl-side-art:hover .bl-side-art__t { color: var(--color-deep-sea); }
.bl-side-art__v { flex: none; width: 72px; aspect-ratio: 16/10; border-radius: 8px; overflow: hidden; position: relative; background: var(--color-midnight-blue); }
.bl-side-art__v .bv { inset: auto; width: 250%; height: 250%; left: -75%; top: -75%; transform: scale(.4); transform-origin: center; }
.bl-side-art__v .bv__core { display: none; }
.bl-latest .bl-side-art__v .bv__core { display: block; left: 8%; bottom: 10%; }
.bl-side-art__w { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-side-art__t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.bl-side-art__m { font-size: 12px; color: var(--color-text-secondary); }
.bl-side-more { display: inline-block; margin-top: var(--space-3); font-size: 13px; font-weight: 600; color: var(--color-deep-sea); text-decoration: none; }
/* ---------- tag / category ---------- */
.bl-tagintro { padding: var(--space-5) var(--space-6); border-left: 3px solid var(--color-mint); background: var(--color-anti-flash); border-radius: 0 var(--radius-md) var(--radius-md) 0; margin-bottom: var(--space-7); max-width: 900px; }
.bl-tagintro p { font-size: 15.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.bl-tagintro p:last-child { margin-bottom: 0; }
.bl-tagintro a { color: var(--color-deep-sea); font-weight: 600; }
/* ---------- author ---------- */
.bl-profile { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-6); border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); background: var(--color-white); box-shadow: var(--shadow-card); margin-bottom: var(--space-5); }
.bl-photo { flex: none; width: 120px; height: 120px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #020035, #02066F); color: var(--color-mint-bright); font-weight: 900; font-size: 34px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; }
.bl-profile .bl-h1 { margin: 4px 0 var(--space-3); }
.bl-bio { color: var(--color-text-secondary); font-size: 15.5px; max-width: 70ch; margin: 0; }
.bl-facts { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
@media (min-width: 720px) { .bl-facts { grid-template-columns: 1fr 1fr; } }
.bl-fact { padding: var(--space-5); border: 1px solid var(--color-grey-light); border-radius: var(--radius-lg); background: var(--color-anti-flash); }
.bl-fact h4 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
/* ---------- pillar visuals ---------- */
.bv { position: absolute; inset: 0; background: linear-gradient(135deg, #020035 0%, #0a1550 55%, #02066F 100%); color: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bv__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(29,186,155,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(29,186,155,.10) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%); }
.bv__core { position: absolute; left: 6%; bottom: 8%; padding: 8px 12px; border-radius: 10px; background: rgba(2,0,53,.75); border: 1px solid rgba(29,186,155,.35); backdrop-filter: blur(4px); }
.bv__core b { display: block; font-size: 13px; letter-spacing: .02em; }
.bv__core span { display: block; font-size: 11px; color: var(--color-mint-bright); margin-top: 2px; }
.bv__row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 80%; z-index: 1; }
.bv__chip { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgba(29,186,155,.16); border: 1px solid rgba(29,186,155,.5); color: #fff; }
.bv__shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 70%; z-index: 1; }
.bv__shelf i { aspect-ratio: 4/3; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); position: relative; }
.bv__shelf i.is-ad { background: rgba(29,186,155,.18); border-color: var(--color-mint); }
.bv__shelf i b { position: absolute; top: 6px; left: 6px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-mint-bright); font-style: normal; }
.bv__venn { position: relative; width: 60%; height: 55%; z-index: 1; }
.bv__venn i { position: absolute; top: 0; width: 55%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(29,186,155,.6); background: rgba(29,186,155,.08); font-style: normal; font-size: 12px; display: flex; align-items: center; padding: 0 12%; }
.bv__venn i:first-child { left: 0; } .bv__venn i:nth-child(2) { right: 0; justify-content: flex-end; }
.bv__venn em { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-style: normal; font-weight: 700; font-size: 12px; color: var(--color-mint-bright); }
.bv__tv { width: 34%; aspect-ratio: 16/9; border-radius: 8px; border: 2px solid rgba(255,255,255,.35); background: rgba(29,186,155,.14); position: relative; z-index: 1; }
.bv__tv span { position: absolute; inset: 18%; border-radius: 4px; background: rgba(29,186,155,.35); }
.bv__link { width: 12%; height: 2px; background: linear-gradient(90deg, var(--color-mint), rgba(29,186,155,.2)); margin: 0 3%; z-index: 1; }
.bv__phone { width: 9%; aspect-ratio: 9/18; border-radius: 10px; border: 2px solid rgba(255,255,255,.35); background: rgba(29,186,155,.14); position: relative; z-index: 1; }
.bv__phone span { position: absolute; inset: 14% 12%; border-radius: 4px; background: rgba(29,186,155,.35); }

/* Mobile: reader gets to the copy fast. Highlights carries the summary; the
   ToC hides; the right rail drops below the article. */
@media (max-width: 899px) {
  .bl-rail--l { display: none; }
  .bl-hero { aspect-ratio: 16 / 9; }
  .bl-profile { flex-direction: column; }
  .bl-photo { width: 88px; height: 88px; font-size: 26px; }
  .bl-crumbs span { max-width: 50vw; }
  .bl-related__k { min-width: 0; }
  .bl-related li { flex-direction: column; gap: 4px; }
}