/* =============================================================================
   CompanionWise Design System v1.0
   Generated: 2026-03-14
   Direction: Trust-Forward Teal (Direction D — approved per UX spec)
   Platform: WordPress + GeneratePress (classic theme) + WP Engine
   Naming: BEM with .cw- prefix — zero collision with GeneratePress styles
   WCAG: Targets 2.1 AA for all text; large text (18px bold+) may use 3:1

   Components:
     CW-01  Safety Index Nutrition Label
     CW-02  App Rating Card
     CW-03  Matchmaker Quiz Widget
     CW-04  Comparison Table
     CW-05  Safety Score Badge
     CW-06  Last Reviewed Freshness Indicator
     CW-07  Sponsored Content Label
     CW-08  Quick Verdict Box
============================================================================= */


/* =============================================================================
   1. GOOGLE FONTS
   Plus Jakarta Sans: heading personality, geometric with warmth (not in avoid list)
   Inter: body text per UX spec approval (team decision — do not swap without review)
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');


/* =============================================================================
   2. DESIGN TOKENS (CSS Custom Properties)
   All values in :root — site-wide, overridable per page type via scoped selectors
============================================================================= */

:root {

  /* --- Brand Colors --- */
  --cw-primary:           #0D9488;   /* Teal 600 — brand, buttons */
  --cw-primary-dark:      #0F766E;   /* Teal 700 — links on white: 5.48:1 AA PASS */
  --cw-primary-darker:    #115E59;   /* Teal 800 — high-emphasis text on white */
  --cw-primary-light:     #CCFBF1;   /* Teal 100 — subtle tinted backgrounds */
  --cw-primary-pale:      #F0FDFA;   /* Teal 50  — lightest tint */

  --cw-accent:            #7C3AED;   /* Violet 600 — quiz CTAs: 5.70:1 on white AA PASS */
  --cw-accent-dark:       #6D28D9;   /* Violet 700 — quiz hover states */
  --cw-accent-light:      #EDE9FE;   /* Violet 100 — quiz option selected bg */

  /* --- Semantic Colors --- */
  --cw-warning:           #D97706;   /* Amber  600 — darkened for contrast: 4.52:1 AA PASS */
  --cw-warning-light:     #FFFBEB;   /* Amber  50  */
  --cw-warning-border:    #FDE68A;   /* Amber  200 */
  --cw-warning-text:      #92400E;   /* Amber  800 — text on warning-light: 7.2:1 AA PASS */

  --cw-danger:            #DC2626;   /* Red 600 */
  --cw-danger-light:      #FEF2F2;   /* Red 50 */
  --cw-danger-border:     #FECACA;   /* Red 200 */
  --cw-danger-text:       #991B1B;   /* Red 800 */

  --cw-success:           #059669;   /* Emerald 600 */
  --cw-success-light:     #ECFDF5;   /* Emerald 50 */
  --cw-success-border:    #A7F3D0;   /* Emerald 200 */
  --cw-success-text:      #065F46;   /* Emerald 800 — on light bg: 8.3:1 AA PASS */

  /* --- Neutral Palette --- */
  --cw-bg:                #F9FAFB;   /* Gray 50  — page background */
  --cw-surface:           #FFFFFF;   /* Pure white — cards, panels */
  --cw-border:            #E5E7EB;   /* Gray 200 — dividers, inputs */
  --cw-border-focus:      #0D9488;   /* Teal 600 — focus rings */

  --cw-text-primary:      #111827;   /* Gray 900 — body: 17.5:1 on white AA PASS */
  --cw-text-secondary:    #6B7280;   /* Gray 500 — meta: 4.83:1 on white AA PASS */
  --cw-text-muted:        #9CA3AF;   /* Gray 400 — placeholders (decorative only) */
  --cw-text-inverted:     #FFFFFF;   /* For text on dark backgrounds */

  /* --- Safety Score Colors (Vibrant — for bars, decorative fills) ---
     NOTE: Do NOT use these as backgrounds for white text.
     Use dark variants below for any score badge with white text. */
  --cw-score-excellent-v: #10B981;   /* Emerald 500 — 4.5–5.0 */
  --cw-score-good-v:      #84CC16;   /* Lime    500 — 4.0–4.4 */
  --cw-score-fair-v:      #F59E0B;   /* Amber   500 — 3.0–3.9 */
  --cw-score-poor-v:      #F97316;   /* Orange  500 — 2.0–2.9 */
  --cw-score-unsafe-v:    #EF4444;   /* Red     500 — 1.0–1.9 */

  /* Safety Score Colors (Dark — backgrounds with white text, verified AA) */
  --cw-score-excellent-d: #065F46;   /* Emerald 800 — white text: 7.7:1 PASS */
  --cw-score-good-d:      #3F6212;   /* Lime    800 — white text: 8.1:1 PASS */
  --cw-score-fair-d:      #92400E;   /* Amber   800 — white text: 7.2:1 PASS */
  --cw-score-poor-d:      #7C2D12;   /* Orange  900 — white text: 9.1:1 PASS */
  --cw-score-unsafe-d:    #7F1D1D;   /* Red     900 — white text: 9.4:1 PASS */

  /* Safety Score Colors (Light — backgrounds with dark text) */
  --cw-score-excellent-l: #ECFDF5;
  --cw-score-good-l:      #F7FEE7;
  --cw-score-fair-l:      #FFFBEB;
  --cw-score-poor-l:      #FFF7ED;
  --cw-score-unsafe-l:    #FEF2F2;

  /* --- Typography --- */
  --cw-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --cw-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --cw-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type Scale — fluid via clamp where it matters */
  --cw-text-hero:   clamp(36px, 5.5vw, 48px);
  --cw-text-h1:     clamp(30px, 4vw, 40px);
  --cw-text-h2:     clamp(22px, 3vw, 32px);
  --cw-text-h3:     clamp(19px, 2.5vw, 24px);
  --cw-text-h4:     20px;
  --cw-text-lg:     20px;
  --cw-text-body:   18px;
  --cw-text-sm:     16px;
  --cw-text-xs:     14px;
  --cw-score-lg:    clamp(36px, 5vw, 48px);
  --cw-score-sm:    24px;

  /* --- Spacing (8px base unit) --- */
  --cw-space-1:   4px;
  --cw-space-2:   8px;
  --cw-space-3:   12px;
  --cw-space-4:   16px;
  --cw-space-6:   24px;
  --cw-space-8:   32px;
  --cw-space-12:  48px;
  --cw-space-16:  64px;
  --cw-space-24:  96px;

  /* --- Border Radius --- */
  --cw-radius-sm:   4px;
  --cw-radius-md:   8px;
  --cw-radius-lg:   16px;
  --cw-radius-xl:   24px;
  --cw-radius-full: 9999px;

  /* --- Shadows --- */
  --cw-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --cw-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --cw-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
  --cw-shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.06);

  /* --- Transitions --- */
  --cw-t-fast:   150ms ease;
  --cw-t-base:   250ms ease;
  --cw-t-slow:   400ms ease;

  /* --- Layout --- */
  --cw-max-width:     1280px;
  --cw-content-width: 720px;  /* 72ch optimal reading measure */
  --cw-sidebar-width: 300px;
}


/* =============================================================================
   3. REDUCED MOTION (WCAG 2.1 SC 2.3.3)
============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    scroll-behavior:          auto   !important;
  }
}


/* =============================================================================
   4. BASE & TYPOGRAPHY (GeneratePress overrides)
============================================================================= */

body {
  font-family: var(--cw-font-body);
  font-size:   var(--cw-text-body);
  line-height: 1.7;
  color:       var(--cw-text-primary);
  background-color: var(--cw-bg);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
  font-family: var(--cw-font-display);
  font-weight: 700;
  line-height: 1.25;
  color:       var(--cw-text-primary);
  margin-bottom: var(--cw-space-4);
}

h1, .entry-title { font-size: var(--cw-text-h1); font-weight: 800; }
h2               { font-size: var(--cw-text-h2); }
h3               { font-size: var(--cw-text-h3); }
h4               { font-size: var(--cw-text-h4); font-weight: 600; }

/* Links — use primary-dark (5.48:1) not primary for body text */
a {
  color: var(--cw-primary-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--cw-t-fast), text-decoration-color var(--cw-t-fast);
}

a:hover {
  color: var(--cw-primary);
  text-decoration-color: var(--cw-primary);
}

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

/* Article body — readable measure */
.entry-content p,
.cw-body-text p {
  max-width: var(--cw-content-width);
  margin-bottom: var(--cw-space-4);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--cw-space-6);
  margin-bottom: var(--cw-space-4);
  max-width: var(--cw-content-width);
}

.entry-content li {
  margin-bottom: var(--cw-space-2);
}

/* Score number typography */
.cw-score-numeral {
  font-family: var(--cw-font-body);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}


/* =============================================================================
   5. LAYOUT UTILITIES
============================================================================= */

.cw-container {
  max-width: var(--cw-max-width);
  margin-left:  auto;
  margin-right: auto;
  padding-left:  var(--cw-space-8);
  padding-right: var(--cw-space-8);
}

@media (max-width: 1023px) {
  .cw-container {
    padding-left:  var(--cw-space-6);
    padding-right: var(--cw-space-6);
  }
}

@media (max-width: 767px) {
  .cw-container {
    padding-left:  var(--cw-space-4);
    padding-right: var(--cw-space-4);
  }
}

/* Sections */
.cw-section {
  padding-top:    var(--cw-space-16);
  padding-bottom: var(--cw-space-16);
}

