/* ============================================================================
   Bardel - Design System (styles.css)
   Implements the full CSS CLASS CONTRACT. Consumes ONLY var(--token) from
   design-tokens.css. Never hardcode hex here.
   Load order: design-tokens.css → styles.css.
   Awwwards-tier intent: generous negative space, big type, restrained color,
   one saturated accent per section (var(--accent), default teal).
   ============================================================================ */

/* ----------------------------------------------------------------------------
   0. STYLES.CSS LOCAL TOKEN OVERRIDES
   These live HERE, never in the frozen design-tokens.css. design-tokens.css is
   marked "no page agent may edit", and --fs-hero has exactly two consumers
   (.display + .hero__title). Rather than touch the frozen contract, V3 visual
   pass introduces a tamed display scale that ONLY those two selectors consume.
   Long two-clause headlines were dominating the viewport at the old 6.75rem max
   with dead space on the right; the tamed clamp keeps display type confident but
   balanced, and stays byte-identical across every page.
   ---------------------------------------------------------------------------- */
:root {
  /* Tamed hero/display scale (replaces direct use of --fs-hero on .display +
     .hero__title). --fs-hero in design-tokens.css is left untouched. */
  --fs-display: clamp(2.5rem, 5.2vw, 4.5rem);
}

/* ----------------------------------------------------------------------------
   1. MODERN RESET
   ---------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

p,
h1,
h2,
h3,
h4,
h5,
h6 { overflow-wrap: break-word; }

ul,
ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration: none; }

/* Focus ring: zero-specificity :where() wrapper removed so it cannot be
   silently overridden. Light surfaces use blue (5.2:1 on white). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Blue fails contrast on navy (2.6:1); lift the ring on dark sections */
.section--dark a:focus-visible,
.section--dark button:focus-visible,
.section--dark input:focus-visible,
.section--dark textarea:focus-visible,
.section--dark select:focus-visible,
.section--dark [tabindex]:focus-visible,
.section--hero a:focus-visible,
.section--hero button:focus-visible,
.footer a:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible {
  outline-color: var(--teal-bright);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

/* ---- A11y utilities ---- */
/* Skip-to-content (WCAG 2.4.1): off-screen until focused, then a visible pill.
   The <a class="skip-link" href="#main"> element lives in each page body as the
   first focusable node (the header is JS-injected, so it cannot live there). */
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2000;
  padding: 0.7rem 1.15rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  border: 1.5px solid var(--teal-bright);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-lg)));
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Visually-hidden but available to assistive tech (used by contact-form labels) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------------
   2. BASE TYPOGRAPHY (fluid scale)
   ---------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: inherit;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }

p { max-width: var(--measure); text-wrap: pretty; }

strong, b { font-weight: 600; }

small { font-size: var(--fs-sm); }

/* ---- Reusable text utilities from the contract ---- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display); /* tamed from --fs-hero; see section 0 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  text-wrap: balance;
}
/* When .display is paired with .hero__title (the enforced hero contract), the
   16ch cap + tracking from .hero__title apply on top of .display's scale. */

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  max-width: 22ch;
}

.lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 400;
  max-width: var(--measure);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text, var(--accent));
  margin-bottom: var(--space-lg);
}

.text-muted { color: var(--text-muted); }

.pullquote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: inherit;
  /* a confident serif measure: 30ch towered the long science pull-quote into a
     narrow ~18-line column. 38ch keeps the optimal 45-75ch serif measure and
     reads as an intentional statement, not a sliver. */
  max-width: 38ch;
  text-wrap: pretty;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 600;
  color: var(--cta);
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              gap var(--dur-fast) var(--ease-out);
}
.text-link::after { content: "\2192"; transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover { color: var(--teal-bright); gap: var(--space-sm); }
.text-link:hover::after { transform: translateX(3px); }
/* AA: on dark/hero bands the link blue (#2563EB) is only 3.33:1 on navy-deep; lift to teal-bright (clears 4.5:1). Hover is already teal. */
.section--dark .text-link,
.section--hero .text-link { color: var(--teal-bright); }

/* ----------------------------------------------------------------------------
   3. LAYOUT - containers, sections, accent override pattern
   ---------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-narrow);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section {
  position: relative;
  padding-block: var(--space-section);
  /* every section defaults its accent to teal; .accent-* overrides it */
  --accent: var(--teal);
}

/* Section background variants */
.section--surface {
  background: var(--surface);
  color: var(--text);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}
.section--dark .lead,
.section--dark .text-muted { color: var(--text-muted-dark); }
.section--dark .eyebrow { color: var(--accent-text, var(--accent)); }
.section--dark a:not(.btn):not(.card):hover { color: var(--white); }

.section--hero {
  background: var(--grad-hero);
  color: var(--text-on-dark);
  padding-block: 0;
}

/* Accent overrides - each sets the section's single saturated accent.
   --accent       = the saturated fill/dot/large-numeral color
   --accent-text  = an AA-safe variant for SMALL TEXT on this section's bg.
   Teal and blue clear 4.5:1 as small text on light surfaces, so they share
   the same value. Raw green (#27AE60) fails small-text contrast (2.9:1) so
   green sections route small text to --green-text (5.2:1). */
.section { --accent-text: var(--accent); }
.accent-teal  { --accent: var(--teal);  --accent-text: var(--teal); }
.accent-blue  { --accent: var(--blue);  --accent-text: var(--blue); }
.accent-navy  { --accent: var(--navy);  --accent-text: var(--navy); }
.accent-green { --accent: var(--green); --accent-text: var(--green-text); }
/* On dark sections, navy accent would vanish - lift it to a luminous teal */
.section--dark.accent-navy { --accent: var(--teal-bright); --accent-text: var(--teal-bright); }
/* On dark sections every small accent text must read on navy: use the bright variant */
.section--dark { --accent-text: var(--teal-bright); }
.section--dark.accent-teal,
.section--dark.accent-blue,
.section--dark.accent-green { --accent-text: var(--teal-bright); }

/* Vertical rhythm helpers */
.section__head { max-width: var(--max-narrow); margin-bottom: var(--space-2xl); }
.section__head .lead { margin-top: var(--space-lg); }
.section--centered .section__head { margin-inline: auto; text-align: center; }
.section--centered .section__head .section-title,
.section--centered .section__head .lead,
.section--centered .section__head .display,
.section--centered .section__head .hero__title { margin-inline: auto; }
/* a centered section also centers its CTA row reliably (replaces inline hacks) */
.section--centered .btn-row { justify-content: center; }

/* ---- Alignment utilities (replace fragile inline style="text-align:center"
   / margin-inline:auto hacks on CTA bands and centered heads). ---- */
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.center .lead,
.center .section-title,
.center .display,
.center .hero__title { margin-inline: auto; }
.center .btn-row { justify-content: center; }

/* ----------------------------------------------------------------------------
   4. NAV - premium sticky glass header
   ---------------------------------------------------------------------------- */
