/* ========================================
   AMFIT WEBSITE V2 — Understated Premium Design System
   Light / warm neutral palette per Surefoot brand deck Audience 01.
   Amfit red retained as the one accent (per CLAUDE.md).
   ======================================== */

/* Lenis smooth-scroll base styles (v1.3.4, self-hosted — was unpkg lenis.css) */
html.lenis,html.lenis body{height:auto}.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-smooth iframe{pointer-events:none}.lenis.lenis-autoToggle{transition-property:overflow;transition-duration:1ms;transition-behavior:allow-discrete}


/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Design Tokens --- */
:root {
  /* Color system — Cassandra palette (Jun 2026), THESE colors only:
     red #A6192E, off-white #F6F3ED (warm) + #D6DAE0 (cool), black, white.
     Secondary --brand-* swatches below are for "when absolutely necessary". */
  --bg-primary: #F6F3ED;           /* page background — Amfit off-white (warm) */
  --bg-secondary: #FFFFFF;         /* secondary surface — white panels on the off-white canvas (#D6DAE0 benched) */
  --bg-card: rgba(0, 0, 0, 0.04);
  --bg-card-hover: rgba(0, 0, 0, 0.07);
  --bg-glass: rgba(255, 255, 255, 0.70);

  /* Brand palette — Surefoot deck Audience 01 */
  --sf-suede: #B4916D;             /* warm tan */
  --sf-sand:  #DACBAB;             /* muted sand */
  --sf-white: #FFFFFF;

  /* Typography — black (palette = black + white + red + 2 off-whites) */
  --text-primary:   #000000;        /* headlines / primary text — black */
  --text-secondary: rgba(0, 0, 0, 0.72);
  --text-muted:     rgba(0, 0, 0, 0.45);

  /* Amfit red — #A6192E (Cassandra palette, Jun 2026). */
  --red: #A6192E;                        /* primary brand red */
  --red-rgb: 166, 25, 46;                /* same value as RGB triple for rgba() glows/tints */
  --red-hover: #8C1526;                  /* darker derivative for hover states */
  --red-dark: #6E1020;                   /* darkest, used on CTA banner backgrounds */
  --red-glow: rgba(166, 25, 46, 0.14);   /* ambient glow — tracks --red */

  /* Brand secondary palette — per brand guide page 6.
     Use sparingly ("not in massive quantities"). Available as CSS vars
     so future use doesn't hardcode hex codes. */
  --brand-cream:        #DDDEC6;
  --brand-pale-yellow:  #FFEAAE;
  --brand-lime:         #D3D57C;
  --brand-blue-deep:    #28536B;
  --brand-warm-grey:    #85756E;
  --brand-gold:         #EDBE47;
  --brand-olive:        #909738;
  --brand-teal:         #6EBBAB;
  --brand-charcoal:     #34262B;
  --brand-purple:       #442369;
  --brand-magenta:      #851E5E;
  --brand-warm-grey-2:  #756E6F;
  --brand-slate:        #4C5B61;
  --brand-deep-teal:    #26686D;

  --border: rgba(0, 0, 0, 0.10);
  --border-hover: rgba(0, 0, 0, 0.22);

  /* Radius */
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Shadows — layered for realism */
  --shadow-sm:
    0 1px 2px rgba(0,0,0,0.1),
    0 2px 4px rgba(0,0,0,0.08);
  --shadow-md:
    0 4px 8px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:
    0 8px 16px rgba(0,0,0,0.15),
    0 24px 48px rgba(0,0,0,0.12);

  /* Typography — fluid scale */
  --text-xs:    clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:    clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --text-lg:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl:    clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --text-2xl:   clamp(1.8rem, 1.4rem + 2vw, 3rem);
  --text-3xl:   clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --text-hero:  clamp(2.2rem, 1.5rem + 3vw, 3.75rem);

  /* Spacing — generous */
  --space-section: clamp(6rem, 5rem + 5vw, 10rem);
  --space-section-sm: clamp(4rem, 3rem + 3vw, 6rem);

  /* Layout */
  --max-width: 1240px;
  --nav-height: 78px;
  --transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1);

  /* Type families — single source of truth.
     Brand spec is Utopia (serif) + Univers (sans); these are the closest
     free web matches. To switch to the licensed fonts later, point these
     two tokens at the Adobe Fonts families and add the kit <link>. */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;  /* headers ≈ Utopia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  /* body/UI ≈ Univers */
}

/* =============================================
   FRONT PAGE — dark theme. The home is the main navigational page and
   reads as its own color vs the cool off-white content pages, per
   Cassandra (Jun 2026) + the deck. Every home section reads
   from tokens, so overriding the tokens on body.theme-dark flips the
   whole page dark with correct contrast; the few components that
   hardcode a light surface are nudged below.
   Palette trial (Cassandra, Jul 2026): pure black wasn't popping the
   information off the page — page #1B2026, bordered sections #232A32,
   cards #2C343D, accent red unchanged.
   ============================================= */
body.theme-dark {
  --bg-primary: #1B2026;           /* deep blue-gray page */
  --bg-secondary: #232A32;         /* bordered section surfaces */
  --bg-card: #2C343D;
  --bg-card-hover: #37414C;
  --bg-glass: #2C343D;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.74);
  --text-muted: rgba(255, 255, 255, 0.52);
  --border: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(255, 255, 255, 0.28);
}
/* No warm paper-grain on the dark page */
body.theme-dark::after { display: none; }

/* Solid nav state when scrolled past the dark hero */
body.theme-dark .nav:not(.nav-over-hero) {
  background: rgba(0, 0, 0, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.theme-dark .nav:not(.nav-over-hero) .nav-logo,
body.theme-dark .nav:not(.nav-over-hero) .nav-links a { color: rgba(255, 255, 255, 0.92); }
body.theme-dark .nav:not(.nav-over-hero) .nav-links a:hover,
body.theme-dark .nav:not(.nav-over-hero) .nav-links a.active { color: #fff; }
body.theme-dark .nav:not(.nav-over-hero) .nav-logo-light { display: none; }
body.theme-dark .nav:not(.nav-over-hero) .nav-logo-dark { display: block; }
body.theme-dark .nav:not(.nav-over-hero) .nav-cta-locate {
  color: #fff; border-color: rgba(255, 255, 255, 0.35); background: transparent;
}
/* The nav dropdowns are white popovers — keep them light-themed on the dark
   home by re-scoping the light tokens onto the panel, so their text doesn't
   render near-white on the white background (the bug that hid the links). */
body.theme-dark .nav-dropdown {
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.72);
  --text-muted: rgba(0, 0, 0, 0.45);
  --bg-secondary: #D6DAE0;
  --border: rgba(0, 0, 0, 0.10);
}

/* Components that hardcode a light surface → dark equivalents */
body.theme-dark .audience-btn { background: var(--bg-card); color: var(--text-primary); }
body.theme-dark .audience-btn:hover { background: var(--bg-card-hover); color: var(--red); border-color: var(--red); }
body.theme-dark .product-explorer-image {
  background: radial-gradient(ellipse at center, var(--red-glow) 0%, transparent 65%), var(--bg-card);
}
body.theme-dark .btn-secondary { color: var(--text-primary); border-color: var(--border-hover); }
body.theme-dark .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.08); }
/* Footer is black on every page → invert the dark-on-light wordmark to white */
.footer-brand img { filter: brightness(0) invert(1); }

/* --- Base --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  font-weight: 400;
  font-size: var(--text-base);
  overflow-x: hidden;
}

/* Headlines use the display family (Source Serif 4 ≈ brand spec Utopia) */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Paper-grain overlay — subtle analog warmth on light bg */
body::after {
  content: '';
  position: fixed;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 9999;
}

a {
  color: var(--red);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--red-hover); }

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

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1 { font-size: var(--text-hero); font-weight: 700; letter-spacing: -0.03em; line-height: 1.0; }
/* Semantic h1 rendered at default-h2 scale — for pages whose design opens on
   a section heading rather than a hero (company.html). Pixel-parity with h2. */