@media (max-width: 767px) {
  .cw-section {
    padding-top:    var(--cw-space-12);
    padding-bottom: var(--cw-space-12);
  }
}

.cw-section--sm {
  padding-top:    var(--cw-space-12);
  padding-bottom: var(--cw-space-12);
}

/* Background variants */
.cw-section--white  { background-color: var(--cw-surface); }
.cw-section--tint   { background-color: var(--cw-bg); }
.cw-section--brand  { background-color: var(--cw-primary-light); }
.cw-section--dark   { background-color: var(--cw-text-primary); color: var(--cw-text-inverted); }

/* Full-bleed override for sections inside constrained content */
.cw-full-bleed {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* Section heading block */
.cw-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--cw-space-12);
}

.cw-section-header__eyebrow {
  display: inline-block;
  font-size:      var(--cw-text-xs);
  font-weight:    700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--cw-primary-dark);
  margin-bottom:  var(--cw-space-3);
}

.cw-section-header h2 {
  margin-bottom: var(--cw-space-3);
}

.cw-section-header p {
  font-size:  var(--cw-text-lg);
  color:      var(--cw-text-secondary);
  max-width:  none;
  margin-bottom: 0;
}

/* Grid system */
.cw-grid   { display: grid; gap: var(--cw-space-6); }
.cw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cw-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .cw-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cw-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .cw-grid-2,
  .cw-grid-3,
  .cw-grid-4 { grid-template-columns: 1fr; }
}

/* 2/3 + 1/3 editorial layout */
.cw-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--cw-sidebar-width);
  gap: var(--cw-space-12);
  align-items: start;
}

@media (max-width: 1023px) {
  .cw-layout-sidebar { grid-template-columns: 1fr; }
  .cw-layout-sidebar__sidebar { order: -1; }
}


/* =============================================================================
   6. BUTTONS
============================================================================= */

/* Base */
.cw-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--cw-space-2);
  padding:         12px 28px;
  border-radius:   var(--cw-radius-full);
  font-family:     var(--cw-font-display);
  font-size:       var(--cw-text-sm);
  font-weight:     600;
  line-height:     1;
  text-decoration: none !important;
  cursor:          pointer;
  border:          2px solid transparent;
  white-space:     nowrap;
  user-select:     none;
  min-height:      44px;   /* WCAG touch target minimum */
  transition:
    background-color var(--cw-t-fast),
    border-color     var(--cw-t-fast),
    color            var(--cw-t-fast),
    transform        var(--cw-t-fast),
    box-shadow       var(--cw-t-fast);
}

.cw-btn:focus-visible {
  outline:        3px solid var(--cw-border-focus);
  outline-offset: 3px;
}

/* Sizes */
.cw-btn--lg {
  padding:    14px 36px;
  font-size:  18px;
  min-height: 52px;
}

.cw-btn--sm {
  padding:    8px 20px;
  font-size:  14px;
  min-height: 36px;
}

/* --- Primary (teal) --- */
.cw-btn--primary {
  background-color: var(--cw-primary)      !important;
  border-color:     var(--cw-primary)      !important;
  color:            var(--cw-text-inverted) !important;
}

.cw-btn--primary:hover {
  background-color: var(--cw-primary-dark) !important;
  border-color:     var(--cw-primary-dark) !important;
  color:            var(--cw-text-inverted) !important;
  transform:        translateY(-2px);
  box-shadow:       0 6px 16px rgba(13, 148, 136, 0.35);
}

/* --- Accent / Quiz (violet) --- */
.cw-btn--accent {
  background-color: var(--cw-accent)       !important;
  border-color:     var(--cw-accent)       !important;
  color:            var(--cw-text-inverted) !important;
}

.cw-btn--accent:hover {
  background-color: var(--cw-accent-dark)  !important;
  border-color:     var(--cw-accent-dark)  !important;
  color:            var(--cw-text-inverted) !important;
  transform:        translateY(-2px);
  box-shadow:       0 6px 16px rgba(124, 58, 237, 0.35);
}

/* --- Secondary (outlined teal) --- */
.cw-btn--secondary {
  background-color: transparent          !important;
  border-color:     var(--cw-primary)    !important;
  color:            var(--cw-primary-dark) !important;
}

.cw-btn--secondary:hover {
  background-color: var(--cw-primary-light) !important;
  border-color:     var(--cw-primary-dark)  !important;
  color:            var(--cw-primary-dark)  !important;
  transform:        translateY(-2px);
}

/* --- Ghost (text only) --- */
.cw-btn--ghost {
  background-color: transparent            !important;
  border-color:     transparent            !important;
  color:            var(--cw-primary-dark) !important;
  padding-left:     0;
  padding-right:    0;
}

.cw-btn--ghost:hover {
  color:           var(--cw-primary)  !important;
  text-decoration: underline          !important;
  transform:       none;
}

/* --- Inverted (white on dark bg) --- */
.cw-btn--inverted {
  background-color: var(--cw-text-inverted) !important;
  border-color:     var(--cw-text-inverted) !important;
  color:            var(--cw-primary-dark)  !important;
}

.cw-btn--inverted:hover {
  background-color: var(--cw-primary-light) !important;
  transform: translateY(-2px);
}

/* --- Danger --- */
.cw-btn--danger {
  background-color: var(--cw-danger)       !important;
  border-color:     var(--cw-danger)       !important;
  color:            var(--cw-text-inverted) !important;
}

/* --- Disabled --- */
.cw-btn--disabled,
.cw-btn[disabled] {
  background-color: #D1D5DB !important;
  border-color:     #D1D5DB !important;
  color:            #FFFFFF !important;
  cursor:           not-allowed;
  pointer-events:   none;
  transform:        none !important;
  box-shadow:       none !important;
}

/* --- CTA group pattern --- */
.cw-cta-group {
  display:         flex;
  align-items:     center;
  gap:             var(--cw-space-4);
  flex-wrap:       wrap;
}


/* =============================================================================
   7. SAFETY SCORE SYSTEM — Color utilities
============================================================================= */

/* Bar fill colors (no text — vibrant shades okay) */
.cw-bar--excellent { background-color: var(--cw-score-excellent-v); }
.cw-bar--good      { background-color: var(--cw-score-good-v); }
.cw-bar--fair      { background-color: var(--cw-score-fair-v); }
.cw-bar--poor      { background-color: var(--cw-score-poor-v); }
.cw-bar--unsafe    { background-color: var(--cw-score-unsafe-v); }

/* Text colors on white (dark shades — all AA verified) */
.cw-text-score--excellent { color: var(--cw-score-excellent-d); }
.cw-text-score--good      { color: var(--cw-score-good-d); }
.cw-text-score--fair      { color: var(--cw-score-fair-d); }
.cw-text-score--poor      { color: var(--cw-score-poor-d); }
.cw-text-score--unsafe    { color: var(--cw-score-unsafe-d); }

/* Light tinted backgrounds */
.cw-bg-score--excellent { background-color: var(--cw-score-excellent-l); }
.cw-bg-score--good      { background-color: var(--cw-score-good-l); }
.cw-bg-score--fair      { background-color: var(--cw-score-fair-l); }
.cw-bg-score--poor      { background-color: var(--cw-score-poor-l); }
.cw-bg-score--unsafe    { background-color: var(--cw-score-unsafe-l); }

/* Score-to-class mapping (used by PHP template):
   score >= 4.5 → "excellent"
   score >= 4.0 → "good"
   score >= 3.0 → "fair"
   score >= 2.0 → "poor"
   score <  2.0 → "unsafe"
*/


/* =============================================================================
   8. CW-05: SAFETY SCORE BADGE
   Compact inline score chip — 3 sizes, color-coded, white text on dark bg
============================================================================= */

.cw-score-badge {
  display:     inline-flex;
  align-items: center;
  gap:         var(--cw-space-2);
  border-radius: var(--cw-radius-full);
  font-family:   var(--cw-font-body);
  font-weight:   700;
  line-height:   1;
  white-space:   nowrap;
  color:         var(--cw-text-inverted);
}

/* Large — Safety Index page H1, Nutrition Label header */
.cw-score-badge--lg {
  padding:   14px 22px;
  font-size: var(--cw-score-lg);
}
.cw-score-badge--lg .cw-score-badge__label {
  font-size:   20px;
  font-weight: 600;
}

/* Medium — App Cards, comparison rows */
.cw-score-badge--md {
  padding:   8px 16px;
  font-size: 28px;
}
.cw-score-badge--md .cw-score-badge__label {
  font-size:   15px;
  font-weight: 600;
}

/* Small — inline refs, breadcrumbs */
.cw-score-badge--sm {
  padding:   4px 12px;
  font-size: 18px;
}
.cw-score-badge--sm .cw-score-badge__label {
  font-size:   12px;
  font-weight: 500;
}

/* Color variants — dark backgrounds verified for white text AA */
.cw-score-badge--excellent { background-color: var(--cw-score-excellent-d); }
.cw-score-badge--good      { background-color: var(--cw-score-good-d); }
.cw-score-badge--fair      { background-color: var(--cw-score-fair-d); }
.cw-score-badge--poor      { background-color: var(--cw-score-poor-d); }
.cw-score-badge--unsafe    { background-color: var(--cw-score-unsafe-d); }

/* Provisional state */
.cw-score-badge--provisional {
  background-color: var(--cw-warning-text);
  position: relative;
}

.cw-score-badge__provisional-icon {
  font-style: normal;
  font-size:  0.6em;
}

