/* ═══════════════════════════════════════════════════════
   EDUBRACKET  - Design System
   Visual Style: Academic editorial (cool whites, teal accent)
   Accent: Teal (#0d7377) + Gold (#d97706)
   Typography: Literata / Inter / IBM Plex Mono
   ═══════════════════════════════════════════════════════ */

/* Fonts loaded by site.engine.js  - no @import needed here */

:root {
  --accent: #0d7377;
  --accent-hover: #0a5c5f;
  --accent-light: #e6f5f5;
  --accent-dim: rgba(13,115,119,0.08);
  --secondary: #d97706;
  --secondary-light: #fef3c7;
  --success: #059669;
  --success-light: #d1fae5;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --info: #2563eb;
  --info-light: #dbeafe;

  --bg: #f8fafb;
  --surface: #f1f5f9;
  --surface-dark: #e2e8f0;
  --text: #0f172a;
  --text-secondary: #475569;
  --muted: #64748b;
  --dim: #94a3b8;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;

  --font-display: 'Literata', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max-w: 820px;
  --wide: 960px;
  --radius: 10px;
  --radius-sm: 6px;

  /* Glass & Glow */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(13, 115, 119, 0.08);
  --glass-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --glass-shadow-hover: 0 12px 40px rgba(13, 115, 119, 0.08), 0 0 60px rgba(13, 115, 119, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glow-teal: rgba(13, 115, 119, 0.06);
  --glow-gold: rgba(217, 119, 6, 0.04);
  --glow-blue: rgba(37, 99, 235, 0.04);
  --transition-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-snappy: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Category colors */
  --cat-platforms: #0d7377;
  --cat-courses: #2563eb;
  --cat-certifications: #d97706;
  --cat-creators: #059669;
  --cat-career: #6366f1;
  --cat-free: #64748b;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: #f0f4f7;
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(13,115,119,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 85% 70%, rgba(217,119,6,0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(37,99,235,0.03) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%230d7377' opacity='0.045'%3E%3Ccircle cx='100' cy='100' r='80' stroke-width='0.5'/%3E%3Ccircle cx='100' cy='100' r='60' stroke-width='0.3'/%3E%3Ccircle cx='100' cy='100' r='40' stroke-width='0.3'/%3E%3Cpath d='M100 20v160M20 100h160' stroke-width='0.3'/%3E%3Cpath d='M44 44l112 112M156 44L44 156' stroke-width='0.2' opacity='.5'/%3E%3Ccircle cx='100' cy='20' r='2' fill='%230d7377' opacity='.15'/%3E%3Ccircle cx='100' cy='180' r='2' fill='%230d7377' opacity='.15'/%3E%3Ccircle cx='20' cy='100' r='2' fill='%230d7377' opacity='.15'/%3E%3Ccircle cx='180' cy='100' r='2' fill='%230d7377' opacity='.15'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 100% 100%, 100% 100%, 200px 200px;
  background-attachment: fixed, fixed, fixed, scroll;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── NETWORK BAR (removed) ── */
.network-bar { display: none; }

/* ── DISCLOSURE ── */
.disclosure {
  background: linear-gradient(135deg, rgba(13,115,119,0.05) 0%, rgba(240,244,247,0.8) 50%, rgba(217,119,6,0.03) 100%);
  border-bottom: 1px solid rgba(13,115,119,0.08);
  padding: .5rem 1.5rem;
  font-size: .72rem;
  color: var(--muted);
  text-align: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.disclosure a { color: var(--accent); font-weight: 600; }

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid rgba(13, 115, 119, 0.15);
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 0 80px rgba(13,115,119,0.04);
}
.nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(13,115,119,0.4) 30%, rgba(217,119,6,0.3) 70%, transparent 95%);
}
.nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #f8fafc;
  letter-spacing: -.02em;
  text-shadow: 0 0 20px rgba(13,115,119,0.3);
}
.nav-brand em { color: #5eead4; font-style: normal; }
.nav-links { display: flex; gap: 1.25rem; font-size: .8125rem; font-weight: 500; }
.nav-links a { color: #94a3b8; transition: all .2s var(--transition-snappy); position: relative; }
.nav-links a:hover { color: #f8fafc; text-decoration: none; }
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background:var(--accent-fill,var(--accent));
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform .25s var(--transition-spring);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta {
  background: linear-gradient(135deg, var(--accent) 0%, #0a9396 100%);
  color: #fff;
  padding: .4rem .95rem;
  border-radius: var(--radius-sm);
  font-size: .75rem;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(13,115,119,0.3), 0 0 20px rgba(13,115,119,0.1);
  transition: all .3s var(--transition-snappy);
}
.nav-cta:hover { background: linear-gradient(135deg, #0a9396 0%, var(--accent) 100%); text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(13,115,119,0.4), 0 0 30px rgba(13,115,119,0.15); }

/* ── HERO (homepage) ── */
.hero-home {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 3.5rem 1.5rem 2.5rem;
  text-align: center;
}
.hero-home h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .75rem;
}
.hero-home h1 em { color: var(--accent); font-style: italic; }
.hero-home .tagline {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 1.5rem;
}
.hero-home .stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.hero-home .stat {
  text-align: center;
}
.hero-home .stat-num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
}
.hero-home .stat-label {
  font-size: .75rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── HERO (article) ── */
.hero-article {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1.5rem;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.hero-cat {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.hero-tag-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background:var(--accent-fill,var(--accent));
  color: #fff;
  padding: .15rem .5rem;
  border-radius: 3px;
}
.hero-byline { font-size: .8rem; color: var(--dim); }
.hero-byline strong { color: var(--muted); }
.hero-date { font-family: var(--font-mono); font-size: .75rem; color: var(--dim); }
.hero-article h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .75rem;
}
.hero-intro {
  font-size: 1rem;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
}
.hero-img {
  width: 100%;
  max-width: var(--wide);
  margin: 1.25rem auto 0;
  border-radius: var(--radius);
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* ── ARTICLE BODY ── */
.article {
  /* `max-width: var(--max-w)` (820px) with no lower bound made every article and college page scroll
     sideways on a phone: measured 820/390 on articles and 573/390 on colleges, on LIVE pages.
     `.article` is a body child with `min-width: auto`, so it refuses to shrink below its content and
     the 820px measure becomes a floor rather than a cap.
     `min()` keeps the reading measure identical at every width >= 820px and lets it shrink below.
     Verified before/after at 390 / 768 / 1440: mobile fixed, tablet and desktop unchanged.
     NOTE the value is a CSS VARIABLE, which is why the first repair pass  - scanning for a literal
     `NNNpx`  - reported a confident zero hits on exactly the pages that were broken. */
  max-width: min(var(--max-w), 100%);
  min-width: 0;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  counter-reset: article-section;
}
.article h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--accent);
}
.article h2 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--text);
  margin: 3rem 0 1rem;
  padding: .75rem 0 .75rem 1.25rem;
  border-left: 3px solid var(--accent);
  border-bottom: none;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 60%);
  counter-increment: article-section;
}
.article h2::before {
  content: counter(article-section, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  color: #fff;
  display: inline-block;
  margin-bottom: .25rem;
  letter-spacing: .08em;
  background:var(--accent-fill,var(--accent));
  padding: .1rem .45rem;
  border-radius: 3px;
}
.article h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin: 2rem 0 .5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--secondary);
}
.article > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  float: left;
  line-height: .85;
  margin: .05rem .5rem 0 0;
  color: var(--accent);
  text-shadow: 0 0 30px rgba(13, 115, 119, 0.15);
}
.article p { margin-bottom: 1rem; }
.article ul, .article ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.article li { margin-bottom: .4rem; }
.article strong { color: var(--text); }

