/* ============================================================
   DrugCovered.com — website.css
   "Healthcare Authority" Design System — Premium Consumer Site
   Load order: bootstrap.css → feather-icon.css → animate.css → aos.css → website.css

   Color palette:
     Navy      #1a365d  — Trust & stability (primary brand)
     Teal      #0c7c89  — Healthcare freshness (interactive)
     Gold      #d4a853  — Premium accent
     Green     #15803d  — Positive / covered
     Red       #dc2626  — Error / not-covered
     Warning   #d97706  — Caution / restrictions

   Typography:
     Body:     Outfit, sans-serif (18px base, 1.75 line-height)
     Headings: Poppins, sans-serif (700 weight)

   Sections:
     1.  CSS Variables
     2.  Base / Reset
     3.  Utility Classes
     4.  Navbar
     5.  AEP Banner
     6.  Hero Section
     7.  Buttons
     8.  Comparison Tool
     9.  Drug Search & Autocomplete
     10. Selected Drug Pills
     11. Popular Drug Quick-Add
     12. Trust Stats Section
     13. How It Works Section
     14. Badges & Pills
     15. Tables
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES — Complete Design Token System
   ============================================================ */
:root {

  /* --- Brand Palette --- */
  --dc-navy:            #1a365d;  /* Primary brand — deep authority */
  --dc-navy-dark:       #112240;  /* Hover / pressed state */
  --dc-navy-mid:        #2d4a6e;  /* Slightly lighter navy */
  --dc-navy-light:      #e8eef6;  /* Tints for backgrounds */
  --dc-navy-xlight:     #f0f5fb;  /* Ultra-light navy wash */

  --dc-teal:            #0c7c89;  /* Healthcare interactive */
  --dc-teal-dark:       #085f6a;  /* Teal hover */
  --dc-teal-light:      #e0f4f6;  /* Teal tint */

  --dc-gold:            #d4a853;  /* Premium accent */
  --dc-gold-dark:       #b8892e;  /* Gold hover */
  --dc-gold-light:      #fdf3dc;  /* Gold tint */

  /* --- Legacy aliases used in templates --- */
  --dc-primary:         var(--dc-teal);
  --dc-primary-dark:    var(--dc-teal-dark);
  --dc-primary-light:   var(--dc-teal-light);

  /* --- Status Colours --- */
  --dc-green:           #15803d;
  --dc-green-mid:       #16a34a;
  --dc-green-light:     #dcfce7;
  --dc-red:             #dc2626;
  --dc-red-light:       #fee2e2;
  --dc-warning:         #d97706;
  --dc-warning-light:   #fef3c7;
  --dc-purple:          #7c3aed;
  --dc-purple-light:    #ede9fe;
  --dc-blue:            #1d4ed8;
  --dc-blue-light:      #dbeafe;

  /* --- Neutrals (light → dark scale) --- */
  --dc-white:           #ffffff;
  --dc-bg:              #ffffff;
  --dc-bg-subtle:       #f8fafc;
  --dc-bg-grey:         #f1f5f9;
  --dc-border:          #e2e8f0;
  --dc-border-dark:     #cbd5e1;
  --dc-text-light:      #94a3b8;
  --dc-text-muted:      #64748b;
  --dc-text:            #1e293b;
  --dc-text-dark:       #0f172a;

  /* --- Typography --- */
  --dc-font:            'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dc-font-heading:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --dc-text-xs:         13px;
  --dc-text-sm:         15px;
  --dc-text-base:       18px;
  --dc-text-md:         20px;
  --dc-text-lg:         22px;
  --dc-text-xl:         26px;
  --dc-text-2xl:        30px;
  --dc-text-3xl:        36px;
  --dc-text-4xl:        44px;
  --dc-text-5xl:        56px;

  --dc-font-size-base:  var(--dc-text-base);
  --dc-line-height:     1.75;
  --dc-heading-lh:      1.25;

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

  /* --- Shadows --- */
  --dc-shadow-sm:       0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --dc-shadow-md:       0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.05);
  --dc-shadow-lg:       0 10px 32px rgba(15, 23, 42, 0.10), 0 4px 12px rgba(15, 23, 42, 0.06);
  --dc-shadow-xl:       0 20px 48px rgba(15, 23, 42, 0.12), 0 8px 20px rgba(15, 23, 42, 0.08);
  --dc-shadow-primary:  0 6px 24px rgba(12, 124, 137, 0.28);
  --dc-shadow-navy:     0 6px 24px rgba(26, 54, 93, 0.25);
  --dc-shadow-gold:     0 4px 16px rgba(212, 168, 83, 0.30);

  /* Legacy alias */
  --dc-shadow:          var(--dc-shadow-md);

  /* --- Border Radii --- */
  --dc-radius-sm:       4px;
  --dc-radius:          8px;
  --dc-radius-md:       10px;
  --dc-radius-lg:       14px;
  --dc-radius-xl:       20px;
  --dc-radius-2xl:      28px;
  --dc-radius-pill:     999px;

  /* --- Layout --- */
  --dc-container-max:   1140px;
  --dc-navbar-h:        72px;

  /* --- Focus / Interaction --- */
  --dc-focus-ring:      0 0 0 3px rgba(12, 124, 137, 0.35);
  --dc-focus-ring-navy: 0 0 0 3px rgba(26, 54, 93, 0.35);
  --dc-transition:      0.18s ease;
  --dc-transition-med:  0.28s ease;
}


/* ============================================================
   2. BASE / RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior:          smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:         100%;
}

body {
  font-family:              var(--dc-font);
  font-size:                var(--dc-font-size-base);
  font-weight:              400;
  line-height:              var(--dc-line-height);
  color:                    var(--dc-text);
  background-color:         var(--dc-bg);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
  margin:                   0;
  padding:                  0;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family:   var(--dc-font-heading);
  font-weight:   700;
  line-height:   var(--dc-heading-lh);
  color:         var(--dc-navy);
  margin-top:    0;
  margin-bottom: 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.85rem, 4.5vw, 2.75rem);  font-weight: 800; }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.05rem);  font-weight: 700; }
h3 { font-size: clamp(1.2rem,  2.4vw, 1.5rem);   font-weight: 700; }
h4 { font-size: clamp(1.05rem, 2vw,   1.25rem);  font-weight: 600; }
h5 { font-size: 1rem;  font-weight: 600; }
h6 { font-size: 0.9rem; font-weight: 600; }

/* ── Body copy ── */
p {
  margin-top:    0;
  margin-bottom: 1.1rem;
}

p:last-child { margin-bottom: 0; }

/* ── Links ── */
a {
  color:           var(--dc-teal);
  text-decoration: none;
  transition:      color var(--dc-transition);
}

a:hover {
  color: var(--dc-teal-dark);
}

a:focus-visible {
  outline:        2px solid var(--dc-teal);
  outline-offset: 3px;
  border-radius:  3px;
}

/* ── Images ── */
img,
svg {
  max-width: 100%;
  height:    auto;
}

/* ── Lists ── */
ul {
  padding-left: 1.4rem;
}

/* ── Container override (Bootstrap) ── */
.container {
  max-width:    var(--dc-container-max);
  padding-left: 24px;
  padding-right: 24px;
  margin-left:  auto;
  margin-right: auto;
  width:        100%;
}

/* ── Strong ── */
strong { font-weight: 700; }

/* ── Selection ── */
::selection {
  background: var(--dc-teal-light);
  color:      var(--dc-navy);
}


/* ============================================================
   3. UTILITY CLASSES
   ============================================================ */

/* Muted text */
.dc-muted {
  color:     var(--dc-text-muted);
  font-size: 0.9em;
  line-height: 1.6;
}

/* N/A dash placeholder */
.dc-na {
  color:       var(--dc-text-light);
  font-style:  italic;
  font-size:   0.9em;
}

/* Section title — used across all content pages */
.dc-section-title {
  font-family:   var(--dc-font-heading);
  font-size:     clamp(1.4rem, 3vw, 1.9rem);
  font-weight:   700;
  color:         var(--dc-navy);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  flex-wrap:     wrap;
}

.dc-section-title svg,
.dc-section-title i[data-feather] {
  color:       var(--dc-teal);
  flex-shrink: 0;
  width:       22px;
  height:      22px;
}

/* Section subtitle */
.dc-section-sub {
  font-size:     1.0rem;
  color:         var(--dc-text-muted);
  margin-bottom: 1.75rem;
  line-height:   1.65;
  max-width:     680px;
}

/* Generic section wrapper */
.dc-section {
  margin-bottom: 3rem;
}

/* Page content wrapper */
.dc-page-wrap {
  padding-top:    2rem;
  padding-bottom: 3.5rem;
}

/* Page-level H1 (interior pages) */
.dc-page-h1 {
  font-family:   var(--dc-font-heading);
  font-size:     clamp(1.6rem, 4vw, 2.4rem);
  font-weight:   800;
  color:         var(--dc-navy);
  line-height:   1.2;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

/* Alert component */
.dc-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           1rem;
  padding:       1.1rem 1.4rem;
  border-radius: var(--dc-radius-md);
  border-left:   4px solid transparent;
  background:    var(--dc-bg-subtle);
}

.dc-alert svg,
.dc-alert i[data-feather] {
  flex-shrink: 0;
  margin-top:  0.15rem;
  width:       20px;
  height:      20px;
}

.dc-alert-warning {
  background-color: var(--dc-warning-light);
  border-left-color: var(--dc-warning);
  color:            #78350f;
}

.dc-alert-warning svg { color: var(--dc-warning); }

.dc-alert-info {
  background-color: var(--dc-navy-xlight);
  border-left-color: var(--dc-navy);
  color:            var(--dc-navy);
}

.dc-alert-success {
  background-color: var(--dc-green-light);
  border-left-color: var(--dc-green);
  color:            #14532d;
}

/* Print utility */
@media print {
  .no-print { display: none !important; }
}


/* ============================================================
   4. NAVBAR (.dc-navbar)
   ============================================================ */
.dc-navbar {
  position:         sticky;
  top:              0;
  z-index:          1020;
  background-color: var(--dc-white);
  border-bottom:    2px solid var(--dc-border);
  height:           var(--dc-navbar-h);
  display:          flex;
  align-items:      center;
  transition:       box-shadow var(--dc-transition-med),
                    background-color var(--dc-transition-med);
}

/* Adds depth when page is scrolled */
.dc-navbar--scrolled {
  box-shadow:    var(--dc-shadow-md);
  border-bottom-color: transparent;
}

/* Inner flex layout */
.dc-navbar-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
  height:          100%;
  width:           100%;
}

/* ── Logo ── */
.dc-logo {
  display:         flex;
  align-items:     center;
  gap:             0.55rem;
  text-decoration: none;
  flex-shrink:     0;
  transition:      opacity var(--dc-transition);
}

.dc-logo:hover { opacity: 0.88; }

.dc-logo-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.dc-logo-text {
  font-family:    var(--dc-font);
  font-size:      1.35rem;
  font-weight:    400;
  color:          var(--dc-navy);
  letter-spacing: -0.025em;
  line-height:    1;
}

.dc-logo-text strong {
  font-weight: 800;
  color:       var(--dc-teal);
}

/* Light variant — for dark backgrounds */
.dc-logo-text--light {
  color: rgba(255, 255, 255, 0.9);
}

.dc-logo-text--light strong {
  color: #fff;
}

/* ── Desktop nav ── */
.dc-nav {
  display:     flex;
  align-items: center;
  gap:         0.2rem;
}

.dc-nav-link {
  display:       inline-flex;
  align-items:   center;
  padding:       0.5rem 0.95rem;
  font-size:     0.95rem;
  font-weight:   500;
  color:         var(--dc-text);
  border-radius: var(--dc-radius-md);
  transition:    background-color var(--dc-transition),
                 color var(--dc-transition);
  white-space:   nowrap;
  min-height:    44px;
  text-decoration: none;
}

.dc-nav-link:hover {
  background-color: var(--dc-teal-light);
  color:            var(--dc-teal-dark);
}

.dc-nav-link--active,
.dc-nav-link.active {
  background-color: var(--dc-teal-light);
  color:            var(--dc-teal-dark);
  font-weight:      600;
}

.dc-nav-link:focus-visible {
  outline:      2px solid var(--dc-teal);
  outline-offset: 2px;
}

/* ── Mobile hamburger ── */
.dc-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           48px;
  height:          48px;
  background:      none;
  border:          2px solid var(--dc-border-dark);
  border-radius:   var(--dc-radius-md);
  cursor:          pointer;
  padding:         8px;
  transition:      border-color var(--dc-transition),
                   background-color var(--dc-transition);
  flex-shrink:     0;
}

.dc-hamburger:hover {
  border-color:     var(--dc-teal);
  background-color: var(--dc-teal-light);
}

.dc-hamburger:focus-visible {
  outline:        2px solid var(--dc-teal);
  outline-offset: 2px;
}

.dc-hamburger-line {
  display:          block;
  width:            20px;
  height:           2px;
  background-color: var(--dc-navy);
  border-radius:    2px;
  transition:       transform 0.25s ease,
                    opacity 0.2s ease;
  transform-origin: center;
}

/* Animated open state */
.dc-hamburger--open .dc-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.dc-hamburger--open .dc-hamburger-line:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}

.dc-hamburger--open .dc-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile slide-down panel */
.dc-nav--open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}


/* ============================================================
   5. AEP BANNER (.dc-aep-banner)
   ============================================================ */
.dc-aep-banner {
  position:        sticky;
  top:             var(--dc-navbar-h);
  z-index:         1010;
  background:      linear-gradient(90deg, var(--dc-green) 0%, #166534 100%);
  color:           #fff;
  text-align:      center;
  padding:         0.65rem 1rem;
  font-size:       0.95rem;
  font-weight:     500;
  line-height:     1.5;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.6rem;
  flex-wrap:       wrap;
}

.dc-aep-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.dc-aep-icon svg,
.dc-aep-icon i[data-feather] {
  width:  18px;
  height: 18px;
  color:  rgba(255, 255, 255, 0.9);
}

.dc-aep-link {
  color:                 #fff;
  font-weight:           700;
  text-decoration:       underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.6);
  transition:            text-decoration-color var(--dc-transition);
}

.dc-aep-link:hover {
  color:                 #fff;
  text-decoration-color: #fff;
}


/* ============================================================
   6. HERO SECTION (.dc-hero)
   ============================================================ */
.dc-hero {
  background:  linear-gradient(
                 150deg,
                 var(--dc-navy)      0%,
                 #1e4a7a             40%,
                 var(--dc-teal-dark) 100%
               );
  padding:     4.5rem 0 3.5rem;
  position:    relative;
  overflow:    hidden;
}

/* Dot-grid pattern overlay for texture */
.dc-hero::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='24' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

/* Gold accent bar at bottom of hero */
.dc-hero::after {
  content:  '';
  position: absolute;
  bottom:   0;
  left:     0;
  right:    0;
  height:   3px;
  background: linear-gradient(90deg, var(--dc-gold) 0%, var(--dc-gold-dark) 100%);
}

.dc-hero .container {
  position: relative;
  z-index:  1;
}

/* Hero content block */
.dc-hero-content {
  text-align:    center;
  margin-bottom: 2.5rem;
}

/* Main hero heading */
.dc-hero-h1 {
  font-family:    var(--dc-font-heading);
  font-size:      clamp(1.85rem, 4.8vw, 3rem);
  font-weight:    800;
  color:          #ffffff;
  line-height:    1.18;
  margin-bottom:  1rem;
  letter-spacing: -0.025em;
  text-shadow:    0 2px 12px rgba(0, 0, 0, 0.18);
}

/* Hero subtitle */
.dc-hero-subtitle {
  font-size:    clamp(1rem, 2.2vw, 1.2rem);
  color:        rgba(255, 255, 255, 0.85);
  margin-bottom: 0;
  max-width:    600px;
  margin-left:  auto;
  margin-right: auto;
  line-height:  1.65;
}

.dc-hero-subtitle strong {
  color:       #ffffff;
  font-weight: 700;
}

/* Teal highlight in subtitle (e.g., "YOUR") */
.dc-hero-subtitle em {
  font-style:  normal;
  color:       #7dd3e4;
  font-weight: 700;
}