/* Under Review state (text-only chip) */
.cw-score-badge--under-review {
  background-color: var(--cw-warning-light);
  color:            var(--cw-warning-text);
  border:           1px solid var(--cw-warning-border);
  font-size:        var(--cw-text-xs);
  font-weight:      600;
  padding:          6px 12px;
}


/* =============================================================================
   9. CW-01: SAFETY INDEX NUTRITION LABEL
   Visual signature component — 6-dimension safety score display
   PHP template: template-parts/cw-safety-label.php
   ACF group:    group_safety_index
============================================================================= */

.cw-safety-label {
  background-color: var(--cw-surface);
  border:           1px solid var(--cw-border);
  border-radius:    var(--cw-radius-lg);
  overflow:         hidden;
  box-shadow:       var(--cw-shadow-md);
  max-width:        560px;
}

/* Header bar */
.cw-safety-label__header {
  background-color: var(--cw-text-primary);
  color:            var(--cw-text-inverted);
  padding:          var(--cw-space-3) var(--cw-space-6);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
}

.cw-safety-label__title {
  font-family:     var(--cw-font-display);
  font-size:       11px;
  font-weight:     800;
  letter-spacing:  0.15em;
  text-transform:  uppercase;
  color:           var(--cw-text-inverted);
  margin:          0;
}

.cw-safety-label__method-link {
  font-size:       12px;
  font-weight:     500;
  color:           var(--cw-primary-light);
  text-decoration: none;
  transition:      color var(--cw-t-fast);
}

.cw-safety-label__method-link:hover {
  color:           var(--cw-text-inverted);
  text-decoration: underline;
}

/* Overall score */
.cw-safety-label__overall {
  padding:         var(--cw-space-6);
  border-bottom:   2px solid var(--cw-border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--cw-space-4);
}

.cw-safety-label__score-block {
  display:     flex;
  align-items: baseline;
  gap:         4px;
}

.cw-safety-label__score-number {
  font-size:   var(--cw-score-lg);
  font-weight: 700;
  font-family: var(--cw-font-body);
  line-height: 1;
}

.cw-safety-label__score-outof {
  font-size:   20px;
  font-weight: 400;
  color:       var(--cw-text-secondary);
  line-height: 1;
}

.cw-safety-label__overall-meta {
  text-align: right;
}

.cw-safety-label__verdict-label {
  display:     block;
  font-size:   var(--cw-text-sm);
  font-weight: 700;
  margin-bottom: var(--cw-space-1);
}

.cw-safety-label__reviewed {
  font-size: var(--cw-text-xs);
  color:     var(--cw-text-secondary);
}

/* Dimension list */
.cw-safety-label__dimensions {
  list-style: none;
  padding:    0;
  margin:     0;
}

.cw-safety-label__dimension {
  padding:        var(--cw-space-3) var(--cw-space-6);
  border-bottom:  1px solid var(--cw-border);
  display:        grid;
  grid-template-columns: 1fr auto;
  grid-template-rows:    auto auto;
  column-gap:     var(--cw-space-4);
  row-gap:        var(--cw-space-1);
  align-items:    center;
}

.cw-safety-label__dimension:last-of-type {
  border-bottom: none;
}

.cw-safety-label__dim-name {
  font-size:   var(--cw-text-sm);
  font-weight: 600;
  color:       var(--cw-text-primary);
  grid-column: 1;
  grid-row:    1;
}

.cw-safety-label__dim-score {
  font-size:   var(--cw-text-sm);
  font-weight: 700;
  grid-column: 2;
  grid-row:    1;
  text-align:  right;
}

.cw-safety-label__bar-track {
  grid-column:  1;
  grid-row:     2;
  height:       8px;
  background-color: var(--cw-border);
  border-radius: var(--cw-radius-full);
  overflow:     hidden;
}

.cw-safety-label__bar-fill {
  height:        100%;
  border-radius: var(--cw-radius-full);
  transition:    width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  /* width set via inline style="width: X%" from PHP */
}

.cw-safety-label__dim-label {
  font-size:  var(--cw-text-xs);
  font-weight: 500;
  grid-column: 2;
  grid-row:    2;
  text-align:  right;
}

/* Under Review dimension state */
.cw-safety-label__dimension--under-review {
  background-color: var(--cw-warning-light);
}

.cw-safety-label__dim-under-review {
  grid-column: 1 / -1;
  grid-row:    2;
  display:     flex;
  align-items: center;
  gap:         var(--cw-space-2);
  font-size:   var(--cw-text-xs);
  font-weight: 600;
  color:       var(--cw-warning-text);
}

/* Footer */
.cw-safety-label__footer {
  padding:          var(--cw-space-4) var(--cw-space-6);
  background-color: var(--cw-bg);
  border-top:       1px solid var(--cw-border);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--cw-space-3);
  flex-wrap:        wrap;
}

.cw-safety-label__evidence {
  font-size: var(--cw-text-xs);
  color:     var(--cw-text-secondary);
}

.cw-safety-label__evidence strong {
  color:       var(--cw-text-primary);
  font-weight: 600;
}

.cw-safety-label__history-link {
  font-size:       var(--cw-text-xs);
  color:           var(--cw-primary-dark);
  text-decoration: underline;
}

/* Provisional badge (overlaid on score number) */
.cw-provisional-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  background-color: var(--cw-warning-light);
  color:          var(--cw-warning-text);
  border:         1px solid var(--cw-warning-border);
  padding:        3px 10px;
  border-radius:  var(--cw-radius-full);
  font-size:      12px;
  font-weight:    600;
}

/* Mobile */
@media (max-width: 599px) {
  .cw-safety-label {
    max-width: 100%;
  }

  .cw-safety-label__overall {
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--cw-space-3);
  }

  .cw-safety-label__overall-meta {
    text-align: left;
  }
}


/* =============================================================================
   10. CW-02: APP RATING CARD
   Used in: best-of lists, search results, quiz recommendations, comparison previews
   PHP template: template-parts/cw-app-card.php
   ACF group:    group_app_review
============================================================================= */

.cw-app-card {
  background-color: var(--cw-surface);
  border:           1px solid var(--cw-border);
  border-radius:    var(--cw-radius-md);
  padding:          var(--cw-space-6);
  display:          flex;
  flex-direction:   column;
  gap:              var(--cw-space-4);
  position:         relative;
  transition:       transform var(--cw-t-base), box-shadow var(--cw-t-base), border-color var(--cw-t-base);
}

.cw-app-card:hover {
  transform:    translateY(-4px);
  box-shadow:   var(--cw-shadow-lg);
  border-color: var(--cw-primary-light);
}

/* Header row: icon + name + badge */
.cw-app-card__header {
  display:     flex;
  align-items: flex-start;
  gap:         var(--cw-space-3);
}

.cw-app-card__icon {
  width:         52px;
  height:        52px;
  border-radius: var(--cw-radius-md);
  flex-shrink:   0;
  object-fit:    cover;
  border:        1px solid var(--cw-border);
}

.cw-app-card__identity {
  flex:      1;
  min-width: 0;
}

.cw-app-card__name {
  font-family:   var(--cw-font-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--cw-text-primary);
  margin:        0 0 var(--cw-space-1);
  line-height:   1.3;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.cw-app-card__tagline {
  font-size: var(--cw-text-xs);
  color:     var(--cw-text-secondary);
  margin:    0;
}

/* Floating editorial badges */
.cw-app-card__badge {
  position:    absolute;
  top:         -10px;
  left:        var(--cw-space-6);
  padding:     4px 12px;
  border-radius: var(--cw-radius-full);
  font-size:   11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cw-app-card__badge--editors-pick {
  background-color: var(--cw-primary);
  color:            var(--cw-text-inverted);
}

.cw-app-card__badge--sponsored {
  background-color: #F3F4F6;
  color:            var(--cw-text-secondary);
  border:           1px solid var(--cw-border);
}

/* Excerpt (featured variant) */
.cw-app-card__excerpt {
  font-size:             var(--cw-text-sm);
  color:                 var(--cw-text-secondary);
  line-height:           1.5;
  display:               -webkit-box;
  -webkit-line-clamp:    2;
  -webkit-box-orient:    vertical;
  overflow:              hidden;
}

/* Personalization text (quiz result variant) */
.cw-app-card__why {
  background-color: var(--cw-primary-pale);
  border:           1px solid var(--cw-primary-light);
  border-radius:    var(--cw-radius-sm);
  padding:          var(--cw-space-3) var(--cw-space-4);
  font-size:        var(--cw-text-xs);
  color:            var(--cw-primary-darker);
  font-weight:      500;
  line-height:      1.5;
}

.cw-app-card__why::before {
  content:      'Why this fits you — ';
  font-weight:  700;
}

/* Actions row */
.cw-app-card__actions {
  display:    flex;
  gap:        var(--cw-space-3);
  margin-top: auto;
}

.cw-app-card__actions .cw-btn {
  flex:      1;
  font-size: 14px;
  padding:   10px 16px;
}

/* Under review indicator on score badge area */
.cw-app-card__score-wrap {
  position: relative;
  flex-shrink: 0;
}

.cw-app-card__review-flag {
  position:    absolute;
  top:         -4px;
  right:       -4px;
  width:       16px;
  height:      16px;
  background-color: var(--cw-warning);
  border-radius:    50%;
  border:      2px solid var(--cw-surface);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   9px;
  color:       var(--cw-text-inverted);
}


/* =============================================================================
   11. CW-06: LAST REVIEWED FRESHNESS INDICATOR
   Constitution Rule 27/28 compliance — always above fold on review pages
============================================================================= */

/* Inline indicator (beneath H1) */
.cw-freshness {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  font-size:   var(--cw-text-xs);
  font-weight: 500;
  line-height: 1;
}

.cw-freshness__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}

.cw-freshness--fresh .cw-freshness__dot { background-color: var(--cw-success); }
.cw-freshness--fresh                    { color: var(--cw-success-text); }

.cw-freshness--due .cw-freshness__dot   { background-color: var(--cw-warning); }
.cw-freshness--due                      { color: var(--cw-warning-text); }

/* Full-width banner (overdue / archived) */
.cw-freshness-banner {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--cw-space-3);
  padding:       var(--cw-space-4) var(--cw-space-6);
  border-radius: var(--cw-radius-sm);
  font-size:     var(--cw-text-sm);
  line-height:   1.5;
  margin-bottom: var(--cw-space-6);
}

