/* ============================================================
   H&A Health Pharmacy & Medical Supplies — Design System
   Color: Navy (#1B3A5C primary) + bright accent + subtle green
   Type: Inter (body) + DM Serif Display (display) — Google Fonts
   Inspiration: Photon Health (clinical SaaS), Pharmacy wcopilot (deep navy blocks), Sunnyside (social proof density)
   ============================================================ */

:root {
  /* Navy palette — from the logo shield */
  --navy-900: #0A1A33;
  --navy-800: #0E2240;
  --navy-700: #142E55;
  --navy-600: #1B3A5C;   /* PRIMARY */
  --navy-500: #2A4F7A;
  --navy-400: #4A6FA0;
  --navy-300: #7E9BC3;
  --navy-200: #B8CCE2;
  --navy-100: #DCE6F2;
  --navy-50:  #EFF4FA;

  /* Bright accent — for CTAs and links */
  --accent-600: #1D4ED8;
  --accent-500: #2563EB;
  --accent-400: #3B82F6;
  --accent-50:  #EFF6FF;

  /* Subtle green — health/success cues */
  --green-600: #059669;
  --green-500: #10B981;
  --green-100: #D1FAE5;
  --green-50:  #ECFDF5;

  /* Neutrals */
  --white: #FFFFFF;
  --bg: #FAFBFC;
  --surface: #FFFFFF;
  --surface-alt: #F4F6FA;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0E2240;
  --text-muted: #475569;
  --text-tertiary: #64748B;

  /* Type scale */
  --t-xs: .75rem;
  --t-sm: .875rem;
  --t-base: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.5rem;
  --t-3xl: 1.875rem;
  --t-4xl: 2.25rem;
  --t-5xl: 3rem;
  --t-6xl: 3.75rem;
  --t-7xl: 4.5rem;

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-12: 7rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(14, 34, 64, 0.05);
  --shadow-md: 0 4px 12px rgba(14, 34, 64, 0.08);
  --shadow-lg: 0 12px 32px rgba(14, 34, 64, 0.10);
  --shadow-xl: 0 24px 48px rgba(14, 34, 64, 0.12);

  /* Type families */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  /* Layout */
  --container: 1200px;
  --container-narrow: 880px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-500); text-decoration: none; }
a:hover { color: var(--accent-600); }
img, svg { display: block; max-width: 100%; height: auto; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--navy-700);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) 0;
  z-index: 1000;
  font-weight: 600;
  font-size: var(--t-sm);
}
.skip-link:focus { top: 0; color: var(--white); }

/* ============================================================
   TEMPLATE SWITCHER CHROME (preview bar — sits above main nav)
   ============================================================ */
.tpl-bar {
  background: linear-gradient(90deg, var(--navy-900), var(--navy-800));
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 110;
}
.tpl-inner { display: flex; align-items: center; gap: var(--sp-3); }
.tpl-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
.tpl-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1;
}
.tpl-chips::-webkit-scrollbar { height: 4px; }
.tpl-chips::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }
.tpl-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.tpl-chip:hover { background: rgba(255,255,255,.16); color: var(--white); border-color: rgba(255,255,255,.25); }
.tpl-chip.active { background: var(--accent-500); border-color: var(--accent-500); color: var(--white); }
.tpl-chip.tpl-pending { opacity: .45; pointer-events: none; }
.tpl-divider { width: 1px; height: 20px; background: rgba(255,255,255,.18); flex-shrink: 0; margin: 0 4px; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;  /* template-switcher chrome bar removed; nav sits flush at the top */
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: var(--sp-5);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--navy-800);
  text-decoration: none;
}
.nav-logo img { height: 64px; width: auto; max-width: 280px; }
.nav-tagline {
  display: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
  border-left: 1px solid var(--border);
  padding-left: var(--sp-3);
  white-space: nowrap;
}
@media (min-width: 1100px) { .nav-tagline { display: inline-block; } }
.nav-links {
  display: none;
  list-style: none;
  gap: clamp(var(--sp-4), 2vw, var(--sp-6));     /* responsive gap — tighter at narrow widths */
  align-items: center;
}
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-link {
  color: var(--text);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;          /* two-word labels like "Price Lookup" stay on one line */
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--navy-700); border-color: var(--accent-500); }
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--navy-700);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, background .2s, box-shadow .2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--navy-800);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Quick-action Refill button — sits left of the Call CTA */
.nav-refill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--accent-500);
  color: var(--white);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, background .2s, box-shadow .2s;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-refill:hover {
  background: var(--accent-600);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Mobile nav (≤760px):
   — Phone CTA collapses to icon-only (tap still dials via tel:)
   — Refill button stays "RefillRX" label visible
   — Logo shrinks, gap tightens
   — Mobile menu dropdown still uses .cta-mobile/.cta-full to swap label length */
.cta-mobile { display: none; }
.cta-full   { display: inline; }
@media (max-width: 760px) {
  .nav-inner { height: 68px; gap: var(--sp-2); padding-left: 12px; padding-right: 12px; }
  .nav-logo img { height: 44px; max-width: 200px; }
  /* Top-bar Call button: icon-only — both labels hidden so the bar fits the viewport. */
  .nav-cta { padding: 8px 12px; font-size: 13px; gap: 0; }
  .nav-cta .cta-full,
  .nav-cta .cta-mobile { display: none; }
  .nav-cta svg { margin: 0; }
  /* Mobile menu dropdown anchor still flips long → short label */
  .mobile-menu .cta-full { display: none; }
  .mobile-menu .cta-mobile { display: inline; }
  .nav-refill { padding: 8px 14px; font-size: 13px; }
  .nav-refill span { display: inline; }      /* keep "RefillRX" always visible */
}
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
}
@media (min-width: 900px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy-700);
  border-radius: 2px;
  transition: transform .2s;
}
.mobile-menu {
  display: none;
  padding: var(--sp-4) clamp(1rem, 4vw, 2rem) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--white);
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.mobile-menu a { color: var(--text); font-weight: 500; font-size: var(--t-base); display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: transform .2s, background .2s, box-shadow .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-lg { padding: var(--sp-4) var(--sp-7); font-size: var(--t-base); }
.btn-primary {
  background: var(--navy-700);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { background: var(--navy-800); color: var(--white); box-shadow: var(--shadow-lg); }
.btn-accent {
  background: var(--accent-500);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.btn-accent:hover { background: var(--accent-600); color: var(--white); box-shadow: var(--shadow-lg); }
.btn-secondary {
  background: var(--white);
  color: var(--navy-700);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-alt); border-color: var(--navy-500); color: var(--navy-800); }
.btn-ghost-light {
  background: rgba(255,255,255,.10);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255,255,255,.20); color: var(--white); }

/* Supplies CTA — distinct amber gradient, two-line label, icon + arrow, and
   a soft shine sweep on hover. Sized to visually anchor next to the primary
   blue CTA without competing with it. */
.btn-supplies {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 14px;
  border-radius: var(--r-lg);
  /* Deep navy → bright accent gradient. Distinct from the solid btn-accent
     primary CTA but firmly inside the site's blue palette so it doesn't clash. */
  background: linear-gradient(135deg, #0E2240 0%, #1D4ED8 55%, #3B82F6 100%);
  color: #fff;
  border: 1px solid rgba(96,165,250,.45);
  box-shadow: 0 10px 28px -10px rgba(37, 99, 235, .55), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .2s, box-shadow .25s, filter .2s;
  cursor: pointer;
}
.btn-supplies:hover,
.btn-supplies:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -10px rgba(37, 99, 235, .7), inset 0 1px 0 rgba(255,255,255,.25);
  filter: brightness(1.06);
  outline: none;
}
.btn-supplies:active { transform: translateY(0); }
.btn-supplies-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.22);
  color: #fff;
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s;
}
.btn-supplies:hover .btn-supplies-icon {
  transform: rotate(-8deg) scale(1.06);
  background: rgba(255,255,255,.32);
}
.btn-supplies-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
  min-width: 0;
}
.btn-supplies-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.btn-supplies-sub {
  font-size: 10.5px;
  font-weight: 600;
  opacity: .92;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.btn-supplies-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.btn-supplies:hover .btn-supplies-arrow { transform: translateX(5px); }
/* Diagonal shine sweep on hover — a single pass, not looping. */
.btn-supplies::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: -1;
}
.btn-supplies:hover::before { transform: translateX(110%); }
/* On small phones drop the sub line, keep the title + arrow + icon. */
@media (max-width: 480px) {
  .btn-supplies { padding: 10px 14px 10px 12px; gap: 10px; }
  .btn-supplies-icon { width: 34px; height: 34px; }
  .btn-supplies-sub { display: none; }
}
.btn-white {
  background: var(--white);
  color: var(--navy-800);
}
.btn-white:hover { background: var(--navy-50); color: var(--navy-900); }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-500);
}
.eyebrow-light { color: rgba(255,255,255,.7); }
.eyebrow-green { color: var(--green-600); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy-900);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.25; font-family: var(--font-sans); font-weight: 600; }
h4 { font-size: var(--t-lg); font-family: var(--font-sans); font-weight: 600; line-height: 1.3; }