/* ============================================================
   7. BUTTONS — Complete Button System
   ============================================================ */

/* ── Base ── */
.dc-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.45rem;
  font-family:     var(--dc-font);
  font-size:       1rem;
  font-weight:     600;
  line-height:     1.3;
  border-radius:   var(--dc-radius-md);
  padding:         0.7rem 1.4rem;
  min-height:      48px;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  border:          2px solid transparent;
  transition:      background-color var(--dc-transition),
                   color var(--dc-transition),
                   border-color var(--dc-transition),
                   box-shadow var(--dc-transition),
                   transform 0.15s ease;
  position:        relative;
  overflow:        hidden;
}

.dc-btn:disabled {
  opacity:  0.5;
  cursor:   not-allowed;
  pointer-events: none;
}

.dc-btn:focus-visible {
  outline:    none;
  box-shadow: var(--dc-focus-ring);
}

/* ── Primary (teal) ── */
.dc-btn--primary,
.dc-btn-primary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  font-family:      var(--dc-font);
  font-size:        1rem;
  font-weight:      700;
  color:            #fff;
  background-color: var(--dc-teal);
  border:           2px solid var(--dc-teal);
  border-radius:    var(--dc-radius-md);
  padding:          0.75rem 1.5rem;
  min-height:       48px;
  cursor:           pointer;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       background-color var(--dc-transition),
                    border-color var(--dc-transition),
                    box-shadow var(--dc-transition),
                    transform 0.15s ease;
  letter-spacing:   0.01em;
}

.dc-btn--primary:hover:not(:disabled),
.dc-btn-primary:hover:not(:disabled) {
  background-color: var(--dc-teal-dark);
  border-color:     var(--dc-teal-dark);
  box-shadow:       var(--dc-shadow-primary);
  color:            #fff;
  transform:        translateY(-1px);
}

.dc-btn--primary:active:not(:disabled),
.dc-btn-primary:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: none;
}

.dc-btn--primary:focus-visible,
.dc-btn-primary:focus-visible {
  outline:    none;
  box-shadow: var(--dc-focus-ring);
}

.dc-btn--primary:disabled,
.dc-btn-primary:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ── Secondary (teal ghost-fill) ── */
.dc-btn-secondary {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.45rem;
  font-family:      var(--dc-font);
  font-size:        1rem;
  font-weight:      600;
  color:            var(--dc-teal-dark);
  background-color: var(--dc-teal-light);
  border:           2px solid var(--dc-teal);
  border-radius:    var(--dc-radius-md);
  padding:          0.7rem 1.3rem;
  min-height:       48px;
  cursor:           pointer;
  text-decoration:  none;
  white-space:      nowrap;
  flex-shrink:      0;
  transition:       background-color var(--dc-transition),
                    color var(--dc-transition),
                    border-color var(--dc-transition),
                    box-shadow var(--dc-transition);
}

.dc-btn-secondary:hover:not(:disabled) {
  background-color: var(--dc-teal);
  color:            #fff;
  box-shadow:       var(--dc-shadow-primary);
}

.dc-btn-secondary:focus-visible {
  outline:    none;
  box-shadow: var(--dc-focus-ring);
}

.dc-btn-secondary:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ── Outline (teal border, transparent fill) ── */
.dc-btn--outline,
.dc-btn-outline {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.4rem;
  font-family:      var(--dc-font);
  font-size:        0.95rem;
  font-weight:      600;
  color:            var(--dc-teal);
  background-color: transparent;
  border:           2px solid var(--dc-teal);
  border-radius:    var(--dc-radius-md);
  padding:          0.6rem 1.2rem;
  min-height:       44px;
  cursor:           pointer;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       background-color var(--dc-transition),
                    color var(--dc-transition),
                    box-shadow var(--dc-transition);
}

.dc-btn--outline:hover,
.dc-btn-outline:hover {
  background-color: var(--dc-teal);
  color:            #fff;
}

.dc-btn--outline:focus-visible,
.dc-btn-outline:focus-visible {
  outline:    none;
  box-shadow: var(--dc-focus-ring);
}

/* ── Small ── */
.dc-btn--sm {
  font-size:  0.85rem;
  padding:    0.45rem 0.9rem;
  min-height: 36px;
  gap:        0.3rem;
}

/* ── Large ── */
.dc-btn--lg {
  font-size:  1.1rem;
  padding:    0.9rem 1.75rem;
  min-height: 54px;
}

/* ── Extra-large CTA ── */
.dc-btn-xl {
  font-size:      1.15rem;
  padding:        1.05rem 2rem;
  min-height:     60px;
  border-radius:  var(--dc-radius-lg);
  letter-spacing: 0.01em;
  font-weight:    700;
}

.dc-btn-xl:not(:disabled):hover {
  transform:  translateY(-2px);
  box-shadow: var(--dc-shadow-lg);
}

/* ── CTA button (gold accent, for high-conversion moments) ── */
.dc-btn-cta {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.5rem;
  font-family:      var(--dc-font);
  font-size:        1.1rem;
  font-weight:      800;
  color:            var(--dc-navy);
  background:       linear-gradient(135deg, var(--dc-gold) 0%, var(--dc-gold-dark) 100%);
  border:           2px solid var(--dc-gold-dark);
  border-radius:    var(--dc-radius-lg);
  padding:          0.9rem 2rem;
  min-height:       56px;
  cursor:           pointer;
  text-decoration:  none;
  white-space:      nowrap;
  transition:       box-shadow var(--dc-transition),
                    transform 0.15s ease,
                    filter var(--dc-transition);
  box-shadow:       var(--dc-shadow-gold);
  letter-spacing:   0.01em;
}

.dc-btn-cta:hover {
  filter:     brightness(1.06);
  box-shadow: 0 8px 28px rgba(212, 168, 83, 0.45);
  transform:  translateY(-2px);
  color:      var(--dc-navy);
}

.dc-btn-cta:focus-visible {
  outline:    none;
  box-shadow: var(--dc-shadow-gold), var(--dc-focus-ring-navy);
}


/* ============================================================
   8. COMPARISON TOOL (.dc-tool-card)
   ============================================================ */

/* The white elevated card sitting in the hero */
.dc-tool-card {
  background:    var(--dc-white);
  border-radius: var(--dc-radius-xl);
  box-shadow:    var(--dc-shadow-xl);
  padding:       2.25rem 2.5rem;
  max-width:     740px;
  margin:        0 auto;
  border:        1px solid rgba(255, 255, 255, 0.2);
  /* Subtle inner glow from navy background */
  outline:       3px solid rgba(255, 255, 255, 0.12);
  outline-offset: -3px;
}

/* Individual step within the tool */
.dc-tool-step {
  margin-bottom: 1.85rem;
}

.dc-tool-step:last-child {
  margin-bottom: 0;
}

/* Submit step — separated by a divider */
.dc-tool-step-submit {
  padding-top: 1.5rem;
  border-top:  2px solid var(--dc-border);
  margin-top:  0.25rem;
}

/* Step label row (number + label text) */
.dc-step-label {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  font-family:   var(--dc-font-heading);
  font-size:     1.05rem;
  font-weight:   600;
  color:         var(--dc-navy);
  margin-bottom: 0.8rem;
  cursor:        default;
}

/* Numbered step circle */
.dc-step-num {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           30px;
  height:          30px;
  min-width:       30px;
  background:      linear-gradient(135deg, var(--dc-teal) 0%, var(--dc-teal-dark) 100%);
  color:           #fff;
  border-radius:   50%;
  font-size:       0.85rem;
  font-weight:     800;
  line-height:     1;
  flex-shrink:     0;
  box-shadow:      0 2px 8px rgba(12, 124, 137, 0.30);
}

/* ── Form inputs ── */
.dc-input {
  width:            100%;
  font-family:      var(--dc-font);
  font-size:        1rem;
  line-height:      var(--dc-line-height);
  color:            var(--dc-text);
  background-color: var(--dc-white);
  border:           2px solid var(--dc-border-dark);
  border-radius:    var(--dc-radius-md);
  padding:          0.72rem 1.05rem;
  transition:       border-color var(--dc-transition),
                    box-shadow var(--dc-transition);
  appearance:       none;
  display:          block;
}

.dc-input:hover {
  border-color: var(--dc-text-muted);
}

.dc-input:focus {
  outline:      none;
  border-color: var(--dc-teal);
  box-shadow:   var(--dc-focus-ring);
}

.dc-input::placeholder {
  color: var(--dc-text-light);
}

/* Extra-large input variant */
.dc-input-xl {
  font-size:  1.05rem;
  padding:    0.85rem 1.1rem;
  min-height: 56px;
}

/* Inline input row */
.dc-input-row {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.65rem;
  align-items: center;
}

/* ZIP geolocation label */
.dc-zip-location {
  font-size:   0.88rem;
  color:       var(--dc-green);
  font-weight: 600;
  display:     inline-flex;
  align-items: center;
  gap:         0.3rem;
}

/* Field validation error */
.dc-field-error {
  color:       var(--dc-red);
  font-size:   0.88rem;
  margin-top:  0.45rem;
  font-weight: 600;
  display:     flex;
  align-items: center;
  gap:         0.35rem;
}

/* Drug search row (input + add button) */
.dc-drug-search-row {
  display:     flex;
  gap:         0.65rem;
  align-items: flex-start;
}

/* Autocomplete wrapper must be relatively positioned */
.dc-autocomplete-wrapper {
  flex:      1;
  position:  relative;
  min-width: 0;
}

/* Help text below form field */
.dc-form-help {
  display:     flex;
  align-items: center;
  gap:         0.45rem;
  font-size:   0.88rem;
  color:       var(--dc-text-muted);
  margin-top:  0.75rem;
  margin-bottom: 0;
}

.dc-form-help svg,
.dc-form-help i[data-feather] {
  width:       15px;
  height:      15px;
  flex-shrink: 0;
  color:       var(--dc-text-muted);
}


/* ============================================================
   9. DRUG SEARCH & AUTOCOMPLETE
   ============================================================ */

/* Floating dropdown panel */
.dc-autocomplete-dropdown {
  position:         absolute;
  top:              calc(100% + 5px);
  left:             0;
  right:            0;
  z-index:          600;
  background:       var(--dc-white);
  border:           2px solid var(--dc-teal);
  border-radius:    var(--dc-radius-md);
  box-shadow:       var(--dc-shadow-lg);
  max-height:       320px;
  overflow-y:       auto;
  padding:          0.35rem 0;
  margin:           0;
  list-style:       none;
  scrollbar-width:  thin;
  scrollbar-color:  var(--dc-border-dark) transparent;
}

.dc-autocomplete-dropdown::-webkit-scrollbar {
  width: 5px;
}

.dc-autocomplete-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.dc-autocomplete-dropdown::-webkit-scrollbar-thumb {
  background-color: var(--dc-border-dark);
  border-radius:    3px;
}

/* Individual suggestion row */
.dc-autocomplete-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0.8rem 1.1rem;
  cursor:          pointer;
  transition:      background-color var(--dc-transition);
  gap:             0.75rem;
  list-style:      none;
}

.dc-autocomplete-item:hover,
.dc-autocomplete-item.dc-ac-active {
  background-color: var(--dc-teal-light);
}

.dc-autocomplete-item--added {
  opacity: 0.55;
  cursor:  default;
}

/* Drug name (primary text) */
.dc-ac-name {
  font-weight: 600;
  font-size:   1rem;
  color:       var(--dc-navy);
  flex:        1;
  min-width:   0;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Subtitle (strength / class) */
.dc-ac-sub {
  font-size:   0.83rem;
  color:       var(--dc-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Already-added checkmark */
.dc-ac-added-check {
  font-size:   0.8rem;
  font-weight: 700;
  color:       var(--dc-green);
  white-space: nowrap;
  flex-shrink: 0;
  display:     inline-flex;
  align-items: center;
  gap:         0.25rem;
}

/* Loading / empty states */
.dc-ac-loading,
.dc-ac-no-results {
  padding:     1.1rem 1.1rem;
  color:       var(--dc-text-muted);
  font-size:   0.95rem;
  text-align:  center;
  font-style:  italic;
}

.dc-ac-loading {
  display:     flex;
  align-items: center;
  justify-content: center;
  gap:         0.5rem;
}


/* ============================================================
   10. SELECTED DRUG PILLS
   ============================================================ */

/* Container */
.dc-selected-drugs {
  display:    flex;
  flex-wrap:  wrap;
  gap:        0.5rem;
  margin-top: 0.85rem;
  min-height: 0;
}

.dc-selected-drugs:empty {
  display: none;
}

/* Individual pill */
.dc-drug-pill {
  display:          inline-flex;
  align-items:      center;
  gap:              0.4rem;
  background:       linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-navy-mid) 100%);
  border:           1.5px solid var(--dc-navy-mid);
  border-radius:    var(--dc-radius-pill);
  padding:          0.38rem 0.9rem 0.38rem 0.8rem;
  font-size:        0.88rem;
  font-weight:      600;
  color:            #ffffff;
  animation:        dc-pill-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  box-shadow:       0 2px 8px rgba(26, 54, 93, 0.20);
}

@keyframes dc-pill-in {
  from { opacity: 0; transform: scale(0.75) translateY(4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dc-drug-pill-name {
  white-space:   nowrap;
  max-width:     220px;
  overflow:      hidden;
  text-overflow: ellipsis;
}

/* Remove (×) button */
.dc-drug-pill-remove {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           20px;
  height:          20px;
  min-width:       20px;
  background:      rgba(255, 255, 255, 0.18);
  border:          none;
  border-radius:   50%;
  cursor:          pointer;
  color:           rgba(255, 255, 255, 0.85);
  padding:         0;
  font-size:       0.95rem;
  line-height:     1;
  font-weight:     700;
  transition:      background-color var(--dc-transition),
                   color var(--dc-transition);
}

.dc-drug-pill-remove:hover {
  background-color: rgba(255, 255, 255, 0.32);
  color:            #fff;
}

.dc-drug-pill-remove:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 1px;
}


/* ============================================================
   11. POPULAR DRUG QUICK-ADD
   ============================================================ */
.dc-popular-drugs {
  margin-top: 1.1rem;
}

.dc-popular-label {
  display:        block;
  font-size:      0.8rem;
  font-weight:    700;
  color:          var(--dc-text-muted);
  margin-bottom:  0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.dc-popular-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.45rem;
}

/* Individual quick-add pill button */
.dc-quick-pill {
  display:          inline-flex;
  align-items:      center;
  padding:          0.38rem 0.9rem;
  font-family:      var(--dc-font);
  font-size:        0.85rem;
  font-weight:      500;
  color:            var(--dc-text);
  background-color: var(--dc-bg-subtle);
  border:           1.5px solid var(--dc-border-dark);
  border-radius:    var(--dc-radius-pill);
  cursor:           pointer;
  transition:       border-color var(--dc-transition),
                    background-color var(--dc-transition),
                    color var(--dc-transition),
                    box-shadow var(--dc-transition);
  min-height:       34px;
  white-space:      nowrap;
  line-height:      1.3;
}

.dc-quick-pill:hover {
  border-color:     var(--dc-teal);
  color:            var(--dc-teal-dark);
  background-color: var(--dc-teal-light);
  box-shadow:       0 1px 6px rgba(12, 124, 137, 0.15);
}

.dc-quick-pill:focus-visible {
  outline:    none;
  box-shadow: var(--dc-focus-ring);
}

/* Added state */
.dc-quick-pill--added {
  border-color:     var(--dc-green);
  color:            var(--dc-green);
  background-color: var(--dc-green-light);
  cursor:           default;
}

.dc-quick-pill--added:hover {
  border-color:     var(--dc-green);
  color:            var(--dc-green);
  background-color: var(--dc-green-light);
  box-shadow:       none;
}


/* ============================================================
   12. TRUST STATS SECTION
   ============================================================ */
.dc-trust-section {
  background-color: var(--dc-bg-subtle);
  border-top:       4px solid var(--dc-gold);
  border-bottom:    1px solid var(--dc-border);
  padding:          2.25rem 0;
}

/* 4-column grid */
.dc-trust-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.1rem;
}

/* Trust card */
.dc-trust-card {
  text-align:    center;
  padding:       1.5rem 1.25rem 1.25rem;
  border-radius: var(--dc-radius-lg);
  background:    var(--dc-white);
  border:        1px solid var(--dc-border);
  box-shadow:    var(--dc-shadow-sm);
  transition:    box-shadow var(--dc-transition-med),
                 transform var(--dc-transition-med),
                 border-color var(--dc-transition);
}

.dc-trust-card:hover {
  box-shadow:   var(--dc-shadow-md);
  transform:    translateY(-2px);
  border-color: var(--dc-teal);
}

/* Gold-highlighted card variant */
.dc-trust-card-highlight {
  border-color:     var(--dc-gold);
  background:       linear-gradient(160deg, var(--dc-gold-light) 0%, #fff 60%);
  box-shadow:       var(--dc-shadow-gold);
}

.dc-trust-card-highlight:hover {
  border-color: var(--dc-gold-dark);
  box-shadow:   0 8px 24px rgba(212, 168, 83, 0.28);
}

/* Icon area (optional) */
.dc-trust-card-icon {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  background-color: var(--dc-teal-light);
  border-radius:    50%;
  margin:           0 auto 0.8rem;
  color:            var(--dc-teal-dark);
}

.dc-trust-card-icon svg {
  width:  20px;
  height: 20px;
}

/* Large bold number */
.dc-trust-number {
  font-family:   var(--dc-font-heading);
  font-size:     clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight:   800;
  color:         var(--dc-navy);
  line-height:   1.1;
  margin-bottom: 0.35rem;
  letter-spacing: -0.02em;
}

.dc-trust-card-highlight .dc-trust-number {
  color: var(--dc-gold-dark);
}

/* Label beneath the number */
.dc-trust-label {
  font-size:      0.8rem;
  font-weight:    700;
  color:          var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height:    1.4;
}


/* ============================================================
   13. HOW IT WORKS SECTION
   ============================================================ */
.dc-how-section {
  padding: 4.5rem 0;
}

/* 3-column steps grid */
.dc-steps-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1.75rem;
  position:              relative;
}

/* Connector line between steps (desktop only) */
.dc-steps-grid::before {
  content:    '';
  position:   absolute;
  top:        52px;
  left:       calc(33.33% + 20px);
  right:      calc(33.33% + 20px);
  height:     2px;
  background: linear-gradient(90deg, var(--dc-border), var(--dc-border));
  z-index:    0;
  pointer-events: none;
}

/* Step card */
.dc-step-card {
  text-align:    center;
  padding:       2.25rem 1.75rem 2rem;
  border-radius: var(--dc-radius-xl);
  background:    var(--dc-white);
  border:        1.5px solid var(--dc-border);
  box-shadow:    var(--dc-shadow-sm);
  transition:    transform var(--dc-transition-med),
                 box-shadow var(--dc-transition-med),
                 border-color var(--dc-transition);
  position:      relative;
  z-index:       1;
}

.dc-step-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--dc-shadow-lg);
  border-color: var(--dc-teal);
}