/* ── ORGANIC DIVIDER ── */
.article hr, .ornament {
  border: none;
  margin: 2.5rem auto;
  height: 2px;
  max-width: 120px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), var(--accent), transparent);
  border-radius: 1px;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--dim);
  margin-bottom: 1rem;
  padding: .75rem 0;
  border-bottom: 1px dotted var(--border);
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); text-decoration: none; }

/* ── ARTICLE META BAR ── */
.article-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .75rem;
  color: var(--dim);
  margin-bottom: 1.5rem;
  padding: .6rem .85rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* ── CATEGORY GRID (homepage) ── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  max-width: var(--wide);
  margin: 0 auto 0;
  padding: 0 1.5rem;
}
.cat-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--glass-border);
  border-bottom: 3px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem .75rem;
  text-align: center;
  transition: all 0.4s var(--transition-spring);
  text-decoration: none;
  color: var(--text);
  position: relative;
  overflow: hidden;
  box-shadow: var(--glass-shadow);
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s var(--transition-spring);
  pointer-events: none;
  border-radius: var(--radius);
  background: radial-gradient(circle at 50% 50%, var(--glow-teal) 0%, transparent 70%);
}
.cat-card:hover {
  border-bottom-color: var(--accent);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
}
.cat-card:hover::before {
  opacity: 1;
}
.cat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto .35rem;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  transition: all 0.3s var(--transition-spring);
}
.cat-card:hover .cat-icon {
  transform: scale(1.12);
  background: rgba(13, 115, 119, 0.12);
}
.cat-icon-platforms { color: var(--cat-platforms); background: rgba(13, 115, 119, 0.06); }
.cat-icon-courses { color: var(--cat-courses); background: rgba(37, 99, 235, 0.06); }
.cat-icon-certifications { color: var(--cat-certifications); background: rgba(217, 119, 6, 0.06); }
.cat-icon-creators { color: var(--cat-creators); background: rgba(5, 150, 105, 0.06); }
.cat-icon-career { color: var(--cat-career); background: rgba(99, 102, 241, 0.06); }
.cat-icon-free { color: var(--cat-free); background: rgba(100, 116, 139, 0.06); }
.cat-card:hover .cat-icon-platforms { color: var(--cat-platforms); background: rgba(13, 115, 119, 0.14); }
.cat-card:hover .cat-icon-courses { color: var(--cat-courses); background: rgba(37, 99, 235, 0.14); }
.cat-card:hover .cat-icon-certifications { color: var(--cat-certifications); background: rgba(217, 119, 6, 0.14); }
.cat-card:hover .cat-icon-creators { color: var(--cat-creators); background: rgba(5, 150, 105, 0.14); }
.cat-card:hover .cat-icon-career { color: var(--cat-career); background: rgba(99, 102, 241, 0.14); }
.cat-card:hover .cat-icon-free { color: var(--cat-free); background: rgba(100, 116, 139, 0.14); }
.cat-card .cat-label { font-weight: 600; font-size: .8rem; }
.cat-card .cat-desc { font-size: .65rem; color: var(--dim); margin-top: .1rem; }

/* ── ARTICLE CARD (homepage listings) ── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.article-card {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.35rem 1.35rem 1.15rem;
  transition: all 0.35s var(--transition-spring);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--glass-shadow);
}
.article-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover);
  border-color: rgba(13, 115, 119, 0.12);
}
.article-card[data-cat="platforms"]:hover { box-shadow: 0 8px 32px rgba(13, 115, 119, 0.08), 0 0 40px rgba(13, 115, 119, 0.03); }
.article-card[data-cat="courses"]:hover { box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08), 0 0 40px rgba(37, 99, 235, 0.03); }
.article-card[data-cat="certifications"]:hover { box-shadow: 0 8px 32px rgba(217, 119, 6, 0.08), 0 0 40px rgba(217, 119, 6, 0.03); }
.article-card[data-cat="creators"]:hover { box-shadow: 0 8px 32px rgba(5, 150, 105, 0.08), 0 0 40px rgba(5, 150, 105, 0.03); }
.article-card[data-cat="career"]:hover { box-shadow: 0 8px 32px rgba(99, 102, 241, 0.08), 0 0 40px rgba(99, 102, 241, 0.03); }
.article-card[data-cat="free"]:hover { box-shadow: 0 8px 32px rgba(100, 116, 139, 0.08), 0 0 40px rgba(100, 116, 139, 0.03); }
.article-card .ac-cat {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.article-card .ac-tag {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--dim);
}
.article-card .ac-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  margin: .4rem 0 .5rem;
  line-height: 1.35;
}
.article-card .ac-excerpt {
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
}
.article-card .ac-meta {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--dim);
  margin-top: .65rem;
  padding-top: .65rem;
  border-top: 1px dotted var(--border);
}

/* ── HOMEPAGE SECTION BAND ── */
.section-band {
  padding: 2.5rem 0 3rem;
  position: relative;
}
.section-band:nth-child(even) {
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-band:nth-child(even)::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background:var(--accent-fill,var(--accent));
}

