/* ==========================================================================
   Halo Ai — marketing site styles
   ==========================================================================

   ---- BREAKPOINT SYSTEM (read before adding any @media) ----------------------
   CSS media queries can't read custom properties, so these live here as the
   single documented contract. Use ONLY these values in @media rules so the whole
   site  collapses at the same widths.

     Desktop         >= 1041px   full layout
     Tablet-land     901–1040px  wide; nav still full
     Tablet-port     <= 900px    nav collapses to hamburger; page gutters tighten
     Mobile          <= 760px    multi-col grids drop toward 1–2 cols
     Small-mobile    <= 480px    single column; CTA/gutter shrink guards
     Tiny            <= 400px    last-ditch shrink (centered CTA padding)

   Orientation guard (NOT width — height):
     Phone-landscape (max-width:900px) and (orientation:landscape) and (max-height:520px)
       → a phone held sideways: viewport is wide but SHORT. Compress vertical
         padding and cap the mobile menu so it scrolls instead of overflowing.

   Rule of thumb: pick the largest tier at which a component still looks right,
   and only add a smaller tier when it visibly breaks. Don't invent new numbers.
   ---------------------------------------------------------------------------- */

:root {
  --brand-green: #66db82;
  --brand-green-strong: #0a7d47;
  --brand-green-soft: #8fe8a4;
  --brand-navy: #063849;
  --brand-ink: #041f28;

  --font-display: "Barlow", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --focus-ring: 0 0 0 3px rgba(102, 219, 130, 0.5);

  /* ---- Shared motion system ----
     One easing curve + one duration scale for any "reveal/settle" interaction
     (expand/collapse panels, staggered lists, value transitions) — reuse
     these tokens instead of inventing new numbers per component. The curve
     is a smooth decelerate (fast start, gentle settle) — reads as physical
     without needing a JS spring library. First used by the Intrinsic Score
     card's open/close (css ~L960, js renderScore()); reuse for any future
     expand/collapse or staggered-reveal UI. */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur-base: 600ms;
  --dur-slow: 900ms;
}

.theme-dark {
  --bg: #041f28;
  --bg-elevated: #063849;
  --surface: rgba(4, 24, 31, 0.55);
  --surface-2: rgba(4, 24, 31, 0.42);
  --surface-solid: #0a2b37;
  --glass-blur: 7px;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-muted: #a9c0c9;
  --text-subtle: #7793a0;
  --action: #66db82;
  --action-hover: #7fe698;
  --on-action: #063849;
  --accent: #66db82;
  --error: #ff7b80;
  /* risk banding (Third-Party Snapshot score/bars): green >=80 · yellow 60-79 · red <60 */
  --risk-green: #66db82;
  --risk-yellow: #f0c86e;
  --risk-red: #ff7b80;
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
  --chip-success-bg: rgba(102, 219, 130, 0.16);
  --glass-tint: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  --logo-bar: #ffffff;
  --mesh-node: rgba(143, 232, 164, 0.5);
  --mesh-edge: rgba(102, 219, 130, 0.28);
  --depth-field: linear-gradient(180deg, #0a4256 0%, #063849 26%, #052c39 58%, #041f28 82%, #03161d 100%);
  --depth-glow: radial-gradient(ellipse 120% 48% at 50% 42%, rgba(102, 219, 130, 0.12), transparent 64%);
  --mesh-show: 1; /* mesh renders in dark only */
  --nav-scrolled-bg: rgba(4, 20, 25, 0.82);
  --menu-bg: rgba(4, 20, 25, 0.96);
  --foot-bg: linear-gradient(180deg, rgba(3, 22, 29, 0.55), rgba(3, 22, 29, 0.92) 45%);

  /* ---- Panel palette (dark) — 5 hues × soft / bold / gradient. See design-system §. ---- */
  --tint-teal-soft: rgba(102, 219, 130, 0.10);
  --tint-teal-bold: rgba(102, 219, 130, 0.22);
  --tint-teal-grad: linear-gradient(155deg, rgba(102, 219, 130, 0.22), rgba(10, 125, 71, 0.10));
  --tint-teal-ink: #8fe8a4;
  --tint-gold-soft: rgba(240, 200, 110, 0.10);
  --tint-gold-bold: rgba(240, 200, 110, 0.22);
  --tint-gold-grad: linear-gradient(155deg, rgba(240, 200, 110, 0.24), rgba(180, 130, 40, 0.10));
  --tint-gold-ink: #f0c86e;
  --tint-coral-soft: rgba(255, 123, 128, 0.10);
  --tint-coral-bold: rgba(255, 123, 128, 0.22);
  --tint-coral-grad: linear-gradient(155deg, rgba(255, 123, 128, 0.24), rgba(150, 50, 60, 0.10));
  --tint-coral-ink: #ff9ca0;
  --tint-violet-soft: rgba(150, 130, 240, 0.10);
  --tint-violet-bold: rgba(150, 130, 240, 0.22);
  --tint-violet-grad: linear-gradient(155deg, rgba(150, 130, 240, 0.24), rgba(70, 55, 150, 0.10));
  --tint-violet-ink: #b3a5f5;
  --tint-slate-soft: rgba(169, 192, 201, 0.08);
  --tint-slate-bold: rgba(169, 192, 201, 0.18);
  --tint-slate-grad: linear-gradient(155deg, rgba(169, 192, 201, 0.18), rgba(119, 147, 160, 0.06));
  --tint-slate-ink: #c7d6dc;
}

/* Frosted tinted-teal light theme. Same green family, darkened to
   #0a7d47 for contrast on light surfaces. Frosted-glass surfaces over
   a soft teal wash. No mesh (--mesh-show:0); a faint static glow instead. */
.theme-light {
  --bg: #e8f2f1;
  --bg-elevated: #ffffff;
  --surface: rgba(255, 255, 255, 0.66);
  --surface-2: rgba(255, 255, 255, 0.5);
  --surface-solid: #ffffff;
  --glass-blur: 14px;
  --border: rgba(6, 56, 73, 0.12);
  --border-strong: rgba(6, 56, 73, 0.22);
  --text: #063849;
  --text-muted: #3f5d64;
  --text-subtle: #6a8891;
  --action: #0a7d47;
  --action-hover: #0c8f51;
  --on-action: #ffffff;
  --accent: #0a7d47;
  --error: #d64550;
  /* risk banding, darkened for contrast on the light surface */
  --risk-green: #0a7d47;
  --risk-yellow: #a5731a;
  --risk-red: #d64550;
  --shadow-md: 0 8px 28px rgba(6, 56, 73, 0.10);
  --chip-success-bg: rgba(10, 125, 71, 0.10);
  --glass-tint: linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.18));
  --logo-bar: #063849;
  --mesh-node: rgba(10, 125, 71, 0.35);
  --mesh-edge: rgba(10, 125, 71, 0.18);
  --depth-field: linear-gradient(180deg, #eef6f4 0%, #e8f2f1 40%, #dcecea 100%);
  --depth-glow: radial-gradient(ellipse 120% 52% at 50% 0%, rgba(102, 219, 130, 0.16), transparent 60%);
  --mesh-show: 0;
  --nav-scrolled-bg: rgba(232, 242, 241, 0.82);
  --menu-bg: rgba(238, 246, 244, 0.97);
  --foot-bg: linear-gradient(180deg, rgba(220, 236, 234, 0.72), rgba(210, 230, 227, 0.92) 45%);

  /* ---- Panel palette (light) — same 5 hues, tuned for a light bg ---- */
  --tint-teal-soft: rgba(10, 125, 71, 0.08);
  --tint-teal-bold: rgba(10, 125, 71, 0.16);
  --tint-teal-grad: linear-gradient(155deg, rgba(102, 219, 130, 0.28), rgba(10, 125, 71, 0.10));
  --tint-teal-ink: #0a7d47;
  --tint-gold-soft: rgba(176, 130, 40, 0.09);
  --tint-gold-bold: rgba(176, 130, 40, 0.18);
  --tint-gold-grad: linear-gradient(155deg, rgba(240, 200, 110, 0.36), rgba(176, 130, 40, 0.12));
  --tint-gold-ink: #8a6410;
  --tint-coral-soft: rgba(200, 60, 70, 0.08);
  --tint-coral-bold: rgba(200, 60, 70, 0.16);
  --tint-coral-grad: linear-gradient(155deg, rgba(255, 150, 155, 0.34), rgba(200, 60, 70, 0.12));
  --tint-coral-ink: #b03038;
  --tint-violet-soft: rgba(90, 70, 190, 0.08);
  --tint-violet-bold: rgba(90, 70, 190, 0.16);
  --tint-violet-grad: linear-gradient(155deg, rgba(150, 130, 240, 0.30), rgba(90, 70, 190, 0.12));
  --tint-violet-ink: #4b3aa0;
  --tint-slate-soft: rgba(63, 93, 100, 0.07);
  --tint-slate-bold: rgba(63, 93, 100, 0.14);
  --tint-slate-grad: linear-gradient(155deg, rgba(119, 147, 160, 0.22), rgba(63, 93, 100, 0.08));
  --tint-slate-ink: #3f5d64;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---- Depth field (fixed full-page background) ---- */
.depth {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.depth-field {
  position: absolute;
  inset: 0;
  background: var(--depth-field);
}
.depth-glow {
  position: absolute;
  inset: 0;
  background: var(--depth-glow);
}
.mesh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.theme-light .mesh { display: none; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 900px) {
  .wrap { padding: 0 28px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 20px; }
}

/* ---- Nav ---- */
/* Sticky lives on the MOUNT point (#site-nav), a direct child of <body>, so it
   can stick across the whole page. chrome.js injects <header class="snav"> INSIDE
   this mount; if sticky were on .snav its parent would be this short wrapper and
   it would scroll away immediately. Keep sticky here, glass on .snav. */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Scroll-linked: --nav-scroll (0→1, set by main.js over ~140px) ramps the
   glass in gradually — background hue fades up, blur deepens, border appears —
   instead of snapping. Content passing under the glass blurs progressively too. */
.snav {
  display: block;
  --nav-scroll: 0;
  /* Baseline glass so the nav ALWAYS reads as a glass panel — both themes, every
     screen size/orientation, even at the top or on short pages that don't scroll.
     The --nav-scroll ramp (0->1 over ~140px, set by main.js) deepens it further:
     hue and blur build on top of this floor instead of starting from nothing. */
  background: color-mix(in srgb, var(--nav-scrolled-bg) calc((0.62 + var(--nav-scroll) * 0.38) * 100%), transparent);
  backdrop-filter: blur(calc(7px + var(--nav-scroll) * 5px)) saturate(calc(1.15 + var(--nav-scroll) * 0.25));
  -webkit-backdrop-filter: blur(calc(7px + var(--nav-scroll) * 5px)) saturate(calc(1.15 + var(--nav-scroll) * 0.25));
  border-bottom: 1px solid color-mix(in srgb, var(--border) calc((0.5 + var(--nav-scroll) * 0.5) * 100%), transparent);
  transition: background-color .12s linear, border-color .12s linear;
}
.snav .inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 40px;
  display: flex;
  align-items: center;
  gap: 18px;
}
/* Tablet-port (<=900): nav gutter tightens (links still shown until 760) */
@media (max-width: 900px) {
  .snav .inner { padding: 14px 28px; }
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
}
.logo .mark { width: 24px; height: 24px; color: var(--logo-bar); flex-shrink: 0; }
.logo .mark svg { width: 100%; height: 100%; }

.snav .links { display: flex; gap: 20px; margin-left: auto; }
.snav .links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.snav .links a:hover { color: var(--accent); }
/* Active menu item: accent color + a "connector" mark below — two dots joined
   by a line, drawn with a gradient on a single pseudo-element. Uses --accent so
   it themes automatically. Marks which section you're in. */
.snav .links a.current { color: var(--accent); position: relative; }
.snav .links a.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  width: 22px;
  height: 5px;
  /* line in the middle */
  background:
    linear-gradient(var(--accent), var(--accent)) center/100% 1.5px no-repeat,
    /* two dots at the ends */
    radial-gradient(circle 2.5px at 2.5px 50%, var(--accent) 99%, transparent) left/50% 100% no-repeat,
    radial-gradient(circle 2.5px at calc(100% - 2.5px) 50%, var(--accent) 99%, transparent) right/50% 100% no-repeat;
}

