/* ============================================================
 * client.css — Kimberly Clark Credit Union
 *
 * Loads AFTER core.css, so a rule here wins on a tie.
 *
 * KCCU is a live site and keeps ALL of its own page bodies: the
 * migration converges the stylesheet and the build, not the pages.
 * Those bodies were designed against KCCU's own stylesheet, and the
 * shared core defines many of the same class names differently
 * (.pathway-track, .guide-card, .checklist, .btn-save-pdf ...).
 *
 * So this file is the COMPLETE page-body portion of KCCU's
 * pre-migration css/styles.css + css/calculator.css, tokenized by
 * tools/tokenize.py. Chrome sections (top bar, header/nav, footer)
 * are omitted: chrome.py renders that markup and core.css styles it.
 *
 * Regenerated 2026-09-16. The earlier hand-picked subset dropped
 * ~90 rules and stripped the @media wrappers off the responsive
 * block, so mobile-only rules (one-column grids) applied on desktop.
 * Verified by computed-style diff against the live site at 1280px
 * and 390px.
 *
 * Below the tokenized source: overrides that neutralise core.css
 * properties KCCU's stylesheet never set (a later rule cannot unset
 * a property it does not mention).
 * ============================================================ */

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1A4A7A 100%);
  color: white;
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,122,138,0.2) 0%, transparent 70%);
  border-radius: 50%;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.9);
}
.hero-badge .dot {
  width: 8px; height: 8px;
  background: var(--accent-light-on-dark);
  border-radius: 50%;
}
.hero h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  color: white;
}
.hero h2 em { font-style: italic; color: var(--accent-light-on-dark); }
.hero > .container > .hero-grid > div > p {
  font-size: 17px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 32px;
  max-width: 460px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-primary {
  display: inline-block;
  background: var(--brand-accent);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: var(--accent-light-on-dark); transform: translateY(-1px); color: white; }
.btn-secondary {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.2s;
}
.btn-secondary:hover { background: rgba(255,255,255,0.18); color: white; }

/* Hero card */
.hero-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 28px 24px;
  backdrop-filter: blur(8px);
}
.fhs-score-ring { position: relative; width: 180px; height: 180px; }
.fhs-score-ring svg { position: absolute; top: 0; left: 0; }
.score-text {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.score-number { font-family: var(--display); font-size: 48px; font-weight: 800; color: white; line-height: 1; }
.score-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; }
.fhs-categories { display: flex; flex-direction: column; gap: 10px; }
.fhs-cat { display: flex; align-items: center; gap: 10px; }
.fhs-cat-left { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.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,162,91,0.2); }
.fhs-cat-icon.spending { background: rgba(0,122,138,0.2); }
.fhs-cat-icon.debt { background: rgba(26,95,165,0.2); }
.fhs-cat-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.8); }
.fhs-cat-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.fhs-cat-fill { height: 100%; border-radius: 3px; background: var(--brand-accent); }
.fhs-cat-fill.good { background: var(--state-ok); }
.fhs-cat-score { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.7); min-width: 28px; text-align: right; }
.hero-cta-secondary {
  display: inline-block;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  width: 100%;
  margin-top: 16px;
  transition: color 0.2s;
}
.hero-cta-secondary:hover { color: var(--accent-light-on-dark); }

/* ===== SECTION HEADINGS ===== */
.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 12px;
}
.section-desc {
  font-size: 16px;
  color: var(--text-light);
  max-width: 560px;
}
.section-header { margin-bottom: 40px; }
.section-header.centered { text-align: center; }
.section-header.centered .section-desc { margin: 0 auto; }