/* ── SECTION HEADERS (homepage) ── */
.section-header {
  max-width: var(--wide);
  margin: 0 auto 1.25rem;
  padding: 0 1.5rem;
  padding-top: 2rem;
  margin-top: 3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  position: relative;
}
.section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), transparent);
  border-radius: 1px;
}
.section-header h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  border: none;
  padding: 0;
  margin: 0;
  letter-spacing: -.01em;
}
.section-header a {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════
   13 BLIKKY COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* ── 1. SCORE CARD ── */
.score-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
.sc-score {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--accent);
  text-align: center;
  line-height: 1;
  position: relative;
  text-shadow: 0 0 20px rgba(13, 115, 119, 0.3);
}
.sc-score::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 115, 119, 0.08) 0%, transparent 70%);
  z-index: -1;
}
.sc-label {
  font-family: var(--font-mono);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  margin-top: .25rem;
}
.sc-stars { color: var(--secondary); font-size: 1rem; margin-top: .25rem; }

/* ── 2. QUICK VERDICT ── */
.quick-verdict {
  background: rgba(240, 253, 250, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(13, 115, 119, 0.1);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 2px 12px rgba(13, 115, 119, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.quick-verdict::before {
  content: 'VERDICT';
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
  position: absolute;
  top: -.45rem;
  left: 1.5rem;
  background: var(--bg);
  padding: 0 .5rem;
}
.quick-verdict h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 .75rem;
}

/* ── 3. DATA TABLE ── */
.data-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.03);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  /* `min-width: 580px` removed 2026-08-14. It defeated the generic RESPONSIVE TABLES heal further
     down this file: that heal makes every table `display:block; overflow-x:auto` with
     `thead/tbody { min-width: max-content }`, so columns stay readable while the TABLE scrolls
     instead of the page. **min-width beats max-width in the CSS cascade**, so this one declaration
     re-broke, on edubracket only, the exact defect the network had already healed everywhere else.
     Column readability is preserved by the thead/tbody rule; it does not need repeating here. */
  min-width: 0;
}
.data-table th {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f172a 100%);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
  padding: .7rem .85rem;
  text-align: left;
  border-bottom: 2px solid var(--accent);
}
.data-table td {
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:nth-child(even) td { background: var(--surface); }
.data-table td:first-child { font-weight: 600; color: var(--text); }
.data-table .price { font-family: var(--font-mono); color: var(--success); font-weight: 500; }
.data-table .recurring { font-family: var(--font-mono); color: var(--secondary); font-weight: 600; }

/* ── 4. PRODUCT CARD ── */
.product-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 2rem 0;
  box-shadow: var(--glass-shadow);
  position: relative;
  transition: all 0.4s var(--transition-spring);
}
.product-card:hover {
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-2px);
}
.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--secondary) 100%);
  border-radius: var(--radius) var(--radius) 0 0;
}
.product-rank {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary);
  margin-bottom: .5rem;
}
.product-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
}
.product-price {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: .75rem;
}
.product-desc {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.product-cta {
  display: inline-block;
  background:var(--accent-fill,var(--accent));
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .65rem 1.35rem;
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--transition-snappy);
  box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2);
}
.product-cta:hover {
  background: var(--accent-hover);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(13, 115, 119, 0.25), 0 0 20px rgba(13, 115, 119, 0.1);
}
.pc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}
.pc-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text);
}
.pc-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.pc-tag {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .15rem .45rem;
  border-radius: 3px;
}
.pc-tag-accent { background:var(--accent-fill,var(--accent)); color: #fff; }
.pc-tag-secondary { background: var(--secondary); color: #fff; }
.pc-tag-success { background: var(--success); color: #fff; }
.pc-meta {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--dim);
  margin-bottom: .75rem;
}
.pc-body { margin-bottom: 1rem; font-size: .9375rem; color: var(--text-secondary); }
.pc-body strong { color: var(--text); }

/* Prop Grid (inside product card) */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.prop {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: .5rem .65rem;
}
.prop-label {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  margin-bottom: .2rem;
}
.prop-value {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
}
.prop-value.high { color: var(--success); }
.prop-value.mid { color: var(--secondary); }
.prop-value.low { color: var(--danger); }

/* Pros / Cons */
.pc-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1rem;
}
@media (max-width: 500px) { .pc-pros-cons { grid-template-columns: 1fr; } }
.pc-pros h4, .pc-cons h4 {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .4rem;
}
.pc-pros h4 { color: var(--success); }
.pc-cons h4 { color: var(--danger); }
.pc-pros li, .pc-cons li { font-size: .8rem; margin-bottom: .3rem; color: var(--text-secondary); }

/* CTA Button */
.pc-cta {
  display: inline-block;
  background:var(--accent-fill,var(--accent));
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem 1.15rem;
  border-radius: var(--radius-sm);
  transition: all 0.3s var(--transition-snappy);
  box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2);
}
.pc-cta:hover { background: var(--accent-hover); text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(13, 115, 119, 0.25), 0 0 20px rgba(13, 115, 119, 0.1); }
.pc-cta-secondary { background: var(--success); }
.pc-cta-secondary:hover { background: #059669; }

/* ── 5. TIER LIST ── */
.tier-list { margin: 1.5rem 0; }
.tier-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.tier-badge-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border-radius: 3px;
  white-space: nowrap;
  min-width: 50px;
  text-align: center;
}
.tier-1 { background: var(--success-light); color: #065f46; }
.tier-2 { background: var(--secondary-light); color: #92400e; }
.tier-3 { background: var(--surface); color: var(--muted); }

/* ── 6. VS GRID ── */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 1.5rem 0;
}
.vs-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.vs-divider {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--dim);
  padding-top: 2rem;
}
@media (max-width: 600px) {
  .vs-grid { grid-template-columns: 1fr; }
  .vs-divider { text-align: center; padding: .5rem 0; }
}

