/* ==========================================================================
   Laboratory Technologies, Inc. — Design System
   Hybrid: light, clean pages with dark navy hero/CTAs.
   Palette: Deep Navy #0A1F3D + Cyan #06B6D4
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Brand */
  --navy-950: #061224;
  --navy-900: #0A1F3D;
  --navy-800: #112B54;
  --navy-700: #1A3A6C;
  --navy-600: #29508A;
  --cyan-500: #06B6D4;
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;
  --cyan-50:  #ECFEFF;

  /* Neutrals */
  --white:    #FFFFFF;
  --gray-50:  #F8FAFC;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Semantic */
  --bg:           var(--white);
  --bg-alt:       var(--gray-50);
  --bg-dark:      var(--navy-900);
  --bg-darker:    var(--navy-950);
  --text:         var(--gray-800);
  --text-muted:   var(--gray-500);
  --text-strong:  var(--navy-900);
  --text-on-dark: #E6EEF8;
  --text-on-dark-muted: #92A6C2;
  --accent:       var(--cyan-500);
  --accent-hover: var(--cyan-400);
  --border:       var(--gray-200);
  --border-strong:var(--gray-300);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radii */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow:    0 4px 12px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, .10);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);

  /* Layout */
  --container: 1240px;
  --nav-h: 76px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur:  .35s;
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--navy-700);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }

ul, ol { padding-left: 1.25rem; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 700; }
h4 { font-size: 1.125rem; font-weight: 600; }

p { margin: 0 0 1rem; color: var(--text); }

.lede { font-size: 1.125rem; line-height: 1.7; color: var(--gray-600); max-width: 60ch; }

/* Eyebrow / pre-heading label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1.5px;
  background: var(--accent);
  display: inline-block;
  /* vertical-align: middle keeps the dash centered with the text whether the
     parent .eyebrow uses display: inline-flex (with align-items: center) or
     display: inline-block (which would otherwise drop the dash to baseline
     and make it look like an underscore). */
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.eyebrow.on-dark { color: var(--cyan-400); }
.eyebrow.on-dark::before { background: var(--cyan-400); }

/* ---- Layout ------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }

.section        { padding: var(--space-24) 0; }
.section-sm     { padding: var(--space-16) 0; }
.section-tight  { padding: var(--space-12) 0; }

.section.dark   { background: var(--bg-dark); color: var(--text-on-dark); }
.section.dark h1, .section.dark h2, .section.dark h3 { color: var(--white); }
.section.dark p { color: var(--text-on-dark-muted); }
.section.alt    { background: var(--bg-alt); }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
  font-family: inherit;
}
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--navy-900);
  color: var(--white);
  border-color: var(--navy-900);
}
.btn-primary:hover {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background: var(--cyan-500);
  color: var(--navy-900);
  border-color: var(--cyan-500);
}
.btn-accent:hover {
  background: var(--cyan-400);
  border-color: var(--cyan-400);
  color: var(--navy-900);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(6, 182, 212, .35);
}

.btn-ghost {
  background: transparent;
  color: var(--navy-900);
  border-color: var(--gray-300);
}
.btn-ghost:hover {
  border-color: var(--navy-900);
  background: var(--white);
  color: var(--navy-900);
}
.btn-ghost.on-dark {
  color: var(--white);
  border-color: rgba(255,255,255,.25);
}
.btn-ghost.on-dark:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.55);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-900);
  font-weight: 600;
  font-size: .95rem;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}
.btn-link:hover { border-color: var(--accent); color: var(--accent); }
.btn-link .arrow { transition: transform .25s var(--ease); }
.btn-link:hover .arrow { transform: translateX(3px); }

/* ---- Top bar (above nav) ----------------------------------------------- */
.topbar {
  background: var(--navy-950);
  color: var(--text-on-dark-muted);
  font-size: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.topbar a { color: var(--text-on-dark-muted); }
.topbar a:hover { color: var(--cyan-400); }
.topbar-meta { display: flex; gap: 24px; align-items: center; }
.topbar-meta span { display: flex; align-items: center; gap: 6px; }
@media (max-width: 768px) {
  .topbar-meta .hide-sm { display: none; }
}
/* Hide topbar entirely on phones — content cramming at small widths and the phone
   number + service links are already in the main nav, footer, and contact page. */
@media (max-width: 600px) {
  .topbar { display: none; }
}

/* ---- Navigation --------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur) var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.nav-brand img { height: 44px; width: auto; }

/* Wrapper that hosts the static PNG + the animated SVG overlay (atom + flash) */
.nav-brand-logo {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  height: 44px;
  line-height: 0;
}
.nav-brand-logo > img { display: block; }
.nav-brand-logo > .lti-anim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;          /* lets gamma rings expand past the logo bounds */
}
@media (prefers-reduced-motion: reduce) {
  .nav-brand-logo > .lti-anim { display: none; }   /* skip the intro animation */
}
.nav-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.nav-brand-text .brand-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--navy-900);
  letter-spacing: -.01em;
}
.nav-brand-text .brand-sub {
  font-size: .68rem;
  color: var(--gray-500);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 4px;
  align-items: center;
}
.nav-links a {
  display: inline-block;
  padding: 10px 10px;
  color: var(--gray-700);
  font-weight: 500;
  font-size: .92rem;
  border-radius: 6px;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--navy-900);
  background: var(--gray-100);
}
.nav-cta {
  margin-left: 16px;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--navy-900);
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Remove backdrop-filter on .nav when the menu is open so position: fixed children
     (the bottom-pinned CTA) pin to the viewport, not to the .nav containing block. */
  .nav.open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav.open .nav-links {
    display: flex;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    gap: 0;
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav.open .nav-links a { padding: 14px; border-radius: 6px; }
  .nav.open .nav-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0; right: 0;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 12px rgba(15, 42, 74, 0.08);
    z-index: 10;
  }
  .nav.open .nav-cta .btn { width: 100%; justify-content: center; }
  /* Reserve space at the bottom of the open menu so the last item isn't hidden under the fixed CTA */
  .nav.open .nav-links { padding-bottom: 80px; }
}

/* ---- Nav dropdown (Products) --------------------------------------------- */
.nav-links li.has-dropdown { position: relative; }
.nav-links li.has-dropdown > a .dropdown-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: .7em;
  transform: translateY(-1px);
  opacity: .6;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-links li.has-dropdown:hover > a .dropdown-caret,
.nav-links li.has-dropdown:focus-within > a .dropdown-caret {
  transform: translateY(0) rotate(180deg);
  opacity: 1;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(4, 16, 31, .12);
  padding: 8px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
  z-index: 50;
}
.nav-links li.has-dropdown:hover > .nav-dropdown,
.nav-links li.has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown li { list-style: none; }
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  font-size: .92rem;
  font-weight: 500;
  color: var(--gray-700);
  border-radius: 6px;
  white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus,
.nav-dropdown a.active {
  background: var(--gray-100);
  color: var(--navy-900);
}
@media (max-width: 960px) {
  .nav.open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 6px 12px;
    margin: 0;
  }
  .nav.open .nav-dropdown a { padding: 10px 12px; font-size: .9rem; }
  .nav-links li.has-dropdown > a .dropdown-caret { display: none; }
}

/* ---- Page-hero "warm" variant (Patient Isolation Kits) ------------------- */
.page-hero.page-hero-warm {
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(214, 222, 35, .14), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(34, 211, 238, .08), transparent 60%),
    linear-gradient(180deg, #FFF9EC 0%, #FFFFFF 70%);
  border-bottom: 1px solid rgba(214, 222, 35, .25);
}
.page-hero.page-hero-warm::before { display: none; }
.page-hero.page-hero-warm h1 { color: var(--clinical-navy, #04101F); }
.page-hero.page-hero-warm .hero-tagline {
  color: var(--gray-700);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 500;
  max-width: 60ch;
  margin-top: 12px;
}
.page-hero.page-hero-warm .breadcrumb       { color: rgba(4, 16, 31, .55); }
.page-hero.page-hero-warm .breadcrumb a     { color: var(--clinical-navy, #04101F); }
.page-hero.page-hero-warm .eyebrow          { color: #8A8C00; }
.page-hero.page-hero-warm .eyebrow::before  { background: #D6DE23; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(6, 182, 212, .12), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(6, 182, 212, .08), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 60%, #0d2649 100%);
  color: var(--text-on-dark);
  overflow: hidden;
  padding: 100px 0 120px;
}
.hero::before {
  /* subtle grid */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 75%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 {
  color: var(--white);
  margin-bottom: 24px;
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.hero h1 .accent {
  background: linear-gradient(90deg, var(--cyan-400), var(--cyan-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--text-on-dark-muted);
  font-size: 1.125rem;
  max-width: 56ch;
  margin-bottom: 36px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
  max-width: 540px;
}
.hero-stat .num {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -.03em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.hero-stat .num .plus { color: var(--cyan-400); font-size: 1.5rem; }
.hero-stat .label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-top: 8px;
}

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual::before {
  content: "";
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6,182,212,.25) 0%, rgba(6,182,212,0) 70%);
  filter: blur(20px);
  z-index: 0;
}
.hero-visual img {
  position: relative;
  z-index: 1;
  max-height: 540px;
  width: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.5));
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero-floating-card {
  position: absolute;
  z-index: 2;
  background: rgba(10, 31, 61, .65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.hero-floating-card .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(6, 182, 212, .25); }
  50%      { box-shadow: 0 0 0 8px rgba(6, 182, 212, .12); }
}
.hero-floating-card .text { font-size: .85rem; color: var(--white); }
.hero-floating-card .text strong { display: block; font-weight: 600; }
.hero-floating-card .text small { color: var(--text-on-dark-muted); }
.hero-floating-card.tl { top: 10%; left: -10px; }
.hero-floating-card.br { bottom: 12%; right: -10px; }
@media (max-width: 720px) {
  .hero-floating-card { display: none; }
}

/* ---- Page hero (smaller, for sub pages) -------------------------------- */
.page-hero {
  background:
    radial-gradient(800px 400px at 80% 0%, rgba(6, 182, 212, .12), transparent 60%),
    linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%);
  color: var(--text-on-dark);
  padding: 110px 0 80px;
  position: relative;
  overflow: hidden;
}

/* Mobile padding override for hero sections — added 2026-05-19 mobile audit Phase 1 */
@media (max-width: 720px) {
  .hero { padding: 56px 0 64px; }
  .page-hero { padding: 64px 0 48px; }
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black, transparent 80%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--white); margin-bottom: 16px; }
.page-hero p { color: var(--text-on-dark-muted); font-size: 1.125rem; max-width: 64ch; }
.breadcrumb {
  font-size: .85rem;
  color: var(--text-on-dark-muted);
  margin-bottom: 20px;
  letter-spacing: .02em;
}
.breadcrumb a { color: var(--cyan-400); }
.breadcrumb .sep { margin: 0 8px; opacity: .5; }

/* ---- Capability band ---------------------------------------------------- */
.capability-band {
  background: var(--navy-950);
  padding: 32px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.capability-band .row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 800px) { .capability-band .row { grid-template-columns: repeat(2, 1fr); } }
.capability {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-on-dark-muted);
  font-size: .9rem;
}
.capability .ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(6, 182, 212, .12);
  color: var(--cyan-400);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.capability strong { color: var(--white); display: block; font-weight: 600; }

/* ---- Section heading ---------------------------------------------------- */
.section-head {
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede { margin-top: 12px; }

/* ---- Product cards ------------------------------------------------------ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.product-card {
  grid-column: span 6;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--dur) var(--ease);
  position: relative;
}
.product-card.feature {
  grid-column: span 6;
}
.product-card.wide  { grid-column: span 8; }
.product-card.small { grid-column: span 4; }
@media (max-width: 900px) {
  .product-card,
  .product-card.feature,
  .product-card.wide,
  .product-card.small { grid-column: span 12; }
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}
.product-card .media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, var(--gray-100) 0%, var(--gray-50) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card .media img {
  width: auto;
  height: 80%;
  max-width: 80%;
  object-fit: contain;
  transition: transform .6s var(--ease);
}
.product-card:hover .media img { transform: scale(1.04); }

.product-card .media.cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  max-width: none;
}
.product-card .media.dark { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); }

.tag {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--white);
  color: var(--navy-900);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}
.tag.accent { background: var(--cyan-500); color: var(--navy-900); }
.tag.dark { background: var(--navy-900); color: var(--white); }

.product-card .body {
  padding: 28px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.product-card .category {
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.product-card h3 { margin-bottom: 8px; }
.product-card .desc { color: var(--gray-600); margin-bottom: 16px; }
.product-card .meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.product-card .meta span {
  font-size: .75rem;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 500;
}
.product-card .footer {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- Principle cards (About page) --------------------------------------
   Slimmer variant of .product-card — used when there's no media image and
   only a short title + description. A later .product-card definition
   (~line 4050) turns the card into a CSS grid with a 220px left column
   reserved for a product image; for the principles cards that empty
   column shows up as huge whitespace. We explicitly reset that here.
*/
.principles-grid {
  align-items: start;
}
.principles-grid .product-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
}
.principles-grid .product-card .body {
  padding: 22px 24px 20px !important;
  flex-grow: 0 !important;
}
.principles-grid .product-card .category { margin-bottom: 6px; }
.principles-grid .product-card h3 { margin-bottom: 8px; font-size: 1.18rem; }
.principles-grid .product-card .desc { margin-bottom: 0; line-height: 1.5; }

/* ---- Industries ribbon -------------------------------------------------- */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .industries-grid { grid-template-columns: 1fr; } }

.industry-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--navy-900);
  cursor: pointer;
  isolation: isolate;
}
.industry-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.industry-card:hover img { transform: scale(1.06); }
.industry-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,31,61,0) 0%, rgba(10,31,61,.85) 100%);
  z-index: 1;
}
.industry-card .label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 24px;
  color: var(--white);
}
.industry-card .label h4 {
  color: var(--white);
  margin-bottom: 4px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.industry-card .label p {
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  margin: 0;
}
.industry-card .arrow-circle {
  position: absolute;
  top: 20px; right: 20px;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  transition: all var(--dur) var(--ease);
}
.industry-card:hover .arrow-circle {
  background: var(--cyan-500);
  color: var(--navy-900);
  transform: rotate(-45deg);
}

/* ---- Heritage / split section ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1fr 1.1fr; }
.split.reverse .split-content { order: 2; }
.split.reverse .split-visual { order: 1; }
@media (max-width: 900px) { .split, .split.reverse { grid-template-columns: 1fr; gap: 40px; } }

.split-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
}
.split-visual img { width: 100%; height: 100%; object-fit: cover; }

.heritage-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.heritage-stat .num {
  font-size: 3rem;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.04em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.heritage-stat .num .accent { color: var(--accent); }
.heritage-stat .num .plus { color: var(--accent); font-size: 2rem; }
.heritage-stat .label {
  font-size: .85rem;
  color: var(--gray-600);
  margin-top: 8px;
  font-weight: 500;
}

/* ---- Trust band --------------------------------------------------------- */
.trust-band {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 48px 0;
  background: var(--white);
}
.trust-band p.label {
  text-align: center;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
  margin-bottom: 28px;
}
.trust-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px;
}
.trust-logos .pill {
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-500);
  letter-spacing: .04em;
}

/* ---- CTA section -------------------------------------------------------- */
.cta-block {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 60%, var(--navy-700) 100%);
  border-radius: var(--radius-xl);
  padding: 64px;
  position: relative;
  overflow: hidden;
}
.cta-block::after {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .25), transparent 70%);
  pointer-events: none;
}
.cta-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 1;
}
@media (max-width: 800px) {
  .cta-block { padding: 40px 28px; }
  .cta-block .row { flex-direction: column; align-items: flex-start; }
}
.cta-block h2 { color: var(--white); margin-bottom: 8px; max-width: 26ch; }
.cta-block p { color: var(--text-on-dark-muted); margin: 0; max-width: 55ch; }
.cta-block .btn-row { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  background: var(--navy-950);
  color: var(--text-on-dark-muted);
  padding: 80px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

.footer-brand img { height: 48px; margin-bottom: 16px; filter: brightness(0) invert(1); opacity: .9; }
.footer-brand p { color: var(--text-on-dark-muted); font-size: .9rem; max-width: 30ch; }
.footer h5 {
  color: var(--white);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 10px; }
.footer ul a {
  color: var(--text-on-dark-muted);
  font-size: .92rem;
  transition: color var(--dur) var(--ease);
}
.footer ul a:hover { color: var(--cyan-400); }
.footer-bottom {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .85rem;
  color: var(--text-on-dark-muted);
}
.footer-bottom .legal a { margin-left: 20px; }

/* ---- Resources / docs --------------------------------------------------- */
.resource-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .resource-list { grid-template-columns: 1fr; } }

.resource {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  transition: all var(--dur) var(--ease);
  text-decoration: none;
}
.resource:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: inherit;
}
.resource .ico {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--cyan-50);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.resource .info { flex-grow: 1; }
.resource .info .title {
  font-weight: 600;
  color: var(--navy-900);
  display: block;
  margin-bottom: 2px;
}
.resource .info .meta {
  font-size: .8rem;
  color: var(--gray-500);
}
.resource .arrow {
  color: var(--gray-400);
  transition: all var(--dur) var(--ease);
}
.resource:hover .arrow { color: var(--accent); transform: translateX(4px); }

/* ---- About: timeline ---------------------------------------------------- */
.timeline {
  position: relative;
  margin-top: 48px;
  padding-left: 32px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 7px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--gray-200));
}
.timeline-item { position: relative; padding-bottom: 40px; }
.timeline-item::before {
  content: "";
  position: absolute;
  top: 4px; left: -32px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--accent);
}
.timeline-item .year {
  font-weight: 700;
  color: var(--accent);
  font-size: .85rem;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.timeline-item h4 { margin-bottom: 6px; }
.timeline-item p { color: var(--gray-600); margin: 0; }

/* ---- Contact form ------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-info-card {
  background: var(--navy-900);
  color: var(--text-on-dark);
  padding: 40px;
  border-radius: var(--radius-lg);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}
.contact-info-card h3 { color: var(--white); margin-bottom: 8px; }
.contact-info-card p { color: var(--text-on-dark-muted); margin: 0 0 32px; }

.contact-info-list { list-style: none; padding: 0; margin: 0; }
.contact-info-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  align-items: flex-start;
}
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-list .ico {
  width: 36px; height: 36px;
  background: rgba(6, 182, 212, .12);
  color: var(--cyan-400);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-list .info-title {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  margin-bottom: 4px;
}
.contact-info-list .info-value {
  color: var(--white);
  font-weight: 500;
}
.contact-info-list a { color: var(--white); }
.contact-info-list a:hover { color: var(--cyan-400); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid .full { grid-column: span 2; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-grid .full { grid-column: span 1; } }

.field { display: flex; flex-direction: column; }
.field label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.field input,
.field select,
.field textarea {
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px; /* iOS Safari auto-zoom prevention — was .95rem (~15.2px) */
  color: var(--text);
  background: var(--white);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Scale form font back down on desktop, keep 16px on mobile to prevent iOS auto-zoom */
@media (min-width: 600px) {
  .field input,
  .field select,
  .field textarea { font-size: .95rem; }
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(6,182,212,.1);
}
.field textarea { resize: vertical; min-height: 130px; }

/* ============================================================
   QUOTE-REQUEST FORM (quote-request.html)
   ============================================================ */
.quote-howto {
  background: var(--bg-feature, #F1F6F9);
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 0 0 32px;
}
.quote-howto h2 {
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: var(--clinical-navy, #0F2A4A);
}
.quote-howto ol {
  margin: 0;
  padding-left: 22px;
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.92rem;
  line-height: 1.6;
}
.quote-howto ol li + li { margin-top: 6px; }

.quote-form { display: block; }

.quote-fieldset {
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 12px;
  padding: 22px 24px 24px;
  margin: 0 0 20px;
  background: #FFFFFF;
}
.quote-fieldset legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  margin-left: -10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
}
.quote-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--clinical-cyan, #0EA5C7);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
}
.field .req { color: #DC2626; font-weight: 600; }
.field .note {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--gray-500, #6E7E92);
  letter-spacing: 0;
}

.quote-checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--clinical-navy, #0F2A4A);
  cursor: pointer;
  margin-bottom: 0;
  letter-spacing: 0;
}
.quote-checkbox input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--clinical-cyan, #0EA5C7);
}

/* Order-items list */
.quote-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}
.quote-item-row {
  display: grid;
  grid-template-columns: 1fr 100px 32px;
  gap: 10px;
  align-items: center;
}
.quote-item-row select,
.quote-item-row input[type=number] {
  padding: 10px 12px;
  border: 1px solid var(--gray-300, #D1D5DB);
  border-radius: var(--radius, 8px);
  font-family: inherit;
  font-size: 16px; /* iOS Safari auto-zoom prevention — was 0.92rem */
  color: var(--text, #1F2937);
  background: #FFFFFF;
  transition: border-color .2s, box-shadow .2s;
}
@media (min-width: 600px) {
  .quote-item-row select,
  .quote-item-row input[type=number] { font-size: 0.92rem; }
}
.quote-item-row select:focus,
.quote-item-row input[type=number]:focus {
  outline: none;
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, 0.12);
}
.quote-qty { text-align: center; }
.quote-remove-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 50%;
  color: var(--gray-500, #6E7E92);
  font-size: 1.1rem;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.quote-remove-item:hover {
  background: #FEE2E2;
  border-color: #FECACA;
  color: #DC2626;
}
@media (max-width: 600px) {
  .quote-item-row { grid-template-columns: 1fr 70px 32px; }
}

.quote-help {
  font-size: 0.83rem;
  color: var(--gray-500, #6E7E92);
  line-height: 1.5;
  margin: 8px 0 0;
}

.quote-confirm-strip {
  background: rgba(14, 165, 199, 0.06);
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 8px 0 16px;
}
.quote-confirm-strip p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}

.quote-fineprint {
  font-size: 0.78rem;
  color: var(--gray-500, #6E7E92);
  line-height: 1.5;
  margin: 12px 0 0;
}

.btn.btn-lg { padding: 14px 28px; font-size: 1rem; }

/* Success state */
.quote-success {
  text-align: center;
  padding: 48px 32px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 42, 74, 0.05);
}
.quote-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: #16A34A;
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.quote-success h2 {
  font-size: 1.5rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
}
.quote-success p {
  font-size: 0.98rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.6;
  max-width: 560px;
  margin: 0 auto 12px;
}

/* ---- Stat strip --------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
@media (max-width: 800px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat-cell {
  padding: 32px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-cell:last-child, .stat-cell:nth-child(4n) { border-right: none; }
@media (max-width: 800px) {
  .stat-cell { border-right: 1px solid var(--border) !important; }
  .stat-cell:nth-child(2n) { border-right: none !important; }
}
.stat-cell .num {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy-900);
  letter-spacing: -.03em;
  line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
}
.stat-cell .num .accent { color: var(--accent); }
.stat-cell .label { color: var(--gray-600); font-size: .9rem; margin-top: 8px; }

/* Variant for the Engineering boxes — locks all three .num blocks to the same height
   so the descriptions below them sit on a shared baseline regardless of word count.
   Center horizontally so all three titles and labels line up consistently. */
.stat-strip-aligned .stat-cell { text-align: center; }
.stat-strip-aligned .stat-cell .num {
  min-height: 5rem;          /* room for up to two lines at 2.5rem font-size, line-height: 1 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;     /* single-line text drops to the bottom of the box */
  justify-content: center;   /* horizontally center title text */
  text-align: center;        /* wrapped lines stay centered */
}
.stat-strip-aligned .stat-cell .label { margin-top: 12px; text-align: center; }

/* ---- Reveal animations ------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-visual img { animation: none; }
  .hero-floating-card .dot { animation: none; }
}

/* ---- Misc utilities ----------------------------------------------------- */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.divider {
  height: 1px;
  background: var(--border);
  border: none;
  margin: var(--space-12) 0;
}

/* Visually hidden */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* ----------------------------------------------------------------------
   Component additions for brochure-sourced product content
   ---------------------------------------------------------------------- */

/* Check list (used inside split-copy and hero copy) */
.check-list {
  list-style: none;
  margin: var(--space-6) 0 var(--space-6);
  padding: 0;
  display: grid;
  gap: 12px;
}
.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--gray-700);
  line-height: 1.55;
  font-size: 1rem;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cyan-50);
  border: 1.5px solid var(--cyan-400);
}
.check-list li::after {
  content: '';
  position: absolute;
  left: 5px; top: 11px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--cyan-500);
  border-bottom: 2px solid var(--cyan-500);
  transform: rotate(-45deg);
}

/* Spec rows inside product cards */
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.spec-row:last-of-type { border-bottom: none; }
.spec-row span { color: var(--gray-500); text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; font-weight: 600; }
.spec-row strong { color: var(--gray-900); font-weight: 600; text-align: right; }

/* Bind-It SKU grid */
.bindit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: var(--space-6) 0 var(--space-6);
}
@media (max-width: 700px) { .bindit-grid { grid-template-columns: 1fr; } }
.bindit-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.bindit-cell strong {
  font-family: 'Inter', monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan-600, #0891B2);
  text-transform: uppercase;
}
.bindit-cell span {
  font-size: .9rem;
  color: var(--gray-700);
  line-height: 1.4;
}

/* Real-world scenario callout */
.scenario-card {
  margin-top: var(--space-6);
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--cyan-50), #ffffff);
  border: 1px solid var(--cyan-300, #67e8f9);
  border-left: 4px solid var(--cyan-500);
  border-radius: var(--radius-md);
}
.scenario-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cyan-600, #0891B2);
  margin-bottom: 8px;
}
.scenario-card h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: var(--gray-900);
  font-weight: 700;
}
.scenario-card p {
  margin: 0;
  font-size: .96rem;
  line-height: 1.55;
  color: var(--gray-700);
}

/* Subtle redirect line for s4fe-d.com */
.fine-print {
  margin-top: var(--space-5);
  font-size: .82rem;
  color: var(--gray-500);
  font-style: italic;
}
.fine-print a { color: var(--gray-700); text-decoration: underline; text-underline-offset: 3px; }
.fine-print a:hover { color: var(--cyan-600, #0891B2); }

/* Heritage note */
.heritage-note {
  margin: var(--space-12) auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  font-style: italic;
}
.heritage-note em { color: var(--cyan-300, #67e8f9); font-style: normal; font-weight: 600; }

/* Industries grid override (4-up cards used on rebuilt homepage) */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-10);
}
@media (max-width: 1024px) { .industries-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .industries-grid { grid-template-columns: 1fr; } }
.industry-card {
  padding: 28px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.industry-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--cyan-300, #67e8f9);
}
.industry-card .ind-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--cyan-50);
  color: var(--cyan-600, #0891B2);
  margin-bottom: 16px;
}
.industry-card h4 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: var(--gray-900);
  font-weight: 700;
}
.industry-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--gray-600);
}
.industry-card::after { display: none; }
.industry-card .label, .industry-card img, .industry-card .arrow-circle { display: none !important; }

/* CTA block */
.cta-section { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.cta-block {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-10);
  align-items: center;
  padding: 48px;
  background: linear-gradient(135deg, rgba(6,182,212,.08), rgba(6,182,212,0));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
}
@media (max-width: 900px) {
  .cta-block { grid-template-columns: 1fr; padding: 32px; }
}
.cta-block h2 { color: #fff; margin: 8px 0 12px; }
.cta-block p { color: rgba(255,255,255,.78); margin: 0; }
.cta-actions { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 700px) { .cta-actions { flex-direction: row; flex-wrap: wrap; } }

/* Product card spec rows alignment */
.product-card .spec-row { padding: 8px 0; }
.product-card .body { display: flex; flex-direction: column; }

/* Stat strip refinements */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--space-8);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-cell {
  text-align: center;
  padding: 4px 12px;
  border-right: 1px solid var(--border);
}
.stat-cell:last-child { border-right: none; }
.stat-cell .num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.stat-cell .lbl {
  display: block;
  font-size: .78rem;
  color: var(--gray-600);
  margin-top: 6px;
  line-height: 1.4;
}
.stat-cell .lbl em { color: var(--gray-500); font-style: normal; font-size: .72rem; }

/* ==========================================================================
   CLINICAL PALETTE OVERRIDE — v2 (Thermo Fisher / Siemens Healthcare style)
   Mostly white. Navy used only as text + accent stroke, never as backgrounds.
   ========================================================================== */
:root {
  --bg-feature: #F6F9FC;       /* whisper-light blue tint */
  --bg-feature-2: #EEF4F9;     /* slightly stronger tint */
  --hero-tint: #F2F7FB;        /* hero anchor — almost white */
  --rule-soft: #E2EAF1;        /* soft divider on light blue */
  --clinical-cyan: #0EA5C7;    /* AA contrast on white */
  --clinical-cyan-dk: #0B8AA6;
  --clinical-navy: #0F2A4A;    /* primary text/headline navy */
  --clinical-slate: #4A5B72;   /* readable secondary text */
  --footer-bg: #F4F7FA;        /* footer is light too */
  --footer-text: #4A5B72;
  --footer-heading: #0F2A4A;
}

html, body { background: #FFFFFF; }
body { color: var(--clinical-navy); }

/* TOPBAR — lighter, info-bar style */
.topbar {
  background: var(--bg-feature-2);
  color: var(--gray-600);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar a { color: var(--gray-700); }
.topbar a:hover { color: var(--clinical-cyan); }

/* HERO — almost white with a single soft cyan glow */
.hero {
  background:
    radial-gradient(900px 460px at 85% -10%, rgba(14, 165, 199, .10), transparent 65%),
    radial-gradient(700px 380px at -5% 110%, rgba(14, 165, 199, .05), transparent 65%),
    #FFFFFF;
  color: var(--clinical-navy);
  border-bottom: 1px solid var(--rule-soft);
}
.hero::before {
  background-image:
    linear-gradient(rgba(15, 42, 74, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 42, 74, .035) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 70%);
}
.hero h1 { color: var(--clinical-navy); }
.hero p, .hero .lede { color: var(--gray-600); }
.hero-stats { border-top: 1px solid var(--rule-soft); }
.hero-stat .num { color: var(--clinical-navy); }
.hero-stat .num .plus { color: var(--clinical-cyan); }
.hero-stat .label { color: var(--gray-500); }
.hero-visual::before {
  background: radial-gradient(circle, rgba(14, 165, 199, .22) 0%, rgba(14, 165, 199, 0) 70%);
}
.hero-visual img { filter: drop-shadow(0 24px 40px rgba(15, 42, 74, .18)); }
.hero .eyebrow.on-dark { color: var(--clinical-cyan); }
.hero .eyebrow.on-dark::before { background: var(--clinical-cyan); }

/* Floating cards — light glass on light bg */
.float-card, .hero-floating-card {
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--rule-soft);
  color: var(--clinical-navy);
  box-shadow: 0 18px 38px rgba(15, 42, 74, .12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.float-card .dot, .hero-floating-card .dot {
  background: var(--clinical-cyan);
  box-shadow: 0 0 0 4px rgba(14, 165, 199, .18);
}
.float-card strong, .hero-floating-card .text strong { color: var(--clinical-navy); }
.float-card span, .hero-floating-card .text small { color: var(--gray-600); }

/* PAGE HERO — light variant for sub-pages */
.page-hero {
  background:
    radial-gradient(700px 360px at 80% 0%, rgba(14, 165, 199, .08), transparent 65%),
    #FFFFFF;
  color: var(--clinical-navy);
  border-bottom: 1px solid var(--rule-soft);
}
.page-hero h1 { color: var(--clinical-navy); }
.page-hero p { color: var(--gray-600); }
.page-hero .eyebrow.on-dark { color: var(--clinical-cyan); }
.page-hero .eyebrow.on-dark::before { background: var(--clinical-cyan); }

/* SECTION.DARK — flip to light blue tint with navy text */
.section.dark {
  background: linear-gradient(180deg, var(--bg-feature) 0%, #FFFFFF 100%);
  color: var(--clinical-navy);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.section.dark h1, .section.dark h2, .section.dark h3, .section.dark h4 { color: var(--clinical-navy); }
.section.dark p { color: var(--gray-600); }
.section.dark .eyebrow.on-dark { color: var(--clinical-cyan); }
.section.dark .eyebrow.on-dark::before { background: var(--clinical-cyan); }

/* CTA section — soft light tint, navy text, high-contrast accent button */
.cta-section { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-feature-2) 100%); }
.cta-block {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-feature) 100%);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 24px 60px rgba(15, 42, 74, .08);
}
.cta-block::after { display: none; }
.cta-block h2 { color: var(--clinical-navy); }
.cta-block p { color: var(--gray-600); }

/* Heritage stats — readable on the new light section */
.heritage-stat .num { color: var(--clinical-navy); }
.heritage-stat .num .plus, .heritage-stat .num .accent { color: var(--clinical-cyan); }
.heritage-stat .label { color: var(--gray-600); }
.heritage-note { color: var(--gray-700); }
.heritage-note em { color: var(--clinical-cyan); }

/* Buttons — fix contrast */
.btn-accent {
  background: var(--clinical-cyan);
  color: #FFFFFF;
  border-color: var(--clinical-cyan);
}
.btn-accent:hover {
  background: #0B8AA6;
  border-color: #0B8AA6;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(14, 165, 199, .35);
}
.btn-primary {
  background: var(--clinical-navy);
  color: #FFFFFF;
  border-color: var(--clinical-navy);
}
.btn-primary:hover {
  background: #18386A;
  border-color: #18386A;
  color: #FFFFFF;
}
.btn-ghost {
  background: transparent;
  color: var(--clinical-navy);
  border-color: var(--rule-soft);
}
.btn-ghost:hover {
  border-color: var(--clinical-navy);
  background: #FFFFFF;
  color: var(--clinical-navy);
}
/* On the (now light) CTA / hero / section.dark, ghost buttons stay navy on light */
.section.dark .btn-ghost,
.cta-block .btn-ghost,
.hero .btn-ghost,
.page-hero .btn-ghost {
  color: var(--clinical-navy);
  border-color: var(--clinical-navy);
  background: rgba(255,255,255,.6);
}
.section.dark .btn-ghost:hover,
.cta-block .btn-ghost:hover,
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover {
  background: var(--clinical-navy);
  color: #FFFFFF;
}

/* Eyebrow accent uses clinical cyan everywhere */
.eyebrow { color: var(--clinical-cyan); }
.eyebrow::before { background: var(--clinical-cyan); }

/* Capability band — soft tinted band */
.capability-band {
  background: var(--bg-feature);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* Scenario cards — refresh to lighter clinical tint */
.scenario-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft);
  border-left: 4px solid var(--clinical-cyan);
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.scenario-tag { color: var(--clinical-cyan); }
.scenario-card h4 { color: var(--clinical-navy); }
.scenario-card p { color: var(--gray-700); }
.scenario-card em { color: var(--clinical-navy); font-style: italic; font-weight: 500; }

/* Fine print under S4FE-D */
.fine-print { color: var(--gray-500); }
.fine-print a { color: var(--clinical-cyan); border-bottom: 1px solid rgba(14, 165, 199, .35); }
.fine-print a:hover { border-bottom-color: var(--clinical-cyan); }

/* ====== LEGACY PRODUCT SECTION (Genesys 5000) ====== */
.legacy-section {
  padding: var(--space-20) 0;
  background:
    radial-gradient(900px 380px at 50% 0%, rgba(14, 165, 199, .06), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg-feature) 100%);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.legacy-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-12);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .legacy-block { grid-template-columns: 1fr; gap: var(--space-8); }
}
.legacy-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-feature) 100%);
  border: 1px solid var(--rule-soft);
  padding: 28px;
  box-shadow: 0 18px 44px rgba(15, 42, 74, .08);
}
.legacy-media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(14, 165, 199, .08), transparent 70%);
  pointer-events: none;
}
.legacy-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(15, 42, 74, .12);
}
.legacy-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clinical-cyan);
  padding: 6px 12px;
  border: 1px solid rgba(14, 165, 199, .35);
  border-radius: 999px;
  margin-bottom: 18px;
}
.legacy-block h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  color: var(--clinical-navy);
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.legacy-block p { color: var(--gray-700); font-size: 1.02rem; line-height: 1.75; max-width: 56ch; }
.legacy-block p + p { margin-top: 12px; }
.legacy-meta {
  display: flex;
  gap: 28px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.legacy-meta-cell .lbl {
  display: block;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 4px;
}
.legacy-meta-cell .val {
  display: block;
  font-size: .98rem;
  color: var(--clinical-navy);
  font-weight: 600;
}

/* FOOTER — light slate, navy text, no more dark navy */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 1px solid var(--rule-soft);
}
.footer h5 { color: var(--footer-heading); }
.footer p { color: var(--footer-text); }
.footer ul a, .footer-bottom { color: var(--footer-text); }
.footer ul a:hover { color: var(--clinical-cyan); }
.footer-bottom { border-top: 1px solid var(--rule-soft); color: var(--clinical-slate); }
.footer-brand img {
  filter: none;        /* show the real LTI logo, not inverted white */
  opacity: 1;
}

