:root{
  --navy:#002868;--navy-dark:#00183F;--navy-mid:#003580;
  --red:#BF0A30;--red-hover:#9B0826;
  --green:#00875A;--green-h:#006644;
  --gold:#d19900;--orange:#da7101;
  --white:#FFFFFF;--charcoal:#1D1D1F;
  --gray-text:#5F6368;--border:#E0E4E8;
  --bg-light:#F7F9FC;--link-hover:#60A5FA;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
  --radius:12px;--tr:.2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--bg-light);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── Typography & Contrast Patch ── */
#daWrapper .panel-title, #daWrapper .section-label, #daWrapper .bfield label, #daWrapper .d-field label, #daWrapper .chart-title, #daWrapper .hb-label, #daWrapper .metric-lbl, #daWrapper .strategy-title, #daWrapper .loan-row-header { color: #1e293b !important; font-weight: 800 !important; }
#daWrapper .input-wrap input, #daWrapper .input-wrap select { font-weight: 600 !important; color: #0f172a !important; font-size: 15px !important; }
#daWrapper .pfx, #daWrapper .sfx { color: #334155 !important; font-weight: 800 !important; }
#daWrapper .info-strip span, #daWrapper .empty-state p { color: #64748b !important; font-weight: 500 !important; }

/* ── Master Bullet Fix for WP Themes ── */
#daWrapper ul, #daWrapper li { display: block !important; list-style-type: disc !important; list-style-position: outside !important; }
#daWrapper ul { padding-left: 32px !important; margin-left: 0 !important; flex-direction: unset !important; }
#daWrapper li { display: list-item !important; padding-left: 0 !important; margin-bottom: 8px !important; }

/* ── BRAND HERO ── */
.hero { background: linear-gradient(135deg, #0f2540 0%, #1a3a5c 60%, #1e4d7b 100%); padding: 52px 20px 44px; text-align: center; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(60deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 18px); }
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 1; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(243,156,18,.15); border: 1px solid rgba(243,156,18,.4); color: #fcd34d; font-size: 12px; font-weight: 700; padding: 5px 16px; border-radius: 20px; margin-bottom: 18px; letter-spacing: .3px; }
.bdot { width: 7px; height: 7px; background: #fcd34d; border-radius: 50%; animation: blink 1.5s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.hero h1 { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: clamp(24px, 4.5vw, 42px); color: #ffffff !important; line-height: 1.15; margin-bottom: 14px; }
.hero h1 span { color: #FCD34D; }
.hero p { font-size: 15px; color: rgba(255,255,255,.83); max-width: 730px; margin: 0 auto 22px; line-height: 1.8; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.92); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; }

/* ── WRAPPER ── */
.calc-wrapper{max-width:1240px;margin:0 auto;padding:36px 20px 64px}

/* ── TABS ── */
.calc-tabs{display:flex;gap:4px;background:var(--border);padding:4px;border-radius:10px;margin-bottom:22px;width:fit-content;flex-wrap:wrap;max-width:100%}
.ctab{padding:9px 18px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;border:none;border-radius:7px;cursor:pointer;background:transparent;color:var(--gray-text);transition:all var(--tr);white-space:nowrap}
.ctab.active{background:var(--navy);color:#fff;box-shadow:var(--shadow-sm)}
.ctab:hover:not(.active){background:var(--white);color:var(--navy)}

/* ── MAIN GRID ── */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:920px){.calc-grid{grid-template-columns:1fr}}

/* ── PANELS ── */
.calc-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);min-width:0;overflow:hidden}
.panel-title{font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;color:var(--charcoal);text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.pticon{width:27px;height:27px;background:rgba(0,40,104,.08);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.section-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--gray-text);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;display:block}

/* ── INFO STRIP ── */
.info-strip{background:rgba(0,40,104,.05);border:1px solid rgba(0,40,104,.12);border-radius:8px;padding:11px 14px;font-size:13px;color:var(--gray-text);line-height:1.6;margin-bottom:14px;display:flex;align-items:flex-start;gap:8px}
.info-strip .ii{font-size:15px;flex-shrink:0;margin-top:2px}

/* ── BUDGET ROW ── */
.budget-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media(max-width:500px){.budget-row{grid-template-columns:1fr}}
.bfield{display:flex;flex-direction:column;gap:4px}
.bfield label{font-size:13px;font-weight:600;color:var(--charcoal)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .pfx,.input-wrap .sfx{position:absolute;font-size:13px;font-weight:600;color:var(--gray-text);pointer-events:none}
.input-wrap .pfx{left:10px}
.input-wrap .sfx{right:10px}
.input-wrap input,.input-wrap select{width:100%;padding:9px 11px;border:1.5px solid var(--border);border-radius:7px;font-family:'Inter',sans-serif;font-size:14px;color:var(--charcoal);background:var(--white);outline:none;transition:border-color var(--tr),box-shadow var(--tr)}
.input-wrap input:focus,.input-wrap select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,40,104,.1)}
.input-wrap.pfx-on input{padding-left:26px}
.input-wrap.sfx-on input{padding-right:30px}

/* ── DEBT ROWS ── */
.debts-list{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.debt-row{background:var(--bg-light);border:1.5px solid var(--border);border-radius:9px;padding:13px 14px;display:grid;grid-template-columns:1.6fr 1.1fr 1fr 1fr auto;gap:10px;align-items:end;transition:border-color var(--tr);min-width:0}
.debt-row:hover{border-color:var(--navy)}
@media(max-width:700px){.debt-row{grid-template-columns:1fr 1fr;gap:9px}
.debt-row .d-name{grid-column:1/-1}.debt-row .d-remove{grid-column:2;justify-self:end}}
.d-field{display:flex;flex-direction:column;gap:3px}
.d-field label{font-size:11px;font-weight:600;color:var(--gray-text);text-transform:uppercase;letter-spacing:.4px}
.d-remove{width:30px;height:30px;border:none;background:rgba(191,10,48,.08);color:var(--red);border-radius:6px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--tr);flex-shrink:0}
.d-remove:hover{background:var(--red);color:#fff}

/* ── TAX / EXTRA FIELDS ── */
.tax-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gray-text);margin-top:4px}
.tax-row input[type=checkbox]{width:14px;height:14px;cursor:pointer;accent-color:var(--navy)}

