/* ═══════════════════════════════════════════════════════════════════════
   SnapRx — Production Stylesheet
   Design: Clean, premium, trustworthy medical product
   Inspired by: Linear.app, Stripe.com, Apple Health
   ═══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* Backgrounds — warm dark pharmacy aesthetic */
  --color-bg: #0A0806;
  --color-surface: #151110;
  --color-surface-2: #1E1916;
  --color-surface-alt: #151110;

  /* Borders — warm */
  --color-border: #2C2420;
  --color-border-warm: #3D2F26;

  /* Text */
  --color-text: #F5F0EB;
  --color-text-muted: #A89E95;
  --color-text-secondary: #A89E95;
  --color-text-tertiary: #6B5F55;

  /* Accent — amber/gold pharmacy vibe */
  --color-primary: #D4A04A;
  --color-primary-light: #E8B86D;
  --color-primary-hover: #E8B86D;

  /* Semantic */
  --color-green: #22C55E;
  --color-amber: #F59E0B;
  --color-red: #EF4444;
  --color-accent: #D4A04A;

  /* Glass shelf tint */
  --color-glass: rgba(255,255,255,0.04);
  --color-wood: #2C1810;
  --color-wood-light: #3D2516;

  /* Radii */
  --radius: 10px;
  --radius-lg: 14px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Layout */
  --max-width: 1200px;

  /* Motion */
  --transition: 0.2s ease;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* ── Skip to Content (Accessibility) ───────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
  transition: top 0.2s ease;
}
.skip-to-content:focus {
  top: 16px;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Buttons ──────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font);
}

.btn--primary {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
  color: #0A0806;
  font-weight: 700;
  box-shadow: 0 2px 12px -2px rgba(212,160,74,0.3);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #EEC07A 0%, var(--color-primary-light) 100%);
  box-shadow: 0 4px 20px -2px rgba(212,160,74,0.4);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover {
  border-color: #52525B;
  color: var(--color-text);
}

.btn--lg {
  padding: 14px 32px;
  font-size: 15px;
}

.btn--sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* ── Navigation ───────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0;
  background: rgba(10, 8, 6, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav--scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 20px rgba(0,0,0,0.3);
}

.nav__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav__logo-icon { height: 32px; width: auto; }
.nav__logo-text { height: 20px; width: auto; }

.nav__links {
  display: flex;
  gap: 32px;
}
.nav__links a {
  font-size: 14px;
  color: var(--color-text-muted);
  transition: color var(--transition);
  font-weight: 500;
}
.nav__links a:hover { color: var(--color-text); }

.nav__link--accent {
  color: var(--color-primary-light) !important;
  font-weight: 600 !important;
}
.nav__link--accent:hover {
  color: var(--color-text) !important;
}

.nav__actions { display: flex; gap: 12px; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav__toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all 0.2s ease;
}

/* ── Hero ──────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  position: relative;
}

.hero__container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.hero__badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-light);
  border: 1px solid var(--color-border-warm);
  background: rgba(212,160,74,0.08);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.hero__title--accent {
  color: var(--color-primary-light);
}

.hero__subtitle {
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 520px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero__cta {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
}

.hero__stats {
  display: flex;
  gap: 40px;
}
.hero__stat {
  display: flex;
  flex-direction: column;
}
.hero__stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.hero__stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Phone Mockup — 3D perspective tilt */
.hero__visual { display: flex; justify-content: center; perspective: 1200px; }
.hero__phone {
  width: 280px;
  background: var(--color-surface);
  border-radius: 32px;
  padding: 12px;
  border: 1px solid var(--color-border);
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.5s ease;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
}
.hero__phone:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.5);
}

.hero__phone-screen {
  background: var(--color-bg);
  border-radius: 24px;
  overflow: hidden;
  padding: 20px 16px;
}

.phone-ui__header {
  margin-bottom: 16px;
}
.phone-ui__header h3 { font-size: 15px; font-weight: 700; }
.phone-ui__status-bar {
  width: 60px;
  height: 4px;
  background: var(--color-border);
  border-radius: 4px;
  margin: 0 auto 16px;
}

.phone-ui__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-surface);
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
}
.phone-ui__card strong { font-size: 13px; display: block; }
.phone-ui__card p { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.phone-ui__pill {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #EF4444;
  flex-shrink: 0;
}
.phone-ui__pill--blue { background: #3B82F6; }
.phone-ui__pill--purple { background: #8B5CF6; }

.phone-ui__badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: auto;
}
.phone-ui__badge--green { background: rgba(34, 197, 94, 0.12); color: var(--color-green); }
.phone-ui__badge--amber { background: rgba(245, 158, 11, 0.12); color: var(--color-amber); }

.phone-ui__price-compare {
  margin-top: 12px;
  padding: 12px;
  background: var(--color-surface);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.phone-ui__price-compare h4 { font-size: 12px; margin-bottom: 8px; font-weight: 600; }

.phone-ui__price-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.phone-ui__price-row:last-child { border-bottom: none; }
.phone-ui__price-row--best { color: var(--color-green); font-weight: 600; }
.phone-ui__price { font-weight: 600; }

/* ── Section Styles ───────────────────────── */
section { padding: 80px 0; }

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}
.section-header h2 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--color-text);
}
.section-header p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.7;
}

.section-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  padding: 4px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
}