/* Nav — ensure cleaner border on light hero */
.nav { border-bottom: 1px solid var(--rule-soft); }
.nav.scrolled { box-shadow: 0 6px 20px rgba(15, 42, 74, .06); }

/* Section.alt — keep but ensure consistent tint */
.section.alt { background: var(--bg-feature); }

/* ==========================================================================
   FINAL OVERRIDES — v3 (definitive contrast + remove residual navy)
   These rules sit at the very bottom of the cascade and use !important
   sparingly to wipe out any earlier dark-navy fills + lock CTA contrast.
   ========================================================================== */

/* "Who We Serve" industry cards — flip from dark navy to clean white tile */
.industry-card {
  background: #FFFFFF !important;
  border: 1px solid var(--rule-soft) !important;
  box-shadow: 0 8px 24px rgba(15, 42, 74, .06);
  color: var(--clinical-navy) !important;
}
.industry-card:hover {
  border-color: var(--clinical-cyan) !important;
  box-shadow: 0 14px 32px rgba(14, 165, 199, .12);
  transform: translateY(-2px);
}
.industry-card h4,
.industry-card .label h4 { color: var(--clinical-navy) !important; }
.industry-card p,
.industry-card .label p { color: var(--gray-600) !important; }
.industry-card .ind-icon,
.industry-card .arrow-circle { color: var(--clinical-cyan) !important; }
.industry-card::after { background: transparent !important; }

/* Any leftover dark blocks from the old palette */
.section.dark,
.cta-section.dark,
.dark-band {
  background: linear-gradient(180deg, var(--bg-feature) 0%, #FFFFFF 100%) !important;
  color: var(--clinical-navy) !important;
}

/* DEFINITIVE CTA BUTTON CONTRAST FIX
   Force solid clinical-cyan with white text everywhere — including inside
   .cta-block, nav, hero, page-hero. Beat the old `.on-dark` cascades. */
.btn.btn-accent,
.cta-block .btn-accent,
.nav .btn-accent,
.hero .btn-accent,
.page-hero .btn-accent,
a.btn-accent {
  background: #0B8AA6 !important;
  color: #FFFFFF !important;
  border: 1px solid #0B8AA6 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}
.btn.btn-accent:hover,
.cta-block .btn-accent:hover,
.nav .btn-accent:hover,
.hero .btn-accent:hover,
.page-hero .btn-accent:hover,
a.btn-accent:hover {
  background: #0F2A4A !important;
  border-color: #0F2A4A !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(15, 42, 74, .25);
}
.btn.btn-accent .arrow,
.cta-block .btn-accent .arrow,
a.btn-accent .arrow { color: #FFFFFF !important; }

/* Ghost button on light CTA must also stay readable */
.cta-block .btn.btn-ghost,
.cta-block a.btn-ghost {
  background: #FFFFFF !important;
  color: #0F2A4A !important;
  border: 1px solid #0F2A4A !important;
  font-weight: 600 !important;
}
.cta-block .btn.btn-ghost:hover,
.cta-block a.btn-ghost:hover {
  background: #0F2A4A !important;
  color: #FFFFFF !important;
}

/* Drop any dark CTA inner panel that may have been kept around */
.cta-block,
.cta-section .cta-block {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-feature) 100%) !important;
  color: var(--clinical-navy) !important;
}
.cta-block h2 { color: var(--clinical-navy) !important; }
.cta-block p  { color: var(--gray-600) !important; }

/* ==========================================================================
   S4FE-D® SAFETY SECTION — richer hero, stat row, where-to-buy
   ========================================================================== */
.s4fed-section {
  background:
    radial-gradient(800px 380px at 90% 0%, rgba(14, 165, 199, .07), transparent 65%),
    var(--bg-feature) !important;
  position: relative;
}
.s4fed-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 42, 74, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 42, 74, .025) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 0%, black, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.s4fed-section > .container { position: relative; z-index: 1; }

.s4fed-hero h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  letter-spacing: -.022em;
  line-height: 1.18;
  color: var(--clinical-navy);
  margin: 8px 0 18px;
  max-width: 22ch;
}

.s4fed-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 28px 0;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 28px rgba(15, 42, 74, .06);
}
@media (max-width: 720px) {
  .s4fed-stats { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
}
.s4fed-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--rule-soft);
}
.s4fed-stat:last-child { border-right: none; padding-right: 0; }
@media (max-width: 720px) {
  .s4fed-stat { border-right: none; border-bottom: 1px solid var(--rule-soft); padding-bottom: 12px; }
  .s4fed-stat:last-child { border-bottom: none; padding-bottom: 0; }
}
.s4fed-stat .num {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--clinical-navy);
  line-height: 1;
}
.s4fed-stat .num .suf { color: var(--clinical-cyan); margin-left: 2px; }
.s4fed-stat .lbl {
  font-size: .88rem;
  color: var(--gray-700);
  line-height: 1.45;
}

.s4fed-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}
.s4fed-cta .btn-primary {
  background: var(--clinical-cyan);
  border-color: var(--clinical-cyan);
  color: #FFFFFF;
  font-weight: 600;
}
.s4fed-cta .btn-primary:hover {
  background: var(--clinical-cyan-dk);
  border-color: var(--clinical-cyan-dk);
  box-shadow: 0 12px 26px rgba(14, 165, 199, .28);
}

/* Family group photo on the hero — let it cover instead of float */
.s4fed-hero .split-visual { padding: 0 !important; overflow: hidden; border-radius: var(--radius-lg); }
.s4fed-hero .split-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; filter: none !important; }

/* === WHERE TO BUY === */
.where-to-buy {
  margin-top: 80px;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-feature-2) 100%);
  border: 1px solid var(--rule-soft);
  box-shadow: 0 18px 40px rgba(15, 42, 74, .06);
}
@media (max-width: 720px) { .where-to-buy { padding: 32px 24px; margin-top: 56px; } }
.where-to-buy .wtb-head { max-width: 740px; margin-bottom: 28px; }
.where-to-buy .wtb-head h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  letter-spacing: -.018em;
  color: var(--clinical-navy);
  margin: 6px 0 12px;
  line-height: 1.25;
}
.where-to-buy .wtb-head p { color: var(--gray-700); line-height: 1.6; max-width: 64ch; }
.wtb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 720px) { .wtb-grid { grid-template-columns: 1fr; } }
.wtb-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wtb-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--clinical-cyan);
}
.wtb-card.distributors::before { background: var(--clinical-navy); }
.wtb-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 42, 74, .10);
  border-color: rgba(14, 165, 199, .35);
}
.wtb-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clinical-cyan);
  margin-bottom: 10px;
}
.wtb-card.distributors .wtb-eyebrow { color: var(--clinical-navy); }
.wtb-card h4 {
  font-size: 1.18rem;
  color: var(--clinical-navy);
  margin: 0 0 10px;
  letter-spacing: -.01em;
}
.wtb-card p { color: var(--gray-700); line-height: 1.6; margin: 0 0 18px; }
.wtb-card .btn-link { color: var(--clinical-cyan); font-weight: 600; }
.wtb-card .btn-link:hover { color: var(--clinical-cyan-dk); }
.wtb-domain {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  color: var(--clinical-cyan);
  letter-spacing: -.01em;
}

/* ==========================================================================
   RESOURCES — gated download form + card polish
   ========================================================================== */
.gate-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(14, 165, 199, .06), rgba(14, 165, 199, .02));
  border: 1px solid rgba(14, 165, 199, .25);
  border-left: 4px solid var(--clinical-cyan);
  border-radius: var(--radius);
  margin-bottom: 28px;
  color: var(--clinical-navy);
}
.gate-banner .gate-icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--clinical-cyan);
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1;
  margin-top: 2px;
}
.gate-banner p { margin: 0; color: var(--gray-700); line-height: 1.55; }

.gate-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 42, 74, .55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
  opacity: 0;
  transition: opacity .25s ease;
}
.gate-modal-backdrop.is-open { display: flex; opacity: 1; }
.gate-modal {
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 32px 32px 28px;
  box-shadow: 0 30px 80px rgba(15, 42, 74, .35);
  border: 1px solid var(--rule-soft);
  transform: translateY(8px);
  transition: transform .25s ease;
}
.gate-modal-backdrop.is-open .gate-modal { transform: translateY(0); }
.gate-modal h3 {
  font-size: 1.4rem;
  color: var(--clinical-navy);
  margin: 0 0 6px;
  letter-spacing: -.015em;
}
.gate-modal .sub {
  color: var(--gray-600);
  font-size: .95rem;
  margin: 0 0 22px;
  line-height: 1.5;
}
.gate-form { display: grid; gap: 14px; }
.gate-field { display: flex; flex-direction: column; gap: 6px; }
.gate-field label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--clinical-navy);
  letter-spacing: .01em;
}
.gate-field input[type="text"],
.gate-field input[type="email"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--rule-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px; /* iOS Safari auto-zoom prevention — was .96rem */
  color: var(--clinical-navy);
  background: #FFFFFF;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 600px) {
  .gate-field input[type="text"],
  .gate-field input[type="email"] { font-size: .96rem; }
}
.gate-field input:focus {
  outline: none;
  border-color: var(--clinical-cyan);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, .18);
}
.gate-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 14px;
  background: var(--bg-feature);
  border-radius: 8px;
  margin-top: 4px;
}
.gate-consent input[type="checkbox"] {
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--clinical-cyan);
  flex-shrink: 0;
}
.gate-consent label {
  font-size: .85rem;
  color: var(--gray-700);
  line-height: 1.5;
  font-weight: 400;
}
.gate-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 12px;
}
.gate-actions .btn-primary {
  background: var(--clinical-cyan) !important;
  border-color: var(--clinical-cyan) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  flex: 1;
}
.gate-actions .btn-primary:hover {
  background: var(--clinical-cyan-dk) !important;
  border-color: var(--clinical-cyan-dk) !important;
}
.gate-cancel {
  background: transparent;
  border: none;
  color: var(--gray-600);
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 6px;
}
.gate-cancel:hover { background: var(--bg-feature); color: var(--clinical-navy); }
.gate-fineprint {
  margin-top: 14px;
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.5;
}

/* ==========================================================================
   VISUAL POLISH — subtle motion, tighter dividers
   ========================================================================== */
.section-head h2 { letter-spacing: -.022em; }
.section-head .lede { max-width: 64ch; }
.product-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 165, 199, .35);
  box-shadow: 0 18px 36px rgba(15, 42, 74, .10);
}
.split-visual img {
  transition: transform .35s ease;
}
.split-visual:hover img { transform: scale(1.02); }
.eyebrow::before { transition: width .25s ease; }
.section-head:hover .eyebrow::before { width: 36px; }

/* ====================================================================== */
/* HERO LAYOUT FIX — add proper grid + generous gap so the copy and the   */
/* Multi-Wiper image breathe.                                             */
/* ====================================================================== */
.hero { padding: 120px 0 140px !important; }
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 96px;
  align-items: center;
}
.hero-copy { max-width: 640px; padding-right: 12px; }
.hero-copy .lede,
.hero-copy p { max-width: 56ch; margin-bottom: 36px; }
.hero-cta { margin-bottom: 56px; }
.hero-stats { padding-top: 36px; margin-top: 8px; }
.hero-visual {
  padding-left: 16px;
  min-height: 540px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual img,
.hero-visual .hero-product {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 540px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Float cards must be absolutely positioned so they sit ON the image —
   without this they become inline flex children and shove the image. */
.hero-visual .float-card {
  position: absolute;
  z-index: 3;
  max-width: 260px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
}
.hero-visual .float-card .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hero-visual .float-card strong {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: 2px;
}
.hero-visual .float-card span {
  display: block;
  font-size: .8rem;
  line-height: 1.35;
}
.hero-visual .float-card-1 { top: 8%;    left: -8px; }
.hero-visual .float-card-2 { bottom: 10%; right: -8px; }

@media (max-width: 1100px) {
  .hero-inner { gap: 64px; }
  .hero-visual .float-card { max-width: 220px; }
}
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; gap: 56px; }
  .hero-copy  { padding-right: 0; max-width: none; }
  .hero-visual { padding-left: 0; min-height: 0; }
  .hero { padding: 88px 0 96px !important; }
}
@media (max-width: 720px) {
  .hero-visual .float-card-1,
  .hero-visual .float-card-2 { display: none; }
}

/* ============================================================
   PAGE-HERO QUICKLINKS  (used on resources.html, service.html)
   ============================================================ */
.page-hero-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.page-hero-quicklinks a {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.page-hero-quicklinks a:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-1px);
}