/* ── ADD BUTTON ── */
.btn-add{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1.5px dashed var(--navy);border-radius:7px;background:transparent;color:var(--navy);font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--tr);margin-top:4px}
.btn-add:hover{background:var(--navy);color:#fff}

/* ── ACTION BUTTONS ── */
.calc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-calc{flex:1 1 160px;padding:13px 18px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;gap:7px}
.btn-calc:hover{background:var(--navy-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-pdf,.btn-wa,.btn-rst{flex:1 1 110px;padding:12px 14px;border:none;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;cursor:pointer;transition:all var(--tr);display:flex;align-items:center;justify-content:center;gap:6px}
.btn-pdf{background:var(--bg-light);color:var(--charcoal);border:1.5px solid var(--border)}
.btn-pdf:hover{background:var(--charcoal);color:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1da851}
.btn-rst{background:transparent;color:var(--gray-text);border:1.5px solid var(--border)}
.btn-rst:hover{border-color:var(--navy);color:var(--navy)}
.btn-pdf.hidden,.btn-wa.hidden,.btn-rst.hidden{display:none}

/* ── RESULTS PANEL ── */
.results-panel{background:var(--bg-light);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm);min-height:380px;display:flex;flex-direction:column;gap:16px}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 20px;flex:1}
.empty-icon{font-size:44px;margin-bottom:12px;opacity:.35}
.empty-state h3{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:var(--charcoal);margin-bottom:5px}
.empty-state p{font-size:13.5px;color:var(--gray-text);max-width:270px;line-height:1.6}
#results-content{display:none;flex-direction:column;gap:16px}

/* ── METRICS GRID ── */
.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:540px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
.metric-card{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:12px 14px;text-align:center;transition:box-shadow var(--tr)}
.metric-card:hover{box-shadow:var(--shadow-sm)}
.metric-val{font-family:'Montserrat',sans-serif;font-size:clamp(13px,3.5vw,17px);font-weight:800;color:var(--navy);line-height:1.1;word-break:break-word}
.metric-val.green{color:var(--green)}
.metric-val.red{color:var(--red)}
.metric-val.gold{color:var(--gold)}
.metric-lbl{font-size:11px;color:var(--gray-text);margin-top:3px;font-weight:500}

/* ── HIGHLIGHT BOX ── */
.highlight-box{border-radius:10px;padding:16px 18px;color:#fff}
.highlight-box.navy{background:linear-gradient(135deg,var(--navy) 0%,#003d8c 100%)}
.hb-label{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;opacity:.7;margin-bottom:5px}
.hb-val{font-family:'Montserrat',sans-serif;font-size:clamp(16px,5vw,22px);font-weight:800;line-height:1.1;margin-bottom:4px;word-break:break-word}
.hb-sub{font-size:12.5px;opacity:.82;line-height:1.5}

/* ── PAYOFF ORDER TABLE ── */
.tbl-wrap{background:var(--white);border:1px solid var(--border);border-radius:9px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.tbl-wrap table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tbl-wrap th{background:var(--navy);color:#fff;padding:9px 11px;text-align:left;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.tbl-wrap td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--charcoal)}
.tbl-wrap tr:last-child td{border-bottom:none}
.tbl-wrap tr:nth-child(even) td{background:var(--bg-light)}
.badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:#fff}
.badge.b1{background:var(--red)}
.badge.b2{background:var(--orange)}
.badge.b3{background:var(--gold)}
.badge.bx{background:var(--gray-text)}
.bar-cell{width:80px}
.bar-wrap{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.bar-fill{height:100%;border-radius:3px;background:var(--navy);transition:width .5s ease}

/* ── COMPARISON BOX ── */
.cmp-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:540px){.cmp-grid{grid-template-columns:1fr}}
.cmp-card{background:var(--white);border:2px solid var(--border);border-radius:9px;padding:13px;text-align:center;transition:all var(--tr)}
.cmp-card.best{border-color:var(--green)}
.cmp-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;color:var(--charcoal);margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:5px}
.cmp-val{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;margin-bottom:2px}
.cmp-sub{font-size:11px;color:var(--gray-text)}
.best-badge{background:var(--green);color:#fff;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px}

/* ── SCHEDULE TABLE ── */
.schedule-wrap{background:var(--white);border:1px solid var(--border);border-radius:9px;overflow:hidden}
.schedule-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;color:var(--charcoal);user-select:none}
.schedule-toggle:hover{background:var(--bg-light)}
.schedule-toggle .sarrow{font-size:11px;transition:transform var(--tr)}
.schedule-toggle.open .sarrow{transform:rotate(180deg)}
.schedule-body{display:none;max-height:320px;overflow-y:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
.schedule-body.open{display:block}
.schedule-body table{width:100%;border-collapse:collapse;font-size:12px;min-width:480px}
.schedule-body th{background:rgba(0,40,104,.07);color:var(--navy);padding:7px 10px;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;position:sticky;top:0;z-index:1}
.schedule-body td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--charcoal)}
.schedule-body tr:last-child td{border-bottom:none}
.schedule-body tr:nth-child(even) td{background:var(--bg-light)}

/* ── CHART ── */
.chart-section{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:14px}
.chart-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--charcoal);text-transform:uppercase;letter-spacing:.4px;margin-bottom:12px}
.chart-canvas-wrap{position:relative;height:240px;width:100%;overflow:hidden}

/* ── TAX SAVINGS BOX ── */
.tax-savings-box{background:linear-gradient(135deg,var(--green) 0%,#006644 100%);border-radius:10px;padding:16px 18px;color:#fff;display:none}
.tax-savings-box.visible{display:block}

/* ── CONSOLIDATION BOX ── */
.consol-box{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:14px 16px;display:none}
.consol-box.visible{display:block}

/* ── STRATEGY BOX ── */
.strategy-box{background:rgba(0,135,90,.05);border:1px solid rgba(0,135,90,.18);border-radius:8px;padding:13px 15px;display:none}
.strategy-box.visible{display:block}
.strategy-title{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--green);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.slist{list-style:none !important;display:flex !important;flex-direction:column;gap:5px;padding-left:0 !important;margin-left:0 !important}
.slist li{font-size:13px;color:var(--charcoal);display:flex !important;align-items:flex-start;gap:7px;line-height:1.5;list-style-type:none !important;padding-left:0 !important;margin-bottom:5px !important}
.slist li::before{content:"→";color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}

/* ── TAB PANELS ── */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ══════════════════════════════════════════════════════
   MOBILE OPTIMIZATION PATCH — April 2026
   Fixes: table overflow, tabs, chart, slist, metrics
   ══════════════════════════════════════════════════════ */

/* Ensure containers never overflow their parent */
#daWrapper * { box-sizing: border-box; }
#daWrapper { overflow-x: hidden; }

/* Scroll hint shadow for overflowing tables */
.tbl-wrap { position: relative; }
.tbl-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 20px; height: 100%;
  background: linear-gradient(to right, transparent, rgba(0,40,104,.06));
  pointer-events: none;
  border-radius: 0 9px 9px 0;
  opacity: 0;
  transition: opacity .3s;
}
.tbl-wrap:hover::after { opacity: 1; }

/* Canvas responsive fix */
.chart-canvas-wrap canvas { max-width: 100% !important; }

/* ── ≤768px: Medium mobile ── */
@media(max-width:768px){
  .calc-wrapper { padding: 24px 14px 48px; }
  .hero { padding: 36px 16px 32px; }
  .hero p { font-size: 14px; }
  .chips { gap: 6px; }
  .chip { font-size: 11px; padding: 4px 10px; }
  .calc-panel { padding: 16px; }
  .budget-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .calc-actions { gap: 8px; }
  .btn-calc { font-size: 13px; padding: 12px 14px; }
  .btn-pdf, .btn-wa, .btn-rst { font-size: 11.5px; padding: 11px 10px; }
  .highlight-box { padding: 14px 15px; }
  .chart-canvas-wrap { height: 200px; }
  .cmp-grid { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cmp-val { font-size: 14px; }
  .cmp-title { font-size: 11px; }
  .schedule-body { max-height: 280px; }
}

/* ── ≤600px: Small phone ── */
@media(max-width:600px){
  .calc-wrapper { padding: 18px 12px 40px; }
  .hero { padding: 28px 14px 26px; }
  .calc-tabs { width: 100%; justify-content: stretch; }
  .ctab { flex: 1; min-width: 0; font-size: 11px; padding: 8px 8px; text-align: center; white-space: normal; line-height: 1.3; }
  .calc-panel { padding: 14px 13px; }
  .budget-row { grid-template-columns: 1fr; gap: 10px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metric-card { padding: 10px 10px; }
  .metric-lbl { font-size: 10px; }
  .highlight-box { padding: 12px 13px; }
  .hb-sub { font-size: 11.5px; }
  .cmp-grid { grid-template-columns: 1fr; gap: 8px; }
  .cmp-card { padding: 11px; }
  .strategy-box { padding: 11px 12px; }
  .slist li { font-size: 12.5px; }
  .chart-canvas-wrap { height: 185px; }
  .chart-title { font-size: 11px; }
  .schedule-toggle { font-size: 12px; padding: 10px 12px; }
  .consol-box { padding: 12px 13px; }
  #daWrapper .tbl-wrap th { font-size: 9.5px; padding: 8px 8px; }
  #daWrapper .tbl-wrap td { font-size: 12px; padding: 8px 8px; }
  .calc-actions { gap: 7px; }
  .btn-calc { font-size: 12.5px; flex: 1 1 100%; }
  .btn-pdf, .btn-wa, .btn-rst { font-size: 11px; flex: 1 1 auto; padding: 10px 8px; }
  .info-strip { font-size: 12px; padding: 9px 11px; }
  .panel-title { font-size: 12.5px; }
  .section-label { font-size: 10.5px; }
  .badge { font-size: 11px; padding: 4px 12px; }
}

/* ── ≤480px: Very small phones (iPhone SE etc.) ── */
@media(max-width:480px){
  .calc-wrapper { padding: 14px 10px 36px; }
  .hero { padding: 24px 12px 22px; }
  .chip { font-size: 10px; padding: 3px 8px; }
  .ctab { font-size: 10.5px; padding: 7px 6px; }
  .calc-panel { padding: 12px 11px; border-radius: 10px; }
  /* Table: hide "Type" column (col 3) to save space, keep all data readable */
  .tbl-wrap th:nth-child(3),
  .tbl-wrap td:nth-child(3) { display: none; }
  /* Hide "Interest" column (col 7) — still shown in metrics grid */
  .tbl-wrap th:nth-child(7),
  .tbl-wrap td:nth-child(7) { display: none; }
  /* Tighten the remaining 5 columns */
  .tbl-wrap table { min-width: 320px; }
  .tbl-wrap th { font-size: 9px; padding: 7px 7px; }
  .tbl-wrap td { font-size: 11.5px; padding: 7px 7px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 7px; }
  .metric-card { padding: 9px 8px; }
  .metric-val { font-size: 13px; }
  .chart-canvas-wrap { height: 170px; }
  .debt-row { padding: 11px 11px; gap: 8px; }
  .d-field label { font-size: 10px; }
  .input-wrap input, .input-wrap select { font-size: 13px !important; padding: 8px 9px; }
  .input-wrap.pfx-on input { padding-left: 23px; }
  .schedule-body td, .schedule-body th { font-size: 11px; padding: 6px 8px; }
}

/* ── Fix: bar-cell constrain on mobile ── */
@media(max-width:600px){
  .bar-cell { width: 50px; }
  .bar-wrap { height: 5px; }
}

/* ── Fix: consol-box grid layout ── */
@media(max-width:480px){
  #consol-content div[style*="display:grid"],
  #consol-content div[style*="display: grid"] { 
    display: flex !important; 
    flex-direction: column; 
    gap: 8px !important; 
  }
}
/* ═══════════════════════════════════════════════════════
   HOW THIS CALCULATOR WORKS — Full Detailed Section
   Matching: --navy #002868, Inter + Montserrat, same tokens
   ═══════════════════════════════════════════════════════ */

/* ── SECTION SHELL ── */
.hiw-section { padding: 56px 22px; background: var(--bg-light); }
.hiw-container { max-width: 1200px; margin: 0 auto; }

/* ── SECTION HEADING ── */
.hiw-heading {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 44px;
}
.hiw-heading-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(0,40,104,.09);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; margin-top: 2px;
}
.hiw-heading h2 {
  font-family: 'Montserrat', sans-serif; font-size: clamp(19px,2.6vw,25px);
  font-weight: 800; color: var(--charcoal); margin-bottom: 7px;
}
.hiw-heading p { font-size: 14.5px; color: var(--gray-text); line-height: 1.7; max-width: 740px; }

/* ── NAV TABS (subsections) ── */
.hiw-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 32px;
  border-bottom: 2px solid var(--border); padding-bottom: 0;
}
.hiw-tab {
  padding: 9px 18px; border: none; background: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--gray-text); border-bottom: 3px solid transparent;
  margin-bottom: -2px; transition: all .2s ease; white-space: nowrap;
  border-radius: 6px 6px 0 0;
}
.hiw-tab:hover { color: var(--navy); background: rgba(0,40,104,.04); }
.hiw-tab.active { color: var(--navy); border-bottom-color: var(--navy); background: rgba(0,40,104,.05); }

.hiw-panel { display: none; }
.hiw-panel.active { display: block; }

/* ── SHARED INSIDE-PANEL STYLES ── */
.hiw-intro {
  background: var(--white); border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 0 8px 8px 0; padding: 16px 20px; margin-bottom: 28px;
  font-size: 14px; color: var(--charcoal); line-height: 1.7;
}
.hiw-intro strong { color: var(--navy); }

/* ── STEP FLOW ── */
.hiw-steps { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; }
.hiw-step {
  display: flex; gap: 0; align-items: stretch;
}
.hiw-step-left {
  display: flex; flex-direction: column; align-items: center; width: 52px; flex-shrink: 0;
}
.hiw-step-num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 15px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  position: relative; z-index: 1;
}
.hiw-step-line {
  width: 2px; flex: 1; background: var(--border); min-height: 20px;
}
.hiw-step:last-child .hiw-step-line { display: none; }
.hiw-step-content {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
  flex: 1; margin-left: 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.hiw-step-content h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13.5px;
  color: var(--charcoal); margin-bottom: 8px;
}
.hiw-step-content p { font-size: 13.5px; color: var(--gray-text); line-height: 1.7; }
.hiw-step-content p + p { margin-top: 8px; }
.hiw-step-content strong { color: var(--charcoal); }