h1 em, h2 em { font-style: italic; color: var(--accent-500); }

.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--text-muted); line-height: 1.65; }

/* ============================================================
   SECTION HEADER
   ============================================================ */
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-dark { background: var(--navy-700); color: var(--white); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: var(--white); }
.section-alt { background: var(--surface-alt); }
.section-header { max-width: 720px; margin-bottom: var(--sp-8); }
.section-header.centered { text-align: center; margin-left: auto; margin-right: auto; }
.section-header .eyebrow { margin-bottom: var(--sp-3); }
.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p { font-size: var(--t-lg); color: var(--text-muted); }
.section-dark .section-header p { color: rgba(255,255,255,.7); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 50%, var(--navy-600) 100%);
  color: var(--white);
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(5rem, 10vw, 8rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(37, 99, 235, .20), transparent 70%),
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(16, 185, 129, .12), transparent 70%);
  pointer-events: none;
}
/* Dot grid removed — was reading as a polka-dot texture rather than atmosphere */
.hero-content { position: relative; z-index: 2; max-width: 800px; }

/* ============================================================
   HERO AMBIENT — floating pills, spinning H&A shield, live hours pill
   Decorative layer that reinforces the pharmacy brand without
   distracting from the main hero CTAs.
   ============================================================ */

/* Background glow orbs — large blurred soft circles drifting slowly. Read as ambient
   mood-lighting rather than discrete shapes (no polka-dot effect). */
.hero-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  will-change: transform;
}
.hero-orb--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(37, 99, 235, .55), transparent 70%);
  top: -160px; left: 65%;
  animation: orb-drift-a 34s ease-in-out infinite;
}
.hero-orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(16, 185, 129, .28), transparent 70%);
  top: 55%; left: -140px;
  animation: orb-drift-b 40s ease-in-out infinite;
}
.hero-orb--3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(94, 234, 212, .18), transparent 70%);
  top: 65%; left: 38%;
  animation: orb-drift-c 46s ease-in-out infinite;
}
.hero-orb--4 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(167, 139, 250, .14), transparent 70%);
  top: 8%; left: 12%;
  animation: orb-drift-a 38s ease-in-out infinite reverse;
}
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-110px, 90px); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(140px, -70px); }
}
@keyframes orb-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-90px, -120px); }
}
@media (max-width: 700px) {
  .hero-orb--3, .hero-orb--4 { display: none; }
}

