/* ============================================================
 * core.css — generated by tools/tokenize.py from `allin`
 *
 * BRAND-NEUTRAL. Contains no client colours, names or URLs, and
 * must stay byte-identical across every client site. Colour lives
 * in that client's css/brand.css, which defines the tokens below.
 *
 * Do not add a client-specific rule here. If one client needs an
 * override it goes in their repo's css/client.css, which loads
 * after this file.
 * ============================================================ */

:root {
  /* State colours — fixed, shared, deliberately NOT brand.
     A gauge must not render brand colour at a passing score. */
  --state-ok:        #1F8A4C;
  --state-ok-deep:   #17703C;
  --state-warn:      #E8A33D;
  --state-bad:       #C0392B;
  --state-ok-tint:   #E8F5E9;
  --state-warn-tint: #FFF3E0;
  --state-info-tint: #E3F2FD;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

img { max-width: 100%; height: auto; display: block; }
a { transition: color 0.2s; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== TOP BAR ===== */
.top-bar {
  background: var(--brand-dark);
  padding: 8px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.2s;
}
.top-bar a:hover { color: var(--accent-light-on-dark); }
.top-bar .ncua { font-size: 11px; opacity: 0.6; }
.top-bar-links { display: flex; align-items: center; }

/* ===== HEADER / NAV ===== */
header {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 900;
  box-shadow: 0 2px 20px rgba(var(--brand-dark-rgb), 0.06);
}
header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-area {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo-img {
  height: 48px;
  width: auto;
  display: block;
}
.footer-logo {
  height: 44px;
  width: auto;
  display: block;
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
nav a {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s;
  position: relative;
}
nav a:hover { color: var(--brand-primary); }
nav a.active { color: var(--brand-primary); }
nav a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
  pointer-events: none;
}

.cta-subscribe {
  background: var(--brand-primary) !important;
  color: white !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s;
}
.cta-subscribe:hover {
  background: var(--brand-dark) !important;
}
.cta-subscribe::after { display: none !important; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ===== SHARED BUTTONS ===== */
.btn-primary {
  background: var(--brand-accent);
  color: #fff;              /* navy on red is 2.10:1 — white is 4.95:1 */
  padding: 14px 30px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-primary:hover {
  background: var(--brand-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(var(--brand-accent-rgb), 0.3);
  color: #fff;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 14px 30px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

.btn-outline {
  /* Used on the dark hero — light accent, not --brand-primary (1.9:1 on navy). */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 2px solid var(--accent-light-on-dark);
  color: var(--accent-light-on-dark);
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s;
}
.btn-outline:hover {
  background: var(--accent-light-on-dark);
  color: var(--brand-dark);
}

/* ===== SECTION SHARED ===== */
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 12px;
}
.section-header h2 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 14px;
}
.section-header p {
  font-size: 17px;
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===== PAGE BANNER (inner pages) ===== */
.page-banner {
  background: linear-gradient(165deg, var(--brand-dark) 0%, var(--brand-dark-mid) 55%, var(--brand-primary) 100%);
  padding: 56px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.page-banner::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary-light), var(--brand-accent));
  pointer-events: none;
}
.page-banner .container { position: relative; z-index: 1; }
.page-banner-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-light-on-dark);
  margin-bottom: 12px;
}
.page-banner h1,
.page-banner h2 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 700;
  color: white;
  margin-bottom: 14px;
  line-height: 1.15;
}
.page-banner p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  line-height: 1.65;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(165deg, var(--brand-dark) 0%, var(--brand-dark-mid) 55%, var(--brand-primary) 100%);
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary-light), var(--brand-accent));
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: 50px;
  color: var(--accent-light-on-dark);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
}
.hero-badge .dot {
  width: 6px;
  height: 6px;
  background: var(--brand-accent);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero h1,
.hero h2 {
  font-family: var(--display);
  font-size: 48px;
  font-weight: 700;
  color: white;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero h1 em,
.hero h2 em {
  font-style: italic;
  color: var(--accent-on-dark);
}
.hero p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width: 520px;
  margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; }

/* Hero rate card */
.hero-card {
  background: var(--brand-dark);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  position: relative;
}
.hero-card::before {
  content: 'FREE FOR EVERYONE';
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--brand-accent-deep);
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 5px 14px;
  border-radius: 6px;
}
.rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.rate-row:last-child { border-bottom: none; }
.rate-label { font-size: 14px; color: var(--text-light); font-weight: 500; }
.rate-values { display: flex; gap: 16px; align-items: baseline; }
.rate-national { font-size: 13px; color: #aaa; text-decoration: line-through; }
.rate-arrow { color: #27ae60; font-size: 13px; font-weight: 700; }
.hero-card-footer {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-card-footer span { font-size: 12px; color: #aaa; }
.hero-card-footer a { font-size: 13px; color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.hero-card-footer a:hover { color: var(--brand-dark); }

/* ===== LOCAL PULSE ===== */
.local-section { padding: 80px 0; background: white; }
.local-ticker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.ticker-item {
  background: var(--surface-alt);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.ticker-item:hover {
  border-color: var(--brand-primary-light);
  transform: translateY(-2px);
}
.ticker-emoji { font-size: 22px; margin-bottom: 6px; display: block; }
.ticker-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}
.ticker-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-dark);
  font-family: var(--display);
}
.ticker-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }

.local-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
}
.local-headline {
  background: var(--surface-alt);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  margin-bottom: 14px;
  transition: all 0.2s;
}
.local-headline:hover { border-color: var(--brand-primary-light); }
.local-headline:last-child { margin-bottom: 0; }
.hl-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hl-tag.economy { color: var(--brand-primary); }
.hl-tag.campus  { color: var(--brand-accent-deep); }
.hl-tag.housing { color: #27ae60; }
.local-headline h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 5px;
  line-height: 1.3;
}
.local-headline p { font-size: 13.5px; color: var(--text-light); line-height: 1.5; }

.local-sidebar {
  background: var(--brand-dark);
  border-radius: 14px;
  padding: 28px;
  color: white;
}
.local-sidebar h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  color: var(--brand-accent);
}
.bama-score {
  background: rgba(var(--brand-secondary-rgb), 0.3);
  border: 1px solid rgba(var(--brand-secondary-rgb), 0.5);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.bama-score .teams { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.bama-score .score {
  font-size: 28px;
  font-weight: 800;
  color: var(--brand-accent);
  font-family: var(--display);
}
.bama-score .label { font-size: 11px; color: rgba(255, 255, 255, 0.5); margin-top: 4px; }
.sidebar-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item span:first-child { color: rgba(255, 255, 255, 0.6); }
.sidebar-item span:last-child { font-weight: 600; }

/* ===== NEWSLETTER / BRIEFING PREVIEW (template component; unused here) ===== */
.briefing-section { padding: 80px 0; background: var(--surface-tint); }
.briefing-preview {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px rgba(var(--brand-primary-rgb), 0.08);
}
.email-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--brand-dark);
}
.email-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.email-logo img {
  height: 36px;
  width: auto;
  display: block;
}
.email-from h4 { font-size: 15px; font-weight: 700; color: var(--brand-dark); }
.email-from p  { font-size: 12px; color: var(--text-light); }
.email-subject {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 20px;
  line-height: 1.3;
}
.email-body-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  align-items: flex-start;
}
.email-body-item:last-child { border-bottom: none; }
.email-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.email-icon.rates  { background: #e8f5e9; }
.email-icon.local  { background: #fff3e0; }
.email-icon.tip    { background: #e3f2fd; }
.email-icon.bama   { background: var(--brand-accent-deep); color: white; font-size: 13px; font-weight: 800; }
.email-body-item h5 { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.email-body-item p  { font-size: 13px; color: var(--text-light); line-height: 1.5; }
.briefing-cta { text-align: center; margin-top: 32px; }

/* ===== FINANCIAL HEALTH SCORE ===== */
.fhs-section { padding: 80px 0; background: white; overflow: hidden; }
.fhs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.fhs-content h2 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}
.fhs-content > p {
  font-size: 17px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 24px;
}
.fhs-features { list-style: none; margin-bottom: 28px; }
.fhs-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--text);
  line-height: 1.5;
}
.fhs-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #27ae60;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.fhs-widget {
  background: linear-gradient(160deg, var(--brand-dark), var(--brand-dark-mid));
  border-radius: 20px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(var(--brand-dark-rgb), 0.25);
}
.fhs-widget::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb), 0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.fhs-widget-header { text-align: center; margin-bottom: 28px; position: relative; }
.fhs-widget-header h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}
.fhs-widget-header p { font-size: 13px; color: rgba(255, 255, 255, 0.55); }