/* ── FIELD REFERENCE TABLE ── */
.hiw-field-table {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 28px;
}
.hiw-field-table table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 540px; }
.hiw-field-table thead th {
  background: var(--navy); color: #fff; padding: 11px 14px;
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .45px; text-align: left;
}
.hiw-field-table tbody tr:nth-child(even) td { background: var(--bg-light); }
.hiw-field-table tbody td {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--charcoal); vertical-align: top; line-height: 1.55;
}
.hiw-field-table tbody tr:last-child td { border-bottom: none; }
.hiw-field-table td:first-child {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 12.5px;
  color: var(--navy); white-space: nowrap;
}
.req-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; margin-left: 5px;
  text-transform: uppercase; letter-spacing: .2px;
}
.req-tag.req { background: rgba(191,10,48,.1); color: var(--red); }
.req-tag.opt { background: rgba(0,135,90,.1); color: var(--green); }
.req-tag.auto { background: rgba(0,40,104,.1); color: var(--navy); }

/* ── MODE CARDS ── */
.hiw-modes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
@media(max-width: 760px){ .hiw-modes-grid{ grid-template-columns: 1fr; } }

.hiw-mode-card {
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 22px 18px; text-align: left;
  transition: border-color .2s ease;
}
.hiw-mode-card.primary { border-color: var(--navy); }
.hiw-mode-card.business { border-color: var(--green); }
.hiw-mode-card.compare { border-color: var(--gold); }
.hiw-mode-badge {
  display: inline-block; font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 20px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .3px;
}
.hiw-mode-badge.navy { background: rgba(0,40,104,.1); color: var(--navy); }
.hiw-mode-badge.green { background: rgba(0,135,90,.1); color: var(--green); }
.hiw-mode-badge.gold { background: rgba(209,153,0,.12); color: var(--gold); }
.hiw-mode-card h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--charcoal); margin-bottom: 8px;
}
.hiw-mode-card p { font-size: 13px; color: var(--gray-text); line-height: 1.65; margin-bottom: 12px; }
.hiw-mode-features { list-style: none; padding: 0; margin: 0; }
.hiw-mode-features li {
  font-size: 12.5px; color: var(--charcoal); padding: 5px 0;
  border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 7px;
  line-height: 1.5;
}
.hiw-mode-features li:last-child { border-bottom: none; }

/* ── ALGORITHM FORMULA BOX ── */
.hiw-algo-box {
  background: linear-gradient(135deg, #0a1f3d 0%, #1a3d6e 100%);
  border-radius: var(--radius); padding: 28px 30px; margin-bottom: 24px;
  position: relative; overflow: hidden;
}
.hiw-algo-box::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(55deg, rgba(255,255,255,.015) 0, rgba(255,255,255,.015) 1px, transparent 1px, transparent 16px);
}
.hiw-algo-box h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .8px;
  color: rgba(255,255,255,.6); margin-bottom: 18px; position: relative;
}
.algo-formula {
  font-family: 'Montserrat', sans-serif; font-size: clamp(13px,1.8vw,16px);
  font-weight: 700; color: #FCD34D; position: relative;
  background: rgba(252,211,77,.08); border: 1px solid rgba(252,211,77,.2);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; line-height: 1.8;
}
.algo-formula span.navy-val { color: #93C5FD; }
.algo-formula span.green-val { color: #86EFAC; }
.algo-comment {
  font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.7;
  position: relative;
}

/* ── RESULTS METRICS EXPLAINER ── */
.hiw-metrics-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-bottom: 28px; }
@media(max-width: 600px){ .hiw-metrics-grid{ grid-template-columns: 1fr; } }

.hiw-metric {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.hiw-metric-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(0,40,104,.07); display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.hiw-metric h5 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px;
  color: var(--charcoal); margin-bottom: 5px;
}
.hiw-metric p { font-size: 12.5px; color: var(--gray-text); line-height: 1.6; }
.hiw-metric p strong { color: var(--navy); }

/* ── TIPS CALLOUT ── */
.hiw-tip {
  background: rgba(0,40,104,.04); border: 1px solid rgba(0,40,104,.12);
  border-left: 4px solid var(--navy);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 18px;
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; color: var(--charcoal); line-height: 1.65;
}
.hiw-tip .tip-ico { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.hiw-tip strong { color: var(--navy); }

.hiw-warn {
  background: rgba(191,10,48,.04); border: 1px solid rgba(191,10,48,.15);
  border-left: 4px solid var(--red);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 18px;
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; color: var(--charcoal); line-height: 1.65;
}
.hiw-warn .tip-ico { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.hiw-warn strong { color: var(--red); }

/* ── ACCURACY TABLE ── */
.hiw-accuracy {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 24px;
}
.hiw-accuracy table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 460px; }
.hiw-accuracy thead th {
  background: var(--navy); color: #fff; padding: 10px 14px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; text-align: left;
}
.hiw-accuracy tbody td {
  padding: 9px 14px; border-bottom: 1px solid var(--border); color: var(--charcoal); vertical-align: top;
}
.hiw-accuracy tbody tr:nth-child(even) td { background: var(--bg-light); }
.hiw-accuracy tbody tr:last-child td { border-bottom: none; }
.ok-badge { color: var(--green); font-weight: 700; }
.warn-badge { color: var(--gold); font-weight: 700; }

/* ── MOBILE ── */
@media(max-width: 520px){
  .hiw-section { padding: 36px 16px; }
  .hiw-heading { flex-direction: column; gap: 10px; }
  .hiw-step-left { width: 36px; }
  .hiw-step-num { width: 32px; height: 32px; font-size: 13px; }
  .hiw-algo-box { padding: 20px 16px; }
  .hiw-tabs { gap: 4px; }
  .hiw-tab { padding: 8px 11px; font-size: 11px; }
}
/* ── DEBT AVALANCHE TOOL CSS VARIABLES ── */
:root {
  --navy:      #002868;
  --navy-dark: #00183F;
  --navy-mid:  #003580;
  --red:       #BF0A30;
  --green:     #00875A;
  --gold:      #d19900;
  --orange:    #da7101;
  --white:     #FFFFFF;
  --charcoal:  #1D1D1F;
  --gray-text: #5F6368;
  --border:    #E0E4E8;
  --bg-light:  #F7F9FC;
  --shadow-sm: 0 1px 4px rgba(0,40,104,.08);
  --shadow-md: 0 4px 20px rgba(0,40,104,.12);
  --radius:    12px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: none; }
body {
  font-family: 'Inter', sans-serif; font-size: 16px;
  color: var(--gray-text); background: var(--bg-light);
}
img { display: block; max-width: 100%; }
code { font-family: monospace; }

/* ═══════════════════════════════════════════════════════
   EDUCATIONAL CONTENT SECTION — Debt Avalanche Calculator
   CSS Variables match: --navy, --red, --green, --gold, Inter/Montserrat
   ═══════════════════════════════════════════════════════ */

/* ── OUTER WRAPPER ── */
.edu-wrap { background: var(--bg-light); }

/* ── SHARED SECTION SHELL ── */
.edu-section {
  padding: 56px 22px;
  max-width: 1200px;
  margin: 0 auto;
}

.edu-divider {
  height: 1px;
  background: var(--border);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── SECTION HEADING ── */
.edu-sec-head {
  display: flex; align-items: flex-start; gap: 16px; margin-bottom: 36px;
}
.edu-sec-icon {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(0,40,104,.09);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; margin-top: 3px;
}
.edu-sec-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(19px, 2.6vw, 25px); font-weight: 800;
  color: var(--charcoal); margin-bottom: 7px;
}
.edu-sec-head p {
  font-size: 14.5px; color: var(--gray-text); line-height: 1.75; max-width: 760px;
}

/* ═══════════════════════════════════
   HERO DEFINITION PANEL
   ═══════════════════════════════════ */
.edu-hero-panel {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  border-radius: var(--radius); padding: 38px 36px;
  margin-bottom: 32px; position: relative; overflow: hidden;
}
.edu-hero-panel::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(60deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 18px);
}
.edu-hero-panel > * { position: relative; }
.edu-hero-kicker {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  color: rgba(255,255,255,.55); margin-bottom: 14px;
}
.edu-hero-panel h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(20px, 3vw, 30px); color: #FCD34D; margin-bottom: 18px;
  line-height: 1.2;
}
.edu-hero-panel p {
  font-size: 15px; color: rgba(255,255,255,.88); line-height: 1.8;
  max-width: 820px; margin-bottom: 14px;
}
.edu-hero-panel p:last-child { margin-bottom: 0; }
.edu-hero-panel strong { color: #FCD34D; }

/* ── Origin Badge Row ── */
.edu-origin-row {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
}
.edu-origin-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 10px 16px; display: flex; align-items: center; gap: 9px;
}
.edu-origin-badge .ob-icon { font-size: 18px; }
.edu-origin-badge .ob-text { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.4; }
.edu-origin-badge .ob-text strong { color: #fff; display: block; margin-bottom: 1px; }

/* ═══════════════════════════════════
   WHY IT WORKS — VISUAL PROOF
   ═══════════════════════════════════ */
.edu-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
@media(max-width: 680px){ .edu-proof-grid{ grid-template-columns: 1fr; } }

.edu-proof-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow-sm);
}
.edu-proof-card h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13.5px;
  color: var(--charcoal); margin-bottom: 12px;
  display: flex; align-items: center; gap: 9px;
}
.edu-proof-card p { font-size: 13.5px; color: var(--gray-text); line-height: 1.7; }
.edu-proof-card p + p { margin-top: 9px; }
.edu-proof-card strong { color: var(--charcoal); }