/* ── 7. WHO SHOULD / SHOULD NOT ── */
.who-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem 0;
  position: relative;
  box-shadow: 0 1px 4px rgba(15,23,42,.03);
}
.who-block > h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.who-block > p {
  font-size: .85rem;
  line-height: 1.65;
  padding: .75rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: .5rem;
}
.who-block > p:nth-of-type(1) {
  background: var(--success-light);
  border-left: 3px solid var(--success);
}
.who-block > p:nth-of-type(2) {
  background: var(--danger-light);
  border-left: 3px solid var(--danger);
}

/* ── 8. CALLOUTS ── */
.callout {
  border-radius: var(--radius);
  padding: 1.15rem 1.35rem;
  margin: 1.75rem 0;
  font-size: .85rem;
  line-height: 1.65;
  border-left: 3px solid;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.callout-info { background: var(--info-light); border-color: var(--info); }
.callout-info strong { color: #1e40af; }
.callout-warning { background: var(--secondary-light); border-color: var(--secondary); }
.callout-warning strong { color: #92400e; }
.callout-tip { background: var(--success-light); border-color: var(--success); }
.callout-tip strong { color: #065f46; }
.callout-danger { background: var(--danger-light); border-color: var(--danger); }
.callout-danger strong { color: #991b1b; }

/* ── 9. CTA BLOCK ── */
.cta-block {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0;
  text-align: center;
}
.cta-block h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: .35rem;
}
.cta-block p {
  font-size: .85rem;
  color: var(--muted);
  margin-bottom: .85rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 10. INLINE IMAGE ── */
.inline-img {
  margin: 1.5rem 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.inline-img img { width: 100%; }
.inline-img figcaption {
  font-size: .75rem;
  color: var(--dim);
  padding: .5rem 0;
  font-style: italic;
}

/* ── 11. EMAIL MICRO-CAPTURE ── */
.email-capture {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid #334155;
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 2.5rem 0;
  text-align: center;
  color: #f8fafc;
  position: relative;
  overflow: hidden;
}
.email-capture::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(13, 115, 119, 0.15) 0%, transparent 40%),
              radial-gradient(circle at 70% 50%, rgba(217, 119, 6, 0.08) 0%, transparent 35%);
  pointer-events: none;
  animation: glowDrift 15s ease-in-out infinite alternate;
}
.email-capture > * { position: relative; z-index: 1; }
.email-capture h3, .email-headline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: #f8fafc;
  margin-bottom: .3rem;
}
.email-capture p, .email-note {
  font-size: .75rem;
  color: #64748b;
  margin-bottom: .85rem;
}
.email-capture form {
  display: flex;
  gap: .4rem;
  max-width: 380px;
  margin: 0 auto;
}
.email-capture input[type="email"] {
  flex: 1;
  padding: .5rem .75rem;
  border: 1px solid #475569;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font-body);
  background: #1e293b;
  color: #f8fafc;
}
.email-capture input[type="email"]::placeholder { color: #64748b; }
.email-capture button {
  background:var(--accent-fill,var(--accent));
  color: #fff;
  border: none;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
  font-family: var(--font-body);
  white-space: nowrap;
}
.email-capture button:hover { background: var(--accent-hover); }

/* ── 12. FAQ ── */
.faq-section {
  margin: 2.5rem 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .25rem 1.5rem;
  box-shadow: 0 1px 4px rgba(15,23,42,.03);
}
.faq-section > h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 1.25rem 0 .5rem;
  padding: 0;
  border: none;
  background: none;
  counter-increment: none;
}
.faq-section > h2::before { display: none; }
.faq { margin: 2rem 0; }
.faq details, .faq-section details { border-bottom: 1px solid var(--border); }
.faq details:last-child, .faq-section details:last-child { border-bottom: none; }
.faq summary, .faq-section summary {
  font-weight: 600;
  font-size: .875rem;
  padding: .85rem 0;
  cursor: pointer;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq summary::after, .faq-section summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-light);
  flex-shrink: 0;
  transition: transform .2s;
}
.faq details[open] summary::after, .faq-section details[open] summary::after { content: '−'; }
.faq .faq-answer, .faq-section p {
  padding: 0 0 1rem 0;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* ── 13. RELATED GRID ── */
.related-grid {
  margin: 2.5rem 0;
  padding: 1.5rem;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.related-grid h3 {
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  margin-bottom: 1rem;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem;
}
.related-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem;
  transition: all .2s;
  text-decoration: none;
  display: block;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.related-tag {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
  display: block;
  margin-bottom: .25rem;
}
.related-title {
  font-weight: 600;
  font-size: .8rem;
  color: var(--text);
  line-height: 1.35;
  display: block;
}

/* ── AD ZONE ── */
.ad-zone { margin: 1.5rem 0; min-height: 90px; }

/* ── NEWSLETTER (homepage) ── */
.newsletter-section {
  max-width: var(--wide);
  margin: 3rem auto;
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--radius);
  color: #f8fafc;
}
.newsletter-section h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: #f8fafc;
  margin-bottom: .5rem;
  border: none;
  padding: 0;
}
.newsletter-section p {
  font-size: .875rem;
  color: #94a3b8;
  margin-bottom: 1rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.newsletter-section form {
  display: flex;
  gap: .5rem;
  max-width: 400px;
  margin: 0 auto;
}
.newsletter-section input[type="email"] {
  flex: 1;
  padding: .6rem .85rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-family: var(--font-body);
}
.newsletter-section button {
  background:var(--accent-fill,var(--accent));
  color: #fff;
  border: none;
  padding: .6rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  font-family: var(--font-body);
}

/* ── FOOTER ── */
.footer {
  border-top: 1px solid var(--border);
  padding: 2rem 1.5rem;
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
}
.footer-links { display: flex; gap: 1rem; font-size: .8rem; }
.footer-links a { color: var(--dim); }
.footer-disc {
  font-size: .7rem;
  color: var(--dim);
  max-width: 520px;
  line-height: 1.55;
  margin-top: .5rem;
}

/* ── STICKY EMAIL STRIP ── */
.sticky-email {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-top: 1px solid rgba(13, 115, 119, 0.08);
  padding: .6rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  z-index: 90;
  box-shadow: 0 -2px 12px rgba(0,0,0,.05);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.sticky-email.visible { transform: translateY(0); }
.sticky-email p {
  font-size: .8rem;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}
.sticky-email input {
  padding: .4rem .65rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-sm);
  font-size: .8rem;
  width: 200px;
}
.sticky-email button {
  background:var(--accent-fill,var(--accent));
  color: #fff;
  border: none;
  padding: .4rem .85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .75rem;
  cursor: pointer;
}
.sticky-email .dismiss {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 .25rem;
}

/* ═══════════════════════════════════════════════════════
   EDUBRACKET-SPECIFIC DESIGN EXTENSIONS
   ═══════════════════════════════════════════════════════ */

/* ── CATEGORY COLOR SYSTEM ── */
:root {
  --cat-platforms: #0d7377;
  --cat-courses: #2563eb;
  --cat-certifications: #d97706;
  --cat-creators: #059669;
  --cat-career: #6366f1;
  --cat-free: #64748b;
}

/* ── CATEGORY-COLORED CARD BORDERS ── */
.article-card {
  border-top: 3px solid var(--border);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
.article-card[data-cat="platforms"] { border-top-color: var(--cat-platforms); }
.article-card[data-cat="courses"] { border-top-color: var(--cat-courses); }
.article-card[data-cat="certifications"] { border-top-color: var(--cat-certifications); }
.article-card[data-cat="creators"] { border-top-color: var(--cat-creators); }
.article-card[data-cat="career"] { border-top-color: var(--cat-career); }
.article-card[data-cat="free"] { border-top-color: var(--cat-free); }

/* ── HERO PATTERN BACKGROUND ── */
.hero-home {
  position: relative;
  background: linear-gradient(165deg, #0a0e14 0%, #0f1a24 30%, #0d2233 60%, #091a1f 100%);
  max-width: 100%;
  padding: 5rem 1.5rem 4rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 50% 70% at 15% 40%, rgba(13,115,119,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 25%, rgba(217,119,6,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 90%, rgba(37,99,235,0.08) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(5,150,105,0.06) 0%, transparent 40%);
  pointer-events: none;
  animation: heroGlow 12s ease-in-out infinite alternate;
}
.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2394a3b8' opacity='.4'%3E%3Ccircle cx='150' cy='150' r='120' stroke-width='.4'/%3E%3Ccircle cx='150' cy='150' r='90' stroke-width='.3'/%3E%3Ccircle cx='150' cy='150' r='60' stroke-width='.3'/%3E%3Ccircle cx='150' cy='150' r='30' stroke-width='.2'/%3E%3Cpath d='M150 30v240' stroke-width='.3'/%3E%3Cpath d='M30 150h240' stroke-width='.3'/%3E%3Cpath d='M65 65l170 170' stroke-width='.2'/%3E%3Cpath d='M235 65L65 235' stroke-width='.2'/%3E%3Ccircle cx='150' cy='30' r='3' fill='%235eead4' opacity='.6'/%3E%3Ccircle cx='150' cy='270' r='2' fill='%235eead4' opacity='.3'/%3E%3Ccircle cx='30' cy='150' r='2' fill='%235eead4' opacity='.3'/%3E%3Ccircle cx='270' cy='150' r='3' fill='%235eead4' opacity='.6'/%3E%3Ccircle cx='65' cy='65' r='2' fill='%23d97706' opacity='.4'/%3E%3Ccircle cx='235' cy='235' r='2' fill='%23d97706' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 300px 300px;
  pointer-events: none;
}
/* Floating particles in hero */
.hero-home .hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-home .hero-particles span {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(94,234,212,0.4);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(94,234,212,0.3);
  animation: particleFloat linear infinite;
}
.hero-home .hero-particles span:nth-child(1) { left: 10%; animation-duration: 18s; animation-delay: 0s; }
.hero-home .hero-particles span:nth-child(2) { left: 25%; width: 2px; height: 2px; animation-duration: 22s; animation-delay: -4s; }
.hero-home .hero-particles span:nth-child(3) { left: 40%; animation-duration: 16s; animation-delay: -8s; background: rgba(217,119,6,0.3); box-shadow: 0 0 8px rgba(217,119,6,0.2); }
.hero-home .hero-particles span:nth-child(4) { left: 55%; width: 2px; height: 2px; animation-duration: 24s; animation-delay: -2s; }
.hero-home .hero-particles span:nth-child(5) { left: 70%; animation-duration: 20s; animation-delay: -6s; }
.hero-home .hero-particles span:nth-child(6) { left: 85%; width: 4px; height: 4px; animation-duration: 19s; animation-delay: -10s; background: rgba(217,119,6,0.25); box-shadow: 0 0 12px rgba(217,119,6,0.2); }
.hero-home .hero-particles span:nth-child(7) { left: 15%; width: 2px; height: 2px; animation-duration: 25s; animation-delay: -14s; }
.hero-home .hero-particles span:nth-child(8) { left: 60%; animation-duration: 17s; animation-delay: -11s; }

@keyframes particleFloat {
  0% { bottom: -10px; opacity: 0; transform: translateX(0); }
  10% { opacity: 0.6; }
  50% { transform: translateX(30px); }
  90% { opacity: 0.2; }
  100% { bottom: 110%; opacity: 0; transform: translateX(-20px); }
}
@keyframes heroGlow {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.03); }
}

.hero-home h1 {
  position: relative;
  color: #f8fafc;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  text-shadow: 0 2px 40px rgba(13,115,119,0.2);
  letter-spacing: -.03em;
}
.hero-home h1 em {
  color: transparent;
  background: linear-gradient(135deg, #5eead4 0%, #99f6e4 40%, #d4fc79 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}
.hero-home .tagline {
  position: relative;
  color: #b0bec5;
  font-size: 1.05rem;
  max-width: 580px;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}
.hero-home .stats {
  position: relative;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(94,234,212,.1);
  border-radius: 12px;
  padding: 1.5rem 2.5rem;
  display: inline-flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
}
.hero-home .stat-num {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  background: linear-gradient(135deg, #5eead4 0%, #99f6e4 40%, #d4fc79 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}
.hero-home .stat-label {
  font-size: .7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

/* ── FEATURED ARTICLE CARD ── */
.article-card-featured {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 119, 6, 0.12);
  border-left: 4px solid var(--secondary);
  animation: subtleGlow 4s ease-in-out infinite;
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 0 auto 1.5rem;
  max-width: var(--wide);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  color: var(--text);
}
.article-card-featured:hover {
  border-color: var(--secondary);
  box-shadow: 0 12px 48px rgba(217, 119, 6, 0.1), 0 0 60px rgba(217, 119, 6, 0.05);
  transform: translateY(-2px);
  text-decoration: none;
}
.article-card-featured .ac-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1.3;
  margin: .35rem 0 .5rem;
}
.article-card-featured .ac-excerpt {
  font-size: .875rem;
  color: var(--muted);
  line-height: 1.55;
}
.article-card-featured .featured-badge {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--secondary);
  color: #fff;
  padding: .2rem .6rem;
  border-radius: 3px;
  white-space: nowrap;
}

/* ── TESTED BADGE ── */
.tested-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent);
  background: var(--accent-light);
  padding: .2rem .55rem;
  border-radius: 3px;
}
.tested-badge::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d7377' stroke-width='1.5'%3E%3Cpath d='M8 1L2 4v4c0 3.5 2.5 6.5 6 7.5 3.5-1 6-4 6-7.5V4L8 1z'/%3E%3Cpath d='M5.5 8l2 2 3.5-4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* ── SCORE BADGE (on cards) ── */
.ac-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background:var(--accent-fill,var(--accent));
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── PROGRESS BAR PROP GRID ── */
.prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.prop {
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: .6rem .75rem;
}
.prop-label {
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--dim);
  margin-bottom: .35rem;
  display: flex;
  justify-content: space-between;
}
.prop-score {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text);
}
.prop-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.prop-bar-fill {
  height: 100%;
  border-radius: 2px;
  background:var(--accent-fill,var(--accent));
  transition: width .6s ease;
}
.prop-bar-fill.high { background: var(--success); }
.prop-bar-fill.mid { background: var(--secondary); }
.prop-bar-fill.low { background: var(--danger); }

/* ── STICKY TABLE OF CONTENTS ── */
.article-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 3rem;
  align-items: start;
}
.article-layout .article {
  max-width: none;
  padding: 0;
  margin: 0;
}
.toc {
  position: sticky;
  top: 4.5rem;
  padding-top: 1rem;
}
.toc-title {
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--dim);
  margin-bottom: .75rem;
}
.toc a {
  display: block;
  font-size: .75rem;
  color: var(--muted);
  padding: .3rem 0 .3rem .75rem;
  border-left: 2px solid var(--border);
  text-decoration: none;
  transition: color .15s, border-color .15s;
  line-height: 1.35;
}
.toc a:hover, .toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  text-decoration: none;
}