.h1-section-scale { font-size: var(--text-3xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
}
.text-muted { color: var(--text-muted); }

/* --- Layout --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.section {
  padding: var(--space-section) 0;
  position: relative;
}

.section-sm {
  padding: var(--space-section-sm) 0;
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

.section-dark {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

/* Subtle gradient depth on dark sections */
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(166, 25, 46, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(166, 25, 46, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* --- Navigation --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(0, 0, 0, 0.85);   /* black anchored nav (white text, red portal) on every page */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Transparent nav state — applied while scrolled over a video hero */
.nav.nav-over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav.nav-over-hero .nav-logo,
.nav.nav-over-hero .nav-links a {
  color: rgba(255, 255, 255, 0.92);
}
.nav.nav-over-hero .nav-links a:hover,
.nav.nav-over-hero .nav-links a.active {
  color: #fff;
}
/* Right-cluster buttons over a dark video hero — flip outline to white. */
.nav.nav-over-hero .nav-cta-locate {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: transparent;
}
.nav.nav-over-hero .nav-cta-locate:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
/* Provider Portal stays solid red over the hero — high contrast. */
.nav.nav-over-hero .nav-cta-portal {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.nav.nav-over-hero .nav-cta-portal:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #fff;
}
.nav.nav-over-hero .nav-toggle {
  color: #fff;
}

/* Smooth anchor scrolling that respects the fixed nav height */
html {
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.01em;
}

.nav-logo img { height: 32px; width: auto; }

/* Light/dark logo swap — show red mark on light pages, white mark over hero video */
.nav-logo-img { height: 40px; width: auto; display: block; }
/* Nav is dark on every page → always show the white wordmark */
.nav-logo-light { display: none; }
.nav-logo-dark { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

/* Logo + dropdowns grouped tightly on the left per Cassandra slide 01. */
.nav-left {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  font-weight: 500;
  transition: color var(--transition);
  position: relative;
  letter-spacing: 0.01em;
}

/* Animated underline — draws left-to-right, retracts right-to-left */
.nav-links a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -4px;
  left: 0;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.nav-links a:hover,
.nav-links a.active { color: #fff; }

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- Nav Dropdown (Products / Solutions) --- */
.nav-has-dropdown { position: relative; }
.nav-caret {
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.75em;
  opacity: 0.6;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-has-dropdown:hover > a .nav-caret,
.nav-has-dropdown:focus-within > a .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 240px;
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(24, 21, 18, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 100;
}
.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Hover bridge — invisible padding above dropdown so the cursor doesn't lose it */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -0.6rem;
  left: 0;
  right: 0;
  height: 0.6rem;
}

.nav-dropdown a {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.nav-dropdown a::after { display: none; }  /* Suppress the underline animation inside dropdowns */
.nav-dropdown a:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

/* Transparent nav state — caret follows white text */
.nav.nav-over-hero .nav-caret { opacity: 0.7; }

/* Dropdown text must stay dark even when the parent nav is in over-hero (white text) mode */
.nav.nav-over-hero .nav-dropdown a { color: var(--text-secondary); }
.nav.nav-over-hero .nav-dropdown a:hover { color: var(--text-primary); }

/* Mega-dropdown — wide panel with multiple columns (Explore -> Products + Solutions) */
.nav-dropdown.nav-mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  min-width: 560px;
  padding: 1.5rem 1.75rem;
  left: 50%;
  transform: translate(-50%, -6px);
}
.nav-has-dropdown:hover > .nav-dropdown.nav-mega,
.nav-has-dropdown:focus-within > .nav-dropdown.nav-mega {
  transform: translate(-50%, 0);
}
.nav-mega-col { display: flex; flex-direction: column; }

/* Mega-dropdown column heading is now a clickable red link with arrow */
.nav-dropdown a.nav-mega-heading-link {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--red);
  margin: 0 0 0.4rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav-dropdown a.nav-mega-heading-link:hover {
  background: rgba(166, 25, 46, 0.06);
  color: var(--red-hover, var(--red));
}
.nav-dropdown a.nav-mega-heading-link::after { display: none; }
.nav.nav-over-hero .nav-dropdown a.nav-mega-heading-link { color: var(--red); }

/* Mobile menu section headings (Practice / Explore / More) */
/* Sits inside the always-black .nav-mobile-menu overlay, so like the links in
   it, these do not use the themed --text-muted / --border tokens. */
.nav-mobile-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 1.25rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-mobile-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.nav-cta { display: flex; gap: 0.6rem; align-items: center; }

/* Locate a Provider — outlined / translucent pill, per Cassandra slide 01. */
.nav-cta-locate {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 100px;
  background: transparent;
  transition: all var(--transition);
}
.nav-cta-locate:hover {
  color: #fff;
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Provider Portal — solid red pill, paired beside Locate a Provider. */
.nav-cta-portal {
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: var(--red);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--red);
  border-radius: 100px;
  transition: all var(--transition);
}
.nav-cta-portal:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #fff;
}

/* The hamburger / close control. It sits ON the black nav bar, which is black
   on every page, so it cannot use var(--text-primary): that token is black on
   light content pages, which rendered this control black-on-black at a
   measured 1.21:1 contrast. On a phone this button is the ONLY way to open
   navigation, so it was effectively invisible on most of the site. */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.5rem;
}

/* Full-screen overlay that opens directly beneath the black nav bar.
   Its colours are hardcoded rather than themed on purpose: --bg-primary flips
   with the page theme (off-white on content pages, #1B2026 on the dark home
   hub), so the menu used to render off-white with dark text hanging off a
   black nav on every content page. The nav is black everywhere, so the menu
   under it is black everywhere too. */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  padding: 2rem;
  z-index: 999;
  overflow-y: auto;
}

.nav-mobile-menu.open {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Matches .nav-links a on the black bar. Same reason as the panel above:
   var(--text-secondary) and var(--border) both flip with the theme, which is
   wrong against a permanently black overlay. */
.nav-mobile-menu a {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  font-weight: 400;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: block;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: 100px;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all var(--transition);
  letter-spacing: 0.02em;
}

.btn-primary {
  background: var(--red);
  color: #fff;
}

/* Fill animation on hover */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--red-hover);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: 0;
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary span,
.btn-primary { z-index: 1; color: #fff; }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}
.btn-secondary:hover {
  color: var(--text-primary);
  border-color: rgba(24, 21, 18, 0.4);
  background: rgba(24, 21, 18, 0.04);
}

/* Secondary buttons over video / dark hero — flip to white-on-translucent so they're readable */
.hero-video .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero-video .btn-secondary:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.15);
}

.btn-ghost {
  background: transparent;
  color: var(--red);
  padding: 0.5rem 0;
}
.btn-ghost:hover { color: var(--red-hover); }
.btn-ghost::after {
  content: ' \2192';
  display: inline-block;
  transition: transform var(--transition);
}
.btn-ghost:hover::after { transform: translateX(4px); }

.btn-lg { padding: 1.1rem 2.5rem; font-size: var(--text-base); }
.btn-sm { padding: 0.6rem 1.25rem; font-size: var(--text-xs); }

/* --- Cards — Glassmorphism --- */
.card {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: all var(--transition);
  position: relative;
  will-change: transform;
}

/* Subtle warm-tone top edge */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.card-img-wrapper {
  overflow: hidden;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.card-img-wrapper img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.card:hover .card-img-wrapper img {
  transform: scale(1.06);
}

.card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 0.75rem;
}

.card h3 { margin-bottom: 0.75rem; font-size: var(--text-xl); }
.card p { font-size: var(--text-sm); }

/* --- Hero --- */
.hero {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + 5rem) 0 4rem;
}

/* Cinematic video hero — full-bleed background with overlay.
   min-height: 100vh so the hero always fills exactly one viewport
   (page 1 of 5 in the home-page layout). The video uses object-fit:
   contain so the entire video shows; any letterbox space is filled
   by the dark hero background. */
.hero-video {
  min-height: 100vh;
  padding: 0;
  color: #fff;
  /* Text block vertically centered in the video per Cassandra 7/13:
     "should be in the middle of the video — resting at the bottom puts
     too much focus on the video." */
  align-items: center;
  background: #14181D;   /* darker step of the home blue-gray (#1B2026) */
}
/* Hero container overrides the global centered container so the text
   sits flush-left against the page edge (per Cassandra: "left-side align
   the text so people may see the video better"). */
.hero-video .container {
  max-width: none;
  margin: 0;
  padding-left: clamp(1.5rem, 5vw, 6rem);
  padding-right: clamp(1.5rem, 5vw, 6rem);
  position: relative;
  z-index: 2;
}
/* Hero CTAs a touch bigger (Cassandra 7/13: "a little more noticeable,
   not by much") */