/* Cascade visual */
.edu-cascade {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 22px; margin-bottom: 28px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.edu-cascade h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13.5px;
  color: var(--charcoal); margin-bottom: 18px;
}
.cascade-row {
  display: flex; align-items: stretch; gap: 0; margin-bottom: 10px; min-width: 560px;
}
.cascade-label {
  width: 130px; flex-shrink: 0; font-size: 12px; font-weight: 600;
  color: var(--charcoal); display: flex; align-items: center;
  padding-right: 12px; line-height: 1.35;
}
.cascade-bars { flex: 1; display: flex; align-items: center; gap: 4px; }
.cbar {
  height: 32px; border-radius: 5px; display: flex; align-items: center;
  padding: 0 10px; font-family: 'Montserrat', sans-serif; font-size: 10.5px;
  font-weight: 700; color: #fff; white-space: nowrap; transition: width .4s ease;
  min-width: 28px; justify-content: center;
}
.cbar.navy { background: var(--navy); }
.cbar.red  { background: var(--red); }
.cbar.gold { background: var(--gold); color: #1D1D1F; }
.cbar.green{ background: var(--green); }
.cbar.paid { background: var(--border); color: var(--gray-text); text-decoration: line-through; }
.cbar.extra{ background: rgba(0,40,104,.12); color: var(--navy); border: 1px dashed var(--navy); }
.cascade-note { font-size: 11px; color: var(--gray-text); margin-left: 8px; align-self: center; }

/* ═══════════════════════════════════
   WHEN TO USE — DECISION GUIDE
   ═══════════════════════════════════ */
.edu-decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
@media(max-width: 640px){ .edu-decision-grid{ grid-template-columns: 1fr; } }

.edu-decision-card {
  border-radius: var(--radius); padding: 20px 18px;
}
.edu-decision-card.use { background: rgba(0,135,90,.06); border: 1.5px solid rgba(0,135,90,.25); }
.edu-decision-card.avoid { background: rgba(191,10,48,.05); border: 1.5px solid rgba(191,10,48,.2); }
.edu-decision-card h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px;
  margin-bottom: 12px;
}
.edu-decision-card.use h4 { color: var(--green); }
.edu-decision-card.avoid h4 { color: var(--red); }
.edu-decision-list { list-style: none; padding: 0; margin: 0; }
.edu-decision-list li {
  font-size: 13px; color: var(--charcoal); padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
}
.edu-decision-list li:last-child { border-bottom: none; }

/* ═══════════════════════════════════
   GLOSSARY
   ═══════════════════════════════════ */
.edu-glossary-search-wrap {
  position: relative; margin-bottom: 20px;
}
.edu-glossary-search {
  width: 100%; padding: 12px 44px 12px 16px;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--charcoal);
  background: var(--white); outline: none; transition: border-color .2s ease;
}
.edu-glossary-search:focus { border-color: var(--navy); }
.edu-glossary-search::placeholder { color: #aaa; }
.edu-glossary-search-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--gray-text); pointer-events: none;
}

.edu-gloss-cats {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px;
}
.edu-gloss-cat {
  padding: 6px 14px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--white); color: var(--gray-text);
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.edu-gloss-cat:hover { border-color: var(--navy); color: var(--navy); }
.edu-gloss-cat.active { background: var(--navy); color: #fff; border-color: var(--navy); }

.edu-gloss-no-results {
  text-align: center; padding: 32px 20px;
  color: var(--gray-text); font-size: 14px; display: none;
}

.edu-gloss-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media(max-width: 660px){ .edu-gloss-grid{ grid-template-columns: 1fr; } }

.edu-term-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease;
}
.edu-term-card:hover { box-shadow: var(--shadow-md); }
.edu-term-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.edu-term-name {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13.5px;
  color: var(--navy); line-height: 1.2;
}
.edu-term-cat-badge {
  font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .2px;
}
.edu-term-cat-badge.core    { background: rgba(0,40,104,.1); color: var(--navy); }
.edu-term-cat-badge.interest{ background: rgba(191,10,48,.1); color: var(--red); }
.edu-term-cat-badge.strategy{ background: rgba(0,135,90,.1); color: var(--green); }
.edu-term-cat-badge.credit  { background: rgba(209,153,0,.12); color: var(--gold); }
.edu-term-cat-badge.tax     { background: rgba(218,113,1,.1); color: var(--orange); }
.edu-term-cat-badge.account { background: rgba(0,40,104,.07); color: var(--navy-mid); }

.edu-term-def {
  font-size: 13px; color: var(--gray-text); line-height: 1.7; margin-bottom: 8px;
}
.edu-term-example {
  font-size: 12px; color: var(--charcoal);
  background: var(--bg-light); border-radius: 6px;
  padding: 8px 12px; border-left: 3px solid var(--navy);
  line-height: 1.6;
}
.edu-term-example span { color: var(--navy); font-weight: 600; }

/* ── MISCONCEPTIONS ── */
.edu-myth-grid { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.edu-myth-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.edu-myth-header {
  display: flex; gap: 0; align-items: stretch;
}
.edu-myth-label {
  width: 90px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; padding: 14px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.edu-myth-label.myth-lbl { background: rgba(191,10,48,.08); color: var(--red); }
.edu-myth-label.fact-lbl { background: rgba(0,135,90,.08); color: var(--green); }
.edu-myth-text { padding: 14px 18px; font-size: 13.5px; line-height: 1.65; flex: 1; }
.edu-myth-text.myth-txt { color: var(--charcoal); font-weight: 500; border-bottom: 1px solid var(--border); }
.edu-myth-text.fact-txt { color: var(--gray-text); }
.edu-myth-text strong { color: var(--charcoal); }

/* ── CALLOUTS ── */
.edu-callout {
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin-bottom: 18px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.65; color: var(--charcoal);
}
.edu-callout.navy {
  background: rgba(0,40,104,.04); border: 1px solid rgba(0,40,104,.12);
  border-left: 4px solid var(--navy);
}
.edu-callout.green {
  background: rgba(0,135,90,.04); border: 1px solid rgba(0,135,90,.15);
  border-left: 4px solid var(--green);
}
.edu-callout strong { color: var(--navy); }
.edu-callout.green strong { color: var(--green); }
.edu-callout .c-ico { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── MOBILE ── */
@media(max-width: 520px){
  .edu-section { padding: 36px 16px; }
  .edu-sec-head { flex-direction: column; gap: 10px; }
  .edu-hero-panel { padding: 24px 18px; }
  .edu-origin-row { flex-direction: column; gap: 8px; }
  .cascade-label { width: 100px; font-size: 11px; }
  .edu-gloss-grid { grid-template-columns: 1fr; }
}
:root {
  --navy:      #002868;
  --navy-dark: #00183F;
  --navy-mid:  #003580;
  --red:       #BF0A30;
  --green:     #00875A;
  --gold:      #d19900;
  --orange:    #da7101;
  --white:     #FFFFFF;
  --charcoal:  #1D1D1F;
  --gray-text: #5F6368;
  --border:    #E0E4E8;
  --bg-light:  #F7F9FC;
  --shadow-sm: 0 1px 4px rgba(0,40,104,.08);
  --shadow-md: 0 4px 20px rgba(0,40,104,.12);
  --radius:    12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--bg-light);}
img{display:block;max-width:100%;}

/* ═══════════════════════════════════════════════════════
   5 REAL US EXAMPLES — Debt Avalanche Method
   CSS Variables match: --navy #002868, --red #BF0A30, etc.
   ═══════════════════════════════════════════════════════ */

/* ── OUTER WRAPPER ── */
.ex-wrap { background: var(--bg-light); padding: 56px 22px; }
.ex-container { max-width: 1200px; margin: 0 auto; }

/* ── SECTION HEADING ── */
.ex-main-head { text-align: center; margin-bottom: 44px; }
.ex-main-head .ex-kicker {
  display: inline-block; font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; color: var(--navy);
  background: rgba(0,40,104,.08); border-radius: 20px;
  padding: 5px 16px; margin-bottom: 14px;
}
.ex-main-head h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 3vw, 28px); font-weight: 900;
  color: var(--charcoal); margin-bottom: 12px; line-height: 1.2;
}
.ex-main-head p {
  font-size: 15px; color: var(--gray-text); max-width: 680px;
  margin: 0 auto; line-height: 1.75;
}