/* ── Features Grid ────────────────────────── */
.features {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ── Medicine Cabinet ──────────────────────── */
.cabinet {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  perspective: 1200px;
}
.cabinet__frame {
  position: relative;
  /* Warm wood frame */
  background:
    linear-gradient(180deg, #2C1810 0%, #1A0F09 50%, #0D0704 100%);
  border: 3px solid #3D2516;
  border-radius: 18px;
  padding: 6px;
  box-shadow:
    0 0 0 1px #4A3020 inset,
    0 0 0 5px #1A0F09,
    0 0 0 6px #3D2516,
    0 30px 70px -15px rgba(0,0,0,0.7),
    0 0 120px -30px rgba(139,92,246,0.06);
  transform: rotateX(1deg);
  transition: transform 0.5s ease;
}
.cabinet__frame:hover {
  transform: rotateX(0deg);
}
/* Inner cabinet back panel */
.cabinet__inner {
  background:
    linear-gradient(180deg, #18120D 0%, #0F0A07 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #2C1810;
}
.cabinet__shelf {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 28px 16px 36px;
  position: relative;
}
/* Glass shelf edge — thick, reflective */
.cabinet__shelf::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.04) 40%,
      rgba(139,92,246,0.03) 100%
    );
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.03) inset;
}
.cabinet__divider {
  height: 0;
}
/* Individual bottle */
.cabinet__bottle {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
  position: relative;
}
.cabinet__bottle:hover {
  transform: translateY(-10px) rotate(-2deg) scale(1.06);
  background: rgba(255,255,255,0.02);
}
.cabinet__bottle:hover:nth-child(even) {
  transform: translateY(-10px) rotate(2deg) scale(1.06);
}
/* Bottle cap — child-proof style */
.bottle__cap {
  width: 30px;
  height: 12px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #57534E 0%, #3F3F46 50%, #27272A 100%);
  border: 1px solid #71717A;
  border-bottom: none;
  margin-bottom: -2px;
  position: relative;
  z-index: 1;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
}
/* Cap ridges */
.bottle__cap::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  right: 4px;
  height: 1px;
  background: repeating-linear-gradient(90deg, #71717A 0px, #71717A 2px, transparent 2px, transparent 4px);
  opacity: 0.5;
}
/* Bottle body — prescription bottle shape */
.bottle__body {
  width: 56px;
  height: 60px;
  border-radius: 4px 4px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 10px;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  overflow: hidden;
}
/* Bottle label strip */
.bottle__body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(255,255,255,0.06);
}
/* Liquid fill effect */
.bottle__body::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 2px;
  right: 2px;
  height: 65%;
  border-radius: 0 0 6px 6px;
  opacity: 0.15;
  transition: height 0.4s ease;
}
.cabinet__bottle:hover .bottle__body::before {
  height: 75%;
  opacity: 0.25;
}
[data-glow="blue"] .bottle__body {
  background: linear-gradient(180deg, rgba(59,130,246,0.12) 0%, rgba(59,130,246,0.04) 100%);
  color: #60A5FA;
}
[data-glow="blue"] .bottle__body::before { background: #3B82F6; }
[data-glow="green"] .bottle__body {
  background: linear-gradient(180deg, rgba(34,197,94,0.12) 0%, rgba(34,197,94,0.04) 100%);
  color: #4ADE80;
}
[data-glow="green"] .bottle__body::before { background: #22C55E; }
[data-glow="red"] .bottle__body {
  background: linear-gradient(180deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.04) 100%);
  color: #F87171;
}
[data-glow="red"] .bottle__body::before { background: #EF4444; }
[data-glow="violet"] .bottle__body {
  background: linear-gradient(180deg, rgba(139,92,246,0.12) 0%, rgba(139,92,246,0.04) 100%);
  color: #A78BFA;
}
[data-glow="violet"] .bottle__body::before { background: #8B5CF6; }
[data-glow="amber"] .bottle__body {
  background: linear-gradient(180deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.04) 100%);
  color: #FBBF24;
}
[data-glow="amber"] .bottle__body::before { background: #F59E0B; }
[data-glow="teal"] .bottle__body {
  background: linear-gradient(180deg, rgba(20,184,166,0.12) 0%, rgba(20,184,166,0.04) 100%);
  color: #2DD4BF;
}
[data-glow="teal"] .bottle__body::before { background: #14B8A6; }
[data-glow="emerald"] .bottle__body {
  background: linear-gradient(180deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.04) 100%);
  color: #34D399;
}
[data-glow="emerald"] .bottle__body::before { background: #10B981; }
[data-glow="pink"] .bottle__body {
  background: linear-gradient(180deg, rgba(236,72,153,0.12) 0%, rgba(236,72,153,0.04) 100%);
  color: #F472B6;
}
[data-glow="pink"] .bottle__body::before { background: #EC4899; }
.cabinet__bottle:hover .bottle__body {
  box-shadow: 0 0 24px -2px currentColor, 0 8px 20px -4px rgba(0,0,0,0.4);
  transform: scale(1.05);
}
/* Bottle label */
.bottle__label {
  text-align: center;
}
.bottle__label strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.bottle__label span {
  font-size: 10px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}
/* Bottle tag */
.bottle__tag {
  position: absolute;
  top: 8px;
  right: 6px;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(139,92,246,0.25);
  color: #C4B5FD;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(139,92,246,0.2);
}
/* Glass door overlay */
.cabinet__glass {
  position: absolute;
  inset: 6px;
  border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(
      160deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 20%,
      transparent 40%,
      rgba(255,255,255,0.01) 80%,
      rgba(255,255,255,0.03) 100%
    );
  border: 1px solid rgba(255,255,255,0.04);
  /* Glass reflection line */
  box-shadow:
    inset 60px 0 80px -60px rgba(255,255,255,0.03),
    inset -60px 0 80px -60px rgba(255,255,255,0.02);
}
/* Shadow under each bottle */
.cabinet__bottle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  filter: blur(3px);
  transition: opacity 0.3s ease, width 0.3s ease;
}
.cabinet__bottle:hover::after {
  opacity: 0.15;
  width: 50px;
}

@media (max-width: 640px) {
  .cabinet__shelf { grid-template-columns: repeat(2, 1fr); }
  .cabinet__bottle { padding: 12px 4px 8px; }
  .bottle__body { width: 48px; height: 52px; }
  .cabinet__frame { transform: none; }
  .cabinet__frame:hover { transform: none; }
}
  letter-spacing: 0.04em;
}

/* ── How It Works ─────────────────────────── */
.steps { display: flex; flex-direction: column; gap: 24px; }

.step {
  display: grid;
  grid-template-columns: 48px 1fr 160px;
  gap: 24px;
  align-items: center;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition);
}
.step:hover { border-color: #52525B; }

.step__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-light);
}

.step__content h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.step__content p { color: var(--color-text-muted); font-size: 14px; line-height: 1.6; }

.step__visual { display: flex; justify-content: center; }
.step__icon-box {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

/* ── Comparison Table ─────────────────────── */
.comparison {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.comparison__table-wrap {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
}

.comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.comparison__table th,
.comparison__table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.comparison__table th {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 16px;
}
.comparison__table td:first-child {
  text-align: left;
  font-weight: 500;
}
.comparison__highlight {
  background: rgba(99, 102, 241, 0.04);
}
.comparison__table th.comparison__highlight {
  color: var(--color-primary-light);
}

.check { color: var(--color-green); font-weight: 700; font-size: 16px; }
.cross { color: var(--color-text-muted); opacity: 0.3; font-size: 16px; }

/* ── Tech Stack ───────────────────────────── */
.tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tech__item {
  padding: 24px;
  background: var(--color-surface);
  transition: background var(--transition);
}
.tech__item:hover { background: var(--color-surface-2); }
.tech__item h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.tech__item p { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; }

/* ── Data Sources ────────────────────────── */
.data-sources { padding: 80px 0; }
.data-sources__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.data-sources__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  transition: border-color var(--transition);
}
.data-sources__item:hover {
  border-color: #52525B;
}
.data-sources__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  margin: 0 auto 16px;
}
.data-sources__item h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.data-sources__item p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

/* ── FAQ ──────────────────────────────────── */
.faq__list {
  max-width: 680px;
  margin: 0 auto;
}
.faq__item {
  border-bottom: 1px solid var(--color-border);
}
.faq__item summary {
  padding: 20px 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition);
}
.faq__item summary:hover { color: var(--color-primary-light); }
.faq__item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  font-weight: 400;
}
.faq__item[open] summary::after {
  transform: rotate(45deg);
  color: var(--color-primary-light);
}
.faq__item p {
  padding-bottom: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ── Social Proof / Testimonials ──────────── */
.social-proof { border-top: 1px solid var(--color-border); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial__stars {
  color: #FBBF24;
  font-size: 18px;
  letter-spacing: 2px;
}
.testimonial__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  flex: 1;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0A0806;
  flex-shrink: 0;
}
.testimonial__author strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.testimonial__author span {
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.social-proof__numbers {
  display: flex;
  justify-content: center;
  gap: 64px;
  padding: 32px 0 0;
  border-top: 1px solid var(--color-border);
}
.proof-stat {
  text-align: center;
}
.proof-stat__number {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #EEC07A, #D4A04A, #B8860B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.proof-stat__label {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin-top: 4px;
}

@media (max-width: 768px) {
  .testimonials__grid { grid-template-columns: 1fr; }
  .social-proof__numbers { flex-direction: column; gap: 24px; align-items: center; }
}

/* ── CTA Section ──────────────────────────── */
.cta {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cta__content {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.cta__content h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.cta__content > p {
  color: var(--color-text-muted);
  margin-bottom: 32px;
  font-size: 15px;
}

.cta__form {
  display: flex;
  gap: 8px;
  max-width: 440px;
  margin: 0 auto;
}
.cta__form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition);
}
.cta__form input:focus { border-color: var(--color-primary); }
.cta__form input::placeholder { color: #71717A; }

.cta__note {
  margin-top: 12px;
  font-size: 12px;
  color: #71717A;
}

/* ── Footer ───────────────────────────────── */
.footer {
  padding: 64px 0 32px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer__brand p { color: var(--color-text-muted); margin-top: 12px; font-size: 14px; }
.footer__col h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.footer__col li { margin-bottom: 8px; }
.footer__col a {
  font-size: 14px;
  color: #A1A1AA;
  transition: color var(--transition);
}
.footer__col a:hover { color: var(--color-text); }

.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
  text-align: center;
}
.footer__bottom p { font-size: 12px; color: #A1A1AA; }

/* ── Responsive (Main Sections) ──────────── */
@media (max-width: 1024px) {
  .hero__container { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero__subtitle { margin: 0 auto 32px; }
  .hero__cta { justify-content: center; }
  .hero__stats { justify-content: center; }
  .cabinet__shelf { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 48px 1fr; }
  .step__visual { display: none; }
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
  .data-sources__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__toggle { display: flex; }
  .hero { padding: 100px 0 60px; }
  .hero__title { font-size: 2rem; }
  .hero__cta { flex-direction: column; align-items: center; }
  .hero__stats { flex-direction: column; gap: 16px; }
  .cabinet__shelf { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 1fr; text-align: center; }
  .step__number { margin: 0 auto; }
  .comparison__table { font-size: 13px; }
  .comparison__table th, .comparison__table td { padding: 10px 8px; }
  .tech__grid { grid-template-columns: 1fr; }
  .data-sources__grid { grid-template-columns: 1fr; }
  .cta__form { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 64px 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LEGAL / SUB-PAGES
   ═══════════════════════════════════════════════════════════════════════ */

.legal-page {
  padding: 120px 0 80px;
  min-height: 70vh;
}
.legal-page__header {
  max-width: 800px;
  margin: 0 auto 48px;
}
.legal-page__header h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.legal-page__date {
  color: var(--color-text-muted);
  font-size: 14px;
}
.legal-page__date code {
  background: var(--color-surface-2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  font-family: var(--font-mono);
}

.legal-page__content {
  max-width: 800px;
  margin: 0 auto;
}
.legal-page__content section {
  padding: 0;
  margin-bottom: 40px;
}
.legal-page__content h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.legal-page__content h2:first-child { border-top: none; padding-top: 0; }
.legal-page__content section:first-child h2 { border-top: none; padding-top: 0; }
.legal-page__content h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 20px 0 10px;
}
.legal-page__content p {
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 12px;
  font-size: 14px;
}
.legal-page__content ul {
  color: var(--color-text-muted);
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}
.legal-page__content li {
  line-height: 1.7;
  margin-bottom: 6px;
  font-size: 14px;
}
.legal-page__content strong { color: var(--color-text); }

.legal-page__callout {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 16px 0;
}
.legal-page__callout p { color: var(--color-text); }

.legal-page__table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.legal-page__table th,
.legal-page__table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.legal-page__table th {
  font-weight: 600;
  color: var(--color-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.legal-page__table td { color: var(--color-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════
   API DOCS
   ═══════════════════════════════════════════════════════════════════════ */

.api-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.api-info-card {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}
.api-info-card h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.api-info-card p {
  color: var(--color-text) !important;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 0 !important;
}

.api-endpoint {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.api-endpoint__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.api-endpoint__header code {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-text);
}

.api-method {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}
.api-method--get { background: rgba(34, 197, 94, 0.1); color: var(--color-green); }
.api-method--post { background: rgba(99, 102, 241, 0.1); color: var(--color-primary-light); }
.api-method--put { background: rgba(245, 158, 11, 0.1); color: var(--color-amber); }
.api-method--delete { background: rgba(239, 68, 68, 0.1); color: var(--color-red); }

.code-block {
  margin: 12px 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.code-block__header {
  background: var(--color-surface-2);
  padding: 8px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-border);
}
.code-block pre {
  background: var(--color-bg);
  padding: 16px;
  overflow-x: auto;
  margin: 0;
}
.code-block code {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   STATUS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.status-banner {
  max-width: 800px;
  margin: 0 auto 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
}
.status-banner--operational {
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--color-green);
}
.status-banner__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-green);
}

.status-grid { display: flex; flex-direction: column; gap: 1px; }
.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.status-item__name { font-weight: 600; display: block; font-size: 14px; }
.status-item__desc { font-size: 12px; color: var(--color-text-muted); }

.status-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.status-badge--operational { background: rgba(34, 197, 94, 0.1); color: var(--color-green); }
.status-badge--degraded { background: rgba(245, 158, 11, 0.1); color: var(--color-amber); }
.status-badge--outage { background: rgba(239, 68, 68, 0.1); color: var(--color-red); }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0;
}
.metric-card {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-align: center;
}
.metric-card__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-green);
  margin-bottom: 4px;
}
.metric-card__label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.uptime-bars { margin: 20px 0; }
.uptime-bar-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}
.uptime-bar-row__label { font-size: 13px; font-weight: 500; }
.uptime-bar {
  height: 6px;
  background: var(--color-surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.uptime-bar__fill {
  height: 100%;
  background: var(--color-green);
  border-radius: 3px;
}
.uptime-bar-row__pct { font-size: 13px; font-weight: 600; color: var(--color-green); text-align: right; }

.incident-list { margin: 16px 0; }
.incident {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.incident__date { font-weight: 600; font-size: 14px; }

.status-subscribe {
  display: flex;
  gap: 8px;
  max-width: 400px;
  margin-top: 16px;
}
.status-subscribe input {
  flex: 1;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-family: var(--font);
  outline: none;
}
.status-subscribe input:focus { border-color: var(--color-primary); }

@media (max-width: 640px) {
  .api-info-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .uptime-bar-row { grid-template-columns: 80px 1fr 50px; }
  .status-subscribe { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS — Only the essentials
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__content { animation: fadeInUp 0.6s ease; }
.hero__visual { animation: fadeInUp 0.6s ease 0.15s both; }

[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes toolsFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes toolsSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Alias for JS references */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes savingsSpin {
  to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   TOOLS HUB
   ═══════════════════════════════════════════════════════════════════════ */

.tools {
  padding: 80px 0;
  background: var(--color-bg);
  position: relative;
}

/* ── Tab Bar ──────────────────────────────── */
.tools__tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tools__tabs::-webkit-scrollbar { display: none; }

.tools__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
  font-family: var(--font);
  position: relative;
  margin-bottom: -1px;
}
.tools__tab svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  transition: opacity var(--transition);
  flex-shrink: 0;
}
.tools__tab:hover {
  color: var(--color-text);
}
.tools__tab:hover svg { opacity: 0.8; }

.tools__tab--active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
.tools__tab--active svg { opacity: 1; color: var(--color-primary-light); }

/* ── Panels ──────────────────────────────── */
.tools__panel {
  display: none;
}
.tools__panel--active {
  display: block;
  animation: toolsFadeIn 0.25s ease both;
}

/* ── Search Hero Block ───────────────────── */
.tools__search-hero {
  max-width: 680px;
  margin: 0 auto 32px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}
.tools__search-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tools__search-label svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.tools__search-label span {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

/* ── Shared Search ───────────────────────── */
.tools__search-wrap {
  position: relative;
  max-width: 640px;
  margin-bottom: 24px;
}
.tools__search-wrap--hero {
  max-width: 100%;
  margin-bottom: 0;
}
.tools__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #71717A;
  pointer-events: none;
  z-index: 2;
}
.tools__input {
  width: 100%;
  padding: 12px 14px 12px 44px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}
.tools__input::placeholder {
  color: #71717A;
}
.tools__input:hover {
  border-color: #52525B;
}
.tools__input:focus {
  border-color: var(--color-primary);
}

/* Hero-sized input variant */
.tools__input--hero {
  padding: 14px 16px 14px 48px;
  font-size: 15px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.tools__input--hero:hover {
  border-color: #52525B;
}
.tools__input--hero:focus {
  border-color: var(--color-primary);
}
.tools__input--hero::placeholder {
  color: #71717A;
}

/* ── Dropdown ────────────────────────────── */
.tools__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.tools__dropdown .dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.tools__dropdown .dropdown__item:last-child { border-bottom: none; }
.tools__dropdown .dropdown__item:hover {
  background: var(--color-surface-2);
}
.tools__dropdown .dropdown__item strong {
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
}
.tools__dropdown .dropdown__item span {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ── Subtitle ────────────────────────────── */
.tools__subtitle {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  margin-top: 8px;
}

/* ── Back Button ─────────────────────────── */
.tools__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 20px;
  transition: color var(--transition);
}
.tools__back-btn:hover {
  color: var(--color-text);
}
.tools__back-btn svg {
  width: 16px;
  height: 16px;
}

/* ── Results Bar ─────────────────────────── */
.tools__results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.tools__results-bar h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Cross-sell Banner ───────────────────── */
.tools__cross-sell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-top: 20px;
  transition: border-color var(--transition);
}
.tools__cross-sell:hover {
  border-color: #52525B;
}
.tools__cross-sell span {
  color: var(--color-text-muted);
  font-size: 14px;
}
.tools__cross-sell .btn {
  flex-shrink: 0;
}

/* ── Empty State ─────────────────────────── */
.tools__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 8px;
}
.tools__empty-state svg {
  width: 40px;
  height: 40px;
  color: #71717A;
  opacity: 0.4;
  margin-bottom: 4px;
}
.tools__empty-state h3,
.tools__empty-state h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.tools__empty-state p {
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 360px;
  line-height: 1.6;
}

/* ── Popular Drugs Grid ──────────────────── */
.popular__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.popular__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.popular__card:hover {
  border-color: #52525B;
  background: var(--color-surface-2);
}

.popular__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.popular__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.popular__generic {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: -4px;
}
.popular__category {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ── Category Chips ──────────────────────── */
.category__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.category__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.category__chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.category__chip:hover {
  border-color: #52525B;
  color: var(--color-text);
}
.category__chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.category__chip--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}
.category__chip-icon {
  font-size: 13px;
  line-height: 1;
}

/* ── Quantity Selector ───────────────────── */
.qty__selector {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px;
}
.qty__btn {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
  white-space: nowrap;
}
.qty__btn:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}
.qty__btn--active {
  background: var(--color-primary);
  color: #fff;
}
.qty__btn--active:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

/* ── Filter Chips (shared) ───────────────── */
.tools__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.tools__chip:hover {
  border-color: #52525B;
  color: var(--color-text);
}
.tools__chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.tools__chip--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* ── Price Hero Card ─────────────────────── */
.price-hero {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-green);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}
.price-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
  margin-bottom: 12px;
}
.price-hero__price {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.price-hero__savings {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}
.price-hero__pharmacy {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.price-hero__address {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Price hero layout refinements (JS-rendered) */
.price-hero .price-hero__pharmacy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.price-hero .price-hero__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.price-hero .price-hero__pharmacy-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.price-hero .price-hero__label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.price-hero .price-hero__price-block {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.price-hero__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Price results title ─────────────────── */
.price-results__drug-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.price-results__drug-meta {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Price Cards ─────────────────────────── */
.price-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  transition: border-color var(--transition);
  cursor: default;
}
.price-card:hover {
  border-color: #52525B;
}
.price-card--best {
  border-color: rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.03);
}
.price-card--best:hover {
  border-color: var(--color-green);
}
.price-card__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  flex-shrink: 0;
}
.price-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.price-card__type {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.price-card__right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.price-card__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
}
.price-card__savings {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
}
.price-card__retail {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* JS uses __pharmacy / __price-col */
.price-card__pharmacy {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-card__price-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.price-card__price--best {
  color: var(--color-green) !important;
}
.price-card--skeleton {
  opacity: 0.5;
}

/* ── Coupon Panel ────────────────────────── */
.coupon__filters {
  margin-bottom: 16px;
}
.coupon__source-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.coupon__summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.coupon__summary-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.coupon__summary-stat span:first-child {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.coupon__summary-stat span:last-child {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
}

/* ── Coupon List + Cards ─────────────────── */
.coupon__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.coupon__card {
  position: relative;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  overflow: hidden;
}
.coupon__card:hover {
  border-color: #52525B;
}
.coupon__source-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  border-radius: 4px;
  position: absolute;
  top: 12px;
  right: 12px;
}
.coupon__source-badge[data-source="goodrx"] { background: #1B9CE2; }
.coupon__source-badge[data-source="singlecare"] { background: #F0592A; }
.coupon__source-badge[data-source="rxsaver"] { background: #6366F1; }
.coupon__source-badge[data-source="manufacturer"] { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); }
.coupon__source-badge--goodrx { background: #1B9CE2; }
.coupon__source-badge--singlecare { background: #F0592A; }
.coupon__source-badge--rxsaver { background: #6366F1; }
.coupon__source-badge--manufacturer { background: var(--color-surface-2); color: var(--color-text); border: 1px solid var(--color-border); }

.coupon__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
}
.coupon__code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-light);
  cursor: pointer;
  transition: border-color var(--transition);
}
.coupon__code:hover {
  border-color: var(--color-primary);
}
.coupon__code svg {
  width: 14px;
  height: 14px;
  opacity: 0.5;
}
.coupon__details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.coupon__details div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coupon__details div span:first-child {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.coupon__details div span:last-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
}

/* Coupon card layout (JS-rendered) */
.coupon__card--skeleton { opacity: 0.5; }
.coupon__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.coupon__source {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
}
.coupon__pharmacy {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.coupon__card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.coupon__price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.coupon__retail {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.coupon__savings-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 4px;
}
.coupon__details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.coupon__detail {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.coupon__detail-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.coupon__detail-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-mono);
}
.coupon__restrictions {
  font-size: 12px;
  color: #71717A;
  font-style: italic;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* Coupon summary (JS-rendered) */
.coupon-summary {
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
}
.coupon-summary__drug {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
}
.coupon-summary__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.coupon-summary__count {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.coupon-summary__best {
  font-size: 13px;
  color: var(--color-text-muted);
}
.coupon-summary__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green) !important;
}
.coupon-summary__savings {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-green);
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 4px;
}

/* ── Interaction Checker ─────────────────── */
.ix__intro {
  margin-bottom: 24px;
}
.ix__intro h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.ix__intro p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.ix__input-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.ix__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}
.ix__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary-light);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 100px;
  font-family: var(--font);
  cursor: default;
  animation: toolsFadeIn 0.2s ease both;
}
.ix__tag:hover {
  border-color: rgba(99, 102, 241, 0.4);
}
.ix__tag button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--color-primary-light);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition);
  padding: 0;
  line-height: 1;
}
.ix__tag button:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Interaction Results ─────────────────── */
.ix__results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
#ix-results {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.ix__result-card {
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius);
  animation: toolsSlideIn 0.25s ease both;
}
.ix__result-card--major {
  border-left-color: var(--color-red);
}
.ix__result-card--moderate {
  border-left-color: var(--color-amber);
}
.ix__result-card--minor {
  border-left-color: var(--color-green);
}
.ix__result-severity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  margin-bottom: 8px;
}
.ix__result-card--major .ix__result-severity {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.08);
}
.ix__result-card--moderate .ix__result-severity {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
}
.ix__result-card--minor .ix__result-severity {
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
}
.ix__result-drugs {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.ix__result-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ── Interaction Safe Banner ─────────────── */
.ix__safe-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: var(--radius);
  margin-top: 16px;
  animation: toolsFadeIn 0.3s ease both;
}
.ix__safe-banner svg {
  width: 20px;
  height: 20px;
  color: var(--color-green);
  flex-shrink: 0;
}
.ix__safe-banner p {
  color: var(--color-green);
  font-weight: 500;
  font-size: 14px;
}

/* ── Common Interaction Pairs ────────────── */
.ix__common-section {
  margin-top: 32px;
}
.ix__common-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}
.ix__common-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ix__common-card {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--transition);
}
.ix__common-card:hover {
  border-color: #52525B;
}
.ix__common-card__drugs {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.ix__common-card__severity {
  display: inline-flex;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  margin-bottom: 6px;
}
.ix__common-card__desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Common pairs sub-elements */
.ix__common-drugs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ix__common-drug {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.ix__common-plus {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 700;
}
.ix__common-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Interaction severity badges ─────────── */
.ix__severity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
}
.ix__severity--major {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.08);
}
.ix__severity--moderate {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
}
.ix__severity--minor {
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
}
.ix__severity--unknown,
.ix__severity--contraindicated {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.1);
}
.ix__severity--none {
  background: var(--color-surface-2);
  color: #71717A;
}