.cw-freshness-banner__icon {
  flex-shrink:  0;
  margin-top:   2px;
}

.cw-freshness-banner__label {
  display:       block;
  font-weight:   700;
  margin-bottom: var(--cw-space-1);
}

.cw-freshness-banner--overdue {
  background-color: var(--cw-warning-light);
  color:            var(--cw-warning-text);
  border:           1px solid var(--cw-warning-border);
}

.cw-freshness-banner--archived {
  background-color: var(--cw-bg);
  color:            var(--cw-text-secondary);
  border:           1px solid var(--cw-border);
}


/* =============================================================================
   12. CW-07: SPONSORED CONTENT LABEL
   Constitution Rule 5 — mandatory, prominent, honest, never subordinate
============================================================================= */

.cw-sponsored {
  display:  inline-flex;
  position: relative;
}

/* The "S · Sponsored" pill */
.cw-sponsored__label {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        4px 10px;
  background-color: #F3F4F6;
  border:         1px solid var(--cw-border);
  border-radius:  var(--cw-radius-sm);
  font-size:      11px;
  font-weight:    700;
  color:          var(--cw-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor:         help;
  transition:     background-color var(--cw-t-fast);
}

.cw-sponsored__label:hover {
  background-color: #E9EAEC;
}

.cw-sponsored__icon {
  font-style:  normal;
  font-weight: 900;
  font-size:   10px;
}

/* Tooltip */
.cw-sponsored__tooltip {
  position:       absolute;
  bottom:         calc(100% + 10px);
  left:           0;
  min-width:      280px;
  max-width:      320px;
  background-color: var(--cw-text-primary);
  color:          var(--cw-text-inverted);
  padding:        var(--cw-space-4);
  border-radius:  var(--cw-radius-md);
  font-size:      12px;
  font-weight:    400;
  line-height:    1.5;
  z-index:        200;
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--cw-t-fast);
  box-shadow:     var(--cw-shadow-lg);
}

.cw-sponsored__tooltip::after {
  content:     '';
  position:    absolute;
  top:         100%;
  left:        16px;
  border:      6px solid transparent;
  border-top-color: var(--cw-text-primary);
}

.cw-sponsored__tooltip a {
  color:           var(--cw-primary-light);
  text-decoration: underline;
}

.cw-sponsored__label:hover   + .cw-sponsored__tooltip,
.cw-sponsored__label:focus   + .cw-sponsored__tooltip {
  opacity:        1;
  pointer-events: auto;
}


/* =============================================================================
   13. CW-08: QUICK VERDICT BOX
   TL;DR for every review page — above fold, before article body
   ACF group: group_app_review (quick_verdict_best_for, quick_verdict_watch_for)
============================================================================= */

.cw-quick-verdict {
  background-color: var(--cw-surface);
  border:           1px solid var(--cw-border);
  border-left:      4px solid var(--cw-primary);
  border-radius:    var(--cw-radius-md);
  padding:          var(--cw-space-6);
  margin-bottom:    var(--cw-space-8);
}

.cw-quick-verdict__eyebrow {
  font-size:      11px;
  font-weight:    800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--cw-primary-dark);
  margin-bottom:  var(--cw-space-4);
  display:        block;
}

.cw-quick-verdict__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--cw-space-3) var(--cw-space-6);
  margin-bottom: var(--cw-space-4);
}

@media (max-width: 599px) {
  .cw-quick-verdict__items {
    grid-template-columns: 1fr;
  }
}

.cw-quick-verdict__item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--cw-space-2);
  font-size:   var(--cw-text-sm);
  line-height: 1.45;
}

.cw-quick-verdict__item-icon {
  flex-shrink:   0;
  width:         18px;
  height:        18px;
  margin-top:    2px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     11px;
  font-weight:   700;
}

.cw-quick-verdict__item--best .cw-quick-verdict__item-icon {
  background-color: var(--cw-success-light);
  color:            var(--cw-success-text);
}

.cw-quick-verdict__item--watch .cw-quick-verdict__item-icon {
  background-color: var(--cw-warning-light);
  color:            var(--cw-warning-text);
}

.cw-quick-verdict__item-label {
  font-weight: 600;
}

/* Footer row: score + badges */
.cw-quick-verdict__footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--cw-space-3);
  padding-top:     var(--cw-space-4);
  border-top:      1px solid var(--cw-border);
}

.cw-quick-verdict__badges {
  display:     flex;
  align-items: center;
  gap:         var(--cw-space-3);
  flex-wrap:   wrap;
}


/* =============================================================================
   13b. SAFETY CERTIFICATION BADGES (Story 3.5)
   Brand mark badges — Certified, Excellence, Editor's Choice
   SVG icon + text label, linked to explainer pages
============================================================================= */

/* Base badge link — inline-flex, centered alignment */
.cw-certified-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--cw-space-2);
  padding:         6px 14px;
  border-radius:   var(--cw-radius-full);
  background:      var(--cw-primary);
  color:           var(--cw-text-inverted);
  text-decoration: none;
  font-family:     var(--cw-font-body);
  font-weight:     600;
  font-size:       var(--cw-text-sm);
  white-space:     nowrap;
  transition:      box-shadow 200ms ease, transform 200ms ease;
  line-height:     1;
}
.cw-certified-badge:hover {
  box-shadow: var(--cw-shadow-md);
  transform:  translateY(-1px);
  color:      var(--cw-text-inverted);
}

/* Excellence variant — deep teal with gold accent */
.cw-certified-badge--excellence {
  background:    #065F46;
  border:        2px solid #D4AF37;
}

/* Icon container — holds the SVG */
.cw-certified-badge__icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
/* Size variants for SVG inside icon container */
.cw-certified-badge--lg .cw-certified-badge__icon svg {
  width:  64px;
  height: 77px;
}
.cw-certified-badge--md .cw-certified-badge__icon svg,
.cw-certified-badge__icon svg {
  width:  40px;
  height: 48px;
}
.cw-certified-badge--sm .cw-certified-badge__icon svg {
  width:  24px;
  height: 29px;
}

/* Text label */
.cw-certified-badge__text {
  font-size:   inherit;
  font-weight: 600;
}

/* Editor's Choice badge — gold medal with teal accents */
.cw-editors-choice-badge {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--cw-space-2);
  padding:         6px 14px;
  border-radius:   var(--cw-radius-full);
  background:      #D4AF37;
  color:           #065F46;
  text-decoration: none;
  font-family:     var(--cw-font-body);
  font-weight:     600;
  font-size:       var(--cw-text-sm);
  white-space:     nowrap;
  transition:      box-shadow 200ms ease, transform 200ms ease;
  line-height:     1;
}
.cw-editors-choice-badge:hover {
  box-shadow: var(--cw-shadow-md);
  transform:  translateY(-1px);
  color:      #065F46;
}

.cw-editors-choice-badge__icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.cw-editors-choice-badge--lg .cw-editors-choice-badge__icon svg {
  width:  64px;
  height: 77px;
}
.cw-editors-choice-badge--md .cw-editors-choice-badge__icon svg,
.cw-editors-choice-badge__icon svg {
  width:  40px;
  height: 48px;
}
.cw-editors-choice-badge--sm .cw-editors-choice-badge__icon svg {
  width:  24px;
  height: 29px;
}

.cw-editors-choice-badge__text {
  font-size:   inherit;
  font-weight: 600;
}


/* =============================================================================
   14. CW-03: MATCHMAKER QUIZ WIDGET
   Multi-step form — vanilla JS / Alpine.js compatible
   JS must add/remove .cw-quiz__step--active class per step
   PHP template: template-parts/cw-quiz.php
============================================================================= */

/* JS scroll reveal hook:
   document.querySelectorAll('.cw-safety-label__bar-fill').forEach(bar => {
     bar.style.width = '0%';
     const target = bar.dataset.width;
     requestAnimationFrame(() => { bar.style.width = target; });
   });
*/

.cw-quiz {
  background-color: var(--cw-surface);
  border-radius:    var(--cw-radius-lg);
  box-shadow:       var(--cw-shadow-xl);
  overflow:         hidden;
  max-width:        680px;
  margin:           0 auto;
}

/* Header / progress */
.cw-quiz__header {
  background: linear-gradient(135deg, var(--cw-primary-dark) 0%, var(--cw-primary) 100%);
  padding:    var(--cw-space-6);
}

.cw-quiz__progress-meta {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--cw-space-3);
}

.cw-quiz__progress-label {
  font-size:   var(--cw-text-xs);
  font-weight: 600;
  color:       rgba(255, 255, 255, 0.85);
}

.cw-quiz__progress-step {
  font-size:   var(--cw-text-xs);
  color:       rgba(255, 255, 255, 0.7);
}