/* ── EXAMPLE SELECTOR TABS ── */
.ex-selector {
  display: flex; gap: 0; margin-bottom: 32px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.ex-sel-btn {
  flex: 1; padding: 14px 10px; border: none; background: none;
  cursor: pointer; display: flex; flex-direction: column;
  align-items: center; gap: 5px; border-right: 1px solid var(--border);
  transition: background .2s ease; position: relative;
}
.ex-sel-btn:last-child { border-right: none; }
.ex-sel-btn:hover { background: var(--bg-light); }
.ex-sel-btn.active {
  background: var(--navy);
}
.ex-sel-btn.active::after {
  content: ''; position: absolute; bottom: -1px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--navy);
}
.ex-sel-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; border: 2px solid var(--border);
  background: var(--bg-light); transition: all .2s ease;
}
.ex-sel-btn.active .ex-sel-avatar {
  border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.15);
}
.ex-sel-name {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 800;
  color: var(--gray-text); text-align: center; line-height: 1.3; transition: color .2s;
}
.ex-sel-btn.active .ex-sel-name { color: rgba(255,255,255,.9); }
.ex-sel-tag {
  font-size: 9.5px; color: var(--gray-text); text-align: center;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  transition: color .2s;
}
.ex-sel-btn.active .ex-sel-tag { color: rgba(255,255,255,.6); }

/* Mobile: horizontal scroll tabs */
@media(max-width: 640px){
  .ex-selector {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: var(--radius); min-width: 0;
  }
  .ex-sel-btn { flex: 0 0 120px; padding: 12px 8px; }
}

/* ── EXAMPLE PANELS ── */
.ex-panel { display: none; }
.ex-panel.active { display: block; }

/* ── PERSONA HERO ── */
.ex-persona-hero {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  border-radius: var(--radius); padding: 28px 30px;
  margin-bottom: 22px; position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start;
}
.ex-persona-hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(60deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 18px);
}
.ex-persona-hero > * { position: relative; }

.ex-persona-avatar {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 3px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0;
}
.ex-persona-info { flex: 1; min-width: 220px; }
.ex-persona-name {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(18px, 2.5vw, 24px); color: #fff; margin-bottom: 4px;
}
.ex-persona-title {
  font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 14px;
}
.ex-persona-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ex-tag {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px; padding: 4px 12px;
  font-family: 'Montserrat', sans-serif; font-size: 10.5px;
  font-weight: 700; color: rgba(255,255,255,.85);
}
.ex-tag.gold { background: rgba(252,211,77,.15); border-color: rgba(252,211,77,.3); color: #FCD34D; }
.ex-tag.green { background: rgba(0,135,90,.2); border-color: rgba(0,135,90,.3); color: #86EFAC; }

.ex-persona-stats {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 180px;
}
.ex-pstat {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 9px 14px; text-align: center;
}
.ex-pstat-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 18px; color: #FCD34D; line-height: 1;
  margin-bottom: 3px;
}
.ex-pstat-lbl {
  font-size: 10.5px; color: rgba(255,255,255,.6);
  font-family: 'Montserrat', sans-serif; font-weight: 600;
}
.ex-pstat-val.green { color: #86EFAC; }

/* ── SITUATION BOX ── */
.ex-situation {
  background: rgba(0,40,104,.04); border: 1px solid rgba(0,40,104,.12);
  border-left: 4px solid var(--navy); border-radius: 0 8px 8px 0;
  padding: 14px 18px; margin-bottom: 22px;
  font-size: 13.5px; color: var(--charcoal); line-height: 1.7;
}
.ex-situation strong { color: var(--navy); }

/* ── TWO-COL LAYOUT ── */
.ex-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px;
}
@media(max-width: 700px){ .ex-two-col{ grid-template-columns: 1fr; } }

/* ── DEBT TABLE ── */
.ex-debt-table-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ex-debt-table-wrap h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px;
  color: var(--charcoal); padding: 14px 16px 0;
}
.ex-debt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 360px; }
.ex-debt-table thead th {
  background: var(--navy); color: #fff; padding: 9px 12px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; text-align: left;
}
.ex-debt-table tbody td {
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  color: var(--charcoal); vertical-align: middle;
}
.ex-debt-table tbody tr:nth-child(even) td { background: var(--bg-light); }
.ex-debt-table tbody tr:last-child td { border-bottom: none; }
.ex-debt-table td:first-child {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 11.5px;
}
.ex-rank-circle {
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy);
  color: #fff; font-family: 'Montserrat', sans-serif; font-size: 10px;
  font-weight: 800; display: inline-flex; align-items: center;
  justify-content: center; margin-right: 6px;
}
.ex-rank-circle.r2 { background: var(--red); }
.ex-rank-circle.r3 { background: var(--gold); }
.ex-rank-circle.r4 { background: var(--green); }
.ex-rank-circle.r5 { background: var(--gray-text); }
.ex-apr-high { color: var(--red); font-weight: 700; }
.ex-apr-mid  { color: var(--gold); font-weight: 700; }
.ex-apr-low  { color: var(--green); font-weight: 700; }
.ex-deductible-tag {
  font-size: 9px; font-family: 'Montserrat', sans-serif; font-weight: 700;
  background: rgba(218,113,1,.1); color: var(--orange); border-radius: 8px;
  padding: 2px 6px; margin-left: 4px; text-transform: uppercase;
}

/* ── PAYOFF TIMELINE ── */
.ex-timeline-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px;
}
.ex-timeline-wrap h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12.5px;
  color: var(--charcoal); margin-bottom: 16px;
}
.ex-tl-row { margin-bottom: 12px; }
.ex-tl-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.ex-tl-name {
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--charcoal);
}
.ex-tl-date {
  font-size: 11px; color: var(--gray-text);
  font-family: 'Montserrat', sans-serif; font-weight: 600;
}
.ex-tl-track {
  height: 20px; background: var(--bg-light); border-radius: 10px;
  overflow: hidden; position: relative;
}
.ex-tl-fill {
  height: 100%; border-radius: 10px;
  display: flex; align-items: center; padding-left: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 9.5px;
  font-weight: 700; color: #fff; white-space: nowrap;
  transition: width .6s ease;
}
.ex-tl-fill.c1 { background: var(--navy); }
.ex-tl-fill.c2 { background: var(--red); }
.ex-tl-fill.c3 { background: var(--gold); color: #1D1D1F; }
.ex-tl-fill.c4 { background: var(--green); }
.ex-tl-fill.c5 { background: var(--gray-text); }

/* ── KEY OUTCOMES GRID ── */
.ex-outcomes {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px;
  margin-bottom: 22px;
}
@media(max-width: 640px){ .ex-outcomes{ grid-template-columns: repeat(2,1fr); } }

.ex-outcome {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 14px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.ex-outcome-ico { font-size: 22px; margin-bottom: 7px; }
.ex-outcome-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(15px, 2vw, 19px); color: var(--navy);
  margin-bottom: 4px; line-height: 1.1;
}
.ex-outcome-val.green { color: var(--green); }
.ex-outcome-val.red { color: var(--red); }
.ex-outcome-lbl { font-size: 11px; color: var(--gray-text); line-height: 1.4; }

/* ── LESSON BOX ── */
.ex-lesson {
  background: rgba(0,40,104,.04); border: 1px solid rgba(0,40,104,.12);
  border-left: 4px solid var(--navy); border-radius: 0 8px 8px 0;
  padding: 14px 18px; margin-bottom: 10px;
  font-size: 13.5px; color: var(--charcoal); line-height: 1.7;
  display: flex; gap: 11px; align-items: flex-start;
}
.ex-lesson .l-ico { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.ex-lesson strong { color: var(--navy); }

/* ── COMPARISON TABLE ── */
.ex-compare-table-wrap {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-sm); margin-top: 44px;
}
.ex-compare-head {
  padding: 20px 22px 0;
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 15px; color: var(--charcoal); margin-bottom: 16px;
}
.ex-compare-head p {
  font-size: 13px; color: var(--gray-text); font-family: 'Inter', sans-serif;
  font-weight: 400; margin-top: 5px;
}
.ex-compare-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 680px;
}
.ex-compare-table thead th {
  background: var(--navy); color: #fff; padding: 11px 14px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; text-align: left;
}
.ex-compare-table thead th:first-child { width: 160px; }
.ex-compare-table tbody td {
  padding: 11px 14px; border-bottom: 1px solid var(--border);
  color: var(--charcoal); vertical-align: middle;
}
.ex-compare-table tbody tr:last-child td { border-bottom: none; }
.ex-compare-table tbody tr:nth-child(even) td { background: var(--bg-light); }
.ex-compare-table td:first-child {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 12px;
  color: var(--navy);
}
.ex-compare-table .savings-cell {
  color: var(--green); font-family: 'Montserrat', sans-serif; font-weight: 800;
}
.ex-compare-table .months-cell {
  font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--charcoal);
}