/* ============================================================
   S4FE-D HELP & SUPPORT  —  3-card grid + technical articles
   ============================================================ */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 12px;
}
.help-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.help-card:hover {
  border-color: var(--accent, #0d6cd6);
  box-shadow: 0 12px 32px rgba(13, 108, 214, .08);
  transform: translateY(-2px);
}
.help-card .help-ico {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 108, 214, .10);
  color: var(--accent, #0d6cd6);
  border-radius: 12px;
  flex-shrink: 0;
}
.help-card h3 {
  margin: 4px 0 0;
  font-size: 1.18rem;
  line-height: 1.3;
  color: var(--text, #0d1b2a);
}
.help-card p {
  font-size: .95rem;
  color: var(--gray-600, #4b5563);
  margin: 0;
  line-height: 1.55;
}
.help-card .help-meta {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  font-weight: 600;
  margin-top: auto;
}
.help-card .help-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #0d6cd6);
  font-weight: 700;
  font-size: .92rem;
  padding-top: 8px;
  border-top: 1px solid var(--border, #e5e9ee);
}

/* Technical articles */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 12px;
}
.article-card {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.article-card:hover {
  border-color: var(--accent, #0d6cd6);
  box-shadow: 0 8px 24px rgba(13, 108, 214, .06);
}
.article-tag {
  display: inline-block;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent, #0d6cd6);
  background: rgba(13, 108, 214, .08);
}
.article-card h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text, #0d1b2a);
}
.article-card p {
  margin: 0;
  font-size: .92rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
}
.article-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: .9rem;
  color: var(--accent, #0d6cd6);
  text-decoration: none;
  margin-top: auto;
  cursor: pointer;
}
.article-link:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .help-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .help-grid, .article-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICE PAGE — FAQ ACCORDION
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  max-width: 920px;
}
.faq-item {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] {
  border-color: var(--accent, #0d6cd6);
  box-shadow: 0 8px 24px rgba(13, 108, 214, .06);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-product {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent, #0d6cd6);
  background: rgba(13, 108, 214, .08);
  white-space: nowrap;
}
.faq-q {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text, #0d1b2a);
}
.faq-toggle {
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent, #0d6cd6);
  width: 24px;
  text-align: center;
  transition: transform .2s ease;
}
.faq-item[open] .faq-toggle { transform: rotate(45deg); }
.faq-body {
  padding: 0 24px 24px 24px;
  border-top: 1px solid var(--border, #e5e9ee);
  margin-top: -2px;
  padding-top: 18px;
}
.faq-body p, .faq-body ol, .faq-body ul {
  font-size: .95rem;
  line-height: 1.6;
  color: var(--gray-600, #4b5563);
  margin: 0 0 12px;
}
.faq-body ol, .faq-body ul {
  padding-left: 22px;
}
.faq-body li { margin-bottom: 6px; }
.faq-body strong { color: var(--text, #0d1b2a); }

.faq-foot {
  margin-top: 28px;
  font-size: .95rem;
  color: var(--gray-600, #4b5563);
}

@media (max-width: 720px) {
  .faq-item summary { grid-template-columns: 1fr auto; gap: 12px; }
  .faq-product { grid-column: 1 / -1; }
}

/* ============================================================
   SERVICE PAGE — REPAIR VIDEO GRID
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.video-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.video-card:hover {
  border-color: var(--accent, #0d6cd6);
  box-shadow: 0 14px 36px rgba(13, 108, 214, .10);
  transform: translateY(-3px);
}
.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #102a43 0%, #1f4068 60%, #2d5a8c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .12), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(13, 108, 214, .25), transparent 55%);
  pointer-events: none;
}
.video-thumb .play-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform .2s ease, background .2s ease;
}
.video-card:hover .play-icon {
  transform: scale(1.06);
  background: rgba(255, 255, 255, .22);
}
.video-thumb .play-icon svg { margin-left: 4px; }
.video-meta {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
}
.video-body { padding: 22px 22px 24px; }
.video-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent, #0d6cd6);
  background: rgba(13, 108, 214, .08);
  margin-bottom: 10px;
}
.video-body h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--text, #0d1b2a);
}
.video-body p {
  margin: 0;
  font-size: .9rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
}

@media (max-width: 1024px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICE PAGE — PM CADENCE GRID
   ============================================================ */
.pm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.pm-cell {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
  padding: 22px 22px 24px;
}
.pm-cell .pm-cadence {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--accent, #0d6cd6);
  background: rgba(13, 108, 214, .10);
  margin-bottom: 10px;
}
.pm-cell h5 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  color: var(--text, #0d1b2a);
}
.pm-cell p {
  margin: 0;
  font-size: .9rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
}
@media (max-width: 1024px) { .pm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pm-grid { grid-template-columns: 1fr; } }

/* ============================================================
   SERVICE PAGE — REGISTRATION / SERVICE REQUEST
   ============================================================ */
.register-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
  margin-top: 16px;
}
.register-side {
  position: sticky;
  top: 24px;
}
.register-callouts {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.register-callouts .callout {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
}
.register-callouts .callout-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent, #0d6cd6);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.register-callouts h4 {
  margin: 2px 0 4px;
  font-size: 1.0rem;
  color: var(--text, #0d1b2a);
}
.register-callouts p {
  margin: 0;
  font-size: .9rem;
  color: var(--gray-600, #4b5563);
  line-height: 1.55;
}
.register-contact {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e5e9ee);
}
.register-contact h5 {
  margin: 0 0 12px;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  font-weight: 700;
}
.register-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.register-contact a {
  color: var(--text, #0d1b2a);
  text-decoration: none;
  font-weight: 600;
}
.register-contact a:hover { color: var(--accent, #0d6cd6); }

.register-form {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 4px 12px rgba(13, 27, 42, .04);
}
.btn-sent { background: #16a34a !important; border-color: #16a34a !important; }

@media (max-width: 1024px) {
  .register-grid { grid-template-columns: 1fr; gap: 40px; }
  .register-side { position: static; }
}

/* ============================================================
   ARTICLE READING PAGE
   ============================================================ */
.article-page {
  padding: 80px 0 96px;
  background: #fff;
}
.article-shell {
  max-width: 760px;
  margin: 0 auto;
}
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--gray-600, #5b6b7d);
  margin-bottom: 18px;
}
.article-meta-row .article-tag {
  background: var(--cyan-50, #ecf6ff);
  color: var(--clinical-navy, #0d1b2a);
  border: 1px solid var(--cyan-100, #d2e8fa);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.article-meta-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gray-400, #b6c0cc); }

.article-title {
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.18;
  font-weight: 800;
  color: var(--clinical-navy, #0d1b2a);
  letter-spacing: -.01em;
  margin: 0 0 18px;
}
.article-deck {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--gray-700, #41505f);
  margin: 0 0 36px;
}

.article-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--gray-800, #2c3845);
}
.article-body h2 {
  font-size: 1.55rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--clinical-navy, #0d1b2a);
  margin: 48px 0 14px;
  letter-spacing: -.005em;
}
.article-body h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--clinical-navy, #0d1b2a);
  margin: 28px 0 10px;
}
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol {
  padding-left: 22px;
  margin: 0 0 18px;
}
.article-body li { margin: 0 0 8px; }
.article-body li::marker { color: var(--cyan-500, #0d6cd6); }
.article-body strong { color: var(--clinical-navy, #0d1b2a); }
.article-body blockquote {
  border-left: 3px solid var(--cyan-500, #0d6cd6);
  padding: 4px 0 4px 18px;
  margin: 22px 0;
  color: var(--gray-700, #41505f);
  font-style: italic;
}
.article-body .pull-stat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 32px;
  padding: 24px;
  background: var(--gray-50, #f5f7fa);
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
}
.article-body .pull-stat > div { text-align: center; }
.article-body .pull-stat .num {
  display: block;
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: var(--clinical-navy, #0d1b2a);
  margin-bottom: 6px;
}
.article-body .pull-stat .lbl {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-600, #5b6b7d);
  font-weight: 600;
}
.article-body .callout {
  background: var(--cyan-50, #ecf6ff);
  border-left: 3px solid var(--cyan-500, #0d6cd6);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  margin: 22px 0;
}
.article-body .callout strong { display: block; margin-bottom: 4px; }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: .96rem;
}
.article-body th, .article-body td {
  border-bottom: 1px solid var(--border, #e5e9ee);
  padding: 12px 14px;
  text-align: left;
}
.article-body th {
  background: var(--gray-50, #f5f7fa);
  font-weight: 700;
  color: var(--clinical-navy, #0d1b2a);
  font-size: .85rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.article-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #e5e9ee);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.article-foot .source {
  font-size: .85rem;
  color: var(--gray-600, #5b6b7d);
}
@media (max-width: 720px) {
  .article-body .pull-stat { grid-template-columns: 1fr; }
}

/* ============================================================
   FEATURED EBOOK TILE (gated download)
   ============================================================ */
.ebook-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, #0d1b2a 0%, #14304a 60%, #0d6cd6 140%);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  margin-top: 16px;
  box-shadow: 0 14px 38px rgba(13, 27, 42, .18);
}
.ebook-feature-text { padding: 44px 44px 40px; }
.ebook-feature .eyebrow {
  display: inline-block;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  padding: 5px 12px;
  border-radius: 999px;
  color: #cfe6ff;
  font-size: .72rem;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
/* Pill-style eyebrow doesn't need the decorative dash */
.ebook-feature .eyebrow::before { display: none; }
.ebook-feature h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -.005em;
}
.ebook-feature p {
  color: rgba(255,255,255,.78);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 56ch;
}
.ebook-feature .ebook-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin: 18px 0 26px;
}
.ebook-feature .ebook-stats .num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.ebook-feature .ebook-stats .lbl {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}
.ebook-feature .btn-accent {
  background: #fff;
  color: var(--clinical-navy, #0d1b2a);
}
.ebook-feature .btn-accent:hover {
  background: #cfe6ff;
  color: var(--clinical-navy, #0d1b2a);
}

.ebook-feature-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
  background: rgba(255,255,255,.04);
  border-left: 1px solid rgba(255,255,255,.08);
}
.ebook-feature-cover .cover {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 3/4;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  padding: 22px 20px;
  color: var(--clinical-navy, #0d1b2a);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform: rotate(-3deg);
  transition: transform .35s ease;
}
.ebook-feature:hover .ebook-feature-cover .cover { transform: rotate(0deg) scale(1.02); }
.ebook-feature-cover .cover .top-rule {
  height: 4px; width: 36px; background: #0d6cd6; border-radius: 2px; margin-bottom: 14px;
}
.ebook-feature-cover .cover .cover-eyebrow {
  font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: #5b6b7d; font-weight: 700; margin-bottom: 8px;
}
.ebook-feature-cover .cover h4 {
  font-size: 1.15rem; line-height: 1.18; margin: 0 0 14px; font-weight: 800; letter-spacing: -.005em;
}
.ebook-feature-cover .cover .cover-foot {
  font-size: .72rem; color: #5b6b7d; border-top: 1px solid #e5e9ee; padding-top: 10px; line-height: 1.35;
}
.ebook-feature-cover .cover .cover-foot strong { color: #0d1b2a; display: block; }

@media (max-width: 900px) {
  .ebook-feature { grid-template-columns: 1fr; }
  .ebook-feature-cover { border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding: 28px; }
  .ebook-feature-cover .cover { transform: rotate(0); max-width: 200px; }
  .ebook-feature-text { padding: 36px 28px 28px; }
}

/* ============================================================
   S4FE-D HOMEPAGE BLOCKS (universal-line, industrial-callout, core grid)
   ============================================================ */
.universal-line {
  background: linear-gradient(135deg, rgba(13,108,214,.08), rgba(13,108,214,.02));
  border-left: 3px solid var(--cyan-500, #0d6cd6);
  padding: 16px 18px;
  border-radius: 0 10px 10px 0;
  margin: 18px 0 18px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--gray-800, #2c3845);
}
.universal-line strong { color: var(--clinical-navy, #0d1b2a); }

.industrial-callout {
  font-size: .92rem;
  line-height: 1.5;
  color: var(--gray-700, #41505f);
  background: var(--gray-50, #f5f7fa);
  border: 1px dashed var(--border, #e5e9ee);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 6px 0 18px;
}
.industrial-callout a { color: var(--cyan-500, #0d6cd6); font-weight: 600; }

.s4fed-core-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}
.s4fed-core {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.s4fed-core:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13,27,42,.08);
  border-color: var(--cyan-200, #b9dafa);
}
.s4fed-core.highlight {
  border: 2px solid var(--cyan-500, #0d6cd6);
  background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
  box-shadow: 0 12px 30px rgba(13,108,214,.10);
}
.s4fed-core.minor {
  background: var(--gray-50, #f5f7fa);
  border-style: dashed;
}
.s4fed-core .core-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--gray-100, #eef1f5);
  color: var(--gray-700, #41505f);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
}
.s4fed-core .core-tag-accent {
  background: var(--cyan-500, #0d6cd6);
  color: #fff;
}
.s4fed-core .core-tag-muted {
  background: transparent;
  color: var(--gray-600, #5b6b7d);
  border: 1px solid var(--border, #e5e9ee);
}
.s4fed-core h3 {
  font-size: 1.18rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--clinical-navy, #0d1b2a);
  margin: 4px 0 0;
}
.s4fed-core p {
  font-size: .96rem;
  line-height: 1.55;
  color: var(--gray-700, #41505f);
  margin: 0;
}
.s4fed-core p strong { color: var(--clinical-navy, #0d1b2a); }
.s4fed-core .core-specs {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  border-top: 1px solid var(--border, #e5e9ee);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s4fed-core .core-specs li {
  font-size: .85rem;
  color: var(--gray-700, #41505f);
  line-height: 1.4;
}
.s4fed-core .core-specs strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--clinical-navy, #0d1b2a);
  background: var(--gray-50, #f5f7fa);
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 6px;
}
@media (max-width: 1024px) {
  .s4fed-core-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .s4fed-core-grid { grid-template-columns: 1fr; }
}

/* Heritage 6-stat grid (homepage) */
.heritage-stat-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin: 32px 0 28px;
}
@media (max-width: 1100px) {
  .heritage-stat-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .heritage-stat-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FIX: section-tight .cta-block uses .row (flex) layout, not grid
   (Otherwise the .row gets squeezed into the first grid column.)
   ============================================================ */
.section-tight .cta-block {
  display: block;
  padding: 56px 60px;
}
.section-tight .cta-block .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.section-tight .cta-block .row > div:first-child { flex: 1 1 60%; min-width: 280px; }
.section-tight .cta-block .btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
@media (max-width: 800px) {
  .section-tight .cta-block { padding: 40px 28px; }
  .section-tight .cta-block .row { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Industry-card bullet list (Hospital RSO card on homepage)
   Tight, clinical, easy-scan four-bullet list
   ============================================================ */
.industry-card .industry-bullets {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.industry-card .industry-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray-700, #4a5568);
}
.industry-card .industry-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 2px;
  background: var(--clinical-cyan, #0d6cd6);
  border-radius: 1px;
}

/* Where-to-Buy split panels (products page) */
.wtb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 28px;
}
.wtb-panel {
  background: #fff;
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 16px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wtb-panel .wtb-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--clinical-cyan, #0d6cd6);
}
.wtb-panel h3 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--clinical-navy, #0d1b2a);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wtb-panel p {
  margin: 0;
  color: var(--gray-700, #4a5568);
  font-size: .95rem;
  line-height: 1.6;
}
.wtb-panel ul {
  margin: 4px 0 8px;
  padding-left: 20px;
  color: var(--gray-700, #4a5568);
  font-size: .92rem;
  line-height: 1.6;
}
.wtb-panel ul li { margin: 2px 0; }
.wtb-panel .wtb-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
}
@media (max-width: 800px) {
  .wtb-split { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE — VIDEO HERO + COMPANY INTRODUCTION
   Company-first messaging. Video lives behind a navy overlay,
   centered text on top.
   ============================================================ */

/* Video hero — overrides the existing .hero rules below it */
.hero.hero-video {
  position: relative;
  overflow: hidden;
  min-height: 78vh;
  padding: 120px 0 100px;
  background: var(--clinical-navy, #0d1b2a);
  isolation: isolate;
}
.hero.hero-video::before { display: none; } /* kill the legacy gradient sheet */

.hero-bg-video,
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Default tuning — videos benefit from a moderate brightness reduction
     so they recede behind the headline. Real photos override below. */
  filter: brightness(0.85) contrast(1.10) saturate(0.95);
}
/* Real photos (not AI videos) have proper exposure baked in already and
   shouldn't be darkened the way the brand-loop video is. Lighter filter. */
.hero-bg-img {
  filter: brightness(0.98) contrast(1.04) saturate(1.00);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Lighter top-to-bottom gradient + a softer radial darkening behind the
     text. The headline still reads thanks to its text-shadow, and the
     background photo (real office, not AI) reads clearly underneath. */
  background:
    linear-gradient(180deg, rgba(13,27,42,0.28) 0%, rgba(13,27,42,0.48) 100%),
    radial-gradient(720px 360px at 50% 45%, rgba(13,27,42,0.30) 0%, transparent 72%);
  pointer-events: none;
}

.hero.hero-video .hero-inner-centered {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

.hero.hero-video .hero-copy.hero-centered {
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
  padding: 0 16px;
}

.hero.hero-video .hero-copy.hero-centered .eyebrow.on-dark {
  display: inline-flex;
  align-items: center;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.18em;
}

.hero.hero-video h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 22px;
  /* Stronger shadow so the headline anchors clearly against the video */
  text-shadow: 0 2px 28px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
}

.hero.hero-video .lede {
  color: rgba(255,255,255,0.95);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.55;
  max-width: 720px;
  margin: 0 auto 32px;
  font-weight: 400;
  text-shadow: 0 1px 14px rgba(0,0,0,0.50);
}

.hero.hero-video .hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero.hero-video .btn.btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.06);
}
.hero.hero-video .btn.btn-ghost:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.7);
}

@media (max-width: 720px) {
  .hero.hero-video { min-height: 64vh; padding: 90px 0 70px; }
  .hero.hero-video .hero-inner-centered { min-height: 40vh; }
}

/* Company introduction — single, centered, premium paragraph */
.company-intro {
  padding: 100px 0 90px;
  background: #fff;
  border-bottom: 1px solid var(--border, #e5e9ee);
}
.company-intro-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.company-intro-inner .eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  color: var(--clinical-cyan, #0d6cd6);
  letter-spacing: 0.2em;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}
.company-intro-text {
  font-size: clamp(1.15rem, 1.4vw, 1.45rem);
  line-height: 1.65;
  color: var(--gray-800, #1f2937);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
.company-intro-text strong { color: var(--clinical-navy, #0d1b2a); }

@media (max-width: 720px) {
  .company-intro { padding: 64px 0 56px; }
}

/* ============================================================
   .home-quiet — de-emphasizes everything between the company
   intro and the bottom CTA so company copy leads, products follow
   ============================================================ */
.home-quiet section { padding-top: 72px; padding-bottom: 72px; }
.home-quiet .section-head h2,
.home-quiet section > .container > h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
}
.home-quiet .section-head .eyebrow {
  font-size: 0.72rem;
}
.home-quiet .section-head .lede {
  font-size: 1rem;
  max-width: 720px;
}
.home-quiet .legacy-section { padding: 64px 0; }
.home-quiet .capability-band { padding: 56px 0; }
@media (max-width: 720px) {
  .home-quiet section { padding-top: 56px; padding-bottom: 56px; }
}

/* ============================================================
   Where-to-Use bullet list (S4FE-D Products page)
   ============================================================ */
.where-to-use-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 22px;
}
.where-to-use-list li {
  position: relative;
  padding-left: 18px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--gray-700, #41505f);
}
.where-to-use-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  background: var(--clinical-cyan, #0EA5C7);
  border-radius: 50%;
}
.where-to-use-list strong { color: var(--clinical-navy, #0d1b2a); }
@media (max-width: 720px) {
  .where-to-use-list { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE HERO — GAMMA SPECTRUM VARIANT (Products page)
   Stylized MCA-style spectrum background, dark navy + cyan glow.
   Overrides the default light page-hero theme on this page only.
   ============================================================ */
.page-hero.page-hero-spectrum {
  background:
    radial-gradient(900px 480px at 78% 12%, rgba(34, 211, 238, .18), transparent 60%),
    linear-gradient(180deg, #04101F 0%, #0A1F3D 60%, #0D2A4D 100%);
  color: #E6F4F8;
  padding: 24px 0 96px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(34, 211, 238, .14);
}
/* Kill the default grid pseudo — we have our own grid in the SVG */
.page-hero.page-hero-spectrum::before { display: none; }
.page-hero.page-hero-spectrum .container { position: relative; z-index: 2; }
.page-hero.page-hero-spectrum h1        { color: #FFFFFF; }
.page-hero.page-hero-spectrum p         { color: rgba(230, 244, 248, .82); }
.page-hero.page-hero-spectrum .breadcrumb        { color: rgba(230, 244, 248, .55); }
.page-hero.page-hero-spectrum .breadcrumb a      { color: #67E8F9; }
.page-hero.page-hero-spectrum .breadcrumb .sep   { color: rgba(230, 244, 248, .35); }
.page-hero.page-hero-spectrum .eyebrow.on-dark         { color: #67E8F9; }
.page-hero.page-hero-spectrum .eyebrow.on-dark::before { background: #67E8F9; }

.hero-spectrum-svg {
  /* Constrained to the page container (var(--container) = 1240px), centered.
     The SVG itself uses preserveAspectRatio="none" so the full 0-1000 keV
     spectrum is always visible — no left/right cropping, no top/bottom black
     bands. The artwork fills the box exactly between the normal text
     margins, top-to-bottom. */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container);
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
@media (max-width: 720px) {
  .page-hero.page-hero-spectrum { padding: 16px 0 64px; }
}




/* ============================================================
   PRODUCT PAGE — Category nav cards + Product grids + Decon grid
   ============================================================ */

/* Smooth-scroll target offset so anchor jumps land below the sticky nav */
section[id] { scroll-margin-top: 88px; }

/* ---- Category nav (3 cards under hero) ---------------------------------- */
.category-nav { padding: 56px 0 24px; background: #FFFFFF; }
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .category-grid { grid-template-columns: 1fr; gap: 16px; } }

.category-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 4px 14px rgba(15, 42, 74, 0.04);
}
.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 18px 40px rgba(15, 42, 74, 0.12);
}
.category-card-img {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--clinical-navy, #0F2A4A);
}
.category-card-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) brightness(.92);
  transition: transform .4s ease, filter .4s ease;
}
.category-card:hover .category-card-img > img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.category-card-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 74, 0) 50%, rgba(15, 42, 74, 0.40) 100%);
  pointer-events: none;
  z-index: 1;
}
.category-card-decon-art {
  background: linear-gradient(135deg, #04101F 0%, #0A1F3D 60%, #0D2A4D 100%);
  display: block;
}
.category-card-decon-art > svg { width: 100%; height: 100%; display: block; }
.category-card-decon-art::after { display: none; } /* no overlay on the custom art card */

/* Logo-style image card (S4FE-D wordmark) — letterbox the square logo on its own dark bg */
.category-card-img-logo { background: #000000; }
.category-card-img-logo > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none;            /* don't dim the logo */
}
.category-card:hover .category-card-img-logo > img { transform: scale(1.04); filter: none; }
.category-card-img-logo::after { display: none; } /* no gradient overlay on the logo */

.category-card-content {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.category-card-num {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 6px;
}
.category-card h3 {
  font-size: 1.5rem;
  margin: 0 0 4px;
  color: var(--clinical-navy, #0F2A4A);
}
.category-card p {
  font-size: .95rem;
  margin: 0 0 16px;
  color: var(--gray-600, #5b6573);
  line-height: 1.5;
}
.category-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--clinical-cyan, #0EA5C7);
  margin-top: auto;
}
.category-card-arrow .arrow { transition: transform .25s ease; display: inline-block; }
.category-card:hover .category-card-arrow .arrow { transform: translateX(4px); }

/* ---- Product cards — compact horizontal layout (thumbnail | content | CTA) -- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;       /* one card per row, full-width strip */
  gap: 16px;
  margin-top: 28px;
}

/* ============================================================
   ACCESSORIES grid (products.html) — counter consumables + accessories.
   Tighter, 4-up presentation since each card is much smaller than a counter card.
   ============================================================ */
.accessory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;             /* tighter — was 20 */
  margin-top: 20px;      /* tighter — was 28 */
}
@media (max-width: 1000px) { .accessory-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .accessory-grid { grid-template-columns: 1fr; } }

/* Accessories section itself — tighter vertical padding than the standard
   .section, since these are auxiliary items rather than headline products. */
#accessories.section { padding: 56px 0; }

.accessory-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.accessory-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 42, 74, 0.07);
}
.accessory-card:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}
.accessory-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;         /* compact — was 200 */
  padding: 14px;
  background: var(--bg-feature, #F1F6F9);
  border-bottom: 1px solid var(--rule-soft, #DCE5EC);
  overflow: hidden;
}
.accessory-card-media img {
  display: block;
  max-width: 80%;        /* shrink product within its frame */
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.accessory-card-body {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  flex: 1;
}
.accessory-card-eyebrow {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  margin-bottom: 4px;
}
.accessory-card-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 4px;
  line-height: 1.3;
}
.accessory-card-price {
  display: block;
  font-size: 0.75rem;
  color: var(--gray-500, #6E7E92);
  margin-bottom: 7px;
  letter-spacing: 0.02em;
  font-weight: 600;
}
.accessory-card-body p {
  font-size: 0.83rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.45;
  margin: 0 0 10px;
  flex: 1;
}
.accessory-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--clinical-cyan-dk, #0B8AA6);
}
.accessory-card:hover .accessory-card-cta { text-decoration: underline; }

.product-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 18px;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--rule-soft, #e5e9ee);
  background: #FFFFFF;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.product-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 8px 22px rgba(15, 42, 74, 0.08);
  transform: translateY(-1px);
}
.product-card-media {
  aspect-ratio: 4/3;
  background: linear-gradient(180deg, var(--bg-feature, #f0f6fb) 0%, #FFFFFF 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.product-card-media img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-card-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.product-card-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.product-card h3 {
  font-size: 1.25rem;
  margin: 0 0 2px;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.25;
}
.product-card-variant {
  font-size: .92rem;
  font-weight: 500;
  color: var(--gray-600, #5b6573);
  margin-left: 4px;
}
.product-card-desc {
  color: var(--gray-700, #475363);
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
}

/* Specs as a compact 2-col inline list — no per-row borders, no big labels */
.product-card-specs {
  list-style: none;
  padding: 0;
  margin: 4px 0 4px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  font-size: .82rem;
  color: var(--gray-700, #475363);
}
.product-card-specs li {
  border: none;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card-specs li strong {
  display: inline;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 600;
}

.product-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Smaller button variant for the compact cards */
.btn.btn-sm {
  font-size: .85rem;
  padding: 8px 16px;
}

/* Stack on narrow viewports */
@media (max-width: 720px) {
  .product-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .product-card-media {
    max-width: 220px;
    width: 100%;
  }
  .product-card-specs { grid-template-columns: 1fr; }
}

/* ---- Decon (Safety) grid — 2-up vertical cards (image on top, content below) -- */
.decon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}
@media (max-width: 720px) { .decon-grid { grid-template-columns: 1fr; gap: 20px; } }

.decon-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.decon-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(15, 42, 74, 0.09);
}
.decon-card-media {
  aspect-ratio: 4/3;                /* squarer than 16/10 — gives tall bottles vertical room */
  background: linear-gradient(180deg, var(--bg-feature, #f0f6fb) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
  position: relative;
  overflow: hidden;                 /* safety: clip any overflow */
}
.decon-card-media img {
  position: absolute;
  inset: 24px;                      /* padding via inset — keeps the img's box inside the card-media */
  width: calc(100% - 48px);
  height: calc(100% - 48px);
  object-fit: contain;              /* scale to fit, preserve aspect, center */
  object-position: center center;
  display: block;
}
.decon-card-body {
  padding: 22px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.decon-card-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.decon-card h3 {
  font-size: 1.3rem;
  margin: 0 0 2px;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.25;
}
.decon-card-variant {
  font-size: .92rem;
  font-weight: 500;
  color: var(--gray-600, #5b6573);
  margin-left: 4px;
}
.decon-card-desc {
  color: var(--gray-700, #475363);
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
}
.decon-card-specs {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 18px;
  font-size: .82rem;
  color: var(--gray-700);
}
.decon-card-specs li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.decon-card-specs li strong {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 600;
}
.decon-card-actions {
  margin-top: 8px;
}

/* ---- Home Isolation Kits — crossfade carousel --------------------------- */
.decon-carousel { position: relative; }

/* Both slide images stack absolutely inside the card-media (positioning is
   already provided by `.decon-card-media img` — we only override opacity/animation). */
.decon-carousel .carousel-slide {
  opacity: 0;
  animation: carousel-fade 8s ease-in-out infinite;
  will-change: opacity;
}
.decon-carousel .carousel-slide:nth-of-type(1) { animation-delay: 0s; }
.decon-carousel .carousel-slide:nth-of-type(2) { animation-delay: -4s; }

@keyframes carousel-fade {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}

/* Indicator dots at the bottom of the card-media */
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
  pointer-events: none;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(15, 42, 74, 0.22);
  animation: carousel-dot-flip 8s ease-in-out infinite;
}
.carousel-dot:nth-child(1) { animation-delay: 0s; }
.carousel-dot:nth-child(2) { animation-delay: -4s; }

@keyframes carousel-dot-flip {
  0%, 45%  { background: var(--clinical-cyan, #0EA5C7); transform: scale(1.25); }
  50%, 95% { background: rgba(15, 42, 74, 0.22); transform: scale(1); }
  100%     { background: var(--clinical-cyan, #0EA5C7); transform: scale(1.25); }
}

/* Respect users who prefer reduced motion — show first slide only, no animation */
@media (prefers-reduced-motion: reduce) {
  .decon-carousel .carousel-slide { animation: none; }
  .decon-carousel .carousel-slide:nth-of-type(1) { opacity: 1; }
  .carousel-dot { animation: none; }
  .carousel-dot:nth-child(1) { background: var(--clinical-cyan, #0EA5C7); transform: scale(1.25); }
}

/* ---- Distributor / online purchase note --------------------------------- */
.distributor-note {
  margin-top: 36px;
  padding: 20px 28px;
  background: linear-gradient(135deg, var(--bg-feature, #f0f6fb) 0%, #FFFFFF 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 10px;
  text-align: center;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1rem;
  line-height: 1.5;
}
.distributor-note a {
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.distributor-note a:hover { color: var(--clinical-navy, #0F2A4A); }

/* ---- Military / Government / Defense Contractors CTA -------------------- */
.mil-cta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 16px 22px;
  background: linear-gradient(135deg, #f5f5ee 0%, #FFFFFF 100%);
  border: 1px solid #d6d8c0;
  border-left: 4px solid #6b7150;     /* olive accent — distinct from the cyan civilian CTA */
  border-radius: 10px;
}
.mil-cta-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #1a1d12;                /* dark backdrop matches the MilSpec photo's tactical look */
  border: 1px solid #4a4f33;
  border-radius: 6px;
  padding: 6px;
}
.mil-cta-body { flex: 1; min-width: 0; }
.mil-cta-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #4a4f33;
  margin-bottom: 4px;
}
.mil-cta p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--clinical-navy, #0F2A4A);
}
.mil-cta a {
  color: #6b7150;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mil-cta a:hover { color: #2f3322; }

@media (max-width: 600px) {
  .mil-cta {
    flex-direction: column;
    text-align: center;
    align-items: center;
    padding: 18px;
  }
  .mil-cta-body { text-align: center; }
}

/* ============================================================
   ABOUT PAGE — Parallax hero (Chicago skyline)
   ============================================================ */
.page-hero.page-hero-parallax {
  position: relative;
  overflow: hidden;
  padding: 24px 0 120px;
  color: #FFFFFF;
  background: #04101F;             /* fallback while bg image loads */
  border-bottom: 1px solid rgba(34, 211, 238, .14);
}
/* Disable the default light-theme override + any pre-existing radial bg / grid pseudo */
.page-hero.page-hero-parallax::before { display: none; }
.page-hero.page-hero-parallax > .container { position: relative; z-index: 3; }

/* The skyline image — slightly oversized so the parallax translate has room
   to shift without exposing the edges. The outer layer receives the JS-driven
   scroll transform; the inner layer carries the slow Ken Burns animation so
   the two transforms never collide. */
.page-hero-parallax-bg {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  overflow: hidden;
}
.page-hero-parallax-bg-inner {
  position: absolute;
  inset: 0;
  background-image: url("../images/hero/lti-building-hero-v3.jpg?v=20260526a");
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  /* Ken Burns: slow zoom + gentle drift. The drift moves slightly right to
     reveal more of the building's depth as it stretches back into frame. */
  transform-origin: 60% 50%;
  animation: kenburns-building 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns-building {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  100% { transform: scale(1.10) translate3d(2%, -1%, 0); }
}
/* Gentle gradient overlay tuned for the overcast building photo. Headline
   still reads cleanly thanks to text-shadow, but the building's natural
   midtones and stone wainscoting are no longer crushed into mud. */
.page-hero-parallax-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 16, 31, 0.10) 0%, rgba(4, 16, 31, 0.34) 100%),
    linear-gradient(90deg,  rgba(4, 16, 31, 0.20) 0%, rgba(4, 16, 31, 0.02) 55%, rgba(4, 16, 31, 0.00) 100%);
  z-index: 2;
  pointer-events: none;
}
/* Headline + tagline styling on the parallax hero. Text-shadow strengthened
   to compensate for the lighter overlay tuned for the building photo. */
.page-hero.page-hero-parallax h1 {
  color: #FFFFFF;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin: 14px 0 18px;
  letter-spacing: -.5px;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .55),
    0 6px 28px rgba(0, 0, 0, .55);
}
.page-hero.page-hero-parallax .hero-tagline {
  color: rgba(255, 255, 255, .96);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  max-width: 56ch;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .55),
    0 4px 18px rgba(0, 0, 0, .55);
}
.page-hero.page-hero-parallax .breadcrumb       { color: rgba(255, 255, 255, .65); }
.page-hero.page-hero-parallax .breadcrumb a     { color: #67E8F9; }
.page-hero.page-hero-parallax .eyebrow.on-dark  { color: #67E8F9; }
.page-hero.page-hero-parallax .eyebrow.on-dark::before { background: #67E8F9; }

/* Reduced motion users — keep the hero static, no parallax + no Ken Burns */
@media (prefers-reduced-motion: reduce) {
  .page-hero-parallax-bg { transform: none !important; }
  .page-hero-parallax-bg-inner { animation: none !important; transform: none !important; }
}
@media (max-width: 720px) {
  .page-hero.page-hero-parallax { padding: 90px 0 80px; }
  .page-hero-parallax-bg-inner { background-position: center center; }
}

/* ============================================================
   PATIENT ISOLATION KITS PAGE — warm, consumer-friendly sections
   ============================================================ */

/* Prose block — story / explanation paragraphs */
.prose-block {
  max-width: 70ch;
  margin: 0 auto;
}
.prose-block p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gray-700, #475363);
  margin: 0 0 1.1em;
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block em { color: var(--clinical-navy, #0F2A4A); font-style: italic; }
.prose-block h3 {
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 2em 0 0.5em;
}
.prose-block h3:first-child { margin-top: 0; }

/* ============================================================
   FROM-THE-ARCHIVES card (heritage video on Our Story page)
   Used to embed the 2014 Bind-It commercial with explicit
   rebrand framing so the old branding reads as continuity.
   ============================================================ */
.archive-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 40px 32px;
  background: linear-gradient(180deg, #fbfcfd 0%, #f5f8fa 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
@media (max-width: 700px) {
  .archive-card { padding: 24px 22px 22px; }
}
.archive-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 8px;
}
.archive-title {
  margin: 0 0 14px;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.2;
}
.archive-lede {
  margin: 0 0 22px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
}
.archive-lede a {
  color: var(--clinical-cyan-dk, #0B8AA6);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.archive-lede a:hover { color: var(--clinical-navy, #0F2A4A); }

/* Responsive 16:9 YouTube wrapper */
.archive-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 22px;
  box-shadow: 0 12px 32px -10px rgba(15, 42, 74, .25);
}
.archive-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.archive-foot {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--clinical-slate);
  font-style: italic;
}
.archive-foot em { font-style: normal; font-weight: 700; color: var(--clinical-navy, #0F2A4A); }

/* ============================================================
   DRK page — kit contents, configurations, and use cases
   ============================================================ */

/* What's in it — kit contents grid (3 sections of bulleted items) */
.kit-contents-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 28px;
}
@media (max-width: 900px) { .kit-contents-grid { grid-template-columns: 1fr; gap: 18px; } }

.kit-section {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 12px;
  padding: 24px 24px 22px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.kit-section-title {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.kit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kit-list li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
  position: relative;
  padding-left: 18px;
}
.kit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 800;
}
.kit-list li code {
  background: #f1f5f8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.82em;
  color: var(--clinical-cyan-dk, #0B8AA6);
}
.kit-foot {
  background: linear-gradient(135deg, rgba(14, 165, 199, 0.08), rgba(14, 165, 199, 0.02));
  border: 1px solid rgba(14, 165, 199, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.kit-foot a { color: var(--clinical-cyan-dk, #0B8AA6); border-bottom: 1px solid currentColor; text-decoration: none; }
.kit-foot a:hover { color: var(--clinical-navy, #0F2A4A); }

/* Configurations — Base + 2 Add-ons cards */
.config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 0 28px;
}
@media (max-width: 1000px) { .config-grid { grid-template-columns: 1fr; } }

.config-card {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.config-base {
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
  background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
}
.config-addon { border-top: 4px solid var(--gray-300, #cbd5dc); }
.config-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 6px;
}
.config-addon .config-tag { color: var(--clinical-slate); }
.config-card h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--clinical-navy, #0F2A4A);
}
.config-lede {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}
.config-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.config-bullets li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--clinical-navy, #0F2A4A);
  position: relative;
  padding-left: 18px;
}
.config-bullets li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: -1px;
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 800;
}
.config-cta { margin-top: auto; }
.config-cta .btn { width: 100%; justify-content: center; text-align: center; }
.config-foot {
  background: #f4f7f9;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
  padding: 16px 22px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.config-foot a { color: var(--clinical-cyan-dk, #0B8AA6); border-bottom: 1px solid currentColor; text-decoration: none; }

/* Use cases — 5 narrative cards in a flexible grid */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin: 40px 0 0;
}
@media (max-width: 800px) { .usecase-grid { grid-template-columns: 1fr; } }

.usecase-card {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.usecase-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 6px;
}
.usecase-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.usecase-card p {
  margin: 0 0 12px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.usecase-card p:last-child { margin-bottom: 0; }
.usecase-card .testimonial-quote {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--clinical-cyan-dk, #0B8AA6);
  background: #f4f7f9;
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
  font-style: italic;
}
.usecase-card .testimonial-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--clinical-slate);
}

/* ============================================================
   DISTRIBUTORS PAGE
   Public-facing partner-recruitment landing.
   Tier 1 of the two-tier disclosure model.
   ============================================================ */
.distributor-hero {
  background: linear-gradient(135deg, #0F2A4A 0%, #173a64 50%, #0B8AA6 100%);
  color: #fff;
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}
.distributor-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(14, 165, 199, 0.25) 0, transparent 40%),
    radial-gradient(circle at 82% 75%, rgba(214, 222, 35, 0.12) 0, transparent 45%);
  pointer-events: none;
}
.distributor-hero .container { position: relative; z-index: 1; }
.distributor-hero h1 {
  color: #ffffff;            /* override the default .page-hero h1 navy color — invisible on this dark-gradient hero */
  margin: 14px 0 18px;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.distributor-hero .hero-tagline {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.distributor-hero .breadcrumb {
  color: rgba(255, 255, 255, 0.7);
}
.distributor-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }

/* Why-LTI pillars */
.distributor-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 44px;
}
@media (max-width: 1100px) { .distributor-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .distributor-pillars { grid-template-columns: 1fr; } }

.dist-pillar {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.dist-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clinical-cyan, #0EA5C7), var(--clinical-cyan-dk, #0B8AA6));
  color: #fff;
}
.dist-pillar-icon svg { width: 22px; height: 22px; }
.dist-pillar h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.dist-pillar p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}

/* Product-line cards on the distributor page */
.dist-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 1000px) { .dist-product-grid { grid-template-columns: 1fr; } }

.dist-product-card {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 12px;
  padding: 24px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.dist-product-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.dist-product-card h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.dist-product-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.dist-product-foot {
  margin-top: auto !important;
  padding-top: 8px;
  font-size: 0.88rem;
}
.dist-product-foot a {
  color: var(--clinical-cyan-dk, #0B8AA6);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  font-weight: 600;
}
.dist-product-foot a:hover { color: var(--clinical-navy, #0F2A4A); }

/* Criteria / what-we-look-for list */
.dist-criteria-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dist-criteria-list li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  position: relative;
  padding-left: 24px;
}
.dist-criteria-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 800;
  font-size: 1.1em;
}
.dist-criteria-list strong { color: var(--clinical-navy, #0F2A4A); }

/* Benefits grid */
.dist-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
@media (max-width: 1000px) { .dist-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dist-benefits-grid { grid-template-columns: 1fr; } }

.dist-benefit {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 10px;
  padding: 20px 22px 18px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.dist-benefit h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.dist-benefit p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}

/* Regulatory transparency block */
.reg-block {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 36px 30px;
  background: linear-gradient(135deg, rgba(214, 222, 35, 0.08), rgba(14, 165, 199, 0.04));
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 4px solid #d6de23;
  border-radius: 12px;
}
.reg-block .eyebrow {
  color: var(--clinical-navy, #0F2A4A);
  margin-bottom: 8px;
  display: inline-block;
}
.reg-block h2 {
  margin: 0 0 14px;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--clinical-navy, #0F2A4A);
}
.reg-block p {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
}
.reg-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reg-list li {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  position: relative;
  padding-left: 22px;
}
.reg-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: -1px;
  color: #d6de23;
  font-weight: 800;
  font-size: 1.3em;
}
.reg-list strong { color: var(--clinical-navy, #0F2A4A); }

/* Application-form interest checkboxes */
.dist-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 600px) { .dist-checkbox-grid { grid-template-columns: 1fr; } }
.dist-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--clinical-navy, #0F2A4A);
  transition: border-color 140ms ease, background 140ms ease;
}
.dist-checkbox:hover { border-color: var(--clinical-cyan, #0EA5C7); background: rgba(14, 165, 199, 0.04); }
.dist-checkbox input { accent-color: var(--clinical-cyan, #0EA5C7); }
.dist-checkbox input:checked + span { font-weight: 600; }

/* Apply form layout */
.dist-apply-form {
  max-width: 840px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dist-apply-thanks {
  max-width: 640px;
  margin: 0 auto;
}

/* Process / what-happens-next numbered list */
.dist-process-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  counter-reset: dist-step;
}
@media (max-width: 1100px) { .dist-process-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .dist-process-list { grid-template-columns: 1fr; } }

.dist-process-list li {
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  padding: 22px 22px 20px;
  position: relative;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.dist-process-num {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 8px;
}
.dist-process-list h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.dist-process-list p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}

/* ============================================================
   PARTNER PORTAL — confidential / invited-only
   Subtly differentiated from the public site to signal "private."
   ============================================================ */

/* Banner above the topbar that says CONFIDENTIAL */
.portal-banner {
  background: linear-gradient(135deg, #0F2A4A 0%, #173a64 100%);
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 2px solid var(--clinical-cyan, #0EA5C7);
}
.portal-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.78rem;
}
.portal-banner-eyebrow {
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.portal-banner-confidential {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.88);
}
@media (max-width: 600px) {
  .portal-banner-inner { flex-direction: column; gap: 2px; padding: 8px 0; text-align: center; }
}

/* Hero — distinct from the public partner pages */
.portal-hero {
  background: linear-gradient(135deg, #0F2A4A 0%, #173a64 50%, #0B8AA6 100%);
  color: #fff;
  padding: 88px 0 72px;
  position: relative;
  overflow: hidden;
}
.portal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(214, 222, 35, 0.12) 0, transparent 40%),
    radial-gradient(circle at 12% 80%, rgba(14, 165, 199, 0.18) 0, transparent 45%);
  pointer-events: none;
}
.portal-hero .container { position: relative; z-index: 1; }
.portal-hero h1 {
  margin: 14px 0 18px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.portal-hero .hero-tagline {
  max-width: 760px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}
.portal-hero .breadcrumb { color: rgba(255, 255, 255, 0.7); }
.portal-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }

/* Generic "block" wrapper used inside each portal section */
.portal-block {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 32px 36px 28px;
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .04);
}
.portal-block > p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 18px;
}
.portal-block .portal-foot {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--clinical-slate);
  font-style: italic;
  line-height: 1.55;
}
.portal-block .portal-foot a {
  color: var(--clinical-cyan-dk, #0B8AA6);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}
@media (max-width: 700px) {
  .portal-block { padding: 24px 22px 22px; }
}

/* Demo unit — fact grid */
.portal-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 14px 0 6px;
}
@media (max-width: 700px) { .portal-fact-grid { grid-template-columns: 1fr; } }
.portal-fact {
  padding: 16px 18px;
  background: linear-gradient(180deg, #fbfcfd 0%, #ffffff 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-fact-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.portal-fact-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.005em;
}
.portal-fact-detail {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--clinical-slate);
}

/* Territory grid — two columns side by side */
.portal-territory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 22px 0 6px;
}
@media (max-width: 800px) { .portal-territory-grid { grid-template-columns: 1fr; } }
.portal-territory-col {
  padding: 22px 22px 18px;
  background: #fbfcfd;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
}
.portal-territory-heading {
  margin: 0 0 6px;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.portal-territory-exclusive { color: #c33; }
.portal-territory-open      { color: #1f9d55; }
.portal-territory-note {
  margin: 0 0 12px;
  font-size: 0.86rem;
  color: var(--clinical-slate);
  font-style: italic;
}
.portal-territory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portal-territory-list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--clinical-navy, #0F2A4A);
}

/* Wholesale-tier table */
.portal-table-wrap {
  overflow-x: auto;
  margin: 18px 0 6px;
  border-radius: 10px;
  border: 1px solid var(--rule-soft, #e5e9ee);
}
.portal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.portal-table th, .portal-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
  vertical-align: top;
}
.portal-table thead {
  background: linear-gradient(180deg, #f4f7f9 0%, #eef2f5 100%);
}
.portal-table th {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clinical-navy, #0F2A4A);
}
.portal-table td { color: var(--clinical-navy, #0F2A4A); }
.portal-table tbody tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover { background: rgba(14, 165, 199, 0.04); }

/* Download row + grid */
.portal-download-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.portal-download-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0 6px;
}
@media (max-width: 800px) { .portal-download-grid { grid-template-columns: 1fr; } }
.portal-download {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fbfcfd;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.portal-download:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  background: rgba(14, 165, 199, 0.04);
  transform: translateY(-1px);
}
.portal-download-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 165, 199, 0.1);
  border-radius: 8px;
}
.portal-download-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.portal-download-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.005em;
}
.portal-download-detail {
  font-size: 0.8rem;
  color: var(--clinical-slate);
}

/* Contact directory grid */
.portal-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 22px 0 6px;
}
@media (max-width: 800px) { .portal-contact-grid { grid-template-columns: 1fr; } }

/* Tight grid variant — Account Manager card spans full width on top */
.portal-contact-grid.portal-contact-grid-tight .portal-contact-card-feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(14, 165, 199, 0.06) 0%, rgba(15, 42, 74, 0.04) 100%);
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
  border-left: 1px solid var(--rule-soft, #e5e9ee);
  position: relative;
}
.portal-contact-grid.portal-contact-grid-tight .portal-contact-card-feature h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}
.portal-contact-grid.portal-contact-grid-tight .portal-contact-card-feature .portal-contact-detail {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
}
.portal-contact-grid.portal-contact-grid-tight .portal-contact-card-feature .portal-contact-detail strong {
  display: block;
  margin-bottom: 8px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1rem;
}
.portal-contact-card {
  padding: 22px 24px 20px;
  background: #fff;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-top: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 10px;
}
.portal-contact-role {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 6px;
}
.portal-contact-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  color: var(--clinical-navy, #0F2A4A);
}
.portal-contact-detail {
  margin: 0 0 12px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--clinical-slate);
}
.portal-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--clinical-navy, #0F2A4A);
}
.portal-contact-list a {
  color: var(--clinical-cyan-dk, #0B8AA6);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Roadmap — vertical list of preview items */
.portal-roadmap-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 18px 0 6px;
}
.portal-roadmap-item {
  padding: 22px 24px 20px;
  background: #fbfcfd;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
}
.portal-roadmap-status {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.portal-roadmap-status-near { background: rgba(14, 165, 199, 0.12); color: var(--clinical-cyan-dk, #0B8AA6); }
.portal-roadmap-status-mid  { background: rgba(214, 222, 35, 0.18); color: #6a7000; }
.portal-roadmap-status-far  { background: rgba(15, 42, 74, 0.08);   color: var(--clinical-navy, #0F2A4A); }
.portal-roadmap-item h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.005em;
}
.portal-roadmap-item p {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.portal-feedback-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clinical-cyan-dk, #0B8AA6);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.portal-feedback-link:hover { color: var(--clinical-navy, #0F2A4A); }


/* How it works — three numbered steps */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}
@media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; gap: 18px; } }
.how-step {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  padding: 28px 26px 26px;
  text-align: center;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.how-step:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 12px 28px rgba(15, 42, 74, .07);
  transform: translateY(-2px);
}
.how-step .how-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clinical-cyan, #0EA5C7);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 auto 16px;
}
.how-step h4 {
  font-size: 1.15rem;
  margin: 0 0 8px;
  color: var(--clinical-navy, #0F2A4A);
}
.how-step p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
  margin: 0;
}

/* Friendly bleach-warning callout */
.why-not-bleach {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 32px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 100%);
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 12px;
}
.why-not-bleach .why-not-icon {
  flex: 0 0 auto;
  color: #ea580c;
}
.why-not-bleach .why-not-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c2410c;
  margin-bottom: 6px;
}
.why-not-bleach h3 {
  font-size: 1.35rem;
  margin: 0 0 10px;
  color: var(--clinical-navy, #0F2A4A);
}
.why-not-bleach p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--gray-700, #475363);
}
.why-not-bleach strong { color: var(--clinical-navy, #0F2A4A); }
@media (max-width: 600px) {
  .why-not-bleach { flex-direction: column; padding: 22px; gap: 12px; }
}

/* Testimonial grid */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 36px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 720px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  padding: 26px 28px;
  margin: 0;
  position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.testimonial:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 10px 24px rgba(15, 42, 74, .06);
}
.testimonial::before {
  content: "“";
  position: absolute;
  top: 4px;
  left: 16px;
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--clinical-cyan, #0EA5C7);
  opacity: .35;
  pointer-events: none;
}
.testimonial p {
  position: relative;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
}
.testimonial cite {
  font-style: normal;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gray-600, #5b6573);
}

/* Trust band — subtle inline callout */
.trust-band {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 28px;
  background: linear-gradient(135deg, var(--bg-feature, #f0f6fb) 0%, #FFFFFF 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
}
.trust-band h2 { margin: 8px 0 14px; }
.trust-band p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  max-width: 65ch;
  margin: 0 auto;
}
.trust-band strong { color: var(--clinical-navy, #0F2A4A); }

/* ============================================================
   HOMEPAGE — "Trusted by the World's Leading Institutions"
   Sits between the Legacy product block and the closing CTA.
   ============================================================ */
.trusted-section { padding-top: 72px; padding-bottom: 72px; }

.trusted-section .trusted-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.trusted-section .trusted-content .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--clinical-cyan, #0EA5C7);
}
.trusted-section .trusted-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--clinical-navy, #0F2A4A);
}
.trusted-section .trusted-content .lede {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0 auto;
  max-width: 65ch;
}
.trusted-section .trusted-content .lede strong {
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 700;
  white-space: nowrap;
}

/* Quiet pillar list of customer categories underneath the prose */
.trusted-categories {
  list-style: none;
  padding: 28px 0 0;
  margin: 36px auto 0;
  max-width: 1080px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.trusted-categories li {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clinical-navy, #0F2A4A);
  padding: 10px 22px;
  border-right: 1px solid var(--rule-soft, #e5e9ee);
  white-space: nowrap;
}
.trusted-categories li:last-child { border-right: none; }

@media (max-width: 720px) {
  .trusted-categories {
    gap: 4px 8px;
  }
  .trusted-categories li {
    padding: 6px 12px;
    font-size: .7rem;
    letter-spacing: 1.2px;
    border-right: none;
    border: 1px solid var(--rule-soft, #e5e9ee);
    border-radius: 999px;
  }
}

/* ============================================================
   OUR STORY PAGE — narrative timeline
   (scoped to ol.timeline so it does not clash with the
    div-based .timeline used on the About page)
   ============================================================ */
ol.timeline {
  list-style: none;
  padding: 0;
  margin: 36px auto 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
ol.timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
  position: relative;
}
ol.timeline li:first-child { border-top: none; padding-top: 8px; }
ol.timeline li:last-child  { padding-bottom: 4px; }
ol.timeline .t-year {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--clinical-cyan, #0EA5C7);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 14px;
  border-right: 2px solid var(--clinical-cyan, #0EA5C7);
}
ol.timeline .t-event {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--clinical-navy, #0F2A4A);
}
/* Hide the dot/line decorations from the About-page rules when
   the markup is the our-story ol/li form. */
ol.timeline::before,
ol.timeline li::before { content: none !important; }

@media (max-width: 600px) {
  ol.timeline li {
    grid-template-columns: 70px 1fr;
    gap: 16px;
  }
  ol.timeline .t-year { font-size: .95rem; padding-right: 10px; }
  ol.timeline .t-event { font-size: .92rem; }
}

/* ============================================================
   RESOURCES PAGE — Useful Tips weekly rotator
   ============================================================ */
.useful-tips-section { padding-top: 56px; padding-bottom: 56px; }

.tip-card {
  max-width: 760px;
  margin: 36px auto 0;
  padding: 32px 40px 28px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 42, 74, .06);
  outline: none;
}
.tip-card:focus-visible {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, .25), 0 8px 24px rgba(15, 42, 74, .08);
}

.tip-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.tip-category {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14, 165, 199, .08);
  color: var(--clinical-cyan, #0EA5C7);
}
.tip-position {
  color: var(--gray-600, #5b6573);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tip-title {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  margin: 0 0 14px;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.3;
}
.tip-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0 0 24px;
}

.tip-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.tip-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--rule-soft, #e5e9ee);
  background: #FFFFFF;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--clinical-navy, #0F2A4A);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .15s ease;
}
.tip-nav-btn:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  background: var(--bg-feature, #f0f6fb);
  color: var(--clinical-cyan, #0EA5C7);
}
.tip-nav-btn:active { transform: translateY(1px); }
.tip-nav-btn:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}
.tip-nav-btn span[aria-hidden] {
  font-size: 1.1rem;
  line-height: 1;
}

.tip-fallback {
  margin: 0;
  font-size: .92rem;
  color: var(--gray-600, #5b6573);
  font-style: italic;
}

@media (max-width: 600px) {
  .tip-card { padding: 24px 22px 22px; }
  .tip-card-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tip-nav { flex-direction: row-reverse; justify-content: space-between; }
  .tip-nav-btn { padding: 8px 14px; font-size: .82rem; }
}

/* ============================================================
   RESOURCES PAGE — Latest News horizontally-scrollable card row
   ============================================================ */
.news-section { padding-top: 56px; padding-bottom: 64px; }

.news-rail-wrap {
  position: relative;
  margin-top: 36px;
}
.news-rail {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Container-aware padding so the first card lines up with the rest of the page */
  padding: 8px max(24px, calc((100% - 1240px) / 2 + 24px)) 18px;
  /* Hide native scrollbar but keep wheel/touch scrolling */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 42, 74, .15) transparent;
}
.news-rail::-webkit-scrollbar { height: 8px; }
.news-rail::-webkit-scrollbar-thumb {
  background: rgba(15, 42, 74, .15);
  border-radius: 999px;
}
.news-rail::-webkit-scrollbar-thumb:hover { background: rgba(15, 42, 74, .28); }
.news-rail:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 4px;
  border-radius: 12px;
}

.news-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.news-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 12px 28px rgba(15, 42, 74, .10);
  transform: translateY(-2px);
}
.news-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.news-card-image {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--bg-feature, #f0f6fb);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
}
.news-card-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-card-date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.news-card-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 0 0 4px;
  color: var(--clinical-navy, #0F2A4A);
  /* clamp to 3 lines so card heights stay roughly consistent */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-excerpt {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-cta {
  margin-top: auto;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--clinical-cyan, #0EA5C7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.news-card:hover .news-card-cta span[aria-hidden] {
  transform: translateX(3px);
  transition: transform .2s ease;
}

/* Prev / Next scroll buttons (hidden on mobile — touch handles it) */
.news-scroll-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #e5e9ee);
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 42, 74, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .15s ease;
}
.news-scroll-btn:hover {
  background: var(--clinical-cyan, #0EA5C7);
  border-color: var(--clinical-cyan, #0EA5C7);
  color: #FFFFFF;
}
.news-scroll-btn:active { transform: translateY(-50%) scale(.96); }
.news-scroll-btn:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}
.news-scroll-prev { left: 16px; }
.news-scroll-next { right: 16px; }
@media (max-width: 720px) {
  .news-scroll-btn { display: none; }   /* let touch scroll do its thing */
  .news-rail { padding-left: 24px; padding-right: 24px; gap: 16px; }
  .news-card { flex: 0 0 280px; }
}

/* ============================================================
   PRODUCT DETAIL PAGES — hero, tab navigation, panels
   (Used on genii.html; reusable for future per-product pages.)
   ============================================================ */

/* ---- Product detail hero ---- */
.product-hero {
  padding: 56px 0 40px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-feature, #f0f6fb) 100%);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
}
.product-hero .breadcrumb {
  font-size: .85rem;
  color: var(--gray-600, #5b6573);
  margin-bottom: 24px;
}
.product-hero .breadcrumb a { color: var(--clinical-cyan, #0EA5C7); text-decoration: none; }
.product-hero .breadcrumb .sep { margin: 0 8px; opacity: .5; }

.product-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .product-hero-grid { grid-template-columns: 1fr; gap: 32px; } }

.product-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 12px;
}
.product-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0 0 18px;
  color: var(--clinical-navy, #0F2A4A);
}
.product-hero-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0 0 28px;
}
.product-hero-lede strong { color: var(--clinical-navy, #0F2A4A); }

/* Quick-stat row in the hero */
.product-hero-stats {
  list-style: none;
  padding: 18px 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px 0;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
}
.product-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 18px;
  border-right: 1px solid var(--rule-soft, #e5e9ee);
}
.product-hero-stats li:last-child { border-right: none; }
.product-hero-stats .stat-num {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -.02em;
  line-height: 1;
}
.product-hero-stats .stat-num .stat-unit {
  font-size: .85rem;
  font-weight: 600;
  color: var(--gray-600, #5b6573);
  margin-left: 2px;
}
.product-hero-stats .stat-label {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-600, #5b6573);
}

.product-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.product-hero-media {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(15, 42, 74, .06);
}
.product-hero-media img {
  width: 100%;
  height: auto;
  max-width: 520px;
  display: block;
}

/* ---- Tab navigation (sticky strip) ---- */
.product-tabs { background: #FFFFFF; }
.tab-nav-wrap {
  position: sticky;
  top: 64px;       /* sits below the sticky site nav */
  z-index: 30;
  background: rgba(220, 238, 246, 0.98);  /* cyan-leaning blue-gray — more saturated, reads clearly as nav */
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
  box-shadow: 0 3px 10px rgba(15, 42, 74, 0.10);  /* stronger elevation */
}
.tab-nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;                                   /* small gap so pill backgrounds don't touch */
  padding: 8px 0;                              /* breathing room for pill backgrounds */
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 42, 74, .15) transparent;
}
.tab-nav::-webkit-scrollbar { height: 4px; }
.tab-nav::-webkit-scrollbar-thumb { background: rgba(15, 42, 74, .15); border-radius: 999px; }
.tab-btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 1rem;                            /* up from .96rem */
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--clinical-navy, #0F2A4A);       /* navy — darker than slate, more visible */
  background: transparent;
  border: none;
  padding: 12px 18px;
  border-radius: 8px;                          /* pill shape for hover + active states */
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab-btn:hover {
  color: var(--clinical-cyan-dk, #0B8AA6);
  background: rgba(14, 165, 199, 0.10);        /* cyan-tinted hover */
}
.tab-btn::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: -8px;       /* sits in the wrapper's padding band */
  height: 0;                                   /* hidden by default — active state shows it */
  border-radius: 3px 3px 0 0;
  background: transparent;
  transition: background .18s ease, height .18s ease;
}

/* Right-edge fade indicator — signals horizontal-scrollable tab nav on narrow viewports */
.tab-nav-wrap {
  position: sticky;
}
.tab-nav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(220,238,246,0) 0%, rgba(220,238,246,0.98) 100%);  /* matches tinted bar bg */
  opacity: 0;
  transition: opacity .15s ease;
}
@media (max-width: 1180px) {
  .tab-nav-wrap::after { opacity: 1; }
}
/* Active tab — filled cyan pill with white text. The pill is the indicator;
   the ::after underline is suppressed since the background is doing the work. */
.tab-btn.is-active {
  color: #FFFFFF;
  background: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 4px 12px rgba(14, 165, 199, 0.28);
}
.tab-btn.is-active:hover {
  color: #FFFFFF;
  background: var(--clinical-cyan-dk, #0B8AA6);  /* slightly darker on hover, doesn't revert to white */
}
.tab-btn.is-active::after { background: transparent; }  /* underline suppressed — pill is the indicator */
.tab-btn:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: -4px;
  border-radius: 6px;
}

/* ---- Tab panels ---- */
.tab-panel {
  display: none;
  padding: 64px 0 72px;
}
.tab-panel.is-active { display: block; }
.tab-panel-head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}
/* Mobile: cut the heavy vertical padding on tab panels — desktop's 64/72 looks
   right with sidebars and large content, but on phones it's wasted whitespace. */
@media (max-width: 720px) {
  .tab-panel { padding: 28px 0 36px; }
  .tab-panel-head { margin-bottom: 24px; }
}
.tab-panel-head .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--clinical-cyan, #0EA5C7);
}
.tab-panel-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0 0 16px;
  color: var(--clinical-navy, #0F2A4A);
}
.tab-panel-head .lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0;
}

/* ============================================================
   S4FE-D SHOWCASE — Visual product line strip immediately after the hero.
   Nine clickable SKU cards in a 3-column grid (responsive). Lets visitors
   see WHAT the products are before they read the WHY (pillars/stats below).
   ============================================================ */
.s4fed-showcase {
  padding: 56px 0 24px;
  background: #FFFFFF;
}
.s4fed-showcase .showcase-head {
  max-width: 760px;
  margin: 0 auto 32px;
  text-align: center;
}
.s4fed-showcase .showcase-head .eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--clinical-cyan, #0EA5C7);
}
.s4fed-showcase .showcase-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0 0 12px;
  color: var(--clinical-navy, #0F2A4A);
}
.s4fed-showcase .showcase-head .lede {
  font-size: 1rem;
  color: var(--gray-700, #475363);
  line-height: 1.6;
  margin: 0;
}

.s4fed-showcase .showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .s4fed-showcase .showcase-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .s4fed-showcase .showcase-grid { grid-template-columns: 1fr; }
}

.s4fed-showcase .showcase-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.s4fed-showcase .showcase-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 42, 74, 0.08);
}
.s4fed-showcase .showcase-card:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}

.s4fed-showcase .showcase-card-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-feature, #F1F6F9);
  padding: 18px;
  /* Fixed height instead of aspect-ratio. aspect-ratio on a flex container
     can let an image's intrinsic width push past the container's calculated
     width in some browsers — which is what caused the spray and soap photos
     to render half off the right edge of the card. Fixed height + overflow
     hidden + max-width:100% on the img makes the image always fit. */
  height: 260px;
  border-bottom: 1px solid var(--rule-soft, #DCE5EC);
  overflow: hidden;
}
.s4fed-showcase .showcase-card-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.s4fed-showcase .showcase-card-body {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  flex: 1;
}
.s4fed-showcase .showcase-card-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  margin-bottom: 6px;
}
.s4fed-showcase .showcase-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 4px;
  line-height: 1.3;
}
.s4fed-showcase .showcase-card-sku {
  display: block;
  font-size: 0.78rem;
  color: var(--gray-500, #6E7E92);
  font-family: 'SF Mono', Consolas, Menlo, monospace;
  margin-bottom: 10px;
}
.s4fed-showcase .showcase-card p {
  font-size: 0.92rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.5;
  margin: 0 0 14px;
  flex: 1;
}
.s4fed-showcase .showcase-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--clinical-cyan-dk, #0B8AA6);
}
.s4fed-showcase .showcase-card:hover .showcase-card-cta {
  text-decoration: underline;
}

/* ============================================================
   S4FE-D EXPLORER — Two-pane department/product browser
   Left rail = department selector (sticky on desktop)
   Right pane = product cards filtered to the selected department,
                with department-specific blurbs swapped in/out via JS.
   ============================================================ */
.s4fed-intro { padding: 64px 0 24px; background: #FFFFFF; }
.s4fed-resources { padding: 32px 0 72px; background: #FFFFFF; }
.s4fed-explorer {
  padding: 56px 0 72px;
  background: var(--bg-feature, #F1F6F9);
  border-top: 1px solid var(--rule-soft, #DCE5EC);
  border-bottom: 1px solid var(--rule-soft, #DCE5EC);
}

.s4fed-explorer .explorer-header {
  max-width: 860px;
  margin: 0 0 32px;
  text-align: left;
}
.s4fed-explorer .explorer-header h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 8px 0 12px;
  color: var(--clinical-navy, #0F2A4A);
}
.s4fed-explorer .explorer-header .eyebrow {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--clinical-cyan, #0EA5C7);
}
.s4fed-explorer .explorer-header .lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700, #475363);
  margin: 0;
}

.s4fed-explorer .explorer-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) {
  .s4fed-explorer .explorer-grid { grid-template-columns: 1fr; }
}

/* ---- Left rail: department picker ---- */
.s4fed-explorer .explorer-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: sticky;
  top: 100px;
}
@media (max-width: 960px) {
  .s4fed-explorer .explorer-rail {
    flex-direction: row;
    overflow-x: auto;
    padding: 4px 4px 12px;
    position: static;
    scroll-snap-type: x mandatory;
  }
}

.s4fed-explorer .dept-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #FFFFFF;
  border: 2px solid var(--rule-soft, #DCE5EC);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.s4fed-explorer .dept-btn:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
}
.s4fed-explorer .dept-btn.is-active {
  border-color: var(--clinical-cyan, #0EA5C7);
  background: rgba(14, 165, 199, 0.06);
}
.s4fed-explorer .dept-btn:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}
@media (max-width: 960px) {
  .s4fed-explorer .dept-btn {
    flex: 0 0 240px;
    scroll-snap-align: start;
  }
}

.s4fed-explorer .dept-btn-img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #F1F6F9;
}
.s4fed-explorer .dept-btn-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s4fed-explorer .dept-btn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.s4fed-explorer .dept-btn-text strong {
  display: block;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;
}
.s4fed-explorer .dept-btn-text > span {
  display: block;
  font-size: 0.76rem;
  color: var(--gray-500, #6E7E92);
  font-weight: 500;
  line-height: 1.3;
}

/* ---- Right pane: product cards ---- */
.s4fed-explorer .explorer-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.s4fed-explorer .explorer-product {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: center;
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DCE5EC);
  border-radius: 14px;
}
/* Re-assert the hidden attribute over the explicit display:grid above.
   Without this, `card.hidden = true` from the JS sets the attribute but the
   higher-specificity .explorer-product rule keeps display:grid in force. */
.s4fed-explorer .explorer-product[hidden] { display: none; }
@media (max-width: 720px) {
  .s4fed-explorer .explorer-product {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.s4fed-explorer .explorer-product-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F1F6F9;
  border-radius: 10px;
  padding: 10px;
  /* Same fix as the showcase: fixed height instead of aspect-ratio,
     so tall bottle photos can't push past the container's right edge. */
  height: 170px;
  overflow: hidden;
}
.s4fed-explorer .explorer-product-media img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.s4fed-explorer .product-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  margin-bottom: 6px;
}
.s4fed-explorer .explorer-product-body h3 {
  margin: 0 0 4px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.3;
}
.s4fed-explorer .explorer-product-body h3 .sku {
  font-family: 'SF Mono', Consolas, Menlo, monospace;
  font-size: 0.82em;
  color: var(--clinical-cyan-dk, #0B8AA6);
  background: rgba(14, 165, 199, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-right: 4px;
}
.s4fed-explorer .product-price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-500, #6E7E92);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}
.s4fed-explorer .blurb {
  font-size: 0.95rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.55;
  margin: 0 0 14px;
}
.s4fed-explorer .explorer-product .btn { margin-top: 2px; }

/* Overview pillars */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 24px 0 56px;
}
@media (max-width: 900px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 12px;
  padding: 26px 26px 24px;
}
.pillar h3 {
  font-size: 1.15rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 10px;
}
.pillar p {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--gray-700, #475363);
  margin: 0;
}
.pillar strong { color: var(--clinical-navy, #0F2A4A); }

/* Configurations row */
.config-block {
  background: linear-gradient(135deg, var(--bg-feature, #f0f6fb) 0%, #FFFFFF 100%);
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  padding: 32px 28px;
  text-align: center;
}
.config-block h3 {
  font-size: 1.4rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
}
.config-block p {
  max-width: 65ch;
  margin: 0 auto 24px;
  color: var(--gray-700, #475363);
  line-height: 1.6;
}
.config-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .config-grid { grid-template-columns: repeat(4, 1fr); } }
/* Mobile override that defeats inline grid-template-columns styles (used on
   multi-wiper.html and wiper-gold.html to vary cell counts per usage). On
   small screens we always want auto-fit so 7-cell and 3-cell grids reflow
   into 2-4 columns instead of overflowing the viewport. !important is
   required to beat the inline style. */
@media (max-width: 720px) {
  .config-grid {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)) !important;
  }
}
.config-grid li {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color .18s ease, transform .15s ease;
}
.config-grid li:hover { border-color: var(--clinical-cyan, #0EA5C7); transform: translateY(-2px); }
.config-grid .cfg-num {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--clinical-cyan, #0EA5C7);
  letter-spacing: -.02em;
  line-height: 1;
}
.config-grid .cfg-lbl {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gray-600, #5b6573);
}

/* Toggleable config grid (Wiper Gold Well Options, etc.) */
.config-grid-toggle li {
  cursor: pointer;
  user-select: none;
}
.config-grid-toggle li[data-active="true"] {
  border-color: var(--clinical-cyan, #0EA5C7);
  background: linear-gradient(180deg, rgba(14,165,199,.08) 0%, rgba(14,165,199,.02) 100%);
  box-shadow: 0 0 0 1px var(--clinical-cyan, #0EA5C7) inset, 0 4px 12px rgba(14,165,199,.12);
  transform: translateY(-2px);
}
.config-grid-toggle li[data-active="true"] .cfg-num {
  color: var(--clinical-cyan, #0EA5C7);
}
.config-grid-toggle li:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 3px;
}
.well-detail-wrap {
  margin-top: 16px;
  position: relative;
  min-height: 1px;
}
.well-detail {
  display: none;
  margin-top: 0;
  animation: wellDetailFade .22s ease;
}
.well-detail[data-active="true"] {
  display: block;
}
@keyframes wellDetailFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Features grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
@media (max-width: 800px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid .feature {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  padding: 26px 28px;
}
.feature-grid .feature h3 {
  font-size: 1.1rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 10px;
}
.feature-grid .feature p {
  font-size: .94rem;
  line-height: 1.6;
  color: var(--gray-700, #475363);
  margin: 0;
}
.feature-grid .feature strong { color: var(--clinical-navy, #0F2A4A); }

/* Spec table */
.spec-table-wrap {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  overflow: hidden;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .94rem;
}
.spec-table th, .spec-table td {
  padding: 12px 22px;
  text-align: left;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.spec-table th[colspan] {
  background: var(--bg-feature, #f0f6fb);
  font-size: .78rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  font-weight: 700;
  border-top: 2px solid var(--clinical-cyan, #0EA5C7);
}
.spec-table td:first-child {
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  width: 36%;
  white-space: nowrap;
}
.spec-table td:last-child  { color: var(--gray-700, #475363); }
.spec-table tr:first-child th { border-top: none; }
@media (max-width: 600px) {
  .spec-table th, .spec-table td { padding: 10px 14px; font-size: .88rem; }
  .spec-table td:first-child { white-space: normal; width: 40%; }
}

/* Assay-library blocks */
.assay-block {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  padding: 28px 30px;
  margin-bottom: 22px;
}
.assay-block h3 {
  font-size: 1.2rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
}
.assay-block p {
  font-size: .96rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0 0 12px;
}
.assay-block p strong { color: var(--clinical-navy, #0F2A4A); }
.assay-block .subhead {
  font-size: 1rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 22px 0 8px;
}
.bullet-list {
  margin: 0;
  padding-left: 20px;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--gray-700, #475363);
}
.bullet-list li { margin-bottom: 6px; }
.bullet-list strong { color: var(--clinical-navy, #0F2A4A); }
.curvefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
@media (max-width: 600px) { .curvefit-grid { grid-template-columns: 1fr; } }
.curvefit-grid article {
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 8px;
  padding: 14px 18px;
  background: var(--bg-feature, #f0f6fb);
}
.curvefit-grid h4 {
  font-size: .98rem;
  margin: 0 0 4px;
  color: var(--clinical-navy, #0F2A4A);
}
.curvefit-grid p {
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
  color: var(--gray-700, #475363);
}

/* Detector cross-section + copy */
.detector-cols {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) { .detector-cols { grid-template-columns: 1fr; } }
.detector-cols-text h3 {
  font-size: 1.2rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 10px;
}
.detector-cols-text h3:not(:first-child) { margin-top: 28px; }
.detector-cols-text p {
  font-size: .96rem;
  line-height: 1.65;
  color: var(--gray-700, #475363);
  margin: 0 0 12px;
}
.detector-cols-text p strong { color: var(--clinical-navy, #0F2A4A); }
.detector-cols-figure {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  padding: 18px;
  position: sticky;
  top: 140px;
}
.detector-cols-figure svg { width: 100%; height: auto; display: block; }

/* Efficiency callouts row */
.efficiency-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 800px) { .efficiency-grid { grid-template-columns: repeat(2, 1fr); } }
.eff-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
}
.eff-num {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--clinical-cyan, #0EA5C7);
  line-height: 1;
}
.eff-num .unit { font-size: .85rem; font-weight: 600; color: var(--gray-600, #5b6573); margin-left: 2px; }
.eff-iso {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
}
.eff-note {
  font-size: .82rem;
  color: var(--gray-600, #5b6573);
}

/* Resource cards */
.resource-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .resource-cards { grid-template-columns: 1fr; } }
.resource-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.resource-card:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 10px 24px rgba(15, 42, 74, .08);
  transform: translateY(-1px);
}
.resource-card-icon {
  width: 56px; height: 56px;
  border-radius: 10px;
  background: var(--bg-feature, #f0f6fb);
  color: var(--clinical-cyan, #0EA5C7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.resource-card-icon svg { width: 26px; height: 26px; }
.resource-card-body { min-width: 0; }
.resource-card-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 4px;
}
.resource-card-body h3 {
  font-size: 1.02rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 4px;
}
.resource-card-body p {
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
  color: var(--gray-700, #475363);
}
.resource-card-cta {
  font-size: .85rem;
  font-weight: 700;
  color: var(--clinical-cyan, #0EA5C7);
  white-space: nowrap;
  flex: 0 0 auto;
}
.resource-card:hover .resource-card-cta span[aria-hidden] {
  display: inline-block;
  transform: translateX(3px);
  transition: transform .18s ease;
}
@media (max-width: 600px) {
  .resource-card { grid-template-columns: 56px 1fr; }
  .resource-card-cta { grid-column: 1 / -1; text-align: right; padding-top: 4px; }
}


/* ================================================================== */
/* MULTI-WIPER ROI / PRODUCTIVITY CALCULATOR                           */
/* ================================================================== */
.roi-calc {
  background: var(--bg-feature);
  border-top: 1px solid var(--gray-200, #E5E7EB);
  border-bottom: 1px solid var(--gray-200, #E5E7EB);
  padding: var(--space-20) 0;
}
.roi-calc .container { max-width: 1140px; }
.roi-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-12);
}
.roi-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.roi-head h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.25rem);
  line-height: 1.15;
  color: var(--clinical-navy);
  margin: 0 0 var(--space-4);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.roi-head p {
  color: var(--clinical-slate);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}
.roi-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-10);
  align-items: stretch;
}
@media (max-width: 900px) {
  .roi-grid { grid-template-columns: 1fr; gap: var(--space-8); }
}
.roi-card {
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
.roi-card h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clinical-navy);
  letter-spacing: -0.005em;
}
.roi-card .roi-card-sub {
  margin: 0 0 var(--space-6);
  color: var(--clinical-slate);
  font-size: 0.9rem;
}
.roi-field { margin-bottom: var(--space-5); }
.roi-field:last-of-type { margin-bottom: 0; }
.roi-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--clinical-navy);
  margin-bottom: var(--space-2);
  letter-spacing: 0.005em;
}
.roi-field .roi-hint {
  display: block;
  font-size: 0.78rem;
  color: var(--clinical-slate);
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.4;
}
.roi-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.roi-input-wrap .roi-prefix,
.roi-input-wrap .roi-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: #F1F5F9;
  border: 1px solid #DCE5EC;
  color: var(--clinical-slate);
  font-weight: 600;
  font-size: 0.92rem;
}
.roi-input-wrap .roi-prefix {
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
}
.roi-input-wrap .roi-suffix {
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.roi-input,
.roi-select {
  flex: 1 1 auto;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 11px 14px;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius);
  color: var(--clinical-navy);
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.roi-input-wrap .roi-input { border-radius: 0; }
.roi-input-wrap .roi-prefix + .roi-input,
.roi-input-wrap .roi-input + .roi-suffix {
  /* keep group flush */
}
.roi-input-wrap > .roi-prefix + .roi-input { border-left: none; }
.roi-input-wrap > .roi-input + .roi-suffix { /* suffix already styled */ }
.roi-input-wrap > .roi-input:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.roi-input-wrap > .roi-input:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.roi-input-wrap > .roi-prefix + .roi-input:last-child { border-left: none; }
.roi-input:focus,
.roi-select:focus {
  outline: none;
  border-color: var(--clinical-cyan);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, 0.18);
}
.roi-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5B72' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.roi-results-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%);
}
.roi-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 540px) {
  .roi-results-grid { grid-template-columns: 1fr; }
}
.roi-stat {
  background: #fff;
  border: 1px solid #E5EDF2;
  border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.roi-stat-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clinical-slate);
  font-weight: 600;
  margin-bottom: 6px;
}
.roi-stat-value {
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--clinical-navy);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.roi-stat-value .unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--clinical-slate);
  margin-left: 4px;
  letter-spacing: 0.04em;
}
.roi-stat-detail {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--clinical-slate);
  line-height: 1.4;
}
.roi-bottom {
  background: var(--clinical-navy);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.roi-bottom-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan-300);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.roi-bottom-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.roi-bottom-detail {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 380px;
  line-height: 1.5;
}
.roi-disclaimer {
  margin: var(--space-8) auto 0;
  max-width: 880px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--clinical-slate);
  line-height: 1.55;
}
.roi-disclaimer strong { color: var(--clinical-navy); }
.roi-method {
  margin-top: var(--space-3);
  font-size: 0.8rem;
  color: var(--clinical-slate);
  opacity: 0.85;
}

/* ROI — Fixed-assumption callout above the inputs */
.roi-fixed-note {
  background: rgba(14, 165, 199, 0.08);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--clinical-navy, #0F2A4A);
  margin: 4px 0 18px;
}
.roi-fixed-note strong { color: var(--clinical-navy, #0F2A4A); }

/* ROI — Show-me-the-math expandable walkthrough */
.roi-math {
  margin: var(--space-7) auto 0;
  max-width: 1040px;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.04);
  overflow: hidden;
}
.roi-math > summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  color: var(--clinical-navy, #0F2A4A);
  background: linear-gradient(180deg, #f9fbfc 0%, #ffffff 100%);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.roi-math > summary::-webkit-details-marker { display: none; }
.roi-math > summary::before {
  content: "+";
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clinical-cyan, #0EA5C7);
  color: #fff;
  text-align: center;
  line-height: 22px;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.roi-math[open] > summary::before { content: "−"; }
.roi-math > summary:hover { background: #f4f7f9; }

.roi-math-body {
  padding: 8px 28px 28px;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.roi-math-intro {
  margin: 16px 0 20px;
  color: var(--clinical-slate);
  font-size: 0.92rem;
  line-height: 1.55;
}
.roi-math-steps {
  list-style: none;
  counter-reset: roi-step;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.roi-math-steps li {
  background: #f9fbfc;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roi-math-step-label {
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 0.95rem;
  letter-spacing: -0.005em;
}
.roi-math-step-eq {
  font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.9rem;
  color: var(--clinical-navy, #0F2A4A);
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--rule-soft, #e5e9ee);
  word-break: break-word;
  line-height: 1.5;
}
.roi-math-step-note {
  font-size: 0.85rem;
  color: var(--clinical-slate);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .roi-math > summary { padding: 14px 18px; font-size: 0.95rem; }
  .roi-math-body { padding: 8px 16px 20px; }
  .roi-math-step-eq { font-size: 0.82rem; padding: 8px 10px; }
}

/* ROI — Quote-request mini-form (fills empty space below results) */
.roi-quote {
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.roi-quote-head { margin-bottom: 18px; }
.roi-quote-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
  margin-bottom: 6px;
}
.roi-quote-head h3 {
  margin: 0 0 8px;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--clinical-navy, #0F2A4A);
}
.roi-quote-head p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}
.roi-quote-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.roi-quote-fs {
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 10px;
  padding: 14px 16px 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fbfcfd;
}
.roi-quote-fs > legend {
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #0EA5C7);
}
.roi-quote-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.roi-quote-row.roi-quote-row-3 {
  grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 600px) {
  .roi-quote-row,
  .roi-quote-row.roi-quote-row-3 { grid-template-columns: 1fr; }
}
.roi-quote-field { display: flex; flex-direction: column; gap: 4px; }
.roi-quote-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--clinical-navy, #0F2A4A);
}
.roi-quote-opt {
  font-weight: 400;
  color: var(--clinical-slate);
  text-transform: none;
  letter-spacing: 0;
}
.roi-quote-field input:not([type="checkbox"]):not([type="radio"]),
.roi-quote-field textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 8px;
  background: #fff;
  color: var(--clinical-navy, #0F2A4A);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.roi-quote-field input:not([type="checkbox"]):not([type="radio"]):focus,
.roi-quote-field textarea:focus {
  outline: none;
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, 0.18);
}
/* Checkboxes inside a .roi-quote-field stay native size */
.roi-quote-field input[type="checkbox"],
.roi-quote-field input[type="radio"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
}
.roi-quote-foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.roi-quote-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: linear-gradient(135deg, var(--clinical-cyan, #0EA5C7) 0%, var(--clinical-cyan-dk, #0B8AA6) 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.96rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 6px 18px -6px rgba(14, 165, 199, 0.55), 0 2px 4px rgba(15, 42, 74, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}
.roi-quote-submit:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 24px -8px rgba(14, 165, 199, 0.7), 0 3px 6px rgba(15, 42, 74, 0.1);
}
.roi-quote-submit:active { transform: translateY(0); }
.roi-quote-submit .arrow { font-size: 1.05em; line-height: 1; }
.roi-quote-fineprint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--clinical-slate);
  line-height: 1.5;
}

.roi-quote-thanks {
  background: linear-gradient(135deg, rgba(14, 165, 199, 0.08), rgba(14, 165, 199, 0.02));
  border: 1px solid rgba(14, 165, 199, 0.25);
  border-radius: 12px;
  padding: 20px 22px;
  color: var(--clinical-navy, #0F2A4A);
}
.roi-quote-thanks strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--clinical-navy, #0F2A4A);
}
.roi-quote-thanks p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate);
}

/* ============================================================
   Genii calculator — mode toggle (Mode A / Mode B pill switch)
   ============================================================ */
.roi-mode-toggle {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-7);
  padding: 6px;
  background: #f1f4f6;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 999px;
  gap: 4px;
  width: max-content;
  max-width: 100%;
}
.roi-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 20px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--clinical-slate);
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
  font: inherit;
  text-align: center;
  min-width: 0;
}
.roi-mode-btn-eyebrow {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.roi-mode-btn-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.roi-mode-btn:hover { background: #fff; color: var(--clinical-navy, #0F2A4A); }
.roi-mode-btn.is-active {
  background: linear-gradient(135deg, var(--clinical-cyan, #0EA5C7) 0%, var(--clinical-cyan-dk, #0B8AA6) 100%);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(14, 165, 199, 0.55), 0 2px 4px rgba(15, 42, 74, 0.08);
}
.roi-mode-btn.is-active .roi-mode-btn-eyebrow { opacity: 0.95; }

@media (max-width: 700px) {
  .roi-calc .roi-mode-toggle { flex-direction: column; border-radius: 14px; width: 100%; }
  .roi-mode-btn { padding: 12px 18px; }
}

/* ============================================================
   Genii calculator — comparison bar chart
   ============================================================ */
.roi-bar-chart {
  margin: 0 0 var(--space-6);
  padding: 18px 18px 14px;
  background: #fbfcfd;
  border: 1px solid var(--rule-soft, #e5e9ee);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roi-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  align-items: center;
}
.roi-bar-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  text-align: right;
  letter-spacing: -0.005em;
}
.roi-bar-track {
  position: relative;
  height: 36px;
  background: #eef2f5;
  border-radius: 8px;
  overflow: visible;
  display: flex;
  align-items: center;
}
.roi-bar {
  height: 100%;
  border-radius: 8px;
  transition: width 320ms cubic-bezier(.2,.7,.2,1);
  min-width: 4px;
}
.roi-bar-genii {
  background: linear-gradient(135deg, #1f9d55 0%, #15803d 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}
.roi-bar-them {
  background: linear-gradient(135deg, #c33 0%, #962020 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}
.roi-bar-value {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--clinical-navy, #0F2A4A);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.roi-bar-foot {
  font-size: 0.78rem;
  color: var(--clinical-slate);
  text-align: center;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .roi-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .roi-bar-label { text-align: left; }
}

/* Multi-Wiper card — Productivity & Cost calculator CTA pill */
.product-card-cta-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--clinical-cyan, #0EA5C7) 0%, var(--clinical-cyan-dk, #0B8AA6) 100%);
  color: #fff !important;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.96rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 18px -6px rgba(14, 165, 199, 0.55), 0 2px 4px rgba(15, 42, 74, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  position: relative;
  overflow: hidden;
}
.product-card-cta-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 600ms ease;
  pointer-events: none;
}
.product-card-cta-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(14, 165, 199, 0.7), 0 3px 6px rgba(15, 42, 74, 0.12);
  filter: brightness(1.04);
  color: #fff !important;
  text-decoration: none;
}
.product-card-cta-pill:hover::before { transform: translateX(100%); }
.product-card-cta-pill .product-card-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.5);
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  font-family: var(--font-sans, inherit);
}
.product-card-cta-pill .product-card-cta-text {
  flex: 1 1 auto;
  font-weight: 700;
}
.product-card-cta-pill .product-card-cta-arrow {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 1.15rem;
  transition: transform 160ms ease;
}
.product-card-cta-pill:hover .product-card-cta-arrow { transform: translateX(3px); }

/* legacy class kept for graceful backward-compat (if any older HTML still references it) */
.product-card-specs li.product-card-cta-bullet { display: none; }
.product-card-specs li.product-card-cta-bullet a { display: none; }
.product-card-specs li.product-card-cta-bullet a:hover { color: inherit; }
.product-card-specs li.product-card-cta-bullet a .arrow {
  font-weight: 700;
  transition: transform 120ms ease;
}
.product-card-specs li.product-card-cta-bullet a:hover .arrow {
  transform: translateX(2px);
}

/* ================================================================== */
/* PRODUCT SELECTOR — "Which one is right for you?" decision matrix    */
/* ================================================================== */
.selector-section {
  background: var(--bg-feature, #F6F9FC);
  padding: var(--space-16) 0 var(--space-20);
}
.selector-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-12);
}
.selector-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.selector-head h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.4rem);
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  font-weight: 700;
}
.selector-head .lede {
  color: var(--clinical-slate, #4A5B72);
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0;
}
.selector-head .lede strong { color: var(--clinical-navy, #0F2A4A); font-weight: 700; }

.selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}
@media (max-width: 980px) {
  .selector-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

.selector-col {
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-7) var(--space-7);
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
  display: flex;
  flex-direction: column;
}
.selector-col-title {
  font-size: 1.25rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.selector-col-sub {
  margin: 0 0 var(--space-6);
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.9rem;
  line-height: 1.5;
}
.selector-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  flex: 1 1 auto;
}
.selector-option {
  border-top: 1px solid #EAF0F4;
  padding-top: var(--space-5);
}
.selector-option:first-child { border-top: none; padding-top: 0; }

.selector-product {
  display: block;
  text-decoration: none;
  color: var(--clinical-navy, #0F2A4A);
  margin-bottom: 6px;
  transition: color 120ms ease;
}
.selector-product:hover { color: var(--clinical-cyan-dk, #0B8AA6); }
.selector-product:hover .selector-name { text-decoration: underline; }
.selector-name {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.005em;
}
.selector-name .selector-meta {
  font-weight: 500;
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.92rem;
}
.selector-tier {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 600;
  margin-top: 3px;
}
.selector-blurb {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}
.selector-blurb a {
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.selector-blurb a:hover { text-decoration: underline; }

.selector-option.specialty .selector-tier { color: #B45309; /* amber-700 */ }
.selector-option.specialty .selector-product:hover { color: #B45309; }

.selector-both {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.selector-both p {
  margin: 0 0 var(--space-4);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
}
.selector-both p:last-child { margin-bottom: 0; }
.selector-both strong { color: var(--clinical-navy, #0F2A4A); }
.selector-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--clinical-cyan-dk, #0B8AA6);
  text-decoration: none;
}
.selector-cta:hover { color: var(--clinical-navy, #0F2A4A); text-decoration: underline; }

/* ================================================================== */
/* CALIBRATION SOURCES BLOCK — used on product Resources tabs and on   */
/* the main Resources page                                             */
/* ================================================================== */
.calsrc-block {
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius-lg);
  padding: 32px;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 32px;
  align-items: start;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
@media (max-width: 880px) {
  .calsrc-block { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}
.calsrc-options h3 {
  margin: 0 0 8px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.calsrc-intro {
  margin: 0 0 22px;
  color: var(--clinical-slate, #4A5B72);
  font-size: 1rem;
  line-height: 1.6;
}
.calsrc-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
@media (max-width: 600px) {
  .calsrc-option-grid { grid-template-columns: 1fr; }
}
.calsrc-option {
  background: var(--bg-feature, #F6F9FC);
  border: 1px solid #EAF0F4;
  border-radius: 10px;
  padding: 16px 18px;
}
.calsrc-option h4 {
  margin: 0 0 6px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1rem;
  font-weight: 700;
}
.calsrc-isotope {
  color: var(--clinical-slate, #4A5B72);
  font-weight: 500;
  font-size: 0.85rem;
  margin-left: 4px;
}
.calsrc-option p,
.calsrc-genesys p {
  margin: 0;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.55;
  font-size: 0.92rem;
}
.calsrc-genesys {
  border-top: 1px solid #EAF0F4;
  padding-top: 18px;
}
.calsrc-genesys h4 {
  margin: 0 0 8px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1rem;
  font-weight: 700;
}
.calsrc-genesys em {
  color: var(--clinical-navy, #0F2A4A);
  font-style: normal;
  font-weight: 600;
}
.calsrc-vendor {
  background: var(--bg-feature, #F6F9FC);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 8px;
  padding: 22px 24px;
}
.calsrc-vendor h4 {
  margin: 0 0 10px;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calsrc-vendor p {
  margin: 0;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.6;
  font-size: 0.93rem;
}
.calsrc-vendor strong { color: var(--clinical-navy, #0F2A4A); }

/* ================================================================== */
/* FIND YOUR COUNTER — interactive 2-question wizard                   */
/* ================================================================== */
.finder-section {
  background: var(--bg-feature, #F6F9FC);
  padding: var(--space-16) 0 var(--space-20);
}
.finder-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-10);
}
.finder-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.finder-head h2 {
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  font-weight: 700;
}
.finder-head p {
  color: var(--clinical-slate, #4A5B72);
  font-size: 1.02rem;
  margin: 0;
}

.finder-app {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius-lg);
  padding: 36px 40px 32px;
  box-shadow: 0 6px 24px rgba(15, 42, 74, 0.06);
  position: relative;
  min-height: 320px;
}
@media (max-width: 640px) {
  .finder-app { padding: 28px 22px 24px; }
}

/* Progress indicator */
.finder-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 28px;
}
.finder-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #EAF0F4;
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 200ms ease, color 200ms ease;
  flex-shrink: 0;
}
.finder-step.is-active {
  background: var(--clinical-cyan, #0EA5C7);
  color: #fff;
}
.finder-step.is-done {
  background: var(--clinical-navy, #0F2A4A);
  color: #fff;
}
.finder-progress-line {
  flex: 0 1 56px;
  height: 2px;
  background: #EAF0F4;
  margin: 0 8px;
  transition: background 200ms ease;
}
.finder-progress-line.is-done { background: var(--clinical-navy, #0F2A4A); }

/* Step panels — only one visible at a time */
.finder-step-panel { display: none; }
.finder-step-panel.is-active {
  display: block;
  animation: finderFadeIn 250ms ease;
}
@keyframes finderFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.finder-step-panel h3 {
  text-align: center;
  font-size: 1.25rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 24px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.finder-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 600px) {
  .finder-options { grid-template-columns: 1fr; }
}
.finder-option {
  background: #fff;
  border: 1.5px solid #DCE5EC;
  border-radius: var(--radius);
  padding: 22px 22px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--clinical-navy, #0F2A4A);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.finder-option:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  background: #FAFCFD;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(14, 165, 199, 0.4);
}
.finder-option:focus-visible {
  outline: 2px solid var(--clinical-cyan, #0EA5C7);
  outline-offset: 2px;
}
.finder-option-title {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
}
.finder-option-sub {
  font-size: 0.86rem;
  color: var(--clinical-slate, #4A5B72);
  font-weight: 400;
  line-height: 1.45;
}

.finder-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 0;
  margin-top: 8px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--clinical-slate, #4A5B72);
  cursor: pointer;
  font-weight: 500;
}
.finder-back:hover { color: var(--clinical-navy, #0F2A4A); }

/* Result panel */
.finder-result {
  text-align: left;
}
.finder-result-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: 6px;
}
.finder-result h3 {
  text-align: left;
  font-size: 1.7rem;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.finder-result-why {
  color: var(--clinical-slate, #4A5B72);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
.finder-result-also {
  background: var(--bg-feature, #F6F9FC);
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 0 0 18px;
}
.finder-result-also-label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: 4px;
}
.finder-result-also p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.55;
}
.finder-result-specialty {
  font-size: 0.85rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.55;
  margin: 0 0 22px;
  padding-left: 14px;
  border-left: 2px solid #EAF0F4;
}
.finder-result-specialty strong { color: #B45309; }
.finder-result-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.finder-result-cta .btn {
  flex: 0 0 auto;
}
.finder-restart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 6px 0;
  font: inherit;
  font-size: 0.88rem;
  color: var(--clinical-slate, #4A5B72);
  cursor: pointer;
  font-weight: 500;
}
.finder-restart:hover { color: var(--clinical-navy, #0F2A4A); }

/* ================================================================== */
/* CALIBRATION SOURCES — Reflex Industries vendor card with preview    */
/* ================================================================== */
.calsrc-vendor.calsrc-vendor-card {
  background: #fff;
  border: 1px solid #DCE5EC;
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.calsrc-vendor-preview {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2EBF1 100%);
  border-bottom: 1px solid #DCE5EC;
  overflow: hidden;
}
.calsrc-vendor-preview img,
.calsrc-vendor-preview-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.calsrc-vendor-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1280px;
  height: 900px;
  border: 0;
  transform: scale(0.36);
  transform-origin: top left;
  pointer-events: none;
  background: #fff;
}
.calsrc-vendor-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent 55%, rgba(15, 42, 74, 0.55) 100%);
  text-decoration: none;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 200ms ease;
}
.calsrc-vendor-shield:hover {
  background: linear-gradient(180deg, rgba(14, 165, 199, 0.05) 0%, rgba(15, 42, 74, 0.7) 100%);
}
.calsrc-vendor-shield .calsrc-vendor-shield-arrow {
  margin-left: 6px;
  transition: transform 160ms ease;
  display: inline-block;
}
.calsrc-vendor-shield:hover .calsrc-vendor-shield-arrow {
  transform: translateX(3px);
}
.calsrc-vendor-body {
  padding: 18px 22px 22px;
}
.calsrc-vendor.calsrc-vendor-card h4 {
  margin: 0 0 8px;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.calsrc-vendor.calsrc-vendor-card p {
  margin: 0 0 14px;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.6;
  font-size: 0.93rem;
}
.calsrc-vendor.calsrc-vendor-card p strong { color: var(--clinical-navy, #0F2A4A); }
.calsrc-vendor-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--clinical-cyan-dk, #0B8AA6);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  transition: background 140ms ease, transform 140ms ease;
}
.calsrc-vendor-cta:hover {
  background: var(--clinical-navy, #0F2A4A);
  transform: translateY(-1px);
}
.calsrc-vendor-cta-arrow {
  transition: transform 140ms ease;
}
.calsrc-vendor-cta:hover .calsrc-vendor-cta-arrow { transform: translateX(2px); }

/* ================================================================== */
/* FEATURE SPOTLIGHT — prominent capability callout (e.g. I-125 self-cal) */
/* ================================================================== */
.feature-spotlight {
  background: linear-gradient(135deg, #F1F8FA 0%, #E0F2F7 100%);
  border: 1px solid #C6E4ED;
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: var(--radius-lg);
  padding: 26px 30px 28px;
  margin: 32px 0 0;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
.feature-spotlight-tag {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: 12px;
}
.feature-spotlight-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) {
  .feature-spotlight { padding: 24px 22px; }
  .feature-spotlight-grid { grid-template-columns: 1fr; gap: 18px; }
}
.feature-spotlight-text h3 {
  margin: 0 0 10px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.3rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.feature-spotlight-text p {
  margin: 0;
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.96rem;
  line-height: 1.6;
}
.feature-spotlight-text strong { color: var(--clinical-navy, #0F2A4A); }
.feature-spotlight-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-spotlight-cta .btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .feature-spotlight-cta { flex-direction: row; flex-wrap: wrap; }
  .feature-spotlight-cta .btn { width: auto; flex: 1 1 auto; }
}

/* ================================================================== */
/* "HAVE AN IDEA FOR US?" — feature-suggestion card on Service page    */
/* ================================================================== */
.idea-section { padding: var(--space-20) 0; }
.idea-card {
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(135deg, #F8FBFD 0%, #EAF4F7 100%);
  border: 1px solid #DCE5EC;
  border-left: 4px solid var(--clinical-cyan, #0EA5C7);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
  box-shadow: 0 6px 24px rgba(15, 42, 74, 0.06);
}
@media (max-width: 880px) {
  .idea-card { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
}
.idea-text .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.idea-text h2 {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  line-height: 1.15;
  font-weight: 700;
}
.idea-text p {
  margin: 0 0 14px;
  color: var(--clinical-slate, #4A5B72);
  font-size: 1rem;
  line-height: 1.65;
}
.idea-text p:last-of-type { margin-bottom: 0; }
.idea-text strong { color: var(--clinical-navy, #0F2A4A); }
.idea-tagline {
  margin-top: 20px !important;
  padding-top: 16px;
  border-top: 1px solid #DCE5EC;
  font-style: italic;
  font-size: 0.92rem !important;
}
.idea-form {
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius);
  padding: 24px 24px 22px;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
.idea-field { margin-bottom: 14px; }
.idea-field:last-of-type { margin-bottom: 18px; }
.idea-field label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.idea-field .req {
  color: var(--clinical-cyan-dk, #0B8AA6);
  margin-left: 2px;
}
.idea-field input,
.idea-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid #DCE5EC;
  border-radius: 6px;
  color: var(--clinical-navy, #0F2A4A);
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  appearance: none;
  resize: vertical;
}
.idea-field textarea {
  min-height: 110px;
  line-height: 1.5;
  font-family: inherit;
}
.idea-field input:focus,
.idea-field textarea:focus {
  outline: none;
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 0 0 3px rgba(14, 165, 199, 0.18);
}
.idea-form button.btn {
  width: 100%;
  justify-content: center;
}
.idea-form-note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--clinical-slate, #4A5B72);
  line-height: 1.45;
  text-align: center;
}

/* ================================================================== */
/* FIELD TESTIMONIALS — clinical quotes from long-running Bind-It customers */
/* ================================================================== */
.field-testimonials {
  margin: 56px 0 24px;
  padding-top: 40px;
  border-top: 1px solid #DCE5EC;
}
.field-testimonials-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 32px;
}
.field-testimonials-head .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.field-testimonials-head h3 {
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  line-height: 1.2;
  font-weight: 700;
}
.field-testimonials-note {
  margin: 0;
  color: var(--clinical-slate, #4A5B72);
  font-size: 0.94rem;
  line-height: 1.6;
}
.field-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .field-testimonials-grid { grid-template-columns: 1fr; }
}
.testimonial-card {
  margin: 0;
  padding: 24px 24px 22px;
  background: #fff;
  border: 1px solid #DCE5EC;
  border-radius: var(--radius-lg);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(15, 42, 74, 0.04);
}
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: -10px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  line-height: 1;
  color: var(--clinical-cyan, #0EA5C7);
  background: #fff;
  padding: 0 8px;
  font-weight: 700;
}
.testimonial-card blockquote {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  font-style: italic;
  flex: 1 1 auto;
}
.testimonial-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid #EAF0F4;
  padding-top: 14px;
}
.testimonial-role {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--clinical-navy, #0F2A4A);
}
.testimonial-where {
  font-size: 0.84rem;
  color: var(--clinical-slate, #4A5B72);
  letter-spacing: 0.005em;
}

/* ================================================================== */
/* PRODUCT-PAGE VIDEO BLOCK — embedded clip with caption (e.g. S4FE-D field clips) */
/* ================================================================== */
.product-video-block {
  margin: 0 auto 32px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.product-video-block-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0B8AA6);
  font-weight: 700;
  margin-bottom: 12px;
}
.product-video-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: 0 12px 32px rgba(15, 42, 74, 0.14);
  border: 1px solid #DCE5EC;
}
.product-video-frame video {
  display: block;
  width: 100%;
  height: auto;
}
.product-video-caption {
  margin: 14px 4px 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  text-align: center;
  font-style: italic;
  max-width: 520px;
}
.product-video-caption strong { color: var(--clinical-navy, #0F2A4A); font-style: normal; }

/* ================================================================== */
/*  WIPER GOLD — AUTOSPECT & MCA SPOTLIGHT TAB                        */
/* ================================================================== */

.spotlight-block {
  margin: 56px 0 72px;
}
.spotlight-block:first-of-type { margin-top: 24px; }
.spotlight-head {
  max-width: 880px;
  margin: 0 auto 32px;
  text-align: center;
}
.spotlight-head h3 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.spotlight-head p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}
.spotlight-caption {
  margin: 22px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
  font-style: italic;
}
.spotlight-caption strong {
  color: var(--clinical-navy, #0F2A4A);
  font-style: normal;
}

/* AutoSpect spectrum compare */
.spectrum-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .spectrum-compare { grid-template-columns: 1fr; }
}
.spectrum-fig {
  margin: 0;
  background: #0F2A4A;
  border: 1px solid rgba(103, 232, 249, 0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 42, 74, 0.12);
}
.spectrum-fig svg {
  display: block;
  width: 100%;
  height: auto;
}
.spectrum-fig figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(15, 42, 74, 0.95);
  color: #E2E8F0;
  font-size: 0.92rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(103, 232, 249, 0.18);
}
.spec-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spec-tag-raw  { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; border: 1px solid rgba(248, 113, 113, 0.4); }
.spec-tag-corr { background: rgba(103, 232, 249, 0.18); color: #67E8F9; border: 1px solid rgba(103, 232, 249, 0.5); }

/* Big pull quote */
.big-pull-quote {
  max-width: 920px;
  margin: 80px auto;
  padding: 0 28px;
  text-align: center;
  border: none;
}
.big-pull-quote p {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  font-style: italic;
  margin: 0;
  letter-spacing: -0.012em;
  position: relative;
}
.big-pull-quote p::before,
.big-pull-quote p::after {
  content: '"';
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--clinical-cyan, #22D3EE);
  font-size: 1.2em;
  line-height: 0;
  vertical-align: -0.2em;
  font-style: normal;
}
.big-pull-quote p::before { margin-right: 6px; }
.big-pull-quote p::after  { margin-left: 6px; }
.big-pull-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clinical-slate, #4A5B72);
}

/* MCA channel comparison grid */
.mca-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .mca-compare-grid { grid-template-columns: 1fr; }
}
.mca-tier {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 14px;
  padding: 26px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.mca-tier-low  { background: #F8F9FB; }
.mca-tier-mid  { background: #FFFFFF; }
.mca-tier-high {
  background: linear-gradient(160deg, #0F2A4A 0%, #1A3A66 100%);
  border-color: var(--clinical-cyan, #22D3EE);
  box-shadow: 0 14px 38px rgba(15, 42, 74, 0.22);
  color: #E2E8F0;
}
.mca-tier-high h4    { color: #FFFFFF; }
.mca-tier-high ul    { color: #CBD5E1; }
.mca-tier-high ul li { border-color: rgba(255, 255, 255, 0.08); }
.mca-tier-high strong { color: #67E8F9; }

.mca-num {
  display: inline-block;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.mca-tier-low  .mca-num { color: #94A3B8; }
.mca-tier-mid  .mca-num { color: var(--clinical-slate, #4A5B72); }
.mca-tier-high .mca-num { color: var(--clinical-cyan, #22D3EE); }
.mca-num .mca-unit {
  font-size: 0.4em;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  margin-left: 4px;
  vertical-align: 0.5em;
  color: inherit;
  opacity: 0.8;
}
.mca-tier h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--clinical-navy, #0F2A4A);
  letter-spacing: -0.005em;
}
.mca-tier ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}
.mca-tier ul li {
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft, #E6EBF2);
}
.mca-tier ul li:first-child { border-top: none; padding-top: 0; }

/* Decay Calculator three-use-case grid */
.decay-uses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .decay-uses-grid { grid-template-columns: 1fr; }
}
.decay-use {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 12px;
  padding: 26px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.decay-num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--clinical-cyan, #22D3EE);
  opacity: 0.32;
  letter-spacing: -0.04em;
}
.decay-use h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 12px;
  padding-right: 30px;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.decay-use p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
}

/* ================================================================== */
/*  WIPER GOLD — REAL INSTRUMENT SCREEN CAPTURES                      */
/* ================================================================== */

/* LCD frame — gives the upscaled monochrome capture an "instrument display" feel */
.lcd-frame {
  background: #2a2d35;
  border: 6px solid #1A1D24;
  border-radius: 6px;
  padding: 8px;
  box-shadow:
    inset 0 0 0 1px rgba(103, 232, 249, 0.08),
    0 8px 24px rgba(15, 42, 74, 0.18);
  position: relative;
}
.lcd-frame::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 4px;
  height: 28px;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #67E8F9 0%, #67E8F9 50%, transparent 50%);
  background-size: 100% 6px;
  border-radius: 1px;
  opacity: 0.35;
}
.lcd-frame img {
  display: block;
  width: 100%;
  height: auto;
  /* Preserve crisp pixel rendering on the upscaled LCD captures */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #FFFFFF;
  border-radius: 2px;
}

/* QC rotator — two stacked LCD frames that crossfade every few seconds.
   Used on Genesys software slide 05 to alternate the per-well background
   report with the Levey-Jennings QC chart. */
.lcd-frame.qc-rotator {
  position: relative;
  /* Anchor the first image at natural size so the frame itself sizes correctly;
     subsequent .qc-rotator-frame imgs sit absolutely on top. */
}
.lcd-frame.qc-rotator .qc-rotator-frame {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  background: #FFFFFF;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lcd-frame.qc-rotator .qc-rotator-frame:not(:first-child) {
  position: absolute;
  top: 8px; left: 8px; right: 8px;  /* match .lcd-frame padding */
}
.lcd-frame.qc-rotator .qc-rotator-frame.is-active {
  opacity: 1;
}
/* Reduced-motion users get a clean static (no autoplay) — show first only. */
@media (prefers-reduced-motion: reduce) {
  .lcd-frame.qc-rotator .qc-rotator-frame { transition: none; }
}

/* The "real capture" proof block on the AutoSpect tab */
.real-capture-block { margin-top: 56px; }
.real-capture {
  max-width: 720px;
  margin: 0 auto;
}
.real-capture figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  font-style: italic;
}

/* Walkthrough tab — sectioned screen capture grids */
.walk-section {
  margin: 56px 0 72px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-soft, #E6EBF2);
}
.walk-section:last-of-type { border-bottom: none; }
.walk-section-head {
  max-width: 800px;
  margin: 0 auto 32px;
  text-align: center;
}
.walk-section-head h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.walk-section-head p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}

.walk-grid {
  display: grid;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
}
.walk-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
.walk-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 880px) {
  .walk-grid-3 { grid-template-columns: 1fr; max-width: 480px; }
  .walk-grid-2 { grid-template-columns: 1fr; max-width: 480px; }
}

.walk-cap {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.walk-cap figcaption {
  margin-top: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}
.walk-cap figcaption strong {
  display: inline-block;
  margin-right: 4px;
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
}

.walk-closer {
  max-width: 880px;
  margin: 64px auto 16px;
  padding: 28px 32px;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 8px;
  text-align: center;
}
.walk-closer p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: var(--clinical-slate, #4A5B72);
}
.walk-closer p strong {
  color: var(--clinical-navy, #0F2A4A);
}

/* Real detector photo on the Wiper Gold "Detectors & Shielding" tab */
.detector-photo {
  margin: 0;
  padding: 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
}
.detector-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.detector-photo figcaption {
  margin-top: 14px;
  padding: 0 6px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--clinical-slate, #4A5B72);
  text-align: center;
  font-style: italic;
}

/* Real detector cross-section drawing on the Wiper Gold "Detectors & Shielding" tab */
.detector-drawing {
  margin: 0;
  padding: 28px 24px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.detector-drawing img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 520px;
  height: auto;
}
.detector-drawing figcaption {
  margin-top: 18px;
  padding: 0 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  text-align: center;
  font-style: italic;
  max-width: 320px;
}
.detector-drawing figcaption strong {
  color: var(--clinical-navy, #0F2A4A);
  font-style: normal;
  font-weight: 700;
}

/* ================================================================== */
/*  MULTI-WIPER WALKTHROUGH — additions                                */
/* ================================================================== */

.walk-section-note {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 18px 22px;
  background: rgba(34, 211, 238, 0.06);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  text-align: center;
}
.walk-section-note em { font-style: italic; }
.walk-section-note a {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.walk-section-note a:hover { color: var(--clinical-cyan-dk, #0EA5C7); }

/* Marquee report block — the inspector-grade proof */
.walk-section-report {
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, 0.04) 100%);
  padding-top: 32px;
}
.report-figure {
  margin: 0 auto;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.report-frame {
  background: #FFFFFF;
  border: 1px solid #D7DEE8;
  border-radius: 6px;
  padding: 20px;
  box-shadow:
    0 1px 0 rgba(15, 42, 74, 0.06),
    0 12px 36px rgba(15, 42, 74, 0.18),
    0 24px 60px rgba(15, 42, 74, 0.12);
  position: relative;
  width: 100%;
  max-width: 760px;
}
.report-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, rgba(15, 42, 74, 0.08) 50%, transparent 100%);
  border-radius: 0 0 6px 6px;
}
.report-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.report-figure figcaption {
  margin: 22px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
  font-style: italic;
}
.report-figure figcaption strong {
  color: var(--clinical-navy, #0F2A4A);
  font-style: normal;
  font-weight: 700;
}

/* Single screen capture (centered) for walkthrough sections that need just one image */
.walk-cap-single {
  max-width: 480px;
  margin: 0 auto;
}

/* ================================================================== */
/*  I-125 TRACER CALIBRATION SPOTLIGHT — Genii / Gamma 1               */
/* ================================================================== */

.i125-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 22px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 1024px) {
  .i125-grid { grid-template-columns: 1fr; }
}

.i125-pillar {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.i125-pillar-feature {
  background: linear-gradient(160deg, #0F2A4A 0%, #1A3A66 100%);
  border-color: var(--clinical-cyan, #22D3EE);
  box-shadow: 0 14px 40px rgba(15, 42, 74, 0.22);
  color: #E2E8F0;
}
.i125-pillar-feature h3 { color: #FFFFFF; }
.i125-pillar-feature p  { color: #CBD5E1; }
.i125-pillar-feature strong { color: #67E8F9; }
.i125-pillar-feature .i125-num {
  color: var(--clinical-cyan, #22D3EE);
  opacity: 0.6;
}

.i125-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--clinical-cyan-dk, #0EA5C7);
  opacity: 0.78;
  margin-bottom: 18px;
}

.i125-pillar h3 {
  font-size: 1.08rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}
.i125-pillar p {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}
.i125-pillar a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  margin-top: 6px;
  display: inline-block;
}
.i125-pillar-feature a {
  color: var(--clinical-cyan, #22D3EE);
}

/* ================================================================== */
/*  LEGACY SERVICE PAGE — Genesys 5000 archive                        */
/* ================================================================== */

.legacy-hero {
  background: linear-gradient(135deg, #0F2A4A 0%, #1A3A66 100%);
  color: #E2E8F0;
  padding: 56px 0 64px;
  position: relative;
  overflow: hidden;
}
.legacy-hero .breadcrumb { color: rgba(226, 232, 240, 0.7); }
.legacy-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.legacy-hero .breadcrumb .sep { color: rgba(226, 232, 240, 0.4); }
.legacy-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #67E8F9);
  margin: 18px 0 14px;
}
.legacy-hero h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 20px;
  max-width: 820px;
}
.legacy-lede {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 880px;
  margin: 0 0 28px;
}
.legacy-lede strong { color: #FFFFFF; }
.legacy-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 36px;
}
.legacy-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 800px;
}
@media (max-width: 720px) {
  .legacy-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
.legacy-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 10px;
}
.legacy-hero-stats .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clinical-cyan, #67E8F9);
  letter-spacing: -0.02em;
}
.legacy-hero-stats .stat-num .stat-unit {
  font-size: 0.7em;
  font-weight: 600;
  margin-left: 3px;
}
.legacy-hero-stats .stat-label {
  font-size: 0.82rem;
  color: #CBD5E1;
  line-height: 1.4;
}

.legacy-narrative-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 880px) {
  .legacy-narrative-grid { grid-template-columns: 1fr; }
}
.legacy-narrative-text h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 18px;
  letter-spacing: -0.015em;
}
.legacy-narrative-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--clinical-slate, #4A5B72);
  margin: 0 0 16px;
}
.legacy-narrative-card {
  background: linear-gradient(160deg, #F8FAFC 0%, #EEF2F7 100%);
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 10px;
  padding: 26px 28px;
}
.legacy-narrative-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
}
.legacy-avail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}
.legacy-avail-list li {
  padding: 8px 0;
  border-top: 1px solid var(--rule-soft, #E6EBF2);
}
.legacy-avail-list li:first-child { border-top: none; padding-top: 0; }
.legacy-avail-list li strong { color: var(--clinical-navy, #0F2A4A); font-weight: 700; }
.legacy-avail-list a { color: var(--clinical-cyan-dk, #0EA5C7); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Video grid */
.legacy-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
  margin-top: 36px;
}
.legacy-video {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.legacy-video video {
  width: 100%;
  height: auto;
  background: #000;
  display: block;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.legacy-video-meta {
  padding: 18px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legacy-video-meta h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0;
  line-height: 1.3;
}
.legacy-video-time {
  font-size: 0.82rem;
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 2px 0 8px;
}
.legacy-video-meta p:last-child {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}

/* Successor cards */
.successor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 720px) {
  .successor-grid { grid-template-columns: 1fr; }
}
.successor-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.successor-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0;
}
.successor-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
  flex: 1;
}

/* ================================================================== */
/*  Article hero (used by genii-vs-wizard, wiper-gold-vs-multi-wiper, */
/*  reading-the-wipe-test-report)                                    */
/* ================================================================== */
.article-hero {
  background: linear-gradient(135deg, #0F2A4A 0%, #1A3A66 100%);
  color: #E2E8F0;
  padding: 48px 0 56px;
}
.article-hero .breadcrumb { color: rgba(226, 232, 240, 0.7); }
.article-hero .breadcrumb a { color: rgba(255, 255, 255, 0.85); }
.article-hero .breadcrumb .sep { color: rgba(226, 232, 240, 0.4); }
.article-hero h1 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 16px 0 18px;
  max-width: 900px;
}
.article-hero-sub {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #CBD5E1;
  max-width: 880px;
  margin: 0;
}
.article-hero-sub strong { color: #FFFFFF; }
.article-hero-sub em { color: var(--clinical-cyan, #67E8F9); font-style: italic; }

/* Compare table used in decision guide */
.article-compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
}
.article-compare-table thead th {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  font-weight: 700;
  padding: 12px 16px;
  text-align: left;
  font-size: 0.92rem;
}
.article-compare-table tbody th {
  background: #F8FAFC;
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 600;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--rule-soft, #E6EBF2);
}
.article-compare-table tbody td {
  padding: 12px 16px;
  vertical-align: top;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--clinical-slate, #4A5B72);
  border-bottom: 1px solid var(--rule-soft, #E6EBF2);
}
.article-compare-table tbody td strong {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
}
.article-compare-table tbody tr:hover td,
.article-compare-table tbody tr:hover th { background: #FCFDFE; }

@media (max-width: 720px) {
  .article-compare-table thead { display: none; }
  .article-compare-table tbody th { display: block; background: var(--clinical-navy, #0F2A4A); color: #fff; }
  .article-compare-table tbody td { display: block; padding: 8px 16px; }
  .article-compare-table tbody td:first-of-type::before { content: "Wiper Gold: "; font-weight: 700; color: var(--clinical-navy, #0F2A4A); }
  .article-compare-table tbody td:last-of-type::before { content: "Multi-Wiper: "; font-weight: 700; color: var(--clinical-navy, #0F2A4A); }
}

/* ================================================================== */
/*  Bushberg textbook recognition strip — our-story.html              */
/* ================================================================== */
.recognition-strip {
  background: linear-gradient(135deg, #F8FAFC 0%, #EEF2F7 100%);
  border-top: 1px solid var(--rule-soft, #E6EBF2);
  border-bottom: 1px solid var(--rule-soft, #E6EBF2);
}
.recognition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .recognition-grid { grid-template-columns: 1fr; gap: 28px; }
}
.recognition-figure {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 28px rgba(15, 42, 74, 0.08);
}
.recognition-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.recognition-text h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 12px 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.recognition-text p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--clinical-slate, #4A5B72);
  margin: 0 0 14px;
}
.recognition-text p strong { color: var(--clinical-navy, #0F2A4A); }
.recognition-foot {
  margin-top: 20px !important;
  font-size: 0.86rem !important;
  color: var(--gray-600, #5b6573) !important;
  border-top: 1px solid var(--rule-soft, #E6EBF2);
  padding-top: 14px;
}
.recognition-foot em { font-style: italic; }

/* Wider detector drawing (for the Multi-Wiper annotated cutaway) */
.detector-drawing-wide img {
  max-height: none;
  max-width: 100%;
  width: 100%;
}
.detector-drawing-wide {
  padding: 24px 22px;
}

/* ================================================================== */
/*  WIPER GOLD "WHY IT MATTERS" — interactive walkthrough article      */
/* ================================================================== */

.article-shell-wide { max-width: 1100px; }

.why-demo {
  margin: 64px 0;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--rule-soft, #E6EBF2);
}
.why-demo:last-of-type { border-bottom: none; }
.why-demo-head { margin-bottom: 24px; }
.why-demo-num {
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--clinical-cyan-dk, #0EA5C7);
  background: rgba(34, 211, 238, 0.10);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
}
.why-demo-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
  letter-spacing: -0.018em;
  line-height: 1.18;
}
.why-demo-tag {
  font-size: 1rem;
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 500;
  margin: 0;
  font-style: italic;
}
.why-demo-intro {
  font-size: 1.04rem;
  line-height: 1.65;
  color: var(--clinical-slate, #4A5B72);
  max-width: 900px;
  margin: 0 0 28px;
}
.why-demo-intro strong { color: var(--clinical-navy, #0F2A4A); }
.why-demo-takeaway {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--clinical-slate, #4A5B72);
  margin: 28px 0 0;
  padding: 18px 22px;
  background: rgba(34, 211, 238, 0.06);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 0 6px 6px 0;
}
.why-demo-takeaway strong { color: var(--clinical-navy, #0F2A4A); }
.why-demo-takeaway em { font-style: italic; color: var(--clinical-cyan-dk, #0EA5C7); }

/* Demo 1 — Resolution toggle */
.resolution-toggle {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.res-btn {
  flex: 1 1 160px;
  background: #FFFFFF;
  border: 2px solid var(--rule-soft, #E6EBF2);
  color: var(--clinical-slate, #4A5B72);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 14px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  line-height: 1.25;
}
.res-btn-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-600, #5b6573);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.res-btn:hover {
  border-color: var(--clinical-cyan, #22D3EE);
  color: var(--clinical-navy, #0F2A4A);
}
.res-btn.is-active {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  border-color: var(--clinical-navy, #0F2A4A);
}
.res-btn.is-active .res-btn-sub { color: var(--clinical-cyan, #67E8F9); }

.resolution-figure {
  margin: 0;
  background: #0F2A4A;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(15, 42, 74, 0.2);
}
.resolution-figure img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.resolution-figure figcaption {
  padding: 18px 24px;
  background: #0F2A4A;
  color: #CBD5E1;
  font-size: 0.96rem;
  line-height: 1.6;
}
.resolution-figure figcaption strong { color: #FFFFFF; }
.resolution-figure figcaption em { color: var(--clinical-cyan, #67E8F9); font-style: italic; }

/* Demo 2 — Stopping power grid */
.stopping-power-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}
@media (max-width: 880px) { .stopping-power-grid { grid-template-columns: 1fr; } }

.sp-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.sp-card-feature {
  background: linear-gradient(160deg, #0F2A4A 0%, #1A3A66 100%);
  border-color: var(--clinical-cyan, #22D3EE);
  color: #E2E8F0;
  box-shadow: 0 14px 38px rgba(15, 42, 74, 0.22);
}
.sp-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--clinical-navy, #0F2A4A);
}
.sp-card-feature h3 { color: #FFFFFF; }
.sp-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  margin: 0 auto 16px;
}
.sp-card-stat {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: center;
}
.sp-card-feature .sp-card-stat { color: var(--clinical-cyan, #67E8F9); }
.sp-card-stat span {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--gray-600, #5b6573);
  letter-spacing: 0;
  margin-top: 2px;
}
.sp-card-feature .sp-card-stat span { color: #94A3B8; }
.sp-card-note {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}
.sp-card-feature .sp-card-note { color: #CBD5E1; }
.sp-card-feature .sp-card-note strong { color: #FFFFFF; }
.sp-highlight { color: #67E8F9; }

/* Demo 3 — Compensation compare */
.compensation-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 24px 0;
}
@media (max-width: 880px) { .compensation-compare { grid-template-columns: 1fr; } }
.comp-method {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-radius: 12px;
  padding: 26px 26px;
}
.comp-method-old { opacity: 0.92; }
.comp-method-new {
  border-color: var(--clinical-cyan, #22D3EE);
  background: linear-gradient(160deg, #FFFFFF 0%, #F0F9FB 100%);
  box-shadow: 0 8px 28px rgba(34, 211, 238, 0.12);
}
.comp-method h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 4px;
}
.comp-method-tag {
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--gray-600, #5b6573);
  margin: 0 0 14px;
}
.comp-method-new .comp-method-tag { color: var(--clinical-cyan-dk, #0EA5C7); }
.comp-method ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
}
.comp-method ul li {
  padding: 8px 0 8px 22px;
  position: relative;
  border-top: 1px solid var(--rule-soft, #E6EBF2);
}
.comp-method ul li:first-child { border-top: none; padding-top: 0; }
.comp-method-new ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 700;
}
.comp-method-new ul li:first-child::before { top: 0; }
.comp-method-old ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 8px;
  color: var(--gray-600, #5b6573);
}
.comp-method-old ul li:first-child::before { top: 0; }
.comp-method-result {
  margin: 16px 0 0;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  background: #F8FAFC;
  border-radius: 6px;
  color: var(--clinical-slate, #4A5B72);
}
.comp-method-new .comp-method-result {
  background: rgba(34, 211, 238, 0.08);
  color: var(--clinical-navy, #0F2A4A);
}

/* Demo 3 inline spectrum compare */
.spectrum-compare-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0 0;
}
@media (max-width: 720px) { .spectrum-compare-block { grid-template-columns: 1fr; } }
.spec-fig {
  margin: 0;
  background: #0F2A4A;
  border-radius: 10px;
  overflow: hidden;
}
.spec-fig svg { display: block; width: 100%; height: auto; }
.spec-fig figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(15, 42, 74, 0.95);
  color: #E2E8F0;
  font-size: 0.88rem;
  font-weight: 500;
}

/* Demo 4 — MCA toolkit grid */
.mca-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.mca-tool {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #E6EBF2);
  border-left: 3px solid var(--clinical-cyan, #22D3EE);
  border-radius: 8px;
  padding: 22px 20px;
}
.mca-tool-icon {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.mca-tool h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 8px;
}
.mca-tool p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--clinical-slate, #4A5B72);
  margin: 0;
}

/* Closing block */
.why-close {
  margin: 64px 0 32px;
  padding: 36px 40px;
  background: linear-gradient(160deg, #0F2A4A 0%, #1A3A66 100%);
  color: #E2E8F0;
  border-radius: 14px;
  text-align: center;
}
.why-close h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.why-close p {
  font-size: 1rem;
  line-height: 1.65;
  color: #CBD5E1;
  margin: 0 auto 14px;
  max-width: 780px;
}
.why-close p a {
  color: var(--clinical-cyan, #67E8F9);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.why-close-cta {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.why-close-cta .btn-ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #E2E8F0;
}
.why-close-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

/* Emphasis variant of the callout — for capstone insights inside Why It Matters demos */
.callout.callout-emphasis {
  background: linear-gradient(135deg, rgba(15, 42, 74, 0.04) 0%, rgba(34, 211, 238, 0.08) 100%);
  border-left: 4px solid var(--clinical-cyan-dk, #0EA5C7);
  padding: 22px 26px;
  margin: 28px 0 0;
  border-radius: 0 8px 8px 0;
}
.callout.callout-emphasis strong {
  color: var(--clinical-navy, #0F2A4A);
}
.callout.callout-emphasis em {
  font-style: italic;
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 500;
}

/* ============================================================
   WHY-IT-MATTERS HORIZONTAL CAROUSEL (added 2026-05-08)
   ============================================================ */

.why-carousel-wrap {
  position: relative;
  margin: 24px 0 32px;
}

/* Top nav pills (clickable progress dots with labels) */
.why-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 18px;
  padding: 0;
}
.why-nav-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #fff;
  color: var(--clinical-slate, #4F6477);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.why-nav-dot:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  color: var(--clinical-navy, #0F2A4A);
  transform: translateY(-1px);
}
.why-nav-dot.is-active {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #fff;
}
.why-nav-dot .dot-num {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.why-nav-dot.is-active .dot-num { opacity: 1; color: #67E8F9; }
.why-nav-dot .dot-label {
  font-size: 13px;
}

/* Carousel rail */
.why-carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F8 100%);
  border: 1px solid var(--rule-soft, #DBE3EE);
  position: relative;
}
.why-carousel::-webkit-scrollbar { display: none; }

.why-slide {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 36px 44px;
  box-sizing: border-box;
  overflow-y: auto;
  max-height: 78vh;
  min-height: 540px;
}
.why-slide::-webkit-scrollbar { width: 6px; }
.why-slide::-webkit-scrollbar-thumb { background: rgba(15,42,74,0.18); border-radius: 3px; }

/* Slide internals — collapse why-demo padding inside slide container */
.why-slide .why-demo { margin: 0; padding: 0; }
.why-slide .why-demo-head { margin-bottom: 12px; }
.why-slide .why-demo-num { font-size: 36px; }
.why-slide .why-demo-head h2 { font-size: 28px; line-height: 1.15; margin: 4px 0 8px; }
.why-slide .why-demo-tag { font-size: 13px; }
.why-slide .why-demo-intro { font-size: 15px; line-height: 1.55; margin-top: 10px; }
.why-slide .why-demo-takeaway { font-size: 14px; line-height: 1.55; margin-top: 18px; padding: 14px 18px; background: rgba(14, 165, 199, 0.06); border-left: 3px solid var(--clinical-cyan-dk, #0EA5C7); border-radius: 6px; }

/* Arrows */
.why-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #fff;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15,42,74,0.10);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1;
}
.why-arrow:hover {
  background: var(--clinical-navy, #0F2A4A);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.why-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}
.why-arrow:disabled:hover {
  background: #fff;
  color: var(--clinical-navy, #0F2A4A);
}
.why-arrow-prev { left: -22px; }
.why-arrow-next { right: -22px; }

@media (max-width: 700px) {
  .why-arrow-prev { left: 8px; }
  .why-arrow-next { right: 8px; }
  .why-slide { padding: 24px 22px; min-height: 480px; max-height: 86vh; }
}

/* Slide counter */
.why-counter {
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--clinical-slate, #4F6477);
  letter-spacing: 0.08em;
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.why-counter strong { color: var(--clinical-navy, #0F2A4A); font-size: 13px; }

/* Scroll hint pulse on first nav-dot */
@keyframes whyHintPulse {
  0%, 80%, 100% { box-shadow: 0 0 0 0 rgba(14,165,199,0); }
  40% { box-shadow: 0 0 0 6px rgba(14,165,199,0.18); }
}
.why-nav-dot.is-active { animation: whyHintPulse 2.6s ease-in-out 2; }

/* Compact stopping-power grid for horizontal slide */
.why-slide .stopping-power-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 14px;
}
.why-slide .sp-card { padding: 16px; }
.why-slide .sp-card h3 { font-size: 14px; margin-bottom: 10px; }
.why-slide .sp-svg { max-width: 180px; margin: 6px auto; }
.why-slide .sp-card-stat { font-size: 22px; margin: 8px 0; }
.why-slide .sp-card-stat span { font-size: 11px; }
.why-slide .sp-card-note { font-size: 12px; line-height: 1.45; }
@media (max-width: 700px) {
  .why-slide .stopping-power-grid { grid-template-columns: 1fr; }
}

/* Compact compensation compare for horizontal slide */
.why-slide .compensation-compare { gap: 18px; margin-top: 14px; }
.why-slide .comp-method { padding: 16px; }
.why-slide .comp-method h3 { font-size: 14px; }
.why-slide .comp-method ul li { font-size: 12px; line-height: 1.5; }

/* Compact MCA toolkit grid for horizontal slide */
.why-slide .mca-toolkit-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.why-slide .mca-tool { padding: 14px; }
.why-slide .mca-tool h4 { font-size: 14px; }
.why-slide .mca-tool p { font-size: 12px; }
@media (max-width: 900px) {
  .why-slide .mca-toolkit-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Decay use grid */
.why-slide .decay-uses-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.why-slide .decay-use { padding: 16px; }

/* ============================================================
   GAMMA-RAY ANIMATIONS — Demo 02 stopping-power crystal SVGs
   ============================================================ */

/* Both rays + flashes share the same 4s cycle so they sync visually */
@keyframes gammaTravel {
  0%   { stroke-dashoffset: 220; opacity: 0; }
  6%   { opacity: 1; }
  38%  { stroke-dashoffset: 0;   opacity: 1; }
  62%  { stroke-dashoffset: 0;   opacity: 0.55; }
  84%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 220; opacity: 0; }
}

/* Absorption flash (Wiper Gold) — cyan starburst at end-of-ray */
@keyframes gammaFlashCyan {
  0%, 36%   { r: 0;  opacity: 0; }
  40%       { r: 9;  opacity: 1; }
  52%       { r: 6;  opacity: 0.85; }
  72%       { r: 4;  opacity: 0.5; }
  88%       { r: 3;  opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}

/* Escape mark (Capintec) — red dot at exit point */
@keyframes gammaEscapeRed {
  0%, 36%   { r: 0;  opacity: 0; }
  42%       { r: 7;  opacity: 1; }
  56%       { r: 5;  opacity: 0.7; }
  78%       { r: 3;  opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}

/* Outer pulse-ring (Wiper Gold absorption — adds power feel) */
@keyframes gammaPulseRing {
  0%, 36%   { r: 0;  opacity: 0; }
  42%       { r: 8;  opacity: 0.7; }
  62%       { r: 16; opacity: 0.3; }
  82%       { r: 24; opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}

/* Apply animation classes — staggered via inline animation-delay */
.gamma-ray {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: gammaTravel 4s ease-out infinite;
}
.gamma-flash-wg {
  fill: #67E8F9;
  animation: gammaFlashCyan 4s ease-out infinite;
}
.gamma-pulse-wg {
  fill: none;
  stroke: #22D3EE;
  stroke-width: 1.4;
  animation: gammaPulseRing 4s ease-out infinite;
}
.gamma-escape-cap {
  fill: #DC2626;
  animation: gammaEscapeRed 4s ease-out infinite;
}

/* Counter badge inside each crystal card (kept legible during animation) */
.gamma-counter {
  display: inline-block;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  margin-top: 8px;
}
.gamma-counter-wg { background: rgba(14, 165, 199, 0.12); color: var(--clinical-cyan-dk, #0EA5C7); }
.gamma-counter-cap { background: rgba(220, 38, 38, 0.10); color: #DC2626; }

/* Replay button on each crystal card */
.gamma-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--clinical-slate, #4F6477);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
.gamma-replay:hover {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #fff;
}

/* Replay key — bumps animation by toggling restart class */
.is-restart .gamma-ray,
.is-restart .gamma-flash-wg,
.is-restart .gamma-pulse-wg,
.is-restart .gamma-escape-cap {
  animation: none;
}

/* ============================================================
   WHY-IT-MATTERS PANEL HEAD + LAYOUT TUNING (added 2026-05-08 pm)
   Goals: bring the carousel above the fold, fit Demo 01 image
   completely inside the slide box.
   ============================================================ */

.why-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.why-panel-head .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0;
  padding: 0;
}
.why-panel-sub { font-size: 13px; color: var(--clinical-slate, #4F6477); margin: 0; }
.why-panel-sub a { color: var(--clinical-cyan-dk, #0EA5C7); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 700px) {
  .why-panel-head { gap: 8px; }
  .why-panel-sub { font-size: 12px; }
}

/* Tighter slide vertical sizing — bring the rail above the fold */
.why-slide { padding: 26px 36px; min-height: 480px; max-height: 72vh; }
@media (max-width: 700px) {
  .why-slide { padding: 22px 22px; min-height: 460px; max-height: 80vh; }
}

/* Demo 01 — fit the chicago image completely inside the slide */
.why-slide #demo-resolution .why-demo-intro { display: none; }
.why-slide #demo-resolution .why-demo-takeaway { display: none; }
.why-slide #demo-resolution .why-demo-head { margin-bottom: 10px; }
.why-slide #demo-resolution .resolution-toggle { gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.why-slide #demo-resolution .res-btn { padding: 7px 14px; font-size: 12px; line-height: 1.25; }
.why-slide #demo-resolution .res-btn-sub { font-size: 10px; opacity: 0.85; }

.why-slide #demo-resolution .resolution-figure {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.why-slide #demo-resolution .resolution-figure img {
  display: block;
  width: 100%;
  max-height: 42vh;
  height: auto;
  object-fit: contain;
  background: #0F2A4A;
}
.why-slide #demo-resolution .resolution-figure figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .why-slide #demo-resolution .resolution-figure img { max-height: 36vh; }
}

/* Demo 02 — keep takeaway visible but compact */
.why-slide #demo-stopping-power .why-demo-intro { font-size: 13px; line-height: 1.45; }
.why-slide #demo-stopping-power .why-demo-intro:nth-of-type(n+2) { display: none; } /* hide second intro paragraph in carousel */

/* Demo 03 — drop the redundant raw/compensated SVG row in carousel (Demo 02 carries the absorbed-vs-escape physics) */
.why-slide #demo-spectrum-compensation .spectrum-compare-block { display: none; }
.why-slide #demo-spectrum-compensation .why-demo-takeaway { display: none; }
.why-slide #demo-spectrum-compensation .why-demo-intro { font-size: 13px; line-height: 1.45; }
.why-slide #demo-spectrum-compensation .compensation-compare ul li { font-size: 12px; }

/* Demo 04 — drop the LCD capture in carousel (it's already on the See It in Action tab) */
.why-slide #demo-mca .real-capture-block { display: none; }
.why-slide #demo-mca .why-demo-takeaway { display: none; }
.why-slide #demo-mca .why-demo-intro { font-size: 13px; line-height: 1.45; }

/* Decay slide */
.why-slide #demo-decay .why-demo-intro { font-size: 13px; line-height: 1.45; }

/* Counter — pull off the rail edge slightly so it sits inside */
.why-counter { top: 14px; right: 18px; font-size: 11px; }
.why-counter strong { font-size: 12px; }

/* ============================================================
   WHY-IT-MATTERS — TALLER SLIDE + DEMO 01 IMAGE-DOMINANT LAYOUT
   (added 2026-05-08 evening — fixes the resolution-image impact loss)
   ============================================================ */

/* Override the previous max-height: 72vh — slides are now tall and dedicated */
.why-slide {
  height: clamp(560px, 80vh, 820px);
  min-height: 560px;
  max-height: 820px;
  padding: 26px 36px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 700px) {
  .why-slide { height: clamp(540px, 88vh, 720px); padding: 22px 22px; }
}

/* Demo 01 — hero treatment: image fills available vertical space */
.why-slide #demo-resolution {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 10px;
}
.why-slide #demo-resolution .why-demo-head {
  flex: 0 0 auto;
  margin: 0;
}
.why-slide #demo-resolution .why-demo-head h2 { font-size: 24px; margin-bottom: 2px; }
.why-slide #demo-resolution .why-demo-head .why-demo-num { font-size: 30px; }
.why-slide #demo-resolution .why-demo-head .why-demo-tag { font-size: 12px; }

/* Pills moved under the image visually — but stay above for accessibility/tab order.
   Use flex order to swap them visually only. */
.why-slide #demo-resolution .resolution-toggle {
  flex: 0 0 auto;
  order: 3;
  margin: 8px 0 0;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.why-slide #demo-resolution .res-btn { padding: 8px 18px; font-size: 12px; }

/* Figure becomes the dominant flex child — fills remaining vertical space */
.why-slide #demo-resolution .resolution-figure {
  order: 2;
  flex: 1 1 auto;
  min-height: 0;          /* critical: allows flex child to shrink below content size */
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #0F2A4A;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(15, 42, 74, 0.20);
}

/* Image: fill width, occupy all remaining height, no upscale beyond intrinsic */
.why-slide #demo-resolution .resolution-figure img {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  object-fit: contain;
  background: #0F2A4A;
  /* Override the prior max-height: 42vh */
  max-height: none !important;
}

/* Caption strip — single tight line so image gets more height */
.why-slide #demo-resolution .resolution-figure figcaption {
  flex: 0 0 auto;
  padding: 10px 18px;
  font-size: 12.5px;
  line-height: 1.45;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Restore intro/takeaway hide rules from prior pass */
.why-slide #demo-resolution .why-demo-intro,
.why-slide #demo-resolution .why-demo-takeaway { display: none; }

/* ============================================================
   DEMO 01 — Pills moved to LEFT column, image grows into the
   freed vertical space (added 2026-05-08 evening).
   Overrides prior flex-column layout.
   ============================================================ */

.why-slide #demo-resolution {
  /* Override prior `display: flex; flex-direction: column` */
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "head head"
    "pills figure";
  gap: 14px 22px;
  flex: 1 1 auto;
  min-height: 0;
}

.why-slide #demo-resolution .why-demo-head {
  grid-area: head;
  margin: 0 0 4px;
  flex: none;
}

.why-slide #demo-resolution .resolution-toggle {
  grid-area: pills;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  margin: 0;
  order: initial;          /* cancel prior `order: 3` */
  width: 100%;
}

.why-slide #demo-resolution .res-btn {
  width: 100%;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border-radius: 12px;
  border: 1.5px solid var(--rule-soft, #DBE3EE);
  background: #fff;
  color: var(--clinical-slate, #4F6477);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  line-height: 1.2;
}
.why-slide #demo-resolution .res-btn:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  color: var(--clinical-navy, #0F2A4A);
  transform: translateX(2px);
}
.why-slide #demo-resolution .res-btn.is-active {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 42, 74, 0.18);
}
.why-slide #demo-resolution .res-btn br { display: none; }
.why-slide #demo-resolution .res-btn-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.78;
  letter-spacing: 0.02em;
  text-transform: none;
}
.why-slide #demo-resolution .res-btn.is-active .res-btn-sub {
  color: var(--clinical-cyan, #67E8F9);
  opacity: 1;
}

.why-slide #demo-resolution .resolution-figure {
  grid-area: figure;
  order: initial;          /* cancel prior `order: 2` */
  flex: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #0F2A4A;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 42, 74, 0.22);
}

.why-slide #demo-resolution .resolution-figure img {
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none !important;
  object-fit: contain;
  background: #0F2A4A;
}

.why-slide #demo-resolution .resolution-figure figcaption {
  flex: 0 0 auto;
  padding: 11px 18px;
  font-size: 13px;
  line-height: 1.45;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Mobile / narrow viewport fallback — stack pills horizontally below image */
@media (max-width: 760px) {
  .why-slide #demo-resolution {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "figure"
      "pills";
    gap: 10px;
  }
  .why-slide #demo-resolution .resolution-toggle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
  }
  .why-slide #demo-resolution .res-btn {
    width: auto;
    text-align: center;
    padding: 8px 14px;
  }
  .why-slide #demo-resolution .res-btn-sub { display: inline; margin-left: 6px; }
}

/* ============================================================
   GAMMA-RAY ANIMATIONS — UPDATED FOR pathLength="100"
   (12 rays in 360° pattern; replaces prior dasharray:220)
   ============================================================ */

.gamma-ray {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: gammaTravelV2 4s ease-out infinite;
}

@keyframes gammaTravelV2 {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { opacity: 1; }
  38%  { stroke-dashoffset: 0;   opacity: 1; }
  62%  { stroke-dashoffset: 0;   opacity: 0.5; }
  84%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

/* Re-tune flash + pulse to match the same 4s cycle as the rays */
.gamma-flash-wg { animation: gammaFlashCyanV2 4s ease-out infinite; }
.gamma-pulse-wg { animation: gammaPulseRingV2 4s ease-out infinite; }
.gamma-escape-cap { animation: gammaEscapeRedV2 4s ease-out infinite; }

@keyframes gammaFlashCyanV2 {
  0%, 36%   { r: 0;  opacity: 0; }
  40%       { r: 9;  opacity: 1; }
  52%       { r: 6;  opacity: 0.85; }
  72%       { r: 4;  opacity: 0.5; }
  88%       { r: 3;  opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}
@keyframes gammaPulseRingV2 {
  0%, 36%   { r: 0;  opacity: 0; }
  42%       { r: 8;  opacity: 0.65; }
  62%       { r: 18; opacity: 0.25; }
  82%       { r: 28; opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}
@keyframes gammaEscapeRedV2 {
  0%, 36%   { r: 0;  opacity: 0; }
  42%       { r: 6;  opacity: 0.95; }
  56%       { r: 4;  opacity: 0.6; }
  78%       { r: 3;  opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}

/* ============================================================
   DEMO 02 SVG SIZE BUMP + WHITE/YELLOW ABSORPTION FLASH
   (added 2026-05-08 evening — fixes wasted whitespace + adds drama)
   ============================================================ */

/* Bigger SVG inside each crystal card — fills card width up to height cap */
.why-slide .sp-card {
  padding: 14px 16px 12px;
}
.why-slide .sp-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
  margin: 4px auto 6px;
}
.why-slide .sp-card h3 {
  font-size: 13px;
  margin: 0 0 6px;
  line-height: 1.3;
}
.why-slide .sp-card-stat {
  margin: 6px 0 4px;
  font-size: 24px;
  line-height: 1.1;
}
.why-slide .sp-card-stat span {
  display: block;
  font-size: 11px;
  margin-top: 2px;
}
.why-slide .sp-card-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* WHITE → YELLOW → CYAN absorption flash (override prior all-cyan keyframes) */
@keyframes gammaFlashCyanV2 {
  0%, 36%   { r: 0;  opacity: 0; fill: #FFFFFF; }
  39%       { r: 6;  opacity: 1; fill: #FFFFFF; }    /* peak: brilliant white */
  44%       { r: 12; opacity: 1; fill: #FEF08A; }    /* yellow flash */
  52%       { r: 9;  opacity: 0.9; fill: #FCD34D; }  /* deep amber */
  68%       { r: 6;  opacity: 0.6; fill: #67E8F9; }  /* cool to cyan */
  84%       { r: 4;  opacity: 0.25; fill: #67E8F9; }
  100%      { r: 0;  opacity: 0; fill: #67E8F9; }
}

/* Bigger pulse ring to amplify the flash */
@keyframes gammaPulseRingV2 {
  0%, 36%   { r: 0;  opacity: 0; stroke: #FEF08A; }
  42%       { r: 10; opacity: 0.85; stroke: #FFFFFF; }
  56%       { r: 22; opacity: 0.45; stroke: #FCD34D; }
  74%       { r: 32; opacity: 0.15; stroke: #67E8F9; }
  90%       { r: 38; opacity: 0; }
  100%      { r: 0;  opacity: 0; }
}

/* Make sure the ring's stroke gets animated (default stroke from inline still applies) */
.gamma-pulse-wg { stroke-width: 1.6; }

/* ============================================================
   DEMO 02 — DASHED CYAN RAYS + YELLOW AFTERGLOW + BIGGER FIT
   (added 2026-05-08 evening — third pass)
   ============================================================ */

/* Hide the slide takeaway and second intro to free vertical room for SVGs */
.why-slide #demo-stopping-power .why-demo-takeaway { display: none; }
.why-slide #demo-stopping-power .why-demo-intro { font-size: 12px; line-height: 1.4; margin-bottom: 8px; }

/* Bump SVG size — now fills card width since viewBox is wider (280x260, aspect 1.08) */
.why-slide .sp-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 500px;
  display: block;
  margin: 4px auto 6px;
}
.why-slide .sp-card { padding: 12px 14px; }

/* DASHED CYAN RAYS — discrete photon-packet appearance, marching toward impact */
.gamma-ray-stopped {
  stroke-dasharray: 5 4;
  stroke-dashoffset: 100;
  fill: none;
  animation: gammaPhotonMarch 4s linear infinite;
}
@keyframes gammaPhotonMarch {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  6%   { opacity: 1; }
  35%  { stroke-dashoffset: 0;   opacity: 1; }     /* arrives at impact */
  40%  { stroke-dashoffset: -8;  opacity: 0.9; }   /* flash takes over */
  60%  { stroke-dashoffset: -36; opacity: 0.5; }   /* dashes keep marching, fading */
  85%  { stroke-dashoffset: -75; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* WHITE → YELLOW → CYAN flash — longer yellow phase for visible afterglow */
@keyframes gammaFlashCyanV2 {
  0%, 36%   { r: 0;  opacity: 0; fill: #FFFFFF; }
  39%       { r: 8;  opacity: 1; fill: #FFFFFF; }     /* white peak */
  43%       { r: 14; opacity: 1; fill: #FEF9C3; }     /* white-yellow expansion */
  50%       { r: 17; opacity: 1; fill: #FCD34D; }     /* peak amber */
  62%       { r: 15; opacity: 0.9; fill: #FCD34D; }   /* hold yellow */
  74%       { r: 12; opacity: 0.65; fill: #FBBF24; }  /* deeper amber */
  86%       { r: 9;  opacity: 0.35; fill: #67E8F9; }  /* cool to cyan late */
  95%       { r: 6;  opacity: 0.12; }
  100%      { r: 0;  opacity: 0; }
}

/* YELLOW AFTERGLOW HALO — slow-fading yellow ring outside the bright flash */
.gamma-glow-wg {
  fill: #FCD34D;
  animation: gammaYellowAfterglow 4s ease-out infinite;
  opacity: 0;
}
@keyframes gammaYellowAfterglow {
  0%, 38%   { r: 0;  opacity: 0; fill: #FEF08A; }
  44%       { r: 18; opacity: 0.55; fill: #FEF08A; }
  56%       { r: 26; opacity: 0.45; fill: #FCD34D; }
  72%       { r: 34; opacity: 0.30; fill: #FCD34D; }
  86%       { r: 40; opacity: 0.15; fill: #FBBF24; }
  96%       { r: 44; opacity: 0;    fill: #FBBF24; }
  100%      { r: 0;  opacity: 0; }
}

/* OUTER PULSE RING — bright white at peak, drifts amber, finishes cyan */
@keyframes gammaPulseRingV2 {
  0%, 36%   { r: 0;  opacity: 0; stroke: #FFFFFF; }
  42%       { r: 11; opacity: 0.9; stroke: #FFFFFF; }
  56%       { r: 24; opacity: 0.5; stroke: #FCD34D; }
  74%       { r: 36; opacity: 0.18; stroke: #FBBF24; }
  90%       { r: 44; opacity: 0; stroke: #67E8F9; }
  100%      { r: 0;  opacity: 0; }
}
.gamma-pulse-wg { stroke-width: 1.8; fill: none; }

/* ============================================================
   GAMMA-RAY DASHED PATTERN — bigger dashes + SMIL takeover
   (added 2026-05-08 evening — fourth pass)
   ============================================================ */

/* Bump the cyan ray dash pattern so dashes read clearly even on shorter rays */
.gamma-ray-stopped {
  stroke-dasharray: 10 5 !important;  /* was 5 4 — too small to see; 10 5 reads as proper dashes */
}

/* SMIL handles flash/glow/pulse animations now — disable any CSS animation conflicts */
.gamma-flash-wg { animation: none !important; }
.gamma-glow-wg  { animation: none !important; }
.gamma-pulse-wg { animation: none !important; }

/* ============================================================
   DEMO 03 — ASYMMETRIC LAYOUT
   Capintec 1/3, AutoSpect 2/3 — reinforces market dominance,
   recovers vertical space by eliminating Capintec whitespace.
   (added 2026-05-08 evening)
   ============================================================ */

.why-slide .compensation-compare {
  grid-template-columns: 1fr 2fr;
  gap: 18px;
  margin: 14px 0 12px;
  align-items: start;
}
@media (max-width: 900px) {
  .why-slide .compensation-compare { grid-template-columns: 1fr; }
}

/* Capintec card — visually de-emphasized, tighter type, dimmer */
.why-slide .comp-method-old {
  opacity: 0.78;
  background: #F8FAFC;
  border: 1px solid var(--rule-soft, #DBE3EE);
  padding: 14px 14px 12px;
}
.why-slide .comp-method-old h3 { font-size: 13px; line-height: 1.3; }
.why-slide .comp-method-old .comp-method-tag {
  font-size: 10px;
  color: #94A3B8;
  margin-bottom: 8px;
}
.why-slide .comp-method-old ul li { font-size: 11.5px; line-height: 1.45; padding: 6px 0 6px 18px; }
.why-slide .comp-method-old .comp-method-result { font-size: 11.5px; line-height: 1.45; margin-top: 10px; }

/* AutoSpect card — full intensity, breathing room, the dominant element */
.why-slide .comp-method-new {
  padding: 18px 22px 16px;
  border-width: 1.5px;
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(14, 165, 199, 0.10);
}
.why-slide .comp-method-new h3 {
  font-size: 16px;
  line-height: 1.25;
  color: var(--clinical-navy, #0F2A4A);
}
.why-slide .comp-method-new .comp-method-tag {
  font-size: 11px;
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.why-slide .comp-method-new ul li {
  font-size: 12.5px;
  line-height: 1.55;
  padding: 8px 0 8px 20px;
}
.why-slide .comp-method-new .comp-method-result {
  font-size: 13px;
  line-height: 1.5;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(14, 165, 199, 0.06);
  border-left: 3px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 6px 6px 0;
}

/* ============================================================
   DEMO 04 — MCA SCREEN MOCKUP GRID
   Six LCD-style mockups in 3×2 grid, each demonstrating a PHA tool.
   (added 2026-05-08 evening)
   ============================================================ */

.mca-screens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0 14px;
}
@media (max-width: 1000px) {
  .mca-screens-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mca-screens-grid { grid-template-columns: 1fr; }
}

.mca-screen-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.mca-screen-card:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  box-shadow: 0 8px 22px rgba(14, 165, 199, 0.12);
  transform: translateY(-1px);
}

.mca-screen-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  background: #0F2A4A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.mca-screen-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 4px 0 0;
  line-height: 1.3;
}
.mca-screen-card p {
  font-size: 12px;
  line-height: 1.45;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}

/* Inside the carousel slide — keep the grid compact */
.why-slide #demo-mca .mca-screens-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 10px 0 10px;
}
@media (max-width: 1000px) {
  .why-slide #demo-mca .mca-screens-grid { grid-template-columns: repeat(2, 1fr); }
}
.why-slide #demo-mca .mca-screen-card { padding: 10px; gap: 6px; }
.why-slide #demo-mca .mca-screen-card h4 { font-size: 12.5px; margin: 2px 0 0; }
.why-slide #demo-mca .mca-screen-card p { font-size: 11px; line-height: 1.4; }
.why-slide #demo-mca .why-demo-intro { font-size: 12px; line-height: 1.45; margin-bottom: 6px; }

/* ============================================================
   MCA SCREEN STYLE — UPDATED to match real Wiper Gold display
   (white background, black pixelated content, 1-bit aesthetic)
   ============================================================ */

.mca-screen-svg {
  background: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px #E5E7EB, 0 1px 2px rgba(0,0,0,0.06) !important;
  border-radius: 2px;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Card background subtly contrasts so the white screen pops as "an LCD on a bezel" */
.mca-screen-card {
  background: #F4F6F9;
}
.mca-screen-card:hover {
  background: #FFFFFF;
}

/* ============================================================
   DEMO 04 — REAL MCA SCREEN CAPTURES
   Replaces the SVG mockups with actual Wiper Gold serial-port grabs
   (added 2026-05-08 evening)
   ============================================================ */

.mca-screen-shot {
  display: block;
  width: 100%;
  background: #FFFFFF;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #E5E7EB, 0 1px 2px rgba(0,0,0,0.06);
  border: 1px solid #1A1A1A;
}
.mca-screen-shot img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Keypad shortcut chip — small monospace badge next to each h4 */
.mca-key {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clinical-cyan-dk, #0EA5C7);
  background: rgba(14, 165, 199, 0.08);
  border: 1px solid rgba(14, 165, 199, 0.30);
  border-radius: 999px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* code element inside the description (e.g., FWHM formula) */
.mca-screen-card p code {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: #F4F6F9;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--rule-soft, #DBE3EE);
}

/* ============================================================
   DECAY CALCULATOR — REAL-WORKFLOW SLIDESHOW (Demo +1)
   Auto-cycling LCD images with manual controls (added 2026-05-08)
   ============================================================ */

.decay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .decay-layout { grid-template-columns: 1fr; gap: 18px; }
}

/* SLIDESHOW PANEL */
.decay-slideshow {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.decay-screen-frame {
  background: #F4F6F9;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 2px 6px rgba(15, 42, 74, 0.05);
}

.decay-stage {
  position: relative;
  width: 100%;
  /* aspect-ratio: 5/4 to match real LCD; fallback for older browsers */
  aspect-ratio: 5 / 4;
  background: #FFFFFF;
  border: 1.5px solid #1A1A1A;
  border-radius: 4px;
  overflow: hidden;
}

.decay-step {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.decay-step.is-active {
  opacity: 1;
  pointer-events: auto;
}
.decay-step img,
.decay-step .decay-counting-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #FFFFFF;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Step counter + caption */
.decay-step-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 4px;
}
.decay-step-counter {
  flex: 0 0 auto;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--clinical-slate, #4F6477);
  padding: 6px 12px;
  background: rgba(14, 165, 199, 0.06);
  border: 1px solid rgba(14, 165, 199, 0.20);
  border-radius: 999px;
  white-space: nowrap;
}
.decay-step-counter strong {
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-size: 16px;
}
.decay-step-counter .of { opacity: 0.5; margin: 0 4px; }
.decay-step-caption {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  padding-top: 4px;
}
.decay-step-caption strong {
  color: var(--clinical-navy, #0F2A4A);
}

/* Controls row */
.decay-slideshow-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  flex-wrap: wrap;
}
.decay-ctrl {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.decay-ctrl:hover {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
}
.decay-ctrl-play[data-state="paused"] svg { display: none; }
.decay-ctrl-play[data-state="paused"]::before {
  content: "▶";
  font-size: 12px;
  margin-left: 1px;
}
.decay-ctrl-play[data-state="playing"]::before { display: none; }

.decay-dots {
  display: inline-flex;
  gap: 6px;
  margin-left: 4px;
  flex-wrap: wrap;
}
.decay-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.decay-dot:hover { border-color: var(--clinical-cyan-dk, #0EA5C7); }
.decay-dot.is-active {
  background: var(--clinical-cyan-dk, #0EA5C7);
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  transform: scale(1.2);
}

/* RIGHT-HAND USE-CASE STACK (compact) */
.decay-uses-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.decay-uses-intro {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 4px;
  color: var(--clinical-slate, #4F6477);
}
.decay-uses-stack .decay-use {
  padding: 12px 14px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.decay-uses-stack .decay-num {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.decay-uses-stack .decay-use h4 {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--clinical-navy, #0F2A4A);
}
.decay-uses-stack .decay-use p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--clinical-slate, #4F6477);
}

/* Slide-context size adjustments */
.why-slide #demo-decay .why-demo-tag { font-size: 12.5px; }
.why-slide #demo-decay .decay-uses-intro { font-size: 12px; }
.why-slide #demo-decay .decay-uses-stack .decay-use h4 { font-size: 12.5px; }
.why-slide #demo-decay .decay-uses-stack .decay-use p { font-size: 11.5px; }
.why-slide #demo-decay .decay-step-caption { font-size: 12px; }
.why-slide #demo-decay .decay-step-counter { font-size: 12px; padding: 4px 10px; }
.why-slide #demo-decay .decay-step-counter strong { font-size: 14px; }

/* ============================================================
   GENESYS COUNTERS LANDING PAGE — added 2026-05-08 evening
   Three-tab merged page (Gamma 1 / Genii / Genii HE) + recommender modal
   ============================================================ */

/* Outer tab strip — uses .tab-nav from existing system, scoped */
.genesys-tabs .tab-nav-wrap {
  background: #FFFFFF;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
  position: sticky;
  top: 0;
  z-index: 8;
}

.genesys-tabs .tab-panel { padding: 36px 0 48px; }
.genesys-tabs .tab-panel:not(.is-active) { display: none; }

/* Recommender CTA banner — sits between tabs and panel content */
.genesys-recommender-cta {
  background: linear-gradient(135deg, var(--clinical-navy, #0F2A4A) 0%, #133254 100%);
  color: #FFFFFF;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.recommender-cta-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
}
@media (max-width: 800px) {
  .recommender-cta-card { grid-template-columns: 1fr; gap: 18px; }
}
.recommender-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #67E8F9);
  margin-bottom: 8px;
}
.recommender-cta-text h2 {
  font-size: 26px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 10px;
  line-height: 1.2;
}
.recommender-cta-text p {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  margin: 0;
}
.recommender-cta-action { text-align: right; }
@media (max-width: 800px) {
  .recommender-cta-action { text-align: left; }
}
.recommender-cta-action .btn-lg {
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 700;
}
.recommender-cta-fineprint {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-style: italic;
}

/* Per-model summary panel layout (Gamma 1 / Genii / Genii HE tabs) */
.genesys-summary-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .genesys-summary-grid { grid-template-columns: 1fr; gap: 24px; }
}
.genesys-summary-text .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 6px;
}
.genesys-summary-text h2 {
  font-size: 32px;
  margin: 0 0 12px;
  line-height: 1.15;
  color: var(--clinical-navy, #0F2A4A);
}
.genesys-summary-text .lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0 0 20px;
}
.summary-section-h {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clinical-navy, #0F2A4A);
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
}
.summary-list {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
}
.summary-list li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  border-bottom: 1px dotted var(--rule-soft, #DBE3EE);
}
.summary-list li:last-child { border-bottom: none; }
.summary-list li::before {
  content: '';
  position: absolute;
  left: 4px; top: 14px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clinical-cyan-dk, #0EA5C7);
}

.genesys-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 13.5px;
}
.genesys-spec-table th, .genesys-spec-table td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
  line-height: 1.45;
}
.genesys-spec-table th {
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  background: #F4F6F9;
  width: 40%;
}
.genesys-spec-table td { color: var(--clinical-slate, #4F6477); }

.genesys-summary-cta {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.genesys-summary-media {
  position: sticky;
  top: 100px;
}
.genesys-summary-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 42, 74, 0.12);
}
.genesys-summary-cap {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  padding: 12px 14px;
  background: rgba(14, 165, 199, 0.05);
  border-left: 3px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 6px 6px 0;
}

.genesys-he-callout {
  margin: 18px 0 6px;
  padding: 14px 18px;
  background: rgba(14, 165, 199, 0.08);
  border-left: 4px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}

/* ============================================================
   RECOMMENDER MODAL
   ============================================================ */
.recommender-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.recommender-modal.is-open {
  visibility: visible;
  opacity: 1;
}
.recommender-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 74, 0.65);
  backdrop-filter: blur(2px);
}
.recommender-dialog {
  position: relative;
  margin: 5vh auto;
  width: min(720px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.32);
  padding: 36px 36px 28px;
}
@media (max-width: 600px) {
  .recommender-dialog { padding: 28px 22px 22px; margin: 3vh auto; }
}
.recommender-close {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  font-size: 22px;
  line-height: 1;
  color: var(--clinical-slate, #4F6477);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recommender-close:hover {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  border-color: var(--clinical-navy, #0F2A4A);
}

.recommender-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
}
.recommender-progress-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clinical-slate, #4F6477);
  white-space: nowrap;
}
.recommender-progress-label strong {
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-size: 13px;
}
.recommender-progress-bar {
  flex: 1 1 auto;
  height: 4px;
  background: var(--rule-soft, #DBE3EE);
  border-radius: 999px;
  overflow: hidden;
}
.recommender-progress-fill {
  height: 100%;
  background: var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 999px;
  transition: width 0.28s ease;
}

.recommender-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--clinical-slate, #4F6477);
  margin: 0 0 22px;
}

.recommender-step { display: none; }
.recommender-step.is-active { display: block; }
.recommender-step h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 8px;
}
.recommender-help {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  margin: 0 0 20px;
}

.recommender-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.recommender-options-tall { grid-template-columns: 1fr; }
.recommender-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #FFFFFF;
  border: 1.5px solid var(--rule-soft, #DBE3EE);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--clinical-navy, #0F2A4A);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  width: 100%;
}
.recommender-option:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  background: rgba(14, 165, 199, 0.04);
  transform: translateY(-1px);
}
.recommender-option:focus-visible {
  outline: 2px solid var(--clinical-cyan-dk, #0EA5C7);
  outline-offset: 2px;
}
.ro-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ro-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ro-text strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
}
.ro-text span {
  font-size: 12px;
  color: var(--clinical-slate, #4F6477);
  line-height: 1.4;
}

.recommender-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
}

/* RESULT panel */
.recommender-result h3 { margin-bottom: 14px; }
.rec-product {
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 800;
}
.rec-reason {
  font-size: 14px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 12px 0;
}
.rec-reason strong { color: var(--clinical-navy, #0F2A4A); }
.rec-savings {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
  background: rgba(14, 165, 199, 0.08);
  border-left: 4px solid var(--clinical-cyan-dk, #0EA5C7);
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  margin: 16px 0;
}

.rec-time-table {
  margin: 16px 0;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 10px;
  overflow: hidden;
}
.rec-time-row {
  display: grid;
  grid-template-columns: 130px 1fr 90px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
}
.rec-time-row:last-child { border-bottom: none; }
.rec-time-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
}
.rec-time-bar {
  flex: 1;
  height: 14px;
  background: #F4F6F9;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.rec-time-fill {
  display: block;
  height: 100%;
  background: var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.rec-time-val {
  font-family: ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  text-align: right;
}
@media (max-width: 600px) {
  .rec-time-row { grid-template-columns: 100px 1fr 70px; padding: 8px 12px; gap: 8px; }
  .rec-time-label { font-size: 12px; }
  .rec-time-val { font-size: 11.5px; }
}

.recommender-result-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
}

/* ============================================================
   GENESYS COUNTERS v2 — SINGLE-NARRATIVE LAYOUT
   Brochure-style flowing sections (replaces v1 tabbed approach)
   ============================================================ */

.genesys-section {
  padding: 64px 0;
}
.genesys-section-light { background: #F4F6F9; }
.genesys-section-dark {
  background: linear-gradient(180deg, var(--clinical-navy, #0F2A4A) 0%, #133254 100%);
  color: #FFFFFF;
}

.genesys-section-head {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}
.genesys-section-head .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 10px;
}
.genesys-section-head h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--clinical-navy, #0F2A4A);
}
.genesys-section-head .lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}
.genesys-section-head-light .eyebrow { color: var(--clinical-cyan, #67E8F9); }
.genesys-section-head-light h2 { color: #FFFFFF; }
.genesys-section-head-light .lede { color: rgba(255,255,255,0.8); }

/* Quality grid (Section 1) */
.genesys-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}
.genesys-quality-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 12px;
  padding: 22px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.genesys-quality-card:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  transform: translateY(-2px);
}
.genesys-quality-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 10px;
}
.genesys-quality-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}

/* Detector grid (Section 2) */
.genesys-detector-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 800px) {
  .genesys-detector-grid { grid-template-columns: 1fr; gap: 24px; }
}
.genesys-detector-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.genesys-detector-cap {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  font-style: italic;
}
.genesys-detector-points {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.genesys-detector-point {
  padding: 16px 18px;
  background: #F4F6F9;
  border-left: 3px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 8px 8px 0;
}
.genesys-detector-point h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
}
.genesys-detector-point p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}

/* Footnotes (used in detector section + curve fits section) */
.genesys-footnotes {
  max-width: 880px;
  margin: 32px auto 0;
  padding: 16px 20px;
  background: #FFFAEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
}
.genesys-footnotes p {
  font-size: 12.5px;
  line-height: 1.55;
  color: #78350F;
  margin: 0 0 6px;
}
.genesys-footnotes p:last-child { margin-bottom: 0; }
.genesys-footnotes sup {
  font-weight: 700;
  color: #B45309;
  margin-right: 2px;
}
.footnote-ref {
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-weight: 700;
  cursor: help;
}

/* Value grid (Section 3) */
.genesys-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.genesys-value-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 12px;
  padding: 22px;
  position: relative;
}
.genesys-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 165, 199, 0.10);
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}
.genesys-value-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 8px;
}
.genesys-value-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}

/* Features grid (Section 4) */
.genesys-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.genesys-feature {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 12px;
  padding: 20px 22px;
}
.genesys-feature h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 10px;
  line-height: 1.3;
}
.genesys-feature p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}
.genesys-feature p strong { color: var(--clinical-navy, #0F2A4A); }

/* Compare grid (Section 5 — dark theme) */
.genesys-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .genesys-compare-grid { grid-template-columns: 1fr; }
}
.genesys-compare-card {
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
  border-radius: 14px;
  padding: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.20);
}
.genesys-compare-card-feature {
  border: 2.5px solid var(--clinical-cyan, #67E8F9);
  transform: translateY(-8px);
}
@media (max-width: 900px) {
  .genesys-compare-card-feature { transform: none; }
}
.genesys-compare-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--clinical-cyan, #67E8F9);
  color: var(--clinical-navy, #0F2A4A);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.genesys-compare-card-head h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
  line-height: 1.25;
}
.genesys-compare-card-head p {
  font-size: 13px;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}
.genesys-compare-spec {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.genesys-compare-spec li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 12.5px;
  border-bottom: 1px dotted var(--rule-soft, #DBE3EE);
  gap: 8px;
}
.genesys-compare-spec li:last-child { border-bottom: none; }
.genesys-compare-spec li strong {
  font-size: 12px;
  font-weight: 600;
  color: var(--clinical-slate, #4F6477);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.genesys-compare-spec li span {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  text-align: right;
}
.genesys-compare-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
  flex: 1;
}
.btn-block {
  display: block;
  text-align: center;
  margin-top: auto;
}
.genesys-compare-footer {
  margin-top: 36px;
  text-align: center;
  color: rgba(255,255,255,0.9);
}
.genesys-compare-footer p {
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.genesys-compare-footer p strong { color: var(--clinical-cyan, #67E8F9); }

/* Full specs table (Section 6) */
.genesys-specs-wrap {
  max-width: 1080px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(15, 42, 74, 0.06);
}
.genesys-full-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.genesys-full-specs thead {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
}
.genesys-full-specs thead th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.genesys-full-specs tbody th {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  background: #F4F6F9;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
  width: 22%;
}
.genesys-full-specs tbody td {
  padding: 12px 16px;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.genesys-full-specs tbody tr:last-child th,
.genesys-full-specs tbody tr:last-child td {
  border-bottom: none;
}
.spec-cell-diff {
  background: rgba(14, 165, 199, 0.06) !important;
  color: var(--clinical-navy, #0F2A4A) !important;
  font-weight: 500;
}
.spec-cell-diff strong { color: var(--clinical-cyan-dk, #0EA5C7); }
.spec-cell-same {
  font-style: italic;
  color: var(--clinical-slate, #4F6477);
  text-align: center;
}
@media (max-width: 700px) {
  .genesys-full-specs { font-size: 12.5px; }
  .genesys-full-specs thead th,
  .genesys-full-specs tbody th,
  .genesys-full-specs tbody td { padding: 10px 12px; }
}

/* ============================================================
   GENESYS COUNTERS v3 — TABBED LAYOUT + NEW COMPONENTS
   Added 2026-05-11: Hamamatsu callout, Wizard competitor cards
   ============================================================ */

/* When sections render inside .tab-panel they don't need outer padding */
.tab-panel .genesys-section { padding: 0; background: transparent; }
.tab-panel .genesys-section-head { margin-bottom: 28px; }

/* HAMAMATSU PMT CALLOUT — dark navy panel emphasizing the differentiator */
.genesys-pmt-callout {
  margin: 36px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--clinical-navy, #0F2A4A) 0%, #133254 100%);
  color: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 42, 74, 0.18);
}
.genesys-pmt-callout-text .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #67E8F9);
  margin-bottom: 10px;
}
.genesys-pmt-callout-text h3 {
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 12px;
  line-height: 1.25;
}
.genesys-pmt-callout-text p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 10px;
}
.genesys-pmt-callout-text p:last-child { margin-bottom: 0; }
.genesys-pmt-callout-text strong { color: var(--clinical-cyan, #67E8F9); }
.genesys-pmt-callout-text em { color: #FCD34D; font-style: italic; }

/* COMPETITOR COMPARISON CARDS — Wizard vs Genesys */
.genesys-competitor-compare {
  margin: 32px 0;
}
.genesys-competitor-compare .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 8px;
}
.genesys-competitor-compare h3 {
  font-size: 22px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 18px;
  line-height: 1.25;
}
.competitor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 16px 0;
}
@media (max-width: 800px) {
  .competitor-grid { grid-template-columns: 1fr; }
}
.competitor-card {
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
}
.competitor-card h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.competitor-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.competitor-card ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
}
.competitor-card ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 13px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.competitor-card-them h4 { color: #94A3B8; }
.competitor-card-them ul li em { color: #DC2626; font-style: italic; }
.competitor-card-them ul li::before { background: #94A3B8; }
.competitor-card-us {
  background: rgba(14, 165, 199, 0.04);
  border: 1.5px solid var(--clinical-cyan-dk, #0EA5C7);
}
.competitor-card-us h4 { color: var(--clinical-cyan-dk, #0EA5C7); }
.competitor-card-us ul li::before { background: var(--clinical-cyan-dk, #0EA5C7); }
.competitor-card-us ul li strong { color: var(--clinical-navy, #0F2A4A); }
.competitor-takeaway {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: rgba(14, 165, 199, 0.06);
  border-left: 3px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--clinical-navy, #0F2A4A);
}
.competitor-takeaway strong { color: var(--clinical-cyan-dk, #0EA5C7); }

/* COMPARE-MODELS TAB — light variant of footer */
.genesys-compare-footer-light {
  margin-top: 28px;
  padding: 24px;
  background: #F4F6F9;
  border-radius: 12px;
  text-align: center;
}
.genesys-compare-footer-light p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--clinical-slate, #4F6477);
  margin: 0 0 14px;
}
.genesys-compare-footer-light p strong { color: var(--clinical-navy, #0F2A4A); }

/* ============================================================
   GENESYS COUNTERS — HORIZONTAL SCROLL-SNAP CAROUSEL
   (Compare Models tab — added 2026-05-11)
   Replaces the 3-column grid with side-to-side scroll motion
   ============================================================ */

.genesys-carousel-wrap {
  position: relative;
  margin: 24px 0 16px;
}

/* Pill nav above the rail */
.genesys-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.genesys-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  color: var(--clinical-slate, #4F6477);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.genesys-nav-pill:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  color: var(--clinical-navy, #0F2A4A);
  transform: translateY(-1px);
}
.genesys-nav-pill.is-active {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
}
.genesys-nav-pill .pill-num {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.genesys-nav-pill.is-active .pill-num { opacity: 1; color: #67E8F9; }

/* Counter top-right */
.genesys-counter {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--clinical-slate, #4F6477);
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.92);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.genesys-counter strong { color: var(--clinical-navy, #0F2A4A); font-size: 13px; }
.genesys-counter .of { opacity: 0.5; margin: 0 4px; }

/* Carousel rail */
.genesys-carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F8 100%);
  border: 1px solid var(--rule-soft, #DBE3EE);
  padding: 32px 0;
}
.genesys-carousel::-webkit-scrollbar { display: none; }

.genesys-slide {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 0 64px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .genesys-slide { padding: 0 40px; }
}

/* Inside the slide, the card itself */
.genesys-slide .genesys-compare-card {
  width: 100%;
  max-width: 520px;
  box-shadow: 0 12px 40px rgba(15, 42, 74, 0.10);
}

/* Arrows */
.genesys-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 42, 74, 0.10);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  font-family: -apple-system, system-ui, sans-serif;
  line-height: 1;
}
.genesys-arrow:hover {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.05);
}
.genesys-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}
.genesys-arrow:disabled:hover {
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
}
.genesys-arrow-prev { left: -20px; }
.genesys-arrow-next { right: -20px; }
@media (max-width: 700px) {
  .genesys-arrow-prev { left: 6px; }
  .genesys-arrow-next { right: 6px; }
}

/* ============================================================
   GENERIC GX-CAROUSEL — used on ALL tab panels (added 2026-05-11)
   Same pattern as .genesys-carousel but generalized for reuse
   across Overview, Detector, Value, Software tabs.
   ============================================================ */

.gx-carousel-wrap {
  position: relative;
  margin: 24px 0 16px;
}

/* Pill nav above the rail */
.gx-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.gx-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  color: var(--clinical-slate, #4F6477);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.gx-nav-pill:hover {
  border-color: var(--clinical-cyan-dk, #0EA5C7);
  color: var(--clinical-navy, #0F2A4A);
  transform: translateY(-1px);
}
.gx-nav-pill.is-active {
  background: var(--clinical-navy, #0F2A4A);
  border-color: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
}
.gx-nav-pill .pill-num {
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  opacity: 0.7;
}
.gx-nav-pill.is-active .pill-num { opacity: 1; color: #67E8F9; }

/* Counter top-right */
.gx-counter {
  position: absolute;
  top: 14px;
  right: 22px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--clinical-slate, #4F6477);
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.92);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}
.gx-counter strong { color: var(--clinical-navy, #0F2A4A); font-size: 13px; }
.gx-counter .of { opacity: 0.5; margin: 0 4px; }

/* Rail */
.gx-carousel {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F8 100%);
  border: 1px solid var(--rule-soft, #DBE3EE);
}
.gx-carousel::-webkit-scrollbar { display: none; }

.gx-slide {
  flex: 0 0 100%;
  min-width: 100%;
  max-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: 32px 56px;
  box-sizing: border-box;
  min-height: 380px;
  display: flex;
  /* Anchor content to the top of the slide instead of vertically centering.
     All slides in a carousel stretch to match the tallest one — centering
     on the shorter slides left big empty space above the content,
     especially noticeable on mobile where each slide fills the viewport. */
  align-items: flex-start;
}
@media (max-width: 700px) { .gx-slide { padding: 24px 28px; min-height: 360px; } }

.gx-slide-inner {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.gx-slide-num {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--clinical-cyan-dk, #0EA5C7);
  letter-spacing: 0.10em;
  margin-bottom: 8px;
}
.gx-slide-inner h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 14px;
  line-height: 1.2;
}
.gx-slide-inner p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--clinical-slate, #4F6477);
  margin: 0 0 12px;
}
.gx-slide-inner p:last-child { margin-bottom: 0; }
.gx-slide-inner p strong { color: var(--clinical-navy, #0F2A4A); }
.gx-slide-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 6px;
}

/* Image-bearing slides (Software tab + Detector tab) */
.gx-slide-with-image {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  max-width: 940px;
}
@media (max-width: 800px) {
  .gx-slide-with-image { grid-template-columns: 1fr; gap: 18px; }
}
.gx-slide-image {
  width: 100%;
}
.gx-slide-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
/* Inline SVG illustrations inside slide images (overview tab graphics).
   No pixelated rendering — these are vector concept illustrations. */
.gx-slide-image svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 480px;
}
.gx-slide-image .lcd-frame { background: #FFFFFF; padding: 8px; border-radius: 8px; border: 1px solid #1A1A1A; }
.gx-slide-image .lcd-frame img { border-radius: 2px; image-rendering: pixelated; }

/* Icon-big slides (Value & Service tab) */
.gx-slide-icon-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(14, 165, 199, 0.10);
  color: var(--clinical-cyan-dk, #0EA5C7);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 18px;
}

/* PMT callout slide variant (dark) */
.gx-slide-pmt {
  background: linear-gradient(135deg, var(--clinical-navy, #0F2A4A) 0%, #133254 100%);
  color: #FFFFFF;
  padding: 28px 32px;
  border-radius: 14px;
  width: 100%;
  max-width: 760px;
}
.gx-slide-pmt h3 { color: #FFFFFF; }
.gx-slide-pmt p { color: rgba(255,255,255,0.85); }
.gx-slide-pmt p strong { color: var(--clinical-cyan, #67E8F9); }
.gx-slide-pmt p em { color: #FCD34D; font-style: italic; }
.gx-slide-pmt .gx-slide-eyebrow { color: var(--clinical-cyan, #67E8F9); }

/* Inline footnote inside a slide */
.gx-footnote-inline {
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #B45309 !important;
  background: #FFFAEB;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 8px 12px !important;
  margin-top: 14px !important;
}

/* Lead spec grid (Detector tab slide 4) */
.lead-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 22px;
}
@media (max-width: 600px) { .lead-spec-grid { grid-template-columns: 1fr; } }
.lead-spec-card {
  padding: 18px 14px;
  background: #F4F6F9;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 10px;
  text-align: center;
}
.lead-spec-card-feature {
  background: rgba(14, 165, 199, 0.06);
  border: 1.5px solid var(--clinical-cyan-dk, #0EA5C7);
}
.lead-spec-num {
  font-family: ui-monospace, monospace;
  font-size: 28px;
  font-weight: 800;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1;
}
.lead-spec-card-feature .lead-spec-num { color: var(--clinical-cyan-dk, #0EA5C7); }
.lead-spec-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clinical-slate, #4F6477);
  margin: 6px 0 8px;
}
.lead-spec-model {
  font-size: 13px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
}

/* Arrows (reused style from .genesys-arrow) */
.gx-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--rule-soft, #DBE3EE);
  background: #FFFFFF;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 42, 74, 0.10);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  line-height: 1;
}
.gx-arrow:hover {
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.05);
}
.gx-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}
.gx-arrow-prev { left: -20px; }
.gx-arrow-next { right: -20px; }
@media (max-width: 700px) {
  .gx-arrow-prev { left: 6px; }
  .gx-arrow-next { right: 6px; }
}

/* ============================================================
   "UNIQUE TO LTI" CALLOUT — for Stored Curve + Recall Counts slides
   (added 2026-05-11)
   ============================================================ */

.lti-unique-callout {
  margin-top: 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(14, 165, 199, 0.10) 0%, rgba(14, 165, 199, 0.04) 100%);
  border: 1px solid var(--clinical-cyan-dk, #0EA5C7);
  border-left: 4px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 8px 8px 0;
}
.lti-unique-badge {
  display: inline-block;
  padding: 3px 10px;
  background: var(--clinical-cyan-dk, #0EA5C7);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 8px;
}
.lti-unique-callout p {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--clinical-navy, #0F2A4A) !important;
  margin: 0 !important;
}
.lti-unique-callout p strong { color: var(--clinical-cyan-dk, #0EA5C7); }

/* Inline footnote marker style for slide 4 (Curve fits) */
.gx-footnote-inline-mark {
  display: inline-block;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: #78350F !important;
  background: #FFFAEB;
  border: 1px solid #FDE68A;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
}

/* "Unmatched in its class" badge — variant on the compare card */
.genesys-compare-badge-only {
  background: linear-gradient(135deg, #FCD34D 0%, #FBBF24 100%);
  color: var(--clinical-navy, #0F2A4A);
}

/* ============================================================
   COMPARE MODELS — REDESIGNED SLIDE LAYOUT (no deep-dive buttons)
   Photo on left, only-what-differs on right (added 2026-05-12)
   ============================================================ */

.model-compare-slide {
  max-width: 1000px;
  align-items: center;
}

.model-compare-photo {
  position: relative;
  background: linear-gradient(135deg, #F7FAFD 0%, #EEF3F8 100%);
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 8px 28px rgba(15, 42, 74, 0.08);
}
.model-compare-photo img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 4px;
  image-rendering: auto;  /* product photos look bad pixelated */
}
.model-compare-photo .genesys-compare-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.model-compare-text h3 {
  font-size: 26px;
  margin: 4px 0 10px;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.15;
}
.model-when {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--clinical-slate, #4F6477) !important;
  margin: 0 0 18px !important;
}
.model-when strong { color: var(--clinical-navy, #0F2A4A); }

.model-diffs-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 8px;
}

.model-diffs {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.model-diff-row {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 12px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px dotted var(--rule-soft, #DBE3EE);
  font-size: 13.5px;
}
.model-diff-row:last-child { border-bottom: none; }
.model-diff-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clinical-slate, #4F6477);
}
.model-diff-value {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1.4;
}
.model-diff-value em { font-style: italic; color: #DC2626; }
.model-diff-value strong { color: var(--clinical-cyan-dk, #0EA5C7); }

/* Highlight rows where this model's spec genuinely differs from the others */
.model-diff-row.diff-unique {
  background: rgba(14, 165, 199, 0.05);
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 -10px;
  border-radius: 6px;
  border-bottom-color: rgba(14, 165, 199, 0.20);
}

.model-shared {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: var(--clinical-slate, #4F6477) !important;
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #F4F6F9;
  border-left: 3px solid var(--rule-soft, #DBE3EE);
  border-radius: 0 6px 6px 0;
  font-style: italic;
}
.model-shared strong {
  color: var(--clinical-navy, #0F2A4A);
  font-style: normal;
}

@media (max-width: 800px) {
  .model-compare-slide { grid-template-columns: 1fr; }
  .model-compare-photo img { max-height: 220px; }
  .model-diff-row { grid-template-columns: 45% 1fr; }
}

/* ============================================================
   vs. WIZARD TAB — added 2026-05-12
   Headline stats, architecture comparison, TCO list, when-each-fits
   ============================================================ */

/* SLIDE 1: 3-stat headline */
.wizard-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0 20px;
}
@media (max-width: 800px) { .wizard-stat-grid { grid-template-columns: 1fr; } }
.wizard-stat {
  padding: 22px 18px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft, #DBE3EE);
  text-align: center;
  background: #FFFFFF;
}
.wizard-stat-us {
  background: linear-gradient(135deg, rgba(14, 165, 199, 0.08) 0%, rgba(14, 165, 199, 0.02) 100%);
  border: 2px solid var(--clinical-cyan-dk, #0EA5C7);
  box-shadow: 0 8px 24px rgba(14, 165, 199, 0.12);
}
.wizard-stat-them {
  background: #F4F6F9;
}
.wizard-stat-saved {
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border-color: #FBBF24;
}
.wizard-stat-num {
  font-family: ui-monospace, monospace;
  font-size: 44px;
  font-weight: 800;
  color: var(--clinical-navy, #0F2A4A);
  line-height: 1;
  letter-spacing: -0.02em;
}
.wizard-stat-us .wizard-stat-num { color: var(--clinical-cyan-dk, #0EA5C7); }
.wizard-stat-saved .wizard-stat-num { color: #92400E; }
.wizard-stat-num .wizard-stat-unit {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  margin-left: 4px;
  opacity: 0.7;
}
.wizard-stat-lbl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clinical-navy, #0F2A4A);
  margin: 8px 0 6px;
}
.wizard-stat-sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--clinical-slate, #4F6477);
}
.wizard-stat-sub strong { color: var(--clinical-navy, #0F2A4A); }
.wizard-takeaway {
  margin: 14px 0 0 !important;
  padding: 14px 18px;
  background: #F4F6F9;
  border-left: 3px solid var(--clinical-slate, #4F6477);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* SLIDE 2: architecture grid */
.wizard-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 20px 0 16px;
}
@media (max-width: 800px) { .wizard-arch-grid { grid-template-columns: 1fr; } }
.wizard-arch-card {
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft, #DBE3EE);
}
.wizard-arch-us {
  background: rgba(14, 165, 199, 0.05);
  border: 1.5px solid var(--clinical-cyan-dk, #0EA5C7);
}
.wizard-arch-them {
  background: #F4F6F9;
}
.wizard-arch-card h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  line-height: 1.3;
}
.wizard-arch-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  margin: 0 0 10px !important;
  color: var(--clinical-slate, #4F6477) !important;
}
.wizard-arch-card p:last-child { margin-bottom: 0 !important; }
.wizard-arch-card p strong { color: var(--clinical-navy, #0F2A4A); }
.wizard-vocab-callout {
  margin-top: 18px;
  padding: 14px 18px;
  background: #FFFAEB;
  border: 1px solid #FDE68A;
  border-left: 4px solid #FBBF24;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #78350F;
}
.wizard-vocab-callout strong { color: #92400E; }

/* SLIDE 3: TCO numbered list */
.wizard-tco-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0 0;
}
.wizard-tco-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-left: 4px solid var(--clinical-cyan-dk, #0EA5C7);
  border-radius: 0 10px 10px 0;
}
.tco-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--clinical-cyan-dk, #0EA5C7);
  color: #FFFFFF;
  font-family: ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wizard-tco-item h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
}
.wizard-tco-item p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--clinical-slate, #4F6477) !important;
  margin: 0 !important;
}
.wizard-tco-item p strong { color: var(--clinical-navy, #0F2A4A); }
.wizard-tco-item p em { color: #DC2626; font-style: italic; }

/* SLIDE 4: when-each-fits */
.wizard-honest-intro {
  font-style: italic;
  margin-bottom: 18px !important;
}
.wizard-when-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 18px;
}
@media (max-width: 800px) { .wizard-when-grid { grid-template-columns: 1fr; } }
.wizard-when-card {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--rule-soft, #DBE3EE);
}
.wizard-when-them { background: #F4F6F9; }
.wizard-when-us { background: rgba(14, 165, 199, 0.05); border: 1.5px solid var(--clinical-cyan-dk, #0EA5C7); }
.wizard-when-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft, #DBE3EE);
}
.wizard-when-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.wizard-when-card ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--clinical-slate, #4F6477);
}
.wizard-when-card ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 13px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--clinical-slate, #4F6477);
}
.wizard-when-us ul li::before { background: var(--clinical-cyan-dk, #0EA5C7); }
.wizard-when-card ul li strong { color: var(--clinical-navy, #0F2A4A); }

.wizard-deep-link {
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(14, 165, 199, 0.06);
  border-radius: 8px;
  text-align: center;
}
.wizard-deep-link p {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
}
.wizard-deep-link a {
  color: var(--clinical-cyan-dk, #0EA5C7);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.wizard-deep-link a:hover { color: var(--clinical-navy, #0F2A4A); }

/* ============================================================
   WIZARD-TAB SLIDE SIZING FIX
   Default .gx-slide-inner caps at 760px (too narrow for wizard content).
   Wizard slides have multi-column grids — give them the full slide width.
   ============================================================ */
.gx-carousel-wrap[data-carousel="wizard"] .gx-slide-inner {
  max-width: 1080px;
  width: 100%;
}
.gx-carousel-wrap[data-carousel="wizard"] .gx-slide {
  padding: 32px 40px;
  align-items: flex-start;  /* top-align — these slides are tall, not centered */
}
@media (max-width: 700px) {
  .gx-carousel-wrap[data-carousel="wizard"] .gx-slide { padding: 22px 22px; }
}

/* Slide 1 stat-cards — let them breathe at full width */
.gx-carousel-wrap[data-carousel="wizard"] .wizard-stat-num {
  font-size: 52px;
}
.gx-carousel-wrap[data-carousel="wizard"] .wizard-stat {
  padding: 28px 20px;
}

/* Slide 2 architecture cards — full-width body, larger headings */
.gx-carousel-wrap[data-carousel="wizard"] .wizard-arch-card { padding: 24px; }
.gx-carousel-wrap[data-carousel="wizard"] .wizard-arch-card h4 { font-size: 16px; }

/* Slide 3 TCO items — generous spacing */
.gx-carousel-wrap[data-carousel="wizard"] .wizard-tco-item { padding: 20px 24px; }

/* Slide headers in the wizard tab — slightly larger */
.gx-carousel-wrap[data-carousel="wizard"] .gx-slide-inner h3 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.gx-carousel-wrap[data-carousel="wizard"] .gx-slide-inner > p {
  font-size: 15px;
  line-height: 1.6;
}

/* ============================================================
   FIX: TCO ITEM GRID LAYOUT BUG (Slide 3 of vs. Wizard tab)
   The 3 children (number/h4/p) were each going into sequential
   grid cells, squeezing <p> into the 44px badge column.
   ============================================================ */
.wizard-tco-item {
  grid-template-areas:
    "num heading"
    "num body";
  grid-template-rows: auto 1fr;
  gap: 6px 16px;
}
.wizard-tco-item > .tco-num { grid-area: num; align-self: start; }
.wizard-tco-item > h4 { grid-area: heading; }
.wizard-tco-item > p { grid-area: body; }

/* ============================================================
   THROUGHPUT CALCULATOR — TAB-CONTEXT FIXES (added 2026-05-12)
   The calculator was lifted from genii.html where it sat outside
   the tab system. Adapt sizing to live inside a .tab-panel.
   ============================================================ */

/* When the .roi-calc renders inside a tab-panel, drop the outer
   padding that the standalone section uses. */
.tab-panel .roi-calc {
  padding: 24px 0 0;
  background: transparent;
}
.tab-panel .roi-calc .container { padding: 0; max-width: none; }
.tab-panel .roi-calc .roi-head { margin-top: 0; }

/* Slide-link button row (Value & Service tab slide 01) */
.value-slide-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.value-slide-links .btn-sm {
  font-size: 13px;
  padding: 8px 14px;
}

/* ============================================================
   CALCULATOR PROMOTION — banner + inline section (2026-05-12)
   The calculator is the pitch. It gets the loudest treatment.
   ============================================================ */

/* SCREAMING BANNER — full-bleed between hero and recommender CTA */
.genesys-calc-banner {
  background:
    linear-gradient(135deg, rgba(15, 42, 74, 0.94) 0%, rgba(19, 50, 84, 0.94) 100%),
    radial-gradient(ellipse at top left, rgba(103, 232, 249, 0.18) 0%, transparent 60%);
  background-color: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  padding: 44px 0;
  border-bottom: 4px solid var(--clinical-cyan, #67E8F9);
  position: relative;
  overflow: hidden;
}
.genesys-calc-banner::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(252, 211, 77, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.genesys-calc-banner-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  position: relative;
}
@media (max-width: 900px) {
  .genesys-calc-banner-grid { grid-template-columns: 1fr; gap: 22px; }
}
.genesys-calc-banner-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan, #67E8F9);
  margin-bottom: 14px;
}
.genesys-calc-banner-headline {
  font-family: ui-monospace, monospace;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  margin: 0 0 14px;
  letter-spacing: -0.03em;
  color: #FFFFFF;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .genesys-calc-banner-headline { font-size: 40px; gap: 8px; }
}
.banner-num {
  color: var(--clinical-cyan, #67E8F9);
  font-size: 1.3em;
}
.banner-num-them {
  color: #FCA5A5;
}
.banner-min {
  font-size: 0.55em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
}
.banner-versus {
  font-size: 0.5em;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
  margin: 0 4px;
  font-family: 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
}
.genesys-calc-banner-sub {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 540px;
}
.genesys-calc-banner-sub strong { color: #FCD34D; }

.genesys-calc-banner-right { text-align: right; }
@media (max-width: 900px) { .genesys-calc-banner-right { text-align: left; } }

.btn-xl {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(252, 211, 77, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-xl:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(252, 211, 77, 0.40);
}
.btn-xl em { color: #FCD34D; font-style: italic; font-weight: 800; }
.btn-xl .arrow {
  font-size: 22px;
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn-xl:hover .arrow { transform: translateY(4px); }

.genesys-calc-banner-fine {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* THE INLINE CALCULATOR SECTION */
.genesys-calc-section {
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF3F8 100%);
  padding: 60px 0;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
  scroll-margin-top: 24px;  /* offset for smooth-scroll target */
}
.genesys-calc-section-head {
  max-width: 820px;
  margin: 0 auto 36px;
  text-align: center;
}
.genesys-calc-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0EA5C7);
  margin-bottom: 10px;
}
.genesys-calc-section-head h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--clinical-navy, #0F2A4A);
}
.genesys-calc-section-head .lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--clinical-slate, #4F6477);
  margin: 0;
}

/* The lifted calculator HTML inside this section — drop the tab-panel-head since we have our own head */
.genesys-calc-section .tab-panel-head { display: none; }
.genesys-calc-section .roi-calc {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 12px 40px rgba(15, 42, 74, 0.08);
}
.genesys-calc-section .roi-calc .container { padding: 0; max-width: none; }
@media (max-width: 700px) {
  .genesys-calc-section { padding: 40px 0; }
  .genesys-calc-section .roi-calc { padding: 22px; border-radius: 10px; }
}

/* Smooth scroll site-wide so anchor links feel natural */
html { scroll-behavior: smooth; }


/* ================================================================== */
/* S4FE-D — "Three ways to order" purchase-paths info bar              */
/* Sits between the buy-now hero and the product card grid.            */
/* ================================================================== */
.s4fed-purchase-paths {
  margin: 40px 0 36px;
  padding: 32px 32px 28px;
  background: linear-gradient(180deg, #F7FAFD 0%, #EEF4FA 100%);
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 16px;
  box-shadow: 0 6px 22px rgba(15, 42, 74, .05);
}
/* Wrapper section for purchase paths now that it sits between the explorer and resources */
.s4fed-purchase { padding: 8px 0 16px; background: #FFFFFF; }
.s4fed-paths-h {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 22px;
  text-align: center;
  letter-spacing: -0.005em;
}
.s4fed-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.s4fed-path {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 22px 22px 20px;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.s4fed-path:hover {
  border-color: var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 10px 24px rgba(15, 42, 74, .07);
  transform: translateY(-1px);
}
.s4fed-path-featured {
  background: #FFFFFF;
  border: 2px solid var(--clinical-cyan, #0EA5C7);
  box-shadow: 0 10px 28px rgba(14, 165, 199, .14);
  position: relative;
}
.s4fed-path-featured::before {
  content: "Most common";
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--clinical-cyan, #0EA5C7);
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.s4fed-path .path-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clinical-cyan, #0EA5C7);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-display, var(--font-sans));
  flex: 0 0 auto;
}
.s4fed-path-featured .path-num {
  background: var(--clinical-navy, #0F2A4A);
}
.s4fed-path .path-body { min-width: 0; }
.s4fed-path .path-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 4px 0 6px;
  line-height: 1.25;
}
.s4fed-path .path-body p {
  font-size: .88rem;
  line-height: 1.55;
  margin: 0;
  color: var(--gray-700, #475363);
}
.s4fed-path .path-body a {
  color: var(--clinical-cyan-dk, #0888A2);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(14, 165, 199, .35);
  transition: border-color .15s ease;
}
.s4fed-path .path-body a:hover {
  border-bottom-color: var(--clinical-cyan-dk, #0888A2);
}
.s4fed-paths-fine {
  margin: 22px 0 0;
  padding: 14px 18px 0;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--gray-600, #5B6B7E);
  text-align: center;
}
.s4fed-paths-fine a {
  color: var(--clinical-cyan-dk, #0888A2);
  text-decoration: none;
  font-weight: 600;
}
.s4fed-paths-fine a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .s4fed-paths-grid { grid-template-columns: 1fr; }
  .s4fed-path-featured { order: -1; }  /* surface the "most common" path first on mobile */
}
@media (max-width: 600px) {
  .s4fed-purchase-paths { padding: 24px 20px 22px; border-radius: 12px; }
  .s4fed-paths-h { font-size: 1.18rem; margin-bottom: 18px; }
  .s4fed-path { padding: 18px 18px 16px; gap: 14px; grid-template-columns: 40px 1fr; }
  .s4fed-path .path-num { width: 40px; height: 40px; font-size: 1.05rem; }
}


/* ================================================================== */
/* OUR STORY — Heritage hero (Donald L. Oesterlin, c. 1986)            */
/* Portrait sharp on the left, building photo blurred behind, navy     */
/* gradient tint on top so the right-side headline reads clean.        */
/* ================================================================== */
.heritage-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900, #0A1F3D);
  color: #FFFFFF;
  padding: 80px 0 90px;
  min-height: 580px;
}
.heritage-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('../images/heritage/LTI80s_clean.png');
  background-size: cover;
  background-position: center 58%;
  filter: blur(6px) grayscale(100%) contrast(1.05) brightness(.95);
  transform: scale(1.10); /* hide blurred edges */
  opacity: 1;
  z-index: 0;
}
.heritage-hero-tint {
  position: absolute;
  inset: 0;
  /* Asymmetric gradient: light on the LEFT (building shows through behind the portrait),
     darker on the RIGHT (so the white headline still reads). Vertical gradient is subtle. */
  background:
    linear-gradient(90deg,
      rgba(10,31,61,0.18) 0%,
      rgba(10,31,61,0.18) 38%,
      rgba(10,31,61,0.55) 75%,
      rgba(10,31,61,0.75) 100%),
    linear-gradient(180deg,
      rgba(10,31,61,0.08) 0%,
      rgba(6,18,36,0.32) 100%);
  z-index: 1;
}
.heritage-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 60px;
  align-items: center;
}
.heritage-hero-portrait {
  margin: 0;
  position: relative;
}
.heritage-hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  background: #FFFFFF;
  padding: 10px 10px 12px;
  box-shadow:
    0 22px 44px rgba(0,0,0,0.50),
    0 6px 14px rgba(0,0,0,0.32);
}
.heritage-hero-portrait figcaption {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #9BB5D6;
  text-align: center;
  font-weight: 700;
}
.heritage-hero-copy {
  position: relative;
}
.heritage-hero-copy .breadcrumb {
  margin-bottom: 6px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: #9BB5D6;
}
.heritage-hero-copy .breadcrumb a {
  color: #B7CCE5;
  text-decoration: none;
}
.heritage-hero-copy .breadcrumb a:hover { color: #FFFFFF; }
.heritage-hero-copy .breadcrumb .sep {
  margin: 0 8px;
  opacity: .5;
}
.heritage-hero-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #67E8F9;
  font-weight: 700;
  margin: 18px 0 22px;
  border-left: 3px solid var(--cyan-500, #06B6D4);
  padding: 4px 0 4px 12px;
}
.heritage-hero-h {
  font-size: clamp(2.25rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  margin: 0 0 24px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: #FFFFFF;
}
.heritage-hero-h span {
  display: block;
}
.heritage-hero-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.58;
  color: #D3DEEC;
  max-width: 60ch;
  margin: 0;
}
@media (max-width: 900px) {
  .heritage-hero { min-height: 0; padding: 56px 0 60px; }
  .heritage-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .heritage-hero-portrait {
    max-width: 280px;
    margin: 0 auto;
  }
  .heritage-hero-copy {
    text-align: center;
  }
  .heritage-hero-eyebrow {
    border-left: none;
    border-top: 2px solid var(--cyan-500, #06B6D4);
    padding: 14px 0 0;
    margin-top: 12px;
  }
  .heritage-hero-lede {
    margin: 0 auto;
  }
}

/* Backdrop-credit pill — small caption that tells you what the blurred building is */
.heritage-hero-credit {
  position: absolute;
  left: 24px;
  bottom: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 12px;
  background: rgba(6, 18, 36, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #C7D7EC;
  font-weight: 600;
}
.heritage-hero-credit .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan-500, #06B6D4);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}
@media (max-width: 600px) {
  .heritage-hero-credit {
    left: 16px;
    bottom: 14px;
    font-size: 9.5px;
    letter-spacing: 1.2px;
    padding: 6px 11px 6px 10px;
  }
}


/* ================================================================== */
/* OUR STORY — Heritage production-floor strip                         */
/* Four production/office shots from c. 1986. White photo-paper card   */
/* treatment so each image reads like a print on the page.             */
/* ================================================================== */
.heritage-strip .section-head .lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted, #64748B);
  margin: 10px 0 0;
  max-width: 70ch;
}
.heritage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}
@media (min-width: 1000px) {
  .heritage-grid { grid-template-columns: repeat(4, 1fr); }
}
.heritage-photo {
  margin: 0;
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  padding: 12px 12px 16px;
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.heritage-photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 42, 74, 0.12);
}
.heritage-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(100%);
}
.heritage-photo figcaption {
  margin-top: 14px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
  padding: 0 4px;
}
.heritage-photo figcaption strong {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
}


/* ================================================================== */
/* OUR STORY — Founding-grid (1983 section): prose left, certificate   */
/* inset right. Collapses to single column under 900px.                */
/* ================================================================== */
.founding-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .founding-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.founding-doc {
  margin: 0;
  background: linear-gradient(180deg, #FAF6EC 0%, #F0E9D5 100%);
  border: 1px solid #D8CFB4;
  padding: 18px 18px 20px;
  box-shadow:
    0 10px 26px rgba(40, 30, 15, 0.16),
    0 2px 6px rgba(40, 30, 15, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
  /* Slight rotation gives the "document on the desk" feel */
  transform: rotate(-1.2deg);
}
.founding-doc:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow:
    0 18px 38px rgba(40, 30, 15, 0.22),
    0 4px 10px rgba(40, 30, 15, 0.10);
}
.founding-doc img {
  display: block;
  width: 100%;
  height: auto;
  /* Mild contrast lift; the source already has paper tone baked in */
  filter: contrast(1.04);
}
.founding-doc figcaption {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #5C4E33;
  text-align: center;
  padding: 6px 4px 0;
  border-top: 1px solid rgba(120, 100, 60, .22);
}
.founding-doc figcaption strong {
  display: block;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  color: #3D331F;
  margin-bottom: 4px;
  font-weight: 700;
}
.founding-doc figcaption span {
  display: block;
  font-size: 0.74rem;
  line-height: 1.5;
  color: #6D5E3F;
}
@media (max-width: 900px) {
  .founding-doc {
    transform: rotate(0deg);
    max-width: 460px;
    margin: 0 auto;
  }
  .founding-doc:hover {
    transform: translateY(-2px);
  }
}


/* ================================================================== */
/* MULTI-WIPER / WIPER GOLD — Configurations tab (Standard vs HE/LSV) */
/* ================================================================== */
.config-decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}
@media (max-width: 800px) {
  .config-decision-grid { grid-template-columns: 1fr; }
}
.config-decision-card {
  background: #FFFFFF;
  border: 1px solid var(--rule-soft, #DBE3EE);
  border-radius: 14px;
  padding: 28px 26px 26px;
  box-shadow: 0 8px 22px rgba(15, 42, 74, .05);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.config-decision-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 42, 74, .10);
}
.config-decision-standard {
  border-top: 4px solid var(--clinical-cyan, #0EA5C7);
}
.config-decision-he {
  border-top: 4px solid var(--clinical-navy, #0F2A4A);
}
.config-decision-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--clinical-cyan, #0EA5C7);
  padding: 4px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.config-decision-badge-he {
  background: var(--clinical-navy, #0F2A4A);
}
.config-decision-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 12px;
  line-height: 1.2;
}
.config-decision-tag {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
  margin: 0 0 18px;
}
.config-decision-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-soft, #DBE3EE);
  padding-top: 16px;
}
.config-decision-bullets li {
  font-size: .88rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
  padding: 6px 0;
}
.config-decision-bullets li strong {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
}

/* Section sub-headers inside the configurations tab */
.tab-section-head {
  margin: 0 0 18px;
}
.tab-section-head .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0888A2);
  margin-bottom: 8px;
}
.tab-section-head h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0 0 6px;
  line-height: 1.2;
}
.tab-section-head .lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray-700, #475363);
  margin: 0;
  max-width: 70ch;
}

/* "From the field" anecdote callout */
.he-anecdote {
  margin: 40px 0 0;
  padding: 26px 28px;
  background: linear-gradient(180deg, #F0F8FB 0%, #E6F2F7 100%);
  border: 1px solid #CFE3EC;
  border-left: 5px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 14px rgba(14, 165, 199, .08);
}
.he-anecdote-label {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clinical-cyan-dk, #0888A2);
  margin-bottom: 10px;
}
.he-anecdote-body {
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--clinical-navy, #0F2A4A);
  margin: 0;
  font-style: italic;
}
.he-anecdote-body strong {
  font-style: normal;
}

/* Lead-time CTA at the bottom of the configurations tab */
.he-lead-time {
  margin: 56px 0 0;
  padding: 30px 32px;
  background: var(--clinical-navy, #0F2A4A);
  color: #FFFFFF;
  border-radius: 14px;
}
.he-lead-time h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: #FFFFFF;
}
.he-lead-time p {
  font-size: 1rem;
  line-height: 1.6;
  color: #D3DEEC;
  margin: 0 0 18px;
  max-width: 70ch;
}
.he-lead-time-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Small "HE option exists" aside on the Overview config-block */
.config-block-aside {
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #F4F8FB;
  border-left: 3px solid var(--clinical-cyan, #0EA5C7);
  border-radius: 0 8px 8px 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--gray-700, #475363);
}
.config-block-aside a {
  color: var(--clinical-cyan-dk, #0888A2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 165, 199, .35);
}
.config-block-aside a:hover {
  border-bottom-color: var(--clinical-cyan-dk, #0888A2);
}

/* ---- LTI Capture spotlight — Wiper Gold Overview tab ----------------------
   Visually distinct callout block that sits between the 3-pillar overview
   grid and the well-options config block. Dark navy gradient matches the
   distributor hero so it reads as a featured premium upgrade. */
.lti-capture-spotlight {
  margin: 48px 0;
  padding: 48px 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0F2A4A 0%, #173a64 55%, #0B8AA6 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(15, 42, 74, 0.18);
}
.lti-capture-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(14, 165, 199, 0.22) 0, transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(214, 222, 35, 0.10) 0, transparent 48%);
  pointer-events: none;
}
.lti-capture-spotlight-text {
  position: relative;
  z-index: 1;
}
.lti-capture-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #D6DE23;
  background: rgba(214, 222, 35, 0.12);
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.lti-capture-spotlight h3 {
  color: #ffffff;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 32ch;
}
.lti-capture-spotlight .lti-capture-lede {
  color: rgba(230, 244, 248, 0.92);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 22px;
  max-width: 64ch;
}
.lti-capture-spotlight .lti-capture-lede strong { color: #ffffff; }
.lti-capture-spotlight-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 28px;
  max-width: 980px;
}
.lti-capture-spotlight-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(230, 244, 248, 0.90);
  font-size: 0.95rem;
  line-height: 1.45;
}
.lti-capture-spotlight-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: #D6DE23;
}
.lti-capture-spotlight-list li strong { color: #ffffff; }
.lti-capture-spotlight-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .lti-capture-spotlight { padding: 32px 24px; }
  .lti-capture-spotlight-list { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- Highlighted feature card (Wiper Gold features tab) ----------------
   Used for the LTI Capture feature card so the new add-on stands out from
   the rest of the feature grid. Cyan accent border + "NEW" tag chip. */
.feature.feature-highlighted {
  position: relative;
  border: 1px solid rgba(14, 165, 199, 0.45);
  background: linear-gradient(180deg, rgba(14, 165, 199, 0.04) 0%, rgba(14, 165, 199, 0.00) 60%);
  box-shadow: 0 6px 18px rgba(15, 42, 74, 0.06);
}
.feature.feature-highlighted .feature-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0888A2;
  background: rgba(14, 165, 199, 0.12);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* =========================================================================
   LTI CAPTURE PRODUCT PAGE
   Components specific to lti-capture.html — screenshot gallery, compat cards,
   install steps, ordering cards.
   ========================================================================= */

/* ---- Screenshot gallery ----------------------------------------------- */
.capture-screens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 28px;
  margin-top: 32px;
}
.capture-screen {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.capture-screen:hover {
  border-color: rgba(14, 165, 199, 0.45);
  box-shadow: 0 12px 28px rgba(15, 42, 74, 0.08);
  transform: translateY(-2px);
}
.capture-screen img {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid var(--border, #e5e9ee);
}
.capture-screen figcaption {
  padding: 18px 20px 20px;
  color: var(--gray-700, #475363);
  font-size: 0.92rem;
  line-height: 1.5;
}
.capture-screen figcaption strong {
  color: var(--clinical-navy, #0F2A4A);
  font-weight: 700;
}

/* ---- Compatibility grid ----------------------------------------------- */
.compat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.compat-card {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compat-card h3 {
  margin: 0;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.18rem;
}
.compat-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-700, #475363);
  font-size: 0.95rem;
  line-height: 1.55;
}
.compat-card ul li { margin-bottom: 4px; }
.compat-card .compat-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gray-600, #5b6573);
  font-style: italic;
}
.compat-card.compat-card-ready {
  border-color: rgba(46, 110, 62, 0.40);
  background: linear-gradient(180deg, rgba(46, 110, 62, 0.04) 0%, transparent 60%);
}
.compat-card.compat-card-soon {
  border-color: rgba(14, 165, 199, 0.45);
  background: linear-gradient(180deg, rgba(14, 165, 199, 0.05) 0%, transparent 60%);
}
.compat-card.compat-card-eol {
  border-color: rgba(180, 95, 0, 0.40);
  background: linear-gradient(180deg, rgba(180, 95, 0, 0.04) 0%, transparent 60%);
}
.compat-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  align-self: flex-start;
}
.compat-badge-ready { color: #2D6E3E; background: rgba(46, 110, 62, 0.12); }
.compat-badge-soon  { color: #0888A2; background: rgba(14, 165, 199, 0.12); }
.compat-badge-eol   { color: #B45F00; background: rgba(180, 95, 0, 0.12); }

/* ---- Install steps ---------------------------------------------------- */
.install-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
  max-width: 880px;
}
.install-step {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 12px;
  padding: 24px 28px 24px 80px;
  position: relative;
}
.install-step-num {
  position: absolute;
  top: 24px; left: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--clinical-navy, #0F2A4A);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}
.install-step h3 {
  margin: 0 0 8px;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.05rem;
  line-height: 1.35;
}
.install-step p {
  margin: 0;
  color: var(--gray-700, #475363);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---- Ordering grid ---------------------------------------------------- */
.ordering-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 24px;
}
.ordering-card {
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e9ee);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ordering-card.ordering-card-feature {
  border-color: rgba(14, 165, 199, 0.45);
  background: linear-gradient(180deg, rgba(14, 165, 199, 0.05) 0%, transparent 65%);
}
.ordering-card h3 {
  margin: 0;
  color: var(--clinical-navy, #0F2A4A);
  font-size: 1.18rem;
}
.ordering-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  color: #0888A2;
  background: rgba(14, 165, 199, 0.12);
  align-self: flex-start;
}
.ordering-card ul {
  margin: 0;
  padding-left: 18px;
  color: var(--gray-700, #475363);
  font-size: 0.93rem;
  line-height: 1.5;
}
.ordering-card ul li { margin-bottom: 4px; }
.ordering-card p {
  margin: 0;
  color: var(--gray-700, #475363);
  font-size: 0.95rem;
  line-height: 1.55;
}
.ordering-card .ordering-note {
  font-size: 0.85rem;
  color: var(--gray-600, #5b6573);
  font-style: italic;
}

/* ---- Resource cards grid (re-using existing .resource-card pattern) --- */
.resource-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

/* Anchor scroll offset — clears the sticky nav when jumping to an in-page section */
.anchor-target { scroll-margin-top: 110px; }

/* Form submission status — used by js/forms.js */
.form-status {
  margin-top: 20px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-status-pending {
  background: #F0F6FB;
  border: 1px solid rgba(15, 42, 74, 0.12);
  color: var(--navy-900, #0F2A4A);
}
.form-status-success {
  background: #E8F7EE;
  border: 1px solid #6FB97E;
  color: #1E5A2C;
}
.form-status-error {
  background: #FCEAEA;
  border: 1px solid #D87878;
  color: #8C1F1F;
}

/* News article byline + inline subhead — cleans up imported article formatting */
.article-byline {
  color: var(--gray-600, #5C6B7F);
  font-size: 0.92rem;
  font-weight: 500;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 42, 74, 0.10);
  letter-spacing: 0.01em;
}
.article-byline a { color: var(--gray-700, #334155); text-decoration: underline; text-underline-offset: 2px; }
.article-byline a:hover { color: var(--accent, #0EA5C7); }
.article-subhead {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-900, #0F2A4A);
  margin: 28px 0 10px;
  letter-spacing: 0.02em;
}

/* Legal pages — privacy.html / terms.html */
.page-hero-spectrum-simple {
  background: linear-gradient(135deg, #04101F 0%, #0A1F3D 55%, #0D2A4D 100%);
  padding: 80px 0 60px;
  color: #fff;
}
.page-hero-spectrum-simple .breadcrumb,
.page-hero-spectrum-simple .breadcrumb a { color: rgba(255,255,255,0.7); }
.page-hero-spectrum-simple .breadcrumb a:hover { color: #fff; }
.page-hero-spectrum-simple h1 { color: #fff; margin: 12px 0 16px; }
.page-hero-spectrum-simple .hero-tagline { color: rgba(255,255,255,0.78); max-width: 60ch; }

.container-narrow { max-width: 780px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.legal-doc { font-size: 1rem; line-height: 1.75; color: var(--gray-700, #334155); }
.legal-doc h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.35rem;
  color: var(--navy-900, #0F2A4A);
  letter-spacing: -.01em;
}
.legal-doc p { margin: 0 0 16px; }
.legal-doc a { color: var(--accent, #0EA5C7); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--navy-900, #0F2A4A); }
.legal-effective {
  display: inline-block;
  background: #F0F6FB;
  border-left: 3px solid var(--accent, #0EA5C7);
  padding: 10px 16px;
  border-radius: 0 6px 6px 0;
  font-size: 0.95rem;
  color: var(--navy-900, #0F2A4A);
  margin-bottom: 32px;
}
.legal-address {
  background: #F8FAFC;
  border: 1px solid rgba(15, 42, 74, 0.08);
  border-radius: 8px;
  padding: 18px 22px;
  line-height: 1.7;
}

/* ============================================================
   Product detail banner — full-bleed editorial close-up
   Used between product-hero and product-tabs on Multi-Wiper page.
   Full-width, natural aspect ratio (no crop) so the LTI nameplate
   and the full keypad/LCD are all visible. Caption overlay at bottom.
   ============================================================ */
.product-detail-banner {
  background: #0A1F3D;
  padding: 0;
  position: relative;
}
.product-detail-banner-figure {
  margin: 0;
  position: relative;
  display: block;
  /* Force a true banner aspect-ratio. The container becomes a horizontal
     accent strip at all viewport widths — ~320px tall on a 1440px screen,
     ~427px tall on a 1920px screen. Banner reads as an artistic accent
     rather than dominating the page. */
  aspect-ratio: 4.5 / 1;
  overflow: hidden;
}
.product-detail-banner-figure img {
  display: block;
  width: 100%;
  height: 100%;
  /* Anchor near the top of the source image so the "Wiper" badge,
     most of the green LCD, and most of the keypad are visible.
     LTI nameplate at the bottom is sacrificed to keep the strip tight. */
  object-fit: cover;
  object-position: 50% 22%;
}
@media (max-width: 700px) {
  .product-detail-banner-figure { aspect-ratio: 3 / 1; }
}
.product-detail-banner-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 48px;
  background: linear-gradient(180deg, rgba(10,31,61,0) 0%, rgba(10,31,61,0.78) 60%, rgba(10,31,61,0.92) 100%);
  color: #FFFFFF;
}
.product-detail-banner-caption .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--cyan-400, #22D3EE);
  margin-bottom: 6px;
}
.product-detail-banner-caption p {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,0.95);
}
@media (max-width: 700px) {
  .product-detail-banner-caption { padding: 18px 20px; }
  .product-detail-banner-caption p { font-size: 0.9rem; }
}

/* ============================================================
   S4FE-D Production band — "Filled in Elburn"
   Two-column with editorial bottling-line photo + vertical-integration copy
   ============================================================ */
.s4fed-production {
  padding: 80px 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-top: 1px solid var(--rule-soft, #e5e9ee);
  border-bottom: 1px solid var(--rule-soft, #e5e9ee);
}
.s4fed-production-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .s4fed-production-grid { grid-template-columns: 1fr; gap: 32px; }
}
.s4fed-production-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 42, 74, 0.18), 0 4px 14px rgba(15, 42, 74, 0.10);
  border: 1px solid rgba(15, 42, 74, 0.08);
}
.s4fed-production-text .eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent, #0EA5C7);
  margin-bottom: 12px;
}
.s4fed-production-text h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.15;
  color: var(--navy-900, #0F2A4A);
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.s4fed-production-text .lede {
  font-size: 1.05rem;
  color: var(--gray-700, #334155);
  margin-bottom: 14px;
  line-height: 1.55;
}
.s4fed-production-text p {
  font-size: 0.98rem;
  color: var(--gray-700, #334155);
  margin-bottom: 22px;
  line-height: 1.6;
}
.s4fed-production-stats {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-soft, #e5e9ee);
}
.s4fed-production-stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s4fed-production-stats .stat-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy-900, #0F2A4A);
  letter-spacing: -.01em;
  line-height: 1;
}
.s4fed-production-stats .stat-label {
  font-size: 0.78rem;
  color: var(--gray-500, #64748B);
  letter-spacing: 0.02em;
}
@media (max-width: 700px) {
  .s4fed-production-stats { grid-template-columns: 1fr; }
}

/* Engineering section — drafting-table SVG illustration */
.engineering-illo {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 42, 74, 0.18), 0 4px 14px rgba(15, 42, 74, 0.10);
  border: 1px solid rgba(15, 42, 74, 0.10);
  background: #F0F6FB;
}