.fhs-score-ring {
  width: 180px;
  height: 180px;
  margin: 0 auto 24px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fhs-score-ring svg { position: absolute; top: 0; left: 0; transform: rotate(-90deg); }
.fhs-score-ring .score-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}
.fhs-score-ring .score-number {
  font-family: var(--sans);
  font-size: 52px;
  font-weight: 700;
  color: white;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.fhs-score-ring .score-label {
  font-size: 13px;
  color: var(--accent-light-on-dark);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.fhs-categories { position: relative; }
.fhs-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fhs-cat:last-child { border-bottom: none; }
.fhs-cat-left { display: flex; align-items: center; gap: 10px; }
.fhs-cat-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.fhs-cat-icon.saving   { background: rgba(39, 174, 96, 0.2); }
.fhs-cat-icon.spending { background: rgba(52, 152, 219, 0.2); }
.fhs-cat-icon.debt     { background: rgba(231, 76, 60, 0.2); }
.fhs-cat-icon.planning { background: rgba(var(--brand-accent-rgb), 0.2); }
.fhs-cat-name { font-size: 14px; color: rgba(255, 255, 255, 0.75); }
.fhs-cat-bar {
  width: 100px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.fhs-cat-fill { height: 100%; border-radius: 3px; }
.fhs-cat-fill.good  { background: #27ae60; }
.fhs-cat-fill.ok    { background: var(--state-warn); }
.fhs-cat-fill.needs { background: #e67e22; }
.fhs-cat-score { font-size: 14px; font-weight: 700; color: white; width: 30px; text-align: right; }

.fhs-widget-cta {
  display: block;
  text-align: center;
  margin-top: 24px;
  background: var(--brand-accent);
  color: #fff;              /* navy on red is 2.10:1 — white is 4.95:1 */
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.25s;
  position: relative;
}
.fhs-widget-cta:hover { background: var(--brand-accent-deep); color: #fff; }

.fhs-widget-cta.is-placeholder {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  cursor: default;
}

/* ===== LIFE STAGE PATHWAYS ===== */
.pathways-section { padding: 80px 0; background: var(--surface-alt); }
.pathway-track {
  display: flex;
  gap: 0;
  margin-bottom: 40px;
  position: relative;
}
.pathway-track::before {
  content: '';
  position: absolute;
  top: 42px;
  left: 60px;
  right: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary), var(--state-ok), var(--state-warn));
  border-radius: 2px;
  z-index: 0;
  pointer-events: none;
}
.pathway-stage {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition: transform 0.2s;
}
.pathway-stage:hover { transform: translateY(-4px); }
.pathway-dot {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.pathway-dot.highschool { background: #fce4ec; }
.pathway-dot.college    { background: var(--brand-accent-deep); color: white; font-size: 16px; font-weight: 800; }
.pathway-dot.workforce  { background: #e3f2fd; }
.pathway-dot.family     { background: #e8f5e9; }
.pathway-dot.homebuyer  { background: #fff3e0; }
.pathway-dot.retirement { background: var(--brand-accent); color: white; font-size: 16px; }
.pathway-stage h4 { font-size: 13px; font-weight: 700; color: var(--brand-dark); margin-bottom: 3px; }
.pathway-stage p  { font-size: 11.5px; color: var(--text-light); line-height: 1.4; max-width: 130px; margin: 0 auto; }

.pathway-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pathway-card {
  background: white;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  color: inherit;
}
.pathway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--brand-primary-rgb), 0.1);
  border-color: var(--brand-primary-light);
}
.pathway-card-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 12px;
}
.pathway-card-tag.hs  { background: #fce4ec; color: #c62828; }
.pathway-card-tag.col { background: rgba(var(--brand-secondary-rgb), 0.1); color: var(--brand-accent-deep); }
.pathway-card-tag.wf  { background: #e3f2fd; color: #1565c0; }
.pathway-card-tag.hb  { background: #e8f5e9; color: #2e7d32; }
.pathway-card-tag.fam { background: #fff3e0; color: #e65100; }
.pathway-card-tag.ret { background: rgba(var(--brand-accent-rgb), 0.15); color: #8d6e0f; }
/* Life events rather than life stages. Deliberately outside the palette used
   by .pathway-card-tag.hs/.col/.wf/.hb/.fam/.ret, because those six are points
   on the linear track and these are not on it at all. */
.pathway-card-tag.evt { background: var(--surface-tint); color: var(--brand-primary); }
.pathway-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.pathway-card p  { font-size: 13.5px; color: var(--text-light); line-height: 1.55; margin-bottom: 14px; }
.pathway-card-meta { font-size: 12px; color: var(--brand-primary); font-weight: 700; }

/* ===== PATHWAY STICKY NAV ===== */
.pathway-sticky-nav {
  position: sticky;
  top: 80px;
  z-index: 800;
  background: white;
  border-bottom: 2px solid var(--border);
  box-shadow: 0 4px 16px rgba(var(--brand-dark-rgb), 0.07);
}
.pathway-nav-pills {
  display: flex;
  gap: 4px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pathway-nav-pills::-webkit-scrollbar { display: none; }
.pathway-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--text-light);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1.5px solid transparent;
  transition: all 0.2s;
}
.pathway-nav-pill:hover {
  color: var(--brand-primary);
  background: var(--surface-tint);
}
.pathway-nav-pill.active {
  background: var(--brand-dark);
  color: white;
  border-color: var(--brand-dark);
}

/* ===== PATHWAY DETAIL SECTIONS ===== */
.pathway-detail-section { padding: 64px 0; border-top: 1px solid var(--border); }

.pds-tag-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pds-emoji { font-size: 30px; line-height: 1; }

.pds-heading {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 14px;
  line-height: 1.2;
}
.pds-framing {
  font-size: 17px;
  color: var(--text-light);
  line-height: 1.65;
  max-width: 760px;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.pds-goals { display: flex; flex-direction: column; gap: 32px; margin-bottom: 44px; }

.pds-goal { display: grid; grid-template-columns: 44px 1fr; gap: 0 20px; align-items: start; }

.pds-goal-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-dark);
  color: white;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}

.pds-goal-body h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.pds-goal-why {
  font-size: 15px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 12px;
}

.pds-resources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pds-resources-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-light);
}
.pds-resource-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  background: var(--surface-tint);
  padding: 4px 12px;
  border-radius: 20px;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.pds-resource-link:hover { background: var(--brand-primary); color: white; }

.pds-cu-help {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-mid));
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.pds-cu-help h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-light-on-dark);
  margin-bottom: 10px;
}
.pds-cu-help p {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 680px;
}
.pds-cu-help a {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--accent-light-on-dark);
  text-decoration: none;
  transition: opacity 0.2s;
}
.pds-cu-help a:hover { opacity: 0.75; }

.pds-next {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.pds-next span { font-size: 13px; color: var(--text-light); }
.pds-next a { font-size: 14px; font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.pds-next a:hover { color: var(--brand-dark); }

/* Pathway stage as link */
a.pathway-stage { text-decoration: none; color: inherit; }

@media (max-width: 600px) {
  .pds-goal { grid-template-columns: 36px 1fr; gap: 0 14px; }
  .pds-goal-num { width: 32px; height: 32px; font-size: 13px; }
  .pds-heading { font-size: 24px; }
  .pds-cu-help { padding: 22px 20px; }
}

/* ===== CHECKLISTS & GUIDES ===== */
.guides-section { padding: 80px 0; background: white; }
.guides-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.guide-card {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: all 0.3s;
  position: relative;
  text-decoration: none;
  display: block;
  color: inherit;
}
.guide-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--brand-primary-rgb), 0.1);
}
.guide-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.guide-type.checklist { color: #27ae60; }
.guide-type.guide     { color: var(--brand-primary); }
.guide-type.worksheet { color: #e67e22; }
.guide-card h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
  line-height: 1.3;
}
.guide-card p { font-size: 13px; color: var(--text-light); line-height: 1.5; margin-bottom: 14px; }
.guide-preview { font-size: 12px; color: var(--text-light); }
.guide-preview .check { color: #27ae60; margin-right: 6px; font-weight: 700; }
.guide-preview div { margin-bottom: 4px; }
.guide-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
}

/* ===== CONTENT LIBRARY ===== */
.library-section { padding: 80px 0; background: var(--surface-tint); }
.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.topic-card {
  background: white;
  border-radius: 14px;
  padding: 28px;
  transition: all 0.3s;
  border: 1px solid transparent;
  text-decoration: none;
  display: block;
  color: inherit;
}
.topic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--brand-primary-rgb), 0.12);
  border-color: var(--brand-primary-light);
}
.topic-emoji { font-size: 28px; margin-bottom: 14px; display: block; }
.topic-card h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.topic-card p  { font-size: 14px; color: var(--text-light); line-height: 1.6; margin-bottom: 14px; }
.article-count { font-size: 12px; font-weight: 700; color: var(--brand-primary); letter-spacing: 0.5px; }