/* Prevent CLS while the partial injects */
[data-include] { min-height: var(--nav-h); }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background var(--dur-fast) var(--ease-out),
              backdrop-filter var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: var(--tracking-tight);
  color: var(--white);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__logo img,
.nav__logo svg { height: 38px; width: auto; }
/* The wordmark PNG is navy ink on transparent. Over the dark hero (nav is
   transparent) it would vanish, so invert it to white; once the nav becomes
   the white glass bar on scroll, drop the filter and let it read as navy. */
.nav__logo img { filter: brightness(0) invert(1); transition: filter var(--dur-fast) var(--ease-out); }
.nav.is-scrolled .nav__logo { color: var(--navy); }
.nav.is-scrolled .nav__logo img { filter: none; }
.nav__logo:hover { opacity: 0.82; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
}

.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-on-dark);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav.is-scrolled .nav__item { color: var(--slate-700); }
.nav__item:hover,
.nav__item:focus-visible { color: var(--white); }
.nav.is-scrolled .nav__item:hover,
.nav.is-scrolled .nav__item:focus-visible { color: var(--blue); }

/* active link underline */
.nav__links a.is-active {
  color: var(--white);
}
.nav.is-scrolled .nav__links a.is-active { color: var(--blue); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: 2px;
  height: 2px;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* Disclosure trigger (Solutions, Company): the button inherits nav-link look */
.nav__item--has-menu > button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* Dropdown caret */
.nav__item--has-menu > a::after,
.nav__item--has-menu > button::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur-fast) var(--ease-out);
  opacity: 0.7;
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 248px;
  padding: var(--space-sm);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility var(--dur-fast) var(--ease-out);
}
/* invisible hover bridge so the menu doesn't close in the gap */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

/* Reveal on hover or keyboard focus within the item */
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown,
li:hover > .nav__dropdown,
li:focus-within > .nav__dropdown,
.has-dropdown:hover .nav__dropdown,
.has-dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__item:hover > a::after,
.nav__item:focus-within > a::after,
.nav__item:hover > button::after,
.nav__item:focus-within > button::after { transform: rotate(225deg) translateY(2px); }

.nav__dropdown a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-700);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__dropdown a:hover,
.nav__dropdown a:focus-visible {
  background: var(--surface);
  color: var(--blue);
}
.nav__dropdown a small {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--text-muted);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Mobile toggle (hamburger) */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark);
}
.nav.is-scrolled .nav__toggle { color: var(--navy); }
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-full);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -7px; }
.nav__toggle span::after  { position: absolute; top: 7px; }

body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------------------
   5. BUTTONS - hover lift + glow
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px; /* WCAG 2.5.8 target size */
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
/* a real tactile press: settle below baseline + drop the lift shadow */
.btn:active { transform: translateY(1px); transition-duration: .08s; }

.btn--primary {
  background: var(--cta);
  color: var(--white);
  border-color: var(--cta);
}
.btn--primary:hover {
  box-shadow: var(--shadow-glow);
  background: var(--blue);
}
.btn--primary:active { box-shadow: var(--shadow-sm); }

.btn--ghost {
  background: transparent;
  color: var(--cta);
  border-color: var(--border);
}
.btn--ghost:hover {
  border-color: var(--cta);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

/* On dark backgrounds (hero, CTA band, dark sections) */
.btn--on-dark {
  background: transparent;
  color: var(--white);
  border-color: var(--border-dark);
}
.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}
/* primary stays blue with glow even on dark; ghost-on-dark inherits the outline look */
.section--dark .btn--ghost,
.section--hero .btn--ghost {
  color: var(--white);
  border-color: var(--border-dark);
}
.section--dark .btn--ghost:hover,
.section--hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ----------------------------------------------------------------------------
   6. GRID + CARDS
   ---------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.card h3 { color: var(--navy); }

/* Cards laid on dark sections */
.section--dark .card,
.section--hero .card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-dark));
  box-shadow: var(--shadow-lg);
}
.section--dark .card h3 { color: var(--white); }

/* Card with a leading accent rule. A 3px border-top crosses the rounded top
   corners squarely; clip it so the accent rule follows the card's radius for a
   cleaner, more intentional edge. The padding compensates for the inset rule. */
.card--accent {
  overflow: hidden;
  border-top: 0;
}
.card--accent::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* .card--audience - links to an audience page */
.card--audience {
  cursor: pointer;
  gap: var(--space-md);
  overflow: hidden;
}
.card--audience::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--accent) 6%, transparent),
              transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}
.card--audience:hover::before { opacity: 1; }

.card--audience .card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--navy);
}
.section--dark .card--audience .card__title { color: var(--white); }

.card--audience .card__desc {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.section--dark .card--audience .card__desc { color: var(--text-muted-dark); }

.card--audience .card__arrow {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  color: var(--accent-text, var(--accent));
  font-size: 1.1rem;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.card--audience .card__arrow::after { content: "\2192"; }
.card--audience:hover .card__arrow {
  background: var(--accent);
  color: var(--white);
  transform: translateX(4px);
}

/* feature block (icon + title + copy) */
.feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg) 0;
}
.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 1.4rem;
}
.feature h3 { color: var(--navy); }
.section--dark .feature h3 { color: var(--white); }
.feature p { color: var(--text-muted); }
.section--dark .feature p { color: var(--text-muted-dark); }

/* ----------------------------------------------------------------------------
   7. STATS + CHIPS
   ---------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: 500;
}

/* stats on dark surfaces */
.section--dark .stat,
.section--hero .stat {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .stat__label { color: var(--text-muted-dark); }

/* chips / pills */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.45rem 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-text, var(--accent));
  background: var(--surface); /* fallback for browsers without color-mix (Safari < 16.2) */
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: var(--radius-full);
}
.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  flex: none;
}
.section--dark .chip {
  color: var(--white);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---- Problem card: a clean label + sentence card for NON-NUMERIC problem
   concepts. REPLACES the misuse of .stat__num (a 2.5-3.75rem numerals-only
   face) to render words like "Dark" / "No data" / "Unmonitored" / "EHR" /
   "Trial". Real numeric stats stay on .stat and keep counting up. ---- */
.problem-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.problem-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.problem-card__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text, var(--accent));
}
.problem-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);  /* sized so the longest title fits one line for card consistency */
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}
.problem-card__body {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--text-muted);
}
/* problem cards on dark sections */
.section--dark .problem-card,
.section--hero .problem-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .problem-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-dark));
  box-shadow: var(--shadow-lg);
}
.section--dark .problem-card__label { color: var(--teal-bright); }
.section--dark .problem-card__title { color: var(--white); }
.section--dark .problem-card__body { color: var(--text-muted-dark); }

/* ---- Revenue / economics card (promoted from clinicians.html). Two modes:
   .rev-card__amount renders a real dollar figure at a large display size;
   .rev-card--qual renders a QUALITATIVE phrase ("Day one", "Scales with your
   panel") at a properly-sized --fs-h3 display headline in navy, so it never
   masquerades as a billed dollar figure. Use .rev-card--qual on BOTH cards in a
   pair so their headlines match. ---- */