.cw-quiz__progress-bar {
  height:        6px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: var(--cw-radius-full);
  overflow:      hidden;
}

.cw-quiz__progress-fill {
  height:        100%;
  background-color: var(--cw-text-inverted);
  border-radius: var(--cw-radius-full);
  transition:    width var(--cw-t-slow);
}

/* Question body */
.cw-quiz__body {
  padding: var(--cw-space-8) var(--cw-space-6);
}

.cw-quiz__question {
  font-family:   var(--cw-font-display);
  font-size:     var(--cw-text-h3);
  font-weight:   700;
  color:         var(--cw-text-primary);
  text-align:    center;
  margin-bottom: var(--cw-space-6);
  line-height:   1.3;
}

.cw-quiz__subtext {
  text-align:    center;
  font-size:     var(--cw-text-sm);
  color:         var(--cw-text-secondary);
  margin-top:    calc(-1 * var(--cw-space-4));
  margin-bottom: var(--cw-space-6);
}

/* Option cards */
.cw-quiz__options {
  display:     grid;
  gap:         var(--cw-space-3);
  list-style:  none;
  padding:     0;
  margin:      0 0 var(--cw-space-6);
}

.cw-quiz__options--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 560px) {
  .cw-quiz__options--2col {
    grid-template-columns: 1fr;
  }
}

.cw-quiz__option {
  position: relative;
}

.cw-quiz__option input[type="radio"],
.cw-quiz__option input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    100%;
  height:   100%;
  cursor:   pointer;
  z-index:  1;
  margin:   0;
}

.cw-quiz__option-card {
  display:          flex;
  align-items:      center;
  gap:              var(--cw-space-3);
  padding:          var(--cw-space-4) var(--cw-space-5);
  border:           2px solid var(--cw-border);
  border-radius:    var(--cw-radius-md);
  background-color: var(--cw-surface);
  cursor:           pointer;
  min-height:       64px;   /* WCAG touch target */
  transition:
    border-color     var(--cw-t-fast),
    background-color var(--cw-t-fast),
    transform        var(--cw-t-fast);
}

.cw-quiz__option input:checked + .cw-quiz__option-card {
  border-color:     var(--cw-primary);
  background-color: var(--cw-primary-pale);
}

.cw-quiz__option input:focus-visible + .cw-quiz__option-card {
  outline:        3px solid var(--cw-border-focus);
  outline-offset: 2px;
}

.cw-quiz__option-card:hover {
  border-color: var(--cw-primary);
  transform:    translateY(-2px);
}

.cw-quiz__option-icon {
  width:      40px;
  height:     40px;
  flex-shrink: 0;
}

.cw-quiz__option-text {
  flex: 1;
}

.cw-quiz__option-text strong {
  display:     block;
  font-weight: 600;
  font-size:   var(--cw-text-sm);
  color:       var(--cw-text-primary);
}

.cw-quiz__option-text span {
  font-size: 13px;
  color:     var(--cw-text-secondary);
}

/* Check indicator */
.cw-quiz__option-check {
  width:            20px;
  height:           20px;
  border-radius:    50%;
  border:           2px solid var(--cw-border);
  flex-shrink:      0;
  transition:       border-color var(--cw-t-fast), background-color var(--cw-t-fast);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.cw-quiz__option input:checked ~ .cw-quiz__option-card .cw-quiz__option-check {
  border-color:     var(--cw-primary);
  background-color: var(--cw-primary);
}

/* Navigation footer */
.cw-quiz__nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--cw-space-4) var(--cw-space-6);
  border-top:      1px solid var(--cw-border);
}

.cw-quiz__back-btn {
  background:  transparent;
  border:      none;
  font-size:   var(--cw-text-sm);
  font-weight: 500;
  color:       var(--cw-text-secondary);
  cursor:      pointer;
  padding:     var(--cw-space-2) var(--cw-space-3);
  border-radius: var(--cw-radius-sm);
  transition:  color var(--cw-t-fast), background-color var(--cw-t-fast);
}

.cw-quiz__back-btn:hover {
  color:            var(--cw-text-primary);
  background-color: var(--cw-bg);
}

.cw-quiz__back-btn[hidden] {
  visibility: hidden;
}

/* Processing state */
.cw-quiz__processing {
  padding:    var(--cw-space-16) var(--cw-space-6);
  text-align: center;
}

.cw-quiz__spinner {
  width:         48px;
  height:        48px;
  border:        4px solid var(--cw-border);
  border-top-color: var(--cw-primary);
  border-radius: 50%;
  margin:        0 auto var(--cw-space-4);
  animation:     cw-spin 0.75s linear infinite;
}

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

.cw-quiz__processing-text {
  font-size:   var(--cw-text-lg);
  font-weight: 600;
  color:       var(--cw-text-primary);
}

/* Results */
.cw-quiz__results {
  padding: var(--cw-space-6);
}

.cw-quiz__results-heading {
  font-family:   var(--cw-font-display);
  font-size:     var(--cw-text-h3);
  font-weight:   700;
  text-align:    center;
  margin-bottom: var(--cw-space-6);
}

/* Email capture */
.cw-quiz__email-capture {
  background-color: var(--cw-success-light);
  border:           1px solid var(--cw-success-border);
  border-radius:    var(--cw-radius-md);
  padding:          var(--cw-space-6);
  margin-top:       var(--cw-space-8);
  text-align:       center;
}

.cw-quiz__email-capture h3 {
  font-size:     var(--cw-text-h4);
  margin-bottom: var(--cw-space-2);
}

.cw-quiz__email-capture p {
  font-size:     var(--cw-text-sm);
  color:         var(--cw-text-secondary);
  margin-bottom: var(--cw-space-5);
  max-width:     none;
}

.cw-quiz__email-field {
  display:    flex;
  gap:        var(--cw-space-3);
  max-width:  420px;
  margin:     0 auto var(--cw-space-3);
}

.cw-quiz__email-field input[type="email"] {
  flex:          1;
  padding:       10px 16px;
  border:        1px solid var(--cw-border);
  border-radius: var(--cw-radius-sm);
  font-size:     var(--cw-text-sm);
  font-family:   var(--cw-font-body);
  color:         var(--cw-text-primary);
  background-color: var(--cw-surface);
  transition:    border-color var(--cw-t-fast), box-shadow var(--cw-t-fast);
}

.cw-quiz__email-field input[type="email"]:focus {
  outline:      none;
  border-color: var(--cw-primary);
  box-shadow:   0 0 0 3px rgba(13, 148, 136, 0.15);
}

.cw-quiz__email-field input[type="email"]::placeholder {
  color: var(--cw-text-muted);
}

.cw-quiz__email-privacy {
  font-size:     12px;
  color:         var(--cw-text-muted);
  margin-bottom: var(--cw-space-2);
}

.cw-quiz__email-skip {
  display:          block;
  margin:           var(--cw-space-2) auto 0;
  background:       none;
  border:           none;
  font-size:        12px;
  color:            var(--cw-text-muted);
  text-decoration:  underline;
  cursor:           pointer;
  font-family:      var(--cw-font-body);
}

.cw-quiz__email-skip:hover {
  color: var(--cw-text-secondary);
}

/* Mobile adjustments */
@media (max-width: 599px) {
  .cw-quiz__body { padding: var(--cw-space-6) var(--cw-space-4); }
  .cw-quiz__nav  { padding: var(--cw-space-4); }

  .cw-quiz__email-field {
    flex-direction: column;
  }
}


/* =============================================================================
   15. CW-04: COMPARISON TABLE
   Side-by-side up to 4 apps — horizontally scrollable on mobile
============================================================================= */

.cw-comparison-wrap {
  overflow-x:          auto;
  -webkit-overflow-scrolling: touch;
  border-radius:       var(--cw-radius-md);
  box-shadow:          var(--cw-shadow-sm);
}

.cw-comparison {
  width:           100%;
  min-width:       600px;
  border-collapse: collapse;
  background-color: var(--cw-surface);
}

.cw-comparison th,
.cw-comparison td {
  padding:       var(--cw-space-4) var(--cw-space-6);
  border-bottom: 1px solid var(--cw-border);
  text-align:    left;
  font-size:     var(--cw-text-sm);
  vertical-align: middle;
}

/* Header row */
.cw-comparison thead th {
  background-color: var(--cw-text-primary);
  color:            var(--cw-text-inverted);
  font-family:      var(--cw-font-display);
  font-weight:      700;
  position:         sticky;
  top:              0;
  z-index:          10;
  white-space:      nowrap;
}

.cw-comparison thead th:first-child {
  border-radius: var(--cw-radius-md) 0 0 0;
}

/* Row label column */
.cw-comparison td:first-child {
  font-weight:      600;
  color:            var(--cw-text-secondary);
  background-color: var(--cw-bg);
  white-space:      nowrap;
}

/* Winner highlight */
.cw-comparison__winner {
  background-color: rgba(5, 150, 105, 0.07) !important;
  font-weight:      700;
}

/* Score cells */
.cw-comparison__score-cell {
  font-weight: 700;
  font-size:   18px;
}

/* App header cell */
.cw-comparison__app-header {
  text-align:  center;
  padding-top: var(--cw-space-4);
}

.cw-comparison__app-name {
  display:       block;
  font-weight:   700;
  font-size:     15px;
  margin-bottom: var(--cw-space-2);
  color:         var(--cw-text-inverted);
}