.nav-cta { margin-left: 16px; }

/* theme toggle (light / dark) */
.theme-toggle {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); color: var(--text-muted); cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: none; }
.theme-dark .theme-toggle .i-sun { display: block; }
.theme-light .theme-toggle .i-moon { display: block; }

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  margin-left: 8px;
}
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  margin: 0 auto;
  transition: transform .25s ease;
}
/* two bars cross into an × (each bar is 4px from center: 2px gap/2 + 2px half-height) */
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px 28px 20px;
  background: var(--menu-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: 0; margin-top: 8px; }
/* Active item in the mobile/tablet menu: accent text + a left accent bar + tint. */
.mobile-menu a.current { color: var(--accent); padding-left: 14px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* the CTA button in the menu keeps its button colors, not the muted link color */
.mobile-menu a.btn-primary { color: var(--on-action); justify-content: center; text-transform: none; }
.mobile-menu.open { display: flex; }

/* Mobile (<=760): nav collapses to hamburger. Three zones — logo left ·
   Get a Demo centered · toggle + hamburger right. (Was 820; aligned to 760.) */
@media (max-width: 760px) {
  .snav .links { display: none; }
  .hamburger { display: flex; }
  .snav .nav-cta { margin-left: auto; margin-right: auto; }
  .snav .theme-toggle { margin-left: 0; }
  .snav .hamburger { margin-left: 8px; }
}
/* Tiny (<=400): let the centered CTA shrink gracefully */
@media (max-width: 400px) {
  .snav .nav-cta { padding-left: 12px; padding-right: 12px; }
}

/* Phone-landscape: wide but SHORT viewport (phone held sideways). Cap the open
   mobile menu so it scrolls inside the viewport instead of overflowing past it. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .mobile-menu.open { max-height: calc(100vh - 68px); overflow-y: auto; }
  .mobile-menu a { padding: 9px 4px; min-height: 40px; }
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: var(--radius-md);
  padding: 11px 22px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 9px 16px; min-height: 38px; font-size: 12px; }

/* Third-Party Snapshot nav CTA — special/new treatment (gold outline, distinct from
   the green primary "Get a Demo"). The .cta-new flags it as a new offering. */
.btn-snapshot { background: color-mix(in srgb, var(--tint-gold-ink) 12%, transparent); color: var(--tint-gold-ink); border-color: color-mix(in srgb, var(--tint-gold-ink) 45%, transparent); }
.btn-snapshot:hover { background: color-mix(in srgb, var(--tint-gold-ink) 20%, transparent); border-color: var(--tint-gold-ink); }
.cta-new { font-family: var(--font-display); font-weight: 700; font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; background: var(--tint-gold-ink); color: var(--bg); border-radius: var(--radius-full); padding: 2px 6px; margin-left: 6px; vertical-align: middle; }
.nav-cta-snapshot { margin-left: 16px; }
/* On tighter desktop widths the second CTA crowds the nav — drop the snapshot
   CTA before the links collapse; it stays reachable in the mobile menu + footer. */
@media (max-width: 1040px) { .nav-cta-snapshot { display: none; } }

/* ---- Hero ---- */
.hero {
  padding: 72px 0 0;
  position: relative;
}
/* (was: .hero .wrap > * { max-width: 680px; } — capped the whole hero-split
   grid to 680px out of .wrap's ~1000px, well under every section below it.
   That's what made the hero read narrower than the rest of the page and
   forced heavy wrapping in both the copy and the score card. Removed. */
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 18px;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
/* ---- Hero pillars — "Autonomous / Connected / Intelligent". Each row's
   label is fixed; the claim beside it rotates through that pillar's 3 Halo
   Effect Matrix cell titles on a vertical dial (renderHeroPillars(), js/
   main.js) — a "departure board" of the 9 matrix claims instead of one
   static line. Home-only (see third-party-snapshot for the older .tagline-style
   single paragraph, untouched). ---- */
.hero-pillars { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 22px; font-size: 17px; }
/* min-width:0 breaks the min-content propagation chain — without it, the
   .hpd-item nowrap text's full unwrapped width bubbles up through this flex
   item (li is a flex item of the column-flex ul above it) and forces the
   whole hero column wider than the viewport, even though the dial itself
   visually clips with overflow:hidden. Classic nested-flexbox gotcha. */
.hero-pillars li { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.hero-pillars strong {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
/* One-line window; the claim wipes in left-to-right via clip-path (a
   "keyboard appear" reveal) rather than sliding up from a stacked track.
   Only one row wipes at a time — renderHeroPillars() sequences Autonomous
   → Connected → Intelligent → repeat, each pausing to read before the
   next row's turn. */
.hero-pillar-dial { display: block; flex: 1; min-width: 0; height: 1.4em; overflow: hidden; }
.hpd-text {
  display: block; height: 1.4em; line-height: 1.4em;
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease-emphasized);
}
body.reduced .hpd-text { transition: none !important; clip-path: inset(0 0 0 0) !important; }

/* Screen-reader-only utility — visually hidden, still in the a11y tree.
   The dial itself is aria-hidden (it's decorative motion over real text);
   this carries the pillar's full set of claims as one static sentence so
   assistive tech gets the content without the rotation. Reuse for any
   future auto-rotating/ticker component. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.metrics { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 26px 0 0; }
.metrics span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.metrics span em { color: var(--text-muted); font-style: normal; font-weight: 400; font-family: var(--font-body); }

/* ---- Hero metrics — big numbers, small labels, one row of 4 (not a 2x2
   grid) so the CTAs below have room. Fluid sizing keeps each number on one
   line down to small phones instead of hard breakpoint swaps. ---- */
.hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 22px 0 26px; }
.hero-metrics .hm-item b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(16px, 3.4vw, 22px); line-height: 1; letter-spacing: -0.01em; color: var(--accent);
  white-space: nowrap;
}
.hero-metrics .hm-item span { display: block; font-size: clamp(10px, 1.8vw, 12px); line-height: 1.3; color: var(--text-muted); margin-top: 4px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---- Customer logo rail — single-row continuous marquee, right-to-left ----
   Plain normal-flow section (no sticky-pin spacer — that technique left a
   huge dead-scroll gap before the quote below it; see HANDOFF changelog).
   Doubled track content + translateX(-50%) is the same seamless-loop
   technique already used by .qtrack (testimonial carousel) elsewhere on the site.
   Cap at 7 logos in HOME_LOGOS (js/main.js) — more than that and the row
   reads as clutter rather than "the world's biggest companies trust us." */
.logo-rail { padding: 40px 0 8px; }
/* Inline variant — used inside a .section .wrap (Sources) rather than as its
   own full-bleed section like the hero rail, so no big top padding and the
   label is left-aligned to match the section's other headings. */
.logo-rail.sources-logo-rail { padding: 28px 0 4px; }
.logo-rail.sources-logo-rail .logo-rail-label { text-align: left; }
.logo-rail-label {
  text-align: center;
  margin-bottom: 20px;
}
.logo-rail-row {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-rail-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 72px;
  animation: logoRailScroll 38s linear infinite;
}
.logo-rail:hover .logo-rail-track,
.logo-rail:focus-within .logo-rail-track { animation-play-state: paused; }
@keyframes logoRailScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 34px;
}
.logo-mark img {
  height: 100%;
  width: auto;
  max-width: 152px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: opacity .2s ease, filter .2s ease;
}
.logo-mark:hover img { filter: none; opacity: 1; }
.logo-mark .lm-light { display: none; }
.theme-light .logo-mark .lm-dark { display: none; }
.theme-light .logo-mark .lm-light { display: block; }
/* Single-color-only source art (no per-theme pair yet — see the `ink` field
   in HOME_LOGOS, js/main.js): invert so the mark stays legible against the
   current theme instead of vanishing into it (e.g. all-black art on our
   dark theme). Drop the corresponding rule once a real light/dark pair
   replaces that logo's single file. */