/* ===== HOMEPAGE TOPICS SECTION ===== */
.topics-section { padding: 80px 0; background: var(--surface); }
.topics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.topics-grid .topic-card {
  background: white;
  border: 1px solid var(--border);
  box-shadow: 0 2px 12px rgba(var(--brand-dark-rgb),0.05);
}
.topic-icon { font-size: 32px; margin-bottom: 16px; display: block; }
.topic-link { font-size: 13px; font-weight: 700; color: var(--brand-primary); letter-spacing: 0.3px; }
.btn-outline-dark {
  display: inline-block;
  padding: 14px 32px;
  border: 2px solid var(--brand-dark);
  color: var(--brand-dark);
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.2s;
}
.btn-outline-dark:hover { background: var(--brand-dark); color: white; }
@media (max-width: 900px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .topics-grid { grid-template-columns: 1fr; } }

/* ===== VETERANS & MILITARY SECTION ===== */
.veterans-section {
  padding: 80px 0;
  background: var(--brand-dark);
  color: white;
}
.veterans-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
.section-tag-light {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-light-on-dark);
  margin-bottom: 16px;
}
.veterans-intro h2 {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 800;
  color: white;
  margin-bottom: 20px;
  line-height: 1.2;
}
.veterans-intro p {
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 16px;
}
.veterans-open {
  font-size: 14px;
  color: rgba(255,255,255,0.5) !important;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  margin-top: 4px;
}
.veterans-topics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.veterans-topic-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background 0.2s;
  text-decoration: none;
  color: inherit;
}
.veterans-topic-card:hover { background: rgba(255,255,255,0.1); }
.vt-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.veterans-topic-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin-bottom: 6px;
}
.veterans-topic-card p {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 960px) {
  .veterans-grid { grid-template-columns: 1fr; gap: 40px; }
  .veterans-topics { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .veterans-topics { grid-template-columns: 1fr; } }

/* ===== CTA SUBSCRIBE SECTION ===== */
.cta-section {
  padding: 80px 0;
  background: linear-gradient(165deg, var(--brand-dark), var(--brand-dark-mid));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(var(--brand-accent-rgb), 0.1), transparent 70%);
  pointer-events: none;
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  color: white;
  margin-bottom: 16px;
  position: relative;
}
.cta-section p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.65);
  max-width: 500px;
  margin: 0 auto 36px;
  line-height: 1.6;
  position: relative;
}
.subscribe-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.subscribe-form input {
  flex: 1;
  padding: 16px 20px;
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 15px;
  font-family: var(--sans);
  outline: none;
}
.subscribe-form input::placeholder { color: rgba(255, 255, 255, 0.4); }
.subscribe-form input:focus { border-color: var(--brand-accent); }
.subscribe-form button {
  padding: 16px 28px;
  background: var(--brand-accent);
  color: var(--brand-dark);
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.25s;
  white-space: nowrap;
}
.subscribe-form button:hover { background: var(--brand-accent-deep); }

/* ===== NEWSLETTER PAGE ===== */
.newsletter-section { padding: 80px 0; background: white; }
.newsletter-form-wrapper {
  max-width: 560px;
  margin: 0 auto;
  background: var(--surface-alt);
  border-radius: 16px;
  padding: 40px;
  border: 1px solid var(--border);
}
.newsletter-form-wrapper h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.newsletter-form-wrapper p {
  font-size: 15px;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.6;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--brand-primary); }
.form-submit {
  width: 100%;
  padding: 14px;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.25s;
  margin-top: 8px;
}
.form-submit:hover { background: var(--brand-dark); }
.form-disclaimer { font-size: 12px; color: var(--text-light); margin-top: 12px; text-align: center; line-height: 1.5; }