.cw-comparison__swap-btn {
  background:    transparent;
  border:        1px solid rgba(255, 255, 255, 0.35);
  color:         rgba(255, 255, 255, 0.75);
  border-radius: var(--cw-radius-sm);
  padding:       3px 10px;
  font-size:     11px;
  cursor:        pointer;
  transition:    background-color var(--cw-t-fast), color var(--cw-t-fast);
  font-family:   var(--cw-font-body);
}

.cw-comparison__swap-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color:            var(--cw-text-inverted);
}

/* Checkmark / X cells */
.cw-comparison__check { color: var(--cw-success); font-weight: 700; }
.cw-comparison__cross { color: var(--cw-danger);  font-weight: 700; }


/* =============================================================================
   16. STATE COMPONENTS (Alert, Toast)
============================================================================= */

/* Alert */
.cw-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--cw-space-3);
  padding:       var(--cw-space-4) var(--cw-space-5);
  border-radius: var(--cw-radius-md);
  font-size:     var(--cw-text-sm);
  line-height:   1.5;
  margin-bottom: var(--cw-space-4);
}

.cw-alert__icon {
  flex-shrink:  0;
  width:        20px;
  height:       20px;
  margin-top:   1px;
}

.cw-alert__content > strong {
  display:       block;
  font-weight:   600;
  margin-bottom: 2px;
}

.cw-alert--success {
  background-color: var(--cw-success-light);
  color:            var(--cw-success-text);
  border:           1px solid var(--cw-success-border);
}

.cw-alert--warning {
  background-color: var(--cw-warning-light);
  color:            var(--cw-warning-text);
  border:           1px solid var(--cw-warning-border);
}

.cw-alert--error {
  background-color: var(--cw-danger-light);
  color:            var(--cw-danger-text);
  border:           1px solid var(--cw-danger-border);
}

.cw-alert--info {
  background-color: var(--cw-primary-pale);
  color:            var(--cw-primary-darker);
  border:           1px solid var(--cw-primary-light);
}

/* Toast — bottom-center mobile, bottom-right desktop */
.cw-toast {
  position:         fixed;
  bottom:           24px;
  left:             50%;
  transform:        translateX(-50%);
  background-color: var(--cw-text-primary);
  color:            var(--cw-text-inverted);
  padding:          var(--cw-space-3) var(--cw-space-6);
  border-radius:    var(--cw-radius-full);
  font-size:        var(--cw-text-sm);
  font-weight:      500;
  box-shadow:       var(--cw-shadow-xl);
  z-index:          9999;
  white-space:      nowrap;
  animation:        cw-toast-in 0.3s ease forwards;
}

@keyframes cw-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (min-width: 768px) {
  .cw-toast {
    left:      auto;
    right:     24px;
    transform: none;
    animation: cw-toast-in-desktop 0.3s ease forwards;
  }

  @keyframes cw-toast-in-desktop {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}


/* =============================================================================
   17. HOMEPAGE HERO — V3 (Epic 2) — 2-col grid, dark teal, tabbed widget
   .cw-hero           — dark teal hero wrapper
   .cw-hero__inner    — 2-col grid container (left copy + right widget)
   .cw-hero__eyebrow  — small uppercase label above H1
   .cw-hero__headline — H1 (white, large)
   .cw-hero__sub      — subtitle paragraph
   .cw-hero__cta      — CTA button group row
   .cw-hero__widget   — white card widget (right column)
   .cw-hero-strip     — darker teal trust stats strip below hero grid
============================================================================= */

.cw-hero {
  background-color: var(--cw-primary-dark);
  position:         relative;
  overflow:         hidden;
}

/* Subtle diagonal overlay — right side accent */
.cw-hero::after {
  content:        '';
  position:       absolute;
  top:            0;
  right:          0;
  width:          38%;
  height:         100%;
  background:     rgba(255, 255, 255, 0.03);
  clip-path:      polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

.cw-hero__inner {
  max-width:             var(--cw-max-width);
  margin:                0 auto;
  padding:               var(--cw-space-16) var(--cw-space-8) 0;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--cw-space-12);
  align-items:           start;
  position:              relative;
  z-index:               1;
}

.cw-hero__eyebrow {
  display:        block;
  font-family:    var(--cw-font-body);
  font-size:      var(--cw-text-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.70);
  margin-bottom:  var(--cw-space-4);
}

.cw-hero__headline {
  font-family:   var(--cw-font-display);
  font-size:     var(--cw-text-hero);
  font-weight:   800;
  color:         var(--cw-text-inverted);
  line-height:   1.15;
  margin-bottom: var(--cw-space-4);
}

.cw-hero__sub {
  font-size:     var(--cw-text-lg);
  color:         rgba(255, 255, 255, 0.82);
  line-height:   1.7;
  max-width:     520px;
  margin-bottom: var(--cw-space-8);
}

.cw-hero__cta {
  display:     flex;
  align-items: center;
  gap:         var(--cw-space-4);
  flex-wrap:   wrap;
}

/* Right column white card widget */
.cw-hero__widget {
  background:    var(--cw-surface);
  border-radius: var(--cw-radius-lg);
  box-shadow:    var(--cw-shadow-xl);
  overflow:      hidden;
  margin-top:    var(--cw-space-8);
}

.cw-hero__widget-tabs {
  display:        flex;
  border-bottom:  1px solid var(--cw-border);
  overflow-x:     auto;
  scrollbar-width: none;
}

.cw-hero__widget-tabs::-webkit-scrollbar {
  display: none;
}

.cw-hero__widget-tab {
  font-family:    var(--cw-font-body);
  font-size:      13px;
  font-weight:    500;
  color:          var(--cw-text-muted);
  padding:        14px 16px;
  border:         none;
  border-bottom:  2px solid transparent;
  background:     none;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     color var(--cw-t-fast);
  position:       relative;
  bottom:         -1px;
}

.cw-hero__widget-tab:hover { color: var(--cw-primary); }

.cw-hero__widget-tab--active {
  color:         var(--cw-primary);
  border-bottom: 2px solid var(--cw-primary);
  font-weight:   600;
}

.cw-hero__widget-body {
  padding: var(--cw-space-6);
}

.cw-hero__widget-label {
  font-size:     var(--cw-text-sm);
  color:         var(--cw-text-secondary);
  margin-bottom: var(--cw-space-4);
}

.cw-hero__widget-chips {
  display:       flex;
  gap:           var(--cw-space-2);
  flex-wrap:     wrap;
  margin-bottom: var(--cw-space-4);
}

.cw-hero__answer-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       9px 16px;
  border:        1.5px solid var(--cw-border);
  border-radius: var(--cw-radius-sm);
  font-family:   var(--cw-font-body);
  font-size:     14px;
  font-weight:   500;
  color:         var(--cw-text-primary);
  cursor:        pointer;
  transition:    all var(--cw-t-fast);
  background:    var(--cw-surface);
}

.cw-hero__answer-chip:hover,
.cw-hero__answer-chip--selected {
  border-color: var(--cw-primary);
  background:   var(--cw-primary-light);
  color:        var(--cw-primary-dark);
}

.cw-hero__search-input {
  width:       100%;
  padding:     12px 16px;
  border:      1.5px solid var(--cw-border);
  border-radius: var(--cw-radius-sm);
  font-family: var(--cw-font-body);
  font-size:   14px;
  color:       var(--cw-text-primary);
  margin-bottom: var(--cw-space-4);
  outline:     none;
  transition:  border-color var(--cw-t-fast);
}

.cw-hero__search-input:focus {
  border-color: var(--cw-primary);
}

.cw-hero__widget-note {
  text-align:  center;
  font-size:   12px;
  color:       var(--cw-text-muted);
  margin-top:  var(--cw-space-3);
  margin-bottom: 0;
}

/* Trust stats strip below hero grid — darker teal band */
.cw-hero-strip {
  background-color: var(--cw-primary-darker);
  margin-top:       var(--cw-space-12);
  position:         relative;
  z-index:          1;
}

.cw-hero-strip__inner {
  max-width:  var(--cw-max-width);
  margin:     0 auto;
  padding:    var(--cw-space-4) var(--cw-space-8);
  display:    flex;
  align-items: center;
  justify-content: center;
}

.cw-hero-strip__stat {
  text-align: center;
  padding:    0 var(--cw-space-12);
  flex:       1;
}

.cw-hero-strip__stat:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.cw-hero-strip__number {
  display:     block;
  font-family: var(--cw-font-display);
  font-size:   22px;
  font-weight: 700;
  color:       var(--cw-text-inverted);
}

.cw-hero-strip__label {
  font-size: var(--cw-text-xs);
  color:     rgba(255, 255, 255, 0.70);
}

/* Responsive hero */
@media (max-width: 1023px) {
  .cw-hero__inner {
    grid-template-columns: 1fr;
    padding-top: var(--cw-space-12);
  }

  .cw-hero__widget {
    margin-top: 0;
  }

  .cw-hero-strip__stat {
    padding: 0 var(--cw-space-6);
  }
}

@media (max-width: 767px) {
  .cw-hero__inner {
    padding-top:   var(--cw-space-8);
    padding-left:  var(--cw-space-4);
    padding-right: var(--cw-space-4);
  }

  .cw-hero-strip__inner {
    flex-direction: column;
    gap:            var(--cw-space-4);
    padding:        var(--cw-space-6) var(--cw-space-4);
  }

  .cw-hero-strip__stat {
    border-right:  none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding:       var(--cw-space-4) 0;
    width:         100%;
  }

  .cw-hero-strip__stat:last-child {
    border-bottom: none;
  }
}