/* Circular icon container */
.dc-step-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           68px;
  height:          68px;
  background:      linear-gradient(135deg, var(--dc-teal-light) 0%, rgba(12, 124, 137, 0.15) 100%);
  border:          2px solid rgba(12, 124, 137, 0.25);
  border-radius:   50%;
  margin-bottom:   1.35rem;
  color:           var(--dc-teal);
  transition:      background-color var(--dc-transition-med),
                   box-shadow var(--dc-transition-med);
}

.dc-step-card:hover .dc-step-icon {
  background:  linear-gradient(135deg, var(--dc-teal) 0%, var(--dc-teal-dark) 100%);
  box-shadow:  var(--dc-shadow-primary);
  border-color: var(--dc-teal);
}

.dc-step-icon svg,
.dc-step-icon i[data-feather] {
  width:      28px;
  height:     28px;
  stroke:     var(--dc-teal);
  transition: stroke var(--dc-transition);
}

.dc-step-card:hover .dc-step-icon svg,
.dc-step-card:hover .dc-step-icon i[data-feather] {
  stroke: #ffffff;
}

.dc-step-card h3 {
  font-family:   var(--dc-font-heading);
  font-size:     1.1rem;
  font-weight:   700;
  color:         var(--dc-navy);
  margin-bottom: 0.65rem;
}

.dc-step-card p {
  font-size:     0.95rem;
  color:         var(--dc-text-muted);
  margin-bottom: 0;
  line-height:   1.65;
}


/* ============================================================
   14. BADGES & PILLS — Comprehensive System
   ============================================================ */

/* ── Base badge ── */
.dc-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           0.28rem;
  padding:       0.25rem 0.7rem;
  border-radius: var(--dc-radius-pill);
  font-size:     0.78rem;
  font-weight:   700;
  line-height:   1.2;
  white-space:   nowrap;
  letter-spacing: 0.01em;
}

.dc-badge svg,
.dc-badge i[data-feather] {
  width:  12px;
  height: 12px;
}

/* Generic drug — green */
.dc-badge--generic {
  background-color: var(--dc-green-light);
  color:            #14532d;
  border:           1px solid rgba(21, 128, 61, 0.25);
}

/* Brand drug — navy */
.dc-badge--brand {
  background-color: var(--dc-navy-light);
  color:            var(--dc-navy);
  border:           1px solid rgba(26, 54, 93, 0.22);
}

/* Feature badge — gold */
.dc-badge--feature {
  background-color: var(--dc-gold-light);
  color:            #78350f;
  border:           1px solid rgba(212, 168, 83, 0.35);
}

/* Plan type badge */
.dc-badge--type {
  background-color: var(--dc-navy-light);
  color:            var(--dc-navy);
  border:           1px solid rgba(26, 54, 93, 0.2);
}

/* Plan year badge */
.dc-badge--year {
  background-color: var(--dc-bg-grey);
  color:            var(--dc-text-muted);
  border:           1px solid var(--dc-border);
}

/* Extra small variant */
.dc-badge--xs {
  font-size: 0.7rem;
  padding:   0.15rem 0.5rem;
}

/* Covered / not-covered status badges */
.dc-badge-covered {
  background-color: var(--dc-green-light);
  color:            #14532d;
  border:           1px solid rgba(21, 128, 61, 0.28);
}

.dc-badge-covered svg { stroke: #14532d; }

.dc-badge-not-covered {
  background-color: var(--dc-red-light);
  color:            #991b1b;
  border:           1px solid rgba(220, 38, 38, 0.28);
}

.dc-badge-not-covered svg { stroke: #991b1b; }

/* ── Tier badges ── */
.dc-tier-badge {
  display:       inline-block;
  padding:       0.2rem 0.6rem;
  border-radius: var(--dc-radius);
  font-size:     0.78rem;
  font-weight:   700;
  white-space:   nowrap;
  letter-spacing: 0.02em;
}

/* Tier 1 — Preferred Generic (blue) */
.dc-tier-badge--1,
.dc-tier-1 {
  background-color: var(--dc-blue-light);
  color:            var(--dc-blue);
  border:           1px solid rgba(29, 78, 216, 0.2);
}

/* Tier 2 — Generic (green) */
.dc-tier-badge--2,
.dc-tier-2 {
  background-color: var(--dc-green-light);
  color:            #166534;
  border:           1px solid rgba(21, 128, 61, 0.2);
}

/* Tier 3 — Preferred Brand (amber) */
.dc-tier-badge--3,
.dc-tier-3 {
  background-color: var(--dc-warning-light);
  color:            #92400e;
  border:           1px solid rgba(217, 119, 6, 0.22);
}

/* Tier 4 — Non-Preferred Brand (red) */
.dc-tier-badge--4,
.dc-tier-4 {
  background-color: var(--dc-red-light);
  color:            #991b1b;
  border:           1px solid rgba(220, 38, 38, 0.22);
}

/* Tier 5 — Specialty (purple) */
.dc-tier-badge--5,
.dc-tier-5 {
  background-color: var(--dc-purple-light);
  color:            var(--dc-purple);
  border:           1px solid rgba(124, 58, 237, 0.22);
}

/* Tier 6 — Select Care (grey) */
.dc-tier-badge--6,
.dc-tier-6 {
  background-color: var(--dc-bg-grey);
  color:            var(--dc-text-muted);
  border:           1px solid var(--dc-border);
}

/* ── Restriction badges ── */
.dc-restriction-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.2rem 0.55rem;
  border-radius:   var(--dc-radius);
  font-size:       0.73rem;
  font-weight:     800;
  letter-spacing:  0.06em;
  cursor:          help;
  text-decoration: none;
  border:          1px solid transparent;
  transition:      opacity var(--dc-transition);
}

.dc-restriction-badge:hover {
  opacity: 0.8;
}

/* Prior Authorization — orange */
.dc-r-pa {
  background-color: var(--dc-warning-light);
  color:            #78350f;
  border-color:     rgba(217, 119, 6, 0.35);
}

/* Step Therapy — purple */
.dc-r-st {
  background-color: var(--dc-purple-light);
  color:            var(--dc-purple);
  border-color:     rgba(124, 58, 237, 0.28);
}

/* Quantity Limit — blue */
.dc-r-ql {
  background-color: var(--dc-blue-light);
  color:            var(--dc-blue);
  border-color:     rgba(29, 78, 216, 0.25);
}

/* ── Inline tag (smaller, plan meta etc.) ── */
.dc-tag {
  display:          inline-flex;
  align-items:      center;
  padding:          0.2rem 0.7rem;
  background-color: var(--dc-bg-grey);
  border:           1px solid var(--dc-border);
  border-radius:    var(--dc-radius);
  font-size:        0.8rem;
  font-weight:      500;
  color:            var(--dc-text-muted);
  white-space:      nowrap;
}


/* ============================================================
   15. TABLES — Comprehensive Table System
   ============================================================ */

/* ── Horizontal scroll wrapper ── */
.dc-table-wrap {
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  border-radius:              var(--dc-radius-lg);
  border:                     1px solid var(--dc-border);
  box-shadow:                 var(--dc-shadow-sm);
  margin-bottom:              1rem;
  /* Custom scrollbar */
  scrollbar-width:            thin;
  scrollbar-color:            var(--dc-border-dark) transparent;
}

.dc-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.dc-table-wrap::-webkit-scrollbar-track {
  background: var(--dc-bg-subtle);
}

.dc-table-wrap::-webkit-scrollbar-thumb {
  background-color: var(--dc-border-dark);
  border-radius:    3px;
}

/* ── Base table ── */
.dc-table {
  width:            100%;
  border-collapse:  collapse;
  font-size:        0.93rem;
  min-width:        480px;
  background-color: var(--dc-white);
}

/* Table head */
.dc-table thead {
  background:   linear-gradient(180deg, var(--dc-navy) 0%, var(--dc-navy-mid) 100%);
  position:     sticky;
  top:          0;
  z-index:      2;
}

.dc-table thead tr th {
  padding:        0.75rem 1.1rem;
  text-align:     left;
  font-family:    var(--dc-font-heading);
  font-weight:    600;
  font-size:      0.78rem;
  color:          rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space:    nowrap;
  border-bottom:  2px solid rgba(255, 255, 255, 0.12);
}

.dc-table thead tr th:first-child {
  border-radius: var(--dc-radius-lg) 0 0 0;
}

.dc-table thead tr th:last-child {
  border-radius: 0 var(--dc-radius-lg) 0 0;
}

/* Table body */
.dc-table tbody tr {
  border-bottom: 1px solid var(--dc-border);
  transition:    background-color var(--dc-transition);
}

.dc-table tbody tr:last-child {
  border-bottom: none;
}

/* Subtle zebra striping */
.dc-table tbody tr:nth-child(even) {
  background-color: var(--dc-bg-subtle);
}

.dc-table tbody tr:hover {
  background-color: var(--dc-teal-light) !important;
}

.dc-table tbody td {
  padding:        0.75rem 1.1rem;
  vertical-align: middle;
  color:          var(--dc-text);
  line-height:    1.5;
}

/* ── Drug class table variant ── */
.dc-table--drug-class .dc-table,
.dc-table--drug-class {
  min-width: 680px;
}

/* ── Plans listing table variant ── */
.dc-table--plans {
  min-width: 720px;
}

.dc-table--plans .dc-table thead {
  background: linear-gradient(180deg, var(--dc-navy) 0%, #1e4a7a 100%);
}

/* ── Drugs listing table variant ── */
.dc-table--drugs {
  min-width: 580px;
}

/* ── Tier structure table ── */
.dc-table--tiers {
  min-width: 540px;
}

/* ── Drug link in tables ── */
.dc-drug-link {
  font-weight:  600;
  color:        var(--dc-teal-dark);
  transition:   color var(--dc-transition);
}

.dc-drug-link:hover {
  color:           var(--dc-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Drug dosage/strength sub-text */
.dc-drug-dose {
  display:    block;
  font-size:  0.8rem;
  color:      var(--dc-text-muted);
  font-weight: 400;
  margin-top: 0.15rem;
}

/* Generic name cell (bold primary name) */
.dc-drug-name-cell {
  font-weight: 600;
  color:       var(--dc-navy);
  max-width:   220px;
  display:     block;
}

/* Brand name in parentheses */
.dc-drug-brand-name {
  display:     block;
  font-size:   0.8rem;
  color:       var(--dc-text-muted);
  font-weight: 400;
  margin-top:  0.1rem;
}

/* Generic name sub-text (in plan-drug tables) */
.dc-drug-generic {
  display:     block;
  font-size:   0.8rem;
  color:       var(--dc-text-muted);
  font-weight: 400;
  margin-top:  0.1rem;
  font-style:  italic;
}

/* Cost column — right-aligned */
.dc-cost-cell {
  text-align:  right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color:       var(--dc-navy);
}

/* Numeric column — right-aligned */
.dc-num-cell {
  text-align:  right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rank column (1, 2, 3…) */
.dc-rank-col {
  text-align:  center;
  font-weight: 700;
  color:       var(--dc-teal);
  font-size:   0.95rem;
  width:       40px;
  min-width:   40px;
}

/* ── Coverage bar (animated progress) ── */
.dc-coverage-bar-wrap {
  display:     flex;
  align-items: center;
  gap:         0.55rem;
  min-width:   100px;
}

.dc-coverage-bar {
  flex:           1;
  height:         8px;
  background:     linear-gradient(90deg, var(--dc-teal) 0%, var(--dc-teal-dark) 100%);
  border-radius:  var(--dc-radius-pill);
  position:       relative;
  min-width:      4px;
  max-width:      120px;
  transition:     width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* Track beneath */
  box-shadow:     0 0 0 8px var(--dc-bg-grey);
}

/* Track */
.dc-coverage-bar::before {
  content:       '';
  position:      absolute;
  inset:         0;
  background:    var(--dc-bg-grey);
  border-radius: inherit;
  z-index:       -1;
  width:         100%;
  box-shadow:    0 0 0 120px var(--dc-bg-grey);
}

/* Percentage text */
.dc-coverage-pct {
  font-size:  0.78rem;
  font-weight: 700;
  color:      var(--dc-teal-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Not-covered row highlight */
.dc-row-not-covered {
  background-color: #fff5f5 !important;
}

.dc-row-not-covered:hover {
  background-color: #ffe4e4 !important;
}

.dc-row-not-covered td {
  color: #991b1b;
}

/* "No restrictions" text */
.dc-no-restrictions {
  font-size:  0.82rem;
  color:      var(--dc-text-light);
  font-style: italic;
}

/* Table footnote */
.dc-table-note {
  font-size:   0.85rem;
  color:       var(--dc-text-muted);
  margin-top:  0.65rem;
  font-style:  italic;
  margin-bottom: 0;
}

/* Plan link in tables */
.dc-plan-link {
  font-weight:  600;
  color:        var(--dc-teal-dark);
}

.dc-plan-link:hover {
  color:           var(--dc-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Plan org sub-text */
.dc-plan-org-sub {
  display:    block;
  font-size:  0.8rem;
  color:      var(--dc-text-muted);
  font-weight: 400;
  margin-top: 0.1rem;
}

/* Restrictions cell */
.dc-restrictions-cell {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.3rem;
  align-items: center;
}

/* Deductible applies/no indicators */
.dc-ded-yes {
  font-size:  0.8rem;
  font-weight: 700;
  color:      var(--dc-warning);
}

.dc-ded-no {
  font-size:  0.8rem;
  color:      var(--dc-text-muted);
}



/* ============================================================
   16. PLAN RESULT CARDS (compare.php results)
   ============================================================ */

.dc-compare-page {
  padding: 2rem 0 4rem;
}

.dc-compare-error {
  background: var(--dc-red-light);
  border: 1px solid var(--dc-red);
  border-radius: var(--dc-radius-lg);
  padding: 2rem;
  text-align: center;
  color: var(--dc-red);
  font-weight: 600;
  margin-bottom: 2rem;
}

/* Results header */
.dc-results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.dc-results-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0;
  line-height: 1.25;
}

/* Medication pills */
.dc-your-meds {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--dc-navy-light);
  border-radius: var(--dc-radius-lg);
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: var(--dc-text-muted);
}

.dc-meds-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dc-med-pill {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--dc-navy);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  border: 1px solid var(--dc-border-dark);
  white-space: nowrap;
}

.dc-modify-link {
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dc-teal);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.2s;
}

.dc-modify-link:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

/* Sort bar */
.dc-sort-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--dc-border);
}

.dc-sort-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.dc-sort-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--dc-border-dark);
  border-radius: 100px;
  color: var(--dc-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.dc-sort-btn:hover {
  border-color: var(--dc-teal);
  color: var(--dc-teal);
  background: var(--dc-teal-light);
}

.dc-sort-btn--active {
  background: var(--dc-teal);
  color: #fff;
  border-color: var(--dc-teal);
}

/* Results list */
.dc-results-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Plan card */
.dc-plan-card {
  background: #fff;
  border-radius: var(--dc-radius-xl);
  border: 1px solid var(--dc-border);
  border-left: 4px solid var(--dc-teal);
  box-shadow: var(--dc-shadow-md);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  position: relative;
}

.dc-plan-card:hover {
  box-shadow: var(--dc-shadow-lg);
  transform: translateY(-2px);
}

/* Best value variant */
.dc-plan-card-best {
  border-left-color: var(--dc-green);
  box-shadow: var(--dc-shadow-primary);
}

.dc-plan-card-best::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--dc-green) 0%, var(--dc-teal) 100%);
}