.theme-dark .logo-mark img.ink-dark { filter: invert(1) grayscale(1); }
.theme-dark .logo-mark:hover img.ink-dark { filter: invert(1); }
.theme-light .logo-mark img.ink-light { filter: invert(1) grayscale(1); }
.theme-light .logo-mark:hover img.ink-light { filter: invert(1); }
/* Text fallback for any logo entry with no artwork yet */
.logo-mark span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-subtle);
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity .2s ease, color .2s ease;
}
.logo-mark:hover span { opacity: 1; color: var(--text); }
body.reduced .logo-rail-track { animation: none !important; }
body.reduced .logo-rail-row { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---- Rotating quote — elevated card treatment (large decorative mark,
   glass panel) instead of bare centered text. Reuses the .glass surface
   language from cards/ctaband elsewhere on the site. ---- */
.quote-rotator { padding: 56px 0 72px; }
.rq-card {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 44px 56px 44px;
  border-radius: var(--radius-2xl);
  text-align: center;
  overflow: hidden;
}
.rq-role {
  position: absolute;
  top: 22px;
  left: 28px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.rq-role:empty { display: none; }
.rq-mark {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 88px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  margin-bottom: -14px;
}
.rq-text {
  margin: 0 auto;
  max-width: 44ch;
  min-height: 4.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 2.7vw, 28px);
  line-height: 1.5;
  color: var(--text);
  transition: opacity .4s ease;
}
.rq-text[data-fading="true"] { opacity: 0; }
/* Buyer-facing key phrase highlight — same treatment as the testimonial
   carousel's .qcard blockquote mark, reused for consistency. */
.rq-text mark {
  background: var(--chip-success-bg);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.rq-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.rq-dots button {
  all: unset; cursor: pointer;
  width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--border-strong);
  transition: background .2s ease, transform .2s ease;
}
.rq-dots button[aria-selected="true"] { background: var(--accent); transform: scale(1.25); }
.rq-dots button:hover { background: var(--accent); }
@media (max-width: 640px) { .rq-card { padding: 40px 24px 34px; } }

/* ---- Ocean-depth scroll gradient (home) ----
   Replaces the old "What's beneath the surface" waterline divider: rather
   than a single marked threshold, the page itself gradually darkens/
   saturates as you scroll past that point — like light falling off the
   further you dive. Percentage stops on <main> so it scales with actual
   page length regardless of content. color-mix keeps it theme-correct
   (mixes toward black from whatever --bg the active theme is using). */
body[data-page="home"] main {
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 16%,
    color-mix(in srgb, var(--bg) 92%, black 8%) 40%,
    color-mix(in srgb, var(--bg) 80%, black 20%) 70%,
    color-mix(in srgb, var(--bg) 68%, black 32%) 100%
  );
}

/* ---- Sections ---- */
.section { padding: 56px 0; border-top: 1px solid var(--border); }
.section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--text);
  margin-bottom: 12px;
  max-width: 32ch;
}
.section p.lead { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 32px; max-width: 48ch; }

.glass {
  background: var(--surface);
  backdrop-filter: blur(var(--glass-blur));
  background-image: var(--glass-tint);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* ---- Stats ---- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } }
.stat { border-radius: var(--radius-lg); padding: 22px; }
.stat .val { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; color: var(--accent); margin-bottom: 8px; letter-spacing: -0.01em; }
.stat .lbl { font-size: 13px; line-height: 1.45; color: var(--text-muted); }

/* ---- "Blindspots we close" alert stats (Sources) ----
   Scoped to .stats-alert, not .stat generally — every other .stat usage
   sitewide (home Sources teaser, Sources page's own verified-sources row)
   keeps the normal accent-green treatment. Red/gold ink tokens are already
   theme-tuned (see :root palette above), so this is contrast-safe in both
   themes without new colors. Each card gets one of 3 distinct trend
   glyphs so the row doesn't read as four identical badges. */
.stats-alert .stat { position: relative; overflow: hidden; }
.stats-alert .stat:nth-child(odd) .val { color: var(--tint-coral-ink); }
.stats-alert .stat:nth-child(even) .val { color: var(--tint-gold-ink); }
.stat-trend { position: absolute; pointer-events: none; color: inherit; }
.stats-alert .stat:nth-child(odd) .stat-trend { color: var(--tint-coral-ink); }
.stats-alert .stat:nth-child(even) .stat-trend { color: var(--tint-gold-ink); }
.stat-trend-arrow { top: 18px; right: 18px; width: 26px; height: 26px; opacity: 0.8; }
.stat-trend-ring { top: 16px; right: 16px; width: 32px; height: 32px; }
.stat-trend-bars { left: 0; right: 0; bottom: 0; width: 100%; height: 26px; opacity: 0.16; }
.stat-trend-bars rect { fill: currentColor; }
.stats-alert .stat:has(.stat-trend-arrow), .stats-alert .stat:has(.stat-trend-ring) { padding-right: 52px; }

/* ---- Platform cards ---- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } }
.card { border-radius: var(--radius-xl); padding: 24px; }
.card .chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--chip-success-bg);
  color: var(--accent);
  padding: 5px 11px;
  border-radius: var(--radius-full);
  margin-bottom: 12px;
}
.card h3 { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; }
.card p { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* ---- Approach mini cards ---- */
.mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .mini { grid-template-columns: 1fr; } }
.mini .m { border-radius: var(--radius-lg); padding: 18px; }
.mini .m .ic { width: 18px; height: 18px; color: var(--accent); margin-bottom: 10px; display: block; }
.mini .m .ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mini .m h3 { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.mini .m p { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* ---- Voices / testimonials ---- */
.voices { padding: 56px 0; border-top: 1px solid var(--border); overflow: hidden; }
.voices .head { max-width: 1080px; margin: 0 auto 28px; padding: 0 40px; }
@media (max-width: 900px) { .voices .head { padding: 0 28px; } }
.voices .head h2 { max-width: 40ch; }
.voices .head p.lead { max-width: 52ch; }
.qtrack-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.qtrack { display: flex; gap: 16px; width: max-content; padding: 4px 40px; animation: qScroll 68s linear infinite; }
.qtrack-wrap:hover .qtrack,
.qtrack-wrap:focus-within .qtrack { animation-play-state: paused; }
@keyframes qScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.qcard { width: 340px; flex-shrink: 0; border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; }
@media (max-width: 560px) { .qcard { width: 280px; } }
.qcard .mark { width: 22px; height: 22px; color: var(--accent); opacity: 0.9; margin-bottom: 12px; }
.qcard blockquote { font-family: var(--font-body); font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 16px; flex: 1; }
.qcard blockquote mark {
  background: var(--chip-success-bg);
  color: var(--accent);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.qcard .who { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.qcard .who .badge {
  width: 34px; height: 34px; border-radius: var(--radius-md);
  background: var(--chip-success-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qcard .who .badge svg { width: 17px; height: 17px; }
.qcard .who .org { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--text); line-height: 1.25; }
.qcard .who .topic { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin-top: 5px; }

/* ---- Team — editorial cards (elevated from the old small-avatar-circle
   layout): a full portrait photo at the top, name/role/bio/LinkedIn below.
   Rendered by the "Team grid" block in js/main.js. ---- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } /* tablet-port: 3→2 */
@media (max-width: 640px) { .team { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } } /* mobile: →1, capped so a lone card doesn't stretch full-bleed */
.member { border-radius: var(--radius-2xl); overflow: hidden; display: flex; flex-direction: column; }
.member-photo {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--tint-teal-grad, var(--surface-2));
}
.member-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Soft fade at the bottom edge so the photo blends into the card body
   instead of a hard crop line — the "elevated" editorial-card feel. */
.member-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--surface) 85%, transparent) 100%);
  pointer-events: none;
}
/* Fallback (image failed to load): large initials over the accent gradient,
   image itself hidden. */