.archive-section { padding: 60px 0 80px; background: var(--surface-tint); }
.archive-empty {
  text-align: center;
  padding: 60px 24px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border);
  max-width: 480px;
  margin: 0 auto;
}
.archive-empty .empty-icon { font-size: 48px; margin-bottom: 16px; display: block; }
.archive-empty h3 {
  font-family: var(--display);
  font-size: 22px;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.archive-empty p { font-size: 15px; color: var(--text-light); line-height: 1.6; }

/* ===== HEALTH SCORE PAGE ===== */
.hs-intro-section { padding: 80px 0; background: white; }
.hs-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ===== FOOTER ===== */
footer {
  background: var(--brand-dark);
  padding: 40px 0 24px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}
.footer-brand h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.footer-brand p { line-height: 1.6; }
.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  margin-bottom: 8px;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent-light-on-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom span { font-size: 12px; opacity: 0.5; }
.footer-compliance-logos {
  display: flex;
  align-items: center;
  gap: 16px;
}
.compliance-logo {
  height: 36px;
  width: auto;
  opacity: 0.75;
}

.footer-powered-by {
  text-align: center;
  padding-top: 16px;
  font-size: 11px;
  opacity: 0.4;
}
.footer-powered-by a {
  color: white;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.footer-powered-by a:hover { opacity: 0.8; }

/* ===== DISCLAIMER BAR ===== */
.disclaimer-bar {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-grid .fhs-widget { max-width: 460px; }
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero h1,
  .hero h2 { font-size: 36px; }
  .page-banner h1,
  .page-banner h2 { font-size: 32px; }
  .section-header h2 { font-size: 28px; }
  .hero { padding: 60px 0 70px; }
  .fhs-grid,
  .local-grid,
  .hs-intro-grid { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: 1fr 1fr; }
  .pathway-detail-grid { grid-template-columns: 1fr 1fr; }
  .local-ticker { grid-template-columns: 1fr 1fr; }
  .pathway-track { flex-wrap: wrap; justify-content: center; gap: 16px; }
  .pathway-track::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* Mobile nav */
  nav { display: none; }
  nav.open { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: white; border-bottom: 1px solid var(--border); padding: 12px 24px 20px; box-shadow: 0 8px 24px rgba(var(--brand-dark-rgb),0.1); z-index: 800; }
  nav.open a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--border); font-size: 16px; }
  nav.open a:last-child { border-bottom: none; margin-top: 8px; }
  nav.open a.active::after { display: none; }
  nav.open .cta-subscribe { text-align: center; }
  .nav-toggle { display: flex; }
  header { position: sticky; top: 0; }
  header .container { position: relative; }
}

@media (max-width: 600px) {
  .hero h1,
  .hero h2 { font-size: 30px; }
  .topic-grid { grid-template-columns: 1fr; }
  .pathway-detail-grid { grid-template-columns: 1fr; }
  .guides-grid { grid-template-columns: 1fr; }
  .local-ticker { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .subscribe-form { flex-direction: column; }
  .top-bar-links { display: none; }
  .briefing-preview { padding: 24px; }
}

/* ================================================================
   ARTICLE FILTER & CARDS (learn.html)
   ================================================================ */

.article-filter-section { padding: 60px 0 80px; background: var(--surface-alt); }

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.filter-pills { display: flex; flex-wrap: wrap; gap: 8px; }

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: white;
  color: var(--text-light);
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.filter-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.filter-pill.active { background: var(--brand-dark); border-color: var(--brand-dark); color: white; }
.pill-count { font-size: 11px; font-weight: 700; opacity: 0.6; }
.filter-pill.active .pill-count { opacity: 0.75; }

.article-showing { font-size: 13.5px; color: var(--text-light); font-weight: 500; white-space: nowrap; }
.article-showing strong { color: var(--brand-dark); }

.article-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.article-card {
  background: white;
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all 0.25s;
  color: inherit;
}
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(var(--brand-primary-rgb), 0.1);
  border-color: var(--brand-primary-light);
  color: inherit;
}
.article-card.featured { border-color: var(--brand-accent); border-width: 2px; }

.ac-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ac-featured-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8d6e0f;
  background: rgba(var(--brand-accent-rgb), 0.18);
  padding: 3px 8px;
  border-radius: 4px;
}

.article-card h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.35;
  margin-bottom: 10px;
}
.article-card p {
  font-size: 13.5px;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 18px;
  flex: 1;
}

.ac-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.ac-read-time { font-size: 12.5px; color: var(--text-light); font-weight: 500; }
.ac-arrow { font-size: 16px; color: var(--brand-primary); font-weight: 700; transition: transform 0.2s; }
.article-card:hover .ac-arrow { transform: translateX(3px); }

@media (max-width: 900px) { .article-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .article-cards-grid { grid-template-columns: 1fr; }
  .filter-pills { gap: 6px; }
  .filter-pill { padding: 7px 13px; font-size: 13px; }
  .filter-bar { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   ARTICLE PAGES
   ================================================================ */

.article-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
  padding: 60px 0 80px;
}

/* Article body */
.article-body {
  min-width: 0;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.article-topic-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--surface-tint);
  color: var(--brand-primary);
}
.article-topic-tag.military { background: rgba(var(--brand-secondary-rgb),0.10); color: var(--brand-secondary); }
.article-topic-tag.budgeting { background: #e8f5e9; color: #2e7d32; }
.article-topic-tag.credit { background: #fff3e0; color: #e65100; }
.article-topic-tag.cards { background: #ede7f6; color: #4527a0; }
.article-topic-tag.banking { background: #e0f2f1; color: #00695c; }
.article-topic-tag.protect { background: #fdecea; color: #b71c1c; }
.article-topic-tag.youth { background: #fff8e1; color: #e65100; }
.article-topic-tag.taxes { background: #eceff1; color: #37474f; }
.article-topic-tag.income { background: #e8eaf6; color: #283593; }
.article-topic-tag.transitions { background: #f3e5f5; color: #6a1b9a; }
.article-topic-tag.homebuying { background: var(--surface-tint); color: var(--brand-primary); }
.article-topic-tag.auto { background: #f3e5f5; color: #6a1b9a; }
.article-topic-tag.student-loans { background: #e3f2fd; color: #1565c0; }
.article-topic-tag.investing { background: rgba(31,138,76,0.12); color: #1B6E3C; }
.article-read-time {
  font-size: 13px;
  color: var(--text-light);
}
.article-local-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-accent-deep);
  background: rgba(var(--brand-secondary-rgb),0.06);
  padding: 3px 10px;
  border-radius: 4px;
}

.article-body h1 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.2;
  margin-bottom: 16px;
}
.article-body .article-deck {
  font-size: 18px;
  color: var(--text-light);
  line-height: 1.65;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

/* Prose styles */
.article-prose h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 36px 0 12px;
  line-height: 1.3;
}
.article-prose h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 28px 0 10px;
  line-height: 1.3;
}
.article-prose p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 20px;
}
.article-prose ul,
.article-prose ol {
  margin: 0 0 20px 20px;
}
.article-prose li {
  font-size: 16px;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 8px;
}
.article-prose strong {
  font-weight: 700;
  color: var(--brand-dark);
}
.article-prose a {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}
.article-prose a:hover {
  text-decoration: underline;
}

/* Callout / highlight box */
.article-callout {
  background: var(--surface-tint);
  border-left: 4px solid var(--brand-primary);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.article-callout.brand {
  background: rgba(var(--brand-accent-rgb),0.08);
  border-left-color: var(--brand-accent);
}
.article-callout.slate {
  background: rgba(var(--brand-secondary-rgb),0.06);
  border-left-color: var(--brand-accent-deep);
}
.article-callout.green {
  background: #e8f5e9;
  border-left-color: #27ae60;
}
.article-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}
/* Only the callout's own <strong> child is the title. A <strong> inside a
   body <p> is inline emphasis and must not be force-blocked and uppercased —
   that stacks phone numbers and product names onto their own lines. */
.article-callout > strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.article-callout p strong {
  display: inline;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-bottom: 0;
}
.article-callout.brand > strong { color: var(--brand-accent-deep); }
.article-callout.slate > strong { color: var(--brand-secondary); }
.article-callout.green > strong { color: #2e7d32; }

/* Key number / stat highlight */
.article-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.article-stat {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.article-stat .stat-number {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  color: var(--brand-dark);
  line-height: 1;
  margin-bottom: 4px;
}
.article-stat .stat-label {
  font-size: 12px;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Article end CTA */
.article-end-cta {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-mid));
  border-radius: 16px;
  padding: 36px;
  text-align: center;
  margin-top: 48px;
  position: relative;
  overflow: hidden;
}
.article-end-cta::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(var(--brand-accent-rgb),0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.article-end-cta h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-bottom: 10px;
  position: relative;
}
.article-end-cta p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
  line-height: 1.6;
  position: relative;
}

/* Article sidebar */
.article-sidebar {
  position: sticky;
  top: 80px;
}
.sidebar-card {
  background: var(--surface-alt);
  border-radius: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  margin-bottom: 20px;
}
.sidebar-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 14px;
}
.sidebar-card ul {
  list-style: none;
  margin: 0;
}
.sidebar-card ul li {
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.4;
}
.sidebar-card ul li:last-child { border-bottom: none; }
.sidebar-card ul li a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.sidebar-card ul li a:hover { text-decoration: underline; }
.sidebar-score-cta {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-mid));
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  color: white;
}
.sidebar-score-cta h4 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.sidebar-score-cta p {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 16px;
  line-height: 1.5;
}

/* Related articles */
.related-articles {
  padding: 60px 0 80px;
  background: var(--surface-tint);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  background: white;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  text-decoration: none;
  display: block;
  transition: all 0.25s;
}
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(var(--brand-primary-rgb),0.1);
  border-color: var(--brand-primary-light);
}
.related-card-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.related-card h4 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--brand-dark);
  line-height: 1.3;
  margin-bottom: 6px;
}
.related-card p {
  font-size: 13px;
  color: var(--text-light);
  line-height: 1.5;
}

/* Breadcrumb */
.breadcrumb {
  padding: 14px 0;
  font-size: 13px;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
  background: white;
}
.breadcrumb a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 8px; opacity: 0.4; }