.dc-best-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--dc-gold);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  white-space: nowrap;
}

/* Card header */
.dc-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}

.dc-plan-rank {
  font-family: var(--dc-font-heading);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--dc-navy-light);
  line-height: 1;
  min-width: 3rem;
  text-align: center;
  flex-shrink: 0;
}

.dc-plan-card-best .dc-plan-rank {
  color: var(--dc-green-light);
}

.dc-plan-identity {
  flex: 1;
  min-width: 0;
}

.dc-plan-name {
  font-family: var(--dc-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.dc-plan-org {
  font-size: 0.85rem;
  color: var(--dc-text-muted);
  margin: 0 0 0.4rem;
}

.dc-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Cost summary */
.dc-cost-summary {
  text-align: right;
  flex-shrink: 0;
}

.dc-total-cost {
  display: block;
}

.dc-cost-amount {
  display: block;
  font-family: var(--dc-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: var(--dc-green);
  line-height: 1;
}

.dc-plan-card-best .dc-cost-amount {
  color: var(--dc-green);
}

.dc-cost-label {
  display: block;
  font-size: 0.75rem;
  color: var(--dc-text-muted);
  margin-top: 0.2rem;
}

.dc-cost-breakdown {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  line-height: 1.6;
}

/* Card footer */
.dc-plan-footer {
  background: var(--dc-bg-subtle);
  border-top: 1px solid var(--dc-border);
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.dc-plan-footer-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dc-pf-stat {
  display: flex;
  flex-direction: column;
}

.dc-pf-label {
  font-size: 0.7rem;
  color: var(--dc-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.dc-pf-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dc-text);
}

/* Coverage toggle */
.dc-coverage-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dc-teal);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.3rem 0.6rem;
  border-radius: var(--dc-radius);
  transition: background 0.2s;
}

.dc-coverage-toggle:hover {
  background: var(--dc-teal-light);
}

/* Print bar */
.dc-print-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--dc-bg-grey);
  border-bottom: 1px solid var(--dc-border);
  font-size: 0.8rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.dc-print-note {
  color: var(--dc-text-muted);
  font-style: italic;
}

/* Savings callout */
.dc-savings-callout {
  background: var(--dc-green-light);
  border: 1px solid #86efac;
  border-radius: var(--dc-radius-lg);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  color: var(--dc-green);
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Bottom CTA */
.dc-bottom-cta {
  margin: 2.5rem 0 1.5rem;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  color: #fff;
}

.dc-bottom-cta h2 {
  font-family: var(--dc-font-heading);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: #fff;
}

.dc-bottom-cta p {
  color: rgba(255,255,255,0.8);
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
}

/* Disclaimer */
.dc-results-disclaimer {
  font-size: 0.78rem;
  color: var(--dc-text-light);
  text-align: center;
  line-height: 1.7;
  padding: 1rem;
  border-top: 1px solid var(--dc-border);
  margin-top: 2rem;
}

/* CTA and ad inserts */
.dc-cta-insert {
  background: var(--dc-navy-light);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border: 1px solid var(--dc-border-dark);
}

.dc-ad-insert {
  text-align: center;
  padding: 1rem;
  background: var(--dc-bg-grey);
  border-radius: var(--dc-radius);
  border: 1px dashed var(--dc-border-dark);
  color: var(--dc-text-muted);
  font-size: 0.8rem;
}


/* ============================================================
   17. DRUG COVERAGE DETAIL TABLE (expandable per-plan)
   ============================================================ */

.dc-coverage-table-wrap {
  overflow-x: auto;
  padding: 0 1.5rem 1.25rem;
  border-top: 1px solid var(--dc-border);
  animation: fadeSlideIn 0.25s ease;
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dc-coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 560px;
}

.dc-coverage-table thead tr {
  background: var(--dc-navy-light);
}

.dc-coverage-table th {
  padding: 0.6rem 0.9rem;
  font-weight: 700;
  color: var(--dc-navy);
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border-bottom: 2px solid var(--dc-border-dark);
}

.dc-coverage-table td {
  padding: 0.6rem 0.9rem;
  color: var(--dc-text);
  border-bottom: 1px solid var(--dc-border);
  vertical-align: middle;
}

.dc-coverage-table tbody tr:last-child td {
  border-bottom: none;
}

.dc-coverage-table tbody tr:hover td {
  background: var(--dc-bg-subtle);
}

.dc-restrictions-cell {
  font-size: 0.78rem;
  color: var(--dc-warning);
  font-weight: 600;
}


/* ============================================================
   18. STARS RATING COMPONENT
   ============================================================ */

.dc-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.dc-star {
  color: var(--dc-gold);
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

.dc-star-empty {
  color: var(--dc-border-dark);
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

.dc-stars--sm .dc-star,
.dc-stars--sm .dc-star-empty {
  font-size: 0.8rem;
}

.dc-stars--lg .dc-star,
.dc-stars--lg .dc-star-empty {
  font-size: 1.3rem;
}


/* ============================================================
   19. MEDICARE ADVISOR CTA CARDS
   ============================================================ */

.dc-medicare-cta {
  background: linear-gradient(135deg, var(--dc-navy-dark) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  padding: 2.5rem 2rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.dc-medicare-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
}

.dc-medicare-cta::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: rgba(255,255,255,0.03);
  border-radius: 50%;
}

.dc-medicare-cta-content {
  position: relative;
  z-index: 1;
}

.dc-medicare-cta-title {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.dc-medicare-cta-text {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.dc-medicare-cta-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dc-cta-btn-white {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--dc-navy);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.dc-cta-btn-white:hover {
  background: var(--dc-gold-light);
  color: var(--dc-navy-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.dc-cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.65rem 1.4rem;
  border-radius: 100px;
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.4);
  transition: all 0.2s;
}

.dc-cta-btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}


/* ============================================================
   20. DRUG DETAIL PAGE (drug.php)
   ============================================================ */

.dc-drug-page {
  padding: 0 0 4rem;
}

.dc-drug-header {
  background: linear-gradient(135deg, var(--dc-navy-light) 0%, #fff 60%);
  border-bottom: 1px solid var(--dc-border);
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
}

.dc-drug-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--dc-navy);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}

.dc-drug-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.dc-drug-class-tag {
  display: inline-flex;
  align-items: center;
  background: var(--dc-teal-light);
  color: var(--dc-teal-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s;
}

.dc-drug-class-tag:hover {
  background: var(--dc-teal);
  color: #fff;
}

/* Coverage stat bar */
.dc-coverage-stat-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.1rem 1.5rem;
}

.dc-cov-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 80px;
}

.dc-cov-stat-num {
  font-family: var(--dc-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--dc-teal);
  line-height: 1;
}

.dc-cov-stat-label {
  font-size: 0.72rem;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Drug content grid */
.dc-drug-content-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}

.dc-drug-main {
  min-width: 0;
}

.dc-drug-sidebar-col {
  position: sticky;
  top: 90px;
  min-width: 0;
}

/* Info card */
.dc-info-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--dc-shadow-sm);
}

.dc-info-card-title {
  font-family: var(--dc-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--dc-navy-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dc-info-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--dc-border);
  font-size: 0.875rem;
}

.dc-info-row:last-child {
  border-bottom: none;
}

.dc-info-label {
  color: var(--dc-text-muted);
  font-weight: 600;
  min-width: 130px;
  flex-shrink: 0;
}

.dc-info-value {
  color: var(--dc-text);
  flex: 1;
  font-weight: 500;
}


/* ============================================================
   21. STATE COVERAGE TABLE (drug page)
   ============================================================ */

.dc-state-coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.dc-state-coverage-table th {
  background: var(--dc-navy-light);
  color: var(--dc-navy);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.65rem 0.9rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 2px solid var(--dc-border-dark);
}

.dc-state-coverage-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--dc-border);
  color: var(--dc-text);
  vertical-align: middle;
}

.dc-state-coverage-table tbody tr:hover td {
  background: var(--dc-bg-subtle);
}

.dc-state-coverage-table tbody tr:last-child td {
  border-bottom: none;
}

.dc-state-link-cell a {
  color: var(--dc-teal);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.dc-state-link-cell a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}


/* ============================================================
   22. PLAN DETAIL PAGE (plan.php)
   ============================================================ */

.dc-plan-page {
  padding: 0 0 4rem;
}

.dc-plan-header-card {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  padding: 2.5rem 2rem;
  margin-bottom: 2rem;
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.dc-plan-header-info {
  flex: 1;
  min-width: 0;
}

.dc-plan-page-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

.dc-plan-page-h1 + p {
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

/* Plan stats grid */
.dc-plan-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dc-plan-stat-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--dc-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.dc-plan-stat-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-plan-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dc-teal);
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}

.dc-plan-stat-label {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}


/* ============================================================
   23. DRUG CLASS PAGE (drug-class.php)
   ============================================================ */

.dc-drug-class-header {
  background: linear-gradient(150deg, var(--dc-navy-dark) 0%, var(--dc-navy) 50%, var(--dc-teal-dark) 100%);
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--dc-radius-xl);
  margin-bottom: 2rem;
}

.dc-drug-class-header::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(12,124,137,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.dc-drug-class-header::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(212,168,83,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.dc-drug-class-header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.dc-drug-class-header-text {
  flex: 1;
  min-width: 0;
}

.dc-drug-class-header-text h1,
.dc-drug-class-header-text .dc-page-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

/* All text inside dark headers should be light */
.dc-drug-class-header,
.dc-drug-class-header * {
  color: #fff;
}

.dc-drug-class-header a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
}

.dc-drug-class-header a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.dc-drug-class-header-text .dc-eyebrow {
  display: inline-block;
  background: rgba(212,168,83,0.25);
  color: var(--dc-gold);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(212,168,83,0.4);
}

.dc-drug-class-header-text p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  max-width: 600px;
}

/* Drug class stats */
.dc-drug-class-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.dc-drug-class-stat {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--dc-radius-lg);
  padding: 1.1rem 1.5rem;
  min-width: 120px;
  text-align: center;
  transition: background 0.2s;
}

.dc-drug-class-stat:hover {
  background: rgba(255,255,255,0.14);
}

.dc-drug-class-stat strong {
  display: block;
  font-family: var(--dc-font-heading);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.dc-drug-class-stat span {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 0.3rem;
}

.dc-drug-class-stat--total {
  background: rgba(212,168,83,0.2);
  border-color: rgba(212,168,83,0.4);
}

.dc-drug-class-stat--total strong {
  color: var(--dc-gold);
}

/* Drug class description */
.dc-drug-class-desc {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--dc-shadow-sm);
  line-height: 1.75;
  color: var(--dc-text);
  font-size: 0.95rem;
}

.dc-drug-class-desc p:last-child {
  margin-bottom: 0;
}

/* Conditions list */
.dc-drug-class-conditions {
  background: var(--dc-navy-light);
  border-radius: var(--dc-radius-xl);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border: 1px solid var(--dc-border-dark);
}

.dc-drug-class-conditions-title {
  font-family: var(--dc-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dc-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.85rem;
}

.dc-drug-class-conditions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dc-drug-class-conditions ul li {
  background: #fff;
  border: 1px solid var(--dc-border-dark);
  border-radius: 100px;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  color: var(--dc-text);
  font-weight: 500;
}

/* Drug class grid */
.dc-drug-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.dc-drug-class-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  box-shadow: var(--dc-shadow-sm);
  border-left: 3px solid var(--dc-teal);
}

.dc-drug-class-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
  border-left-color: var(--dc-gold);
  background: var(--dc-bg-subtle);
}

.dc-drug-class-card-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dc-navy);
  line-height: 1.3;
  flex: 1;
}

.dc-drug-class-card:hover .dc-drug-class-card-name {
  color: var(--dc-teal-dark);
}

.dc-drug-class-card-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dc-teal);
  background: var(--dc-teal-light);
  border-radius: 100px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-drug-class-card:hover .dc-drug-class-card-count {
  background: var(--dc-teal);
  color: #fff;
}


/* ============================================================
   24. STATE PAGES (state.php)
   ============================================================ */

.dc-state-hero {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  padding: 2.5rem 2.5rem 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  overflow: hidden;
  border-radius: var(--dc-radius-xl);
}

.dc-state-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dc-gold) 0%, var(--dc-teal) 100%);
}

.dc-state-hero-title {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.dc-state-hero-sub {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  margin: 0;
  line-height: 1.6;
}

/* Stat grid */
.dc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.dc-stat-grid--state {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dc-stat-box {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  padding: 1.4rem 1.25rem;
  text-align: center;
  box-shadow: var(--dc-shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dc-stat-box:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-stat-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 0.1rem;
}

.dc-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dc-teal);
  line-height: 1;
  display: block;
}

.dc-stat-label {
  font-size: 0.75rem;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* States grid */
.dc-states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.dc-states-grid--full {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.dc-state-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: var(--dc-shadow-sm);
  border-top: 3px solid transparent;
}

.dc-state-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
  border-top-color: var(--dc-teal);
}

.dc-state-card-code {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--dc-teal);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dc-state-card-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--dc-navy);
  line-height: 1.3;
}

.dc-state-card:hover .dc-state-card-name {
  color: var(--dc-teal-dark);
}

.dc-state-card-plans {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
}

.dc-state-card-premium {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dc-green);
  margin-top: 0.2rem;
}


/* ============================================================
   25. RANKINGS PAGE (rankings.php)
   ============================================================ */

.dc-rankings-page {
  padding: 2rem 0 4rem;
}

.dc-rankings-header {
  text-align: center;
  padding: 3rem 1rem 2rem;
  margin-bottom: 2rem;
}

.dc-rankings-header h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--dc-navy);
  margin: 0 0 0.5rem;
}

.dc-rankings-header p {
  color: var(--dc-text-muted);
  font-size: 1rem;
  margin: 0;
}

.dc-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--dc-bg-subtle);
  border-radius: var(--dc-radius-lg);
  border: 1px solid var(--dc-border);
}

.dc-filter-btn {
  padding: 0.4rem 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--dc-border-dark);
  border-radius: 100px;
  color: var(--dc-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}