/* Bottom-right ambient container — holds the spinning shield + the live pill */
.hero-ambient {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: clamp(20px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  z-index: 1;            /* below the hero grid so it sits behind the interactive card */
  pointer-events: none;  /* purely decorative */
}

/* Static PNG shield default state — hidden on desktop (rotating video does its
   job), shown on mobile by the @media (max-width: 1100px) override below.
   This block MUST come before the media query so the cascade lets the
   mobile rule win on phones. Position absolute + inset 0 so it fills the
   parent box predictably regardless of the parent's flex behavior. */
.ha-shield-3d .shield-static {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
@keyframes shield-static-enter {
  0%   { opacity: 0; transform: scale(.82); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 1100px) {
  /* Mobile: swap the rotating video for the pre-keyed static PNG. Loads
     instantly, no decode, no WebGL, no autoplay issues — just a snappy
     fade+scale entrance and then it sits still next to the slogan. */
  .hero { position: relative; }
  .hero-ambient {
    position: absolute;
    top: clamp(90px, 14vw, 140px);   /* lifted to align with the big-font slogan */
    right: clamp(28px, 7vw, 56px);
    bottom: auto;
    left: auto;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    gap: 10px;
    z-index: 3;
    pointer-events: auto;
  }
  .hero-ambient .ha-shield-3d {
    width: 160px;
    height: 160px;
    /* Kill the desktop entrance (the video-shield zoom-in) and the canvas
       compositing hints — we're not rendering video here anymore. */
    animation: none;
    contain: none;
  }
  /* Hide the video pipeline elements on mobile */
  .ha-shield-3d .shield-src,
  .ha-shield-3d .shield-canvas { display: none; }
  /* Show the static PNG with a quick (~0.55s) fade + scale entrance */
  .ha-shield-3d .shield-static {
    display: block;
    animation: shield-static-enter 0.55s cubic-bezier(.22, 1, .36, 1) both;
  }
  /* Halo glow can stay — it's the static radial gradient behind the shield */

  .hero-ambient .hero-live { display: none; }
  /* Only the eyebrow + H1 share the shield's vertical band — pad those so
     they don't run under the shield. Paragraph + buttons keep full width.
     Padding is tight (140-145px) so the H1 has room for "Your health,"
     at the original big font; the shield PNG has transparent margin on its
     left side which gives a few extra pixels of visual breathing room. */
  .hero-content > .eyebrow,
  .hero-content > h1 {
    padding-right: 145px;
  }
}
@media (max-width: 760px) {
  .hero-ambient {
    top: clamp(40px, 8vw, 75px);     /* raised so it sits alongside the eyebrow + top of the H1 */
    right: 24px;
  }
  .hero-ambient .ha-shield-3d {
    width: 150px;
    height: 150px;
  }
  .hero-content > .eyebrow,
  .hero-content > h1 {
    padding-right: 138px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ha-shield-3d .shield-static { animation: none; }
}

/* The 3D rotating H&A shield (Higgsfield video, chroma-keyed in real time via canvas).
   Video does the rotation — no CSS spin needed. CSS just handles the entrance fade. */
.ha-shield-3d {
  width: 180px;
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: shield-enter 1.4s cubic-bezier(.22, 1, .36, 1) .4s backwards;
  /* GPU layer promotion so the canvas pixels paint independently. */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  contain: layout paint;
}
/* Static radial glow behind the shield — replaces filter: drop-shadow, which
   would re-blur the live silhouette every frame as the shield rotates. This
   paints once at page load and never recomputes, freeing the per-frame budget
   for the actual video chroma-key pipeline. */
.ha-shield-3d::before {
  content: "";
  position: absolute;
  inset: -22% -22% -28% -22%;
  background: radial-gradient(closest-side, rgba(37, 99, 235, .42) 0%, rgba(37, 99, 235, .18) 38%, transparent 72%);
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}
/* Video element is an offscreen 1×1 feeder for the canvas chroma-key path. */
.ha-shield-3d .shield-src {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Note: .shield-static default declaration + @keyframes shield-static-enter
   live above (before the mobile @media block) so source-order cascade lets
   the mobile override correctly flip display:none → display:block. */
.ha-shield-3d .shield-canvas {
  /* Canvas is sized at the bbox's aspect ratio (not the wrap's), so we don't
     stretch it to fill. Instead we cap it at the wrap dimensions and let flex
     center it — the shield always renders at correct proportions. */
  max-width: 100%;
  max-height: 100%;
  display: block;
  z-index: 2;
  image-rendering: auto;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  /* Radial mask wipes ONLY the canvas corners — the shield silhouette extends
     to ~85% radius, so the mask is fully opaque until 90% and only fades in
     the last 10% to wipe the rectangular fringe without touching the shield. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 90%, transparent 100%);
          mask-image: radial-gradient(circle at 50% 50%, #000 90%, transparent 100%);
}
@keyframes shield-enter {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* Live hours pill — animates the current open/closed state */
.hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: .02em;
  animation: live-enter 1.4s cubic-bezier(.22, 1, .36, 1) .9s backwards;
  white-space: nowrap;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94A3B8;             /* default grey = closed */
  flex-shrink: 0;
  position: relative;
}
.hero-live-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: live-pulse 2.4s ease-in-out infinite;
}
.hero-live-dot--open {
  background: #10B981;             /* green when open */
}
@keyframes shield-pulse-once { 0%, 100% { } }
@keyframes live-enter {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1); opacity: .5; }
  50%      { transform: scale(2); opacity: 0; }
}

/* Hero-live text fades when rotating between messages */
.hero-live-text {
  transition: opacity .35s ease;
}
.hero-live.swapping .hero-live-text { opacity: 0; }

/* Reduced-motion: kill the kinetic stuff, keep static visibility */
@media (prefers-reduced-motion: reduce) {
  .hero-pill { animation: none; }
  .ha-shield-3d, .ha-shield-3d img { animation: none; }
  .hero-live, .hero-live-dot::after { animation: none; }
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;       /* top-align so the mockup sits up high, not vertically centered */
}
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: 1.25fr 1fr; }   /* give left column more room */
  .hero-content { max-width: none; }
  .hero-mock { margin-top: 8px; }                      /* nudge mockup up to align with heading */
}

/* Status-card mockup that fills the right side of the hero */
.hero-mock {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  padding: var(--sp-5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}
.hero-mock-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hero-mock-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.hero-mock-title { margin-left: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .55); }
.hero-mock-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: 12px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s;
}
.hero-mock-row:hover {
  background: rgba(255, 255, 255, .10);
  transform: translateX(2px);
}
.hero-mock-row:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
}
.hero-mock-row--success { background: rgba(16, 185, 129, .10); border: 1px solid rgba(16, 185, 129, .25); }
.hero-mock-row--success:hover { background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .45); }
.hero-mock-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s, transform .2s;
  color: var(--accent-400);
  font-weight: 600;
}
.hero-mock-row:hover .hero-mock-arrow { opacity: 1; transform: translateX(0); }
.hero-mock-foot-link {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  transition: color .2s;
}
.hero-mock-foot-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero-mock-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.hero-mock-row-body { flex: 1; min-width: 0; }
.hero-mock-row-title { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.35; }
.hero-mock-row-meta { font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 2px; line-height: 1.4; }
.hero-mock-row-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-400);
  padding: 4px 8px;
  background: rgba(37, 99, 235, .15);
  border-radius: 999px;
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}
.hero-mock-row--success .hero-mock-row-tag { color: #10B981; background: rgba(16, 185, 129, .15); }
.hero-mock-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.hero h1 { color: var(--white); margin-bottom: var(--sp-5); }
.hero h1 em { color: var(--accent-400); font-family: var(--font-display); font-style: italic; }
.hero-desc {
  /* Matches the dark feature section's body copy exactly — same size, weight,
     opacity, and line-height — so the page reads in one consistent voice. */
  font-size: var(--t-lg);
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  font-weight: 400;
  margin-bottom: var(--sp-5);
  max-width: 620px;
}
.hero-desc strong { color: #fff; font-weight: 600; }

/* Hero supplies — horizontally scrollable category chip strip. Each chip is a
   real anchor that deep-links into the catalog. Pill shape, glassy fill, gentle
   stagger fade-in on load, lift + accent border on hover. On narrow screens the
   row becomes a swipeable rail with edge-fade masks. */
.hero-supplies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--sp-7);
  max-width: 620px;
}
.supply-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
  opacity: 0;
  transform: translateY(8px);
  animation: chipIn .5s cubic-bezier(.2,.7,.2,1) var(--chip-delay,0s) forwards;
}
.supply-chip:hover,
.supply-chip:focus-visible {
  background: rgba(59,130,246,.18);
  border-color: rgba(59,130,246,.55);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(59,130,246,.55);
  outline: none;
}
.supply-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(59,130,246,.18);
  color: var(--accent-400);
  flex-shrink: 0;
  transition: background .18s, color .18s, transform .18s;
}
.supply-chip:hover .supply-chip-icon { background: var(--accent-500); color: #fff; transform: rotate(-6deg) scale(1.05); }
.supply-chip-label { line-height: 1; }
.supply-chip--all {
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(59,130,246,.95));
  border-color: rgba(96,165,250,.6);
  color: #fff;
  font-weight: 600;
}
.supply-chip--all:hover { background: linear-gradient(135deg, var(--accent-600), var(--accent-500)); border-color: rgba(255,255,255,.5); }
.supply-chip-arrow { transition: transform .2s; display: inline-block; }
.supply-chip--all:hover .supply-chip-arrow { transform: translateX(3px); }
@keyframes chipIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .supply-chip { animation: none; opacity: 1; transform: none; }
}
/* On narrow screens turn the chip strip into a swipeable rail with edge fades. */
@media (max-width: 760px) {
  .hero-supplies {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--sp-5));
    margin-right: calc(-1 * var(--sp-5));
    padding: 4px var(--sp-5) 10px;
    max-width: none;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .hero-supplies::-webkit-scrollbar { display: none; }
  .supply-chip { scroll-snap-align: start; flex-shrink: 0; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-6));
  flex-wrap: nowrap;            /* keep 4.7 reviews · Free delivery · 6+ yrs on a single row */
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 600px) {
  .hero-trust { flex-wrap: wrap; }   /* allow wrap only on small phones where the row genuinely can't fit */
}
.hero-trust-item { display: flex; align-items: center; gap: var(--sp-3); }
.hero-trust-num { font-size: var(--t-2xl); font-weight: 700; color: var(--white); line-height: 1; font-family: var(--font-display); font-style: italic; }
.hero-trust-label { font-size: var(--t-xs); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
.hero-stars { color: #FBBF24; letter-spacing: 2px; font-size: var(--t-lg); }

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: var(--sp-5) 0; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-5);
  align-items: center;
}
.trust-item { display: flex; align-items: center; gap: var(--sp-3); }
.trust-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--navy-50);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-label { font-size: var(--t-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.trust-value { font-size: var(--t-sm); font-weight: 600; color: var(--navy-800); }

/* ============================================================
   SERVICES CARDS
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy-200);
}
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--navy-50), var(--accent-50));
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-icon svg { width: 28px; height: 28px; }
.service-card h3 { font-size: var(--t-xl); }
.service-card p { color: var(--text-muted); font-size: var(--t-sm); line-height: 1.65; }
.service-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent-500);
  font-weight: 600;
  font-size: var(--t-sm);
}
.service-link:hover { gap: var(--sp-3); }

/* ============================================================
   FORMS
   ============================================================ */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-card h2, .form-card h3 { margin-bottom: var(--sp-4); }
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
@media (min-width: 700px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }
.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-group label { font-size: var(--t-sm); font-weight: 600; color: var(--navy-800); }
.form-group label .req { color: #DC2626; margin-left: 4px; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--text);
  font-size: var(--t-base);
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-help { font-size: var(--t-xs); color: var(--text-tertiary); }
.checkbox-group { display: flex; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-3); }
.checkbox-group input[type="checkbox"] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent-500); }
.checkbox-group label { font-size: var(--t-sm); color: var(--text-muted); font-weight: 400; line-height: 1.5; }
.hipaa-notice {
  background: var(--accent-50);
  border-left: 3px solid var(--accent-500);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-bottom: var(--sp-5);
  font-size: var(--t-sm);
  color: var(--navy-800);
  line-height: 1.55;
}