/* =============================================================================
   18. GENERATEPRESS OVERRIDES
   All overrides use !important where GeneratePress applies inline or specificity-
   winning styles. Targets documented per GeneratePress Gotchas reference.
============================================================================= */

/* Site header */
.site-header {
  background-color: var(--cw-surface)  !important;
  border-bottom:    1px solid var(--cw-border);
  box-shadow:       0 1px 8px rgba(0, 0, 0, 0.05);
}

/* Logo area */
.site-branding .site-title a {
  color:       var(--cw-text-primary) !important;
  font-family: var(--cw-font-display) !important;
  font-weight: 800                    !important;
}

/* Primary nav links */
.main-navigation .menu-item > a,
.main-navigation .menu-item > a:visited {
  font-family: var(--cw-font-display) !important;
  font-size:   var(--cw-text-sm)     !important;
  font-weight: 500                   !important;
  color:       var(--cw-text-primary) !important;
  transition:  color var(--cw-t-fast);
}

.main-navigation .menu-item > a:hover,
.main-navigation .current-menu-item > a {
  color: var(--cw-primary) !important;
}

/* "Take the Quiz" nav item — must be added as a menu item with CSS class "menu-item--quiz" */
.main-navigation .menu-item--quiz > a {
  background-color: var(--cw-accent)       !important;
  color:            var(--cw-text-inverted) !important;
  padding:          8px 20px               !important;
  border-radius:    var(--cw-radius-full)  !important;
  transition:       background-color var(--cw-t-fast), transform var(--cw-t-fast) !important;
}

.main-navigation .menu-item--quiz > a:hover {
  background-color: var(--cw-accent-dark) !important;
  transform:        translateY(-1px);
}

/* Dropdown menus */
.main-navigation .sub-menu {
  border:        1px solid var(--cw-border) !important;
  box-shadow:    var(--cw-shadow-lg) !important;
  border-radius: var(--cw-radius-md) !important;
  overflow:      hidden;
}

.main-navigation .sub-menu .menu-item > a {
  padding: var(--cw-space-3) var(--cw-space-4) !important;
}

/* --- Footer --- */
/* GeneratePress gotcha: #footer-widgets has its own white bg — must !important */
#footer-widgets {
  background-color: var(--cw-text-primary) !important;
  color:            rgba(255, 255, 255, 0.75);
  padding:          0;
}

/* .inside-footer-widgets is the grid target (NOT .footer-widgets-container) */
.inside-footer-widgets {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   var(--cw-space-8);
  padding:               var(--cw-space-12) var(--cw-space-8);
  max-width:             var(--cw-max-width);
  margin:                0 auto;
}

@media (max-width: 1023px) {
  .inside-footer-widgets {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--cw-space-6);
  }
}

@media (max-width: 599px) {
  .inside-footer-widgets {
    grid-template-columns: 1fr;
    padding:               var(--cw-space-8) var(--cw-space-4);
  }
}

#footer-widgets .widget-title {
  font-family:    var(--cw-font-display) !important;
  font-size:      12px                   !important;
  font-weight:    700                    !important;
  letter-spacing: 0.1em                 !important;
  text-transform: uppercase              !important;
  color:          var(--cw-text-inverted) !important;
  margin-bottom:  var(--cw-space-4)      !important;
}

#footer-widgets a,
#footer-widgets a:visited {
  color:           rgba(255, 255, 255, 0.65) !important;
  text-decoration: none;
  font-size:       var(--cw-text-sm);
  transition:      color var(--cw-t-fast);
}

#footer-widgets a:hover {
  color: var(--cw-primary-light) !important;
}

#footer-widgets p,
#footer-widgets li {
  font-size:     var(--cw-text-sm);
  color:         rgba(255, 255, 255, 0.65);
  margin-bottom: var(--cw-space-2);
}

#footer-widgets ul {
  list-style: none;
  padding:    0;
  margin:     0;
}

/* Site footer bar (below widgets) */
.site-footer {
  background-color: #0B1120 !important;
  color:            rgba(255, 255, 255, 0.45);
  font-size:        var(--cw-text-xs);
  padding:          var(--cw-space-4) 0;
  border-top:       1px solid rgba(255, 255, 255, 0.06);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.55);
}

.site-footer a:hover {
  color: var(--cw-primary-light);
}

/* Breadcrumb */
.breadcrumb-trail {
  font-size:     var(--cw-text-xs);
  color:         var(--cw-text-muted);
  margin-bottom: var(--cw-space-4);
}

.breadcrumb-trail a {
  color: var(--cw-primary-dark);
}

.breadcrumb-trail .trail-item:not(:last-child)::after {
  content: ' / ';
  color:   var(--cw-text-muted);
}

/* Pagination */
.pagination .page-numbers {
  padding:          8px 14px;
  border:           1px solid var(--cw-border);
  border-radius:    var(--cw-radius-sm);
  color:            var(--cw-text-primary);
  text-decoration:  none;
  transition:       border-color var(--cw-t-fast), background-color var(--cw-t-fast);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background-color: var(--cw-primary);
  border-color:     var(--cw-primary);
  color:            var(--cw-text-inverted);
}

/* Back to top */
.generate-back-to-top {
  background-color: var(--cw-primary) !important;
  border-radius:    var(--cw-radius-md) !important;
}

.generate-back-to-top:hover {
  background-color: var(--cw-primary-dark) !important;
}

/* =============================================================================
   18B. HOMEPAGE LAYOUT OVERRIDES (scoped to homepage template)
   PHP hooks handle: no-sidebar, hide title, remove separate-containers,
   disable breadcrumbs. CSS handles remaining container width overrides.
============================================================================= */

body.cw-page-homepage #page.site.grid-container {
  max-width: none;
  padding: 0;
}

body.cw-page-homepage .site-content {
  padding: 0;
  margin: 0;
}

body.cw-page-homepage .inside-article {
  padding: 0;
  margin: 0;
}

body.cw-page-homepage .entry-content {
  max-width: none;
  padding: 0;
}

body.cw-page-homepage .page-header,
body.cw-page-homepage .entry-header {
  display: none;
}


/* =============================================================================
   19. SCROLL REVEAL ANIMATIONS
   JavaScript adds .cw-reveal--visible when element enters viewport.
   Use IntersectionObserver (see functions.php enqueue):

   const observer = new IntersectionObserver((entries) => {
     entries.forEach(el => {
       if (el.isIntersecting) {
         el.target.classList.add('cw-reveal--visible');
         observer.unobserve(el.target);
       }
     });
   }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
   document.querySelectorAll('.cw-reveal').forEach(el => observer.observe(el));
============================================================================= */