.hero-video .hero-actions .btn {
  padding: 1.25rem 2.9rem;
  font-size: 1.05rem;
}
.hero-video .hero-subtitle { color: rgba(255, 255, 255, 0.82); }
.hero-video h1 { color: #fff; }
.hero-video .section-label { color: rgba(255, 255, 255, 0.7); }
.hero-video .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-video .hero-overlay {
  position: absolute;
  inset: 0;
  /* Left-weighted gradient — keeps text legible on the left half while
     letting the right half of the video breathe through (per Cassandra). */
  background:
    linear-gradient(90deg,
      rgba(20, 24, 29, 0.78) 0%,
      rgba(20, 24, 29, 0.55) 45%,
      rgba(20, 24, 29, 0.18) 75%,
      rgba(20, 24, 29, 0.05) 100%),
    linear-gradient(180deg, rgba(20, 24, 29, 0.15) 0%, rgba(20, 24, 29, 0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  max-width: 640px;
  text-align: left;
  position: relative;
  z-index: 2;
}
/* Nudge the centered hero block down a touch (Chance 7/13: exact center
   read as off-center against the video) */
.hero-video .hero-content { margin-top: 5vh; }
.hero-video .hero-content h1 {
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 1.25rem;
}
.hero-video .hero-content .hero-subtitle {
  max-width: 520px;
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
/* Compact hero on shorter laptop screens — keeps the audience picker above the fold. */
@media (max-height: 820px) {
  .hero-video .container { padding-bottom: 3rem; }
  .hero-video .hero-content h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.4rem); }
  .hero-video .hero-content .hero-subtitle { font-size: var(--text-base); margin-bottom: 1.25rem; }
}


.hero h1 {
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero ambient glow */
.hero::after {
  content: '';
  position: absolute;
  top: 20%;
  right: -10%;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(166, 25, 46, 0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* --- Section Headers --- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-header h2 { margin-bottom: 1.25rem; }
.section-header p { font-size: var(--text-lg); }

.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin-bottom: 1.5rem;
}

/* --- Stat Bar --- */
/* =============================================
   PAGE 2 — Stats band + Logo Marquee + Product Explorer
   One viewport per Cassandra slide 02-b. Content anchored to the top
   (right under the hero); product-explorer-slot reserves the remaining
   height until item #11 fills it.
   ============================================= */
.page-two {
  min-height: 100vh;
  padding: 0 0 2.5rem;
  display: flex;
  flex-direction: column;
}

/* PAGE 3 — Choose Your Path. Was one full centered viewport; Cassandra
   7/13 flagged the resulting dead space above the section ("a little too
   much of a gap from products to fabrication"), so it now sizes to its
   content with comfortable padding. */
.page-three {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4.5rem;
}
/* Section eyebrow reads bigger (Cassandra 7/13: "increase the font size
   on the title of this one as well" — the CHOOSE YOUR PATH label) */
.page-three .section-header .section-label { font-size: 0.9rem; }
.page-three .section-header { margin-bottom: 1.75rem; }
.page-three .section-header h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  margin-bottom: 0.5rem;
}
.page-three .section-header p { font-size: var(--text-base); }
.page-three .tier-card {
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.page-three .tier-card h3 {
  font-size: var(--text-lg);
  margin-bottom: 0.35rem;
}
.page-three .tier-card .subtitle { margin-bottom: 1rem; }
.page-three .tier-features { margin-bottom: 1.25rem; font-size: 0.85rem; }
.page-three .tier-features li { padding: 0.4rem 0; }
.page-three .tier-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.page-three .tier-badge { top: -11px; font-size: 0.6rem; padding: 0.3rem 1rem; }
/* Pin the CTA button to the bottom of each card. Bullets above vary in
   line count between cards (e.g. "Returned in 3–7 business days" wraps
   to 2 lines while others stay on 1), so without margin-top: auto the
   buttons sit at different Y positions. With it, all 3 buttons align
   on the same horizontal plane across the row, matching Cassandra's
   slide 03 layout. */
.page-three .tier-card .btn { margin-top: auto; }

/* PAGE 4 — Industries We Serve. Content-sized with balanced top +
   bottom padding so the heading + grid + callout visually center
   within the section. Per Cassandra slide 04. */
.page-four {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.page-four .section-header { margin-bottom: 1.5rem; }

/* PAGE 5 — International band per Cassandra slide 05-b. Surrounding
   section stays on the cream page background; content sits inside a
   rounded card with a subtle red glow on the border + corners so it
   feels like a contained call-out without breaking the home page's
   cream + red palette. */
.page-five {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.international-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid rgba(166, 25, 46, 0.35);
  border-radius: 24px;
  padding: clamp(2.25rem, 1rem + 3vw, 4rem);
  overflow: hidden;
  box-shadow: 0 0 40px rgba(166, 25, 46, 0.06), var(--shadow-sm);
}
.international-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, rgba(166, 25, 46, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(166, 25, 46, 0.07), transparent 55%);
  pointer-events: none;
}
.international-card > * { position: relative; z-index: 1; }

.international-card .section-label {
  color: var(--red);
  margin-bottom: 1rem;
}
.international-card h2 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.international-card > p {
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 2rem;
}

.international-card-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.international-card-actions .btn { gap: 0.55rem; }

/* Red-tinted callout below the industry grid (slide 04). Smiley +
   small label + body + red "Find a Solution Near You" button. */
.audience-callout {
  margin-top: 2rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 1.25rem 1.5rem;
  background: rgba(166, 25, 46, 0.07);
  border: 1px solid rgba(166, 25, 46, 0.22);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.audience-callout-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.audience-callout-text { flex: 1; min-width: 220px; }
.audience-callout-text .section-label {
  margin-bottom: 0.25rem;
  color: var(--red);
}
.audience-callout-text p {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
  font-size: var(--text-base);
}

/* Stats band — distinct tan background spanning full viewport width,
   sits flush at the top of page-two right after the hero. */
.stat-band {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
}
.stat-band-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Slimmer 4-stat row, generous horizontal spacing between numbers,
   thin vertical dividers between cells per Cassandra slide 02-b. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}
.stat-grid > * {
  padding: 0.35rem 1.75rem;
  border-right: 1px solid var(--border-hover);
}
.stat-grid > *:last-child { border-right: none; }

.stat-number {
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.3rem;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Marquee tucks right under the stat band */
/* Extra air between the logo banner and the product explorer below it
   (Cassandra 7/13: "spacing between Contact Digitizer and scrolling
   banner could be a little more") */
.page-two .marquee-container { margin: 0 0 1.5rem; padding: 1rem 0 0.75rem; }

/* =============================================
   PRODUCT EXPLORER (Cassandra slide 02-b)
   Locked to one viewport: layout area + pills row split the available
   space inside page-two after the marquee. Layout grid (text + photo)
   takes all the room it can; pills row sits at the bottom as a full-
   width centered row. Because the outer dimensions are pinned to the
   viewport, switching tabs never reflows the layout — only the
   content inside the left column changes.
   ============================================= */
.product-explorer {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0 1.25rem;
  min-height: 0;
}
.product-explorer > .container {
  max-width: 1440px;
  width: 100%;
  padding: 0 clamp(1.5rem, 3vw, 3rem);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.product-explorer-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: 0;
}

/* Left column: text content flows naturally; Learn More keeps full
   column width per Chance's "spans across a larger length" ask. */
.product-explorer-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.product-explorer-content .btn[data-pe-cta] {
  width: 100%;
  text-align: center;
}
.product-explorer-content .section-label {
  margin-bottom: 1rem;
  /* Product name reads bigger per Cassandra 7/13 ("increase the font size
     on the name of the product — Contact Digitizer, Mill Machine, etc.") */
  font-size: 0.95rem;
  letter-spacing: 0.16em;
}
.product-explorer-content h2 {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  margin-bottom: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.product-explorer-content > [data-pe-body] {
  margin-bottom: 1.5rem;
}
.product-explorer-content > [data-pe-body] p {
  color: var(--text-secondary);
  font-size: var(--text-lg);
  line-height: 1.55;
}
/* Paragraph space between the two body paragraphs (per Cassandra deck) */
.product-explorer-content > [data-pe-body] p + p {
  margin-top: 0.9rem;
}

.product-explorer-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.product-explorer-features li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.5;
}
/* Red filled circle with white check mark — matches Cassandra slide 02-b. */
.product-explorer-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--red);
}
.product-explorer-features li::after {
  content: '';
  position: absolute;
  left: 5px;
  top: calc(0.35em + 5px);
  width: 8px;
  height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  transform-origin: center;
}

/* Right column: photo + pills as one tight stacked unit, vertically
   centered relative to the text on the left via align-items: center
   on the grid. */
.product-explorer-visual {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Horizontal photo container, 3:2 aspect. Most product photos are
   3:2 or close — object-fit: cover fills the box edge-to-edge with
   minimal cropping and no white edges. */
.product-explorer-image {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at center, var(--red-glow) 0%, transparent 65%),
    var(--sf-white);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-sm);
}
.product-explorer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}
/* Low-res renders (e.g. the Amfit Scan app shot) display contained instead
   of cover-zoomed so they aren't blown up past native resolution. */
.product-explorer-image img.is-contain {
  object-fit: contain;
  padding: 1.25rem;
}

/* Pills overlap the photo's top and bottom edges (Cassandra 7/13:
   bigger buttons the 45-60 audience can't miss, split into two rows,
   "even if they overlap the image a little"). The media wrapper is the
   positioning context; each row straddles an edge via translateY. */
.product-explorer-media {
  position: relative;
  margin: 1.4rem 0;
}
.product-explorer-tabs {
  display: flex;
  gap: 0.55rem;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.product-explorer-tabs--overlay-top,
.product-explorer-tabs--overlay-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
}
.product-explorer-tabs--overlay-top { top: 0; transform: translateY(-50%); }
.product-explorer-tabs--overlay-bottom { bottom: 0; transform: translateY(50%); }

.product-explorer-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  /* Solid surface + shadow so the pills read clearly over the photo */
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-hover);
  color: var(--text-primary);
  padding: 0.8rem 1.3rem;
  border-radius: 100px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.product-explorer-tab:hover {
  border-color: var(--red);
  background: var(--bg-card-hover, #f5f2ec);
  color: var(--text-primary);
}
.product-explorer-tab.is-active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.product-explorer-tab:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.product-explorer-tab-icon { flex-shrink: 0; display: block; width: 18px; height: 18px; }

@media (max-width: 880px) {
  .product-explorer-layout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    min-height: 0;
  }
  .product-explorer-visual { order: -1; }
  .product-explorer-media { margin: 1.1rem 0; }
  /* Visually hidden, NOT display:none. These tabs collapse to icon-only on
     phones, and display:none removes the label from the accessibility tree
     entirely — so all five product tabs announced as bare "button" and the
     homepage's main product navigation was unusable with a screen reader.
     Lighthouse mobile flagged all 5 as having no accessible name. This keeps
     the text readable to assistive tech while looking identical on screen. */
  .product-explorer-tab span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .product-explorer-tab { padding: 0.7rem; }
}

/* --- Marquee Ticker --- */
.marquee-container {
  overflow: hidden;
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
  position: relative;
}

.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-primary), transparent);
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-primary), transparent);
}

.marquee {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  animation: marquee-scroll 28s linear infinite;
  /* No padding-right here. With a duplicated track + translateX(-50%) loop,
     trailing padding is non-repeating and causes a visible jump at wrap.
     The `gap` between items handles spacing including the seam between
     the last duplicate and the first original. */
}

.marquee-item {
  white-space: nowrap;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marquee-item .dot {
  width: 4px;
  height: 4px;
  background: var(--red);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Customer-logo marquee variant — full-color logos on the page bg, "Trusted by" eyebrow above. */
.marquee-container.marquee-logos {
  flex-direction: column;
  align-items: stretch;
  padding: 1.75rem 0 1.5rem;
  gap: 0.85rem;
}
.marquee-container.marquee-logos .marquee-eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}
.marquee-container.marquee-logos .marquee {
  gap: 4rem;
  animation-duration: 32s;
}
/* On mobile the visible viewport is much narrower, so the same total
   track length feels slower. Cut the duration further so the loop
   actually moves at a useful pace on a phone. */
@media (max-width: 600px) {
  .marquee { animation-duration: 18s; }
  .marquee-container.marquee-logos .marquee {
    gap: 2.5rem;
    animation-duration: 22s;
  }
}
.marquee-container.marquee-logos .marquee-item {
  text-transform: none;
  letter-spacing: normal;
  padding: 0;
}
.marquee-container.marquee-logos .marquee-item img {
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.marquee-container.marquee-logos .marquee-item:hover img {
  opacity: 1;
  transform: scale(1.04);
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Product Tiers --- */
.tier-card {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 3rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  will-change: transform;
}

.tier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-glow), transparent);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.tier-card:hover {
  border-color: var(--red);
  transform: translateY(-8px);
  box-shadow:
    0 0 40px rgba(166, 25, 46, 0.1),
    var(--shadow-lg);
}

.tier-card.featured {
  border-color: rgba(166, 25, 46, 0.4);
  box-shadow: 0 0 60px rgba(166, 25, 46, 0.08);
}

.tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--red);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.4rem 1.25rem;
  border-radius: 100px;
}

.tier-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: rgba(166, 25, 46, 0.08);
  border: 1px solid rgba(166, 25, 46, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.tier-card h3 {
  margin-bottom: 0.5rem;
  font-size: var(--text-xl);
}

.tier-card .subtitle {
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: 2rem;
}

.tier-features {
  list-style: none;
  text-align: left;
  margin-bottom: 2.5rem;
}

.tier-features li {
  padding: 0.6rem 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tier-features li::before {
  content: '\2713';
  color: var(--red);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.8em;
}

/* --- How It Works Steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  position: relative;
}

/* Connecting line */
.steps::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), var(--border), transparent);
  z-index: 0;
}

.step {
  text-align: center;
  padding: 1.5rem;
  position: relative;
  z-index: 1;
}

.step h4 { margin-bottom: 0.75rem; font-size: var(--text-base); }
.step p { font-size: var(--text-sm); }

/* --- CTA Banner --- */
.cta-banner {
  background:
    linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);
  padding: clamp(3rem, 3rem + 3vw, 6rem) clamp(2rem, 2rem + 2vw, 4rem);
  text-align: center;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(0,0,0,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.cta-banner h2 { color: #fff; margin-bottom: 1rem; position: relative; z-index: 1; }
.cta-banner p {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2.5rem;
  font-size: var(--text-lg);
  position: relative;
  z-index: 1;
}

.cta-banner .btn-primary {
  background: #fff;
  color: var(--red);
}
.cta-banner .btn-primary::before { background: #f0f0f0; }
.cta-banner .btn-primary:hover { color: var(--red); }

.cta-banner .btn-secondary {
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}
.cta-banner .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* Split variant (deck slide 62): left-aligned text block, buttons on the right. */
.cta-banner--split {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(2rem, 2rem + 2vw, 4rem);
}
.cta-banner--split > * { position: relative; z-index: 1; }
.cta-banner--split .section-label { color: rgba(255, 255, 255, 0.8); margin-bottom: 0.75rem; }
.cta-banner--split h2 { font-size: var(--text-xl); margin-bottom: 0.5rem; }
.cta-banner--split p { margin-bottom: 0; font-size: var(--text-base); max-width: 560px; }
.cta-banner--split .cta-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 780px) {
  .cta-banner--split { grid-template-columns: 1fr; }
}

/* --- Footer ---
   No margin-top here: the 5rem padding-top is enough breathing room.
   The previous margin-top stacked on top of the preceding section's
   padding-bottom and the footer's own 5rem padding-top, creating a
   visible dead stretch between the last page section and the footer. */
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  padding: 5rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}

.footer-brand p { font-size: var(--text-sm); max-width: 300px; }

.footer h4 {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-links { list-style: none; }

.footer-links li { margin-bottom: 0.75rem; }

.footer-links a {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 400;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--text-primary); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Legal links in the footer bottom bar (privacy / accessibility / contact).
   Underlined rather than color-only so the affordance survives at this size
   and does not depend on hue, and given a 44px tap target on phones. */
.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-legal a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
  color: #fff;
}

@media (max-width: 768px) {
  .footer-legal { gap: 0.5rem 1.5rem; }
  .footer-legal a { padding: 0.5rem 0; }
}

/* =============================================
   ANCHORED — black feature bands. The off-white canvas (#F6F3ED) is
   punctuated by a few full-black sections (stats, choose-your-path,
   global-support CTA) + the black footer. Re-scoping the tokens here
   flips their contents to white-on-black. On the all-black home these
   are simply consistent with the page. Placed late so it wins over the
   sections' original var(--bg-secondary) backgrounds.
   ============================================= */
.section-dark,
.stat-band,
.international-card,
.footer {
  background: #000;
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.74);
  --text-muted: rgba(255, 255, 255, 0.52);
  --bg-secondary: rgba(255, 255, 255, 0.06);
  --bg-glass: rgba(255, 255, 255, 0.05);
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(255, 255, 255, 0.28);
}

