/* ============================================================
   MY ANNUITY STORE — COMPONENT LAYER
   components.css · v1.0 · 2026
   Pairs with tokens.css (load AFTER it). Realises the design
   system as ELEMENT-LEVEL styles so templates can write plain
   semantic HTML (<h2>, <h3>, <p>, <ul>...) with no per-element
   classes.

   *** EVERYTHING IS SCOPED UNDER .mas-ds ***
   A template opts in once:  <main class="mas-ds"> … </main>
   Pages WITHOUT .mas-ds (e.g. Elementor) are never touched.

   Do NOT inline <style> in templates. Add what's missing HERE.
   ============================================================ */

/* ── Scope root ─────────────────────────────────────────────── */
.mas-ds{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
.mas-ds *{box-sizing:border-box}

/* ── Typography (semantic — no class needed) ────────────────── */
.mas-ds h1{font-family:var(--font);font-weight:var(--w-medium);font-size:var(--text-display);line-height:var(--lh-tight);letter-spacing:var(--track-display);color:var(--navy);margin:0 0 var(--s6);text-wrap:balance}
.mas-ds h2{font-family:var(--font);font-weight:var(--w-semibold);font-size:var(--text-h2);line-height:var(--lh-snug);letter-spacing:var(--track-h2);color:var(--navy);margin:0 0 var(--s3)}
.mas-ds h3{font-family:var(--font);font-weight:var(--w-medium);font-size:var(--text-h3);line-height:1.3;letter-spacing:var(--track-tight);color:var(--navy);margin:0 0 var(--s3)}
.mas-ds h4{font-family:var(--font);font-weight:var(--w-semibold);font-size:1.05rem;line-height:1.3;color:var(--navy);margin:0 0 var(--s2)}
.mas-ds p{font-size:var(--text-body);line-height:var(--lh-body);color:var(--ink);margin:0 0 var(--s4)}
.mas-ds p:last-child{margin-bottom:0}
.mas-ds strong{color:var(--navy);font-weight:var(--w-semibold)}
.mas-ds a{color:var(--blue);text-decoration:none}
.mas-ds a:hover{text-decoration:underline}
.mas-ds ul,.mas-ds ol{margin:0 0 var(--s4);padding-left:1.25rem;line-height:var(--lh-body);color:var(--ink)}
.mas-ds li{margin:0 0 var(--s2)}

/* Optional text roles */
.mas-ds .lede{font-size:1rem;line-height:1.6;color:var(--ink-soft);font-weight:var(--w-regular);text-wrap:pretty}
.mas-ds .fineprint{font-size:var(--text-sm);color:var(--muted);line-height:1.55;margin:0}
.mas-ds .fineprint a{color:var(--blue);font-weight:var(--w-semibold)}
.mas-ds .eyebrow{font-size:var(--text-xs);font-weight:var(--w-bold);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--blue);margin:0 0 var(--s4)}

/* ── Content container ──────────────────────────────────────── */
.mas-ds-wrap{max-width:920px;margin:0 auto;padding:32px 20px}
.mas-ds-section{max-width:920px;margin:0 auto 48px;padding:0 20px}
.mas-ds-section .lede{margin:0 0 20px}