/* ── SECTION DIVIDER (extension) ── */
.section-header h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.section-header h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── AMBIENT GLOW ORBS ── */
.ambient-glow {
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(100px);
}
.ambient-teal {
  top: -100px;
  left: -150px;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(13, 115, 119, 0.09) 0%, rgba(13, 115, 119, 0.03) 35%, transparent 60%);
  animation: glowDrift 20s ease-in-out infinite alternate;
}
.ambient-gold {
  top: 40%;
  right: -150px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.07) 0%, rgba(217, 119, 6, 0.02) 35%, transparent 60%);
  animation: glowDrift 25s ease-in-out infinite alternate-reverse;
}
.ambient-cool {
  bottom: -150px;
  left: 30%;
  width: 750px;
  height: 750px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.015) 35%, transparent 60%);
  animation: glowDrift 22s ease-in-out infinite alternate;
}

/* ── ANIMATION KEYFRAMES ── */
@keyframes glowDrift {
  0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
  100% { transform: translate(25px, -15px) scale(1.06); opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes subtleGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.06); }
  50% { box-shadow: 0 4px 24px rgba(217, 119, 6, 0.12), 0 0 40px rgba(217, 119, 6, 0.04); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--transition-spring), transform 0.6s var(--transition-spring);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .toc { display: none; }
  .article-card-featured {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .nav-links { display: none; }
  .hero-home h1 { font-size: 1.75rem; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .hero-home .stats { gap: 1.5rem; padding: 1rem 1.25rem; }
  .ambient-glow { opacity: 0.5; }
  .cat-card, .article-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ambient-glow { display: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}


/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS  - appended 2026-05-16 from seed-template/styles.css.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Site-local :root fallbacks defined below for variables this site lacks.
   ═══════════════════════════════════════════════════════════════ */
:root{--secondary-hover:#92400e;--dark:#0c0a09;--text-light:#78716c;--cream:#f5f0eb;--display:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono','Fira Code',monospace;--shadow-sm:0 1px 3px rgba(0,0,0,.06)}
/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS  - 10-pattern bar
   Added 2026-05-16 (session 8) from GrantProbe homepage overhaul.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Use these instead of hand-rolling per-site overrides.
   ═══════════════════════════════════════════════════════════════ */

/* Pattern 2 + 10  - Eyebrow labels (hairline-flanked universal signature) */
.eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:var(--border)}
.eyebrow-solo{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:8px}
.section-head{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;text-align:center;margin-bottom:1.5rem}
.section-head .eyebrow{margin-bottom:.6rem}
.section-head h2{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);letter-spacing:-.01em;margin:0}
.section-head p{font-size:.9375rem;color:var(--text-light);margin-top:.5rem;max-width:560px;margin-left:auto;margin-right:auto}
.eg-section{padding:2.5rem 0}
.eg-section.tight{padding:1.5rem 0 2rem}

/* Pattern 4  - Cred-strip (iconified trust metrics under hero) */
.cred-strip{max-width:var(--max-w);margin:1.5rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cred-cell{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm)}
.cred-cell svg{flex-shrink:0;width:22px;height:22px;color:var(--accent)}
.cred-text{display:flex;flex-direction:column;line-height:1.3}
.cred-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.cred-value{font-size:.8125rem;font-weight:600;color:var(--dark);margin-top:2px}
@media(max-width:768px){.cred-strip{grid-template-columns:repeat(2,1fr)}}

/* Pattern 3  - Numbered methodology grid (01-06 framework) */
.method-grid{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.method-cell{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.2rem;position:relative;transition:all .2s}
.method-cell:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.method-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:.45rem}
.method-name{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:.35rem;line-height:1.25}
.method-desc{font-size:.78rem;color:var(--text-light);line-height:1.55}
@media(max-width:760px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.method-grid{grid-template-columns:1fr}}

/* Pattern 5  - Anchor + mock-output card (CTA paired with sample-output) */
.anchor-mock{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1.05fr;gap:1.25rem;align-items:stretch}
.am-pitch{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 1.85rem;display:flex;flex-direction:column;justify-content:center}
.am-pitch h3{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--dark);margin:.5rem 0 .65rem;letter-spacing:-.01em}
.am-pitch p{font-size:.92rem;color:var(--text);line-height:1.6;margin-bottom:1.1rem}
.am-pitch ul{list-style:none;padding:0;margin:0 0 1.25rem;font-size:.86rem;color:var(--text);line-height:1.7}
.am-pitch ul li{padding-left:1.4rem;position:relative}
.am-pitch ul li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800}
.am-cta{display:inline-block;align-self:flex-start;padding:.75rem 1.4rem;background:var(--accent-fill,var(--accent));color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:8px;transition:all .2s;box-shadow:0 2px 8px rgba(15,118,110,.22)}
.am-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.am-mock{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm)}
.am-mock-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:.6rem}
.am-mock-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light)}
.am-mock-pill{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent-fill,var(--accent));padding:3px 8px;border-radius:4px}
.am-mock-input{font-family:var(--mono);font-size:.75rem;color:var(--text-light);padding:.5rem .65rem;background:var(--cream);border-radius:6px;margin-bottom:.8rem}
.am-mock-input strong{color:var(--dark);font-weight:700}
.am-row{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;padding:.7rem 0;border-bottom:1px dashed var(--border);align-items:center}
.am-row:last-child{border-bottom:none}
.am-row-name{font-size:.85rem;font-weight:600;color:var(--dark);line-height:1.25}
.am-row-meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-top:3px}
.am-row-amount{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--accent);text-align:right;line-height:1}
.am-row-score{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent);text-align:right;margin-top:3px}
.am-mock-foot{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-light);font-style:italic;text-align:center}
@media(max-width:820px){.anchor-mock{grid-template-columns:1fr}}