/* Front-page palette = Option A (Cassandra, locked 2026-07-09): on the
   blue-gray home the black bands become lifted panels — bordered sections
   #232A32, cards inside them #2C343D — so they read as layers instead of
   merging into the page. The footer keeps its global black. */
body.theme-dark .section-dark,
body.theme-dark .international-card {
  background: #232A32;
  --bg-secondary: #2C343D;
  --bg-glass: #2C343D;
  --bg-card: #2C343D;
  --bg-card-hover: #37414C;
}
/* Stat band ↔ marquee swap (Chance, 7/9): stats take the darker page tone,
   the logo marquee takes the lighter #232A32 strip — steps the hero→page
   transition down gradually and gives the logos the lighter surface. */
body.theme-dark .stat-band {
  background: #1B2026;
  --bg-card: #2C343D;
  --bg-card-hover: #37414C;
}
/* Logo strip stays in the dark palette per Cassandra (7/9). Known issue,
   parked for a live call: navy/dark logo marks wash out on #232A32 — the
   off-white strip fixed it but broke the all-dark look. */
body.theme-dark .marquee-container.marquee-logos {
  background: #232A32;
  border-bottom: 1px solid var(--border);
}
body.theme-dark .marquee-container.marquee-logos::before {
  background: linear-gradient(to right, #232A32, transparent);
}
body.theme-dark .marquee-container.marquee-logos::after {
  background: linear-gradient(to left, #232A32, transparent);
}

/* --- Forms --- */
.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(166, 25, 46, 0.1);
}

/* White-surface elements inside dark bands. The dark sections redefine the
   text variables to translucent white, which made calculator input text and
   result-card labels invisible on their WHITE backgrounds (white-on-white —
   Chance 7/23, ROI page). Pin them back to dark-on-white. */
.section-dark .form-input,
.section-dark .form-select,
.section-dark .form-textarea,
.stat-band .form-input,
.international-card .form-input {
  color: #181512;
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.18);
}
.section-dark .result-card,
.stat-band .result-card,
.international-card .result-card {
  --text-muted: #6f6a63;
  --text-primary: #181512;
}

.form-textarea { min-height: 120px; resize: vertical; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* --- Contact Page — Cassandra slides 10-12 --- */
.contact-page-header {
  padding-top: calc(var(--nav-height) + 1.75rem);
  padding-bottom: 0.75rem;
  text-align: center;
}

.contact-page-header .section-label {
  color: var(--red);
  margin-bottom: 0.75rem;
}

.contact-page-header h1 {
  font-size: clamp(2.75rem, 1.7rem + 3.5vw, 4.5rem);
  margin-bottom: 0.75rem;
}

.contact-page-header p {
  max-width: 820px;
  margin: 0.15rem auto;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: 1.4;
}

.contact-tabs-section {
  padding: 0.75rem 0 2.5rem;
}

.contact-tab-shell {
  max-width: 1120px;
  margin: 0 auto;
}

.contact-tab-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--shadow-sm);
}

.contact-tab {
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 76px;
  padding: 1rem 1.5rem;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background var(--transition), color var(--transition);
}

.contact-tab:last-child {
  border-right: 0;
}

.contact-tab:hover {
  background: rgba(255, 255, 255, 0.52);
}

.contact-tab.is-active {
  background: var(--red);
  color: #fff;
}

.contact-tab-icon,
.contact-panel-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(166, 25, 46, 0.1);
  color: var(--red);
}

.contact-tab.is-active .contact-tab-icon {
  background: #fff;
  color: var(--red);
}

.contact-tab-icon svg,
.contact-panel-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-tab strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.contact-tab small {
  display: block;
  color: inherit;
  font-size: var(--text-sm);
  line-height: 1.35;
  opacity: 0.86;
}

.contact-panel {
  margin-top: 1rem;
  padding: clamp(1.5rem, 0.9rem + 2vw, 2.35rem);
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-panel[hidden] {
  display: none;
}

.contact-panel-intro {
  padding-right: 2rem;
  border-right: 1px solid var(--border);
}

.contact-panel-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
}

.contact-panel h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}

.contact-panel p {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.9rem;
}

.contact-form .form-group {
  margin-bottom: 0;
}

.contact-form .form-input,
.contact-form .form-select,
.contact-form .form-textarea {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

.contact-form .form-textarea {
  min-height: 88px;
}

.contact-form-wide {
  grid-column: 1 / -1;
}

.contact-radio-group {
  border: 0;
  padding: 0;
  margin: 0;
}

.contact-radio-group legend {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.contact-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: 2rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.contact-radio-group input {
  accent-color: var(--red);
  width: 18px;
  height: 18px;
}

.contact-form-footer {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.contact-form-footer .btn {
  min-width: 190px;
  border-radius: var(--radius);
}

.contact-form-footer p {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 900px) {
  .contact-page-header {
    padding-top: calc(var(--nav-height) + 2rem);
  }

  .contact-tab-list,
  .contact-panel,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-tab {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .contact-tab:last-child {
    border-bottom: 0;
  }

  .contact-panel-intro {
    padding-right: 0;
    padding-bottom: 1.5rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 560px) {
  .contact-page-header h1 {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }

  .contact-tab,
  .contact-panel {
    padding: 1.25rem;
  }

  .contact-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .contact-form-footer .btn {
    width: 100%;
  }
}

/* --- Page Header --- */
.page-header {
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 4rem;
  position: relative;
}

/* Breadcrumb-only headers (product detail pages) — the h1 lives in the hero
   below, so collapse the otherwise-empty bottom padding AND tighten the
   space below the nav. The page-header was creating a 4rem gap that stacked
   with the following section's top padding and looked like dead space. */
.page-header:not(:has(h1)) {
  padding-top: calc(var(--nav-height) + 1rem);
  padding-bottom: 0;
}
.page-header:not(:has(h1)) .breadcrumb {
  margin-bottom: 0;
}
/* Pull the first .section after a breadcrumb-only page header closer so the
   hero doesn't sit miles below the breadcrumb. */
.page-header:not(:has(h1)) + .section {
  padding-top: var(--space-section-sm);
}

.page-header .breadcrumb {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.page-header .breadcrumb a { color: var(--text-muted); }
.page-header .breadcrumb a:hover { color: var(--red); }

.page-header h1 { margin-bottom: 1rem; }
.page-header p { font-size: var(--text-lg); max-width: 700px; }

.product-specs { list-style: none; margin: 1.5rem 0; }

.product-specs li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
}

.product-specs .label { color: var(--text-muted); font-weight: 400; }
.product-specs .value { color: var(--text-primary); font-weight: 600; }

/* --- ROI Calculator --- */
.calculator {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 3rem;
}

.calculator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
/* A 1fr track's automatic minimum is min-content, and a <select> with a
   long option ("Scanner data (Contact Digitizer or Impress)") refuses to
   shrink — pushing the whole page wider than a phone. min-width: 0 lets
   the columns compress; the select then truncates instead of overflowing. */
.calculator-grid > * { min-width: 0; }

/* --- Placeholder insight/article pages --- */
.placeholder-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.placeholder-article .article-kicker {
  display: inline-block;
  color: var(--red);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.placeholder-article h1 {
  margin-bottom: 1.25rem;
}

.placeholder-article p {
  margin-bottom: 1.25rem;
  font-size: var(--text-lg);
}

.placeholder-article .placeholder-note {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  font-size: var(--text-sm);
}

.result-card {
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
}

.result-card .number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: -0.02em;
}

.result-card .label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 100px;
}

/* --- Modular ROI Calculator: toggles + panels + stack total --- */
.calc-toggle-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.stack-total-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.stack-empty {
  padding: 1.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  text-align: center;
}

@media (max-width: 768px) {
  .calc-toggle-row { grid-template-columns: 1fr; }
  .stack-total-grid { grid-template-columns: 1fr; }
}

/* --- Audience Picker Grid (homepage standalone band) ---
   Lives on the light cream background now, so the buttons get dark
   text + subtle border, with Amfit red on hover. */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
.audience-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.9rem 1.1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.audience-btn:hover {
  color: var(--red);
  background: var(--sf-white);
  border-color: var(--red);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========================================
   FIND A PROVIDER (locations.html)
   ======================================== */

/* Search bar wrapper — sits below the page header */
.locations-search {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.locations-search-grid {
  display: grid;
  grid-template-columns: 2.5fr 1fr 0.9fr 1.1fr;
  gap: 1rem;
  align-items: end;
}

.locations-status {
  margin-top: 0.85rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 1.2em;
}

.loc-pin-icon {
  display: inline-block;
  margin-right: 0.35rem;
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .locations-search-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .locations-search-grid { grid-template-columns: 1fr; }
  .locations-search { padding: 1.25rem; }
}

/* Map + List split layout */
.locations-layout {
  display: grid;
  /* Deck (slide 60): provider list = narrow LEFT rail, map = larger RIGHT pane. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1.5rem;
  align-items: start;
}

.map-pane {
  order: 2;
  position: sticky;
  top: calc(var(--nav-height) + 1rem);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.loc-map {
  width: 100%;
  height: clamp(520px, 70vh, 760px);
  background: var(--bg-secondary);
}

.loc-map.is-disabled {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc-map-placeholder {
  text-align: center;
  padding: 3rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  background: repeating-linear-gradient(45deg, var(--bg-secondary), var(--bg-secondary) 12px, rgba(0,0,0,0.03) 12px, rgba(0,0,0,0.03) 24px);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.locations-token-notice {
  background: rgba(166, 25, 46, 0.06);
  border: 1px solid rgba(166, 25, 46, 0.25);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.locations-token-notice code {
  background: rgba(0,0,0,0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* Toolbar bar above both columns — keeps map and list aligned at top */
.locations-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.25rem 0.25rem 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}

.locations-toolbar-count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
  letter-spacing: 0.005em;
}
.locations-toolbar-count strong {
  color: var(--text-primary);
  font-weight: 600;
}

.locations-toolbar-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.locations-toolbar-reset:hover {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-glow);
}

/* Provider list */
.list-pane {
  display: flex;
  flex-direction: column;
}

.locations-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: clamp(520px, 70vh, 760px);
  overflow-y: auto;
  padding-right: 0.25rem;
  scroll-behavior: smooth;
}

/* Custom scrollbar — subtle */
.locations-list::-webkit-scrollbar { width: 8px; }
.locations-list::-webkit-scrollbar-track { background: transparent; }
.locations-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.locations-list::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

.locations-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--bg-glass);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.locations-empty strong { color: var(--text-primary); }
.locations-empty a { color: var(--red); text-decoration: underline; }

/* Provider card.
   Light, low-contrast against the cream page bg — matches the brand
   and keeps the eye on the map + the active card. */
.provider-card {
  background: rgba(255, 253, 247, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.provider-card:hover,
.provider-card:focus-visible {
  outline: none;
  background: var(--sf-white);
  border-color: var(--border-hover);
}
.provider-card.is-active {
  outline: none;
  background: var(--sf-white);
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red-glow);
}

.provider-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.provider-card-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}

.card-distance {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  background: var(--red-glow);
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.provider-card-addr {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0 0 0.55rem;
}

.provider-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: var(--text-sm);
  margin-bottom: 0.7rem;
}

.card-link {
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-hover);
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.card-link:hover { color: var(--red); border-color: var(--red); }

.provider-card-actions {
  display: flex;
  gap: 0.5rem;
}
.provider-card-actions .btn {
  padding: 0.45rem 0.9rem;
  font-size: var(--text-xs);
}

/* Map pin — Amfit orthotic.
   IMPORTANT: .loc-pin-wrap is the element handed to Mapbox as the marker root.
   Mapbox writes `transform: translate(X, Y)` on it every frame to keep it
   geographically anchored. We MUST NOT add transforms or transitions to
   .loc-pin-wrap — apply visuals to the inner .loc-pin <img> instead.
   Marker anchor='bottom' is set in JS so the heel of the orthotic sits on
   the lat/lng. The .loc-pin transform-origin matches that anchor so hover
   scaling doesn't shift the geographic point. */
.loc-pin-wrap {
  display: block;
  width: 14px;
  height: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  /* No transition / no transform here — Mapbox owns positioning. */
}
.loc-pin {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transform-origin: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  pointer-events: none;
}
.loc-pin-wrap:hover .loc-pin,
.loc-pin-wrap.is-active .loc-pin {
  transform: scale(1.6);
  box-shadow: 0 0 0 4px var(--red-glow), 0 2px 6px rgba(0,0,0,0.4);
}
.loc-pin-wrap.is-active { z-index: 5; }

/* Amfit Agent pins ("Agents" per Kyle 7/23, formerly Distributors) — black
   with a red ring so they read as distinct from the standard red dots. */
.loc-pin--agent {
  background: #14100C;
  border-color: var(--red);
}
.loc-pin-wrap:hover .loc-pin--agent,
.loc-pin-wrap.is-active .loc-pin--agent {
  box-shadow: 0 0 0 4px rgba(20,16,12,0.25), 0 2px 6px rgba(0,0,0,0.4);
}

/* "Amfit Agent" tag under the practice name (cards + popups) */
.loc-agent-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(166,25,46,0.35);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-top: 0.25rem;
}

/* User-location pin — keep as a blue dot so it's visually distinct from
   the orthotic provider pins. */
.loc-user-pin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-blue-deep);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(40, 83, 107, 0.18), 0 2px 6px rgba(0,0,0,0.4);
}