/* Article responsive */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .article-body h1 { font-size: 28px; }
  .article-stat-row { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .article-body h1 { font-size: 24px; }
  .article-stat-row { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .article-end-cta { padding: 28px 20px; }
}

/* ================================================================
   BUDGET BUILDER — ported from the shared Ostrich CU template
   ================================================================ */
/* ===== BUDGET BUILDER ===== */
.budget-builder {
  padding: 64px 0 80px;
}
.builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.builder-form {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-group label .label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-light);
  font-size: 12px;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--text);
  background: white;
  transition: border-color 0.2s;
  appearance: none;
}
.form-control:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb),0.12); }
.pay-type-toggle { display: flex; gap: 8px; }
.pay-type-btn {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.2s;
}
.pay-type-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.contribution-row { display: flex; align-items: center; gap: 12px; }
.contribution-row input[type="range"] {
  flex: 1;
  accent-color: var(--brand-primary);
}
.contribution-pct {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-primary);
  min-width: 40px;
  text-align: right;
}
.form-hint { font-size: 12px; color: var(--text-light); margin-top: 5px; }
.form-hint strong { color: var(--state-ok); }

.builder-results {
  position: sticky;
  top: 90px;
}

/* A grid item's default `min-width: auto` means a `1fr` track cannot shrink
   below its content's min-content width. The widest thing in this layout is an
   accordion header — `.acc-chip` is `white-space: nowrap`, and the longest chip
   ("Improves your estimate", section 5 of the Budget Builder) makes that header
   ~371px wide. On a phone the container offers 342px, so the collapsed
   single-column track stayed at 371 and the whole PAGE scrolled sideways by
   29px. Nothing looked broken: the layout rendered correctly and only the body
   overflowed, which is invisible unless you swipe.

   `min-width: 0` lets the track shrink to the container and the chip keeps its
   single line. Set on both items so the two-column desktop layout behaves the
   same way, and so every calculator built on .builder-layout inherits the fix
   rather than rediscovering it. */
.builder-form,
.builder-results { min-width: 0; }
.results-card {
  background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand-primary) 100%);
  border-radius: 16px;
  padding: 28px;
  color: white;
  margin-bottom: 16px;
}
.results-card h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: white;
}
.pay-breakdown { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pay-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.pay-row.total {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
}
.pay-label { color: rgba(255,255,255,0.7); }
.pay-label.deduction { color: rgba(255,120,120,0.8); }
.pay-value { font-weight: 600; }
.pay-value.positive { color: var(--brand-primary-light); }
.pay-value.negative { color: rgba(255,150,150,0.9); }

.budget-breakdown {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}
.budget-breakdown h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 16px;
}
.budget-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.budget-row:last-child { border-bottom: none; }
.budget-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.budget-dot.needs { background: var(--brand-dark); }
.budget-dot.wants { background: var(--brand-primary); }
.budget-dot.savings { background: var(--state-ok); }
.budget-row-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--text); }
.budget-row-pct { font-size: 13px; color: var(--text-light); }
.budget-row-amount { font-size: 15px; font-weight: 700; color: var(--brand-dark); }

.disclaimer { font-size: 11px; color: var(--text-light); margin-top: 8px; font-style: italic; }

/* ===== BUDGET BUILDER — collapsible sections & 2026 rework ===== */
.acc { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: white; overflow: hidden; }
.acc-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 18px; background: none; border: none; cursor: pointer; font-family: var(--sans); text-align: left; }
.acc-title { font-weight: 700; color: var(--brand-dark); font-size: 15px; display: flex; align-items: center; gap: 10px; flex: 1; }
.acc-step { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-tint); color: var(--brand-primary); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.acc-chip { font-size: 12px; font-weight: 600; color: var(--text-light); background: var(--surface-alt); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.acc-caret { color: var(--text-light); transition: transform 0.2s; font-size: 12px; }
.acc.open .acc-caret { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 18px 18px; }
.acc.open .acc-body { display: block; }
.acc-desc { font-size: 13px; color: var(--text-light); margin: 0 0 14px; line-height: 1.5; }
.btn-add { width: 100%; padding: 11px; background: var(--surface-tint); color: var(--brand-primary); border: 1px dashed var(--brand-primary-light); border-radius: 8px; font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer; }
.btn-add:hover { background: #e0ecf8; }

.income-stream, .debt-row { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--surface); }
.stream-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stream-label { flex: 1; font-weight: 700; color: var(--brand-dark); border: none; border-bottom: 1px solid transparent; background: none; font-family: var(--sans); font-size: 15px; padding: 2px 0; }
.stream-label:focus { outline: none; border-bottom-color: var(--brand-primary-light); }
.stream-remove, .debt-remove { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--surface-alt); color: var(--text-light); font-size: 18px; line-height: 1; cursor: pointer; }
.stream-remove:hover, .debt-remove:hover { background: #f3d6d6; color: #b23b3b; }
.seg { display: flex; gap: 6px; margin-bottom: 12px; }
.seg-btn { flex: 1; padding: 8px; border: 1px solid var(--border); background: white; border-radius: 7px; font-family: var(--sans); font-weight: 600; font-size: 13px; cursor: pointer; color: var(--text-light); }
.seg-btn.active { background: var(--brand-primary); color: white; border-color: var(--brand-primary); }
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }
.form-row.three { flex-wrap: wrap; }
.form-row.three .form-group { flex: 1; min-width: 84px; }
.stream-hint { font-size: 12px; color: var(--brand-primary); font-weight: 600; margin-top: 8px; min-height: 16px; }
.debt-top { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.debt-top .f-debt-type { flex: 1; }

.expense-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .expense-grid { grid-template-columns: 1fr; } }