.dc-filter-btn:hover {
  border-color: var(--dc-teal);
  color: var(--dc-teal);
  background: var(--dc-teal-light);
}

.dc-filter-btn--active {
  background: var(--dc-teal);
  color: #fff;
  border-color: var(--dc-teal);
}

.dc-rankings-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dc-rankings-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-xl);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  box-shadow: var(--dc-shadow-sm);
  text-decoration: none;
  transition: all 0.2s;
}

.dc-rankings-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dc-teal);
}

.dc-rankings-rank {
  font-family: var(--dc-font-heading);
  font-size: 2rem;
  font-weight: 900;
  color: var(--dc-navy-light);
  min-width: 3rem;
  text-align: center;
  flex-shrink: 0;
}

.dc-rankings-card:nth-child(1) .dc-rankings-rank { color: var(--dc-gold); }
.dc-rankings-card:nth-child(2) .dc-rankings-rank { color: #94a3b8; }
.dc-rankings-card:nth-child(3) .dc-rankings-rank { color: #cd7f32; }


/* ============================================================
   26. COMPARE CTA BANNER
   ============================================================ */

.dc-compare-cta-banner {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  padding: 2.5rem 0;
  margin: 2.5rem 0;
  border-radius: var(--dc-radius-xl);
  position: relative;
  overflow: hidden;
}

.dc-compare-cta-banner::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  pointer-events: none;
}

.dc-compare-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
  padding: 0 2rem;
}

.dc-compare-cta-text h2 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.35rem;
}

.dc-compare-cta-text p {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
  margin: 0;
}


/* ============================================================
   27. BROWSE GRIDS (homepage)
   ============================================================ */

.dc-browse-section {
  padding: 3rem 0;
}

.dc-state-section {
  padding: 3rem 0;
  background: var(--dc-bg-subtle);
}

.dc-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.dc-browse-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1rem 1.1rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  transition: all 0.2s;
  box-shadow: var(--dc-shadow-sm);
}

.dc-browse-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dc-teal);
  background: var(--dc-teal-light);
}

.dc-browse-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--dc-navy);
  line-height: 1.3;
}

.dc-browse-card:hover .dc-browse-name {
  color: var(--dc-teal-dark);
}

.dc-browse-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--dc-teal);
  background: var(--dc-teal-light);
  border-radius: 100px;
  padding: 0.15rem 0.55rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.dc-browse-card:hover .dc-browse-count {
  background: var(--dc-teal);
  color: #fff;
}

/* State grid (homepage variant) */
.dc-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.dc-state-link {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 0.65rem 0.9rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: all 0.2s;
  box-shadow: var(--dc-shadow-sm);
}

.dc-state-link:hover {
  box-shadow: var(--dc-shadow-md);
  border-color: var(--dc-teal);
  background: var(--dc-teal-light);
  transform: translateY(-1px);
}

.dc-state-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dc-navy);
}

.dc-state-link:hover .dc-state-name {
  color: var(--dc-teal-dark);
}

.dc-state-count {
  font-size: 0.72rem;
  color: var(--dc-text-muted);
}

.dc-state-link-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--dc-teal);
  text-decoration: none;
  transition: color 0.2s;
}

.dc-state-link-all:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}


/* ============================================================
   28. FAQ ACCORDION
   ============================================================ */

.dc-faq-section {
  padding: 3rem 0;
}

.dc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 860px;
  margin: 0 auto;
}

.dc-faq-item {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.dc-faq-item:hover {
  box-shadow: var(--dc-shadow-sm);
}

.dc-faq-item--open {
  border-color: var(--dc-teal);
  box-shadow: var(--dc-shadow-sm);
}

.dc-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--dc-font);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dc-navy);
  cursor: pointer;
  transition: background 0.2s;
}

.dc-faq-question:hover {
  background: var(--dc-bg-subtle);
}

.dc-faq-item--open .dc-faq-question {
  color: var(--dc-teal-dark);
  background: var(--dc-teal-light);
}

.dc-faq-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--dc-text-muted);
  transition: transform 0.25s ease, color 0.2s;
}

.dc-faq-item--open .dc-faq-chevron {
  transform: rotate(180deg);
  color: var(--dc-teal);
}

.dc-faq-answer {
  display: none;
  padding: 0 1.25rem 1.1rem;
  font-size: 0.9rem;
  color: var(--dc-text);
  line-height: 1.75;
}

.dc-faq-answer p:last-child {
  margin-bottom: 0;
}

.dc-faq-item--open .dc-faq-answer {
  display: block;
}


/* ============================================================
   29. BREADCRUMBS (CRITICAL FIX)
   ============================================================ */

.dc-breadcrumb {
  padding: 0.6rem 0;
  margin-bottom: 0.5rem;
}

.dc-breadcrumb-list {
  list-style: none;   /* CRITICAL: removes numbered list */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}

.dc-breadcrumb-list li {
  display: inline-flex;
  align-items: center;
  color: var(--dc-text-muted);
}

.dc-breadcrumb-list li a {
  color: var(--dc-teal);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.dc-breadcrumb-list li a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

/* Current page — last crumb */
.dc-breadcrumb-list li[aria-current="page"] {
  color: var(--dc-text);
  font-weight: 600;
}

/* Separator items */
.dc-breadcrumb-list li[aria-hidden="true"] {
  margin: 0 0.35rem;
  color: var(--dc-border-dark);
  font-size: 0.75rem;
  user-select: none;
}


/* ============================================================
   30. STATIC PAGES
   ============================================================ */

.dc-static-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1rem 5rem;
  color: var(--dc-text);
  font-size: 1rem;
  line-height: 1.75;
}

.dc-static-page h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--dc-navy);
  margin: 0 0 1rem;
  line-height: 1.2;
  border-bottom: 3px solid var(--dc-teal-light);
  padding-bottom: 0.75rem;
}

.dc-static-page h2 {
  font-family: var(--dc-font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 2.5rem 0 0.75rem;
  padding-left: 0.85rem;
  border-left: 4px solid var(--dc-teal);
}

.dc-static-page h3 {
  font-family: var(--dc-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dc-text);
  margin: 2rem 0 0.5rem;
}

.dc-static-page p {
  margin: 0 0 1.25rem;
}

.dc-static-page ul,
.dc-static-page ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}

.dc-static-page ul li,
.dc-static-page ol li {
  margin-bottom: 0.4rem;
}

.dc-static-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

.dc-static-page table th {
  background: var(--dc-navy-light);
  color: var(--dc-navy);
  font-weight: 700;
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 2px solid var(--dc-border-dark);
}

.dc-static-page table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--dc-border);
  vertical-align: top;
}

.dc-static-page table tbody tr:hover td {
  background: var(--dc-bg-subtle);
}

.dc-disclaimer-section {
  background: var(--dc-bg-grey);
  border-top: 1px solid var(--dc-border);
  padding: 2.5rem 0;
  margin-top: 2rem;
}

.dc-disclaimer-inner {
  max-width: 860px;
  margin: 0 auto;
  font-size: 0.82rem;
  color: var(--dc-text-muted);
  line-height: 1.7;
}

.dc-disclaimer-inner strong {
  color: var(--dc-text);
}


/* ============================================================
   31. ERROR PAGES
   ============================================================ */

.dc-error-page {
  min-height: 55vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5rem 1.5rem;
}

.dc-error-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 1.25rem;
  opacity: 0.85;
}

.dc-error-title {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--dc-navy);
  margin: 0 0 0.75rem;
}

.dc-error-text {
  color: var(--dc-text-muted);
  font-size: 1rem;
  max-width: 480px;
  line-height: 1.7;
  margin: 0 0 2rem;
}

.dc-error-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}


/* ============================================================
   32. AFFILIATE & AD COMPONENTS
   ============================================================ */

.dc-affiliate-disclaimer {
  font-size: 0.75rem;
  color: var(--dc-text-light);
  border-top: 1px dashed var(--dc-border);
  padding-top: 0.6rem;
  margin-top: 0.75rem;
  line-height: 1.6;
}

.dc-affiliate-cta {
  border-radius: var(--dc-radius-lg);
  border: 1px solid var(--dc-border);
  overflow: hidden;
}

/* Compact CTA */
.dc-cta-compact {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  background: var(--dc-navy-light);
}

/* Inline CTA */
.dc-cta-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--dc-bg-subtle);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  flex-wrap: wrap;
}

/* Standard CTA */
.dc-cta-standard {
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--dc-radius-xl);
  border: 1px solid var(--dc-border);
  box-shadow: var(--dc-shadow-sm);
  text-align: center;
}

/* Large CTA */
.dc-cta-large {
  padding: 2.5rem 2rem;
  background: linear-gradient(135deg, var(--dc-navy-light) 0%, #fff 100%);
  border-radius: var(--dc-radius-xl);
  border: 1px solid var(--dc-border-dark);
  text-align: center;
  box-shadow: var(--dc-shadow-md);
}

/* Ad units */
.dc-ad-unit {
  text-align: center;
  padding: 0.75rem;
  background: var(--dc-bg-grey);
  border-radius: var(--dc-radius);
  border: 1px dashed var(--dc-border-dark);
  overflow: hidden;
}

.dc-amazon-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: box-shadow 0.2s;
}

.dc-amazon-card:hover {
  box-shadow: var(--dc-shadow-md);
}

.dc-amazon-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}


/* ============================================================
   33. FOOTER (PREMIUM)
   ============================================================ */

.dc-footer {
  background: linear-gradient(160deg, var(--dc-navy-dark) 0%, #0d1f3c 50%, #0a1929 100%);
  border-top: 4px solid var(--dc-gold);
  padding: 4rem 0 0;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
  line-height: 1.75;
  position: relative;
  overflow: hidden;
}

.dc-footer::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(12,124,137,0.12) 0%, transparent 65%);
  pointer-events: none;
}

.dc-footer::after {
  content: '';
  position: absolute;
  bottom: 60px;
  left: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(212,168,83,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* Footer grid */
.dc-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
  position: relative;
  z-index: 1;
  padding-bottom: 3rem;
}

.dc-footer-col {
  min-width: 0;
}

.dc-footer-brand {
  /* first column */
}

.dc-footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-bottom: 1rem;
}

.dc-logo-text--light {
  font-family: var(--dc-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}

.dc-logo-text--light span {
  color: var(--dc-gold);
}

.dc-footer-tagline {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  margin: 0 0 1rem;
  max-width: 280px;
  line-height: 1.7;
}

.dc-footer-source {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--dc-radius);
  padding: 0.3rem 0.7rem;
}

/* Footer column headings */
.dc-footer-heading {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dc-gold);
  margin: 0 0 1.1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(212,168,83,0.25);
}

/* Footer link lists */
.dc-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dc-footer-links li a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.dc-footer-links li a:hover {
  color: var(--dc-gold);
}

.dc-footer-links li a::before {
  content: '›';
  color: var(--dc-teal);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Disclaimer note in footer */
.dc-footer-disclaimer-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  line-height: 1.7;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Footer bottom bar — inside .container */
.dc-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  position: relative;
  z-index: 1;
}

.dc-footer-bottom-left {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}

.dc-footer-bottom-center {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.dc-footer-bottom-center a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color 0.2s;
}

.dc-footer-bottom-center a:hover {
  color: var(--dc-gold);
}

.dc-footer-bottom-right {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.3);
}


/* ============================================================
   34. PRINT STYLES
   ============================================================ */

@media print {
  /* Hide non-essential elements */
  .dc-navbar,
  .dc-footer,
  .dc-compare-cta-banner,
  .dc-medicare-cta,
  .dc-bottom-cta,
  .dc-ad-insert,
  .dc-ad-unit,
  .dc-coverage-toggle,
  .dc-sort-bar,
  .dc-print-bar,
  .dc-filter-bar,
  .dc-affiliate-cta,
  .dc-cta-insert {
    display: none !important;
  }

  /* Page setup */
  body {
    font-size: 11pt;
    color: #000;
    background: #fff;
    line-height: 1.5;
  }

  .dc-container {
    max-width: 100%;
    padding: 0;
  }

  /* Plan cards for print */
  .dc-plan-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
    border-left: 4px solid #0c7c89;
    margin-bottom: 1rem;
    transform: none;
  }

  .dc-plan-card-best {
    border-left-color: #15803d;
  }

  .dc-best-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #d4a853 !important;
    color: #fff !important;
  }

  .dc-cost-amount {
    color: #15803d !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Tables */
  .dc-coverage-table,
  .dc-state-coverage-table {
    break-inside: auto;
    font-size: 9pt;
  }

  .dc-coverage-table tr,
  .dc-state-coverage-table tr {
    break-inside: avoid;
  }

  /* Show print bar instead */
  .dc-print-bar {
    display: flex !important;
    background: #f5f5f5 !important;
    border: 1px solid #ccc;
    font-size: 9pt;
    color: #555;
  }

  /* Results header */
  .dc-results-h1 {
    font-size: 18pt;
  }
}


/* ============================================================
   35. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ---- 1200px: subtle container / grid tweaks ---- */
@media (max-width: 1200px) {
  .dc-drug-content-grid {
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
  }

  .dc-footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
  }

  .dc-plan-stats-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ---- 992px: tablet ---- */
@media (max-width: 992px) {
  /* Drug page */
  .dc-drug-content-grid {
    grid-template-columns: 1fr;
  }

  .dc-drug-sidebar-col {
    position: static;
  }

  /* Footer */
  .dc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .dc-footer-brand {
    grid-column: 1 / -1;
  }

  /* Card header */
  .dc-card-header {
    flex-wrap: wrap;
  }

  .dc-cost-summary {
    text-align: left;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dc-border);
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }

  /* State pages */
  .dc-states-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  .dc-stat-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  /* Compare CTA */
  .dc-compare-cta-inner {
    flex-direction: column;
    text-align: center;
    padding: 0 1.25rem;
  }

  /* Plan header card */
  .dc-plan-header-card {
    flex-direction: column;
    gap: 1.25rem;
  }

  /* Footer bottom */
  .dc-footer-bottom .dc-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* ---- 768px: small tablet ---- */
@media (max-width: 768px) {
  /* Results */
  .dc-results-header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .dc-card-header {
    padding: 1rem;
    gap: 0.75rem;
  }

  .dc-plan-rank {
    font-size: 1.75rem;
    min-width: 2rem;
  }

  .dc-cost-amount {
    font-size: 1.6rem;
  }

  .dc-plan-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .dc-plan-footer-stats {
    gap: 1rem;
  }

  /* Coverage stat bar */
  .dc-coverage-stat-bar {
    gap: 1rem;
  }

  .dc-cov-stat-num {
    font-size: 1.3rem;
  }

  /* Drug class header */
  .dc-drug-class-header {
    padding: 2.5rem 0 2rem;
  }

  .dc-drug-class-header-text h1 {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }

  .dc-drug-class-stats {
    gap: 0.85rem;
  }

  .dc-drug-class-stat {
    padding: 0.85rem 1rem;
    min-width: 90px;
  }

  .dc-drug-class-stat strong {
    font-size: 1.5rem;
  }

  .dc-drug-class-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }

  /* Footer */
  .dc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  /* State hero */
  .dc-state-hero {
    padding: 2rem 0 1.75rem;
  }

  /* Browse grids */
  .dc-browse-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .dc-state-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* Rankings */
  .dc-rankings-card {
    padding: 1rem;
    gap: 0.75rem;
  }

  .dc-rankings-rank {
    font-size: 1.5rem;
    min-width: 2rem;
  }

  /* Medicare CTA */
  .dc-medicare-cta {
    padding: 2rem 1.25rem;
  }

  .dc-medicare-cta-actions {
    flex-direction: column;
  }

  .dc-cta-btn-white,
  .dc-cta-btn-ghost {
    text-align: center;
    justify-content: center;
  }

  /* Static page */
  .dc-static-page {
    padding: 2rem 1rem 4rem;
  }

  /* Error page */
  .dc-error-page {
    padding: 3rem 1rem;
  }

  /* Breadcrumbs */
  .dc-breadcrumb-list {
    font-size: 0.78rem;
  }
}