/* ── Interaction summary / loading ───────── */
.ix__summary {
  padding: 12px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.ix__loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Interaction result header ───────────── */
.ix__result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ix__result-mechanism,
.ix__result-effects,
.ix__result-management {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-top: 6px;
}
.ix__result-mechanism strong,
.ix__result-effects strong,
.ix__result-management strong {
  color: var(--color-text);
  font-weight: 600;
}

/* IX tag remove button */
.ix__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  color: var(--color-primary-light);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition);
  padding: 0;
  line-height: 1;
}
.ix__tag-remove:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ── Interaction Risk Dashboard ──────────── */
.ix__dashboard {
  margin-bottom: 12px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.ix__risk-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.ix__risk-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ix__risk-level {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.ix__risk-subtitle {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.ix__severity-counts {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.ix__sev-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.ix__sev-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ix__safe-detail {
  color: var(--color-text-muted);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.5;
}

/* ── Critical Alert Banner ───────────────── */
.ix__critical-banner {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.ix__critical-banner strong {
  color: #FCA5A5;
  display: block;
  margin-bottom: 4px;
}
.ix__critical-banner p {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 2px 0;
}
.ix__critical-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── Interaction Network Matrix ──────────── */
.ix__network {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.ix__network-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ix__network-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
}
.ix__network-drug {
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.ix__network-connector {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Enhanced Interaction Result Cards ───── */
.ix__result-detail {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.ix__result-detail svg { flex-shrink: 0; margin-top: 2px; }
.ix__result-source {
  font-size: 12px;
  color: #71717A;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}


/* ═══════════════════════════════════════════════════════════════════════
   DRUG INFO PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.info__detail {
  max-width: 720px;
  animation: toolsFadeIn 0.3s ease both;
}
.info__header {
  margin-bottom: 20px;
}
.info__header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.info__header .info__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.info__header .info__class-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary-light);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 4px;
}
.info__header .info__rx-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 4px;
}
.info__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.info__meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info__meta div span:first-child {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.info__meta div span:last-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

/* ── Info Sections (collapsible) ─────────── */
.info__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
  background: var(--color-surface);
  transition: border-color var(--transition);
}
.info__section:hover {
  border-color: #52525B;
}
.info__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  transition: background var(--transition);
}
.info__section-title:hover {
  background: rgba(255, 255, 255, 0.02);
}
.info__section-title svg {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.info__section.open .info__section-title svg,
.info__section--open .info__section-title svg,
.info__section.info__section--open .info__section-title svg {
  transform: rotate(180deg);
}
.info__section-content {
  display: none;
  padding: 0 16px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.info__section.open .info__section-content,
.info__section--open .info__section-content,
.info__section.info__section--open .info__section-content {
  display: block;
}
.info__section-content ul {
  list-style: disc;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Info Tags ───────────────────────────── */
.info__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.info__tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* ── Recall Banner ───────────────────────── */
.info__recall-banner {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius);
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.info__recall-banner svg {
  width: 18px;
  height: 18px;
  color: var(--color-red);
  flex-shrink: 0;
  margin-top: 2px;
}
.info__recall-banner p {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-red);
  line-height: 1.5;
}
.info__recall-card {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-left: 3px solid var(--color-red);
  border-radius: var(--radius);
  margin-bottom: 6px;
}
.info__recall-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}
.info__recall-card p {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Drug info badge system (JS uses info__badge--xxx) */
.info__badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
}
.info__badge--class {
  color: var(--color-primary-light);
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.info__badge--rx {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.15);
}
.info__badge--otc {
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
}
.info__badge--dea {
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
}
.info__badge--sm {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.info__badge--sm.info__badge--mild {
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-green);
  border-color: rgba(34, 197, 94, 0.15);
}
.info__badge--sm.info__badge--moderate {
  background: rgba(245, 158, 11, 0.08);
  color: var(--color-amber);
  border-color: rgba(245, 158, 11, 0.15);
}
.info__badge--sm.info__badge--severe {
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-red);
  border-color: rgba(239, 68, 68, 0.15);
}
.info__header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Drug info header name */
.info__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

/* Drug info description */
.info__description {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* Drug info skeleton */
.info__skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Drug info dosage tags */
.info__dosage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.info__dosage-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

/* Drug info section arrow */
.info__section-arrow {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.info__section--open .info__section-arrow {
  transform: rotate(180deg);
}

/* Drug info warnings list */
.info__warnings-list {
  list-style: disc;
  padding-left: 20px;
}
.info__warnings-list li {
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 13px;
}

/* Drug info recall status */
.info__recall-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
}


/* ═══════════════════════════════════════════════════════════════════════
   PILL IDENTIFIER
   ═══════════════════════════════════════════════════════════════════════ */

.pill__intro {
  margin-bottom: 24px;
}
.pill__intro h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.pill__intro p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.pill__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
  margin-bottom: 24px;
}
.pill__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pill__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pill__option-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pill__option-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}
.pill__option-chip:hover {
  border-color: #52525B;
  color: var(--color-text);
}
.pill__option-chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.pill__option-chip--active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}
.pill__color-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ── Pill Results ────────────────────────── */
.pill__results {
  margin-top: 24px;
}
#pill-results {
  margin-top: 24px;
}
.pill__results h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}
.pill__match-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  transition: border-color var(--transition);
  animation: toolsSlideIn 0.25s ease both;
}
.pill__match-card:hover {
  border-color: #52525B;
}
.pill__match-confidence {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  white-space: nowrap;
}
.pill__match-confidence--high {
  color: var(--color-green);
  background: rgba(34, 197, 94, 0.08);
}
.pill__match-confidence--medium {
  color: var(--color-amber);
  background: rgba(245, 158, 11, 0.08);
}
.pill__match-confidence--low {
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.pill__match-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.pill__match-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.pill__match-strength {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.pill__match-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}
.pill__match-details span {
  white-space: nowrap;
}
.pill__match-score {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-green);
  padding: 3px 10px;
  background: rgba(34, 197, 94, 0.08);
  border-radius: 4px;
  white-space: nowrap;
}

/* Pill loading / no results */
.pill__loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pill__no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  text-align: center;
}
.pill__no-results p {
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 360px;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   LOADING SKELETON
   ═══════════════════════════════════════════════════════════════════════ */

.skeleton {
  display: block;
  height: 14px;
  width: 60%;
  background: var(--color-surface-2);
  border-radius: 4px;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeleton--circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.skeleton--wide {
  width: 100%;
}
.skeleton--sm {
  height: 10px;
  width: 40%;
}
.skeleton--lg {
  height: 20px;
  width: 80%;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SCAN BOTTLE PANEL
   ═══════════════════════════════════════════════════════════════════════ */

.tools__textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  transition: border-color var(--transition);
}
.tools__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.tools__textarea::placeholder {
  color: #71717A;
}

.scan__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.tools__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  font-family: var(--font);
}
.tools__btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.tools__btn--primary:hover {
  background: var(--color-primary-hover);
}
.tools__btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.tools__btn--secondary:hover {
  border-color: #52525B;
}
.tools__btn--outline {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.tools__btn--outline:hover {
  border-color: #52525B;
  color: var(--color-text);
}

.scan__features {
  display: grid;
  gap: 16px;
  margin: 16px 0;
}
.scan__feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.scan__feature-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scan__feature-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}
.scan__feature-text span {
  font-size: 13px;
  color: var(--color-text-muted);
}
.scan__app-note {
  font-size: 13px;
  color: #71717A;
  margin-top: 16px;
  text-align: center;
  font-style: italic;
}

.scan__success-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.scan__success-title {
  font-size: 16px;
  font-weight: 700;
}
.scan__success-conf {
  font-size: 13px;
  font-weight: 600;
}

.scan__drug-card {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.scan__drug-name {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.scan__drug-generic {
  font-size: 13px;
  color: var(--color-text-muted);
}
.scan__drug-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.scan__meta-chip {
  padding: 3px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.scan__details {
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.scan__details-title {
  font-weight: 600;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scan__details-grid {
  display: grid;
  gap: 6px;
}
.scan__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--color-border);
}
.scan__detail-row:last-child {
  border-bottom: none;
}
.scan__detail-label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.scan__detail-value {
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  max-width: 60%;
}

.scan__warnings {
  padding: 12px 14px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.12);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.scan__warnings-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--color-amber);
}
.scan__warning-item {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 3px 0;
}

.scan__actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.scan__price-card {
  padding: 14px;
  background: rgba(34, 197, 94, 0.04);
  border: 1px solid rgba(34, 197, 94, 0.12);
  border-radius: var(--radius);
}
.scan__price-label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.scan__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scan__price-pharmacy {
  display: flex;
  align-items: center;
  gap: 10px;
}
.scan__price-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.scan__price-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-green);
}
.scan__price-savings {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
}
.scan__price-compare {
  font-size: 12px;
  color: #71717A;
  margin-top: 8px;
}

.scan__loading-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 500;
}
.scan__loading-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}