.rev-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) var(--space-lg);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  will-change: transform;
}
.rev-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.rev-card__phase {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text, var(--accent));
}
/* numeric mode: a real dollar figure, large display scale */
.rev-card__amount {
  display: flex;
  align-items: baseline;
  gap: .35rem;
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tighter);
  color: var(--accent);
  line-height: 1;
}
.rev-card__amount .rev-card__num { font-size: clamp(2.5rem, 5vw, 3.5rem); }
.rev-card__amount .rev-card__unit { font-size: var(--fs-lg); color: var(--text-muted); font-weight: 500; }
/* qualitative mode: phrase headline reads as a card title, NOT a dollar amount */
.rev-card--qual .rev-card__phrase {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}
.rev-card__note {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}
.section--dark .rev-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .rev-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-dark));
  box-shadow: var(--shadow-lg);
}
.section--dark .rev-card--qual .rev-card__phrase { color: var(--white); }
.section--dark .rev-card__phase { color: var(--teal-bright); }
.section--dark .rev-card__note { color: var(--text-muted-dark); }
/* two-up earnings frame (also promoted from clinicians.html) */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 768px) {
  .rev-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   8. STEPPER - connecting line
   ---------------------------------------------------------------------------- */
.stepper {
  position: relative;
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(5, 1fr);
}

/* the connecting line that the scroll animation can grow (scaleX driven by JS) */
.stepper__line {
  position: absolute;
  top: 24px;             /* aligns with center of .step__num */
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 55%, transparent),
              var(--accent));
  transform-origin: left center;
  transform: scaleX(var(--line-progress, 0));
  transition: transform var(--dur-slow) var(--ease-out);
  z-index: 0;
}
.section--dark .stepper__line {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 70%, transparent),
              var(--teal-bright));
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: flex-start;
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
.section--surface .step__num { box-shadow: 0 0 0 6px var(--white); }
.section--dark .step__num {
  box-shadow: 0 0 0 6px var(--bg-dark);
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}
.section--dark .step__title { color: var(--white); }

.step__desc {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-muted);
}
.section--dark .step__desc { color: var(--text-muted-dark); }

/* ----------------------------------------------------------------------------
   9. TEAM
   ---------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl) var(--space-lg);
}

.member {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}

.member__photo,
.member__monogram {
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-sm);
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}

/* gradient-navy initials fallback */
.member__monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.02em;
  color: var(--white);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 70%, var(--navy-lockup) 100%);
  border: 1px solid var(--border-dark);
}

.member__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--navy);
}
.section--dark .member__name { color: var(--white); }

.member__role {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent-text, var(--accent));
}

.member__bio {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-muted);
}
.section--dark .member__bio { color: var(--text-muted-dark); }

/* ----------------------------------------------------------------------------
   10. SPLIT - shared two-column media + copy primitive
   (promoted from per-page inline <style> blocks; pages keep only ratio tweaks)
   ---------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}
/* ~55/45 ratio for copy + media bands (text leads). Mirror with --flip. */
.split--media { grid-template-columns: 1.05fr 0.95fr; }
.split--media.split--flip,
.split--media.split--reverse { grid-template-columns: 0.95fr 1.05fr; }
.split--reverse .split__media,
.split--flip .split__media { order: 2; }
.split__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.section--dark .split__media img { border-color: var(--border-dark); }
@media (max-width: 900px) {
  .split,
  .split--media,
  .split--media.split--flip,
  .split--media.split--reverse { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .split--reverse .split__media,
  .split--flip .split__media { order: 0; }
}

/* Figure + caption + diagram primitives for inline SVG response diagrams.
   (NOTE: the forbidden institutional logo-wall .logo-strip block was deleted
   here so the pattern cannot be reintroduced.) */
.diagram { width: 100%; height: auto; display: block; }
.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.figure__caption {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}
.section--dark .figure__caption { color: var(--text-muted-dark); }

/* ---- Photo figure: the ONE consistent treatment for every real-people photo
   site-wide (rounded corners, shadow, 3:2 frame, cover fit). Byte-identical
   page to page so hospitals/clinicians/payers/pharma/government/science/our-story
   all match the patients consultation photo. ---- */
.photo-figure {
  display: block;
  margin: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.photo-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section--dark .photo-figure { border-color: var(--border-dark); }
/* shadow-only hover lift (NO transform: avoids layout cost on a large raster) */
.photo-figure:hover { box-shadow: var(--shadow-glow), var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) {
  .photo-figure { transition: none; }
}
/* optional caption sitting under the framed photo */
.photo-figure__cap {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}
.section--dark .photo-figure__cap { color: var(--text-muted-dark); }

/* ---- Brand panel: gradient fallback with the SAME radius/shadow/aspect as
   .photo-figure, for any page where a stock download fails. Never leave a
   broken <img>; drop in <div class="brand-panel"></div> instead. ---- */
.brand-panel {
  display: block;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-dark);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--grad-hero);
}

/* ----------------------------------------------------------------------------
   11. HERO
   ---------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--grad-hero);
  color: var(--text-on-dark);
  overflow: hidden;
}

#signal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-3xl);
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--teal-bright);
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-display); /* tamed from --fs-hero; see section 0 */
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  max-width: 16ch;
  text-wrap: balance;
}
/* hero emphasis word: subtle italic so a single phrase can carry the line */
.hero__title em,
.display em {
  font-style: italic;
  color: var(--teal-bright);
}
/* on light heroes/sections the bright teal can wash out; route to AA-safe teal */
.section:not(.section--dark):not(.section--hero) .display em,
.section:not(.section--dark):not(.section--hero) .hero__title em {
  color: var(--teal-text);
}

.hero__sub {
  margin-top: var(--space-lg);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--text-on-dark);
  opacity: 0.9;
  max-width: 56ch;
}

.hero .btn-row { margin-top: var(--space-xl); }

/* ---- Split hero: balanced ~55/45 text + visual (promotes the clinicians
   .aud-hero pattern into the shared sheet). Use on a <section class="hero
   section--hero hero--split"> with a `.hero__grid` wrapper holding a text column
   and a `.hero__media` column. This is what kills the "giant text wall + dead
   space on the right" once the headline is also one tight line + <em>. ---- */
.hero--split { min-height: auto; }
.hero--split .hero__inner { width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-3xl);
}
/* the visual side of a split hero: framed media card on the dark hero bg */
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-dark);
}
.hero__media img { display: block; width: 100%; height: auto; }
/* a padded variant for when the visual is an inline-SVG diagram, not a photo */
.hero__media--figure {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: rgba(255, 255, 255, 0.04);
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .hero__media { order: 2; }
}

/* scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-xl);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.hero__cue span {
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--teal-bright), transparent);
  animation: cue 2s var(--ease-in-out) infinite;
}
@keyframes cue {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cue span { animation: none; opacity: 0.6; }
}

/* ----------------------------------------------------------------------------
   11b. RESPONDER BAND - clean responsive HTML/CSS replacement for the fragile
   hand-positioned inline-SVG on payers.html. A covered population splits into
   strong / moderate / non / adverse responder rows; each row's width encodes
   its share via an inline --w custom prop. No <text> coordinates to misalign.
   Markup contract:
     <figure class="responder-band">
       <figcaption class="responder-band__head">...</figcaption>
       <div class="responder-band__track">
         <div class="responder-band__row responder-band__row--strong" style="--w:46%">
           <span class="responder-band__name">Strong responders</span>
           <span class="responder-band__meta">Keep covering</span>
         </div>
         ... moderate / non / adverse ...
       </div>
       <p class="responder-band__note">Illustrative. Every band carries a complete audit trail.</p>
     </figure>
   ---------------------------------------------------------------------------- */
.responder-band {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  background: var(--white);
}
.section--dark .responder-band,
.section--hero .responder-band {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
}
.responder-band__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.responder-band__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600; /* unified with every other eyebrow site-wide */
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--accent-text, var(--accent));
}
.section--dark .responder-band__eyebrow { color: var(--teal-bright); }
.responder-band__sub {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.section--dark .responder-band__sub { color: var(--text-muted-dark); }
.responder-band__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.responder-band__row {
  --w: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: var(--w);
  min-width: max-content;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: var(--row-color, var(--navy));
  transition: filter var(--dur-fast) var(--ease-out);
}
.responder-band__row:hover { filter: brightness(1.06); }
.responder-band__name { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.responder-band__meta { font-size: var(--fs-xs); opacity: 0.92; white-space: nowrap; }
/* responder tiers map to the token palette (green = keep, navy/teal = act) */
.responder-band__row--strong   { --row-color: var(--green); }
.responder-band__row--moderate { --row-color: var(--teal); }
.responder-band__row--non      { --row-color: var(--blue-soft); }
.responder-band__row--adverse  { --row-color: var(--navy); }
.responder-band__note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.section--dark .responder-band__note { color: var(--text-muted-dark); }
@media (max-width: 560px) {
  /* on the narrowest screens, let every band fill the width so labels stay legible */
  .responder-band__row { width: 100% !important; }
}

/* ----------------------------------------------------------------------------
   12. BANNER LINE - full-width emphasis sentence
   ---------------------------------------------------------------------------- */
.banner-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  max-width: 32ch;
  margin-top: var(--space-2xl);
  padding-left: var(--space-lg);
  border-left: 3px solid var(--accent);
  text-wrap: balance;
}
.section--dark .banner-line { color: var(--white); }

/* ----------------------------------------------------------------------------
   13. FOOTER
   ---------------------------------------------------------------------------- */
.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-3xl) var(--space-xl);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-2xl) var(--space-lg);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border-dark);
}
.footer__col h4,
.footer__col .footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted-dark);
  margin-bottom: var(--space-md);
}
.footer__col a,
.footer__col p {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-on-dark);
  opacity: 0.86;
  margin-bottom: var(--space-sm);
  transition: color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  max-width: 30ch;
}
.footer__col a:hover { color: var(--teal-bright); opacity: 1; }

/* The footer is not .section--dark, so the dark .text-muted override never
   reaches it. Scope muted footer text to the dark-bg token (7.9:1 on navy-deep). */
.footer .text-muted { color: var(--text-muted-dark); opacity: 1; }

.footer__brand .nav__logo,
.footer__brand .footer__logo {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-md);
  display: inline-block;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-xl);
  font-size: var(--fs-xs);
  color: var(--text-muted-dark);
}
/* Footer sits on the dark canvas; invert the navy wordmark PNG to white. */
.footer__wordmark { display: inline-flex; align-items: center; }
.footer__wordmark img { filter: brightness(0) invert(1); opacity: 0.92; }
.footer__wordmark:hover img { opacity: 1; }
.footer__legal a:hover { color: var(--teal-bright); }

/* ----------------------------------------------------------------------------
   14. MOTION HOOKS - reveal on scroll, count-up
   ---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* allow data-reveal-delay attr to feed the custom prop without JS */