/* ===== KC BENEFITS SPOTLIGHT ===== */
.benefits-spotlight {
  background: var(--surface-tint);
  padding: 56px 0;
  border-top: 3px solid var(--brand-accent);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.benefit-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--border);
}
.benefit-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--surface-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 14px;
}
.benefit-card h3 {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 8px;
}
.benefit-card p { font-size: 14px; color: var(--text-light); margin-bottom: 12px; }
.benefit-card a { font-size: 14px; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
.benefit-card a:hover { color: var(--brand-dark); }

/* ===== TOPIC CARDS (learn.html) ===== */
.topics-section { padding: 64px 0; }
.topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.topic-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  text-decoration: none;
  display: block;
}
.topic-card:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 4px 20px rgba(0,122,138,0.1);
  transform: translateY(-2px);
}
.topic-icon { font-size: 28px; margin-bottom: 12px; }
.topic-card h3 { font-size: 16px; font-weight: 700; color: var(--brand-dark); margin-bottom: 6px; }
.topic-card p { font-size: 13px; color: var(--text-light); }

/* ===== ARTICLE CARDS ===== */
.articles-section { padding: 48px 0 80px; background: var(--surface-alt); }
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-pill {
  background: white;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.filter-pill:hover { border-color: var(--brand-accent); color: var(--brand-primary); }
.filter-pill.active { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.article-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 20px 22px;
  text-decoration: none;
  display: block;
  transition: box-shadow 0.2s, transform 0.15s;
}
.article-card:hover { box-shadow: 0 4px 16px rgba(13,52,102,0.08); transform: translateY(-2px); }
.article-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 8px; }
.article-card h3 { font-size: 15px; font-weight: 700; color: var(--brand-dark); margin-bottom: 8px; line-height: 1.4; }
.article-card p { font-size: 13px; color: var(--text-light); line-height: 1.55; }
.article-read-time { font-size: 12px; color: var(--text-light); margin-top: 10px; }

/* ===== PATHWAYS ===== */
.pathways-hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1A4A7A 100%);
  color: white;
  padding: 56px 0;
}
.pathways-hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 12px;
}
.pathways-hero p { font-size: 17px; color: rgba(255,255,255,0.75); max-width: 540px; }
.pathway-track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 32px 0;
  overflow-x: auto;
}
.pathway-step {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pathway-step-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.2s;
  text-decoration: none;
}
.pathway-step-inner:hover { background: var(--surface-tint); }
.pathway-step-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pathway-step-inner:hover .pathway-step-circle {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(0,122,138,0.1);
}
.pathway-step-label { font-size: 12px; font-weight: 600; color: var(--text-light); text-align: center; max-width: 80px; }
.pathway-connector { width: 40px; height: 2px; background: var(--border); flex-shrink: 0; }

.pathway-section { padding: 56px 0; }
.pathway-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pathway-detail-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  transition: box-shadow 0.2s;
}
.pathway-detail-card:hover { box-shadow: 0 4px 20px rgba(13,52,102,0.08); }
.pathway-detail-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.pathway-detail-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--surface-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.pathway-detail-card h3 { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--brand-dark); margin-bottom: 4px; }
.pathway-lesson-count { font-size: 12px; color: var(--brand-primary); font-weight: 600; }
.pathway-lessons { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pathway-lessons li a {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.pathway-lessons li:last-child a { border-bottom: none; }
.pathway-lessons li a:hover { color: var(--brand-primary); }
.pathway-lessons li a::before { content: '→'; color: var(--brand-primary); font-size: 13px; }

/* ===== GUIDES ===== */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  padding: 48px 0 80px;
}
.guide-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
}
a.guide-card:hover {
  border-color: var(--brand-accent);
  box-shadow: 0 4px 20px rgba(74, 143, 204, 0.15);
  transform: translateY(-2px);
}
.guide-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--surface-tint);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 14px;
  align-self: flex-start;
}
.guide-card h3 { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--brand-dark); margin-bottom: 10px; }
.guide-card p { font-size: 14px; color: var(--text-light); margin-bottom: 20px; flex: 1; }
.guide-actions { display: flex; gap: 10px; }
.btn-guide-view {
  display: inline-block;
  background: var(--brand-accent);
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;
}
.btn-guide-view:hover { background: var(--brand-dark); color: white; }
.btn-guide-outline {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.2s;
}
.btn-guide-outline:hover { border-color: var(--brand-accent); color: var(--brand-primary); }
/* Calculator design system moved to css/calculator.css (shared, portable). */