.member-photo.is-fallback img { display: none; }
.member-photo.is-fallback::before {
  content: attr(data-initials);
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 8vw, 64px);
  color: var(--tint-teal-ink); letter-spacing: 0.02em;
}
.member-body { padding: 18px 22px 22px; }
.member .nm { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.member .rl { font-size: 12px; color: var(--accent); margin: 3px 0 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.member .bio { font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.member .member-li {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.02em;
  color: var(--text-muted); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  padding: 8px 15px; transition: color .15s ease, border-color .15s ease;
}
.member .member-li:hover { color: var(--accent); border-color: var(--accent); }
.member .member-li-ic { display: inline-flex; width: 14px; height: 14px; }
.member .member-li-ic svg { width: 100%; height: 100%; }

/* ---- CTA band ---- */
.ctaband { border-radius: var(--radius-2xl); padding: 48px 36px; text-align: center; }
.ctaband > * { max-width: 52ch; margin-left: auto; margin-right: auto; }
.ctaband h2 { margin-bottom: 14px; max-width: 22ch; }
.ctaband p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin-bottom: 26px; max-width: 46ch; }

/* ============================================================
   PANEL PALETTE — 5 hues × 3 treatments, theme-adaptive.
   Add a hue class + a treatment class to any panel:
     <div class="card panel-tint tint-gold soft">…</div>
   Hues: tint-teal · tint-gold · tint-coral · tint-violet · tint-slate
   Treatments: soft (quiet default) · bold (feature callout) · grad (hero/feature)
   No accent-edge style by design. Chips/labels inside pick up --panel-ink.
   ============================================================ */
.panel-tint { border: 1px solid var(--border); border-radius: var(--radius-xl); }
.panel-tint.tint-teal   { --panel-soft: var(--tint-teal-soft);   --panel-bold: var(--tint-teal-bold);   --panel-grad: var(--tint-teal-grad);   --panel-ink: var(--tint-teal-ink); }
.panel-tint.tint-gold   { --panel-soft: var(--tint-gold-soft);   --panel-bold: var(--tint-gold-bold);   --panel-grad: var(--tint-gold-grad);   --panel-ink: var(--tint-gold-ink); }
.panel-tint.tint-coral  { --panel-soft: var(--tint-coral-soft);  --panel-bold: var(--tint-coral-bold);  --panel-grad: var(--tint-coral-grad);  --panel-ink: var(--tint-coral-ink); }
.panel-tint.tint-violet { --panel-soft: var(--tint-violet-soft); --panel-bold: var(--tint-violet-bold); --panel-grad: var(--tint-violet-grad); --panel-ink: var(--tint-violet-ink); }
.panel-tint.tint-slate  { --panel-soft: var(--tint-slate-soft);  --panel-bold: var(--tint-slate-bold);  --panel-grad: var(--tint-slate-grad);  --panel-ink: var(--tint-slate-ink); }
.panel-tint.soft { background: var(--panel-soft); }
.panel-tint.bold { background: var(--panel-bold); }
.panel-tint.grad { background: var(--panel-grad); }
/* accent elements inside a tinted panel adopt the hue's ink */
.panel-tint .chip { background: color-mix(in srgb, var(--panel-ink) 16%, transparent); color: var(--panel-ink); }
.panel-tint .eyebrow, .panel-tint .topic, .panel-tint blockquote mark { color: var(--panel-ink); }
.panel-tint blockquote mark { background: color-mix(in srgb, var(--panel-ink) 16%, transparent); }

/* ---- Learn-more ramp link (home → deep pages) ---- */
.learn-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); text-decoration: none; transition: gap .18s ease, opacity .18s ease; }
.learn-more:hover { gap: 12px; opacity: 0.85; }
/* ---- Media slot — on-brand SVG placeholder until real photography drops in ---- */
.media { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface-solid); aspect-ratio: 16 / 10; }
.media img, .media svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media .media-tag { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-subtle); background: color-mix(in srgb, var(--bg) 70%, transparent); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 5px 12px; backdrop-filter: blur(4px); }
.media-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px) { .media-split { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Metric-triad band (big numbers, count-up) ---- */
.metric-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; border-radius: var(--radius-2xl); padding: 36px; }
@media (max-width: 640px) { .metric-band { grid-template-columns: 1fr; gap: 24px; text-align: center; } }
.metric-band .metric .mv { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6vw, 56px); line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
.metric-band .metric .ml { font-size: 14px; line-height: 1.4; color: var(--text-muted); margin-top: 8px; max-width: 26ch; }
@media (max-width: 640px) { .metric-band .metric .ml { margin-left: auto; margin-right: auto; } }

/* ---- Award band (Spend Matters Future 5) ---- */
.award { border-radius: var(--radius-2xl); padding: 32px 36px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.award-badge { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px 18px; white-space: nowrap; flex-shrink: 0; }
.award-body { flex: 1; min-width: 260px; }
.award-body h2 { margin-bottom: 10px; }
.award-body p { font-size: 14px; line-height: 1.55; color: var(--text-muted); max-width: 62ch; }
.award-body .learn-more { margin-top: 14px; }

/* ---- Footer ---- */
.foot {
  border-top: 1px solid var(--border);
  /* Theme-driven: dark shades toward the abyss floor; light uses a teal wash */
  background: var(--foot-bg);
  backdrop-filter: blur(2px);
}
.foot .inner { max-width: 1080px; margin: 0 auto; padding: 40px 40px 32px; }
@media (max-width: 900px) { .foot .inner { padding: 40px 28px 32px; } }
.foot .cols { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-bottom: 28px; }
.foot .col { min-width: 130px; }
.foot .col h6 { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 12px; }
.foot .col a { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 9px; min-height: 20px; }
.foot .col a:hover { color: var(--accent); }
/* planned (not-yet-built) footer links: dimmed + a 'soon' tag, shown in priority order */
.foot .col a.soon { color: var(--text-subtle); opacity: 0.6; cursor: default; pointer-events: none; }
.foot .col a.soon .soon-tag { font-family: var(--font-display); font-weight: 700; font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius-full); padding: 1px 6px; opacity: 0.9; }
.foot .bottom { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--border); }
.foot .bottom .cr { font-size: 12px; color: var(--text-subtle); }
.foot .bottom .cr a { color: var(--text-subtle); text-decoration: underline; text-decoration-color: var(--border-strong); margin-left: 4px; }
.foot .bottom .cr a:hover { color: var(--accent); text-decoration-color: var(--accent); }
/* Motion on/off toggle (footer). Default on; the .mt-dot goes hollow when off. */
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 12px; min-height: 32px; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); transition: color .15s ease, border-color .15s ease; }
.motion-toggle:hover { color: var(--accent); border-color: var(--accent); }
.motion-toggle .mt-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); transition: all .15s ease; }
.motion-toggle[aria-pressed="true"] .mt-dot { background: transparent; border: 1.5px solid var(--text-subtle); box-shadow: none; }
.foot .social { display: flex; gap: 10px; }
.foot .social a {
  width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--text-muted);
  text-decoration: none;
}
.foot .social a:hover { color: var(--accent); border-color: var(--accent); }
.foot .social svg { width: 16px; height: 16px; }

/* ---- Ask AI about Halo Ai (footer block, injected by main.js) ---- */
.ask-ai { margin: 4px 0 26px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--tint-violet-soft); display: flex; align-items: center; gap: 18px 24px; flex-wrap: wrap; }
.ask-ai .ask-lead { display: flex; flex-direction: column; gap: 4px; min-width: 200px; flex: 1; }
.ask-ai .ask-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.ask-ai .ask-title .spark { width: 15px; height: 15px; color: var(--tint-violet-ink); flex-shrink: 0; }
.ask-ai .ask-sub { font-size: 12px; line-height: 1.45; color: var(--text-subtle); }
.ask-ai .ask-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-ai .ask-links a { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: var(--text-muted); text-decoration: none; border: 1px solid var(--border-strong); border-radius: var(--radius-full); padding: 7px 14px; min-height: 36px; display: inline-flex; align-items: center; gap: 7px; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.ask-ai .ask-links a:hover { color: var(--tint-violet-ink); border-color: var(--tint-violet-ink); background: color-mix(in srgb, var(--tint-violet-ink) 10%, transparent); }
.ask-ai .ask-links a .ai-logo { width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ask-ai .ask-links a .ai-logo svg { width: 100%; height: 100%; display: block; }

/* ---- Deep-page components (Platform / Approach / Sources / About / Customers / Contact) ---- */
.page-hero { padding: 64px 0 8px; }
.page-hero .eyebrow { margin-bottom: 14px; }
.eyebrow.breadcrumb { display: flex; align-items: center; gap: 8px; }
.eyebrow.breadcrumb a { color: var(--accent); text-decoration: none; opacity: 0.85; transition: opacity .15s ease; }
.eyebrow.breadcrumb a:hover { opacity: 1; }
.eyebrow.breadcrumb span { color: var(--text-subtle); }
.page-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5.5vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: var(--text); margin-bottom: 16px; max-width: 18ch; }
.page-hero .lead { font-size: 17px; line-height: 1.55; color: var(--text-muted); max-width: 60ch; }

.prose { max-width: 62ch; }
.prose p { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin-bottom: 16px; }
.prose p strong { color: var(--text); font-weight: 600; }
.prose h2 { margin-top: 8px; }
.prose h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); margin: 24px 0 10px; }
.prose ul { list-style: disc; margin: 0 0 16px 20px; }
.prose ul li { font-size: 15px; line-height: 1.65; color: var(--text-muted); margin-bottom: 6px; }
.prose ul li strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.prose .table-gap { padding: 14px 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); font-size: 13px; font-style: italic; color: var(--text-subtle); margin-bottom: 16px; }

/* checklist (verbatim bullet lists from the live site) */
ul.checklist { list-style: none; max-width: 68ch; margin: 8px 0 8px; }
ul.checklist li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
ul.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--chip-success-bg); }
ul.checklist li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 8px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
ul.checklist li strong { color: var(--text); font-weight: 600; }

/* pain-point pills (say goodbye to manual triage) */
.painpills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.painpills span { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 8px 16px; text-decoration: line-through; text-decoration-color: var(--error); }

/* industries grid */
.industries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .industries { grid-template-columns: 1fr; } }
.industry { border-radius: var(--radius-lg); padding: 24px; }
.industry h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.industry p { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* single pulled quote (per deep page) */
.pullquote { border-radius: var(--radius-xl); padding: 32px 36px; max-width: 820px; }
.pullquote blockquote { font-family: var(--font-body); font-size: 20px; line-height: 1.45; color: var(--text); margin: 0 0 16px; }
.pullquote blockquote mark { background: var(--chip-success-bg); color: var(--accent); padding: 1px 5px; border-radius: 3px; font-weight: 600; }
.pullquote .attr { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-muted); }
.pullquote .attr .topic { color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; margin-left: 8px; }

/* section heading for deep pages */
.dsection { padding: 48px 0; border-top: 1px solid var(--border); }
.dsection > .eyebrow { margin-bottom: 12px; }
.dsection h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.14; letter-spacing: -0.018em; color: var(--text); margin-bottom: 12px; max-width: 34ch; }
.dsection > .lead { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 28px; max-width: 52ch; }

/* HubSpot form embed shell */
.form-shell { border-radius: var(--radius-xl); padding: 28px; max-width: 640px; }
.form-shell .hs-placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 40px 24px; text-align: center; }
.form-shell .hs-placeholder p { font-size: 14px; line-height: 1.6; color: var(--text-muted); }
.form-shell .hs-placeholder code { font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; background: var(--chip-success-bg); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-sm); }

/* ---- FAQ (per-page section + consolidated /resources/ hub) ----
   Injected by main.js from the shared FAQ map into #faq (per page) or
   #faqAll (hub). Native <details>/<summary> — accessible, keyboard-driven,
   no JS state. Tokens only; adopts both themes automatically. */
.faq-list { max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); backdrop-filter: blur(var(--glass-blur)); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.3;
  color: var(--text); transition: color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item .faq-q { flex: 1; }
/* +/× toggle drawn from two token-colored bars (no icon font/asset) */
.faq-item .faq-icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-item .faq-icon::before, .faq-item .faq-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--accent);
  border-radius: var(--radius-full); transition: transform .2s ease, opacity .2s ease;
}
.faq-item .faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-item .faq-icon::after  { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item .faq-a { padding: 0 20px 18px; }
.faq-item .faq-a p { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 64ch; }
.faq-item .faq-a a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.faq-item .faq-a a:hover { border-bottom-color: var(--accent); }
.faq-item[open] > summary { color: var(--accent); }

/* Consolidated hub: grouped sets */
.faq-group + .faq-group { margin-top: 40px; }
.faq-toggle-all { display: flex; justify-content: flex-end; max-width: 760px; margin-bottom: 18px; }
.faq-group-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px; }