.builder-disclaimer { background: var(--surface-tint); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--text-light); line-height: 1.5; margin-top: 4px; }

/* Results — "Where you are" */
.whereyou-grid { display: flex; gap: 12px; margin: 6px 0 14px; }
.whereyou-stat { flex: 1; background: rgba(255,255,255,0.07); border-radius: 10px; padding: 12px 14px; }
.whereyou-label { display: block; font-size: 12px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.whereyou-value { display: block; font-size: 22px; font-weight: 800; margin: 2px 0; color: white; }
.whereyou-value.positive { color: #7fe0a8; }
.whereyou-sub { font-size: 11px; color: rgba(255,255,255,0.5); }
.leftover-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 10px; background: rgba(255,255,255,0.07); }
.leftover-bar.surplus { background: rgba(39,162,91,0.20); }
.leftover-bar.deficit { background: rgba(214,69,69,0.22); }
.leftover-label { font-weight: 700; color: white; font-size: 14px; }
.leftover-value { font-weight: 800; font-size: 20px; color: white; }
.leftover-bar.surplus .leftover-value { color: #7fe0a8; }
.leftover-bar.deficit .leftover-value { color: #ffb3b3; }
.results-empty { font-size: 13px; color: rgba(255,255,255,0.6); margin: 12px 0 0; text-align: center; }

.detail-card { background: white; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 14px; }
.detail-card h4 { font-family: var(--display); font-size: 1.05rem; color: var(--brand-dark); margin: 0 0 10px; }
.detail-sub { font-size: 12px; font-weight: 400; color: var(--text-light); font-family: var(--sans); }
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--surface-alt); }
.detail-row:last-child { border-bottom: none; }
.detail-row .ded { color: var(--text-light); }
.detail-row.total { border-top: 2px solid var(--border); border-bottom: none; margin-top: 4px; padding-top: 10px; font-weight: 800; color: var(--brand-dark); }
.dv { font-weight: 700; font-variant-numeric: tabular-nums; }
.dv.positive { color: var(--state-ok); }
.dv.negative { color: #c0573f; }
.dv.muted { color: var(--text-light); font-weight: 600; font-style: italic; }
.detail-note { font-size: 12px; color: var(--text-light); margin: 10px 0 0; line-height: 1.5; }

/* Debt CTAs */
.cta-card { border-radius: 12px; padding: 16px 18px; margin-top: 14px; border-left: 4px solid var(--brand-primary); background: var(--surface-tint); }
.cta-card.urgent { border-left-color: #d64545; background: #fdeaea; }
.cta-card.warn { border-left-color: #e08a1e; background: #fdf3e3; }
.cta-card.info { border-left-color: var(--brand-primary); background: var(--surface-tint); }
.cta-title { font-weight: 800; color: var(--brand-dark); font-size: 15px; margin-bottom: 5px; }
.cta-body { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-bottom: 12px; }
/* The global reset zeroes <p> margins. .cta-body was written for a single
   short paragraph in the Budget Builder; the scam alerts use several, which
   otherwise run together into one block of text. */
.cta-body p + p { margin-top: 10px; }
.cta-btn { display: inline-block; padding: 9px 16px; background: var(--brand-dark); color: white; border-radius: 7px; font-size: 13px; font-weight: 700; text-decoration: none; }
.cta-btn:hover { background: var(--brand-primary); }

/* 50/30/20 benchmark (optional) */
.bench-card { padding: 0; }
.bench-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 700; color: var(--brand-dark); font-size: 14px; }
.bench-toggle.open .acc-caret { transform: rotate(180deg); }
.bench-body { padding: 0 18px 16px; }
.bench-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.bench-dot.needs { background: var(--brand-primary); }
.bench-dot.wants { background: var(--brand-primary-light); }
.bench-dot.savings { background: var(--state-ok); }

/* Employer match */
.match-card { background: rgba(39,162,91,0.08); border: 1px solid rgba(39,162,91,0.25); border-radius: 12px; padding: 16px 18px; margin-top: 14px; }
.match-card h4 { font-family: var(--display); font-size: 1.05rem; color: var(--brand-dark); margin: 0 0 8px; }
.match-row { display: flex; justify-content: space-between; align-items: center; }


/* Budget Builder — responsive */
@media (max-width: 900px) {
  .builder-layout { grid-template-columns: 1fr; }
  .builder-results { position: static; }
}

/* ================================================================
   VIDEO LIBRARY  (videos.html, homepage rail)
   New component. Reuses the .filter-pill mechanic and the card
   idiom already established by .article-card / .guide-card.
   ================================================================ */

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.video-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.video-card:hover {
  box-shadow: 0 8px 26px rgba(var(--brand-dark-rgb), 0.13);
  transform: translateY(-3px);
  border-color: var(--brand-primary-light);
}

/* 16:9 responsive frame — no JS, no layout shift on load */
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--brand-dark-deep);
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.video-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }

.video-topic-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: var(--surface-tint);
  color: var(--brand-dark);
}
.video-topic-tag.budgeting { background: rgba(var(--brand-primary-rgb), 0.10);  color: var(--brand-primary); }
.video-topic-tag.spending  { background: rgba(var(--brand-accent-rgb), 0.09);  color: var(--brand-accent-deep); }
.video-topic-tag.saving    { background: rgba(31, 138, 76, 0.10);  color: var(--state-ok); }
.video-topic-tag.debt      { background: rgba(232, 163, 61, 0.16); color: #9A6512; }
.video-topic-tag.credit    { background: rgba(var(--brand-secondary-rgb), 0.10);  color: var(--brand-secondary); }

.video-card h3 {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.32;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.video-card p {
  font-size: 14.5px;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 14px;
}
.video-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.video-source { color: var(--text-light); font-weight: 500; }
.video-watch  { color: var(--brand-primary); font-weight: 700; text-decoration: none; }
.video-watch:hover { color: var(--brand-accent); }

/* Homepage rail — horizontal scroll on small screens */
.video-rail-section { padding: 72px 0; background: var(--surface); }
.video-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .video-rail {
    grid-template-columns: repeat(3, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .video-rail > * { scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-rail { grid-template-columns: repeat(3, 86%); }
}

/* ================================================================
   RESOURCE BUNDLES  (learn.html)
   The core demonstration: every asset the client already owns on a
   topic, grouped in one card.
   ================================================================ */

.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 28px; }

.bundle-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 30px 26px;
  border-top: 4px solid var(--brand-dark);
}
.bundle-card.credit   { border-top-color: var(--brand-secondary); }
.bundle-card.debt     { border-top-color: var(--state-warn); }
.bundle-card.home     { border-top-color: var(--brand-primary); }
.bundle-card.retire   { border-top-color: var(--state-ok); }
.bundle-card.youth    { border-top-color: var(--brand-accent); }

.bundle-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.bundle-emoji { font-size: 30px; line-height: 1; }
.bundle-card h3 { font-family: var(--display); font-size: 23px; color: var(--brand-dark); }
.bundle-card > p { font-size: 15px; color: var(--text-light); line-height: 1.65; margin-bottom: 20px; }

.bundle-group { margin-bottom: 18px; }
.bundle-group-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.bundle-links { display: flex; flex-direction: column; gap: 3px; }
.bundle-link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 6px;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.bundle-link:hover { background: var(--surface-tint); color: var(--brand-dark); }
.bundle-link .bl-kind {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
  min-width: 62px;
}
.bundle-link:hover .bl-kind { color: var(--brand-primary); }
.bundle-link .bl-ext { font-size: 11px; color: var(--text-light); }

@media (max-width: 720px) {
  .bundle-grid { grid-template-columns: 1fr; }
  .bundle-card { padding: 24px 22px 20px; }
  .bundle-link .bl-kind { min-width: 54px; }
}

/* ================================================================
   CONCEPT NOTICE — this is an unsolicited Ostrich concept, not an
   the client property. Must remain visible on every page.
   ================================================================ */
.concept-notice {
  background: #FFF8E5;
  border-bottom: 1px solid #E8D9A8;
  color: #6B5518;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 9px 0;
  text-align: center;
}
.concept-notice strong { color: #4A3A0F; }

/* ================================================================
   PRESENTATION REQUEST CTA
   the client runs free financial-education workshops (K-12, collegiate,
   adults, businesses, youth community events). On their live site
   this is an email address inside a paragraph on a buried page.
   ================================================================ */

.footer-cta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
  max-width: 380px;
}
.footer-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--accent-light-on-dark);
}
.footer-cta-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.footer-cta strong {
  display: block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 2px;
}
.footer-cta span span,
.footer-cta > span:last-child {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.45;
}