/* ===== NEWSLETTER ===== */
.newsletter-section {
  background: var(--brand-dark);
  padding: 64px 0;
}
.newsletter-section .section-label { color: var(--accent-light-on-dark); }
.newsletter-section .section-title { color: white; }
.newsletter-section .section-desc { color: rgba(255,255,255,0.7); }
.newsletter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.subscribe-form { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.subscribe-form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: white;
  font-size: 15px;
  font-family: var(--sans);
  min-width: 200px;
}
.subscribe-form input::placeholder { color: rgba(255,255,255,0.4); }
.subscribe-form input:focus { outline: none; border-color: var(--accent-light-on-dark); }
.subscribe-form button {
  padding: 12px 24px;
  background: var(--brand-accent);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--sans);
  transition: background 0.2s;
}
.subscribe-form button:hover { background: var(--accent-light-on-dark); }
.newsletter-preview {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 24px;
}
.newsletter-preview-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-light-on-dark); margin-bottom: 12px; }
.preview-item { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.preview-item:last-child { border-bottom: none; }
.preview-item h4 { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 3px; }
.preview-item p { font-size: 12px; color: rgba(255,255,255,0.5); }

/* ===== PAGE HERO (interior pages) ===== */
.page-hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1A4A7A 100%);
  color: white;
  padding: 52px 0 56px;
}
.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  margin-bottom: 12px;
  color: white;
}
.page-hero p { font-size: 16px; color: rgba(255,255,255,0.75); max-width: 580px; }

/* ===== ARTICLE ===== */
.article-hero {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1A4A7A 100%);
  color: white;
  padding: 48px 0;
}
.article-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light-on-dark); margin-bottom: 10px; }
.article-hero h1 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: white;
  max-width: 700px;
  margin-bottom: 12px;
}
.article-hero .article-meta-row { font-size: 13px; color: rgba(255,255,255,0.6); }
.article-body { max-width: 740px; margin: 48px auto 80px; padding: 0 24px; }
.article-body h2 { font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--brand-dark); margin: 36px 0 14px; }
.article-body h3 { font-size: 1.1rem; font-weight: 700; color: var(--brand-dark); margin: 24px 0 10px; }
.article-body p { margin-bottom: 16px; color: var(--text); }
.article-body ul, .article-body ol { margin: 0 0 16px 24px; color: var(--text); }
.article-body li { margin-bottom: 6px; }
.article-cta-box {
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-accent);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 32px 0;
}
.article-cta-box p { margin-bottom: 10px; font-weight: 600; color: var(--brand-dark); }
.article-cta-box a { color: var(--brand-primary); font-weight: 600; text-decoration: none; }
.article-cta-box a:hover { color: var(--brand-dark); }

/* ===== ARTICLE CONTENT ===== */
.article-body {
  padding: 56px 0 80px;
}
.article-content {
  max-width: 720px;
  margin: 0 auto;
}
.article-content h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 40px 0 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.article-content h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}
.article-content h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin: 24px 0 8px;
}
.article-content p { margin-bottom: 16px; color: var(--text); line-height: 1.7; }
.article-content ul,
.article-content ol { margin: 0 0 16px 24px; color: var(--text); }
.article-content li { margin-bottom: 6px; line-height: 1.65; }

/* Article tables */
.article-table-wrap {
  overflow-x: auto;
  margin: 20px 0 24px;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article-table th {
  background: var(--brand-dark);
  color: white;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
}
.article-table th:first-child { border-radius: 8px 0 0 0; }
.article-table th:last-child  { border-radius: 0 8px 0 0; }
.article-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:nth-child(even) td { background: var(--surface-alt); }
.article-table tbody tr:hover td { background: var(--surface-tint); }
.article-caption {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
  margin-top: -16px;
  margin-bottom: 20px;
}

/* Article callout box */
.article-callout {
  background: var(--surface-tint);
  border-left: 4px solid var(--brand-accent);
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--text);
  line-height: 1.65;
}
.article-callout strong { color: var(--brand-dark); }