.reveal[data-reveal-delay] { --reveal-delay: attr(data-reveal-delay number, 0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.counter { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   15. RESPONSIVE - mobile-first refinements
   ---------------------------------------------------------------------------- */

/* ≤1024px: tablet / small desktop - collapse 4-up grids, ease the stepper */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }

  .stepper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }
  .stepper__line { display: none; }

  .footer__cols {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer__brand { grid-column: 1 / -1; }
}

/* ≤768px: mobile - single column, slide-in menu */
@media (max-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: repeat(2, 1fr); }

  .stepper { grid-template-columns: 1fr; gap: var(--space-lg); }

  .section__head { margin-bottom: var(--space-xl); }

  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; }

  /* ---- Mobile nav: full-screen slide-in panel ---- */
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-lg) clamp(1.25rem, 5vw, 2.5rem) var(--space-2xl);
    background: var(--white);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-mid) var(--ease-out), visibility var(--dur-mid) var(--ease-out);
  }
  body.nav-open .nav__links {
    transform: translateX(0);
    visibility: visible;
  }
  body.nav-open { overflow: hidden; }

  /* when the menu is open the bar is opaque regardless of scroll state */
  body.nav-open .nav {
    background: var(--white);
    border-bottom-color: var(--border);
  }
  body.nav-open .nav__logo,
  body.nav-open .nav__toggle { color: var(--navy); }

  .nav__item {
    color: var(--slate-700);
    padding: var(--space-md) 0;
    font-size: var(--fs-lg);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    justify-content: space-between;
  }
  .nav__links a.is-active::after { display: none; }

  /* dropdowns become inline accordions on mobile */
  .nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 var(--space-sm) var(--space-md);
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease-out);
  }
  .nav__dropdown::before { display: none; }
  .nav__item.is-open .nav__dropdown,
  .nav__item:focus-within .nav__dropdown { max-height: 480px; }
  .nav__dropdown a { font-size: var(--fs-body); color: var(--slate-700); }

  /* The CTA pills are a sibling of .nav__links in the markup, so without this
     they would float in the collapsed top bar and collide with the hamburger.
     On mobile they belong INSIDE the off-canvas panel: pin them to the same
     fixed sheet as .nav__links, anchored to the bottom, and slide/hide them in
     lockstep with body.nav-open. */
  .nav__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
    margin-top: 0;
    padding: var(--space-lg) clamp(1.25rem, 5vw, 2.5rem) var(--space-2xl);
    background: var(--white);
    border-top: 1px solid var(--border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-mid) var(--ease-out),
                visibility var(--dur-mid) var(--ease-out);
  }
  body.nav-open .nav__cta {
    transform: translateX(0);
    visibility: visible;
  }
  .nav__cta .btn { width: 100%; }
  /* the open panel's scroll area must clear the pinned CTA footer */
  .nav__links { padding-bottom: 9rem; }

  /* hero breathing room on small screens */
  .hero__inner { padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl); }
  .hero__title { max-width: 100%; }

  .banner-line { margin-top: var(--space-xl); }

  .footer__cols { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* very small phones */
@media (max-width: 420px) {
  .team-grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================================
   === OVERHAUL: responsive system + components ===
   Additive layer (loads LAST, so it wins on source order without !important).
   Goals: a unified mobile-nav breakpoint, a fluid type/spacing safety net that
   never overflows 320-430px phones, and six reusable component classes the page
   agents apply directly. Desktop appearance is preserved: every component
   below either targets a NEW class name or only adds mobile/responsive behavior.
   STANDARDIZED BREAKPOINTS (use these, do not invent new ones per page):
     1024px  tablet  - 4-up -> 2-up grids, stepper eases (existing)
      900px  NAV/STACK - hamburger appears; .split, .hero__grid, .media-split,
                         .compare all collapse to one column (UNIFIED here)
      768px  phone   - single-column grids (existing)
      560px  small   - tighten paddings, viz legibility floor
      430px  / 360px tiny - last-resort overflow guards
   ============================================================================ */
:root {
  /* Local breakpoint marker tokens (documentation + future JS lookups). */
  --bp-tablet: 1024px;
  --bp-nav:     900px;   /* mirror of MOBILE_QUERY in js/main.js */
  --bp-phone:   768px;
  --bp-small:   560px;
  --bp-tiny:    430px;
}

/* ----------------------------------------------------------------------------
   OVERHAUL A. GLOBAL OVERFLOW + TOUCH SAFETY NET
   Nothing may exceed the viewport on 320-430px. Media is clamped, long tokens
   wrap, and interactive targets clear 44px.
   ---------------------------------------------------------------------------- */
img, svg, video, canvas, picture, iframe, table { max-width: 100%; }
/* never let a fixed-width inline SVG or a wide table push horizontal scroll */
svg { height: auto; }
/* long unbroken tokens (emails, URLs) must wrap inside narrow columns */
.rail-block__value, .rail-block__value a,
.footer__col a[href^="mailto"],
.contact-rail a, .break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
/* generous tap targets for inline text-links / chips on touch devices */
@media (hover: none) and (pointer: coarse) {
  .text-link, .nav__dropdown a { min-height: 44px; }
  .chip { min-height: 36px; }
}

/* ----------------------------------------------------------------------------
   OVERHAUL B. .viz  -  responsive inline-SVG wrapper
   The ONE wrapper every inline data-SVG lives in. The SVG fills the wrapper
   fluidly (width:100%, height:auto) and never overflows. Control the drawing's
   maximum rendered size with --viz-max (default: none = fill column). Center a
   capped viz with .viz--center. The wrapper also gives a hook to lift in-SVG
   <text> legibility on phones (see OVERHAUL G).
   USAGE:
     <div class="viz" style="--viz-max:640px">
       <svg viewBox="0 0 720 280" preserveAspectRatio="xMidYMid meet" role="img"
            aria-labelledby="t d"> ... </svg>
     </div>
   ---------------------------------------------------------------------------- */
.viz {
  --viz-max: none;
  width: 100%;
  max-width: var(--viz-max);
  margin: 0;
}
.viz > svg {
  display: block;
  width: 100%;
  height: auto;
}
.viz--center { margin-inline: auto; }
/* a framed variant: the same card treatment used for diagram panels on dark */
.viz--panel {
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.section--dark .viz--panel,
.section--hero .viz--panel {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
@media (max-width: 560px) {
  .viz--panel { padding: var(--space-lg); }
}

/* ----------------------------------------------------------------------------
   OVERHAUL C. .media-split / .media-split--reverse
   A robust text + media two-column that STACKS to one column at the unified
   900px nav/stack breakpoint. Distinct from the existing .split (kept for back-
   compat); use .media-split on new/overhauled blocks. The media column carries
   .media-split__media; the copy column is any sibling.
   USAGE:
     <div class="media-split">
       <div class="media-split__copy"> ...headline + lead... </div>
       <div class="media-split__media"> <figure class="photo-figure">..</figure> </div>
     </div>
     <!-- mirror: put media first visually on desktop -->
     <div class="media-split media-split--reverse"> ... </div>
   ---------------------------------------------------------------------------- */
.media-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  align-items: center;
}
.media-split--reverse .media-split__media { order: -1; }
/* equal-width 50/50 variant */
.media-split--even { grid-template-columns: 1fr 1fr; }
.media-split__media { min-width: 0; } /* prevents SVG/img from forcing overflow */
.media-split__copy  { min-width: 0; }
@media (max-width: 900px) {
  .media-split,
  .media-split--even { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .media-split--reverse .media-split__media { order: 0; } /* media back under copy */
}

/* ----------------------------------------------------------------------------
   OVERHAUL D. .feature-cards  -  equal-height, top-aligned card grid
   Auto-fits 3-up on desktop, 2-up on tablet, 1-up on phone, with even gaps and
   equal row heights (grid stretches all cards to the tallest in the row). Pair
   with the existing .card / .feature for each item.
   USAGE:
     <div class="feature-cards feature-cards--3">
       <article class="card"> ... </article>  (x N)
     </div>
   Modifiers: --2, --3 (default), --4 set the desktop column count.
   ---------------------------------------------------------------------------- */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;       /* equal-height cards */
}
.feature-cards > * { height: 100%; }       /* each item fills its grid cell */
.feature-cards--2 { grid-template-columns: repeat(2, 1fr); }
.feature-cards--3 { grid-template-columns: repeat(3, 1fr); }
.feature-cards--4 { grid-template-columns: repeat(4, 1fr); }
/* auto-fit variant for "as many as fit" without choosing a count */
.feature-cards--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
@media (max-width: 1024px) {
  .feature-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-cards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .feature-cards,
  .feature-cards--2,
  .feature-cards--3,
  .feature-cards--4 { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   OVERHAUL E. .emblem  -  small rounded icon tile above a card title
   A 46px rounded tile holding an inline-SVG glyph in the section accent. Sits
   above a heading the way .feature__icon does, but as a standalone, reusable
   unit (use inside .card, .problem-card, hero media, anywhere).
   USAGE:
     <span class="emblem" aria-hidden="true">
       <svg viewBox="0 0 24 24" width="24" height="24" fill="none"
            stroke="currentColor" stroke-width="1.7"> ... </svg>
     </span>
   ---------------------------------------------------------------------------- */
.emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: none;                 /* never let flex shrink the tile */
  aspect-ratio: 1 / 1;        /* stays a perfect square in any flex/grid context */
  padding: 0;                 /* icon is centered by flex, no padding drift */
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text, var(--accent));
  margin-bottom: var(--space-md);
  line-height: 0;             /* kills inline-svg baseline gap that mis-centered glyphs */
}
/* The glyph: FIXED 24px box, never auto-stretched by the global `svg{height:auto}`
   reset (which made emblem icons render tiny/inconsistent). !important is scoped
   ONLY to the emblem glyph to defeat that reset; it cannot leak elsewhere. */
.emblem > svg {
  width: 24px !important;
  height: 24px !important;
  flex: none;
  display: block;
  stroke: currentColor;
  fill: none;
}
/* inline emblem (no bottom margin) for use beside text in a row */
.emblem--inline { margin-bottom: 0; }
/* size modifiers */
.emblem--sm { width: 40px; height: 40px; }
.emblem--sm > svg { width: 20px !important; height: 20px !important; }
.emblem--lg { width: 56px; height: 56px; border-radius: var(--radius-lg); }
.emblem--lg > svg { width: 28px !important; height: 28px !important; }
/* solid + outline variants */
.emblem--solid { background: var(--accent); color: var(--white); }
.emblem--solid.emblem--solid { color: var(--white); } /* keep glyph white even on accent-green (which routes text to green-text) */
.emblem--ring  {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border));
}
.section--dark .emblem {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--teal-bright);
}
.section--dark .emblem--solid { background: var(--accent); color: var(--white); }
.section--dark .emblem--ring { border-color: var(--border-dark); }

