/* ============================================================
   CNAClasses design system — styles.css
   This is the ONE stylesheet rendered designs inherit. Everything the look
   needs is reachable from here via @import: fonts, tokens, and the primitive
   class vocabulary below. Style with these classes + var(--cna-*) tokens.
   ============================================================ */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* Tokens (source of truth) */
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");

/* ---- base ---- */
body { font-family: var(--cna-font-sans); font-size: var(--cna-body); line-height: var(--cna-lh-body); color: var(--cna-ink-800); background: var(--cna-paper); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4 { font-family: var(--cna-font-serif); color: var(--cna-ink-900); font-weight: 600; line-height: var(--cna-lh-heading); letter-spacing: var(--cna-track-tight); margin: 0; }
h1 { font-size: var(--cna-h1); letter-spacing: -.02em; }
h2 { font-size: var(--cna-h2); }
h3 { font-size: var(--cna-h3); }
a { color: var(--cna-brand); }

/* ---- eyebrow: tiny uppercase label above a heading. Gold on dark, brand on light. ---- */
.cna-eyebrow { font-family: var(--cna-font-sans); font-size: var(--cna-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cna-brand); }
.cna-eyebrow--on-dark { color: var(--cna-gold); }

/* ---- buttons ---- */
.cna-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cna-font-sans); font-weight: 700; border: 0; border-radius: var(--cna-r-md); cursor: pointer; padding: 15px 24px; font-size: 16px; text-decoration: none; transition: transform .12s ease; }
.cna-btn:hover { transform: translateY(-1px); }
.cna-btn--gold { background: var(--cna-gold); color: var(--cna-cta-ink); box-shadow: 0 3px 0 var(--cna-gold-600); }   /* PRIMARY money action ONLY */
.cna-btn--outline { background: #fff; color: var(--cna-brand); border: 1.5px solid var(--cna-brand); box-shadow: none; } /* secondary / nav-weight action */
.cna-btn--sm { padding: 11px 18px; font-size: 14px; border-radius: var(--cna-r-sm); }

/* ---- chip (filter / pill) ---- */
.cna-chip { display: inline-flex; align-items: center; font-family: var(--cna-font-sans); font-size: 13.5px; font-weight: 600; padding: 8px 15px; border: 1px solid var(--cna-border); background: #fff; color: var(--cna-ink-800); border-radius: var(--cna-r-pill); cursor: pointer; }
.cna-chip:hover { border-color: var(--cna-brand); color: var(--cna-brand); }
.cna-chip--active { background: var(--cna-brand); color: #fff; border-color: var(--cna-brand); }

/* ---- card ---- */
.cna-card { background: #fff; border: 1px solid var(--cna-border); border-radius: var(--cna-r-md); padding: 20px; }
.cna-card--hover:hover { border-color: #b9c6dd; background: #fcfdff; }   /* borders-not-shadows */

/* ---- section bands (alternate to segment a long page) ---- */
.cna-band { padding: 60px 0; }
.cna-band--paper { background: var(--cna-paper); }
.cna-band--tint  { background: var(--cna-brand-50); }
.cna-band--navy  { background: var(--cna-brand); color: #fff; }
.cna-band--navy h1, .cna-band--navy h2, .cna-band--navy h3 { color: #fff; }

/* ---- info callout ---- */
.cna-callout { background: var(--cna-brand-50); border: 1px solid var(--cna-brand-100); border-left: 4px solid var(--cna-brand); border-radius: var(--cna-r-md); padding: 14px 18px; font-size: 14.5px; color: var(--cna-ink-800); }

/* ---- data table (signature component) ---- */
.cna-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; background: #fff; border: 1px solid var(--cna-border); border-radius: var(--cna-r-lg); overflow: hidden; }
.cna-table thead th { text-align: left; font-family: var(--cna-font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cna-muted); background: var(--cna-brand-50); padding: 12px 16px; border-bottom: 1px solid var(--cna-border); }
.cna-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--cna-border); }
.cna-table tbody tr:nth-child(even) { background: var(--cna-paper); }
.cna-table a { color: var(--cna-brand); font-weight: 600; }

/* ---- trust row (checkmark items) ---- */
.cna-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--cna-muted); list-style: none; padding: 0; margin: 0; }
.cna-trust li { display: inline-flex; align-items: center; gap: 7px; }
.cna-trust svg { stroke: var(--cna-success-600); }

/* ---- meta dates (published / last updated) ---- */
.cna-meta-dates { font-size: 13px; color: var(--cna-ink-600); font-weight: 400; }

/* ---- advertising disclosure — quiet caption under any money CTA ---- */
.cna-disclosure { font-size: 11.5px; color: var(--cna-muted); }

/* ---- breadcrumb: styled AS an eyebrow (uppercase, brand, 12px), › separators ---- */
.cna-crumbs { font-family: var(--cna-font-sans); font-size: var(--cna-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cna-brand); }
.cna-crumbs a { color: var(--cna-brand); text-decoration: none; }
.cna-crumbs .sep { margin: 0 7px; opacity: .55; }

/* ---- faq accordion row ---- */
.cna-faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px; font-family: var(--cna-font-serif); font-weight: 600; font-size: 17px; color: var(--cna-ink-900); border-bottom: 1px solid var(--cna-border); }