/* ═══════════════════════════════════════════════════════════════════════
   EMPTY / ERROR STATES
   ═══════════════════════════════════════════════════════════════════════ */

.tools__empty-msg {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  padding: 32px 16px;
}

.tools__error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.12);
  border-radius: var(--radius);
  margin: 12px 0;
}
.tools__error svg { flex-shrink: 0; }
.tools__error span {
  color: var(--color-red);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.tools__retry-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-red);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
  white-space: nowrap;
}
.tools__retry-btn:hover {
  background: rgba(239, 68, 68, 0.12);
}


/* ═══════════════════════════════════════════════════════════════════════
   STAGGERED ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════ */

.tools__animate {
  animation: toolsFadeIn 0.3s ease both;
}
.tools__animate:nth-child(1) { animation-delay: 0s; }
.tools__animate:nth-child(2) { animation-delay: 0.04s; }
.tools__animate:nth-child(3) { animation-delay: 0.08s; }
.tools__animate:nth-child(4) { animation-delay: 0.12s; }
.tools__animate:nth-child(5) { animation-delay: 0.16s; }
.tools__animate:nth-child(6) { animation-delay: 0.2s; }
.tools__animate:nth-child(7) { animation-delay: 0.24s; }
.tools__animate:nth-child(8) { animation-delay: 0.28s; }