/* Full-width outreach band — homepage */
.outreach-section {
  padding: 64px 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
}
.outreach-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 52px;
  align-items: center;
}
.outreach-grid h2 {
  font-family: var(--display);
  font-size: 32px;
  color: var(--brand-dark);
  margin-bottom: 14px;
  line-height: 1.2;
}
.outreach-grid > div > p {
  font-size: 16px;
  color: var(--text-light);
  line-height: 1.7;
  margin-bottom: 22px;
}
.outreach-audiences {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  list-style: none;
}
.outreach-audiences li {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-dark);
  background: #fff;
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: 50px;
}
.outreach-card {
  background: #fff;
  border: 1px solid var(--border);
  border-top: 4px solid var(--brand-accent);
  border-radius: 12px;
  padding: 28px 30px;
}
.outreach-card h3 {
  font-family: var(--display);
  font-size: 20px;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.outreach-card p { font-size: 14.5px; color: var(--text-light); line-height: 1.6; margin-bottom: 18px; }
.outreach-or {
  display: block;
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  margin: 12px 0 10px;
}
.outreach-phone {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-dark);
  text-decoration: none;
}
.outreach-phone:hover { color: var(--brand-accent); }

@media (max-width: 860px) {
  .outreach-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-cta { max-width: none; }
}


/* ---- appended by tools/tokenize.py ------------------------------------
   .btn-outline gets its own token.
   The source stylesheet used its light accent for BOTH accent text on dark
   and the outline button, because for that client they were the same colour.
   They are not the same role: one site's eyebrows and hovers are gold while
   its outline button is blue, so a single token forces one of them wrong.
   Discovered by pixel-diffing a migration that was otherwise clean. */
/* Regulatory marks must be legible on ANY footer colour.
   .compliance-logo carried `opacity: 0.75` and no background. The Equal
   Housing Lender mark is dark line-art on transparent, so on a dark navy
   footer it rendered as a barely-visible smudge — a required disclosure that
   the reader cannot actually see is not a disclosure. The footer LOGO already
   solved this with a white chip; the marks now get the same treatment, which
   also preserves each mark exactly as published rather than recolouring a
   regulator's artwork. */
.footer-compliance-logos { display: flex; align-items: center; gap: 10px; }
.compliance-logo {
  opacity: 1;
  background: #fff;
  padding: 5px 8px;
  border-radius: 6px;
}

.btn-outline { border-color: var(--outline-on-dark); color: var(--outline-on-dark); }
.btn-outline:hover { background: var(--outline-on-dark); color: var(--brand-dark); }

/* The page-banner accent stripe belongs to the ACCENT family, not the primary
   one. The source stylesheet used its light primary for the middle stop
   because for that client the two happened to look right together. Another
   site's stripe is gold -> crimson -> gold, i.e. accent -> accent-deep ->
   accent, and inheriting the primary-light stop turned its crimson centre
   blue. */
.page-banner::after {
  background: linear-gradient(90deg, var(--brand-accent), var(--brand-accent-deep), var(--brand-accent));
}

/* ---- appended by tools/tokenize.py ------------------------------------
   .fhs-cat-left sits inside .hero-card, which is --brand-dark. It set no
   colour of its own, so any text placed directly in it inherited the page
   body colour (--text, a dark grey) and rendered at ~1.2:1 on the navy.
   It only looked correct because every existing body wrapped its label in
   .fhs-cat-name. Same shape as the .fhs-check bug recorded in the project
   history: a class applied to the wrong element, in a context the template
   never anticipated. Setting the colour here means the component is legible
   regardless of how the markup is written. */
.fhs-cat-left { color: var(--on-dark); }

/* ================================================================
   CALCULATOR SUITE
   Shared components for the calculator pages (debt payoff, auto
   loan, emergency fund) and the calculator hub.

   Deliberately built on what the Budget Builder already established
   — .builder-layout, .builder-form, .builder-results, .acc,
   .detail-card, .detail-row, .cta-card, .seg — so a new calculator
   is markup and maths rather than a new design. Everything below is
   what those did NOT already cover.

   Brand-neutral like the rest of this file: colour arrives from the
   tokens in the client's generated brand.css, and the fixed --state-*
   colours are used wherever a value must not read as brand approval.
   ================================================================ */

/* --- The one big number. Sits inside .results-card, on the dark
       gradient, so its colours are white-relative rather than token
       colours: a brand accent that passes contrast on white can fail
       badly here, which is the exact failure the contrast gate exists
       to catch elsewhere. --- */
.calc-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 18px;
}
.calc-headline-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}
.calc-headline-value {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc-headline-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  min-height: 18px;
}

/* --- Mode switch: a .seg that carries three options rather than two,
       so it wraps on a phone instead of squeezing to unreadable. --- */
.calc-mode-seg { flex-wrap: wrap; margin-bottom: 20px; }
.calc-mode-seg .seg-btn { min-width: 120px; }

/* --- Checkbox rows. The global reset strips the browser's own
       spacing, so an unstyled checkbox + label collides. --- */
.calc-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  line-height: 1.45;
}
.calc-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.calc-check em { font-style: italic; }