/* Pattern 7  - Named advisory / editorial section */
.advisory{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.advisory-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 2rem;box-shadow:var(--shadow-sm)}
.advisory-grid{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start}
.advisory-author{display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:1.25rem;border-right:1px solid var(--border)}
.advisory-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.65rem}
.advisory-name{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--dark);line-height:1.2}
.advisory-role{font-size:.75rem;color:var(--text-light);margin-top:.2rem;margin-bottom:.55rem}
.advisory-cred{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700;line-height:1.55}
.advisory-body h4{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--dark);margin:0 0 .65rem;letter-spacing:-.01em}
.advisory-body p{font-size:.88rem;color:var(--text);line-height:1.65;margin-bottom:.7rem}
.advisory-body p:last-child{margin-bottom:0}
.advisory-links{display:flex;gap:1rem;margin-top:.85rem;flex-wrap:wrap}
.advisory-links a{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none}
.advisory-links a:hover{text-decoration:underline}
@media(max-width:720px){.advisory-grid{grid-template-columns:1fr}.advisory-author{padding-right:0;border-right:none;padding-bottom:1.25rem;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:1rem;align-items:center}.advisory-avatar{margin-bottom:0}}

/* Pattern 8  - Newsletter social-proof line */
.email-proof{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);text-align:center;margin-top:.6rem;flex-basis:100%;line-height:1.5}
.email-proof strong{color:var(--accent);font-weight:700}
.email-strip-proof{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a8a29e;margin-left:.6rem}