/* ---- Sources: hero-number + Intrinsic Score decomposition (Round 3) ----
   Asymmetric split: one display-scale number owns the left; the tappable
   Intrinsic Score sits right and decomposes into 4 traced domains. The score
   component (.intrinsic-score) is shared — reused on Home, Third-Party Snapshot,
   and the sample report. Tokens only; teal is the Sources dominant hue. */
.score-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 860px) { .score-split { grid-template-columns: 1fr; gap: 20px; } }

.hero-number { display: flex; flex-direction: column; }
/* Sized for its column, not the old full-width layout — "1,000+" is one
   unbroken run with nowhere to wrap, so at the old clamp (up to 168px) it
   overflowed straight past the narrower hero-split column and visibly
   bled into the score card sitting next to it. */
.hero-number .hn-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8.5vw, 100px); line-height: 0.9; letter-spacing: -0.03em; color: var(--accent); white-space: nowrap; }
.hero-number .hn-cap { font-size: 15px; line-height: 1.5; color: var(--text-muted); max-width: 30ch; margin-top: 12px; }
.hero-number .hn-rail { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.hero-number .hn-rail .hn-stat { font-family: var(--font-display); }
.hero-number .hn-rail .hn-stat b { display: block; font-weight: 700; font-size: 22px; color: var(--text); letter-spacing: -0.01em; }
.hero-number .hn-rail .hn-stat span { font-size: 12.5px; color: var(--text-muted); }

/* Intrinsic Score card (shared component) */
/* transform: translateZ(0) forces this onto its own stable compositing
   layer — without it, the child .score-break's grid-template-rows
   transition (a layout-affecting property) makes the browser recompute
   this element's backdrop-filter blur every frame, which can show a
   flash of unfiltered white right as the collapse finishes. */
.intrinsic-score { border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); background-image: var(--glass-tint); box-shadow: var(--shadow-md); transform: translateZ(0); }
.intrinsic-score .score-hero { position: relative; width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0; padding: 24px 26px; display: flex; flex-direction: column; gap: 4px; color: inherit; transition: background .15s ease; }
.intrinsic-score .score-hero:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.score-hero-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.score-hero-label .score-hero-sub { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--text-subtle); margin-top: 3px; }
.score-hero-num { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.score-hero-value {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 8vw, 76px);
  line-height: 1; letter-spacing: -0.02em; color: var(--accent);
  transform-origin: left center;
  transition: opacity var(--dur-base) var(--ease-emphasized), transform var(--dur-base) var(--ease-emphasized);
}
/* "recalculating" state: value dims + lifts slightly while the spinner
   overlays it and the domain breakdown fills in beneath. */
/* Scale+fade, not a flat opacity dim — a pure brightness change reads as a
   light switching, this reads as the number physically receding. */
.intrinsic-score.is-calculating .score-hero-value { opacity: 0.4; transform: scale(0.94); }
.score-hero-max { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-muted); transition: opacity var(--dur-base) var(--ease-emphasized); }
.intrinsic-score.is-calculating .score-hero-max { opacity: 0.5; }
/* Recalculating spinner — a rotating ring with the Halo mark centered in it,
   parked in the card's free right-hand space (not overlapping the score
   value). Reuses the shared LOGO svg (js/main.js) so it reads as "Halo is
   doing the work" rather than a generic loader. */
.score-spinner {
  position: absolute; right: 26px; top: 24px;
  width: 40px; height: 40px;
  transform: scale(0.7);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-emphasized), transform var(--dur-fast) var(--ease-emphasized);
}
.intrinsic-score.is-calculating .score-spinner { opacity: 1; transform: scale(1); }
.score-spinner-ring {
  position: absolute; inset: 0;
  border-radius: var(--radius-full);
  border: 2.5px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  animation: scoreSpin 0.85s linear infinite;
}
.score-spinner-logo { width: 18px; height: 18px; color: var(--accent); }
@keyframes scoreSpin { to { transform: rotate(360deg); } }
body.reduced .score-spinner-ring { animation: none; }
/* Disclosure cue: label text + chevron both flip state together (open ⇄
   closed) so the same click target reads as reversible, not a dead-end.
   Same pattern as the native <details>/<summary> FAQ chevron elsewhere —
   reuse this class pair (.score-hero-cue / .score-hero-chevron) for any
   future expand/collapse control. */
.score-hero-cue { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; transition: gap .18s ease; }
.intrinsic-score .score-hero:hover .score-hero-cue { gap: 11px; }
.score-hero-chevron { width: 13px; height: 13px; flex-shrink: 0; transition: transform .22s ease; }
.score-hero-chevron svg { width: 100%; height: 100%; }
.intrinsic-score.is-open .score-hero-chevron { transform: rotate(180deg); }

/* Divider that draws in (center-out) as the panel opens — the "horizontal
   split" between the score header and the revealed breakdown.
   NOT named .score-split — that class is already taken by the Sources
   page's unrelated 2-column layout wrapper (.score-split above, ~line
   1060: hero-number + intrinsic-score side by side). Both elements
   sharing that class meant this divider's height:1px rule was winning on
   the Sources page's wrapper too (later in the cascade, same specificity),
   collapsing that whole 2-column section — including the score card
   itself — to zero width. */
.score-divider {
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.intrinsic-score.is-open .score-divider { transform: scaleX(1); }

/* Smooth height reveal via the grid-rows 0fr->1fr technique — animates to
   real content height with no JS measurement, and collapses the same way in
   reverse ("nice smooth collapse" on close is this same transition undoing). */
/* :not([hidden]) matters — a bare `.score-break { display: grid }` would
   override the browser's built-in [hidden]{display:none} rule (same
   specificity, author styles win over UA styles), leaving a sliver of the
   closed panel's content visibly peeking out past the card's rounded
   corner. Scoping to :not([hidden]) lets the hidden attribute (toggled in
   js/main.js renderScore()) fully win when closed. */
.score-break:not([hidden]) {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-emphasized);
}
.intrinsic-score.is-open .score-break:not([hidden]) { grid-template-rows: 1fr; }
/* Fades in with the panel (not just height-revealed) — a glass-door glide,
   not a hard cut when it opens, and no orphaned fully-opaque text lagging
   behind the domain rows' own fade when it closes (the old lead line above
   the list had no transition of its own and would hang there until the
   panel height hit ~0, then vanish all at once). */
/* Vertical padding is animated (0 <-> 12px/24px), not fixed — a fixed
   padding here doesn't shrink when .score-break's grid-template-rows
   collapses toward 0fr, so on close the row could never actually reach 0:
   it bottomed out at padding's own ~36-48px floor and just sat there,
   fully empty (its content already faded via score-domain/score-bar
   below), until the JS close timer hard-cut it with [hidden] — which is
   exactly the "hangs open for half a second" the panel visibly did.
   Animating padding-top/bottom in lockstep with the same duration removes
   that floor, so the row's real height reaches 0 smoothly instead. */
.score-break-inner {
  overflow: hidden; min-height: 0; padding: 0 26px;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-emphasized),
              padding-top var(--dur-slow) var(--ease-emphasized),
              padding-bottom var(--dur-slow) var(--ease-emphasized);
}
.intrinsic-score.is-open .score-break-inner { opacity: 1; padding-top: 12px; padding-bottom: 24px; }
.score-domains { list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* Each domain row fades/slides in with a per-row stagger (--delay, set
   inline in js/main.js renderScore()) so the breakdown reads as a cascading
   reveal rather than popping in all at once. */
/* transition-delay lives ONLY on the .is-open rule below, not here — this
   base rule is what's in effect when is-open is REMOVED (closing), so
   closing has to start every row fading at once. Previously the same
   --delay (0-800ms, one step per row) applied on both open AND close: the
   last row (Strategic, 800ms delay) wouldn't even start fading until the
   container's own 900ms collapse was almost done, so it hung there at
   full opacity while everything around it had already shrunk away. */
.score-domain {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-emphasized),
              transform var(--dur-base) var(--ease-emphasized);
}
.intrinsic-score.is-open .score-domain {
  opacity: 1; transform: translateY(0);
  transition-delay: var(--delay, 0ms);
}
.score-domain-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.score-domain-name { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text); }
.score-domain-val { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); }
.score-bar { height: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--accent) 14%, transparent); margin: 4px 0 3px; overflow: hidden; }
/* Bar fill shares the row's --delay so each bar starts exactly as the
   previous one finishes — a true in-series fill, not an overlapping stagger.
   550ms here must match CALC_STAGGER/CALC_BAR_MS in js/main.js (both the
   --delay step and this duration), which also derives how long the spinner/
   dimmed value stay in "recalculating" state. */
/* 200ms here must match CALC_BAR_MS in js/main.js — it drifted out of sync
   last round (this stayed 550ms after CALC_STAGGER/CALC_BAR_MS dropped to
   200), which meant each bar's fill actually overlapped the next one's
   instead of finishing before it started. Same is-open-only delay scoping
   as .score-domain above, for the same close-hang reason. */
.score-bar span {
  display: block; height: 100%; border-radius: var(--radius-full); background: var(--accent); width: 0;
  transition: width 200ms var(--ease-emphasized);
}
.intrinsic-score.is-open .score-bar span { width: var(--w, 0); transition-delay: var(--delay, 0ms); }
.score-domain-src { font-size: 12px; line-height: 1.45; color: var(--text-subtle); }
.score-domain-src a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.score-note { font-size: 11px; color: var(--text-subtle); margin-top: 6px; font-style: italic; }

/* ---- Home: split hero (Round 3) — copy left, Intrinsic Score card right ---- */
/* min-width:0 on the grid items — grid items get the same auto min-content
   minimum-width as flex items. The hero-pillar dial's nowrap text was
   bubbling its full unwrapped width up through .hero-copy (a grid item
   here) and forcing the whole page to overflow horizontally on mobile,
   even though the dial itself visually clips with overflow:hidden. */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.hero-split > * { min-width: 0; }