/* ── Thin hero band (.mas-ds-hero) ──────────────────────────── */
.mas-ds-hero{background:linear-gradient(180deg,var(--blue-100) 0%,var(--blue-050) 58%,var(--paper) 100%);border-bottom:1px solid var(--line);padding:.85rem 1.5rem 2.25rem}
.mas-ds-hero__inner{width:100%;max-width:880px;margin:0 auto}
.mas-ds-hero__crumb{font-size:13px;color:#64748b;margin:0 0 1.25rem}
.mas-ds-hero__crumb a{color:var(--blue)}
.mas-ds-hero h1{margin:0 0 var(--s6)}
.mas-ds-hero .lede{margin:0 0 var(--s8)}

/* Compact author card — pairs with tokens.css .mas-author (~75% size) */
.mas-ds .mas-author.is-compact{max-width:390px;gap:var(--s3);padding:var(--s3) var(--s4);border-left-width:3px;border-radius:var(--r-sm)}
.mas-ds .mas-author.is-compact .avatar{width:42px;height:42px;font-size:.86rem}
.mas-ds .mas-author.is-compact .role{font-size:.51rem}
.mas-ds .mas-author.is-compact .name{font-size:.79rem}
.mas-ds .mas-author.is-compact .cred{font-size:.64rem}

/* ── BLUF / answer block ────────────────────────────────────── */
/* Direct-answer block — sits ABOVE the rate table (PlanEasy AEO pattern).
   Heading + body match the section headings/intros. */
.mas-ds-bluf{margin:4px 0 32px}
.mas-ds-bluf .lede{margin:0}

/* ── Link-card grid (term / rating navigation) ──────────────── */
.mas-ds-cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.mas-ds-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 12px 15px;min-height:150px;position:relative;overflow:hidden;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.mas-ds-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .16s ease}
.mas-ds-card:hover{transform:translateY(-3px);border-color:#c4d6ff;box-shadow:0 14px 28px -16px rgba(1,33,105,.5);text-decoration:none}
.mas-ds-card:hover::before{transform:scaleX(1)}
.mas-ds-card__big{font-size:clamp(1.5rem,4.6vw,1.85rem);font-weight:var(--w-bold);color:var(--navy);line-height:1;letter-spacing:-.02em}
.mas-ds-card__sub{font-size:.66rem;font-weight:var(--w-bold);letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-top:7px}
.mas-ds-card__view{font-size:.74rem;color:var(--muted);margin-top:10px;font-weight:var(--w-semibold)}
.mas-ds-card:hover .mas-ds-card__view{color:var(--blue)}
.mas-ds-cardgrid + .fineprint,.mas-ds-cardnote{margin-top:18px}

/* ── State link list (multi-column) ─────────────────────────── */
.mas-ds-statelist{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px 20px}
.mas-ds-statelist li{margin:0}
.mas-ds-statelist a{display:block;padding:6px 0;color:var(--blue);font-size:.95rem;text-decoration:none}
.mas-ds-statelist a:hover{text-decoration:underline}

/* ── CTA band — navy, white text (matches sitewide CTA) ─────── */
.mas-ds-cta{background:var(--navy);border-radius:var(--r-lg);max-width:920px;margin:8px auto 48px;padding:48px 28px;text-align:center}
.mas-ds-cta h2{color:#fff}
.mas-ds-cta p{font-size:1.0625rem;color:#e6efff;margin:0 auto 24px;max-width:60ch}
.mas-ds-cta a{color:#fff}
.mas-ds-cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* buttons legible on the navy band */
.mas-ds-cta .btn-accent{background:#fff;color:var(--navy)!important}
.mas-ds-cta .btn-accent:hover{background:var(--blue-050);color:var(--navy)!important;box-shadow:none}
.mas-ds-cta .btn-outline{box-shadow:inset 0 0 0 2px rgba(255,255,255,.65);color:#fff!important}
.mas-ds-cta .btn-outline:hover{background:#fff;color:var(--navy)!important}

/* ── Bottom FAQ wrapper alignment (+ clear the footer) ──────── */
.mas-ds-faqwrap{padding-top:36px;margin:8px 0 80px}
.mas-ds-faqwrap .mas-faq{max-width:920px;padding-left:20px;padding-right:20px}
.mas-ds-faqwrap .mas-faq .faq-cat:first-of-type{margin-top:18px}

/* ── Rate table ([best_rate_by_term]) on .mas-ds pages: all-white
   surfaces. Keeps the navy column header + row borders. ──────── */
.mas-ds .brt-meta,
.mas-ds .brt-disclosure,
.mas-ds .brt-table tbody.brt-gap td{background:#fff}
.mas-ds .brt-table td{background:#fff!important}
.mas-ds .brt-table tbody tr:hover td{background:var(--blue-050)!important}
/* Re-assert the table's own small/faint text styling — .mas-ds element rules
   would otherwise clobber these shortcode paragraphs to 16px ink. */
.mas-ds .brt-disclosure{font-size:11px!important;line-height:1.5;color:#94a3b8!important;margin:0}
.mas-ds .brt-meta{font-size:12px;color:#6b7280}

/* Top "best rate by term" summary table (limit=1) — 100px gap before the
   detailed top-5 table below it. */
.mas-ds .mas-ds-besttable{margin-bottom:100px}
.mas-ds .mas-ds-besttable .brt-wrap{margin-bottom:0}