/* Mapbox popup — match brand */
.loc-popup .mapboxgl-popup-content {
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-md);
  font-family: var(--font-sans);
}
.loc-popup .mapboxgl-popup-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 0.35rem;
  color: var(--text-primary);
}
.loc-popup .mapboxgl-popup-content p {
  font-size: var(--text-sm);
  margin: 0.2rem 0;
  color: var(--text-secondary);
  line-height: 1.45;
}
.loc-popup .mapboxgl-popup-content a {
  color: var(--red);
  text-decoration: none;
  font-weight: 500;
}
.loc-popup .mapboxgl-popup-content a:hover { text-decoration: underline; }
.loc-popup .mapboxgl-popup-tip { border-top-color: var(--sf-white); }
.loc-popup .mapboxgl-popup-close-button {
  font-size: 1.4rem;
  color: var(--text-muted);
  padding: 0.15rem 0.5rem;
}

/* Mobile: stack map above list */
@media (max-width: 900px) {
  .locations-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .map-pane {
    position: static;
    order: 0; /* single column: map back above the list */
  }
  .loc-map {
    height: clamp(380px, 50vh, 480px);
  }
  .locations-list {
    max-height: none;
  }
}

/* --- GSAP Reveal States — only hide when JS is loaded --- */
.js-ready .reveal { opacity: 0; }
.js-ready .reveal-up { opacity: 0; transform: translateY(35px); }
.js-ready .reveal-scale { opacity: 0; transform: scale(0.98); }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }

  .hero { min-height: auto; padding: calc(var(--nav-height) + 3rem) 0 3rem; }

  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr 1fr; }
  .calculator-grid { grid-template-columns: 1fr; }
  /* Long CTA labels inside the calculator card must wrap on phones —
     .btn is nowrap by default and pushed the page wider than 375px. */
  .calculator .btn { white-space: normal; text-align: center; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 1rem; text-align: center; }

  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; text-align: center; }

  .cta-banner { border-radius: var(--radius-lg); }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
}

/* =============================================
   CALCULATE ROI RIBBON
   Fixed vertical tab on the right edge per Cassandra slide 01.
   Stays pinned mid-viewport while the user scrolls the whole page.
   Calculator icon on top, "Calculate ROI" reading bottom-to-top
   (tilt head LEFT to read normally).
   ============================================= */
.roi-ribbon {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  /* Sized up slightly per Cassandra 7/13 ("along with the ROI button") */
  padding: 1.25rem 0.7rem;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  border-radius: 8px 0 0 8px;
  box-shadow: -4px 4px 12px rgba(0,0,0,0.18);
  z-index: 100;
  transition: background var(--transition), padding-right var(--transition);
}
.roi-ribbon:hover {
  background: var(--red-hover);
  color: #fff;
  padding-right: 0.85rem;
}
.roi-ribbon-icon {
  display: block;
  flex-shrink: 0;
  width: 19px;
  height: 19px;
}
/* Text rotated so it reads bottom-to-top (tilt head LEFT). vertical-rl
   sets the writing mode then rotate(180deg) flips the glyph direction
   — equivalent to writing-mode: sideways-lr but with broader browser
   support. */
.roi-ribbon-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

/* On narrow / mobile viewports the ribbon takes up too much edge space.
   Drop it below 600px wide — the user can still reach the ROI page via
   nav or footer links. */
@media (max-width: 600px) {
  .roi-ribbon { display: none; }
}

/* =============================================
   CONTACT DIGITIZER PAGE — Cassandra slides 21–23
   Exact-layout build: hero + feature bar, How It Works
   (video + 3 steps), Configuration Options, Related
   Insights, Common Questions FAQ, final CTA banner.
   Component prefix: .cd-
   ============================================= */

/* --- Eyebrow + display headlines (shared across all cd-* sections) --- */
.cd-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--red);
  margin: 0 0 1.25rem;
}
.cd-eyebrow--left { text-align: left; }

.cd-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 2rem + 2.4vw, 4.2rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 1.5rem;
}
.cd-display em {
  font-style: italic;
  color: var(--text-primary);
}
.cd-display--md {
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.2rem);
}

/* Hero override — bold sans-serif to match Cassandra slide 21 typography
   on "Go beyond surface-level scanning." (heavier weight, non-italic, tight tracking). */
.cd-display--hero {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.8rem + 1.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.cd-section-head {
  margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}
.cd-section-head--center {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3rem;
}
.cd-section-head--center .cd-eyebrow { display: block; }

/* --- Slide 21 · Hero --- */
.cd-hero {
  padding: calc(var(--nav-height) + clamp(2rem, 1.5rem + 1.5vw, 2.75rem)) 0 0;
}
/* Dead-space rule: the first content section after a hero hugs it instead of
   stacking its full section padding on the hero's bottom margin. */
.cd-hero + .cd-how,
.cd-hero + .cd-section,
.cd-hero + .cd-configs,
.cd-hero + .fp-how,
.cd-hero + .cd-faq {
  padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.cd-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(2rem, 2rem + 2vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.cd-hero-text { max-width: 640px; }
.cd-lede {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 520px;
}
/* Supporting hero paragraphs (deck copy) — smaller + muted under the lede.
   When used, the lede should read as the first paragraph: its 2rem bottom
   margin gets pulled tight by the sibling selector below. */
.cd-hero-para {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 0.85rem;
  max-width: 50ch;
}
.cd-lede:has(+ .cd-hero-para) { margin-bottom: 0.85rem; }
.cd-hero-para:last-of-type { margin-bottom: 2rem; }
.cd-hero-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cd-btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.cd-btn-arrow svg {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 2;
}
.cd-watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}
.cd-watch-btn:hover { color: var(--red); }
.cd-watch-disc {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--red);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.cd-watch-disc svg { width: 12px; height: 12px; margin-left: 2px; }
.cd-watch-btn:hover .cd-watch-disc {
  background: var(--red);
  color: #fff;
}
.cd-hero-img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cd-hero-img img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  display: block;
}

/* Image-forward hero variant (conforma.html): short copy, oversized photo.
   Flips the column balance toward the image; the ≤1024px collapse in the
   responsive block still wins and stacks it. */
.cd-hero-grid--img-lead { grid-template-columns: 1fr 1.3fr; }
@media (min-width: 1025px) {
  .cd-hero-grid--img-lead .cd-hero-img img { max-height: 580px; }
}

/* Why Conforma (conforma.html) — asymmetric: the statement block sits
   left-aligned in the left column, the three proof cards zigzag down the
   right (Cassandra's 7/31 markup). The zigzag is desktop-only; ≤1024px it
   collapses to a plain row, then a stack, so phones never get squeezed. */
.cd-why {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
  align-items: start;
}
.cd-why-copy { max-width: 52ch; }
.cd-why-copy .cd-display { margin-bottom: 1.5rem; }
.cd-why-copy p:not(.cd-eyebrow) {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.cd-why-copy p:not(.cd-eyebrow):last-child { margin-bottom: 0; }
.cd-why-points {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Icon sits to the LEFT of the title + body (grid, icon spans both rows) and
   the card runs tight top-to-bottom, so these read as compact rectangles. */
.cd-why-points .cd-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  align-content: start;
  padding: 1.35rem 1.6rem;
}
.cd-why-points .cd-card-icon {
  grid-row: 1 / span 2;
  align-self: center;
  margin-bottom: 0;
}
.cd-why-points .cd-card-title { margin-bottom: 0.4rem; }
@media (min-width: 1025px) {
  /* Zigzag: same width for all three, alternating left / right / left. The
     cards never layer on each other — the offset is horizontal only and the
     row gap stays positive. The group centers against the taller text
     column so the section doesn't sit lopsided. */
  /* Centred on the whole copy block, then nudged down: the small eyebrow
     makes the text read as starting at the headline, so true centring sits
     a touch high. translate keeps it visual only, no reflow. */
  .cd-why-points { align-self: center; transform: translateY(1.25rem); }
  .cd-why-points .cd-card { width: 70%; }
  .cd-why-points .cd-card:nth-child(even) { align-self: flex-end; }
}
@media (max-width: 1024px) {
  .cd-why { grid-template-columns: 1fr; gap: 2.5rem; }
  .cd-why-copy { max-width: 68ch; }
  .cd-why-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
}
@media (max-width: 768px) {
  .cd-why-points { grid-template-columns: 1fr; }
}

/* --- Full-bleed split hero (Industry pages, opt-in via .cd-hero--split) ----
   Text in a container-aligned left column; photo fills the right half and
   bleeds to the viewport edge with a brief left fade into the cream page bg.
   The product-page heroes keep the standard contained image (no modifier). */
.cd-hero--split { padding: 0; }
.cd-hero--split .container {
  max-width: none;
  margin: 0;
  padding-left: max(2rem, calc((100vw - var(--max-width)) / 2 + 2rem));
  padding-right: 0;
  /* Match the site-wide nav→breadcrumb clearance used by .cd-hero/.so-hero. */
  padding-top: calc(var(--nav-height) + clamp(2rem, 1.5rem + 1.5vw, 2.75rem));
  padding-bottom: 0;
}
.cd-hero--split .cd-hero-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  padding-bottom: 0;
  min-height: clamp(420px, 40vw, 560px);
}
.cd-hero--split .cd-hero-text {
  max-width: none;
  align-self: center;
  padding: 0 clamp(2rem, 1rem + 2.5vw, 4rem) clamp(2rem, 1rem + 2vw, 3rem) 0;
}
.cd-hero--split .cd-hero-img {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  display: block;
}
.cd-hero--split .cd-hero-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
.cd-hero--split .cd-hero-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-primary) 0%, rgba(242, 235, 217, 0) 18%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .cd-hero--split .container {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: calc(var(--nav-height) + clamp(2rem, 1.5rem + 1.5vw, 2.75rem));
  }
  /* minmax(0, 1fr), NOT 1fr. A 1fr track's automatic minimum is min-content,
     so the column refuses to shrink below its widest unbreakable content and
     pushes the whole page wider than the phone. At 320px this track resolved
     to 324.6px inside a 256px container, overflowing 8 pages (every persona
     page plus production-tools) by up to 37px. minmax(0, …) sets the minimum
     to zero so the column tracks the container instead of the content. */
  .cd-hero--split .cd-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 2rem;
  }
  .cd-hero--split .cd-hero-text { padding: 0; }
  .cd-hero--split .cd-hero-img {
    height: 320px;
    border-radius: var(--radius);
  }
  .cd-hero--split .cd-hero-img::after { display: none; }
}