@media (max-width: 900px) { .hero-split { grid-template-columns: 1fr; gap: 28px; } }
/* No max-width caps on .hero-copy here — let the grid column itself set the
   width, same as every other section's content. Line length still reads
   fine at ~480px per column (see hero .wrap width, 1080px - padding). */
.intrinsic-score.hero-score { align-self: center; width: 100%; }
@media (max-width: 900px) { .intrinsic-score.hero-score { max-width: 460px; } }
/* Wider column on desktop = give the card's own content more breathing room
   rather than just stretching the outer edge. */
@media (min-width: 901px) {
  .hero-score .score-hero { padding: 32px 36px; }
  .hero-score .score-break-inner { padding-left: 36px; padding-right: 36px; }
  .hero-score.is-open .score-break-inner { padding-top: 14px; padding-bottom: 16px; }
  .hero-score .score-hero-value { font-size: clamp(56px, 6vw, 84px); }
  .hero-score .score-spinner { right: 36px; top: 32px; width: 48px; height: 48px; }
}

/* ---- Third-Party Snapshot fanfare panel (home) — new/special callout (Round 4) ---- */
.vs-fanfare { border-radius: var(--radius-2xl); padding: 40px 40px; position: relative; overflow: hidden; }
@media (max-width: 560px) { .vs-fanfare { padding: 28px 22px; } }
.vs-fanfare-body { max-width: 640px; position: relative; z-index: 1; }
.vs-badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tint-gold-ink); background: color-mix(in srgb, var(--tint-gold-ink) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tint-gold-ink) 40%, transparent); border-radius: var(--radius-full); padding: 5px 13px; margin-bottom: 14px; }
.vs-fanfare h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: var(--text); margin-bottom: 12px; max-width: 24ch; }
.vs-fanfare-body > p { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-bottom: 22px; max-width: 56ch; }
.vs-fanfare-stats { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 26px; }
.vs-fanfare-stats .vs-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--tint-gold-ink); letter-spacing: -0.01em; }
.vs-fanfare-stats .vs-stat span { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); max-width: 22ch; display: block; }
.vs-fanfare .cta-row { gap: 12px; }

/* ---- Halo Effect Matrix (shared: Approach embed + /halo-effect/ page) ---- */
.halo-matrix { --hm-ink: var(--tint-teal-ink); }
/* minmax(0, 1fr), not bare 1fr — plain 1fr is shorthand for minmax(auto, 1fr),
   which refuses to shrink a column below its content's natural min-width.
   That let the cell text force the grid wider than the viewport on mobile
   (overflowed to 511px on a 390px screen) even though the cells "looked"
   like they should fit three across. */
.hm-grid { display: grid; grid-template-columns: 140px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.hm-corner { }
.hm-outcome { display: flex; flex-direction: column; justify-content: flex-end; padding: 4px 6px 10px; text-align: center; }
.hm-outcome b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 3vw, 30px); color: var(--accent); letter-spacing: -0.01em; }
.hm-outcome span { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.hm-pillar { display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); padding-right: 8px; }
.hm-cell { text-align: left; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 15px; display: flex; flex-direction: column; gap: 6px; color: inherit; transition: border-color .15s ease, background .15s ease, transform .15s ease; min-height: 108px; }
.hm-cell:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); transform: translateY(-2px); }
.hm-cell.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
/* Redundant on the desktop grid — the row/column position already says
   "pillar × outcome" — so it's hidden there and shown only once the mobile
   breakpoint below flattens the grid to a single column. */
.hm-cell-tag { display: none; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
/* Cramming a 4-column grid (label + 3 outcomes) into a phone width made
   every cell too narrow to hold its own title without heavy wrapping —
   three or four broken words stacked in a ~90px column. Below 720px this
   drops the grid shape entirely for a single-column stack of full-width
   cards (one per cell, 9 total), each carrying its own pillar × outcome
   tag since the grid's row/column position no longer supplies that
   context. The header row and vertical pillar labels are hidden — nothing
   left for them to label. */
@media (max-width: 720px) {
  .hm-grid { display: flex; flex-direction: column; gap: 8px; }
  .hm-corner, .hm-outcome, .hm-pillar { display: none; }
  .hm-cell-tag { display: block; }
  .hm-cell { min-height: 0; }
  .hm-cell-short { display: block; }
}
/* overflow-wrap:break-word — a few cell titles carry a single word just
   wide enough to keep the whole compressed grid column ~1-2px over on
   mobile even with minmax(0,1fr) on the track (a handful of cells doing
   this add up: was a ~14px total page overflow across the grid). Only
   breaks mid-word when the alternative is overflowing, normal wrapping
   is unaffected. */
.hm-cell-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--text); overflow-wrap: break-word; }
.hm-cell-short { font-size: 12px; line-height: 1.4; color: var(--text-muted); flex: 1; overflow-wrap: break-word; }
.hm-cell-open { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.hm-brief { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 22px 24px; background: var(--surface); backdrop-filter: blur(var(--glass-blur)); }
.hm-brief-tag { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.hm-brief h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin-bottom: 12px; letter-spacing: -0.01em; }
.hm-brief ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hm-brief li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.hm-brief li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--chip-success-bg); border: 1px solid var(--accent); }
.hm-brief-proof { margin: 16px 0 0; padding: 14px 18px; border-left: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; font-size: 14px; line-height: 1.5; color: var(--text); }
.hm-brief-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ==========================================================================
   Halo Effect Matrix — cell detail modal (centered overlay). Mirrors
   .book-modal's scrim/panel pattern; mounted directly on <body> by
   renderMatrix() in js/main.js so it isn't caught inside a transformed
   .reveal ancestor (which would break position:fixed).
   ========================================================================== */
.hm-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.hm-modal[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
.hm-modal__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, black 15%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hm-modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: min(680px, 92vh);
  overflow-y: auto;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 36px);
  transform: translateY(10px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.hm-modal[data-open="true"] .hm-modal__panel { transform: translateY(0) scale(1); }
.hm-modal__close {
  all: unset; cursor: pointer;
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  color: var(--text-subtle); font-family: var(--font-display); font-size: 20px; line-height: 1;
  transition: background .2s, color .2s;
}
.hm-modal__close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.hm-modal__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin: 0 0 12px; letter-spacing: -0.01em; padding-right: 30px; }
.hm-modal__body ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.hm-modal__body li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.hm-modal__body li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--chip-success-bg); border: 1px solid var(--accent); }
.hm-modal__pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.hm-modal__step { all: unset; cursor: pointer; width: 34px; height: 34px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: border-color .15s, background .15s; flex: none; }
.hm-modal__step:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); }
/* Mini "you are here" replica of the pillar × outcome grid — same shape as
   .hm-grid (3 rows, 3 cols), just small dots instead of full cards. */
.hm-modal__mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.hm-modal__mini-cell { width: 9px; height: 9px; border-radius: 2.5px; background: var(--border-strong); transition: background .2s, transform .2s; }
.hm-modal__mini-cell.is-active { background: var(--accent); transform: scale(1.2); }
.hm-modal__count { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-subtle); text-align: center; margin-top: 10px; }
/* Desktop-only nudge that arrow keys work — mouse/trackpad implies a
   keyboard is right there, so it doesn't duplicate the prev/next buttons
   touch users rely on instead. */
.hm-modal__hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hm-modal__hint { display: block; font-size: 11px; color: var(--text-subtle); text-align: center; margin-top: 6px; }
}
@media (max-width: 640px) {
  .hm-modal { padding: 0; align-items: flex-end; }
  .hm-modal__panel { max-width: none; width: 100%; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .hm-modal[data-open="true"] .hm-modal__panel { transform: translateY(0); }
  .hm-modal:not([data-open="true"]) .hm-modal__panel { transform: translateY(24px); }
}
body.hm-printing > *:not(.hm-modal) { display: none !important; }
body.hm-printing .hm-modal { position: static; padding: 0; opacity: 1; visibility: visible; }
body.hm-printing .hm-modal__scrim { display: none; }
body.hm-printing .hm-modal__panel { box-shadow: none; border: none; max-width: none; max-height: none; transform: none; overflow: visible; }
body.hm-printing .hm-modal__close, body.hm-printing .hm-modal__pager, body.hm-printing .hm-modal__hint, body.hm-printing .hm-modal__count { display: none; }
/* Branding that only exists for the printed/PDF page — invisible in the
   normal on-screen modal, matching the PNG export's logo + wordmark +
   footer so a printed cell is recognizably Halo Ai (the on-screen modal
   doesn't need this since it's already inside the branded site chrome). */
.hm-modal__print-brand, .hm-modal__print-foot { display: none; }
body.hm-printing .hm-modal__print-brand {
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--accent);
}
body.hm-printing .hm-modal__print-brand svg { width: 26px; height: 26px; }
body.hm-printing .hm-modal__print-brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
body.hm-printing .hm-modal__print-foot {
  display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle);
}

/* Standalone brief page (/halo-effect/brief/) */
#briefPage .eyebrow a { color: var(--accent); text-decoration: none; }
#briefPage .brief-tag { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 8px 0 10px; }
#briefPage h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: var(--text); margin-bottom: 20px; max-width: 22ch; }
@media print {
  .depth, #site-nav, #site-footer, .hm-brief-actions { display: none !important; }
  #briefPage { padding: 0; }
  /* Same print-only masthead/footer as the matrix modal (js/main.js
     renderMatrix's printCellModal) — site nav is hidden for print, so
     without this the printed page would carry no Halo Ai branding at all. */
  #briefPage .hm-modal__print-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--accent); }
  #briefPage .hm-modal__print-brand svg { width: 26px; height: 26px; }
  #briefPage .hm-modal__print-brand span { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text); }
  #briefPage .hm-modal__print-foot { display: block; margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-subtle); }
}