/* ---- 576px: phone ---- */
@media (max-width: 576px) {
  /* General spacing reduction */
  .dc-compare-page,
  .dc-drug-page,
  .dc-plan-page,
  .dc-rankings-page {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }

  /* Plan cards */
  .dc-card-header {
    padding: 0.85rem;
  }

  .dc-plan-name {
    font-size: 0.95rem;
  }

  .dc-cost-amount {
    font-size: 1.4rem;
  }

  .dc-cost-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }

  .dc-plan-footer {
    padding: 0.65rem 0.85rem;
  }

  .dc-plan-footer-stats {
    gap: 0.75rem;
  }

  /* Sort bar */
  .dc-sort-bar {
    gap: 0.5rem;
  }

  .dc-sort-btn {
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
  }

  /* Drug class page */
  .dc-drug-class-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }

  .dc-drug-class-card {
    padding: 0.85rem 0.9rem;
  }

  .dc-drug-class-card-name {
    font-size: 0.82rem;
  }

  .dc-drug-class-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .dc-drug-class-stat {
    flex: 1;
    min-width: 80px;
  }

  /* State pages */
  .dc-states-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
  }

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

  /* Footer */
  .dc-footer {
    padding: 2.5rem 0 0;
  }

  .dc-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .dc-footer-brand {
    grid-column: auto;
  }

  /* Browse grids */
  .dc-browse-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dc-state-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Plan stats */
  .dc-plan-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Coverage stat bar */
  .dc-coverage-stat-bar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .dc-cov-stat {
    flex: 1;
    min-width: 70px;
  }

  /* Coverage table */
  .dc-coverage-table-wrap {
    padding: 0 0.75rem 1rem;
  }

  /* Drug class conditions */
  .dc-drug-class-conditions {
    padding: 1.1rem 1.25rem;
  }

  /* Rankings */
  .dc-rankings-list {
    gap: 0.75rem;
  }

  /* FAQ */
  .dc-faq-question {
    font-size: 0.9rem;
    padding: 0.9rem 1rem;
  }

  /* Medicare CTA */
  .dc-medicare-cta {
    padding: 1.5rem 1rem;
  }

  /* Compare CTA banner */
  .dc-compare-cta-banner {
    margin: 1.5rem 0;
    border-radius: var(--dc-radius-lg);
  }

  .dc-compare-cta-inner {
    padding: 0 1rem;
  }

  /* Bottom CTA */
  .dc-bottom-cta {
    padding: 1.5rem 1rem;
    border-radius: var(--dc-radius-lg);
  }

  /* Savings callout */
  .dc-savings-callout {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Error page */
  .dc-error-icon {
    font-size: 3rem;
  }

  .dc-error-actions {
    flex-direction: column;
    width: 100%;
  }

  .dc-error-actions .dc-btn {
    width: 100%;
    justify-content: center;
  }

  /* Breadcrumbs */
  .dc-breadcrumb {
    padding: 0.4rem 0;
  }

  .dc-breadcrumb-list {
    font-size: 0.75rem;
  }

  /* Amazon products */
  .dc-amazon-products {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   36. DARK SECTION TEXT CONTRAST FIX
   Targeted rules — NOT wildcards — so white child cards keep dark text.
   ============================================================ */

/* --- Hero: only direct hero text, NOT the tool card --- */
.dc-hero {
  color: #fff;
}

.dc-hero > .container > .dc-hero-content,
.dc-hero > .container > .dc-hero-content * {
  color: #fff;
}

.dc-hero-h1 {
  color: #fff !important;
}

.dc-hero-subtitle {
  color: rgba(255, 255, 255, 0.9) !important;
}

.dc-hero-subtitle strong,
.dc-hero-subtitle em {
  color: #fff;
}

/* Reset tool card back to dark text — override any hero inheritance */
.dc-tool-card,
.dc-tool-card * {
  color: var(--dc-text);
}

.dc-tool-card .dc-step-label {
  color: var(--dc-text) !important;
}

.dc-tool-card .dc-step-num {
  color: #fff !important;
}

.dc-tool-card .dc-input {
  color: var(--dc-text) !important;
  background: #fff !important;
}

.dc-tool-card .dc-input::placeholder {
  color: var(--dc-text-light) !important;
}

.dc-tool-card .dc-field-error {
  color: var(--dc-red) !important;
}

.dc-tool-card .dc-form-help {
  color: var(--dc-text-muted) !important;
}

.dc-tool-card .dc-form-help svg {
  stroke: var(--dc-text-muted) !important;
}

.dc-tool-card .dc-popular-label {
  color: var(--dc-text-muted) !important;
}

.dc-tool-card .dc-quick-pill {
  color: var(--dc-text) !important;
  background: var(--dc-bg-grey) !important;
  border-color: var(--dc-border) !important;
}

.dc-tool-card .dc-quick-pill:hover {
  color: var(--dc-teal) !important;
  border-color: var(--dc-teal) !important;
  background: var(--dc-teal-light) !important;
}

.dc-tool-card .dc-quick-pill--added {
  background: var(--dc-green-light) !important;
  color: var(--dc-green) !important;
  border-color: var(--dc-green) !important;
}

.dc-tool-card .dc-drug-pill {
  color: #fff !important;
}

.dc-tool-card .dc-drug-pill-remove {
  color: rgba(255,255,255,0.7) !important;
}

.dc-tool-card .dc-zip-location {
  color: var(--dc-green) !important;
}

.dc-tool-card .btn,
.dc-tool-card .dc-btn-secondary {
  color: #fff !important;
}

/* --- Dark gradient card sections: targeted, not wildcard --- */
.dc-plan-header-card {
  color: #fff;
}

.dc-plan-header-card h1,
.dc-plan-header-card .dc-plan-title,
.dc-plan-header-card .dc-plan-page-h1 {
  color: #fff !important;
}

.dc-plan-header-card p,
.dc-plan-header-card .dc-plan-org {
  color: rgba(255, 255, 255, 0.85) !important;
}

.dc-plan-header-card .dc-plan-meta {
  color: rgba(255, 255, 255, 0.9);
}

.dc-plan-header-card .dc-badge {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

.dc-plan-header-card .dc-stars .dc-star {
  color: var(--dc-gold) !important;
}

.dc-plan-header-card .dc-rating-label {
  color: #fff !important;
}

.dc-plan-header-card .dc-rating-source {
  color: rgba(255, 255, 255, 0.65) !important;
}

.dc-plan-header-card svg {
  stroke: #fff;
}

/* Drug class header */
.dc-drug-class-header {
  color: #fff;
}

.dc-drug-class-header h1,
.dc-drug-class-header .dc-page-h1,
.dc-drug-class-header h2,
.dc-drug-class-header h3 {
  color: #fff !important;
}

.dc-drug-class-header p,
.dc-drug-class-header span {
  color: rgba(255, 255, 255, 0.88);
}

.dc-drug-class-header a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.4);
}

.dc-drug-class-header a:hover {
  text-decoration-color: #fff;
}

.dc-drug-class-header svg {
  stroke: rgba(255, 255, 255, 0.8);
}

/* State hero */
.dc-state-hero {
  color: #fff;
}

.dc-state-hero h1,
.dc-state-hero .dc-state-hero-title {
  color: #fff !important;
}

.dc-state-hero p,
.dc-state-hero .dc-state-hero-sub {
  color: rgba(255, 255, 255, 0.88) !important;
}

.dc-state-hero a {
  color: #fff;
}

.dc-state-hero svg {
  stroke: rgba(255, 255, 255, 0.7);
}

/* CTA banners */
.dc-medicare-cta,
.dc-compare-cta-banner {
  color: #fff;
}

.dc-medicare-cta h2,
.dc-medicare-cta h3,
.dc-medicare-cta strong,
.dc-compare-cta-banner strong,
.dc-compare-cta-inner strong,
.dc-medicare-cta-title,
.dc-compare-cta-text strong {
  color: #fff !important;
}

.dc-medicare-cta p,
.dc-medicare-cta span,
.dc-compare-cta-banner span,
.dc-compare-cta-inner span,
.dc-compare-cta-text span,
.dc-medicare-cta-text {
  color: rgba(255, 255, 255, 0.88) !important;
}

.dc-compare-cta-banner a,
.dc-medicare-cta a {
  color: #fff;
}

/* --- Plan page: fix class-name mismatches --- */
/* Template uses .dc-plan-title, CSS had .dc-plan-page-h1 */
.dc-plan-title,
.dc-plan-header-card h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: #fff !important;
  margin: 0 0 0.5rem;
  line-height: 1.25;
}

/* Template uses .dc-plan-header-inner, .dc-plan-header-text */
.dc-plan-header-inner {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
}

.dc-plan-header-text {
  flex: 1;
  min-width: 0;
}

.dc-plan-header-rating {
  text-align: center;
  flex-shrink: 0;
}

.dc-plan-header-rating .dc-stars {
  margin-bottom: 0.35rem;
}

.dc-rating-label {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.dc-rating-source {
  font-size: 0.8rem;
  opacity: 0.7;
  margin: 0;
}

/* .dc-plan-meta inside dark card */
.dc-plan-header-card .dc-plan-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.dc-plan-header-card .dc-plan-org {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
  opacity: 0.85;
}

/* --- Drug class page: template class fixes --- */
.dc-drug-class-header .dc-page-h1 {
  color: #fff !important;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
}

.dc-drug-class-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.dc-drug-class-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.35rem 0.85rem;
  border-radius: var(--dc-radius-pill);
}

.dc-drug-class-stat svg {
  width: 16px;
  height: 16px;
}

.dc-drug-class-stat--total {
  background: rgba(212, 168, 83, 0.2);
  color: var(--dc-gold-light) !important;
}

/* Drug class description card */
.dc-drug-class-desc {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--dc-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  border-left: 3px solid var(--dc-gold);
}

.dc-drug-class-desc p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Drug class conditions */
.dc-drug-class-conditions {
  margin-top: 1.25rem;
}

.dc-drug-class-conditions-title {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

/* --- State page hero text fixes --- */
.dc-state-hero .dc-stat-grid {
  margin-top: 1.5rem;
}

.dc-state-hero .dc-stat-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--dc-radius-lg);
  padding: 1rem;
  text-align: center;
}

.dc-state-hero .dc-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff !important;
}

.dc-state-hero .dc-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dc-state-hero .dc-stat-icon {
  margin-bottom: 0.35rem;
}

.dc-state-hero .dc-stat-icon svg {
  width: 20px;
  height: 20px;
  stroke: rgba(255, 255, 255, 0.6) !important;
}

/* --- Stat grid (used outside hero too) --- */
.dc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.dc-stat-grid--state {
  grid-template-columns: repeat(3, 1fr);
}

/* Stat box outside dark sections (normal white bg) */
.dc-page-wrap > .dc-stat-grid .dc-stat-box,
.dc-section > .dc-stat-grid .dc-stat-box {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--dc-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.dc-page-wrap > .dc-stat-grid .dc-stat-box:hover,
.dc-section > .dc-stat-grid .dc-stat-box:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-page-wrap > .dc-stat-grid .dc-stat-value,
.dc-section > .dc-stat-grid .dc-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dc-teal);
}

.dc-page-wrap > .dc-stat-grid .dc-stat-label,
.dc-section > .dc-stat-grid .dc-stat-label {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.dc-page-wrap > .dc-stat-grid .dc-stat-icon svg,
.dc-section > .dc-stat-grid .dc-stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--dc-teal);
}

/* --- Tone down decorative effects (remove AI look) --- */
/* Remove radial glow decorations */
.dc-drug-class-header::before,
.dc-drug-class-header::after,
.dc-state-hero::after,
.dc-medicare-cta::before,
.dc-medicare-cta::after,
.dc-compare-cta-banner::before,
.dc-footer::before,
.dc-footer::after {
  display: none !important;
}

/* Clean hero — no dot-grid pattern */
.dc-hero::before {
  display: none !important;
}

/* Simplify gold bar under hero */
.dc-hero::after {
  background: var(--dc-gold);
  height: 3px;
  opacity: 0.5;
}

/* Footer colors are set in section 33 — no overrides needed here */

/* ============================================================
   36b. GLOBAL VISIBILITY FIXES
   Fixes all invisible text/icons across every page.
   ============================================================ */

/* Step icons — icon stroke was invisible (teal on teal) */
.dc-step-icon {
  background: var(--dc-navy-light) !important;
  border: 2px solid var(--dc-navy) !important;
}

.dc-step-icon svg {
  stroke: var(--dc-navy) !important;
  width: 28px !important;
  height: 28px !important;
}

/* "Add" button on homepage — was white on light */
.dc-tool-card .dc-btn-secondary,
.dc-tool-card .btn.dc-btn-secondary,
#add-drug-btn {
  background: var(--dc-teal) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--dc-radius) !important;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
}

.dc-tool-card .dc-btn-secondary:hover,
#add-drug-btn:hover {
  background: var(--dc-teal-dark) !important;
}

.dc-tool-card .dc-btn-secondary:disabled,
#add-drug-btn:disabled {
  background: var(--dc-border) !important;
  color: var(--dc-text-light) !important;
  cursor: not-allowed;
}

#add-drug-btn svg {
  stroke: #fff !important;
}

/* Compare Plans button */
#compare-btn {
  background: var(--dc-teal) !important;
  color: #fff !important;
  border: none !important;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: var(--dc-radius-lg) !important;
}

#compare-btn:hover:not(:disabled) {
  background: var(--dc-teal-dark) !important;
}

#compare-btn:disabled {
  background: var(--dc-border) !important;
  color: var(--dc-text-light) !important;
}

/* CTA buttons on methodology, about, etc. — btn-primary visible */
.dc-static-page .btn-primary,
.dc-static-page .dc-btn-primary,
.dc-static-page a.btn {
  background: var(--dc-teal) !important;
  color: #fff !important;
  border-color: var(--dc-teal) !important;
  border-radius: var(--dc-radius);
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}

.dc-static-page .btn-primary:hover,
.dc-static-page .dc-btn-primary:hover,
.dc-static-page a.btn:hover {
  background: var(--dc-teal-dark) !important;
}

/* Bootstrap btn-primary override — site-wide */
.btn-primary {
  background-color: var(--dc-teal) !important;
  border-color: var(--dc-teal) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--dc-teal-dark) !important;
  border-color: var(--dc-teal-dark) !important;
}

/* Bootstrap form-control — ensure readable */
.form-control,
.form-select {
  font-family: var(--dc-font);
  font-size: 0.95rem;
  color: var(--dc-text);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 0.6rem 0.85rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dc-teal);
  box-shadow: 0 0 0 3px rgba(12, 124, 137, 0.15);
}

.form-label {
  color: var(--dc-text);
  font-weight: 600;
  font-size: 0.9rem;
}

/* Contact page — style override (uses Bootstrap inline styles) */
section[style*="background:linear-gradient"] {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%) !important;
  border-radius: 0;
}

section[style*="background:linear-gradient"] h1 {
  color: #fff !important;
}