.tools__results-area {
  animation: toolsFadeIn 0.3s ease both;
}
.tools__popular {
  animation: toolsFadeIn 0.25s ease both;
}


/* ═══════════════════════════════════════════════════════════════════════
   TOOLS HUB RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .popular__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .coupon__summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .coupon__details {
    grid-template-columns: repeat(2, 1fr);
  }
  .ix__common-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .tools {
    padding: 48px 0;
  }
  .tools__tabs {
    gap: 0;
    margin-bottom: 20px;
  }
  .tools__tab {
    padding: 10px 12px;
    font-size: 13px;
  }
  .tools__tab svg {
    width: 14px;
    height: 14px;
  }

  .popular__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .popular__card {
    padding: 14px;
  }
  .popular__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    font-size: 1rem;
  }

  .tools__results-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .price-hero {
    padding: 16px;
  }
  .price-hero__price {
    font-size: 1.75rem;
  }
  .price-card {
    padding: 12px 14px;
  }

  .coupon__summary {
    grid-template-columns: repeat(2, 1fr);
    padding: 16px;
    gap: 10px;
  }
  .coupon__summary-stat span:last-child {
    font-size: 1rem;
  }
  .coupon__card {
    padding: 14px;
  }
  .coupon__details {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .coupon__details-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .coupon__price {
    font-size: 1.2rem;
  }

  .ix__common-grid {
    grid-template-columns: 1fr;
  }

  .pill__form {
    gap: 16px;
  }

  .info__meta {
    gap: 12px;
  }

  .tools__cross-sell {
    flex-direction: column;
    text-align: center;
  }

  .tools__search-wrap {
    max-width: 100%;
  }
  .tools__search-hero {
    padding: 16px;
    margin-bottom: 20px;
  }
  .tools__search-label span {
    font-size: 13px;
  }
  .tools__input--hero {
    padding: 12px 14px 12px 40px;
    font-size: 14px;
  }

  .category__chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .category__chips::-webkit-scrollbar { display: none; }

  .qty__selector {
    flex-wrap: wrap;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   SAVINGS CALCULATOR
   ═══════════════════════════════════════════════════════════════════════ */