/* ── MOBILE ── */
@media(max-width: 520px){
  .ex-wrap { padding: 36px 16px; }
  .ex-persona-hero { padding: 20px 16px; gap: 16px; }
  .ex-persona-avatar { width: 56px; height: 56px; font-size: 26px; }
  .ex-persona-stats { flex-direction: row; flex-wrap: wrap; }
  .ex-pstat { flex: 1; min-width: 100px; }
  .ex-outcomes { grid-template-columns: repeat(2,1fr); }
}
:root {
  --navy:#002868; --navy-dark:#00183F; --navy-mid:#003580;
  --red:#BF0A30; --green:#00875A; --gold:#d19900; --orange:#da7101;
  --white:#FFFFFF; --charcoal:#1D1D1F; --gray-text:#5F6368;
  --border:#E0E4E8; --bg-light:#F7F9FC;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12); --radius:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--bg-light);}

/* ═══════════════════════════════════════════════════════
   5 PRO TIPS — Debt Avalanche USA
   Matching: --navy #002868, --red, --green, --gold, Inter/Montserrat
   ═══════════════════════════════════════════════════════ */

/* ── SECTION SHELL ── */
.tips-section { padding: 56px 22px; background: var(--bg-light); }
.tips-container { max-width: 1200px; margin: 0 auto; }

/* ── SECTION HEADER ── */
.tips-header { text-align: center; margin-bottom: 52px; }
.tips-header .tips-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--navy);
  background: rgba(0,40,104,.08); border-radius: 20px;
  padding: 6px 18px; margin-bottom: 16px;
}
.tips-header h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(22px, 3.2vw, 32px); color: var(--charcoal);
  margin-bottom: 14px; line-height: 1.2;
}
.tips-header p {
  font-size: 15px; color: var(--gray-text); max-width: 640px;
  margin: 0 auto; line-height: 1.75;
}

/* ── TIP CARDS ── */
.tips-list { display: flex; flex-direction: column; gap: 0; }

.tip-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); margin-bottom: 28px;
  transition: box-shadow .25s ease;
}
.tip-card:hover { box-shadow: var(--shadow-md); }

/* ── TIP CARD HEADER BAND ── */
.tip-header {
  display: flex; align-items: stretch; gap: 0;
}
.tip-num-block {
  width: 90px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 24px 12px; position: relative;
}
.tip-num-block.c1 { background: linear-gradient(160deg, #002868, #003a94); }
.tip-num-block.c2 { background: linear-gradient(160deg, #8a0a22, #BF0A30); }
.tip-num-block.c3 { background: linear-gradient(160deg, #005a3c, #00875A); }
.tip-num-block.c4 { background: linear-gradient(160deg, #9a7000, #d19900); }
.tip-num-block.c5 { background: linear-gradient(160deg, #004466, #006494); }

.tip-num {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 42px; color: rgba(255,255,255,.25); line-height: 1;
  margin-bottom: 4px;
}
.tip-icon-big { font-size: 28px; line-height: 1; }
.tip-header-content {
  flex: 1; padding: 22px 24px; display: flex; align-items: center;
  gap: 16px; border-bottom: 1px solid var(--border);
  background: var(--white); flex-wrap: wrap;
}
.tip-header-text { flex: 1; min-width: 220px; }
.tip-label {
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .7px;
  color: var(--gray-text); margin-bottom: 5px;
}
.tip-title {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(16px, 2.2vw, 21px); color: var(--charcoal);
  line-height: 1.2;
}
.tip-header-stat {
  text-align: right; flex-shrink: 0;
}
.tip-stat-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(18px, 2.5vw, 26px); line-height: 1; margin-bottom: 3px;
}
.tip-stat-val.navy  { color: var(--navy); }
.tip-stat-val.red   { color: var(--red); }
.tip-stat-val.green { color: var(--green); }
.tip-stat-val.gold  { color: var(--gold); }
.tip-stat-val.blue  { color: #006494; }
.tip-stat-lbl {
  font-size: 10.5px; color: var(--gray-text);
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  text-align: right;
}

/* ── TIP BODY ── */
.tip-body { padding: 24px; }
.tip-body p {
  font-size: 14px; color: var(--gray-text); line-height: 1.8;
  margin-bottom: 16px;
}
.tip-body p strong { color: var(--charcoal); }
.tip-body p:last-child { margin-bottom: 0; }

/* ── TIP STEPS ── */
.tip-steps {
  background: var(--bg-light); border-radius: 10px;
  padding: 18px 20px; margin: 18px 0;
}
.tip-steps-title {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 11.5px;
  color: var(--charcoal); margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .5px;
}
.tip-steps ol { list-style: none; padding: 0; margin: 0; counter-reset: step-counter; }
.tip-steps ol li {
  counter-increment: step-counter; display: flex; align-items: flex-start;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--charcoal); line-height: 1.6;
}
.tip-steps ol li:last-child { border-bottom: none; }
.tip-steps ol li::before {
  content: counter(step-counter);
  width: 24px; height: 24px; border-radius: 50%; background: var(--navy);
  color: #fff; font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.tip-steps ol li strong { color: var(--navy); }

/* ── EXAMPLE BOX ── */
.tip-example {
  border-radius: 10px; padding: 16px 20px; margin: 18px 0;
}
.tip-example.navy { background: rgba(0,40,104,.05); border: 1px solid rgba(0,40,104,.14); border-left: 4px solid var(--navy); }
.tip-example.red  { background: rgba(191,10,48,.04); border: 1px solid rgba(191,10,48,.14); border-left: 4px solid var(--red); }
.tip-example.green{ background: rgba(0,135,90,.05); border: 1px solid rgba(0,135,90,.14); border-left: 4px solid var(--green); }
.tip-example.gold { background: rgba(209,153,0,.05); border: 1px solid rgba(209,153,0,.14); border-left: 4px solid var(--gold); }
.tip-example.blue { background: rgba(0,100,148,.05); border: 1px solid rgba(0,100,148,.14); border-left: 4px solid #006494; }
.tip-example-label {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--navy); margin-bottom: 8px; display: flex; align-items: center; gap: 7px;
}
.tip-example.red .tip-example-label { color: var(--red); }
.tip-example.green .tip-example-label { color: var(--green); }
.tip-example.gold .tip-example-label { color: var(--gold); }
.tip-example.blue .tip-example-label { color: #006494; }
.tip-example p { font-size: 13.5px; color: var(--charcoal); line-height: 1.7; }
.tip-example p strong { color: inherit; }
.tip-example p + p { margin-top: 8px; }

/* ── COMPARISON INLINE ── */
.tip-compare-row {
  display: flex; gap: 12px; margin: 16px 0; flex-wrap: wrap;
}
.tip-compare-cell {
  flex: 1; min-width: 140px; border-radius: 10px; padding: 14px 16px; text-align: center;
}
.tip-compare-cell.bad  { background: rgba(191,10,48,.05); border: 1.5px solid rgba(191,10,48,.2); }
.tip-compare-cell.good { background: rgba(0,135,90,.05); border: 1.5px solid rgba(0,135,90,.2); }
.tip-compare-cell h6 {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px;
}
.tip-compare-cell.bad h6  { color: var(--red); }
.tip-compare-cell.good h6 { color: var(--green); }
.tip-compare-cell .cmp-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(16px, 2vw, 20px); margin-bottom: 4px;
}
.tip-compare-cell.bad  .cmp-val { color: var(--red); }
.tip-compare-cell.good .cmp-val { color: var(--green); }
.tip-compare-cell .cmp-lbl { font-size: 11.5px; color: var(--gray-text); }
.tip-vs {
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 14px;
  color: var(--gray-text); flex-shrink: 0;
}

/* ── WARNING CHIP ── */
.tip-warn {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(191,10,48,.04); border: 1px solid rgba(191,10,48,.15);
  border-left: 4px solid var(--red); border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 14px 0; font-size: 13px;
  color: var(--charcoal); line-height: 1.65;
}
.tip-warn .w-ico { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.tip-warn strong { color: var(--red); }

/* ── DATA CHIPS ROW ── */
.tip-data-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.tip-data-chip {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.tip-data-chip .dc-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 17px;
  color: var(--navy); line-height: 1; margin-bottom: 3px;
}
.tip-data-chip .dc-lbl { font-size: 11px; color: var(--gray-text); white-space: nowrap; }

/* ── BOTTOM CTA STRIP ── */
.tips-cta {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  border-radius: var(--radius); padding: 32px 30px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: relative; overflow: hidden; margin-top: 12px;
}
.tips-cta::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(60deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 18px);
}
.tips-cta > * { position: relative; }
.tips-cta-text { flex: 1; min-width: 260px; }
.tips-cta-text h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(16px, 2.2vw, 22px); color: #FCD34D; margin-bottom: 8px;
}
.tips-cta-text p { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.7; }
.tips-cta-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.tips-cta-badge {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 10px 16px; font-size: 13px;
  color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
}

/* ── MOBILE ── */
@media(max-width: 600px){
  .tips-section { padding: 36px 16px; }
  .tip-num-block { width: 64px; padding: 18px 10px; }
  .tip-num { font-size: 30px; }
  .tip-icon-big { font-size: 22px; }
  .tip-header-content { padding: 16px 16px; }
  .tip-body { padding: 18px 16px; }
  .tip-compare-row { flex-direction: column; }
  .tip-vs { display: none; }
  .tips-cta { padding: 24px 18px; }
  .tip-data-chips { gap: 6px; }
  .tip-data-chip .dc-val { font-size: 15px; }
}
:root {
  --navy:#002868; --navy-dark:#00183F; --navy-mid:#003580;
  --red:#BF0A30; --green:#00875A; --gold:#d19900; --orange:#da7101;
  --white:#FFFFFF; --charcoal:#1D1D1F; --gray-text:#5F6368;
  --border:#E0E4E8; --bg-light:#F7F9FC;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12); --radius:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--white);}

/* ═══════════════════════════════════════════════════════
   FAQ SECTION — Debt Avalanche USA
   Matching: --navy #002868, --red, --green, --gold, Inter/Montserrat
   ═══════════════════════════════════════════════════════ */

.faq-section { padding: 56px 22px; background: var(--white); }
.faq-container { max-width: 960px; margin: 0 auto; }

/* ── HEADER ── */
.faq-header { text-align: center; margin-bottom: 40px; }
.faq-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--navy);
  background: rgba(0,40,104,.08); border-radius: 20px; padding: 6px 18px; margin-bottom: 14px;
}
.faq-header h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(22px, 3.2vw, 32px); color: var(--charcoal);
  margin-bottom: 12px; line-height: 1.2;
}
.faq-header p { font-size: 15px; color: var(--gray-text); max-width: 620px; margin: 0 auto; line-height: 1.75; }

/* ── CATEGORY FILTERS ── */
.faq-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 36px;
}
.faq-filter-btn {
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 800;
  padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--border);
  background: var(--white); color: var(--gray-text); cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.faq-filter-btn:hover { border-color: var(--navy); color: var(--navy); }
.faq-filter-btn.active {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* ── CATEGORY GROUP ── */
.faq-group { margin-bottom: 32px; }
.faq-group-label {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px; color: var(--gray-text);
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}
.faq-group-label span { font-size: 16px; }

/* ── ACCORDION ITEM ── */
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease;
  background: var(--white);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item.open { border-color: rgba(0,40,104,.25); }

.faq-question {
  width: 100%; text-align: left; padding: 18px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 800;
  color: var(--charcoal); line-height: 1.35;
  transition: background .2s ease;
}
.faq-question:hover { background: var(--bg-light); }
.faq-item.open .faq-question { background: rgba(0,40,104,.04); color: var(--navy); }

.faq-q-left { display: flex; align-items: flex-start; gap: 12px; flex: 1; }
.faq-q-ico {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  background: rgba(0,40,104,.07); margin-top: 1px;
  transition: background .2s ease;
}
.faq-item.open .faq-q-ico { background: var(--navy); }

.faq-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,40,104,.07); border: 1.5px solid rgba(0,40,104,.15);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .25s ease;
}
.faq-toggle svg { transition: transform .25s ease; }
.faq-item.open .faq-toggle {
  background: var(--navy); border-color: var(--navy);
}
.faq-item.open .faq-toggle svg { transform: rotate(45deg); }
.faq-toggle svg path { stroke: var(--navy); transition: stroke .25s ease; }
.faq-item.open .faq-toggle svg path { stroke: #fff; }

/* ── ANSWER PANEL ── */
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height .4s cubic-bezier(0.16,1,0.3,1);
}
.faq-item.open .faq-answer { max-height: 1000px; }

.faq-answer-inner {
  padding: 0 20px 20px 62px;
  font-size: 14px; color: var(--gray-text); line-height: 1.8;
}
.faq-answer-inner p { margin-bottom: 10px; }
.faq-answer-inner p:last-child { margin-bottom: 0; }
.faq-answer-inner strong { color: var(--charcoal); }
.faq-answer-inner a { color: var(--navy); text-decoration: underline; }

/* Answer highlight box */
.faq-highlight {
  background: rgba(0,40,104,.05); border: 1px solid rgba(0,40,104,.12);
  border-left: 3px solid var(--navy); border-radius: 0 8px 8px 0;
  padding: 12px 16px; margin: 12px 0; font-size: 13.5px; color: var(--charcoal);
}
.faq-highlight.green { background: rgba(0,135,90,.05); border-left-color: var(--green); }
.faq-highlight.red   { background: rgba(191,10,48,.05); border-left-color: var(--red); }
.faq-highlight.gold  { background: rgba(209,153,0,.05); border-left-color: var(--gold); }

/* Answer data row */
.faq-data-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.faq-data-pill {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 14px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.faq-data-pill .dp-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 15px;
  color: var(--navy); line-height: 1; margin-bottom: 2px;
}
.faq-data-pill .dp-lbl { font-size: 10.5px; color: var(--gray-text); white-space: nowrap; }

/* ── STATS BANNER ── */
.faq-stats-banner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 36px; margin-bottom: 0;
}
@media(max-width: 640px){ .faq-stats-banner{ grid-template-columns: repeat(2,1fr); } }
.faq-stat-card {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  border-radius: var(--radius); padding: 20px 16px; text-align: center;
  position: relative; overflow: hidden;
}
.faq-stat-card::before {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(60deg,
    rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px,
    transparent 1px, transparent 16px);
}
.faq-stat-card > * { position: relative; }
.faq-stat-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(22px, 3vw, 30px); color: #FCD34D;
  line-height: 1; margin-bottom: 6px;
}
.faq-stat-lbl { font-size: 11.5px; color: rgba(255,255,255,.75); line-height: 1.4; }

/* ── HIDDEN ITEMS (filter) ── */
.faq-group.hidden { display: none; }
.faq-item.hidden  { display: none; }

/* ── MOBILE ── */
@media(max-width: 600px){
  .faq-section { padding: 36px 16px; }
  .faq-question { padding: 14px 16px; font-size: 13.5px; }
  .faq-answer-inner { padding: 0 16px 16px 16px; }
  .faq-q-ico { display: none; }
}
:root {
  --navy:#002868; --navy-dark:#00183F; --navy-mid:#003580;
  --red:#BF0A30; --green:#00875A; --gold:#d19900; --orange:#da7101;
  --white:#FFFFFF; --charcoal:#1D1D1F; --gray-text:#5F6368;
  --border:#E0E4E8; --bg-light:#F7F9FC;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12); --radius:12px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--bg-light);}
a{text-decoration:none;color:inherit;}

/* ═══════════════════════════════════════════════════════
   RELATED CALCULATORS SECTION — Debt Avalanche
   Matching: --navy #002868, --red, --green, --gold, Inter/Montserrat
   ═══════════════════════════════════════════════════════ */

.rc-section { padding: 56px 22px; background: var(--bg-light); }
.rc-container { max-width: 1200px; margin: 0 auto; }

/* ── HEADER ── */
.rc-header { text-align: center; margin-bottom: 40px; }
.rc-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 1px; color: var(--navy);
  background: rgba(0,40,104,.08); border-radius: 20px;
  padding: 6px 18px; margin-bottom: 14px;
}
.rc-header h2 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(22px, 3.2vw, 32px); color: var(--charcoal);
  margin-bottom: 12px; line-height: 1.2;
}
.rc-header p { font-size: 15px; color: var(--gray-text); max-width: 620px; margin: 0 auto; line-height: 1.75; }

/* ── FILTER TABS ── */
.rc-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-bottom: 36px;
}
.rc-filter-btn {
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 800;
  padding: 9px 20px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--white);
  color: var(--gray-text); cursor: pointer; transition: all .2s ease;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
}
.rc-filter-btn:hover { border-color: var(--navy); color: var(--navy); background: rgba(0,40,104,.04); }
.rc-filter-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.rc-filter-btn .rc-count {
  background: rgba(255,255,255,.25); border-radius: 20px;
  padding: 1px 7px; font-size: 10px; font-weight: 900;
}
.rc-filter-btn:not(.active) .rc-count {
  background: rgba(0,40,104,.1); color: var(--navy);
}