/* --- Slide 21 · Feature bar (5 cols, thin rules) --- */
.cd-feature-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0;
  background: var(--sf-white, #fff);
}
.cd-feature-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.cd-feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cd-feature {
  padding: 0.5rem 1.5rem;
  text-align: center;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-feature:first-child { border-left: none; }
.cd-feature-icon {
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-bottom: 0.9rem;
}
.cd-feature-icon svg,
.cd-feature-icon img { display: block; flex-shrink: 0; }
.cd-feature-icon svg { width: 28px; height: 28px; }
.cd-feature-icon img { width: 26px; height: 34px; object-fit: contain; }
.cd-feature-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.cd-feature-body {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0;
}

/* --- Slide 22 · How It Works --- */
.cd-how {
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}
.cd-how-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 2rem + 2vw, 4rem);
  align-items: center;
}
.cd-video-placeholder {
  background: #0c0c0c;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  position: relative;
  overflow: hidden;
}
.cd-video-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.cd-video-play svg {
  width: 72px;
  height: 72px;
  position: relative;
  z-index: 1;
}
/* Real image in the "how it works" cell (instead of the video placeholder) */
.cd-how-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}
.cd-how-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* Wired-in walkthrough videos sit in the same .cd-how-visual slot as the image;
   16:9 to match the source clips, black letterbox behind. */
.cd-how-visual video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: #000;
}
/* Balanced media row — the text column matches the image height with its
   content vertically centered, and the image covers its full box. Condenses
   two-column sections and removes the float dead-space when one side is
   shorter. Apply .cd-how-grid--balanced to the grid + .cd-how-text to the
   text column. Reusable convention across product/solution pages. */
.cd-how-grid--balanced { align-items: stretch; }
.cd-how-grid--balanced .cd-how-visual { height: 100%; }
.cd-how-grid--balanced .cd-how-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Step-based how-grids (e.g. .cd-steps ol as the text column) balance the same
   way without needing a .cd-how-text wrapper on the list. */
.cd-how-grid--balanced .cd-steps { justify-content: center; }

.cd-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.cd-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.cd-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cd-step-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.25rem 0 0.5rem;
}
.cd-step-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* --- Slide 22 · Configuration Options --- */
.cd-configs {
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 clamp(4rem, 3rem + 3vw, 6rem);
}
.cd-config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 1.5rem;
}
.cd-config-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.cd-config-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.cd-config {
  display: flex;
  flex-direction: column;
}
.cd-config-img {
  aspect-ratio: 4 / 3;
  background: var(--bg-secondary, #f5f1ea);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Clickable product/solution images (Cassandra 7/13: "customers are used
   to clicking the photos and having them linked to the page"). */
.cd-config-img > a,
.so-row-img > a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.cd-config-img > a img,
.so-row-img > a img { transition: transform 0.3s ease; }
.cd-config-img > a:hover img,
.so-row-img > a:hover img { transform: scale(1.035); }
.cd-config-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* For studio product shots (side/bottom views on white) that must not crop. */
.cd-config-img--contain { background: var(--sf-white); }
.cd-config-img--contain img { object-fit: contain; padding: 0.75rem; }
.cd-config-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem;
  line-height: 1.3;
}
.cd-config-sub-paren {
  font-weight: 500;
  color: var(--text-secondary);
}
.cd-config-item {
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-secondary));
  margin: 0 0 1rem;
  letter-spacing: 0.02em;
}
.cd-config-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cd-config-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0.35rem 0;
  border-top: 1px solid var(--border);
}
/* Optional richer product-catalog card built on .cd-config:
   image + eyebrow + title + body + bullets + action row (buttons bottom-aligned). */
.cd-config .cd-eyebrow { margin-bottom: 0.5rem; }
.cd-config-body {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 1rem;
}
.cd-config .so-bullets { margin: 0.25rem 0 1rem; }
.cd-config-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.25rem;
}
/* Inside a product card the column is narrow, so keep the action buttons on a
   single row by sharing the width equally instead of wrapping. */
.cd-config .cd-config-actions { flex-wrap: nowrap; }
.cd-config .cd-config-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.9rem;
}
/* A lone button keeps its natural width (don't stretch full-card). */
.cd-config .cd-config-actions .btn:only-child { flex: 0 1 auto; }

/* --- Slide 23 · Related Insights --- */
.cd-insights {
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
  background: var(--bg-secondary, #f5f1ea);
  border-top: 1px solid var(--border);
}
.cd-insights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.cd-insights-head .cd-display { margin-bottom: 0; }
.cd-view-link {
  color: var(--red);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cd-view-link:hover { color: var(--red-hover, var(--red)); }

.cd-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
.cd-insight {
  display: flex;
  flex-direction: column;
  background: var(--sf-white, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  padding: 1.75rem 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cd-insight:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 6px 24px rgba(0,0,0,0.08));
}
.cd-insight-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin: 0 0 0.85rem;
}
.cd-insight-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 0.7rem;
}
.cd-insight-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  flex: 1;
}
.cd-insight-cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.02em;
}