/* ----------------------------------------------------------------------------
   OVERHAUL F. .compare / .compare__col  -  "old way vs Bardel way"
   Two aligned columns that stack at the 900px breakpoint. The "ours" column is
   visually elevated with the section accent. Matches the markup already shipped
   on pharma.html (.compare, .compare__col, .compare__col--ours, .compare__list)
   and is the reusable contract for every old-vs-new block site-wide.
   USAGE:
     <div class="compare">
       <div class="compare__col">
         <h3>What everyone else has</h3>
         <ul class="compare__list"> <li>...</li> </ul>
       </div>
       <div class="compare__col compare__col--ours">
         <h3>What Bardel records</h3>
         <ul class="compare__list"> <li>...</li> </ul>
       </div>
     </div>
   ---------------------------------------------------------------------------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-2xl);
}
.compare__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.compare__col h3 { color: var(--navy); }
/* the "ours" column: accent rail + tint, so the contrast reads instantly */
.compare__col--ours {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    var(--white);
  box-shadow: var(--shadow-md);
}
.compare__col--ours h3 { color: var(--accent-text, var(--accent)); }
.compare__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.compare__list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-muted);
}
/* a muted dash for the "old way" list, an accent check for "ours" */
.compare__col .compare__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 12px; height: 2px;
  border-radius: var(--radius-full);
  background: var(--slate-400);
}
.compare__col--ours .compare__list li {
  color: var(--text);
}
.compare__col--ours .compare__list li::before {
  content: "";
  top: 0.28em;
  width: 16px; height: 9px;
  background: none;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  transform: rotate(-45deg);
}
/* compare blocks on dark sections */
.section--dark .compare__col {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .compare__col h3 { color: var(--white); }
.section--dark .compare__col--ours h3 { color: var(--teal-bright); }
.section--dark .compare__list li { color: var(--text-muted-dark); }
.section--dark .compare__col--ours .compare__list li { color: var(--text-on-dark); }
@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   OVERHAUL G. UNIFIED MOBILE NAV  (<= 900px)
   Extends the hamburger + off-canvas panel UP to 900px so it matches the
   .split / .hero__grid stack point and the JS MOBILE_QUERY. This block loads
   after the legacy <=768px nav rules, so it governs the 769-900px band that
   previously showed a cramped desktop nav with no working menu. Desktop (>900px)
   is untouched.
   ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-lg) clamp(1.25rem, 5vw, 2.5rem) 9rem;
    background: var(--white);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-mid) var(--ease-out),
                visibility var(--dur-mid) var(--ease-out);
  }
  body.nav-open .nav__links { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; } /* scroll-lock while menu open */

  /* opaque bar + dark glyphs while the menu is open, regardless of scroll pos */
  body.nav-open .nav { background: var(--white); border-bottom-color: var(--border); }
  body.nav-open .nav__logo,
  body.nav-open .nav__toggle { color: var(--navy); }
  body.nav-open .nav__logo img { filter: none; }

  .nav__item {
    color: var(--slate-700);
    padding: var(--space-md) 0;
    min-height: 44px;
    font-size: var(--fs-lg);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    justify-content: space-between;
  }
  .nav__links a.is-active::after { display: none; }

  /* dropdowns become inline accordions */
  .nav__dropdown {
    position: static;
    transform: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 0 0 var(--space-sm) var(--space-md);
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-mid) var(--ease-out);
  }
  .nav__dropdown::before { display: none; }
  .nav__item.is-open .nav__dropdown { max-height: 520px; }
  .nav__dropdown a { font-size: var(--fs-body); color: var(--slate-700); min-height: 44px; }

  /* CTA pills pinned to the bottom of the off-canvas sheet */
  .nav__cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1001;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
    margin-top: 0;
    padding: var(--space-lg) clamp(1.25rem, 5vw, 2.5rem) var(--space-2xl);
    background: var(--white);
    border-top: 1px solid var(--border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-mid) var(--ease-out),
                visibility var(--dur-mid) var(--ease-out);
  }
  body.nav-open .nav__cta { transform: translateX(0); visibility: visible; }
  .nav__cta .btn { width: 100%; min-height: 48px; }
}

/* ----------------------------------------------------------------------------
   OVERHAUL H. IN-SVG TEXT LEGIBILITY FLOOR + DIAGRAM REFLOW HELPERS
   Wide landscape data-SVGs become illegible when squeezed onto a phone. Page
   agents wrap the phone-only fallback in .viz-mobile-only and the desktop
   diagram in .viz-desktop-only; this toggles them at the small breakpoint so a
   tall, readable stack replaces the crammed horizontal chart. Also caps how far
   a capped .viz can shrink so it does not collapse below readable size.
   ---------------------------------------------------------------------------- */