/* ── CARD GRID ── */
.rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}
@media(max-width: 900px){ .rc-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width: 560px){ .rc-grid{ grid-template-columns: 1fr; } }

/* ── INDIVIDUAL CARD ── */
.rc-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
  text-decoration: none; color: inherit;
}
.rc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.rc-card:active { transform: translateY(-2px); }
.rc-card.hidden { display: none; }

/* card top stripe */
.rc-card-stripe {
  height: 4px; width: 100%;
}
.rc-card-stripe.navy  { background: var(--navy); }
.rc-card-stripe.red   { background: var(--red); }
.rc-card-stripe.green { background: var(--green); }
.rc-card-stripe.gold  { background: var(--gold); }

/* card body */
.rc-card-body { padding: 18px 18px 14px; flex: 1; display: flex; flex-direction: column; gap: 10px; }

.rc-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rc-card-icon-wrap {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(0,40,104,.07);
}
.rc-badge {
  font-family: 'Montserrat', sans-serif; font-size: 9.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; border-radius: 20px;
  padding: 4px 10px; white-space: nowrap; flex-shrink: 0;
}
.rc-badge.navy  { background: rgba(0,40,104,.1); color: var(--navy); }
.rc-badge.red   { background: rgba(191,10,48,.1); color: var(--red); }
.rc-badge.green { background: rgba(0,135,90,.1); color: var(--green); }
.rc-badge.gold  { background: rgba(209,153,0,.1); color: var(--gold); }

.rc-cat-label {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--gray-text);
}
.rc-card-title {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 14.5px; color: var(--charcoal); line-height: 1.3;
}
.rc-card-desc {
  font-size: 12.5px; color: var(--gray-text); line-height: 1.7; flex: 1;
}

/* card footer / CTA */
.rc-card-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,40,104,.02);
}
.rc-cta-link {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 800;
  color: var(--navy); display: flex; align-items: center; gap: 6px;
  text-decoration: none; transition: gap .2s ease;
}
.rc-card:hover .rc-cta-link { gap: 10px; }
.rc-cta-arrow {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  transition: background .2s ease;
}
.rc-card:hover .rc-cta-arrow { background: var(--red); }
.rc-free-tag {
  font-size: 10px; font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--green); display: flex; align-items: center; gap: 4px;
}