/* ============================================================
   TABS (for prescriptions page)
   ============================================================ */
.tab-bar {
  display: flex;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--sp-1);
  gap: 4px;
  margin-bottom: var(--sp-6);
  max-width: 580px;
}
.tab-btn {
  flex: 1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-muted);
  transition: background .2s, color .2s, box-shadow .2s;
  white-space: nowrap;
}
.tab-btn.active {
  background: var(--white);
  color: var(--navy-800);
  box-shadow: var(--shadow-sm);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   PAGE HERO (smaller hero for inner pages)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--white);
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: .4;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); margin-bottom: var(--sp-4); max-width: 800px; }
.page-hero h1 em { color: var(--accent-400); font-family: var(--font-display); font-style: italic; }
.page-hero p { color: rgba(255,255,255,.8); font-size: var(--t-lg); max-width: 660px; line-height: 1.65; }
.page-hero .eyebrow { color: rgba(255,255,255,.6); margin-bottom: var(--sp-3); }

/* ============================================================
   CATALOG (Searchable medical supplies)
   ============================================================ */
.catalog-search {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-3);
  margin-bottom: var(--sp-7);
  box-shadow: var(--shadow-sm);
}
.catalog-search input {
  flex: 1;
  min-width: 240px;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: transparent;
  font-size: var(--t-base);
}
.catalog-search input:focus { outline: none; }
.catalog-search select {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--t-sm);
  font-weight: 500;
}
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.product-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--navy-200); }
.product-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--navy-50);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-icon svg { width: 24px; height: 24px; }
.product-card h3 { font-size: var(--t-base); font-family: var(--font-sans); font-weight: 600; }
.product-card p { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.55; }
.product-tag {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-500);
  background: var(--accent-50);
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-top: auto;
  align-self: flex-start;
}
.catalog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--text-muted);
  font-size: var(--t-base);
  background: var(--surface-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
}

/* ============================================================
   PRESCRIPTION PRICE LOOKUP
   ============================================================ */
.rx-search {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.rx-search-bar {
  display: flex;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.rx-search-bar input {
  flex: 1;
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--t-lg);
}
.rx-search-bar input:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.rx-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}
.rx-suggestion {
  font-size: var(--t-xs);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text-muted);
  transition: background .2s, color .2s, border-color .2s;
  cursor: pointer;
}
.rx-suggestion:hover { background: var(--navy-50); border-color: var(--navy-300); color: var(--navy-700); }
.rx-result {
  border-top: 1px solid var(--border);
  padding-top: var(--sp-5);
}
.rx-result-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.rx-result-name { font-size: var(--t-xl); font-weight: 700; color: var(--navy-800); }
.rx-result-price { font-family: var(--font-display); font-size: var(--t-4xl); color: var(--navy-700); line-height: 1; }
.rx-result-price small { font-size: var(--t-base); color: var(--text-muted); margin-left: 4px; font-family: var(--font-sans); }
.rx-result-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
}
.rx-meta-item .label { font-size: var(--t-xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.rx-meta-item .value { font-size: var(--t-sm); font-weight: 600; color: var(--navy-800); margin-top: 2px; }
.rx-disclaimer {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: #FEF3C7;
  border-left: 3px solid #F59E0B;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-xs);
  color: #78350F;
  line-height: 1.6;
}

/* ============================================================
   TEAM GRID
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5);
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.team-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.team-photo {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-100), var(--accent-50));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  color: var(--navy-700);
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
}
.team-card.featured { border-color: var(--navy-300); background: linear-gradient(180deg, var(--accent-50), var(--white)); }
.team-card.featured .team-photo {
  width: 160px;
  height: 160px;
  font-size: var(--t-5xl);
  background: linear-gradient(135deg, var(--navy-600), var(--accent-500));
  color: var(--white);
}
.team-role { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-500); font-weight: 700; margin-bottom: var(--sp-2); }
.team-name { font-size: var(--t-xl); font-family: var(--font-display); margin-bottom: var(--sp-3); }
.team-bio { font-size: var(--t-sm); color: var(--text-muted); line-height: 1.6; }
.photo-pending { font-size: var(--t-xs); color: var(--text-tertiary); margin-top: var(--sp-3); font-style: italic; }

/* ============================================================
   TEAM RAIL (homepage horizontal scroll variant)
   Used only on the index page — about.html still uses .team-grid.
   ============================================================ */
.team-rail {
  position: relative;
  max-width: 100%;
  padding: var(--sp-2) 0;
}
.team-rail-track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: visible;
  /* No scroll-snap — snap was clamping wheel scrolls back toward the nearest
     card and made reaching the very first card (Hilmi) feel impossible. Free
     scrolling + the JS rAF easing in app.js give a smooth glassy feel. */
  -webkit-overflow-scrolling: touch;
  /* Tight left/right padding — cards hug the page edge so the rail looks full
     instead of floating in a centered container. Right padding lets the last
     card sit naturally instead of jamming against the viewport. */
  padding: var(--sp-5) var(--sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--navy-300) transparent;
  /* Soft fade on the right edge only — hints at more content. Left edge stays
     crisp so the first card visually anchors the row. */
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent 100%);
}
.team-rail-track > * { scroll-snap-align: none; }
.team-rail-track::-webkit-scrollbar { height: 8px; }
.team-rail-track::-webkit-scrollbar-track { background: transparent; }
.team-rail-track::-webkit-scrollbar-thumb { background: var(--navy-200); border-radius: 9999px; }
.team-rail-track::-webkit-scrollbar-thumb:hover { background: var(--navy-300); }