section[style*="background:linear-gradient"] p {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Card styling for contact/static pages using Bootstrap .card */
.card {
  border: 1px solid var(--dc-border) !important;
  border-radius: var(--dc-radius-lg) !important;
  box-shadow: var(--dc-shadow-sm) !important;
}

/* Browse section — state section background */
.dc-state-section {
  background: var(--dc-bg-subtle);
  padding: 3rem 0;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

/* States grid on state browse page */
.dc-states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.dc-states-grid--full {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.dc-state-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.dc-state-card:hover {
  border-color: var(--dc-teal);
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-state-card-code {
  font-family: var(--dc-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dc-navy);
}

.dc-state-card-name {
  font-weight: 600;
  color: var(--dc-text);
  font-size: 0.9rem;
}

.dc-state-card-plans {
  font-size: 0.78rem;
  color: var(--dc-teal);
  font-weight: 600;
}

.dc-state-card-premium {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
}

/* FAQ accordion — ensure question text is visible */
.dc-faq-item {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  overflow: hidden;
}

.dc-faq-item + .dc-faq-item {
  margin-top: 0.5rem;
}

.dc-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dc-text) !important;
  text-align: left;
  font-family: var(--dc-font);
}

.dc-faq-question:hover {
  color: var(--dc-teal) !important;
}

.dc-faq-chevron {
  flex-shrink: 0;
  transition: transform 0.3s;
}

.dc-faq-item--open .dc-faq-chevron {
  transform: rotate(180deg);
}

.dc-faq-answer {
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  color: var(--dc-text-muted);
  line-height: 1.75;
}


/* ============================================================
   37. DRUG PAGE — Actual template classes (drug.php)
   The drug.php template uses different classes than originally planned.
   This section styles every component actually used.
   ============================================================ */

/* Drug identity card */
.dc-drug-identity {
  margin-bottom: 2rem;
}

.dc-drug-id-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
}

.dc-drug-id-main {
  min-width: 0;
}

.dc-drug-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 800;
  color: var(--dc-navy);
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.dc-drug-strength {
  display: inline-block;
  font-size: 0.6em;
  font-weight: 500;
  color: var(--dc-text-muted);
  margin-left: 0.4rem;
  vertical-align: middle;
}

.dc-drug-subhead {
  display: block;
  font-size: 0.45em;
  font-weight: 400;
  color: var(--dc-text-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.02em;
}

.dc-drug-brand-label {
  font-size: 0.9rem;
  color: var(--dc-text-muted);
  margin: 0 0 1rem;
}

.dc-drug-brand-label strong {
  color: var(--dc-text);
}

/* Drug meta list (dl) */
.dc-drug-meta-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  margin: 0;
  padding: 0;
}

.dc-dm-item {
  display: flex;
  gap: 0.4rem;
  font-size: 0.88rem;
}

.dc-dm-item dt {
  font-weight: 600;
  color: var(--dc-text-muted);
}

.dc-dm-item dt::after {
  content: ':';
}

.dc-dm-item dd {
  margin: 0;
  color: var(--dc-text);
}

.dc-dm-item dd a {
  color: var(--dc-teal);
  text-decoration: none;
  font-weight: 500;
}

.dc-dm-item dd a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

/* Drug tags */
.dc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--dc-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dc-tag-generic {
  background: var(--dc-green-light);
  color: var(--dc-green);
}

.dc-tag-brand {
  background: var(--dc-blue-light);
  color: var(--dc-blue);
}

.dc-tag-specialty {
  background: var(--dc-purple-light);
  color: var(--dc-purple);
}

/* Coverage stat card (big percentage circle) */
.dc-coverage-stat-card {
  text-align: center;
  padding: 1.5rem 2rem;
  border-radius: var(--dc-radius-xl);
  min-width: 160px;
  flex-shrink: 0;
}

.dc-coverage-stat-card.dc-stat-green {
  background: var(--dc-green-light);
  border: 2px solid var(--dc-green);
}

.dc-coverage-stat-card.dc-stat-yellow {
  background: var(--dc-warning-light);
  border: 2px solid var(--dc-warning);
}

.dc-coverage-stat-card.dc-stat-red {
  background: var(--dc-red-light);
  border: 2px solid var(--dc-red);
}

.dc-cov-pct {
  font-family: var(--dc-font-heading);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.dc-stat-green .dc-cov-pct { color: var(--dc-green); }
.dc-stat-yellow .dc-cov-pct { color: var(--dc-warning); }
.dc-stat-red .dc-cov-pct { color: var(--dc-red); }

.dc-cov-label {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
  line-height: 1.4;
}

.dc-cov-count {
  font-size: 0.75rem;
  color: var(--dc-text-light);
  margin-top: 0.35rem;
}

/* Stats row (4 stat cards) */
.dc-stats-row {
  margin-bottom: 2.5rem;
}

.dc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.dc-stat-card {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--dc-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.dc-stat-card:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-stat-card .dc-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--dc-teal);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.dc-stat-card .dc-stat-label {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  font-weight: 500;
}

.dc-stat-card-warn {
  border-color: var(--dc-warning);
}

.dc-stat-card-warn .dc-stat-value {
  color: var(--dc-warning);
}

/* Tier distribution section */
.dc-tier-section {
  margin-bottom: 2.5rem;
}

.dc-tier-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dc-tier-bar-item {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 1rem 1.25rem;
}

.dc-tier-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.dc-tier-name {
  font-weight: 600;
  color: var(--dc-text);
  font-size: 0.9rem;
}

.dc-tier-pct {
  font-family: var(--dc-font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dc-teal);
}

.dc-tier-bar-track {
  height: 10px;
  background: var(--dc-bg-grey);
  border-radius: 5px;
  overflow: hidden;
}

.dc-tier-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: var(--dc-teal);
  transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dc-bar-warning { background: var(--dc-warning); }
.dc-bar-info { background: var(--dc-blue); }

/* Tier bar colors by tier */
.dc-tier-bar-1 .dc-tier-bar-fill { background: #2563eb; }
.dc-tier-bar-2 .dc-tier-bar-fill { background: var(--dc-teal); }
.dc-tier-bar-3 .dc-tier-bar-fill { background: var(--dc-green); }
.dc-tier-bar-4 .dc-tier-bar-fill { background: var(--dc-warning); }
.dc-tier-bar-5 .dc-tier-bar-fill { background: #ef4444; }
.dc-tier-bar-6 .dc-tier-bar-fill { background: var(--dc-purple); }

.dc-tier-bar-meta {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--dc-text-muted);
}

/* Restrictions section */
.dc-restrictions-section {
  margin-bottom: 2.5rem;
}

.dc-restriction-bars {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dc-rest-item {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  padding: 1rem 1.25rem;
}

.dc-rest-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.dc-rest-abbr {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--dc-radius-pill);
  text-decoration: none;
  cursor: help;
}

.dc-rest-abbr.dc-r-pa { background: #fff7ed; color: var(--dc-warning); border: 1px solid var(--dc-warning); }
.dc-rest-abbr.dc-r-st { background: var(--dc-purple-light); color: var(--dc-purple); border: 1px solid var(--dc-purple); }
.dc-rest-abbr.dc-r-ql { background: var(--dc-blue-light); color: var(--dc-blue); border: 1px solid var(--dc-blue); }

.dc-rest-name {
  font-weight: 600;
  color: var(--dc-text);
  font-size: 0.9rem;
}

.dc-rest-pct {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--dc-text-muted);
}

.dc-rest-desc {
  font-size: 0.82rem;
  color: var(--dc-text-muted);
  margin: 0.5rem 0 0;
  line-height: 1.6;
}

/* Drug CTA card */
.dc-drug-cta-card {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
}

.dc-drug-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dc-drug-cta-inner h2,
.dc-drug-cta-inner .dc-cta-h2 {
  color: #fff !important;
  font-family: var(--dc-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.dc-drug-cta-inner p {
  color: rgba(255, 255, 255, 0.85) !important;
  margin: 0;
  font-size: 0.9rem;
}

.dc-drug-cta-inner .btn,
.dc-drug-cta-inner .dc-btn-primary {
  background: #fff !important;
  color: var(--dc-navy) !important;
  border: none !important;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.7rem 1.5rem;
  border-radius: var(--dc-radius);
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.dc-drug-cta-inner .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* State coverage grid */
.dc-state-coverage {
  margin-bottom: 2.5rem;
}

.dc-state-cov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.dc-state-cov-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dc-state-cov-card:hover {
  border-color: var(--dc-teal);
  box-shadow: var(--dc-shadow-sm);
}

.dc-scc-name {
  font-weight: 600;
  color: var(--dc-text);
  font-size: 0.88rem;
}

.dc-scc-pct {
  font-family: var(--dc-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
}

.dc-scc-good { color: var(--dc-green); }
.dc-scc-mid { color: var(--dc-warning); }
.dc-scc-low { color: var(--dc-red); }

.dc-scc-copay {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
}

/* Alternative drugs grid */
.dc-alternatives {
  margin-bottom: 2.5rem;
}

.dc-alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.dc-alt-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.dc-alt-card:hover {
  border-color: var(--dc-teal);
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-alt-name {
  font-weight: 700;
  color: var(--dc-navy);
  font-size: 0.95rem;
}

.dc-alt-tier {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
}

.dc-alt-copay {
  font-family: var(--dc-font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dc-teal);
}

.dc-alt-plans {
  font-size: 0.78rem;
  color: var(--dc-text-light);
}

/* Related versions */
.dc-related {
  margin-bottom: 2.5rem;
}

.dc-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dc-related-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--dc-bg-subtle);
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}

.dc-related-item:hover {
  border-color: var(--dc-teal);
  background: var(--dc-teal-light);
}

.dc-rel-name {
  font-weight: 600;
  color: var(--dc-text);
  font-size: 0.85rem;
}

.dc-rel-strength {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
}

/* FAQ on drug page */
.dc-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dc-text);
  text-align: left;
  font-family: var(--dc-font);
  transition: color 0.2s;
}

.dc-faq-q:hover {
  color: var(--dc-teal);
}

.dc-faq-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--dc-text-muted);
  transition: transform 0.3s;
}

.dc-faq-a {
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  color: var(--dc-text-muted);
  line-height: 1.75;
}

.dc-faq-a-hidden {
  display: none;
}

/* Data note at bottom */
.dc-drug-data-note {
  font-size: 0.78rem;
  color: var(--dc-text-light);
  text-align: center;
  margin: 2rem 0 0;
  padding: 1rem;
  border-top: 1px solid var(--dc-border);
}

/* Drug page breadcrumb — uses Bootstrap .breadcrumb classes */
.dc-drug-page .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  gap: 0;
}

.dc-drug-page .breadcrumb-item {
  color: var(--dc-text-muted);
}

.dc-drug-page .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  padding: 0 0.4rem;
  color: var(--dc-border-dark);
}

.dc-drug-page .breadcrumb-item a {
  color: var(--dc-teal);
  text-decoration: none;
  font-weight: 500;
}

.dc-drug-page .breadcrumb-item a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

.dc-drug-page .breadcrumb-item.active {
  color: var(--dc-text);
  font-weight: 600;
}

/* Drug page responsive */
@media (max-width: 768px) {
  .dc-drug-id-grid {
    grid-template-columns: 1fr;
  }

  .dc-coverage-stat-card {
    min-width: auto;
  }

  .dc-drug-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .dc-state-cov-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .dc-alt-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .dc-alt-grid {
    grid-template-columns: 1fr;
  }

  .dc-drug-meta-list {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* --- CTA buttons inside dark sections --- */
.dc-compare-cta-banner .dc-btn,
.dc-medicare-cta .dc-btn,
.dc-compare-cta-inner .dc-btn {
  background: #fff !important;
  color: var(--dc-navy) !important;
  border: none !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.dc-compare-cta-banner .dc-btn:hover,
.dc-medicare-cta .dc-btn:hover,
.dc-compare-cta-inner .dc-btn:hover {
  background: var(--dc-gold-light) !important;
  color: var(--dc-navy) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* --- Responsive fixes for dark section additions --- */
@media (max-width: 768px) {
  .dc-plan-header-inner {
    flex-direction: column;
    gap: 1rem;
  }

  .dc-plan-header-rating {
    text-align: left;
  }

  .dc-stat-grid--state {
    grid-template-columns: 1fr 1fr;
  }

  .dc-drug-class-stats {
    gap: 0.5rem;
  }

  .dc-drug-class-stat {
    font-size: 0.82rem;
    padding: 0.3rem 0.7rem;
  }
}

@media (max-width: 576px) {
  .dc-stat-grid--state {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   38. DRUG-STATE PAGE — drug-state.php template classes
   /drug/{drug-slug}/{state-slug} pages (~200k pages)
   ============================================================ */

.dc-drug-state-page {
  padding: 1.5rem 0 3rem;
}

.dc-ds-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--dc-navy);
  line-height: 1.25;
  margin: 0 0 2rem;
}

/* Summary stat cards at top */
.dc-ds-summary {
  margin-bottom: 2.5rem;
}

.dc-ds-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.dc-stat-card-lg {
  padding: 1.75rem 1.5rem !important;
}

.dc-stat-card-lg .dc-stat-value {
  font-size: 2.25rem !important;
}

/* Stat card color variants for drug-state */
.dc-stat-card.dc-stat-green {
  border-color: var(--dc-green);
  background: var(--dc-green-light);
}
.dc-stat-card.dc-stat-green .dc-stat-value { color: var(--dc-green) !important; }

.dc-stat-card.dc-stat-amber {
  border-color: var(--dc-warning);
  background: #fff7ed;
}
.dc-stat-card.dc-stat-amber .dc-stat-value { color: var(--dc-warning) !important; }

.dc-stat-card.dc-stat-red {
  border-color: var(--dc-red);
  background: var(--dc-red-light);
}
.dc-stat-card.dc-stat-red .dc-stat-value { color: var(--dc-red) !important; }

.dc-stat-sub {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  margin-top: 0.4rem;
}

/* Plans table section */
.dc-ds-plans {
  margin-bottom: 2.5rem;
}

.dc-plans-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  margin-top: 1rem;
}

.dc-plans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
}

.dc-plans-table thead tr {
  background: var(--dc-navy);
}

.dc-plans-table thead th {
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.85rem 1rem;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.dc-plans-table tbody tr {
  border-bottom: 1px solid var(--dc-border);
  transition: background 0.15s;
}

.dc-plans-table tbody tr:last-child {
  border-bottom: none;
}

.dc-plans-table tbody tr:hover {
  background: var(--dc-bg-subtle);
}

.dc-plans-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  color: var(--dc-text);
}

.dc-row-best {
  background: rgba(12, 124, 137, 0.04) !important;
}

.dc-row-best:hover {
  background: rgba(12, 124, 137, 0.08) !important;
}

.dc-plan-name-cell {
  min-width: 220px;
}

.dc-plan-name-cell a {
  color: var(--dc-teal);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  display: block;
  line-height: 1.35;
}

.dc-plan-name-cell a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

.dc-plan-org-small {
  display: block;
  font-size: 0.75rem;
  color: var(--dc-text-muted);
  margin-top: 0.15rem;
}

.dc-inline-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  background: var(--dc-green);
  color: #fff;
  border-radius: var(--dc-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.25rem;
}

.dc-copay-cell strong {
  font-family: var(--dc-font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dc-teal);
}

.dc-muted {
  color: var(--dc-text-muted);
  font-size: 0.85rem;
}

.dc-no-restrictions {
  font-size: 0.8rem;
  color: var(--dc-green);
  font-weight: 500;
}

/* Restriction badges in the plans table */
.dc-restrictions-cell {
  white-space: nowrap;
}

.dc-restriction-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--dc-radius-pill);
  font-size: 0.65rem;
  font-weight: 800;
  text-decoration: none;
  cursor: help;
  margin-right: 2px;
}

.dc-restriction-badge.dc-r-pa { background: #fff7ed; color: var(--dc-warning); border: 1px solid var(--dc-warning); }
.dc-restriction-badge.dc-r-st { background: var(--dc-purple-light); color: var(--dc-purple); border: 1px solid var(--dc-purple); }
.dc-restriction-badge.dc-r-ql { background: var(--dc-blue-light); color: var(--dc-blue); border: 1px solid var(--dc-blue); }

.dc-th-action { width: 80px; }

/* Outline buttons used in tables */
.dc-btn-outline,
a.dc-btn-outline,
.dc-btn--outline,
.dc-btn.dc-btn--outline {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--dc-teal);
  border-radius: var(--dc-radius);
  color: var(--dc-teal) !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  cursor: pointer;
}

.dc-btn-outline:hover,
a.dc-btn-outline:hover,
.dc-btn--outline:hover,
.dc-btn.dc-btn--outline:hover {
  background: var(--dc-teal) !important;
  color: #fff !important;
}

.dc-btn-sm,
.dc-btn--sm {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.78rem !important;
}

/* Alert styles */
.dc-alert {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--dc-radius);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 1rem 0;
}

.dc-alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dc-alert-info {
  background: var(--dc-blue-light);
  border: 1px solid var(--dc-blue);
  color: var(--dc-navy);
}

.dc-alert-info svg { stroke: var(--dc-blue); }

.dc-alert-warning {
  background: #fff7ed;
  border: 1px solid var(--dc-warning);
  color: var(--dc-navy);
}

.dc-alert-warning svg { stroke: var(--dc-warning); }

/* Compare CTA section on drug-state page */
.dc-ds-compare-cta {
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  padding: 2rem 2.5rem;
  margin-bottom: 2.5rem;
}