/* Pattern 6  - Type-badges + score-pills */
.tb{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.5px 7px;border-radius:3px;line-height:1.3;margin-right:.4rem;vertical-align:middle}
.tb-pillar{background:var(--accent-fill,var(--accent));color:#fff}
.tb-roundup{background:var(--secondary-light);color:var(--secondary-hover);border:1px solid rgba(180,83,9,.25)}
.tb-guide{background:var(--accent-light);color:var(--accent-hover);border:1px solid rgba(30,64,175,.25)}
.tb-state{background:#fdf2f8;color:#9d174d;border:1px solid rgba(219,39,119,.25)}
.tb-tool{background:#f3e8ff;color:#6b21a8;border:1px solid rgba(124,58,237,.25)}
.tb-review{background:#e0e7ff;color:#3730a3;border:1px solid rgba(67,56,202,.25)}
.tb-comparison{background:#fef3c7;color:#92400e;border:1px solid rgba(180,83,9,.25)}
.score-pill{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.04em;background:var(--accent-fill,var(--accent));color:#fff;padding:2px 6px;border-radius:3px;margin-left:.35rem}

/* ── PRINT STYLES ── */
@media print{.nav-cta,.email-micro,.email-strip,.ad-zone,.cred-strip,.method-grid,.anchor-mock,.advisory{display:none}body{background:#fff}}
@media print{.cred-strip,.method-grid,.anchor-mock,.advisory,.eyebrow{display:none}}

/* review-cadence freshness pills (shared) */
.freshness-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}
.freshness-pills .pill{padding:.2rem .55rem;border-radius:999px;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}
.freshness-pills .pill-reviewed{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.freshness-pills .pill-due{background:#fef3c7;color:#92400e;border-color:#fde68a}

/* BLUF answer-box (AIO citation) added 2026-06-13 */
.bluf{background:var(--accent-light,#f7f7fb);border:1px solid var(--border,#e5e5ea);border-left:4px solid var(--accent,#e11d48);border-radius:10px;padding:1.05rem 1.3rem;margin:1.5rem 0}
.bluf-title{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent,#e11d48);font-weight:700;margin-bottom:.5rem}
.bluf-list{margin:0;padding-left:1.1rem;line-height:1.6}
.bluf-list li{margin:.35rem 0}


/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
   390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
   PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
   and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table.data-table > thead, table.data-table > tbody,
  table.pricing-table > thead, table.pricing-table > tbody,
  table.capability-matrix > thead, table.capability-matrix > tbody,
  table.comparison-table > thead, table.comparison-table > tbody,
  .article-body table > thead, .article-body table > tbody,
  main table > thead, main table > tbody {
    min-width: max-content;
  }
}


/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}


/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}


/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration  - used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}


/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
}
/* Scoped to narrow viewports 2026-09-16. `min-width:max-content` here forced EVERY table to its
   intrinsic width at ALL viewports, so a table whose content is wider than its column scrolled
   sideways inside its own box and the right-hand columns were invisible without a horizontal drag.
   Measured in the live DOM on rxgrab/articles/goodrx-alternatives: an 8-column table forced into
   that case hid 1089px of columns; with this scoping it hides 0 and the 8th column is visible.
   It also zeroes <col> widths and defeats table-layout:fixed, because a display:block table has
   no table box for a colgroup to size. Tables whose max-content already fitted are UNCHANGED:
   the declaration was not binding for them. The mobile branch below is byte-identical to the
   2026-07-30 heal, so narrow rendering does not change; only the desktop case is corrected, and
   the table keeps display:block + overflow-x:auto at every width so the PAGE can never scroll. */
@media (max-width: 700px) {
  table > thead, table > tbody, table > tfoot {
    min-width: max-content;
  }
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration  - used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}

/* Long unbroken links. On LensPOV the widest element on four pages was an <a> at 547-678px against
   a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
   browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
   adds MORE external links, so this gets worse as the network gets better sourced unless it is
   fixed at the stylesheet. */
a, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── callout modifier ALIASES + title (added 2026-08-23) ────────────────────────────────────
   ⛔ THE DEFECT THIS FIXES: the stylesheet defined `.callout-info` (hyphenated) but every
   article writes `class="callout info"` (space-separated), so the modifier NEVER APPLIED and
   info/warning/tip/danger callouts all rendered as the same undifferentiated box.
   ⭐ Fixed in CSS rather than by rewriting the articles: one rule set covers every existing
   page AND both syntaxes, so neither convention can silently fail again.
   ⚠️ Sister properties (grantprobe, petmaxxing, rxgrab) already use the `.callout.tip` form
   and are NOT affected - do not "propagate" this fix to them. */
.callout.info    { background: var(--info-light);      border-color: var(--info); }
.callout.info strong    { color: #1e40af; }
.callout.warning,
.callout.warn    { background: var(--secondary-light); border-color: var(--secondary); }
.callout.warning strong,
.callout.warn strong    { color: #92400e; }
.callout.tip     { background: var(--success-light);   border-color: var(--success); }
.callout.tip strong     { color: #065f46; }
.callout.danger  { background: var(--danger-light);    border-color: var(--danger); }
.callout.danger strong  { color: #991b1b; }

/* `.callout-title` had NO rule in any property stylesheet, so callout headings rendered at
   body weight and size - indistinguishable from the paragraph beneath them. */
.callout-title {
  font-weight: 700;
  font-size: .95em;
  letter-spacing: .01em;
  margin-bottom: .45rem;
  display: block;
}

/* ── READING CONTAINER (2026-08-25) ──────────────────────────────────────────────────────────
   `.article-wrap` is used as the content wrapper on this property but no stylesheet defined a
   max-width for it, so /privacy rendered its body copy at ~1424px. Same class as the omnirx nav
   and the petmaxxing static pages: THE MARKUP FOR A COMPONENT SHIPS WITHOUT THE RULE THAT MAKES
   IT ONE. Every disk-side check passes because the markup is correct; only the rendered width
   shows it. Measured before/after, not assumed. */
.article-wrap{max-width:min(760px,100%);min-width:0;margin:0 auto;padding:2.5rem 1.5rem 4rem}