.savings-calc {
  padding: 80px 0;
  background: var(--color-bg);
}

.savings-calc__card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.savings-calc__input-area {
  margin-bottom: 20px;
}

.savings-calc__search-wrap {
  position: relative;
}
.savings-calc__search-wrap .tools__search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #71717A;
  pointer-events: none;
}
.savings-calc__search-wrap .tools__input {
  width: 100%;
  padding-left: 44px;
}
.savings-calc__search-wrap .tools__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
}

.savings-calc__meds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
  margin-top: 12px;
}
.savings-calc__meds:empty {
  margin-top: 0;
}

.savings-calc__tag-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--color-primary-light);
  border-radius: 50%;
  animation: savingsSpin 0.6s linear infinite;
  display: inline-block;
}

/* Results */
.savings-calc__results {
  animation: toolsFadeIn 0.3s ease both;
}

.savings-calc__total {
  text-align: center;
  padding: 24px 0 20px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}
.savings-calc__total-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.savings-calc__total-amount {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: var(--color-green);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.savings-calc__total-amount--loading {
  display: flex;
  justify-content: center;
}
.savings-calc__total-sub {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 8px;
  line-height: 1.5;
}

/* Per-drug breakdown */
.savings-calc__breakdown {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.savings-calc__drug-card {
  padding: 16px 20px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  animation: toolsFadeIn 0.3s ease both;
}
.savings-calc__drug-card:hover {
  border-color: #52525B;
}
.savings-calc__drug-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.savings-calc__drug-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}
.savings-calc__drug-pharmacy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.savings-calc__drug-pharmacy--expensive {
  text-align: right;
}
.savings-calc__drug-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.savings-calc__drug-value {
  font-size: 13px;
  font-weight: 600;
}
.savings-calc__drug-price {
  font-size: 15px;
  font-weight: 700;
}
.savings-calc__drug-price--green {
  color: var(--color-green);
}
.savings-calc__drug-price--red {
  color: var(--color-red);
  opacity: 0.6;
}
.savings-calc__drug-arrow {
  color: #71717A;
  opacity: 0.4;
  display: flex;
  align-items: center;
}
.savings-calc__drug-savings {
  text-align: center;
  font-size: 13px;
  color: var(--color-green);
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}
.savings-calc__drug-savings strong {
  color: var(--color-green);
}

/* Empty state */
.savings-calc__empty {
  text-align: center;
  padding: 48px 24px;
}
.savings-calc__empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.5;
}
.savings-calc__empty p {
  color: var(--color-text-muted);
  font-size: 14px;
  max-width: 320px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Savings Calculator Responsive */
@media (max-width: 640px) {
  .savings-calc__card {
    padding: 20px 16px;
  }
  .savings-calc__total-amount {
    font-size: 2rem;
  }
  .savings-calc__drug-row {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }
  .savings-calc__drug-pharmacy--expensive {
    text-align: center;
  }
  .savings-calc__drug-arrow {
    justify-content: center;
    transform: rotate(90deg);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   LIVE STATS TICKER
   ═══════════════════════════════════════════════════════════════════════ */

.ticker {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}
.ticker__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
  flex-wrap: wrap;
}
.ticker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.ticker__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.ticker__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.ticker__divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
}


/* ═══════════════════════════════════════════════════════════════════════
   APP PREVIEW CTA
   ═══════════════════════════════════════════════════════════════════════ */

.app-preview {
  padding: 80px 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.app-preview__content {
  max-width: 680px;
  margin: 0 auto;
}
.app-preview__text h2 {
  font-size: clamp(1.75rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.app-preview__text > p {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
}
.app-preview__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  list-style: none;
}
.app-preview__features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.5;
}
.app-preview__features li svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.app-preview__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.app-preview__platforms {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Ticker + App Preview responsive */
@media (max-width: 640px) {
  .ticker__track { gap: 16px; }
  .ticker__value { font-size: 13px; }
  .ticker__divider { height: 20px; }
  .app-preview { padding: 48px 0; }
  .app-preview__cta { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHARMACY FINDER
   ═══════════════════════════════════════════════════════════════════════ */

.pharm__input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pharm__input-row .tools__input--hero {
  padding-left: 16px;
}

.pharm__summary {
  padding: 12px 0 16px;
}
.pharm__summary-text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.pharm__summary-text strong {
  color: var(--color-text);
}

.pharm__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pharm__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  transition: border-color var(--transition), transform 0.25s ease, box-shadow 0.25s ease;
}
.pharm__card:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-hover);
  box-shadow: 0 4px 15px -3px rgba(0,0,0,0.2);
}
.pharm__card:hover {
  border-color: #52525B;
}

.pharm__card-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.pharm__card-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}

.pharm__card-info {
  flex: 1;
  min-width: 0;
}
.pharm__card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 2px;
}
.pharm__card-address,
.pharm__card-city {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.pharm__card-right {
  flex-shrink: 0;
  text-align: right;
}
.pharm__card-distance {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-light);
  white-space: nowrap;
}