.dc-ds-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.dc-ds-cta-text h2 {
  color: #fff !important;
  font-family: var(--dc-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.dc-ds-cta-text p {
  color: rgba(255,255,255,0.85) !important;
  margin: 0;
  font-size: 0.9rem;
}

.dc-ds-cta-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.dc-input {
  height: 44px;
  padding: 0 1rem;
  font-size: 0.95rem;
  border: 1.5px solid var(--dc-border);
  border-radius: var(--dc-radius);
  color: var(--dc-text);
  background: #fff;
  font-family: var(--dc-font);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 140px;
}

.dc-input:focus {
  outline: none;
  border-color: var(--dc-teal);
  box-shadow: 0 0 0 3px rgba(12,124,137,0.15);
}

.dc-ds-compare-cta .btn,
.dc-ds-compare-cta .dc-btn-primary {
  background: #fff !important;
  color: var(--dc-navy) !important;
  border: none !important;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: var(--dc-radius);
  text-decoration: none;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}

.dc-ds-compare-cta .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Back to national coverage link */
.dc-ds-back-national {
  margin-bottom: 2rem;
}

.dc-ds-back-national a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--dc-teal);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.dc-ds-back-national a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

.dc-ds-back-national svg {
  width: 16px;
  height: 16px;
}

/* Other states section */
.dc-other-states {
  margin-bottom: 2.5rem;
}

.dc-other-states-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dc-other-state-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  text-decoration: none;
  font-size: 0.82rem;
  transition: border-color 0.2s, background 0.2s;
}

.dc-other-state-item:hover {
  border-color: var(--dc-teal);
  background: var(--dc-teal-light);
}

.dc-os-name {
  font-weight: 600;
  color: var(--dc-text);
}

.dc-os-pct {
  font-weight: 700;
  font-family: var(--dc-font-heading);
  font-size: 0.9rem;
}

.dc-os-copay {
  font-size: 0.75rem;
  color: var(--dc-text-muted);
}

/* Drug-state responsive */
@media (max-width: 768px) {
  .dc-ds-summary-grid { grid-template-columns: 1fr 1fr; }
  .dc-ds-cta-inner { flex-direction: column; text-align: center; }
  .dc-ds-cta-form { justify-content: center; width: 100%; }
  .dc-ds-h1 { font-size: 1.5rem; }
}

@media (max-width: 576px) {
  .dc-ds-summary-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   39. PLAN-DRUG PAGE — plan-drug.php template classes
   /plan/{plan-slug}/{drug-slug} pages
   ============================================================ */

.dc-page-h1 {
  font-family: var(--dc-font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 800;
  color: var(--dc-navy);
  line-height: 1.3;
  margin: 0.5rem 0 0.4rem;
}

.dc-page-sub {
  color: var(--dc-text-muted);
  font-size: 0.95rem;
  margin: 0 0 1.5rem;
}

/* Coverage answer card (YES / NO) */
.dc-coverage-card {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem 2rem;
  border-radius: var(--dc-radius-xl);
  margin-bottom: 2rem;
  box-shadow: var(--dc-shadow-md);
}

.dc-coverage-card--yes {
  background: var(--dc-green-light);
  border: 2px solid var(--dc-green);
}

.dc-coverage-card--no {
  background: var(--dc-red-light);
  border: 2px solid var(--dc-red);
}

.dc-coverage-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-coverage-card--yes .dc-coverage-card-icon { background: var(--dc-green); }
.dc-coverage-card--no  .dc-coverage-card-icon { background: var(--dc-red); }

.dc-coverage-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff !important;
  stroke-width: 2.5;
}

.dc-coverage-card-body { flex: 1; }

.dc-coverage-verdict {
  font-family: var(--dc-font-heading);
  font-size: 1.4rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.dc-coverage-card--yes .dc-coverage-verdict { color: var(--dc-green); }
.dc-coverage-card--no  .dc-coverage-verdict { color: var(--dc-red); }

.dc-coverage-detail {
  color: var(--dc-text);
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.dc-coverage-copay {
  font-size: 0.95rem;
  color: var(--dc-text);
  margin: 0 0 0.75rem;
}

.dc-coverage-copay strong { color: var(--dc-navy); }

.dc-coverage-restrictions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: rgba(245,158,11,0.1);
  border: 1px solid var(--dc-warning);
  border-radius: var(--dc-radius);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  color: var(--dc-text);
  margin-top: 0.75rem;
}

.dc-coverage-restrictions strong {
  color: var(--dc-warning);
  font-weight: 700;
  margin-right: 0.25rem;
}

/* Cost detail boxes */
.dc-cost-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.dc-cost-detail-box {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--dc-shadow-sm);
}

.dc-cost-detail-box-title {
  font-family: var(--dc-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 2px solid var(--dc-teal);
}

.dc-cost-dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.75rem;
  margin: 0;
}

.dc-cost-dl dt {
  font-size: 0.82rem;
  color: var(--dc-text-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.dc-cost-dl dd {
  font-family: var(--dc-font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dc-teal);
  margin: 0;
  display: flex;
  align-items: center;
}

/* Deductible indicators */
.dc-ded-yes {
  color: var(--dc-warning);
  font-weight: 600;
  font-size: 0.88rem;
}

.dc-ded-no {
  color: var(--dc-green);
  font-weight: 600;
  font-size: 0.88rem;
}

/* Restriction details section */
.dc-restriction-details {
  background: #fff7ed;
  border: 1px solid var(--dc-warning);
  border-radius: var(--dc-radius-lg);
  padding: 1.25rem 1.5rem;
  margin-top: 1.25rem;
}

.dc-restriction-details-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0 0 0.75rem;
}

.dc-restriction-item {
  font-size: 0.88rem;
  color: var(--dc-text);
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--dc-warning);
  line-height: 1.6;
}

.dc-restriction-item strong { color: var(--dc-navy); }

.dc-restriction-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--dc-text-muted);
  margin: 0.75rem 0 0;
}

.dc-restriction-note svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  stroke: var(--dc-text-muted);
}

/* Alternative drugs grid */
.dc-drug-alts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.dc-drug-alt-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.dc-drug-alt-card:hover {
  border-color: var(--dc-teal);
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-drug-alt-name {
  font-weight: 700;
  color: var(--dc-navy);
  font-size: 0.95rem;
  line-height: 1.3;
}

.dc-drug-alt-generic {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
}

.dc-drug-alt-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.dc-drug-alt-tier {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  background: var(--dc-bg-subtle);
  padding: 0.1rem 0.5rem;
  border-radius: var(--dc-radius-pill);
  font-weight: 500;
}

.dc-drug-alt-copay {
  font-family: var(--dc-font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--dc-teal);
}


/* ============================================================
   40. SHARED COMPONENTS — dc-table, plan.php, plan-drug.php
   ============================================================ */

.dc-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  box-shadow: var(--dc-shadow-sm);
  margin-top: 1rem;
}

.dc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
}

.dc-table thead tr { background: var(--dc-navy); }

.dc-table thead th {
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.85rem 1rem;
  text-align: left;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.dc-table tbody tr {
  border-bottom: 1px solid var(--dc-border);
  transition: background 0.15s;
}

.dc-table tbody tr:last-child { border-bottom: none; }
.dc-table tbody tr:hover { background: var(--dc-bg-subtle); }

.dc-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  color: var(--dc-text);
}

.dc-table-note {
  font-size: 0.8rem;
  color: var(--dc-text-muted);
  text-align: right;
  margin: 0.5rem 0 0;
}

.dc-rank-col {
  width: 36px;
  text-align: center;
  color: var(--dc-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.dc-cost-cell {
  font-family: var(--dc-font-heading);
  font-weight: 600;
  color: var(--dc-teal);
}

.dc-drug-link, .dc-plan-link {
  color: var(--dc-teal);
  font-weight: 600;
  text-decoration: none;
}

.dc-drug-link:hover, .dc-plan-link:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

.dc-drug-generic {
  display: block;
  font-size: 0.78rem;
  color: var(--dc-text-muted);
}

.dc-na {
  color: var(--dc-text-light);
  font-size: 0.88rem;
}

/* Tier badge variants (dc-tier-badge--N from plan.php, dc-tier-N from drug-state.php) */
.dc-tier-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--dc-radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.dc-tier-badge--1, .dc-tier-1 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.dc-tier-badge--2, .dc-tier-2 { background: var(--dc-teal-light); color: var(--dc-teal-dark); border: 1px solid #a5d8dd; }
.dc-tier-badge--3, .dc-tier-3 { background: var(--dc-green-light); color: var(--dc-green); border: 1px solid #a7f3d0; }
.dc-tier-badge--4, .dc-tier-4 { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.dc-tier-badge--5, .dc-tier-5 { background: var(--dc-red-light); color: var(--dc-red); border: 1px solid #fecaca; }
.dc-tier-badge--6, .dc-tier-6 { background: var(--dc-purple-light); color: var(--dc-purple); border: 1px solid #ddd6fe; }

/* Tier drug counts below tier table */
.dc-tier-drug-counts {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--dc-bg-subtle);
  border-radius: var(--dc-radius);
}

.dc-tier-counts-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dc-text);
  margin: 0 0 0.6rem;
}

.dc-tier-counts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.dc-tier-counts-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.dc-tier-drug-count { font-weight: 600; color: var(--dc-text); }
.dc-tier-desc { color: var(--dc-text-muted); font-size: 0.8rem; }

/* State pills (plan.php) */
.dc-state-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.dc-state-pill {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-pill);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--dc-text);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.dc-state-pill:hover {
  border-color: var(--dc-teal);
  background: var(--dc-teal-light);
  color: var(--dc-teal);
}

/* Medicare advisor CTA card (plan.php) */
.dc-medicare-cta-wrap { margin: 2rem 0; }

.dc-medicare-cta-card {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--dc-navy) 0%, var(--dc-teal-dark) 100%);
  border-radius: var(--dc-radius-xl);
  padding: 2rem 2.5rem;
  flex-wrap: wrap;
}

.dc-medicare-cta-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-medicare-cta-icon svg {
  width: 24px;
  height: 24px;
  stroke: #fff !important;
}

.dc-medicare-cta-content {
  flex: 1;
  min-width: 0;
}

.dc-medicare-cta-content h3 {
  color: #fff !important;
  font-family: var(--dc-font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.dc-medicare-cta-content p {
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 1rem;
  font-size: 0.9rem;
}

.dc-medicare-cta-content .dc-btn--primary,
.dc-medicare-cta-content .dc-btn {
  background: #fff !important;
  color: var(--dc-navy) !important;
  border: none !important;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: var(--dc-radius);
  text-decoration: none;
  display: inline-block;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}

.dc-medicare-cta-content .dc-btn:hover {
  transform: translateY(-1px);
}

.dc-medicare-cta-legal {
  width: 100%;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55) !important;
  margin: 0.75rem 0 0;
  line-height: 1.5;
}

.dc-medicare-cta-legal a {
  color: rgba(255,255,255,0.7) !important;
  text-decoration: underline;
}

/* Shared dc-section and dc-section-title */
.dc-section {
  margin-bottom: 2.5rem;
}

/* dc-section-title: override/merge with any existing from earlier sections */
.dc-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--dc-font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dc-navy);
  margin: 0 0 0.5rem;
}

.dc-section-title svg {
  width: 20px;
  height: 20px;
  stroke: var(--dc-teal);
  flex-shrink: 0;
}

.dc-section-sub {
  color: var(--dc-text-muted);
  font-size: 0.88rem;
  margin: 0 0 1rem;
  line-height: 1.6;
}

/* Stat boxes (plan.php — outside .dc-page-wrap context) */
.dc-stat-box {
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  padding: 1.5rem 1.25rem;
  text-align: center;
  box-shadow: var(--dc-shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}

.dc-stat-box:hover {
  box-shadow: var(--dc-shadow-md);
  transform: translateY(-2px);
}

.dc-stat-box .dc-stat-icon { margin-bottom: 0.5rem; }

.dc-stat-box .dc-stat-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--dc-teal);
}

.dc-stat-box .dc-stat-value {
  font-family: var(--dc-font-heading);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dc-teal);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.dc-stat-box .dc-stat-label {
  font-size: 0.78rem;
  color: var(--dc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Plan-drug + plan responsive */
@media (max-width: 768px) {
  .dc-coverage-card {
    flex-direction: column;
    padding: 1.25rem;
  }

  .dc-cost-detail-grid { grid-template-columns: 1fr; }
  .dc-drug-alts-grid { grid-template-columns: 1fr 1fr; }
  .dc-medicare-cta-card { padding: 1.5rem; }
  .dc-ds-compare-cta { padding: 1.5rem; }
}

@media (max-width: 576px) {
  .dc-drug-alts-grid { grid-template-columns: 1fr; }

  .dc-cost-dl {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  .dc-cost-dl dt { margin-top: 0.5rem; }
}


/* ============================================================
   41. UNIVERSAL BREADCRUMB — dc_breadcrumb() output
   Replaces Bootstrap .breadcrumb with our own clean system.
   ============================================================ */

.dc-breadcrumb {
  padding: 0.65rem 0 0.25rem;
  margin-bottom: 1.25rem;
}

.dc-bc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}

/* Linked crumb */
.dc-bc-item a {
  color: var(--dc-teal);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.dc-bc-item a:hover {
  color: var(--dc-teal-dark);
  text-decoration: underline;
}

/* Plain (non-linked) middle crumb */
.dc-bc-plain {
  color: var(--dc-text-muted);
}

/* Current page — last crumb */
.dc-bc-current {
  color: var(--dc-text);
  font-weight: 600;
}

/* Chevron separator */
.dc-bc-sep {
  display: inline-flex;
  align-items: center;
  color: var(--dc-border-dark);
  margin: 0 0.3rem;
  flex-shrink: 0;
}

.dc-bc-sep svg {
  display: block;
  stroke: var(--dc-border-dark);
}

/* Also keep old .dc-breadcrumb-list working (contact.php etc.) */
.dc-breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}

.dc-breadcrumb-list li { display: inline-flex; align-items: center; color: var(--dc-text-muted); }
.dc-breadcrumb-list li a { color: var(--dc-teal); text-decoration: none; font-weight: 500; }
.dc-breadcrumb-list li a:hover { color: var(--dc-teal-dark); text-decoration: underline; }
.dc-breadcrumb-list li[aria-current="page"] { color: var(--dc-text); font-weight: 600; }
.dc-breadcrumb-list li[aria-hidden="true"] { margin: 0 0.35rem; color: var(--dc-border-dark); font-size: 0.75rem; user-select: none; }

/* Bootstrap .breadcrumb fallback (legacy pages) */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  font-size: 0.82rem;
  background: none;
}

.breadcrumb-item { color: var(--dc-text-muted); }
.breadcrumb-item a { color: var(--dc-teal); text-decoration: none; font-weight: 500; }
.breadcrumb-item a:hover { color: var(--dc-teal-dark); text-decoration: underline; }
.breadcrumb-item.active { color: var(--dc-text); font-weight: 600; }

.breadcrumb-item + .breadcrumb-item::before {
  content: '\203A'; /* › */
  padding: 0 0.45rem;
  color: var(--dc-border-dark);
  font-size: 1.1em;
  line-height: 1;
}

@media (max-width: 576px) {
  .dc-bc-list, .dc-breadcrumb-list { font-size: 0.75rem; }
}


/* ============================================================
   42. OTHER STATES CARD GRID — drug-state.php bottom section
   Replaces inline pill layout with a premium card grid.
   ============================================================ */

.dc-os-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.dc-os-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid var(--dc-border);
  border-radius: var(--dc-radius-lg);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.dc-os-card:hover {
  border-color: var(--dc-teal);
  box-shadow: 0 4px 12px rgba(12,124,137,0.12);
  transform: translateY(-2px);
}

.dc-os-card-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dc-text);
  line-height: 1.3;
}

.dc-os-card-pct {
  font-family: var(--dc-font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}

.dc-os-card-pct.dc-scc-good { color: var(--dc-green); }
.dc-os-card-pct.dc-scc-mid  { color: var(--dc-warning); }
.dc-os-card-pct.dc-scc-low  { color: var(--dc-red); }

.dc-os-card-copay {
  font-size: 0.75rem;
  color: var(--dc-text-muted);
  margin-top: 0.1rem;
}

@media (max-width: 768px) {
  .dc-os-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

@media (max-width: 480px) {
  .dc-os-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}