.team-card--rail {
  flex: 0 0 320px;
  scroll-snap-align: start;
  text-align: left;
  padding: var(--sp-6);
  /* Stagger fade + slight rise on mount. */
  opacity: 0;
  transform: translateY(16px);
  animation: cardIn .65s cubic-bezier(.2,.7,.2,1) var(--card-delay,0s) forwards;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.team-card--rail:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(20,46,85,.45);
  border-color: var(--accent-400);
}
.team-card--rail .team-photo {
  margin: 0 0 var(--sp-4);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.team-card--rail:hover .team-photo {
  transform: scale(1.08) rotate(-3deg);
  box-shadow: 0 10px 30px -10px rgba(37,99,235,.5);
}
.team-card--rail.featured { flex: 0 0 360px; }
.team-card--rail.featured .team-photo {
  /* Override the larger 160×160 sizing — keep the rail visually consistent. */
  width: 120px;
  height: 120px;
  font-size: var(--t-4xl);
}
/* Subtitle line between role + name. Used for Adhim Naser to surface his
   ownership of DashRX without burying it in the bio. Pill-style accent dot. */
.team-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: calc(-1 * var(--sp-2)) 0 var(--sp-3);
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  color: #B45309;
  text-transform: uppercase;
  white-space: nowrap;
}
.team-subtitle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245,158,11,.22);
}
/* Primary subtitle — for Dr. Hilmi. Navy→accent gradient, bigger type,
   star icon. Visibly outranks the amber pill used for other staff. */
.team-subtitle--primary {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--accent-500) 65%, var(--accent-400) 100%);
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 12px;
  margin-top: calc(-1 * var(--sp-1));
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.team-subtitle-icon {
  color: #FBBF24;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
  flex-shrink: 0;
}

@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .team-card--rail { animation: none; opacity: 1; transform: none; }
  .team-card--rail:hover { transform: none; }
  .team-card--rail:hover .team-photo { transform: none; }
}

/* Scroll buttons — hidden on touch / small screens, fade in on rail hover. */
.team-rail-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(20,46,85,.35);
  opacity: 0;
  transition: opacity .25s, background .2s, transform .2s, box-shadow .2s;
  z-index: 2;
}
.team-rail:hover .team-rail-btn,
.team-rail-btn:focus-visible { opacity: 1; }
.team-rail-btn:hover {
  background: var(--accent-500);
  color: #fff;
  border-color: var(--accent-500);
  box-shadow: 0 12px 30px -8px rgba(37,99,235,.5);
}
.team-rail-btn:active { transform: translateY(-50%) scale(.94); }
.team-rail-btn[disabled] { opacity: 0 !important; pointer-events: none; }
.team-rail-btn--prev { left: max(var(--sp-3), calc((100vw - 1200px) / 2 + 8px)); }
.team-rail-btn--next { right: max(var(--sp-3), calc((100vw - 1200px) / 2 + 8px)); }
@media (hover: none), (max-width: 760px) {
  .team-rail-btn { display: none; }
}

/* On small screens shrink the cards so a glimpse of the next card always
   peeks in — a clear visual cue that the row is scrollable. */
@media (max-width: 760px) {
  .team-rail-track {
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    scroll-padding-left: var(--sp-5);
  }
  .team-card--rail { flex: 0 0 240px; padding: var(--sp-4); }
  .team-card--rail .team-photo { width: 90px; height: 90px; font-size: var(--t-3xl); }
  .team-card--rail.featured { flex: 0 0 270px; }
  .team-card--rail.featured .team-photo { width: 90px; height: 90px; font-size: var(--t-3xl); }
  .team-subtitle { font-size: 10px; padding: 3px 8px; }
}
/* On ultra-wide / 4K monitors bump the card sizes further so the rail still
   visibly overflows and scrolling is necessary. */
@media (min-width: 2000px) {
  .team-card--rail { flex: 0 0 380px; }
  .team-card--rail.featured { flex: 0 0 420px; }
}
/* Cards are anchors now (whole card clickable → about.html#name). Strip the
   link styling and keep card styling intact. */
.team-card--rail { color: inherit; text-decoration: none; }
.team-card--rail:hover { color: inherit; text-decoration: none; }

/* ============================================================
   TEAM CARD STAGE (about.html — full bio page)
   Compact fixed-height section. One scene visible at a time, crossfading
   when the active scene changes. The wheel only cycles between people
   while the cursor is over the stage — otherwise the page scrolls past
   normally so visitors aren't trapped in the section.
   ============================================================ */
.team-scroll {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed, comfortable height — leaves the rest of the page room to breathe. */
  min-height: 560px;
  padding: var(--sp-5) 0 var(--sp-9);
}
.team-scroll-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Hover-detection zone — wider than the visible card so the wheel still
   catches when the cursor is near the card on either side, but narrower
   than the full section so the outer page-edge gutters remain a free-scroll
   zone. Sized to roughly halfway between the card edge and the page edge. */
.team-scroll-bounds {
  position: relative;
  width: 100%;
  max-width: min(1500px, 78vw);
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-scroll-stage-inner {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 440px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
/* Hover affordance — accent ring on the active card while the cursor is in
   the bounds wrapper (the wider hover zone). Visual signal matches where the
   wheel actually gets captured. */
.team-scroll-bounds:hover .team-scene.is-active .team-scene-card {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12), 0 18px 40px -16px rgba(37, 99, 235, .35);
}

.team-scene {
  position: absolute;
  inset: 0 clamp(1rem, 4vw, 2rem);
  scroll-margin-top: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(28px) scale(.97);
  transition: opacity .5s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  will-change: opacity, transform;
}
.team-scene.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 1;
}
.team-scene-card {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-7);
  align-items: center;
  text-align: left;
  box-shadow: var(--shadow-md);
  transition: box-shadow .3s, transform .3s, border-color .25s;
}
.team-scene-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--navy-300);
  transform: translateY(-2px);
}
.team-scene-card--featured {
  background: linear-gradient(180deg, var(--accent-50), var(--white));
  border-color: var(--navy-300);
}
.team-scene-photo {
  width: 150px;
  height: 150px;
  margin: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-100), var(--accent-50));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--t-5xl);
  color: var(--navy-700);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.team-scene-photo--featured {
  width: 170px;
  height: 170px;
  font-size: 3.6rem;
  background: linear-gradient(135deg, var(--navy-600), var(--accent-500));
  color: #fff;
}
.team-scene-body { min-width: 0; }
.team-scene-body .team-name { font-size: var(--t-2xl); margin-bottom: var(--sp-3); }
.team-scene--hero .team-scene-body .team-name { font-size: var(--t-3xl); }
.team-scene-body .team-bio { font-size: var(--t-base); line-height: 1.7; }