/* --- A result that needs a warning rather than a number: negative
       equity, a minimum below the interest, a refinance that lowers
       the payment and raises the total. Uses --state-warn, never a
       brand colour: this must not read as the credit union endorsing
       what it is warning about. --- */
.calc-warning {
  background: var(--state-warn-tint);
  border: 1px solid rgba(232, 163, 61, 0.45);
  border-left: 4px solid var(--state-warn);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 14px;
}
.calc-warning-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.calc-warning-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

/* --- Two options side by side, one of them chosen. --- */
.calc-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 6px;
}
.calc-compare-col {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s;
}
.calc-compare-col.winner {
  border-color: var(--brand-primary);
  background: var(--surface-tint);
}
.calc-compare-head {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-dark);
}
.calc-compare-sub {
  font-size: 11.5px;
  color: var(--text-light);
  margin-bottom: 8px;
}
.calc-compare-value {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}
.calc-compare-foot {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
}

/* --- An ordered sequence: which debt clears when, which savings
       milestone lands when. The counter is drawn rather than using
       the list marker, which the global reset removes. --- */
.calc-order {
  list-style: none;
  counter-reset: calc-order;
  margin: 0;
  padding: 0;
}
.calc-order-item {
  counter-increment: calc-order;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0 11px 34px;
  border-bottom: 1px solid var(--surface-alt);
  position: relative;
  font-size: 14px;
}
.calc-order-item:last-child { border-bottom: none; }
.calc-order-item::before {
  content: counter(calc-order);
  position: absolute;
  left: 0;
  top: 10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-order-item.done::before {
  content: "\2713";
  background: var(--state-ok-tint);
  color: var(--state-ok-deep);
}
.calc-order-label {
  font-weight: 700;
  color: var(--brand-dark);
  display: flex;
  flex-direction: column;
}
.calc-order-note {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.45;
  margin-top: 2px;
}
.calc-order-when {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
}
.calc-order-sub {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-light);
}

/* --- Progress toward a savings target. Inside .results-card. --- */
.calc-progress { margin: 2px 0 18px; }
.calc-progress-bar {
  height: 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.calc-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: #7fe0a8;
  transition: width 0.35s ease;
}
.calc-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 7px;
}

/* --- "Why this number": each adjustment shown as the reason that
       produced it, with the months it added. --- */
.calc-reasons { list-style: none; margin: 0 0 4px; padding: 0; }
.calc-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-alt);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.calc-reason:last-child { border-bottom: none; }
.calc-reason-delta {
  flex: 0 0 auto;
  min-width: 30px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 20px;
  background: var(--surface-tint);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.calc-reason-delta.base {
  background: var(--surface-alt);
  color: var(--text-light);
}

/* --- Download button. Previously written inline on the Budget
       Builder's markup, which is why it could not be reused. --- */
.calc-download {
  margin-top: 14px;
  width: 100%;
  padding: 13px 20px;
  background: var(--brand-dark);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.calc-download:hover { background: var(--brand-primary); }
.calc-download-hint {
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  margin-top: 6px;
}

/* --- "Learn more" rail. --- */
.calc-learn {
  margin-top: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.calc-learn-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 10px;
}
.calc-learn a {
  display: block;
  font-size: 14px;
  color: var(--brand-primary);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.calc-learn a:last-child { border-bottom: none; }
.calc-learn a:hover { color: var(--brand-dark); }

/* --- Hub page footnote. --- */
.calc-hub-note {
  margin-top: 36px;
  padding: 20px 24px;
  background: var(--surface-alt);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-light);
}
.calc-hub-note strong { color: var(--brand-dark); }

/* --- Responsive. .builder-layout already collapses at 900px; these
       are the pieces inside it that need their own breakpoint. --- */
@media (max-width: 560px) {
  .calc-headline-value { font-size: 32px; }
  .calc-compare { grid-template-columns: 1fr; }
  .calc-mode-seg .seg-btn { min-width: 0; flex: 1 1 100%; }
}

/* --- "More calculators" strip.
       Sits at the foot of the Budget Builder, which is the nav entry the whole
       suite hangs off. Deliberately lighter than .guide-card: this is a rail
       out of a tool the member is already using, not a gallery to browse. --- */
.calc-more {
  border-top: 1px solid var(--border);
  margin-top: 56px;
  padding-top: 36px;
}
.calc-more-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.calc-more-head h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--brand-dark);
}
.calc-more-head p {
  font-size: 14px;
  color: var(--text-light);
  flex: 1 1 260px;
}
.calc-more-all {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-primary);
  text-decoration: none;
  white-space: nowrap;
}
.calc-more-all:hover { color: var(--brand-dark); }
.calc-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.calc-more-card {
  display: block;
  /* The card is an <a> with no direct text of its own; without this it still
     inherits the UA's link blue, which shows up the moment anyone adds an
     unstyled child to it. */
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.calc-more-card:hover {
  border-color: var(--brand-primary-light);
  box-shadow: 0 8px 22px rgba(var(--brand-dark-rgb), 0.10);
  transform: translateY(-2px);
}
.calc-more-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 6px;
}
.calc-more-card h4 {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.calc-more-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-light);
}
.calc-more-card .calc-more-go {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-primary);
}

/* Link out to the credit union's own rates page, beside any rate input.
 * Deliberately a link and not a number: publishing a rate turns an education
 * page into an advertisement, which pulls in Reg DD / Reg Z disclosure duties
 * and puts a figure the client controls behind a build we control. The link
 * carries the usefulness without the compliance surface, and cannot go stale.
 * Rendered only where client.yml has a real urls.rates (see {{#fact}}). */
.rate-link { color: var(--brand-primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.rate-link:hover { text-decoration: underline; }

/* ===== ARTICLE FOOTER CTA =====
 * A full-width band closing every article page, rendered by build.py from
 * client.yml -> article_cta. Opt-in: a client without that key gets nothing.
 *
 * It exists because one client hand-pasted a presentation-request block into
 * the bottom of 26 article bodies. Hand-pasting is how an article stops being
 * shared: each of those 26 became a fork that no longer receives template
 * changes. Worse, its CSS sat in a client css/styles.css, which chrome.py
 * never links and the build never deploys, so all 26 shipped completely
 * unstyled — a bare heading and a naked link under the related articles.
 *
 * Accent text sits on --brand-dark here, so the button uses --brand-accent
 * against a dark ground and the label takes --brand-dark back. Anything
 * setting accent-coloured TEXT on this band must use --accent-on-dark;
 * tools/brand.py refuses a palette whose accent fails contrast. */
.article-cta {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-dark-mid));
  padding: 44px 0;
  margin-top: 8px;
}
.article-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.article-cta-text { flex: 1; min-width: 280px; }
.article-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800; color: #fff; margin: 0 0 6px;
}
.article-cta p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14.5px; line-height: 1.6; margin: 0; max-width: 640px;
}
.article-cta-btn {
  flex: 0 0 auto; display: inline-block;
  background: var(--brand-accent); color: var(--brand-dark);
  font-weight: 800; font-size: 15px; padding: 14px 26px;
  border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: filter 0.2s, transform 0.2s;
}
.article-cta-btn:hover {
  filter: brightness(1.05); transform: translateY(-1px); color: var(--brand-dark);
}
@media (max-width: 640px) {
  .article-cta-inner { flex-direction: column; align-items: flex-start; }
}