/* ---- Approach: convergence funnels (two streams → one insight) ---- */
.funnels { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 760px) { .funnels { grid-template-columns: 1fr; } }
.funnel { border-radius: var(--radius-xl); padding: 22px 24px; border: 1px solid var(--border); }
.funnel.outside { background: var(--tint-slate-soft); }
.funnel.inside { background: var(--tint-teal-soft); }
.funnel h3 { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.funnel p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.funnel-core { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 128px; height: 128px; border-radius: var(--radius-full); background: var(--tint-teal-grad); border: 1px solid var(--border-strong); text-align: center; }
@media (max-width: 760px) { .funnel-core { width: 108px; height: 108px; margin: 4px auto; } }
.funnel-core b { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--accent); }
.funnel-core span { font-size: 11px; color: var(--text-muted); line-height: 1.2; margin-top: 2px; }

/* ---- Approach: recursive 4-step loop ---- */
.loop-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .loop-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .loop-steps { grid-template-columns: 1fr; } }
.loop-step { border-radius: var(--radius-lg); padding: 18px; border: 1px solid var(--border); background: var(--surface-2); }
.loop-step .ls-no { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.loop-step h4 { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.loop-step p { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.loop-monitor { margin-top: 12px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius-lg); padding: 14px 18px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb, var(--accent) 6%, transparent); }
.loop-monitor .lm-badge { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius-full); padding: 4px 10px; white-space: nowrap; }
.loop-monitor p { font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* ---- Platform: architecture map ---- */
.archmap { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 14px; align-items: center; border-radius: var(--radius-2xl); padding: 28px; border: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 860px) { .archmap { grid-template-columns: 1fr; gap: 10px; } }
.archmap-col h4 { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; text-align: center; }
.archmap-col .am-item { font-size: 12.5px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px 10px; margin-bottom: 7px; text-align: center; background: var(--surface); }
.archmap-core { text-align: center; border-radius: var(--radius-xl); padding: 22px 16px; background: var(--tint-teal-grad); border: 1px solid var(--border-strong); }
.archmap-core b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--accent); }
.archmap-core span { font-size: 12px; color: var(--text-muted); }
.archmap-arrow { text-align: center; color: var(--accent); font-size: 22px; font-weight: 700; }
@media (max-width: 860px) { .archmap-arrow { transform: rotate(90deg); } }

/* ---- Editorial numbered rows (Platform) ---- */
.editorial { display: flex; flex-direction: column; }
.ed-row { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--border); }
@media (max-width: 560px) { .ed-row { grid-template-columns: 44px 1fr; gap: 14px; } }
.ed-row .ed-no { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); line-height: 1; color: color-mix(in srgb, var(--accent) 55%, transparent); letter-spacing: -0.02em; }
.ed-row .ed-chip { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.ed-row h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(18px, 2.6vw, 24px); line-height: 1.15; color: var(--text); margin-bottom: 8px; letter-spacing: -0.01em; }
.ed-row p { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 60ch; }

/* ---- Customers: multi-dimension filter wall ---- */
.filterbar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-group .fg-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); width: 96px; flex-shrink: 0; }
.filter-toggle { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 12px; min-height: 36px; cursor: pointer; transition: transform .12s ease, border-color .15s ease, color .15s ease, background .15s ease; }
.filter-toggle:hover { border-color: var(--accent); color: var(--accent); }
.filter-toggle.is-on { background: var(--chip-success-bg); border-color: var(--accent); color: var(--accent); }
.filter-toggle:active { transform: scale(0.94); }
.filter-toggle .ft-count { opacity: 0.6; margin-left: 5px; }
.filter-status { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.filter-status b { color: var(--text); }
.cwall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .cwall { grid-template-columns: 1fr; } }
.cwall .cw-card { border-radius: var(--radius-xl); padding: 22px 24px; display: flex; flex-direction: column; }
.cwall .cw-card.is-hidden { display: none; }
.cwall .cw-card blockquote { font-size: 15px; line-height: 1.55; color: var(--text); margin-bottom: 14px; flex: 1; }
.cwall .cw-card .cw-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.cwall .cw-card .cw-org { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--text); width: 100%; margin-bottom: 4px; }
.cwall .cw-card .cw-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px 9px; }
.filter-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 14px; }

/* ---- Third-Party Snapshot hero demo (looping request animation) ----
   Sequence (renderSnapshotDemo in main.js): type name → name rises into the
   persistent header → pulsing Halo logo "fusing" → score joins the header →
   the 12 Essentials domains reveal + scroll under the fixed header → fade → next.
   Score/verdict/bars are risk-banded (green >=80 · yellow 60-79 · red <60) via
   a per-element --risk var. */
.vs-hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .vs-hero-split { grid-template-columns: 1fr; gap: 28px; } }
.snap-window { border-radius: var(--radius-xl); border: 1px solid var(--border-strong); background: var(--surface); backdrop-filter: blur(var(--glass-blur)); background-image: var(--glass-tint); box-shadow: var(--shadow-md); overflow: hidden; }
.snap-bar { display: flex; align-items: center; gap: 9px; padding: 11px 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 40%, transparent); }
.snap-mark { width: 18px; height: 18px; color: var(--logo-bar); flex-shrink: 0; display: inline-flex; }
.snap-mark svg { width: 100%; height: 100%; }
.snap-mark.pulsing { animation: snapPulse 1.05s ease-in-out infinite; }
@keyframes snapPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.86); } }
.snap-url { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.02em; color: var(--text-subtle); }
.snap-body { height: 352px; display: flex; flex-direction: column; position: relative; transition: opacity .5s ease; }
.snap-body.out { opacity: 0; }
@media (max-width: 900px) { .snap-body { height: 340px; } }

/* persistent header — name fades in after typing, score joins later */
.snap-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 55%, transparent); position: relative; z-index: 3; min-height: 56px; }
.snap-co { min-width: 0; opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.snap-co.show { opacity: 1; transform: none; }
.snap-co b { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); display: block; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.snap-co span { font-size: 11.5px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 210px; }
.snap-score-badge { display: flex; align-items: baseline; gap: 5px; flex-shrink: 0; opacity: 0; transform: translateY(-6px); transition: opacity .45s ease, transform .45s ease; }
.snap-head.scored .snap-score-badge { opacity: 1; transform: none; }
.snap-num-v { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; color: var(--risk); letter-spacing: -0.02em; }
.snap-num-max { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--text-muted); }
.snap-verdict { font-family: var(--font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--risk); border: 1px solid color-mix(in srgb, var(--risk) 45%, transparent); background: color-mix(in srgb, var(--risk) 14%, transparent); border-radius: var(--radius-full); padding: 3px 8px; margin-left: 8px; flex-shrink: 0; align-self: center; opacity: 0; transition: opacity .45s ease .1s; }
.snap-head.scored .snap-verdict { opacity: 1; }

/* working area: three swappable layers (input · fusing · domains) */
.snap-work { flex: 1; min-height: 0; position: relative; }
.snap-work .work-layer { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 22px 18px; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.snap-work .work-layer.on { opacity: 1; }
.snap-label { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 10px; }
.snap-input { display: flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 14px 16px; background: var(--surface-2); }
.snap-input-text { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.snap-caret { width: 2px; height: 20px; background: var(--accent); animation: snapBlink 1s step-end infinite; }
@keyframes snapBlink { 50% { opacity: 0; } }
.snap-go { margin-left: auto; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--on-action); background: var(--action); border-radius: var(--radius-sm); padding: 7px 12px; white-space: nowrap; }
/* fusing layer — large pulsing Halo logo */
.snap-fuse { text-align: center; }
.snap-fuse .fuse-logo { width: 58px; height: 58px; margin: 0 auto 16px; color: var(--accent); display: block; animation: snapPulse 1.05s ease-in-out infinite; }
.snap-fuse .fuse-logo svg { width: 100%; height: 100%; }
.snap-fuse p { font-size: 13.5px; color: var(--text-muted); }
.snap-fuse b { color: var(--text); }
/* domains layer — reveal + scroll under the fixed header */
.doms-layer { justify-content: flex-start; overflow: hidden; padding: 14px 18px; }
.snap-domains { display: flex; flex-direction: column; gap: 11px; width: 100%; will-change: transform; }
.snap-domains.scrolling { animation: snapDepth 4.6s linear forwards; }
@keyframes snapDepth { 0%,12% { transform: translateY(0); } 100% { transform: translateY(-176px); } }
.snap-dom { display: grid; grid-template-columns: 1fr 54px 26px; align-items: center; gap: 10px; opacity: 0; transform: translateX(-6px); transition: opacity .4s ease, transform .4s ease; }
.snap-domains.in .snap-dom { opacity: 1; transform: none; }
.snap-dom-n { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snap-dom-bar { height: 6px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--risk) 16%, transparent); overflow: hidden; }
.snap-dom-bar span { display: block; height: 100%; background: var(--risk); border-radius: var(--radius-full); width: 0; transition: width .7s cubic-bezier(.2,.7,.2,1); }
.snap-domains.in .snap-dom-bar span { width: var(--w); }
.snap-dom-v { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--risk); text-align: right; }
/* shrunk footer → caveat/disclaimer strip */
.snap-foot { padding: 7px 16px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 45%, transparent); font-family: var(--font-display); font-size: 9px; line-height: 1.35; letter-spacing: 0.02em; color: var(--text-subtle); text-align: center; }
/* motion-off: no pulse/blink/scroll; the score + full domain list are shown statically */
body.reduced .snap-mark.pulsing, body.reduced .snap-fuse .fuse-logo, body.reduced .snap-caret { animation: none; }
body.reduced .snap-domains.scrolling { animation: none; }

/* ---- Draft-copy marker ----
   Any element wrapping Dia-drafted (not-yet-approved) copy gets data-draft.
   It appends a small amber superscript asterisk after the copy — visible and
   easy to find, but it does NOT affect layout (no outline, no box). Shows only
   in draft mode (<body class="show-drafts">, default in this build). Strip for
   launch by removing "show-drafts" (or the data-draft attributes). Hover the
   asterisk for the note passed in data-draft. To find every marker later:
   search the codebase for  data-draft . */
body.show-drafts [data-draft]::after {
  content: "*";
  color: var(--tint-gold-ink);
  font-weight: 700;
  font-size: 0.7em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  cursor: help;
}
@media print { body.show-drafts [data-draft]::after { content: none; } }