/* Progress dots — fixed below the stage's card area. Active dot is wider
   and accent-blue. Clicking jumps directly to that person. */
.team-scroll-dots {
  position: absolute;
  bottom: -56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.team-scroll-dot {
  position: relative;
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 9999px;
  background: var(--navy-200);
  border: none;
  cursor: pointer;
  transition: background .25s, width .35s cubic-bezier(.2,.7,.2,1), transform .2s;
}
.team-scroll-dot:hover { background: var(--navy-300); transform: scale(1.15); }
.team-scroll-dot.is-active {
  background: var(--accent-500);
  width: 28px;
}
.team-scroll-dot span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--navy-800);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
}
.team-scroll-dot:hover span { opacity: 1; }

/* "Hover and scroll" hint — appears in the top-right of the stage, gently
   pulses to draw attention, and JS hides it once the user starts cycling. */
.team-scroll-cue {
  position: absolute;
  top: -36px;
  right: clamp(1rem, 4vw, 2rem);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9999px;
  background: rgba(37, 99, 235, .08);
  border: 1px solid rgba(37, 99, 235, .25);
  color: var(--accent-600);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  pointer-events: none;
  animation: cuePulse 2.4s ease-in-out infinite;
  transition: opacity .4s;
}
.team-scroll-cue.is-hidden { opacity: 0; }
@keyframes cuePulse {
  0%, 100% { opacity: .65; }
  50%      { opacity: 1; }
}
@media (hover: none) {
  /* No hover means the wheel-capture model doesn't apply — hide the cue. */
  .team-scroll-cue { display: none; }
}

/* Mobile fallback — drop the sticky pinning, stack scenes normally with
   simple fade-up on scroll. Much more comfortable on small screens. */
@media (max-width: 760px) {
  .team-scroll { height: auto; }
  .team-scroll-stage {
    position: static;
    height: auto;
    display: block;
  }
  .team-scroll-stage-inner {
    height: auto;
    padding: 0 var(--sp-5);
  }
  .team-scene {
    position: relative;
    inset: auto;
    opacity: 0;
    transform: translateY(28px);
    pointer-events: auto;
    margin-bottom: var(--sp-6);
    transition: opacity .6s, transform .6s;
  }
  .team-scene.is-mobile-visible,
  .team-scene.is-active { opacity: 1; transform: none; }
  .team-scene-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--sp-5);
    gap: var(--sp-4);
  }
  .team-scene-photo { margin: 0 auto; width: 110px; height: 110px; font-size: var(--t-4xl); }
  .team-scene-photo--featured { width: 130px; height: 130px; font-size: var(--t-5xl); }
  .team-scroll-segment { display: none; }
  .team-scroll-dots { display: none; }
  .team-scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .team-scene { transition: none; }
  .team-scroll-cue { animation: none; }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.testimonial {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.testimonial-stars { color: #FBBF24; letter-spacing: 2px; font-size: var(--t-base); }
.testimonial-quote { font-size: var(--t-base); color: var(--text); line-height: 1.65; flex: 1; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-600);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--t-sm);
  flex-shrink: 0;
}
.testimonial-name { font-size: var(--t-sm); font-weight: 600; color: var(--navy-800); }
.testimonial-source { font-size: var(--t-xs); color: var(--text-tertiary); }

/* ============================================================
   FEATURE LIST + BENEFITS
   ============================================================ */
.feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.feature-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--t-base); color: var(--text-muted); line-height: 1.55; }
.feature-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.feature-check svg { width: 14px; height: 14px; }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > div:first-child { order: 2; } }
/* Inside the prescription tab panels (Refill / Transfer / Med Sync) the right
   column is a tall form. With default center-align the left-column heading
   sinks to the vertical middle, forcing users to scroll to find it. Top-align
   so the heading sits next to the start of the form. */
.tab-panel .split { align-items: start; }

/* Reusable autocomplete dropdown — used on the price-lookup input and the
   medical-supplies search. Floats below its input via absolute positioning;
   the input's parent gets position:relative at attach time. */
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .12), 0 4px 10px rgba(15, 23, 42, .06);
  z-index: 60;
  max-height: 320px;
  overflow-y: auto;
  padding: 4px;
}
.autocomplete-item {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background-color .12s ease;
}
.autocomplete-item:hover,
.autocomplete-item.is-active {
  background: #F1F5F9;
}
.autocomplete-label {
  font-weight: 600;
  color: var(--navy-800);
  flex: 0 0 auto;
}
.autocomplete-sub {
  font-size: var(--t-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--white);
  border-radius: var(--r-2xl);
  padding: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(37, 99, 235, .25), transparent 70%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-4); }
.cta-band h2 em { color: var(--accent-400); font-style: italic; font-family: var(--font-display); }
.cta-band p { color: rgba(255,255,255,.8); font-size: var(--t-lg); margin-bottom: var(--sp-6); max-width: 600px; margin-left: auto; margin-right: auto; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 820px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.faq-q {
  width: 100%;
  text-align: left;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--navy-800);
}
.faq-q svg { transition: transform .25s; flex-shrink: 0; }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s, padding .3s;
  padding: 0 var(--sp-5);
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.65;
}
.faq-item.open .faq-a { max-height: 600px; padding: 0 var(--sp-5) var(--sp-5); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: var(--sp-9) 0 var(--sp-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--sp-7);
  margin-bottom: var(--sp-8);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { background: var(--white); padding: var(--sp-3); border-radius: var(--r-md); margin-bottom: var(--sp-4); max-width: 220px; }
.footer-brand p { font-size: var(--t-sm); line-height: 1.65; margin-bottom: var(--sp-4); }
.footer-col h4 { color: var(--white); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col a { color: rgba(255,255,255,.7); font-size: var(--t-sm); text-decoration: none; }
.footer-col a:hover { color: var(--white); }
.footer-hours { font-size: var(--t-sm); line-height: 1.8; }
.footer-bottom { padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.10); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--t-xs); }
.footer-watermark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  padding: 6px 14px;
  border-radius: var(--r-full);
  color: rgba(255,255,255,.8);
}

/* ============================================================
   ANIMATIONS — progressive enhancement (default visible, JS opts into fade)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .fade-up.js-fade { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
  .fade-up.js-fade.in { opacity: 1; transform: none; }
}

/* ============================================================
   SERVICE-PAGE VISUALS (compliance / prescriptions / consultations)
   Replaces the placeholder SVG icons with the ChatGPT-generated PNGs.
   Square 1:1 frame with breathing room — no heavy gradient panel, the
   illustrations carry their own composition.
   ============================================================ */
.svc-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.svc-visual img {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  border-radius: var(--r-2xl);
}

/* ============================================================
   DASHRX PARTNER CARD (services.html#delivery)
   ============================================================ */