/* --- Slide 23 · Common Questions / FAQ accordion --- */
.cd-faq {
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0;
  background: var(--bg-secondary, #f5f1ea);
}
.cd-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(2rem, 2rem + 2vw, 4.5rem);
  align-items: start;
}
.cd-faq-left .cd-display { margin-bottom: 2rem; }
.cd-faq-btn {
  display: inline-flex;
  align-items: center;
  border-color: var(--red);
  color: var(--red);
}
.cd-faq-btn:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.cd-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.cd-faq-list > li {
  border-bottom: 1px solid var(--border);
}
.cd-faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}
.cd-faq-list summary::-webkit-details-marker { display: none; }
.cd-faq-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
}
.cd-faq-list details[open] .cd-faq-toggle {
  transform: rotate(45deg);
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.cd-faq-answer {
  padding: 0 0 1.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 680px;
}
.cd-faq-answer p { margin: 0; }

/* --- Slide 23 · Final CTA (full-bleed deep red) --- */
.cd-final-cta-wrap {
  padding: 0;
}
.cd-final-cta {
  background: linear-gradient(135deg, var(--red-dark, #821626) 0%, var(--red) 100%);
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cd-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 0%, rgba(255,255,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 100%, rgba(0,0,0,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.cd-final-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cd-final-cta-text { max-width: 620px; }
.cd-final-cta-eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.85rem;
}
.cd-final-cta-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 0.6rem;
}
.cd-final-cta-title em { font-style: italic; }
.cd-final-cta-body {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
}
.cd-final-cta-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.cd-cta-btn-white {
  background: #fff;
  color: var(--red);
  border: 1px solid #fff;
}
.cd-cta-btn-white:hover {
  background: #f3f3f3;
  color: var(--red);
  border-color: #f3f3f3;
}
.cd-cta-btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.6);
}
.cd-cta-btn-outline:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border-color: #fff;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .cd-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cd-hero-img img { max-height: 360px; }
  .cd-feature-grid { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .cd-feature:nth-child(4) { border-left: none; padding-left: 0; }
  .cd-feature:nth-child(n+4) { border-top: 1px solid var(--border); padding-top: 2rem; }
  .cd-how-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cd-config-grid { grid-template-columns: 1fr; gap: 2rem; }
  .cd-insight-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .cd-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 640px) {
  .cd-feature-grid { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .cd-feature { border-left: none; padding: 0 0 1.5rem; border-bottom: 1px solid var(--border); }
  .cd-feature:last-child { border-bottom: none; padding-bottom: 0; }
  .cd-feature:nth-child(n+4) { border-top: none; padding-top: 0; }
  .cd-hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .cd-final-cta-inner { flex-direction: column; align-items: flex-start; }
  .cd-final-cta-actions { width: 100%; }
  .cd-final-cta-actions .btn { flex: 1; text-align: center; }
}

/* =============================================
   CANONICAL COMPONENTS — shared library extension
   Promoted out of page-specific builds so every page reuses one definition.
   Always pair a section intro with .cd-section-head--center for the centered
   header treatment from the Contact Digitizer gold-standard page.
     - .cd-section            standard section shell (+ --tint for the sand band)
     - .cd-flow               horizontal numbered step row w/ arrow connectors
                              (promoted from .fp-step-row; flexbox so it adapts
                              to any step count). NOTE: distinct from .cd-step
                              (the CD "How It Works" vertical numbered step).
     - .cd-card-grid/.cd-card centered feature-card grid (2-up; --3 for 3-up).
                              Reuses .so-bullets for checkmark lists.
   ============================================= */

/* Section shell */
.cd-section { padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0; }
.cd-section--tint {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* Tighten the gap when two sections sit back-to-back. */
.cd-section--tight-top { padding-top: clamp(1.5rem, 1rem + 1vw, 2.5rem); }
.cd-section--tight-bottom { padding-bottom: clamp(1.5rem, 1rem + 1vw, 2.5rem); }
/* Compact band for a lone numbered strip (.cd-flow / .cd-process): symmetric
   padding so short strip content doesn't sit in a deep empty band, and the
   following section hugs it instead of stacking full section padding. */
.cd-section.cd-section--strip { padding: clamp(2.75rem, 2.25rem + 1.5vw, 4rem) 0; }
.cd-section--strip + .cd-section { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* FAQ hugs the preceding section (bare .cd-section paddings stack to ~200px). */
.cd-section:has(+ .cd-faq) { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.cd-section + .cd-faq { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* Same-background adjacency (tint band into the tinted FAQ): collapse harder. */
.cd-section--tint:has(+ .cd-faq) { padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.cd-section--tint + .cd-faq { padding-top: clamp(1rem, 0.75rem + 1vw, 1.75rem); }

/* Left-heading layout — section title beside its content (e.g. PT
   "Built for movement-focused care": heading left, feature cards right). */
.cd-aside {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 3fr;
  gap: clamp(2rem, 2rem + 2vw, 4rem);
  align-items: start;
}
.cd-aside-head .cd-display { margin-bottom: 0; }

/* Horizontal workflow flow: big icon + "01 · Title" + body, arrows between.
   Flexbox (not fixed grid) so 3-step and 4-step rows both center cleanly. */
.cd-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}
.cd-flow-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cd-flow-icon {
  width: 84px;
  height: 84px;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.cd-flow-icon svg { width: 56px; height: 56px; display: block; }
.cd-flow-num {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: 0.01em;
}
.cd-flow-numdigit { color: var(--red); margin-right: 0.35rem; }
.cd-flow-body {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 220px;
}
/* Optional tool/source line between a step's title and caption
   (e.g. "Correct & Confirm software" under "Review & Design"). */
.cd-flow-tool {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.02em;
  margin: -0.25rem 0 0.5rem;
}
/* Arrow connector sits in the gap, vertically centered with the 84px icon */
.cd-flow-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  height: 84px;
}
.cd-flow-arrow svg { width: 28px; height: 28px; display: block; }

/* Hero meta strip — compact inline row of icon + short label, sits directly
   under the hero CTAs (e.g. crosshair "538 precision pins · full-contact
   scanning · central fab or in-house fabrication"). */
.cd-hero-meta {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}
.cd-hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.cd-hero-meta svg { width: 22px; height: 22px; color: var(--red); flex-shrink: 0; display: block; }

/* Horizontal numbered process row — reuses the .cd-step (red number circle +
   title + body) component from the CD "How It Works", laid out across a row
   with arrow connectors between. */
.cd-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}
.cd-process .cd-step { flex: 1 1 0; }
.cd-process-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--red);
  padding-top: 0.6rem;
}
.cd-process-arrow svg { width: 24px; height: 24px; display: block; }

/* Centered feature-card grid */
.cd-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
.cd-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cd-card {
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.cd-card-icon {
  color: var(--red);
  display: inline-flex;
  margin-bottom: 1rem;
}
.cd-card-icon svg { width: 32px; height: 32px; display: block; }
.cd-card-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--red);
  margin: 0 0 0.6rem;
}
.cd-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 0.6rem;
}
.cd-card-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
.cd-card .so-bullets { margin: 0.25rem 0 1.5rem; }
.cd-card-cta { margin-top: auto; align-self: flex-start; }
/* Subtitle line under a card title (used by icon-top path cards). */
.cd-card-sub {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
/* Small red descriptor under a card title (e.g. retail "Mobile capture"). */
.cd-card-tag {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--red);
  margin: 0 0 0.9rem;
}
/* Icon-left header inside a card: icon on the left, title + tag stacked right.
   (Retail slide 74-b path cards: icon left, title/subtitle right, bullets below.) */
.cd-card-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.cd-card-head .cd-card-icon { margin-bottom: 0; flex-shrink: 0; }
.cd-card-head .cd-card-title { margin-bottom: 0.2rem; }
.cd-card-head .cd-card-tag { margin-bottom: 0; }

/* Number-left / icon-right card top row (e.g. Other slide 76 workflow cards). */
.cd-card-numrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cd-card-numrow .cd-pathcard-num { margin: 0; }
.cd-card-numrow .cd-card-icon { margin-bottom: 0; }

/* Two-column checkmark bullets for wide cards. */
.so-bullets--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

/* Flex path card (Sports Medicine slide 71): centered card with the icon to
   the LEFT of the title + subtitle, then checkmark bullets centered below. */
.cd-flexcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.cd-flexcard-badge {
  background: var(--red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  margin-bottom: 1.25rem;
}
.cd-flexcard-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  text-align: left;
  margin-bottom: 1.25rem;
}
.cd-flexcard-icon { color: var(--red); display: inline-flex; flex-shrink: 0; }
.cd-flexcard-icon svg { width: 38px; height: 38px; display: block; }
.cd-flexcard-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.cd-flexcard-sub {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}
.cd-flexcard-bullets {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.cd-flexcard-bullets li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  padding: 0.35rem 0;
}
.cd-flexcard-bullets li::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 0.45rem;
  vertical-align: -2px;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/></svg>") center/contain no-repeat;
}
.cd-flexcard-cta { margin-top: auto; }

/* Feature-card variant — icon LEFT, text RIGHT, gray-beige fill.
   Used by the "Built for X workflows" 2x2 grids on Industry pages. */
.cd-card--feature {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  background: var(--bg-secondary);
  align-items: center;
}
.cd-card--feature .cd-card-icon { margin-bottom: 0; }
.cd-card--feature .cd-card-icon svg { width: 52px; height: 52px; }
.cd-card-text { min-width: 0; }

/* Compact feature card — top-aligned icon + content (larger icon), tight
   bullets, and an optional CTA anchored to the card bottom. Reusable modifier
   for feature cards that carry bullet lists or a CTA, so their heights balance
   and the vertical-centering dead-space is removed. (Promoted from the
   products.html Step-2 cards; apply .cd-card--compact alongside .cd-card--feature.) */
.cd-card--feature.cd-card--compact { align-items: stretch; padding: 1.5rem 1.75rem; gap: 1.5rem; }
.cd-card--feature.cd-card--compact .cd-card-icon { align-self: start; }
.cd-card--feature.cd-card--compact .cd-card-icon svg { width: 60px; height: 60px; }
.cd-card--feature.cd-card--compact .cd-card-text { display: flex; flex-direction: column; }
.cd-card--feature.cd-card--compact .cd-card-text .so-bullets { margin: 0.25rem 0 1.1rem; }
.cd-card--feature.cd-card--compact .cd-card-cta { margin-top: auto; }

/* Combo icon — two glyphs joined by a "+", e.g. "Digitizer + Central Fab". */
.cd-card-icon--combo { align-items: center; gap: 0.4rem; }
.cd-card-icon--combo svg { width: 28px; height: 28px; }
.cd-card-icon-plus { color: var(--red); font-weight: 600; font-size: 1.1rem; line-height: 1; }

/* 4-up card grid (e.g. PT "Built for movement-focused care"). */
.cd-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 4-up rows get condensed cards so they fit one desktop row comfortably. */
.cd-card-grid--4 { gap: 1.25rem; }
.cd-card-grid--4 .cd-card { padding: 1.5rem; }
.cd-card-grid--4 .cd-card-icon { margin-bottom: 0.75rem; }
.cd-card-grid--4 .cd-card-icon svg { width: 28px; height: 28px; }
.cd-card-grid--4 .cd-card-title { font-size: 1rem; margin-bottom: 0.45rem; }
.cd-card-grid--4 .cd-card-body { font-size: 0.88rem; }

/* Plain card variant — borderless, no fill, icon-top feature column. */
.cd-card--plain {
  background: transparent;
  border: none;
  padding: 0;
}

/* Path card with image — bordered white card, photo on top, title, subtitle,
   checkmark bullets (.so-bullets), CTA pinned to the bottom, optional ribbon.
   Introduced by PT slide 59 "Choose the capture path that fits your clinic." */
.cd-pathcard {
  display: flex;
  flex-direction: column;
  background: var(--sf-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}
.cd-pathcard--featured { border-color: var(--red); }
.cd-pathcard-ribbon {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  background: var(--red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
}
.cd-pathcard-img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-secondary);
}
.cd-pathcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-pathcard-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem 1.5rem 1.75rem;
}
.cd-pathcard-title {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0 0 0.4rem;
}
.cd-pathcard-sub {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 1rem;
}
.cd-pathcard .so-bullets { margin: 0 0 1.5rem; }
.cd-pathcard-cta { margin-top: auto; align-self: flex-start; }
/* Numbered path card (e.g. P&O "01 / 02" workflow paths) — red label above the title. */
.cd-pathcard-num {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--red);
  margin: 0 0 0.4rem;
}

/* Canonical-component responsive */
@media (max-width: 1024px) {
  .cd-flow { flex-wrap: wrap; }
  .cd-flow-step { flex: 1 1 40%; }
  .cd-flow-arrow { display: none; }
}
@media (max-width: 1024px) {
  .cd-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .cd-aside { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 768px) {
  .cd-card-grid,
  .cd-card-grid--3,
  .cd-card-grid--4 { grid-template-columns: 1fr; }
  .cd-process { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .cd-process-arrow { display: none; }
}
@media (max-width: 640px) {
  .cd-flow-step { flex: 1 1 100%; }
  .so-bullets--2col { grid-template-columns: 1fr; }
}

/* =============================================
   SOLUTIONS PAGE — Cassandra slides 35-36-36b
   - .so-hero          : breadcrumb + eyebrow + serif headline + body + 5 chip pills
   - .so-chip          : pill nav linking to specific solution pages
   - .so-row           : 2-col image + content card (alternates via --reverse)
   - .so-bullets       : red checkmark bullet list
   - .so-help-strip    : subtle inline CTA strip (NOT full-bleed red)
   Prefix: .so-
   ============================================= */

.so-hero {
  padding: calc(var(--nav-height) + clamp(2rem, 1.5rem + 1.5vw, 2.75rem)) 0 clamp(1.5rem, 1rem + 1vw, 2rem);
}
/* Canonical breadcrumb used on every page under the Explore nav.
   Parent links + separators are muted gray; current page is red (wrap in <strong>).
   Hovering a parent link turns it red to signal it's clickable. */
.so-breadcrumb {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 2rem;
}
.so-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition);
}
.so-breadcrumb a:hover { color: var(--red); }
.so-breadcrumb span {
  margin: 0 0.4rem;
  color: var(--text-muted);
}
.so-breadcrumb strong {
  color: var(--red);
  font-weight: 600;
}
/* Variant for placing the breadcrumb over dark imagery / video heroes
   (e.g., shoes.html). Same hover/current behavior, lighter base color. */
.so-breadcrumb--on-dark,
.so-breadcrumb--on-dark a,
.so-breadcrumb--on-dark span { color: rgba(255, 255, 255, 0.55); }
.so-breadcrumb--on-dark a:hover { color: var(--red); }
.so-breadcrumb--on-dark strong { color: var(--red); }