/* Article disclaimer */
.article-disclaimer {
  font-size: 13px;
  color: var(--text-light);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-top: 40px;
  line-height: 1.6;
}

/* Related articles / tools section */
.article-tools {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-tools .section-label {
  margin-bottom: 4px;
}
.article-tool-link {
  display: block;
  padding: 14px 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--brand-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.article-tool-link:hover {
  border-color: var(--brand-accent);
  background: var(--surface-tint);
  color: var(--brand-primary);
}

/* Checklist style (guides) */
.checklist { list-style: none; margin-left: 0; padding-left: 0; display: flex; flex-direction: column; gap: 10px; margin: 16px 0 24px; }
.checklist li { list-style: none; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; background: var(--surface-alt); border-radius: 8px; border: 1px solid var(--border); transition: background 0.15s, border-color 0.15s; }
.checklist li::before, .checklist li::marker { content: none; display: none; }
.checklist li:last-child { border-bottom: none; }
.checklist li input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--brand-accent); width: 18px; height: 18px; cursor: pointer; }
.checklist li label { font-size: 15px; color: var(--text); cursor: pointer; line-height: 1.5; }
.checklist li label strong { display: block; font-weight: 700; color: var(--brand-dark); margin-bottom: 2px; }
.checklist li.checked { background: rgba(39, 162, 91, 0.05); border-color: rgba(39, 162, 91, 0.2); }

/* Guide/Checklist download bar (top + bottom) */
.guide-download-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 32px;
}
.guide-download-bar--bottom { margin-top: 36px; margin-bottom: 0; }
.guide-download-hint { font-size: 14px; color: var(--text-light); }
.guide-download-progress { font-size: 14px; color: var(--text-light); font-weight: 600; }
.btn-save-pdf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--brand-dark);
  color: white;
  padding: 9px 20px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.btn-save-pdf:hover { background: var(--brand-accent); }

/* ===== RESPONSIVE (page bodies only; chrome handled by core.css) ===== */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .benefits-grid { grid-template-columns: 1fr; }
  .topics-grid { grid-template-columns: repeat(2, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter-grid { grid-template-columns: 1fr; }
  .pathway-grid { grid-template-columns: 1fr; }
  .guides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .topics-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   CALCULATOR DESIGN SYSTEM  (shared, portable)
   -------------------------------------------------------------------------
   Reusable UI for interactive financial-wellness tools: two-column layout,
   numbered collapsible accordion input sections, a sticky dark "results"
   card, detail/breakdown rows, benchmark + CTA cards.

   Used by: budget-builder.html, guides/emergency-fund-calculator.html, and
   any future calculators. Pair with the generic [data-acc] accordion handler
   in js/main.js (no per-page script needed).

   PORTABLE ACROSS SITES: this file only depends on these CSS custom
   properties, which each site defines in :root (styles.css):
     --brand-dark  --brand-accent  --accent-light-on-dark  --state-ok
     --surface-tint   --surface-alt  --surface
     --text  --text-light  --border
     --display  --sans
   To reuse on another site, drop in this file and map those variable names
   (or alias them) to that site's palette.
   ========================================================================= */

/* ---- Layout ---- */
.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 controls ---- */
.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-accent); box-shadow: 0 0 0 3px rgba(0,122,138,0.1); }
.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-accent); border-color: var(--brand-accent); color: white; }
.contribution-row { display: flex; align-items: center; gap: 12px; }
.contribution-row input[type="range"] {
  flex: 1;
  accent-color: var(--brand-accent);
}
.contribution-pct {
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-accent);
  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); }
.expense-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .expense-grid { grid-template-columns: 1fr; } }
.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; }

/* ---- Accordion (collapsible input sections) — see js/main.js [data-acc] ---- */
.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-accent); 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-accent); border: 1px dashed var(--accent-light-on-dark); border-radius: 8px; font-family: var(--sans); font-weight: 700; font-size: 14px; cursor: pointer; }
.btn-add:hover { background: #e0ecf8; }

/* ---- Repeatable rows (income streams / debts) ---- */
.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(--accent-light-on-dark); }
.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-accent); color: white; border-color: var(--brand-accent); }
.stream-hint { font-size: 12px; color: var(--brand-accent); 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; }