.cw-reveal {
  opacity:    0;
  transform:  translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.cw-reveal.cw-reveal--visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger delays — apply to child elements */
.cw-reveal--d1 { transition-delay: 0.08s; }
.cw-reveal--d2 { transition-delay: 0.16s; }
.cw-reveal--d3 { transition-delay: 0.24s; }
.cw-reveal--d4 { transition-delay: 0.32s; }
.cw-reveal--d5 { transition-delay: 0.40s; }

/* Card hover lift (static — no JS needed) */
.cw-hover-lift {
  transition: transform var(--cw-t-base), box-shadow var(--cw-t-base);
}

.cw-hover-lift:hover {
  transform:  translateY(-4px);
  box-shadow: var(--cw-shadow-lg);
}


/* =============================================================================
   20. FORM SHARED STYLES
   Base input/select/textarea tokens for GeneratePress + CW forms
============================================================================= */

.cw-input,
input[type="text"].cw-input,
input[type="email"].cw-input,
input[type="search"].cw-input,
textarea.cw-input {
  display:          block;
  width:            100%;
  padding:          10px 16px;
  border:           1px solid var(--cw-border);
  border-radius:    var(--cw-radius-sm);
  font-size:        var(--cw-text-sm);
  font-family:      var(--cw-font-body);
  color:            var(--cw-text-primary);
  background-color: var(--cw-surface);
  transition:       border-color var(--cw-t-fast), box-shadow var(--cw-t-fast);
  appearance:       none;
}

.cw-input:focus {
  outline:      none;
  border-color: var(--cw-border-focus);
  box-shadow:   0 0 0 3px rgba(13, 148, 136, 0.15);
}

.cw-input.cw-input--error {
  border-color: var(--cw-danger);
}

.cw-input.cw-input--error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.cw-input::placeholder {
  color: var(--cw-text-muted);
}

.cw-label {
  display:       block;
  font-size:     var(--cw-text-sm);
  font-weight:   600;
  color:         var(--cw-text-primary);
  margin-bottom: var(--cw-space-2);
}

.cw-field-error {
  font-size:   13px;
  color:       var(--cw-danger-text);
  margin-top:  var(--cw-space-1);
  font-weight: 500;
}


/* =============================================================================
   21. UTILITY CLASSES
============================================================================= */

.cw-text-center  { text-align: center; }
.cw-text-left    { text-align: left; }
.cw-text-muted   { color: var(--cw-text-secondary); }
.cw-text-primary { color: var(--cw-text-primary); }
.cw-text-brand   { color: var(--cw-primary-dark); }

.cw-sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

.cw-mt-4  { margin-top:    var(--cw-space-4); }
.cw-mt-8  { margin-top:    var(--cw-space-8); }
.cw-mb-4  { margin-bottom: var(--cw-space-4); }
.cw-mb-8  { margin-bottom: var(--cw-space-8); }

.cw-divider {
  border:        none;
  border-top:    1px solid var(--cw-border);
  margin:        var(--cw-space-8) 0;
}

/* Sticky sidebar card */
.cw-sticky-card {
  position: sticky;
  top:      var(--cw-space-6);
}

/* "How We Score" inline link pattern */
.cw-methodology-link {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-size:   var(--cw-text-xs);
  font-weight: 600;
  color:       var(--cw-primary-dark);
  text-decoration: none;
  border-bottom: 1px dashed var(--cw-primary-light);
  transition:    border-color var(--cw-t-fast), color var(--cw-t-fast);
}

.cw-methodology-link:hover {
  color:        var(--cw-primary);
  border-color: var(--cw-primary);
}

/* Version history toggle */
.cw-version-toggle {
  background:    none;
  border:        none;
  font-size:     var(--cw-text-xs);
  color:         var(--cw-primary-dark);
  text-decoration: underline;
  cursor:        pointer;
  font-family:   var(--cw-font-body);
  padding:       0;
}

.cw-version-history {
  border-left: 2px solid var(--cw-primary-light);
  padding-left: var(--cw-space-4);
  margin-top:   var(--cw-space-4);
}

.cw-version-history__entry {
  display:       flex;
  gap:           var(--cw-space-4);
  padding:       var(--cw-space-3) 0;
  border-bottom: 1px dashed var(--cw-border);
  font-size:     var(--cw-text-xs);
}

.cw-version-history__date {
  color:       var(--cw-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.cw-version-history__change {
  color: var(--cw-text-primary);
}


/* =============================================================================
   22. FOOTER — Epic 2 Story 2.1
   .cw-footer        — outer wrapper (legal strip above GP footer widgets)
   .cw-footer__legal — inner padded container for disclaimer, FTC, nav
   .cw-footer__disclaimer — medical disclaimer text
   .cw-footer__ftc   — FTC affiliate/sponsor disclosure
   .cw-footer__nav   — footer nav wrapper
   .cw-footer__links — ul of footer page links
   .cw-footer__copy  — copyright line
============================================================================= */

.cw-footer {
  background-color: var(--cw-primary-darker);
  color:            var(--cw-text-inverted);
}

.cw-footer__legal {
  padding: var(--cw-space-12) 0 var(--cw-space-8);
}

.cw-footer__disclaimer {
  font-size:     var(--cw-text-sm);
  line-height:   1.6;
  color:         rgba(255, 255, 255, 0.85);
  max-width:     680px;
  margin-bottom: var(--cw-space-4);
  border-left:   3px solid rgba(255, 255, 255, 0.25);
  padding-left:  var(--cw-space-4);
}

.cw-footer__ftc {
  font-size:     var(--cw-text-xs);
  color:         rgba(255, 255, 255, 0.6);
  margin-bottom: var(--cw-space-6);
  font-style:    italic;
}

.cw-footer__nav {
  margin-bottom: var(--cw-space-6);
}

.cw-footer__links {
  list-style:  none;
  margin:      0;
  padding:     0;
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--cw-space-2) var(--cw-space-6);
}

.cw-footer__links li {
  margin: 0;
}

.cw-footer__links a {
  font-size:       var(--cw-text-xs);
  font-weight:     500;
  color:           rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition:      color var(--cw-t-fast);
}

.cw-footer__links a:hover {
  color:           var(--cw-text-inverted);
  text-decoration: underline;
}

.cw-footer__copy {
  font-size:  var(--cw-text-xs);
  color:      rgba(255, 255, 255, 0.45);
  margin-top: var(--cw-space-6);
  margin-bottom: 0;
}

/* Nav quiz CTA — pill injected into primary nav */
.cw-nav-quiz-cta a,
.cw-nav-quiz-cta .cw-btn--accent {
  /* Overrides standard nav-link styling so it renders as the accent pill */
  text-decoration: none !important;
}

/* Responsive footer */
@media (max-width: 767px) {
  .cw-footer__legal {
    padding: var(--cw-space-8) 0 var(--cw-space-6);
  }

  .cw-footer__links {
    flex-direction: column;
    gap:            var(--cw-space-2);
  }
}


/* =============================================================================
   22B. HOMEPAGE SECTIONS — Epic 2 Story 2.2
   Safety Explainer, Reviews Placeholder, Trust Signals, Email Opt-in
============================================================================= */

/* --- Safety Index Explainer --- */
.cw-safety-explainer {
  background-color: var(--cw-bg);
}

.cw-safety-explainer__features {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--cw-space-6);
  margin-top:            var(--cw-space-8);
}

.cw-safety-feature-card {
  background:    var(--cw-surface);
  border:        1px solid var(--cw-border);
  border-radius: var(--cw-radius-lg);
  padding:       var(--cw-space-8);
  text-align:    center;
  transition:    box-shadow var(--cw-t-base), transform var(--cw-t-base);
}

.cw-safety-feature-card:hover {
  box-shadow: var(--cw-shadow-md);
  transform:  translateY(-3px);
}

.cw-safety-feature-card__icon {
  font-size:     48px;
  margin-bottom: var(--cw-space-4);
  display:       block;
}

.cw-safety-feature-card__title {
  font-family:   var(--cw-font-display);
  font-size:     var(--cw-text-h4);
  font-weight:   700;
  color:         var(--cw-text-primary);
  margin-bottom: var(--cw-space-3);
}

.cw-safety-feature-card__desc {
  font-size:  var(--cw-text-sm);
  color:      var(--cw-text-secondary);
  line-height: 1.6;
  margin:     0;
}

/* --- Reviews Placeholder --- */
.cw-reviews-placeholder {
  background-color: var(--cw-surface);
}

.cw-reviews-placeholder__message {
  text-align:  center;
  padding:     var(--cw-space-12) var(--cw-space-8);
  color:       var(--cw-text-muted);
  font-size:   var(--cw-text-sm);
  border:      2px dashed var(--cw-border);
  border-radius: var(--cw-radius-lg);
  margin-top:  var(--cw-space-8);
}

/* --- Trust Signals --- */
.cw-trust-signals {
  background-color: var(--cw-primary-pale);
}

.cw-trust-signals__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--cw-space-6);
  margin-top:            var(--cw-space-8);
}

.cw-trust-card {
  background:    var(--cw-surface);
  border:        1px solid var(--cw-border);
  border-radius: var(--cw-radius-md);
  padding:       var(--cw-space-6);
  text-align:    center;
}

.cw-trust-card__icon {
  font-size:     40px;
  margin-bottom: var(--cw-space-3);
  display:       block;
}

.cw-trust-card__title {
  font-family:   var(--cw-font-display);
  font-size:     var(--cw-text-sm);
  font-weight:   700;
  color:         var(--cw-text-primary);
  margin-bottom: var(--cw-space-2);
}

.cw-trust-card__desc {
  font-size: var(--cw-text-xs);
  color:     var(--cw-text-secondary);
  line-height: 1.5;
  margin:    0;
}

/* --- Email Opt-in Section --- */
.cw-email-optin {
  background-color: var(--cw-primary-dark);
  color:            var(--cw-text-inverted);
}

.cw-email-optin .cw-section-header__eyebrow {
  color: rgba(255, 255, 255, 0.80);
}

.cw-email-optin .cw-section-header h2 {
  color: var(--cw-text-inverted);
}

.cw-email-optin .cw-section-header p {
  color: rgba(255, 255, 255, 0.80);
}

.cw-email-optin__form-wrap {
  max-width:  560px;
  margin:     var(--cw-space-8) auto 0;
  text-align: center;
}

/* Gravity Forms overrides inside opt-in section */
.cw-email-optin .gform_wrapper input[type="email"],
.cw-email-optin .gform_wrapper input[type="text"] {
  border:        2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--cw-radius-full);
  background:    rgba(255, 255, 255, 0.12);
  color:         var(--cw-text-inverted);
  padding:       12px 20px;
}

.cw-email-optin .gform_wrapper input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.cw-email-optin .gform_wrapper .gform_submit_button,
.cw-email-optin .gform_wrapper input[type="submit"] {
  background-color: var(--cw-accent) !important;
  border-color:     var(--cw-accent) !important;
  border-radius:    var(--cw-radius-full) !important;
  color:            var(--cw-text-inverted) !important;
  font-family:      var(--cw-font-display) !important;
  font-weight:      600 !important;
  padding:          12px 28px !important;
  min-height:       44px !important;
  cursor:           pointer !important;
}

.cw-email-optin__gf-notice {
  margin-top:  var(--cw-space-4);
  font-size:   var(--cw-text-xs);
  color:       rgba(255, 255, 255, 0.55);
}

/* Responsive section grids */
@media (max-width: 1023px) {
  .cw-safety-explainer__features { grid-template-columns: 1fr; }
  .cw-trust-signals__grid        { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .cw-trust-signals__grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   24. PRINT STYLES
============================================================================= */

@media print {
  .cw-hero,
  .cw-quiz,
  .site-header,
  #footer-widgets,
  .site-footer,
  .main-navigation,
  .cw-btn--accent,
  .cw-sponsored__tooltip,
  .cw-toast {
    display: none !important;
  }

  body {
    font-size:   12pt;
    color:       #000;
    background:  #fff;
    font-family: Georgia, serif;
  }

  .cw-safety-label {
    box-shadow:  none;
    border:      1px solid #000;
    break-inside: avoid;
  }

  .cw-safety-label__bar-fill {
    -webkit-print-color-adjust: exact;
    print-color-adjust:         exact;
  }

  a {
    text-decoration: underline;
    color:           #000;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555;
  }

  h1, h2, h3 {
    break-after: avoid;
  }
}