.pharm__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.01);
}

.pharm__card-details {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.pharm__card-phone,
.pharm__card-hours {
  font-size: 12px;
  color: var(--color-text-muted);
}

.pharm__card-badges {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.pharm__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pharm__badge--24hr {
  background: rgba(34, 197, 94, 0.08);
  color: var(--color-green);
}
.pharm__badge--drive-through {
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-primary-light);
}

/* Chains grid */
.pharm__chains {
  margin-top: 24px;
}
.pharm__chains-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pharm__chain-card {
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.pharm__chain-card:hover {
  border-color: #52525B;
}
.pharm__chain-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pharm__chain-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.pharm__chain-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.pharm__chain-type {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: capitalize;
}
.pharm__chain-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pharm__chain-locations {
  font-size: 12px;
  color: var(--color-text-muted);
}
.pharm__chain-link {
  font-size: 12px;
  color: var(--color-primary-light);
  font-weight: 500;
  transition: color var(--transition);
}
.pharm__chain-link:hover {
  color: var(--color-text);
}

/* Pharmacy responsive */
@media (max-width: 1024px) {
  .pharm__chains-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .pharm__input-row {
    flex-direction: column;
    align-items: stretch;
  }
  .pharm__input-row .tools__input--hero {
    max-width: 100% !important;
  }
  .pharm__chains-grid { grid-template-columns: repeat(2, 1fr); }
  .pharm__card-main { flex-wrap: wrap; }
  .pharm__card-footer { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   FDA RECALL CHECKER
   ═══════════════════════════════════════════════════════════════════════ */

.recall__safe-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(34, 197, 94, 0.06);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: var(--radius);
  animation: toolsFadeIn 0.3s ease both;
}
.recall__safe-banner svg {
  width: 20px;
  height: 20px;
  color: var(--color-green);
  flex-shrink: 0;
}
.recall__safe-banner strong {
  color: var(--color-green);
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.recall__safe-banner p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.recall__warning-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-radius: var(--radius);
  margin-bottom: 12px;
  animation: toolsFadeIn 0.3s ease both;
}
.recall__warning-banner svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.recall__warning-banner strong {
  color: var(--color-red);
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
}
.recall__warning-banner p {
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.recall__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 8px;
  border-left: 3px solid var(--color-green);
  transition: border-color var(--transition);
}
.recall__card:hover {
  border-color: #52525B;
  border-left-color: inherit;
}
.recall__card--class-i {
  border-left-color: var(--color-red);
}
.recall__card--class-ii {
  border-left-color: var(--color-amber);
}
.recall__card--class-iii {
  border-left-color: var(--color-green);
}

.recall__card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.recall__number {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}
.recall__classification {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recall__status {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
}
.recall__reason {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 12px;
}
.recall__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.recall__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recall__meta-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.recall__meta-value {
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}
.recall__loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#recall-results {
  margin-top: 12px;
}

/* Recall responsive */
@media (max-width: 640px) {
  .recall__meta {
    grid-template-columns: 1fr;
  }
  .recall__card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .recall__status {
    margin-left: 0;
  }
}