.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; }
.disclaimer { font-size: 11px; color: var(--text-light); margin-top: 8px; font-style: italic; }

/* ---- Results column (sticky) ---- */
.builder-results {
  position: sticky;
  top: 90px;
}
.results-card {
  background: linear-gradient(135deg, var(--brand-dark) 0%, #1A4A7A 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;
}

/* "Where you are" primary stats */
.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; }

/* Dark-card breakdown pieces (income/spending style) */
.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(--accent-light-on-dark); }
.pay-value.negative { color: rgba(255,150,150,0.9); }

/* White detail cards + rows */
.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; }

/* Legacy 50/30/20 breakdown (white card) */
.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-accent); }
.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); }

/* CTA cards (e.g. debt help) */
.cta-card { border-radius: 12px; padding: 16px 18px; margin-top: 14px; border-left: 4px solid var(--brand-accent); 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-accent); 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; }
.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-accent); }

/* Collapsible 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-accent); }
.bench-dot.wants { background: var(--accent-light-on-dark); }
.bench-dot.savings { background: var(--state-ok); }

/* Highlight / match card */
.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; }

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


/* ---- 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); }

/* ============================================================
 * Neutralise core.css properties KCCU's stylesheet never set.
 * Each of these rendered visibly differently from the live site.
 * ============================================================ */

/* Pathways: core draws its own gradient rail at a fixed offset, which
   ran THROUGH the step icons. KCCU's track uses .pathway-connector
   segments between steps instead. */
.pathway-track { margin-bottom: 0; }
.pathway-track::before { content: none; display: none; }

/* Guides: pin the actions to the bottom of every card so buttons line
   up across a row regardless of description length. */
.guide-card .guide-actions { margin-top: auto; }

/* Homepage hero: core adds a "FREE FOR EVERYONE" badge, a drop shadow
   and an accent stripe KCCU's hero never had. */
.hero-card { box-shadow: none; }
.hero-card::before { content: none; display: none; }
.hero::after { content: none; display: none; }

/* Health-score ring and category rows: KCCU's typography and spacing. */
.fhs-score-ring { display: block; }
.fhs-score-ring .score-text { z-index: auto; }
.fhs-score-ring .score-number { font-family: var(--display); font-size: 48px; font-weight: 800; line-height: 1; }
.fhs-score-ring .score-label { font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255,255,255,0.6); }
.fhs-cat { padding: 0; border-bottom: 0; justify-content: normal; }

/* Section headers are left-aligned on KCCU unless marked .centered. */
.section-header { text-align: left; margin-bottom: 40px; }
.section-header.centered { text-align: center; }
.section-header h2.section-title { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 12px; }
.section-header p.section-desc { font-size: 16px; line-height: 1.6; max-width: 560px; margin: 0; }
.section-header.centered p.section-desc { margin: 0 auto; }

/* Learn page filter + cards. */
.filter-bar { padding-bottom: 0; border-bottom: 0; justify-content: normal; }
.filter-pill { display: inline-block; gap: normal; font-family: inherit; }
.article-card { display: block; }
.article-meta { display: block; }
.topics-grid .topic-card, .topic-card { box-shadow: none; }
.topics-section { background: transparent; }

/* Newsletter page form wrapper. */
.newsletter-form-wrapper { max-width: none; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; }

/* Article callout titles: KCCU renders the leading <strong> inline. */
.article-callout > strong { display: inline; font-size: inherit; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--brand-dark); margin-bottom: 0; }

/* Buttons. */
.btn-primary { display: inline-block; gap: normal; align-items: normal; }

/* Calculator inputs: KCCU's padding. */
.form-control { padding: 10px 14px; }
/* core's newsletter-form `.form-group input` also matches the calculator
   fields; restore KCCU's padding and leave range sliders unboxed. */
.form-group input.form-control { padding: 10px 14px; }
.form-group input[type="range"] { padding: 0; border: 0; background: none; border-radius: 0; }