.viz-mobile-only { display: none; }
@media (max-width: 560px) {
  .viz-desktop-only { display: none; }
  .viz-mobile-only  { display: block; }
  /* let edge-to-edge diagrams use the full phone width inside padded containers */
  .viz--bleed {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

/* ----------------------------------------------------------------------------
   OVERHAUL I. SPACING / GRID CONSISTENCY PATCHES
   Targeted fixes for the inline-gap and inner-grid issues the audit flagged,
   without touching page copy. All additive, class-scoped.
   ---------------------------------------------------------------------------- */
/* inner 2x2 stat blocks must stay 2-up on phones, not collapse to a 4-tall stack */
@media (max-width: 768px) {
  .grid--2.grid--keep-2up,
  .grid--keep-2up { grid-template-columns: 1fr 1fr; gap: var(--space-md); }
}
/* retain a compact 2-up stat band on small phones where it reads better stacked-2 */
@media (max-width: 560px) {
  .grid--keep-2up.grid--keep-2up { grid-template-columns: 1fr 1fr; }
}
/* large stat numerals: equalize card heights in the 2-up tablet band */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid--4 > .stat,
  .grid--4 > .problem-card { min-height: 100%; }
}

/* ============================================================================
   17. CHART SYSTEM  (js/charts.js / ApexCharts)
   The ONE host element every ApexChart renders into is `.viz__chart[data-chart]`.
   It sits inside the existing `.viz` (or `.viz--panel`) wrapper so it inherits
   the responsive width:100% behavior. A sensible min-height guarantees the chart
   has room to draw BEFORE/■WITHOUT any scroll (so a headless screenshot captures
   it), and ApexCharts then fills the host fluidly.
   USAGE:
     <div class="viz viz--panel">
       <div class="viz__chart" data-chart="responseTrajectory" ...></div>
     </div>
   ============================================================================ */
.viz__chart {
  width: 100%;
  min-height: 300px;          /* room for the chart before Apex measures it */
  /* tabular-aligned axis numerals when Apex inherits the body font */
  font-variant-numeric: tabular-nums;
}
/* let pages tune height per instance without inline JS */
.viz__chart[data-height] { min-height: auto; }
/* Apex injects its own sized SVG; keep it fluid and overflow-safe. */
.viz__chart .apexcharts-canvas { width: 100% !important; }
.viz__chart .apexcharts-svg { width: 100%; height: auto; overflow: hidden; }
/* the dashed baseline annotation label should never be clipped by the panel */
.viz--panel { overflow: visible; }
@media (max-width: 560px) {
  .viz__chart { min-height: 240px; }
}

/* ---- .compare-viz : the two-panel "old way vs new" chart frame ----
   LEFT panel hosts data-chart="guessScatter" (the ambiguous 0-10 read);
   RIGHT panel (.compare-viz__panel--ours) hosts data-chart="oldWayVsNew"
   (the clean objective response curve). Stacks at the 900px nav/stack point.
   Each panel is an independent, individually-screenshot-safe chart container.
   USAGE:
     <div class="compare-viz">
       <figure class="compare-viz__panel">
         <figcaption class="compare-viz__label">The old way · a 0-10 guess</figcaption>
         <div class="viz__chart" data-chart="guessScatter" data-points="6,5,7,4,6,8,5"></div>
       </figure>
       <figure class="compare-viz__panel compare-viz__panel--ours">
         <figcaption class="compare-viz__label">The Bardel way · an objective signal</figcaption>
         <div class="viz__chart" data-chart="oldWayVsNew" data-color="teal"></div>
       </figure>
     </div>
   ------------------------------------------------------------------------ */
.compare-viz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin: 0;
}
.compare-viz__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  min-width: 0;               /* lets the inner SVG shrink, never overflow */
}
/* the "ours" panel reads as the elevated, correct answer */
.compare-viz__panel--ours {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    var(--white);
  box-shadow: var(--shadow-md);
}
.compare-viz__label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
}
.compare-viz__panel--ours .compare-viz__label { color: var(--accent-text, var(--accent)); }
.compare-viz__panel .viz__chart { min-height: 260px; }
/* compare-viz on dark sections */
.section--dark .compare-viz__panel,
.section--hero .compare-viz__panel {
  background: rgba(255,255,255,0.04);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .compare-viz__panel--ours {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    rgba(255,255,255,0.04);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-dark));
}
.section--dark .compare-viz__label { color: var(--text-muted-dark); }
.section--dark .compare-viz__panel--ours .compare-viz__label { color: var(--teal-bright); }
@media (max-width: 900px) {
  .compare-viz { grid-template-columns: 1fr; }
}

/* ============================================================================
   18. CONCEPTUAL-DIAGRAM COMPONENTS  (premium, aligned, responsive)
   Six reusable building blocks that replace the repeated hand-drawn inline SVGs.
   All consume brand tokens, use fl/grid alignment (no hand-placed <text> coords
   to misalign), are viewBox-free where possible (CSS layout, not absolute SVG),
   and stack cleanly on phones. The icon glyphs come from the emblem icon kit.
   Each component's paste-able markup contract lives in the FOUNDATION contract.
   ============================================================================ */

/* shared diagram primitives */
.diagram-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.section--dark .diagram-node,
.section--hero .diagram-node {
  background: rgba(255,255,255,0.05);
  border-color: var(--border-dark);
  color: var(--white);
  box-shadow: none;
}
.diagram-node .emblem { margin-bottom: 0; }

/* (a) ---- .signal-hub : N inputs -> ONE RESPONSE SIGNAL -> a contained badge.
   FIXES the old overflow where the "Working / a clear answer" label escaped its
   box. The badge is a flex pill that grows with its own content, so the text can
   never spill. CSS grid lays out the three zones; on phones they stack. ---- */
/* Robust VERTICAL funnel: a row of input chips -> the response signal -> the
   answer pill. Stacks top-to-bottom so it never overlaps or collapses, at any
   container width (the old 3-column grid crammed inside narrow figure cards). */
.signal-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  margin: 0;
}
.signal-hub__inputs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
}
.signal-hub__inputs .diagram-node { justify-content: center; }
/* a short vertical connector that visually funnels the inputs into the signal */
.signal-hub__core::before {
  content: "";
  width: 2px;
  height: var(--space-md);
  margin-bottom: 2px;
  background: linear-gradient(var(--border), transparent);
}
.section--dark .signal-hub__core::before,
.section--hero .signal-hub__core::before {
  background: linear-gradient(var(--border-dark), transparent);
}
.signal-hub__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}
.signal-hub__signal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(96px, 13vw, 132px);
  height: clamp(96px, 13vw, 132px);
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 50% 38%,
              color-mix(in srgb, var(--accent) 26%, transparent),
              color-mix(in srgb, var(--accent) 8%, transparent) 70%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--accent-text, var(--accent));
}
.section--dark .signal-hub__signal,
.section--hero .signal-hub__signal {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-dark));
  color: var(--teal-bright);
}
.signal-hub__signal svg { width: 46%; height: 46%; }
.signal-hub__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: 16ch;
}
.section--dark .signal-hub__label { color: var(--text-muted-dark); }
/* the contained answer badge - a flex pill that grows to fit its label */
.signal-hub__answer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 100%;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
  color: var(--green-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  white-space: normal;        /* allow wrap inside the pill, never overflow */
}
.section--dark .signal-hub__answer,
.section--hero .signal-hub__answer { color: var(--white); }
.signal-hub__answer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--green);
  color: var(--white);
}
.signal-hub__answer-icon svg { width: 13px; height: 13px; }
.signal-hub__answer-sub { font-weight: 500; color: var(--text-muted); }
.section--dark .signal-hub__answer-sub,
.section--hero .signal-hub__answer-sub { color: var(--text-muted-dark); }
/* the connective flow lines (decorative, hidden on stack) */
.signal-hub__flow { width: 100%; height: 2px; }
@media (max-width: 720px) {
  .signal-hub { gap: var(--space-md); }
  .signal-hub__inputs { flex-direction: row; flex-wrap: wrap; }
}