/* ── VIEW ALL BANNER ── */
.rc-view-all {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  border-radius: var(--radius); padding: 30px 28px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.rc-view-all::before {
  content:''; position: absolute; inset:0;
  background: repeating-linear-gradient(60deg,
    rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
    transparent 1px, transparent 18px);
}
.rc-view-all > * { position: relative; }
.rc-va-text { flex: 1; min-width: 220px; }
.rc-va-text h4 {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: clamp(16px, 2vw, 20px); color: #FCD34D; margin-bottom: 7px;
}
.rc-va-text p { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.65; }
.rc-va-stats { display: flex; flex-wrap: wrap; gap: 12px; }
.rc-va-stat {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px; padding: 10px 18px; text-align: center; min-width: 100px;
}
.rc-va-stat-val {
  font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 20px; color: #FCD34D; line-height: 1; margin-bottom: 3px;
}
.rc-va-stat-lbl { font-size: 10.5px; color: rgba(255,255,255,.7); font-family:'Montserrat',sans-serif; font-weight:600; }
.rc-va-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red); color: #fff; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 800;
  padding: 13px 22px; border-radius: 8px; transition: background .2s ease;
  flex-shrink: 0;
}
.rc-va-btn:hover { background: #9a0825; }

/* ── MOBILE ── */
@media(max-width: 580px){
  .rc-section { padding: 36px 16px; }
  .rc-card-body { padding: 14px 14px 10px; }
  .rc-card-footer { padding: 10px 14px; }
  .rc-view-all { padding: 22px 18px; }
  .rc-va-stats { display: none; }
}
:root {
  --navy:#002868; --navy-dark:#00183F; --navy-mid:#003580;
  --red:#BF0A30; --red-hover:#9B0826;
  --green:#00875A; --green-h:#006644;
  --gold:#d19900; --orange:#da7101;
  --white:#FFFFFF; --charcoal:#1D1D1F; --gray-text:#5F6368;
  --border:#E0E4E8; --bg-light:#F7F9FC;
  --shadow-sm:0 1px 4px rgba(0,40,104,.08);
  --shadow-md:0 4px 20px rgba(0,40,104,.12);
  --shadow-lg:0 8px 40px rgba(0,40,104,.16);
  --radius:12px; --tr:.2s ease;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:none;}
body{font-family:'Inter',sans-serif;font-size:16px;color:var(--gray-text);background:var(--bg-light);line-height:1.6;}
a{color:var(--navy);}
strong{color:var(--charcoal);}

/* ═══════════════════════════════════════════════════════
   LEGAL DISCLAIMER & EDITORIAL TRANSPARENCY
   Debt Avalanche Method Calculator — po-legal-* namespace
   Design tokens: --navy #002868 | --red | --green | --gold
   Fonts: Inter (body) + Montserrat (labels/headings)
   ═══════════════════════════════════════════════════════ */

/* WRAPPER */
.po-legal {
  background: var(--bg-light);
  padding: 56px 22px 48px;
  border-top: 3px solid var(--navy);
}

/* SECTION HEADER */
.po-legal-header {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}
.po-legal-header-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}
.po-legal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 2.8vw, 26px);
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 14px;
}
.po-legal-subtitle {
  font-size: 14.5px;
  color: var(--gray-text);
  line-height: 1.8;
  max-width: 780px;
  display: block;
  margin: 0 auto 14px;
}
.po-legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  background: rgba(0,40,104,.08);
  border-radius: 20px;
  padding: 5px 14px;
}

/* DISCLAIMER CARDS */
.po-legal-card {
  max-width: 960px;
  margin: 0 auto 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* CARD SECTION HEADER */
.po-legal-sec {
  background: var(--navy);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  padding: 12px 20px;
  letter-spacing: .3px;
}

/* CARD BODY */
.po-legal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.po-legal-p {
  font-size: 13.5px;
  color: var(--charcoal);
  line-height: 1.85;
  max-width: 100%;
}
.po-legal-h {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--navy);
  margin-top: 6px;
  border-left: 3px solid var(--navy);
  padding-left: 10px;
}
.po-legal-ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-legal-ul li {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.8;
}

/* GOVERNMENT RESOURCE LINKS */
.po-legal-links {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.po-legal-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-light);
  text-decoration: none;
  transition: all .2s ease;
}
.po-legal-link:hover {
  border-color: var(--navy);
  background: rgba(0,40,104,.04);
  transform: translateX(3px);
}
.po-legal-link-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.po-legal-link-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.po-legal-link-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
}
.po-legal-link-desc {
  font-size: 12px;
  color: var(--gray-text);
  line-height: 1.6;
}
.po-legal-link-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  margin-top: 3px;
  width: fit-content;
}
.po-legal-link-badge.gov {
  background: rgba(0,40,104,.1);
  color: var(--navy);
}
.po-legal-link-badge.org {
  background: rgba(0,135,90,.1);
  color: var(--green);
}

/* EDITORIAL TRANSPARENCY */
.po-legal-edit {
  max-width: 960px;
  margin: 0 auto 18px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.po-legal-edit-head {
  background: linear-gradient(135deg, #0f2540 0%, #1e4d7b 100%);
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.po-legal-edit-icon { font-size: 24px; }
.po-legal-edit-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(14px, 2vw, 18px);
  color: #FCD34D;
  line-height: 1.2;
}
.po-legal-edit-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.po-legal-edit-text {
  font-size: 13.5px;
  color: var(--charcoal);
  line-height: 1.9;
}

/* TRUST BADGES GRID */
.po-legal-badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 4px 0;
}
@media(max-width: 720px) { .po-legal-badges { grid-template-columns: repeat(2,1fr); } }
@media(max-width: 400px) { .po-legal-badges { grid-template-columns: 1fr 1fr; } }
.po-legal-badge {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 12px;
  text-align: center;
}
.po-legal-badge-icon { font-size: 20px; margin-bottom: 5px; }
.po-legal-badge-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 3px;
}
.po-legal-badge-sub {
  font-size: 10.5px;
  color: var(--gray-text);
  line-height: 1.4;
}

/* STATS ROW */
.po-legal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: rgba(0,40,104,.04);
  border: 1px solid rgba(0,40,104,.12);
  border-radius: 9px;
  padding: 14px;
}
@media(max-width: 580px) { .po-legal-stats { grid-template-columns: repeat(2,1fr); } }
.po-legal-stat { text-align: center; }
.po-legal-stat-val {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 3px;
}
.po-legal-stat-label {
  font-size: 11px;
  color: var(--gray-text);
  line-height: 1.4;
}

/* REFERENCE TAGS */
.po-legal-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--bg-light);
}
.po-legal-ref {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--navy);
  background: rgba(0,40,104,.08);
  border: 1px solid rgba(0,40,104,.15);
  border-radius: 14px;
  padding: 4px 12px;
  text-decoration: none;
  transition: all .2s ease;
}
.po-legal-ref:hover {
  background: var(--navy);
  color: #fff;
}

/* FOOTER */
.po-legal-footer {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.po-legal-footer-copy {
  font-size: 12px;
  color: var(--gray-text);
}
.po-legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.po-legal-footer-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s ease;
}
.po-legal-footer-link:hover { color: var(--red); }

/* MOBILE ADJUSTMENTS */
@media(max-width: 600px) {
  .po-legal { padding: 36px 14px 36px; }
  .po-legal-sec { font-size: 12px; padding: 10px 14px; }
  .po-legal-body { padding: 14px 14px; }
  .po-legal-links { padding: 12px 14px; }
  .po-legal-edit-body { padding: 16px 14px; }
  .po-legal-refs { padding: 12px 14px; }
  .po-legal-footer { flex-direction: column; align-items: flex-start; }
}

/* ─────────────────────────────────────────────
   FIX: 5-Column Grid for Debt Avalanche Rows
   ───────────────────────────────────────────── */
/* 1. Force 5 equal slots for the main inputs, plus 2 auto slots for the Checkbox & X button */
.debt-row, .account-row {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto auto !important;
  gap: 12px !important;
  align-items: end !important;
}

/* 2. Force the field containers to never shrink below 0 and stay inside their columns */
.acc-field, .debt-field, .input-wrap {
  min-width: 0 !important;
  width: 100% !important;
}

/* 3. Force inputs and dropdowns to stretch fully without breaking out */
.acc-field input,
.acc-field select,
.debt-field input,
.debt-field select,
.input-wrap input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 4. Protect the Checkbox and X Button from stretching awkwardly */
.tax-check-wrap, .tax-wrap, .acc-remove, .debt-remove {
  width: auto !important;
  min-width: min-content !important;
}

/* 5. Keep it perfectly stacked on mobile screens */
@media (max-width: 800px) {
  .debt-row, .account-row { 
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
  }
  .debt-row .acc-name, .account-row .acc-name,
  .debt-row .debt-name, .account-row .debt-name { 
    grid-column: 1 / -1 !important; 
  }
  .debt-row .acc-remove, .account-row .acc-remove,
  .debt-row .debt-remove, .account-row .debt-remove { 
    grid-column: 2 !important; 
    justify-self: end !important; 
  }
}
/* Force the Highlight Label to be White */
#hl-label {
  color: #ffffff !important;
}

/* ─────────────────────────────────────────────
   FIX: Stack Result & Comparison Cards on Mobile
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Force all result grids into a single vertical column on phones */
  .metrics-grid,
  .compare-grid,
  .res-grid,
  .summary-grid,
  .strat-grid,
  .comp-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  /* Ensure the cards themselves stretch nicely and don't overflow */
  .metric-card,
  .compare-card,
  .res-card,
  .comp-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}