.dashrx-card {
  background: linear-gradient(135deg, #E8F4F4, #F8FAFB);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.dashrx-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  color: #0F766E;
}
.dashrx-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 20px;
  padding: var(--sp-5) var(--sp-6);
  aspect-ratio: 1 / 1;
  max-width: 280px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(15, 118, 110, .08);
  overflow: hidden;
}
.dashrx-logo-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.dashrx-tagline {
  font-style: italic;
  color: #134E4A;
  font-size: var(--t-lg);
  line-height: 1.5;
  font-family: var(--font-display);
  text-align: center;
  margin: 0;
}
.dashrx-contacts {
  border-top: 1px solid rgba(15, 118, 110, .15);
  padding-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.dashrx-contact {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: #134E4A;
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  transition: color .2s;
}
.dashrx-contact:hover { color: #0F766E; }
.dashrx-contact-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0F766E;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dashrx-coverage {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  font-weight: 600;
  font-size: var(--t-sm);
  color: #134E4A;
}
.dashrx-coverage-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #10B981;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   DELIVERY ANIMATION (services.html#delivery)
   The .delivery-media wrapper layers two visuals:
     1. <video class="delivery-real">  — the real Higgsfield animation
     2. .delivery-stage                 — the CSS stick-figure loader
   The video fades in once `canplay` fires; the loader fades out behind it.
   If the video fails or hasn't downloaded yet, the loader keeps animating
   so there's never a blank space.
   ============================================================ */
.delivery-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.delivery-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 3;
  background: #0E2240;        /* match dark hero bg while seeking */
}
.delivery-real.ready { opacity: 1; }
.delivery-media .delivery-stage {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  transition: opacity .5s ease;
  z-index: 2;
}
.delivery-media.has-video .delivery-stage { opacity: 0; pointer-events: none; }

.delivery-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
  gap: var(--sp-4);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
  min-height: 220px;
}
.dvy-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.dvy-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: rgba(255,255,255,.65);
}
.dvy-path {
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  top: 58%;
  height: 8px;
  z-index: 1;
  pointer-events: none;
}

/* Bag — travels left → middle → right over 7s, then loops */
.dvy-bag {
  position: absolute;
  top: 52%;
  left: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(16,185,129,.35));
  animation: dvy-bag-travel 7s ease-in-out infinite;
}
@keyframes dvy-bag-travel {
  0%, 12%   { left: 16.66%; transform: translate(-50%, 0) rotate(0); }
  18%       { left: 18%; transform: translate(-50%, -8px) rotate(-6deg); }
  24%       { left: 50%; transform: translate(-50%, 0) rotate(0); }
  40%, 52%  { left: 50%; transform: translate(-50%, 0) rotate(0); }
  60%       { left: 70%; transform: translate(-50%, -8px) rotate(6deg); }
  72%, 90%  { left: 83.33%; transform: translate(-50%, 0) rotate(0); }
  95%       { left: 83.33%; transform: translate(-50%, -8px) rotate(0); opacity: 1; }
  100%      { left: 16.66%; transform: translate(-50%, 0) rotate(0); opacity: 1; }
}

/* Pharmacist's right arm extends slightly when bag leaves */
.dvy-arm-right { transform-origin: 40px 48px; animation: dvy-arm-pharm 7s ease-in-out infinite; }
@keyframes dvy-arm-pharm {
  0%, 14%  { transform: rotate(0); }
  18%, 22% { transform: rotate(-18deg); }
  26%, 100%{ transform: rotate(0); }
}

/* Driver walks in place — alternating arms/legs */
.dvy-arm-walk    { transform-origin: 40px 42px; animation: dvy-walk-fwd 0.6s ease-in-out infinite alternate; }
.dvy-arm-walk-r  { transform-origin: 40px 42px; animation: dvy-walk-bwd 0.6s ease-in-out infinite alternate; }
.dvy-leg-walk    { transform-origin: 40px 56px; animation: dvy-walk-bwd 0.6s ease-in-out infinite alternate; }
.dvy-leg-walk-r  { transform-origin: 40px 56px; animation: dvy-walk-fwd 0.6s ease-in-out infinite alternate; }
@keyframes dvy-walk-fwd { 0% { transform: rotate(-14deg); } 100% { transform: rotate(14deg); } }
@keyframes dvy-walk-bwd { 0% { transform: rotate(14deg); }  100% { transform: rotate(-14deg); } }

/* Patient reaches for the bag at the end of the loop */
.dvy-receive { transform-origin: 40px 48px; animation: dvy-receive 7s ease-in-out infinite; }
@keyframes dvy-receive {
  0%, 68%   { transform: rotate(0); }
  74%, 88%  { transform: rotate(-20deg); }
  94%, 100% { transform: rotate(0); }
}

/* Heart floats up briefly after patient receives bag */
.dvy-heart { opacity: 0; animation: dvy-heart 7s ease-in-out infinite; transform-origin: 40px 20px; }
@keyframes dvy-heart {
  0%, 82% { opacity: 0; transform: translateY(8px); }
  88%     { opacity: 1; transform: translateY(0); }
  94%     { opacity: 1; transform: translateY(-6px); }
  100%    { opacity: 0; transform: translateY(-12px); }
}

/* Loading bar at the bottom — shows the 7-second cycle progress */
.dvy-loader-bar {
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  bottom: 14px;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.dvy-loader-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #10B981, #3B82F6);
  animation: dvy-loader 7s linear infinite;
}
@keyframes dvy-loader { 0% { width: 0; } 100% { width: 100%; } }

.dvy-status {
  position: absolute;
  bottom: -28px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Respect reduced motion — show static end state */
@media (prefers-reduced-motion: reduce) {
  .dvy-bag, .dvy-arm-right, .dvy-arm-walk, .dvy-arm-walk-r,
  .dvy-leg-walk, .dvy-leg-walk-r, .dvy-receive, .dvy-heart,
  .dvy-loader-fill { animation: none; }
  .dvy-bag { left: 50%; }
  .dvy-loader-fill { width: 50%; }
}

/* On small screens — stack vertically and shrink path */
@media (max-width: 640px) {
  .delivery-stage { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-5); min-height: 0; }
  .dvy-bag, .dvy-path { display: none; }     /* animation skipped on phones — just shows the icons + loader bar */
  .dvy-loader-bar { position: relative; bottom: auto; margin-top: var(--sp-4); }
  .dvy-status { position: relative; bottom: auto; margin-top: var(--sp-3); }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--sp-4); }
.mt-4 { margin-top: var(--sp-6); }
.mt-6 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-4); }
.mb-4 { margin-bottom: var(--sp-6); }
.mb-6 { margin-bottom: var(--sp-8); }

/* ===========================================
   MOBILE OVERFLOW + PERF FIXES (2026-05-28)
   Applied by hahealth-mobile-fix workflow.
   Purely additive — overrides via cascade.
   =========================================== */

/* --- Global safety net (all viewports) --- */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg { max-width: 100%; height: auto; }

/* Defensive: stop grid children from expanding to min-content (any viewport) */
.hero-grid > * { min-width: 0; }
.hero-content { min-width: 0; }