/* Video heroes use flex-end to align content to the bottom — that
   pulls the breadcrumb down with the hero copy. Pin it to the top
   absolutely so it sits just below the nav like every other page. */
.hero-video-breadcrumb {
  position: absolute;
  top: calc(var(--nav-height) + clamp(2rem, 1.5rem + 1.5vw, 2.75rem));
  left: clamp(1.5rem, 5vw, 6rem);
  z-index: 3;
  margin: 0;
}
.so-hero-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 720px;
  margin: 0;
}

/* --- Solution cards (5 stacked rows, alternating image side) --- */
.so-cards {
  padding: clamp(2rem, 1.5rem + 1.5vw, 3rem) 0 clamp(3rem, 2.5rem + 2vw, 5rem);
}
.so-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 2rem + 2vw, 4.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.so-row:last-child { margin-bottom: 0; }
.so-row--reverse {
  grid-template-columns: 1fr 1.15fr;
}
.so-row--reverse .so-row-img { order: 2; }
.so-row--reverse .so-row-content { order: 1; }
.so-row-img {
  background: var(--bg-secondary, #f5f1ea);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.so-row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.so-row-content {
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.so-row-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--red);
  margin: 0 0 1rem;
}
.so-row-eyebrow-icon {
  display: inline-flex;
  align-items: center;
}
.so-row-eyebrow-icon svg { width: 16px; height: 16px; display: block; }
.so-row-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 1rem;
}
.so-row-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0 0 1.25rem;
  max-width: 52ch;
}

/* --- "Learn more" pill under each card's bullets --- */
.so-row-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--red);
  border-radius: 999px;
  background: transparent;
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background var(--transition), color var(--transition);
}
.so-row-cta span {
  transition: transform var(--transition);
  display: inline-block;
}
.so-row-cta:hover {
  background: var(--red);
  color: #fff;
}
.so-row-cta:hover span { transform: translateX(3px); }

/* --- Bullet list with red checkmarks --- */
.so-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.so-bullets li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.45rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.so-bullets li::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: 0.2em;
  background-color: var(--red);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z'/></svg>") center/contain no-repeat;
}

/* --- Inline "Not sure which solution?" help strip (slide 36-b) --- */
.so-help-section {
  padding: 0 0 clamp(3rem, 2.5rem + 2vw, 5rem);
}
.so-help-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  background: var(--bg-secondary, #f5f1ea);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 12px);
}
.so-help-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(166, 25, 46, 0.08);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.so-help-icon svg { width: 26px; height: 26px; display: block; }
.so-help-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 0.3rem;
}
.so-help-body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.so-help-btn { white-space: nowrap; }

/* Variant: serif display title as its own column, body + button stacked on the
   right (deck's "Therapeutic Shoe Bill support" panel). White card on page bg. */
.so-help-strip--split {
  grid-template-columns: auto 1.15fr 1fr;
  gap: 2rem;
  padding: 2rem 2.5rem;
  background: var(--sf-white);
}
.so-help-strip--split .so-help-title {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  line-height: 1.2;
  margin: 0;
}
.so-help-strip--split .so-help-body { margin: 0 0 1.1rem; }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .so-row,
  .so-row--reverse {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .so-row--reverse .so-row-img { order: 1; }
  .so-row--reverse .so-row-content { order: 2; }
  .so-help-strip { grid-template-columns: 1fr; text-align: left; }
  .so-help-icon { margin-bottom: 0.5rem; }
}

/* =============================================
   FOOTPRINTER PROGRAM PAGE — Cassandra slide 43 top
   The horizontal step flow now uses the canonical .cd-flow component
   (see CANONICAL COMPONENTS above). Only the section wrapper remains here.
   ============================================= */

.fp-how {
  padding: clamp(3.5rem, 3rem + 3vw, 6rem) 0 clamp(2rem, 1.5rem + 1.5vw, 3rem);
  background: var(--bg-secondary, #f5f1ea);
}
/* The FAQ that follows shares the same tinted background — collapse the
   double section padding so the two don't read as one dead zone. */
.fp-how + .cd-faq { padding-top: clamp(1rem, 0.75rem + 1vw, 1.75rem); }

/* =============================================
   ROI POPOUT — conversational calculator drawer
   Opened by the site-wide .roi-ribbon tab (baked in the nav partial);
   logic in /js/roi-popout.js. One question per screen, lead capture
   before the projection (SoftWave pattern, team ruling 7/30).
   All colors are LITERAL light-theme values, not tokens: the drawer
   must render identically over body.theme-dark (home) and light pages.
   ============================================= */
.rp-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.rp-overlay.rp-open { opacity: 1; pointer-events: auto; }

.rp-panel {
  position: fixed; top: 0; right: 0;
  height: 100dvh;
  width: min(460px, 100vw);
  background: #FFFFFF;
  color: #000;
  z-index: 10001;
  transform: translateX(105%);
  transition: transform 0.3s ease;
  display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
}
.rp-panel.rp-open { transform: translateX(0); }

.rp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  flex-shrink: 0;
}
.rp-head img { height: 24px; width: auto; display: block; }
.rp-close {
  background: none; border: none;
  font-size: 1.6rem; line-height: 1;
  color: rgba(0, 0, 0, 0.45); cursor: pointer;
  padding: 0.2rem 0.45rem;
}
.rp-close:hover { color: #000; }

.rp-progress { height: 3px; background: #F6F3ED; flex-shrink: 0; }
.rp-progress-fill { height: 100%; background: var(--red); width: 0; transition: width 0.3s ease; }

.rp-body {
  flex: 1; overflow-y: auto;
  padding: 1.9rem 1.75rem 2.25rem;
  display: flex; flex-direction: column;
  -webkit-overflow-scrolling: touch;
}

.rp-step-num {
  display: inline-block; align-self: flex-start;
  background: #000; color: #fff;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem; border-radius: 4px;
  margin-bottom: 0.9rem;
}
.rp-q {
  font-family: var(--font-display);
  font-size: 1.45rem; line-height: 1.25; font-weight: 700;
  color: #000; margin-bottom: 0.6rem;
}
.rp-sub {
  font-size: 0.875rem; color: rgba(0, 0, 0, 0.62);
  line-height: 1.55; margin-bottom: 1.4rem;
}

.rp-opts { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
.rp-opt {
  display: flex; align-items: center; gap: 0.8rem;
  width: 100%; text-align: left;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.95rem; color: #000;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rp-opt:hover { border-color: var(--red); }
.rp-opt.rp-selected { border-color: var(--red); background: rgba(166, 25, 46, 0.05); }
.rp-opt-key {
  flex-shrink: 0;
  width: 1.55rem; height: 1.55rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0, 0, 0, 0.22); border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; color: rgba(0, 0, 0, 0.6);
}
.rp-opt.rp-selected .rp-opt-key { background: var(--red); border-color: var(--red); color: #fff; }
.rp-opt-text small { display: block; font-size: 0.76rem; color: rgba(0, 0, 0, 0.5); margin-top: 0.15rem; line-height: 1.4; }

.rp-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: auto; padding-top: 0.5rem; }
.rp-back {
  background: none;
  border: 1.5px solid rgba(0, 0, 0, 0.16); border-radius: 8px;
  padding: 0.7rem 1.05rem;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600;
  color: rgba(0, 0, 0, 0.6); cursor: pointer;
}
.rp-back:hover { border-color: rgba(0, 0, 0, 0.4); color: #000; }

/* Lead-capture fields: light-theme form styling, literal values */
.rp-field { margin-bottom: 0.95rem; }
.rp-field label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: rgba(0, 0, 0, 0.72); margin-bottom: 0.35rem;
}
.rp-field input, .rp-field select {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1.5px solid rgba(0, 0, 0, 0.14); border-radius: 8px;
  font-family: var(--font-sans); font-size: 0.95rem; color: #000;
  background: #fff;
}
.rp-field input:focus, .rp-field select:focus { outline: none; border-color: var(--red); }
.rp-field.rp-invalid input, .rp-field.rp-invalid select { border-color: var(--red); }
.rp-fine {
  font-size: 0.74rem; color: rgba(0, 0, 0, 0.45);
  line-height: 1.5; margin: 0.4rem 0 1.1rem;
}

.rp-cta {
  display: block; width: 100%; text-align: center;
  background: var(--red); color: #fff;
  border: none; border-radius: 8px;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-sans); font-size: 0.98rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s ease;
}
.rp-cta:hover { background: var(--red-hover); color: #fff; }
.rp-cta:disabled { opacity: 0.6; cursor: default; }

/* Result screen */
.rp-result-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red); margin-bottom: 0.7rem;
}
.rp-result-num {
  font-family: var(--font-display);
  font-size: 2.9rem; font-weight: 700; line-height: 1.05;
  color: var(--red); margin: 0.25rem 0 0.3rem;
}
.rp-result-num small { font-size: 1.15rem; font-weight: 600; color: rgba(0, 0, 0, 0.55); }
.rp-result-line { font-size: 0.9rem; color: rgba(0, 0, 0, 0.68); line-height: 1.6; margin-bottom: 0.4rem; }
.rp-payback { font-size: 0.9rem; color: #000; font-weight: 600; line-height: 1.5; margin-top: 0.5rem; }

.rp-proof {
  list-style: none; margin: 1.3rem 0; padding: 1.05rem 1.2rem;
  background: #F6F3ED; border-radius: 8px;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.rp-proof li { position: relative; padding-left: 1.35rem; font-size: 0.85rem; color: rgba(0, 0, 0, 0.75); line-height: 1.5; }
.rp-proof li::before { content: '\2713'; position: absolute; left: 0; color: var(--red); font-weight: 700; }

.rp-alt-link {
  display: block; text-align: center;
  margin-top: 0.9rem;
  font-size: 0.85rem; font-weight: 600; color: var(--red);
  text-decoration: underline; text-underline-offset: 3px;
}
.rp-disclaimer { font-size: 0.72rem; color: rgba(0, 0, 0, 0.42); line-height: 1.55; margin-top: 1.2rem; }

/* Calculating interstitial */
.rp-calc-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.rp-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid #F6F3ED; border-top-color: var(--red);
  animation: rp-spin 0.8s linear infinite;
}
@keyframes rp-spin { to { transform: rotate(360deg); } }

body.rp-lock { overflow: hidden; }

/* =============================================
   NARROW-SCREEN BUTTON WRAP (≤480px)
   =============================================
   .btn sets `white-space: nowrap` so labels never break mid-phrase on desktop.
   On a small phone that makes a long label unshrinkable, and the button simply
   grows past the screen edge, taking the whole page with it: at 320px
   "Explore Chiropractic Options" measured 325px inside a 256px column, and
   /shoes.html overflowed even at 375px (a normal iPhone) on "Learn About the
   Program".
   The page-level symptom is misleading — the nav stretches to the widened body,
   so the nav LOOKS like the culprit when it is only inheriting the damage.
   Letting the label wrap on narrow screens costs one extra line of button text
   and removes the sideways scroll. max-width pins it to its container so no
   future long label can reintroduce this. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    max-width: 100%;
  }
}