/* ---- Reveal-on-scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Phone-landscape vertical compression ----
   Wide-but-short viewport (phone sideways): the tall stacked vertical rhythm
   wastes the little height there is. Tighten top/bottom padding on the big
   vertical blocks so more content is reachable without endless scroll.
   Width/height guard matches the nav menu-cap rule above (one landscape tier). */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
  .hero { padding-top: 40px; }
  .section, .voices { padding: 36px 0; }
  .page-hero { padding: 40px 0 4px; }
  .dsection { padding: 32px 0; }
  .ctaband { padding: 32px 28px; }
  .metric-band { padding: 28px; }
  .faq-item summary { padding: 12px 16px; }
}

/* ---- Mobile-portrait hero rhythm ----
   No longer chasing "logo rail fully visible above the fold" — a peek of
   the rail's top edge is enough, so this is comfortable spacing, not a
   maximally-compressed squeeze (that pass made the hero read as cramped). */
@media (max-width: 760px) {
  .hero { padding-top: 16px; }
  .hero-split { gap: 16px; }
  .eyebrow { margin-bottom: 8px; }
  .hero h1 { margin-bottom: 12px; }
  .hero-pillars { margin-bottom: 16px; gap: 6px; }
  .metrics { margin-top: 12px; gap: 6px 20px; }
  .hero-metrics { margin: 14px 0 20px; gap: 10px 14px; }
  .cta-row { gap: 10px; }
  body[data-page="home"] .hero .btn { min-height: 46px; padding: 12px 22px; }
  .logo-rail { padding: 20px 0 8px; }
  .logo-rail-label { margin-bottom: 10px; }
}

/* ---- Reduced motion (driven by the Motion toggle, NOT the OS setting) ----
   body.reduced is set by chrome.js's Motion toggle. We intentionally do NOT key
   this off @media (prefers-reduced-motion) — animations are ON by default for all
   and only this toggle disables them. See chrome.js motion authority. */
body.reduced {
  scroll-behavior: auto;
}
body.reduced *, body.reduced *::before, body.reduced *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0ms !important;
  animation-delay: 0ms !important;
  scroll-behavior: auto !important;
}
body.reduced .qtrack { animation: none !important; }
body.reduced .reveal { opacity: 1; transform: none; }
body.reduced .mesh { display: none; }

/* Motion-off fallback: the auto-scrolling tracks (testimonial carousel + logo
   rail) freeze mid-strip with most items clipped off-screen. When motion is off,
   turn them into NATIVE horizontal scrollers so every item is reachable by
   swipe/trackpad/scrollbar on desktop and mobile. Only applies with motion off;
   the animated experience is untouched. */
body.reduced .qtrack-wrap { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
body.reduced .qtrack { animation: none !important; scroll-padding: 0 40px; }
body.reduced .qtrack .qcard { scroll-snap-align: start; }
/* the seamless-loop duplicate is transparent to layout while animating (contents),
   and removed entirely when motion is off so the native scroller lists each item once. */
.track-dupe { display: contents; }
body.reduced .track-dupe { display: none; }
/* faint hint that these now scroll (subtle inset shadow on the right edge) */
body.reduced .qtrack-wrap, body.reduced .logo-rail-row { box-shadow: inset -18px 0 18px -18px color-mix(in srgb, var(--bg) 80%, transparent); }

/* ==========================================================================
   Book modal — the "Contact / Get a Demo" screening form (js/book-modal.js).
   One question at a time, posts to /api/book-call (Cloudflare Pages
   Function -> HubSpot). Replaces the old .hs-placeholder embed.
   ========================================================================== */
.book-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.book-modal[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s linear 0s; }
.book-modal__scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg) 70%, black 15%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.book-modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; max-height: min(640px, 92vh);
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 4vw, 36px);
  transform: translateY(10px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.book-modal[data-open="true"] .book-modal__panel { transform: translateY(0) scale(1); }
.book-modal__close {
  all: unset; cursor: pointer;
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: var(--radius-full);
  display: grid; place-items: center;
  color: var(--text-subtle); font-family: var(--font-display); font-size: 20px; line-height: 1;
  transition: background .2s, color .2s;
}
.book-modal__close:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.book-title {
  text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
.book-title[hidden] { display: none; }
.book-subtitle {
  text-align: center; font-size: 14px; line-height: 1.5; color: var(--text-muted); margin: 0 0 18px;
}
.book-subtitle[hidden] { display: none; }
.book-modal__head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.book-ring {
  --c1: var(--border-strong); --c2: var(--border-strong); --c3: var(--border-strong); --c4: var(--border-strong);
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-full);
  background: conic-gradient(from 0deg,
    transparent 0deg 5deg, var(--c1) 5deg 85deg, transparent 85deg 95deg,
    var(--c2) 95deg 175deg, transparent 175deg 185deg, var(--c3) 185deg 265deg,
    transparent 265deg 275deg, var(--c4) 275deg 355deg, transparent 355deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 66%, #000 67%);
  mask: radial-gradient(closest-side, transparent 66%, #000 67%);
  transition: background .4s ease;
}
.book-ring__label { font-family: var(--font-display); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
.book-ring__label b { color: var(--text); font-weight: 700; }
.book-form { max-width: none; margin: 0; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.book-form .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.book-step { animation: book-step-in .3s ease; }
.book-step[hidden] { display: none; }
@keyframes book-step-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.book-q { font-family: var(--font-body); font-size: clamp(18px, 2.4vw, 21px); font-weight: 600; line-height: 1.4; color: var(--text); margin: 0 0 16px; }
.book-step input[type="text"], .book-step input[type="email"], .book-step textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .2s, background .2s;
}
.book-step input:focus, .book-step textarea:focus { outline: none; border-color: var(--accent); }
.book-step textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.book-field-error { margin: 8px 0 0; font-family: var(--font-display); font-size: 12px; color: var(--error); min-height: 1.4em; }
.book-modal .form-status { margin-top: 14px; font-family: var(--font-display); font-size: 13px; min-height: 1.4em; }
.book-modal .form-status[data-state="ok"] { color: var(--accent); }
.book-modal .form-status[data-state="error"] { color: var(--error); }
.book-fine { display: none; margin-top: 14px; font-family: var(--font-body); font-size: 11.5px; line-height: 1.6; color: var(--text-subtle); }
.book-form[data-submitted="true"] .book-step, .book-form[data-submitted="true"] .book-nav { display: none; }
.book-form[data-submitted="true"] .form-status { font-family: var(--font-body); font-size: 18px; line-height: 1.5; color: var(--text); margin-top: 4px; }
.book-form[data-submitted="true"] .book-fine { display: block; }
.book-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; }
.book-back, .book-next {
  all: unset; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--text);
}
.book-back { color: var(--text-subtle); }
.book-back:hover { color: var(--text); }
.book-next {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--action); color: var(--on-action);
  padding: 13px 24px; border-radius: var(--radius-sm);
  transition: transform .2s ease, background .2s; margin-left: auto;
}
.book-next:hover { transform: translateY(-2px); background: var(--action-hover); }
.book-next:disabled { opacity: .5; cursor: default; transform: none; }
.book-next[hidden], .book-back[hidden] { display: none !important; }
.book-cta-trigger { cursor: pointer; }
@media (max-width: 640px) {
  .book-modal { padding: 0; align-items: flex-end; }
  .book-modal__panel { max-width: none; width: 100%; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); }
  .book-modal[data-open="true"] .book-modal__panel { transform: translateY(0); }
  .book-modal:not([data-open="true"]) .book-modal__panel { transform: translateY(24px); }
  .book-q { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .book-modal, .book-modal__panel, .book-step, .book-ring, .book-next { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   SITE-WIDE TYPOGRAPHY SCALE (23 Aug 2026, rolled out from the home trial).
   Target reader: busy senior professionals, tired eyes, scanning fast — bump
   legibility across the board. Scale:
     Footer            14px
     Smallest reading  16px (floor — nothing below this reads as a sentence)
     Core reading      18–20px
     Regular titles    24–28px
     Large headings    42–56px
     CTAs              prominent (bigger hit target + text in the hero)
   Started as a home-only trial (was body[data-page="home"] scoped); approved
   and rolled out globally. See the second block below for the additional
   non-home selectors (page-hero, prose, etc.) brought up to the same floor.
   ========================================================================== */
.hero h1 { font-size: clamp(42px, 6vw, 56px); }
.hero-pillars { font-size: clamp(14px, 3vw, 18px); }
.section h2 { font-size: clamp(24px, 3vw, 28px); }
.section p.lead { font-size: 18px; }
.card p { font-size: 16px; line-height: 1.6; }
.mini .m p { font-size: 16px; line-height: 1.55; }
.stat .lbl { font-size: 16px; }
.qcard blockquote { font-size: 18px; line-height: 1.6; }
.member .bio { font-size: 16px; line-height: 1.55; }
.ctaband p { font-size: 18px; }
.vs-fanfare-body > p { font-size: 18px; }
.metric-band .metric .ml { font-size: 16px; }
.award-body p { font-size: 16px; line-height: 1.6; }
.faq-a p { font-size: 16px; }
.foot .col a { font-size: 14px; }
/* Prominent CTA: the hero's primary action gets more physical + visual weight
   than the standard site-wide .btn (nav/forms keep the standard size — this
   is scoped to the hero only, not a global button-size change). */
body[data-page="home"] .hero .btn { font-size: 16px; padding: 14px 28px; min-height: 50px; }

/* ---- Non-home selectors brought up to the same floor/core-reading sizes ----
   Same scale as above, applied to the page-template classes the home trial
   didn't touch (home doesn't use .page-hero/.prose/etc.). */
.page-hero .lead { font-size: 18px; }
.prose p { font-size: 16px; line-height: 1.65; }
ul.checklist li { font-size: 16px; }
.dsection > .lead { font-size: 18px; }
.industry p { font-size: 16px; }
.hm-cell-short { font-size: 14px; }
.funnel p { font-size: 15px; }
.form-shell .hs-placeholder p { font-size: 16px; }
.hm-brief li { font-size: 16px; }
.hm-modal__body li { font-size: 16px; }
.hero-number .hn-cap { font-size: 16px; }