/* Queue widget overflow guard — applies at all viewports */
.hero-mock {
  max-width: min(460px, 100%);
  box-sizing: border-box;
  min-width: 0;
}
.hero-mock-row {
  min-width: 0;
  box-sizing: border-box;
}
.hero-mock-row-body { overflow: hidden; }
.hero-mock-row-title,
.hero-mock-row-meta {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.hero-mock-row-title { text-wrap: pretty; }

/* Footer logo defensive sizing */
.footer img[src*="logo"] {
  width: auto;
  height: auto;
  max-width: 200px;
}
.nav-logo img {
  width: auto;
  height: auto;
  max-height: 80px;
}

/* --- Tablet / lower-mid breakpoint (<=640px) --- */
@media (max-width: 640px) {
  .hero, .hero-section, .hero-inner, .container, main {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    overflow-x: clip;
  }
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero-content h1 {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* IMPORTANT: do NOT use text-wrap: balance here. The H1 markup is
       "Your health,<br><em>our priority.</em>" — balance would try to
       equalize all four words across four lines (Your / health, / our /
       priority.). Default wrap honors the <br> and keeps each phrase on
       one line because both fit in any iPhone-class viewport. */
    text-wrap: wrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .hero-content strong {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .hero-desc {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .eyebrow {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal;
  }
  .hero-supplies {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
  }
  .supply-chip {
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 1 auto;
  }
  .hero-orb,
  .hero-orb--1,
  .hero-orb--2,
  .hero-orb--3 {
    max-width: 60vw !important;
    max-height: 60vw !important;
  }
}

/* --- Phone breakpoint (<=480px) --- */
@media (max-width: 480px) {
  /* Global: no horizontal scroll on phones */
  html, body { overflow-x: clip; }

  /* Hero container guards */
  .hero { overflow-x: clip; }
  .hero > .container { overflow-x: clip; }
  .hero .container { overflow-x: clip; }
  .hero-grid { min-width: 0; }
  .hero-content { min-width: 0; max-width: 100%; }

  /* Hero description — defensive wrap */
  .hero-desc {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    font-size: var(--t-base);
    line-height: 1.6;
  }

  /* Hero CTA actions — stack vertically, full width */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    width: 100%;
  }
  .hero-actions > .btn,
  .hero-actions > .btn-lg,
  .hero-actions > .btn-supplies {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .hero-actions > .btn { white-space: normal; }
  .hero-actions > .btn-supplies {
    justify-content: flex-start;
    text-align: left;
  }
  .btn-supplies-text { min-width: 0; flex: 1 1 auto; }
  .btn-supplies-title {
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
  }

  /* Hero supplies chip strip — stronger edge fade affordance */
  .hero-supplies {
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%);
    padding-right: calc(var(--sp-5) + 12px);
    scroll-padding-left: var(--sp-5);
  }
  .hero-supplies .supply-chip {
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .hero-supplies .supply-chip-icon { width: 20px; height: 20px; }

  /* Hero trust row — stack vertically */
  .hero-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    width: 100%;
  }
  .hero-trust-item {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
  }
  .hero-trust-num { font-size: var(--t-xl); }
  .hero-trust-label {
    font-size: 10.5px;
    letter-spacing: .06em;
    overflow-wrap: break-word;
  }

  /* Queue widget — full container width, tighter padding */
  .hero-mock {
    max-width: 100%;
    padding: var(--sp-4);
    border-radius: 14px;
  }
  .hero-mock-row {
    gap: 10px;
    padding: 10px;
  }
  .hero-mock-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
    border-radius: 7px;
  }

  /* Perf: lighten compositor cost of hero orbs */
  .hero-orb--1 { filter: blur(70px); width: 360px; height: 360px; }
  .hero-orb--2 { filter: blur(70px); width: 300px; height: 300px; }
}

/* --- Phone: reduced motion --- */
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

/* --- Smallest phones (<=400px): hide right-side tag on queue rows --- */
@media (max-width: 400px) {
  .hero-mock-row-tag { display: none; }
}

/* --- 401-480px: allow tag to wrap onto two lines --- */
@media (min-width: 401px) and (max-width: 480px) {
  .hero-mock-row-tag {
    white-space: normal;
    text-align: center;
    max-width: 72px;
    line-height: 1.2;
  }
}

/* ===========================================
   ONE-OF-ONE DARE SECTION
   Rotating seal stamp + self-completing checklist + dual CTAs.
   Purely additive, scoped to .one-of-one and .dare-* classes.
   =========================================== */

.one-of-one .dare-checklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.one-of-one .dare-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-lg);
  color: var(--navy-800);
  font-weight: 500;
  line-height: 1.4;
}
.one-of-one .dare-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16,185,129,.14);
  color: #059669;
  flex-shrink: 0;
}

/* Right-side CTA card */
.one-of-one .dare-cta-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.one-of-one .dare-cta-eyebrow {
  font-size: var(--t-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.one-of-one .dare-cta-phone {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  color: var(--navy-800);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -.02em;
  font-style: italic;
}
.one-of-one .dare-cta-kicker {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.55;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.one-of-one .dare-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.one-of-one .dare-btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Slow-rotating circular seal stamp */
.one-of-one .dare-seal {
  position: relative;
  width: 160px;
  height: 160px;
  align-self: center;
  color: var(--navy-700);
  display: flex;
  align-items: center;
  justify-content: center;
}
.one-of-one .dare-seal-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: dare-seal-spin 28s linear infinite;
  transform-origin: 50% 50%;
}
.one-of-one .dare-seal-shield {
  width: 80px;
  height: auto;
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(11, 30, 64, 0.18));
}
@keyframes dare-seal-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .one-of-one .dare-seal-svg { animation: none; }
}

/* Mobile tuning: smaller seal, tighter padding */
@media (max-width: 760px) {
  .one-of-one .dare-seal { width: 130px; height: 130px; }
  .one-of-one .dare-seal-shield { width: 64px; }
  .one-of-one .dare-check { font-size: var(--t-base); }
}

/* ===========================================
   PHONE HERO H1 — keep "Your health," + "our priority." each on one line.
   The original mobile rule reserved 138px on the right via H1 padding,
   which over-constrained the H1 and made the browser break every word.
   We zero the reservation so the markup's <br> controls the break, then
   restore the decorative H&A shield as a SMALLER corner accent that
   fits in the empty space beside the H1 text. On very small phones
   (<420px) the shield stays hidden — no room for it without pushing
   the H1 to wrap per-word. The H&A brand mark is still visible in
   the nav at any width.
   =========================================== */
@media (max-width: 540px) {
  .hero-content > .eyebrow,
  .hero-content > h1 {
    padding-right: 0 !important;
  }
  .hero-ambient { display: none !important; }   /* default: hidden on small phones */
}

/* Most phones (≥380px — iPhone 14 Pro, 13 Pro, 12, etc.): H&A shield
   positioned to vertically align with the H1 slogan ("Your health, /
   our priority."), at a size big enough to read as the brand mark.
   The shield-static.png has transparent padding around the artwork
   so bounding-box overlap with the H1 won't cause visible collision. */
@media (min-width: 380px) and (max-width: 540px) {
  .hero-ambient {
    display: block !important;
    top: clamp(80px, 20vw, 130px) !important;
    right: clamp(0px, 2vw, 12px) !important;
  }
  .hero-ambient .ha-shield-3d {
    width: clamp(135px, 38vw, 180px) !important;
    height: clamp(135px, 38vw, 180px) !important;
  }
}