/* (b) ---- .process-timeline : Capture/Measure/Match/Bill/Learn nodes on a line ---- */
.process-timeline {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
}
/* the connective line behind the icon row */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 28px;                  /* center of the 56px icon */
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  z-index: 0;
}
.section--dark .process-timeline::before {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--accent) 70%, transparent), var(--teal-bright));
}
.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
}
.process-step .emblem {
  width: 56px; height: 56px; margin-bottom: 0;
  background: var(--accent);
  color: var(--white);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
.section--surface .process-step .emblem { box-shadow: 0 0 0 6px var(--surface); }
.section--dark .process-step .emblem { box-shadow: 0 0 0 6px var(--bg-dark); }
.process-step .emblem > svg { width: 26px !important; height: 26px !important; }
.process-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
}
.section--dark .process-step__title { color: var(--white); }
.process-step__desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); max-width: 22ch; }
.section--dark .process-step__desc { color: var(--text-muted-dark); }
@media (max-width: 900px) {
  .process-timeline { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--space-xl); }
  .process-timeline::before {
    top: 0; bottom: 0; left: 28px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  }
  .process-step { flex-direction: row; text-align: left; align-items: flex-start; }
  .process-step__desc { max-width: none; }
}

/* (c) ---- .device-layer : phone/watch/strap/monitor with a Trak+ layer over them ---- */
.device-layer {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
}
.device-layer__layer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--teal), var(--teal-bright));
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-tight);
  box-shadow: var(--shadow-teal-glow);
}
.device-layer__layer .emblem {
  margin-bottom: 0; width: 30px; height: 30px;
  background: rgba(255,255,255,0.18); color: var(--white);
}
.device-layer__layer .emblem > svg { width: 18px !important; height: 18px !important; }
.device-layer__connectors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.device-layer__connectors > span {
  height: 18px;
  border-left: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  margin-inline: auto;
}
.device-layer__devices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
.device-layer__device {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}
.section--dark .device-layer__device,
.section--hero .device-layer__device {
  background: rgba(255,255,255,0.05); border-color: var(--border-dark);
  color: var(--text-muted-dark); box-shadow: none;
}
.device-layer__device .emblem { margin-bottom: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); }
@media (max-width: 560px) {
  .device-layer__devices,
  .device-layer__connectors { grid-template-columns: repeat(2, 1fr); }
  .device-layer__connectors { display: none; }
}

/* (d) ---- .hub-spoke : central Trak+ to audience endpoints ---- */
.hub-spoke {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(var(--space-lg), 4vw, var(--space-3xl));
  margin: 0;
}
.hub-spoke__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  justify-self: center;
}
.hub-spoke__core {
  display: flex; align-items: center; justify-content: center;
  width: clamp(88px, 12vw, 116px); height: clamp(88px, 12vw, 116px);
  border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--navy), var(--navy-deep));
  color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
  border: 1.5px solid color-mix(in srgb, var(--teal) 50%, transparent);
}
.hub-spoke__spokes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-sm) var(--space-md);
}
.hub-spoke__spoke {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy);
}
.section--dark .hub-spoke__spoke,
.section--hero .hub-spoke__spoke {
  background: rgba(255,255,255,0.05); border-color: var(--border-dark);
  color: var(--white); box-shadow: none;
}
.hub-spoke__spoke .emblem { margin-bottom: 0; }
@media (max-width: 720px) {
  .hub-spoke { grid-template-columns: 1fr; justify-items: center; gap: var(--space-lg); }
  .hub-spoke__spokes { width: 100%; }
}
@media (max-width: 440px) {
  .hub-spoke__spokes { grid-template-columns: 1fr; }
}

/* (e) ---- .virtuous-loop : a closed loop of stages (data compounds) ---- */
.virtuous-loop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin: 0;
}
.virtuous-loop__stage {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--white));
  font-size: var(--fs-sm); font-weight: 600; color: var(--navy);
}
.section--dark .virtuous-loop__stage,
.section--hero .virtuous-loop__stage {
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border-dark));
  color: var(--white);
}
.virtuous-loop__stage .emblem { margin-bottom: 0; width: 32px; height: 32px; }
.virtuous-loop__stage .emblem > svg { width: 18px !important; height: 18px !important; }
.virtuous-loop__arrow {
  display: inline-flex; align-items: center; color: var(--accent-text, var(--accent));
  font-size: 1.1rem; line-height: 1;
}
.virtuous-loop__arrow::after { content: "\2192"; }
.virtuous-loop__arrow--loop::after { content: "\21BB"; } /* last hop closes the loop */
.section--dark .virtuous-loop__arrow { color: var(--teal-bright); }
@media (max-width: 560px) {
  .virtuous-loop { flex-direction: column; }
  .virtuous-loop__stage { width: 100%; justify-content: flex-start; }
  .virtuous-loop__arrow { transform: rotate(90deg); }
}

/* (f) ---- .twin-study : two mirrored arms feeding one shared evidence base ---- */
.twin-study {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: var(--space-lg);
  margin: 0;
}
.twin-study__arm {
  display: flex; flex-direction: column; gap: var(--space-sm);
  padding: var(--space-xl) var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.twin-study__arm--b {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%), var(--white);
}
.section--dark .twin-study__arm,
.section--hero .twin-study__arm {
  background: rgba(255,255,255,0.04); border-color: var(--border-dark); box-shadow: none;
}
.twin-study__arm h4 { color: var(--navy); }
.section--dark .twin-study__arm h4 { color: var(--white); }
.twin-study__arm p { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-muted); }
.section--dark .twin-study__arm p { color: var(--text-muted-dark); }
.twin-study__merge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm); text-align: center;
}
.twin-study__node {
  display: flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; border-radius: var(--radius-full);
  background: linear-gradient(150deg, var(--teal), var(--teal-bright));
  color: var(--white); box-shadow: var(--shadow-teal-glow);
}
.twin-study__node svg { width: 32px; height: 32px; }
.twin-study__merge-label {
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); max-width: 14ch;
}
.section--dark .twin-study__merge-label { color: var(--text-muted-dark); }
@media (max-width: 768px) {
  .twin-study { grid-template-columns: 1fr; }
  .twin-study__merge { flex-direction: row; padding-block: var(--space-md); }
}

/* ----------------------------------------------------------------------------
   16. PRINT
   ---------------------------------------------------------------------------- */
@media print {
  .nav, .hero__cue, #signal-canvas { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section { padding-block: 1.5rem; }
  body { color: var(--ink); background: var(--white); }
}

/* ----------------------------------------------------------------------------
   17. QA POLISH (lead pass) — fixes surfaced by the headless-screenshot review
   ---------------------------------------------------------------------------- */
/* The decorative "SCROLL" cue overlaps the hero button row on tall/dense mobile
   heroes. It is aria-hidden and purely decorative, so hide it on small screens. */
@media (max-width: 860px) {
  .hero__cue { display: none !important; }
}
/* The virtuous-loop wrapped to two rows on desktop, orphaning the loop-back
   arrow. Constrain it so the three stages read on one row (or stack cleanly). */
.virtuous-loop { max-width: 760px; margin-inline: auto; flex-wrap: nowrap; }
@media (max-width: 720px) {
  .virtuous-loop { flex-wrap: wrap; }
}