:root{
  --navy:#002868;--green:#00843D;--red:#BF0A30;
  --light-bg:#F8F9FF;--card-bg:#FFFFFF;--border:#D0D5E8;
  --text:#1A1F36;--muted:#6B7280;
  --gold:#C8860A;--gold-light:#FFFBEB;
  --fdic:#1565C0;--fdic-bg:#EFF6FF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--light-bg);color:var(--text);font-size:15px;line-height:1.6}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif}

/* HEADER */
.calc-header{background:linear-gradient(135deg,#0d1f4e 0%,var(--navy) 55%,#1a3a20 100%);color:#fff;padding:24px 24px 18px;text-align:center;position:relative;overflow:hidden}
.calc-header::before{content:'🏦';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:90px;opacity:.07}
.calc-header h1{font-size:clamp(17px,3.5vw,25px);font-weight:800;margin-bottom:5px}
.calc-header p{font-size:12.5px;opacity:.85;max-width:700px;margin:0 auto}
.header-badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:9px}
.hbadge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:3px 11px;font-size:11px;font-weight:700}

/* TABS */
.tab-nav{display:flex;gap:3px;padding:12px 12px 0;background:#fff;border-bottom:2px solid var(--border);overflow-x:auto;scrollbar-width:none}
.tab-nav::-webkit-scrollbar{display:none}
.tab-btn{flex-shrink:0;padding:8px 13px;border:none;background:none;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;border-radius:8px 8px 0 0;transition:.2s;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab-btn.active{color:var(--navy);border-bottom-color:var(--navy);background:var(--light-bg)}
.tab-btn:hover:not(.active){color:var(--navy);background:var(--light-bg)}
.tab-pane{display:none;padding:16px 14px}
.tab-pane.active{display:block}

/* LAYOUT */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.card-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.badge{background:var(--navy);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px;font-weight:700}
.badge-gold{background:var(--gold);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}
.badge-red{background:var(--red);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}
.badge-green{background:var(--green);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}

/* FORM */
.form-group{margin-bottom:11px}
label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
input[type=number],input[type=text],input[type=date],select{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:13.5px;font-family:'Inter',sans-serif;color:var(--text);background:#fff;transition:.2s;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
input:focus,select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,40,104,.1)}
.ip{position:relative}
.ip .pre{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--muted);font-weight:600;pointer-events:none}
.ip .suf{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);font-weight:600;pointer-events:none}
.ip input{padding-left:24px}
.ip input.sp{padding-right:28px;padding-left:11px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}
@media(max-width:480px){.row-2,.row-3{grid-template-columns:1fr}}

/* RUNG CARD */
.rung-card{background:var(--light-bg);border:1.5px solid var(--border);border-radius:10px;padding:13px;margin-bottom:8px;position:relative}
.rung-card .rung-num{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.rung-card .rung-remove{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:2px}
.rung-card .rung-remove:hover{color:var(--red)}
.rung-colors{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.rung-swatch{width:16px;height:16px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s}
.rung-swatch.active{border-color:var(--text);transform:scale(1.2)}

/* RESULTS */
.result-hero{background:linear-gradient(135deg,var(--navy),#1a3a6b);color:#fff;border-radius:12px;padding:17px;text-align:center;margin-bottom:12px}
.result-hero .label{font-size:10.5px;opacity:.8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.result-hero .value{font-size:34px;font-family:'Montserrat',sans-serif;font-weight:800}
.result-hero .subtitle{font-size:11.5px;opacity:.7;margin-top:3px}

.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ri{background:var(--light-bg);border-radius:9px;padding:10px 12px;border:1px solid var(--border)}
.ri .rl{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.ri .rv{font-size:16px;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--navy)}
.ri .rs{font-size:10.5px;color:var(--muted);margin-top:2px}
.ri.hi{background:var(--green);border-color:var(--green)}
.ri.hi .rl,.ri.hi .rv,.ri.hi .rs{color:#fff}
.ri.wa{background:#FFF3CD;border-color:#FFCA28}
.ri.wa .rv,.ri.wa .rl{color:#7B5800}
.ri.go{background:var(--gold-light);border-color:#FDE68A}
.ri.go .rv,.ri.go .rl{color:#78350F}
.ri.da{background:#FEF2F2;border-color:#FECACA}
.ri.da .rv,.ri.da .rl{color:#991B1B}
.ri.fdic{background:var(--fdic-bg);border-color:#BFDBFE}
.ri.fdic .rv,.ri.fdic .rl{color:var(--fdic)}

/* LADDER TABLE */
.ladder-table{width:100%;border-collapse:collapse;font-size:12px}
.ladder-table th{background:var(--navy);color:#fff;padding:7px 9px;text-align:right;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
.ladder-table th:first-child,.ladder-table th:nth-child(2){text-align:left}
.ladder-table td{padding:7px 9px;border-bottom:1px solid var(--border);text-align:right;vertical-align:middle}
.ladder-table td:first-child,.ladder-table td:nth-child(2){text-align:left}
.ladder-table tr:last-child td{border-bottom:none;font-weight:700;background:var(--light-bg)}
.rung-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.fdic-flag{font-size:9.5px;padding:1px 6px;border-radius:10px;font-weight:700}
.fdic-ok{background:#ECFDF5;color:#065F46}
.fdic-warn{background:#FEF2F2;color:#991B1B}

/* INFO BOXES */
.info-box{background:#EFF6FF;border:1px solid #BFDBFE;border-left:4px solid var(--navy);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#1e40af;margin-bottom:11px}
.warn-box{background:#FFF3CD;border:1px solid #FFCA28;border-left:4px solid #F59E0B;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#92400E;margin-bottom:11px}
.danger-box{background:#FEF2F2;border:1px solid #FECACA;border-left:4px solid var(--red);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#991B1B;margin-bottom:11px}
.success-box{background:#ECFDF5;border:1px solid #A7F3D0;border-left:4px solid var(--green);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#065F46;margin-bottom:11px}
.gold-box{background:var(--gold-light);border:1px solid #FDE68A;border-left:4px solid var(--gold);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#78350F;margin-bottom:11px}

/* BUTTONS */
.btn-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.btn{padding:9px 16px;border-radius:8px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:.2s;border:2px solid transparent;text-transform:uppercase;letter-spacing:.4px;display:inline-flex;align-items:center;gap:5px}
.btn-calc{background:var(--green);color:#fff;border-color:var(--green)}
.btn-calc:hover{background:#006B31}
.btn-clear{background:#fff;color:var(--red);border-color:var(--red)}
.btn-clear:hover{background:var(--red);color:#fff}
.btn-pdf{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-pdf:hover{background:#001a55}
.btn-wa{background:#25D366;color:#fff;border-color:#25D366}
.btn-wa:hover{background:#128C7E}
.btn-sm{padding:6px 11px;font-size:10.5px}
.btn-add{background:#fff;border:1.5px dashed var(--border);color:var(--muted);font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;border-radius:8px;padding:8px 14px;cursor:pointer;transition:.2s;width:100%;text-align:center;margin-bottom:10px}
.btn-add:hover{border-color:var(--navy);color:var(--navy);background:var(--light-bg)}

/* CHART */
.chart-wrap{position:relative;height:240px;margin-top:8px}
.chart-wrap-sm{position:relative;height:175px;margin-top:6px}
.chart-wrap-lg{position:relative;height:280px;margin-top:8px}

/* MATURITY TIMELINE */
.timeline{position:relative;padding:8px 0}
.tl-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;position:relative}
.tl-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:3px;border:2px solid #fff;box-shadow:0 0 0 2px var(--border)}
.tl-content{flex:1;background:var(--light-bg);border-radius:8px;padding:8px 11px;border:1px solid var(--border)}
.tl-content .tl-date{font-size:11px;font-weight:700;color:var(--navy);margin-bottom:2px}
.tl-content .tl-info{font-size:12px;color:var(--muted)}
.tl-line{position:absolute;left:6px;top:18px;width:2px;height:calc(100% - 8px);background:var(--border)}

/* SECT HEADER */
.sect-hd{background:linear-gradient(90deg,var(--navy),#1a3a6b);color:#fff;border-radius:8px;padding:10px 13px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.sect-hd h3{font-size:13px;font-weight:700;margin:0}

/* HIDDEN */
.hidden{display:none!important}

/* AD */
.ad-slot{background:#F1F5F9;border:1px dashed #CBD5E1;border-radius:8px;padding:10px;text-align:center;color:#94A3B8;font-size:12px;margin:11px 0}

/* TAX COMPARE */
.tax-row{display:flex;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--border);font-size:13px}
.tax-row:last-child{border-bottom:none;font-weight:700;background:var(--light-bg);border-radius:0 0 8px 8px}
.tax-row .tl{color:var(--muted)}
.tax-row .tv{font-weight:600;color:var(--navy)}
.tax-row .tv.red{color:var(--red)}
.tax-row .tv.green{color:var(--green)}

/* RUNG COLOR PALETTE */
.rc1{background:#002868}
.rc2{background:#00843D}
.rc3{background:#C8860A}
.rc4{background:#7C3AED}
.rc5{background:#0891B2}
.rc6{background:#BF0A30}
<style>
/* ── EXACT CD-LADDER DESIGN TOKENS ── */
:root{
  --navy:#002868;--green:#00843D;--red:#BF0A30;
  --light-bg:#F8F9FF;--card-bg:#FFFFFF;--border:#D0D5E8;
  --text:#1A1F36;--muted:#6B7280;
  --gold:#C8860A;--gold-light:#FFFBEB;
  --fdic:#1565C0;--fdic-bg:#EFF6FF;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:var(--light-bg);color:var(--text);font-size:15px;line-height:1.6}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif}

/* ── BASE COMPONENTS — identical to cd-ladder-calculator.html ── */
.card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.card-title{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:11px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.badge{background:var(--navy);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px;font-weight:700}
.badge-gold{background:var(--gold);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}
.badge-red{background:var(--red);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}
.badge-green{background:var(--green);color:#fff;font-size:9.5px;padding:2px 7px;border-radius:9px}
.info-box{background:#EFF6FF;border:1px solid #BFDBFE;border-left:4px solid var(--navy);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#1e40af;margin-bottom:11px}
.warn-box{background:#FFF3CD;border:1px solid #FFCA28;border-left:4px solid #F59E0B;border-radius:8px;padding:10px 12px;font-size:12.5px;color:#92400E;margin-bottom:11px}
.success-box{background:#ECFDF5;border:1px solid #A7F3D0;border-left:4px solid var(--green);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#065F46;margin-bottom:11px}
.gold-box{background:var(--gold-light);border:1px solid #FDE68A;border-left:4px solid var(--gold);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#78350F;margin-bottom:11px}
.danger-box{background:#FEF2F2;border:1px solid #FECACA;border-left:4px solid var(--red);border-radius:8px;padding:10px 12px;font-size:12.5px;color:#991B1B;margin-bottom:11px}
.result-hero{background:linear-gradient(135deg,var(--navy),#1a3a6b);color:#fff;border-radius:12px;padding:17px;text-align:center;margin-bottom:12px}
.result-hero .label{font-size:10.5px;opacity:.8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.result-hero .value{font-size:clamp(20px,4vw,30px);font-family:'Montserrat',sans-serif;font-weight:800}
.result-hero .subtitle{font-size:11.5px;opacity:.7;margin-top:4px}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
@media(max-width:480px){.result-grid{grid-template-columns:1fr}}
.ri{background:var(--light-bg);border-radius:9px;padding:10px 12px;border:1px solid var(--border)}
.ri .rl{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.ri .rv{font-size:16px;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--navy)}
.ri .rs{font-size:10.5px;color:var(--muted);margin-top:2px}
.ri.hi{background:var(--green);border-color:var(--green)}
.ri.hi .rl,.ri.hi .rv,.ri.hi .rs{color:#fff}
.ri.wa{background:#FFF3CD;border-color:#FFCA28}
.ri.wa .rv,.ri.wa .rl{color:#7B5800}
.ri.go{background:var(--gold-light);border-color:#FDE68A}
.ri.go .rv,.ri.go .rl{color:#78350F}
.ri.da{background:#FEF2F2;border-color:#FECACA}
.ri.da .rv,.ri.da .rl{color:#991B1B}
.ri.fdic{background:var(--fdic-bg);border-color:#BFDBFE}
.ri.fdic .rv,.ri.fdic .rl{color:var(--fdic)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:768px){.two-col{grid-template-columns:1fr}}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:480px){.row-2{grid-template-columns:1fr}}
.sect-hd{background:linear-gradient(90deg,var(--navy),#1a3a6b);color:#fff;border-radius:8px;padding:10px 13px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.sect-hd h3{font-size:13px;font-weight:700;margin:0}
.tax-row{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-bottom:1px solid var(--border);font-size:13px;gap:8px}
.tax-row:last-child{border-bottom:none;font-weight:700;background:var(--light-bg);border-radius:0 0 8px 8px}
.tax-row .tl{color:var(--muted);font-size:12.5px}
.tax-row .tv{font-weight:600;color:var(--navy);font-size:12.5px;text-align:right}
.tax-row .tv.green{color:var(--green)}
.tax-row .tv.red{color:var(--red)}
.ladder-table{width:100%;border-collapse:collapse;font-size:12px}
.ladder-table th{background:var(--navy);color:#fff;padding:7px 9px;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.3px}
.ladder-table td{padding:7px 9px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12.5px}
.ladder-table tr:last-child td{border-bottom:none}
.ladder-table tr:nth-child(even) td{background:#FAFBFF}
.rung-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.rc1{background:#002868}.rc2{background:#00843D}.rc3{background:#C8860A}.rc4{background:#7C3AED}.rc5{background:#0891B2}
.hbadge{background:rgba(0,40,104,.1);border:1px solid rgba(0,40,104,.2);color:var(--navy);border-radius:14px;padding:3px 11px;font-size:11px;font-weight:700}

/* ── SECTION-ONLY NEW CLASSES (same token system) ── */
.hiw-wrap{max-width:900px;margin:0 auto;padding:24px 14px 52px}
.hiw-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(0,40,104,.08);border:1px solid rgba(0,40,104,.18);color:var(--navy);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:4px 13px;border-radius:20px;margin-bottom:12px}
.hiw-title{font-family:'Montserrat',sans-serif;font-size:clamp(20px,3.8vw,28px);font-weight:800;color:var(--text);line-height:1.25;margin-bottom:8px}
.hiw-title span{color:var(--navy)}
.hiw-lead{font-size:13.5px;color:var(--muted);max-width:700px;line-height:1.8;margin-bottom:20px}
.hiw-divider{border:none;border-top:2px solid var(--border);margin:0 0 22px}

/* Step bubble */
.step-bubble{width:32px;height:32px;border-radius:50%;color:#fff;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sb-navy{background:var(--navy)}
.sb-green{background:var(--green)}
.sb-gold{background:var(--gold)}
.sb-red{background:var(--red)}
.sb-fdic{background:var(--fdic)}

/* Stat block */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}
@media(max-width:540px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat-box{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:13px 10px;text-align:center}
.stat-val{font-family:'Montserrat',sans-serif;font-size:clamp(18px,3vw,24px);font-weight:800;color:var(--navy);margin-bottom:3px}
.stat-val.green{color:var(--green)}
.stat-val.gold{color:var(--gold)}
.stat-lbl{font-size:10.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;line-height:1.4}

/* Rung card visual demo */
.demo-rung{background:var(--light-bg);border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px}
.demo-rung-head{font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.demo-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:460px){.demo-fields{grid-template-columns:1fr 1fr}}
.demo-field{background:#fff;border:1px solid var(--border);border-radius:7px;padding:7px 10px}
.demo-field .df-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.demo-field .df-val{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--text)}

/* Formula box */
.formula-box{background:linear-gradient(135deg,#0d1f4e,#1a3a6b);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.formula-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.5);margin-bottom:7px}
.formula-eq{font-family:'Montserrat',sans-serif;font-size:clamp(10.5px,1.9vw,13.5px);font-weight:700;color:#FCD34D;line-height:1.8;word-break:break-word}
.formula-note{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:8px;line-height:1.65}

/* Ladder visual flow */
.ladder-flow{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px}
.lf-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border)}
.lf-row:last-child{border-bottom:none}
.lf-rung{width:72px;flex-shrink:0;padding:10px 12px;background:var(--navy);color:#fff;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;text-align:center}
.lf-rung.g{background:var(--green)}
.lf-rung.o{background:var(--gold)}
.lf-rung.p{background:#7C3AED}
.lf-rung.b{background:var(--fdic)}
.lf-body{flex:1;padding:9px 13px;background:#fff;font-size:12px;color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lf-body span{color:var(--muted);font-size:11.5px}
.lf-body strong{color:var(--navy)}
.lf-tag{flex-shrink:0;font-size:10.5px;font-weight:700;font-family:'Montserrat',sans-serif;padding:3px 9px;border-radius:20px;background:var(--fdic-bg);color:var(--fdic);border:1px solid #BFDBFE}
.lf-tag.gr{background:#ECFDF5;color:#065F46;border-color:#A7F3D0}
.lf-tag.go{background:var(--gold-light);color:#78350F;border-color:#FDE68A}

/* Tax flow */
.tax-flow{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:12px}
.tf-row{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-bottom:1px solid var(--border);background:#fff}
.tf-row:last-child{border-bottom:none;background:var(--light-bg)}
.tf-num{width:26px;height:26px;border-radius:50%;font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.tf-body{flex:1}
.tf-title{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.tf-desc{font-size:11.5px;color:var(--muted);line-height:1.6}
.tf-tag{flex-shrink:0;font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;align-self:flex-start;margin-top:2px}
.tt-navy{background:rgba(0,40,104,.1);color:var(--navy);border:1px solid rgba(0,40,104,.2)}
.tt-green{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.tt-gold{background:var(--gold-light);color:#78350F;border:1px solid #FDE68A}
.tt-red{background:#FEF2F2;color:#991B1B;border:1px solid #FECACA}

/* Timeline identical to calculator */
.timeline{position:relative;padding:4px 0}
.tl-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;position:relative}
.tl-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:3px;border:2px solid #fff;box-shadow:0 0 0 2px var(--border)}
.tl-content{flex:1;background:var(--light-bg);border-radius:8px;padding:9px 12px;border:1px solid var(--border)}
.tl-content .tl-date{font-size:11px;font-weight:700;color:var(--navy);margin-bottom:2px}
.tl-content .tl-info{font-size:12px;color:var(--muted)}
.tl-line{position:absolute;left:6px;top:18px;width:2px;background:var(--border)}

/* Output rows */
.out-row{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.out-row:last-child{border-bottom:none}
.out-icon{font-size:20px;flex-shrink:0;margin-top:1px;width:28px;text-align:center}
.out-body{}
.out-title{font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.out-desc{font-size:12px;color:var(--muted);line-height:1.55}


  /* ── Wrapper ── */
  .examples-section {
    max-width: 960px;
    margin: 40px auto 48px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
  }

  /* ── Section heading — mirrors .sect-hd style ── */
  .examples-sect-hd {
    background: linear-gradient(90deg, #002868, #1a3a6b);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .examples-sect-hd h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2.5vw, 17px);
    font-weight: 700;
    margin: 0;
    color: #fff;
  }

  .examples-sect-hd .sect-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
  }

  .examples-intro {
    font-size: 13.5px;
    color: #6B7280;
    line-height: 1.65;
    margin-bottom: 20px;
  }

  /* ── Example Card — mirrors .card ── */
  .ex-card {
    background: #FFFFFF;
    border: 1px solid #D0D5E8;
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
  }

  /* ── Card Header ── */
  .ex-card-head {
    padding: 13px 16px 11px;
    border-bottom: 1px solid #D0D5E8;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }

  .ex-card-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .ex-profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    background: #F8F9FF;
    border: 1.5px solid #D0D5E8;
  }

  .ex-head-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #1A1F36;
    margin: 0 0 3px 0;
    line-height: 1.3;
  }

  .ex-head-text p {
    font-size: 11.5px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
  }

  .ex-total-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: #002868;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .ex-total-badge span {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 1px;
  }

  /* ── Card Body ── */
  .ex-card-body {
    padding: 14px 16px;
  }

  /* ── Rung Table — mirrors .ladder-table ── */
  .ex-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid #D0D5E8;
    margin-bottom: 14px;
  }

  .ex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 480px;
  }

  .ex-table thead tr {
    background: #002868;
    color: #fff;
  }

  .ex-table thead th {
    padding: 8px 10px;
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
    white-space: nowrap;
  }

  .ex-table thead th:first-child,
  .ex-table thead th:nth-child(2) {
    text-align: left;
  }

  .ex-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #D0D5E8;
    text-align: right;
    vertical-align: middle;
    color: #1A1F36;
  }

  .ex-table tbody td:first-child,
  .ex-table tbody td:nth-child(2) {
    text-align: left;
  }

  .ex-table tbody tr:last-child td {
    border-bottom: none;
    font-weight: 700;
    background: #F8F9FF;
  }

  .ex-table tbody tr:nth-child(even):not(:last-child) {
    background: #fafbff;
  }

  .ex-rung-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
  }

  .ex-interest {
    color: #00843D;
    font-weight: 600;
  }

  /* ── Metrics Row — mirrors .result-grid ── */
  .ex-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
  }

  .ex-metric {
    background: #F8F9FF;
    border: 1px solid #D0D5E8;
    border-radius: 9px;
    padding: 9px 11px;
  }

  .ex-metric .em-label {
    font-size: 10px;
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
  }

  .ex-metric .em-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #002868;
  }

  .ex-metric.em-green {
    background: #ECFDF5;
    border-color: #00843D;
  }

  .ex-metric.em-green .em-label,
  .ex-metric.em-green .em-value {
    color: #065F46;
  }

  .ex-metric.em-gold {
    background: #FFFBEB;
    border-color: #FDE68A;
  }

  .ex-metric.em-gold .em-label,
  .ex-metric.em-gold .em-value {
    color: #78350F;
  }

  .ex-metric.em-blue {
    background: #EFF6FF;
    border-color: #BFDBFE;
  }

  .ex-metric.em-blue .em-label,
  .ex-metric.em-blue .em-value {
    color: #1565C0;
  }

  /* ── Insight Box — mirrors .info-box / .gold-box / .success-box ── */
  .ex-insight {
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    line-height: 1.6;
    border-left-width: 4px;
    border-left-style: solid;
    margin-bottom: 10px;
  }

  .ex-insight.type-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left-color: #002868;
    color: #1e40af;
  }

  .ex-insight.type-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-left-color: #00843D;
    color: #065F46;
  }

  .ex-insight.type-gold {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left-color: #C8860A;
    color: #78350F;
  }

  .ex-insight.type-warn {
    background: #FFF3CD;
    border: 1px solid #FFCA28;
    border-left-color: #F59E0B;
    color: #92400E;
  }

  /* ── Try It CTA button — mirrors .btn.btn-calc ── */
  .ex-try-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    background: #00843D;
    color: #fff;
    border: 2px solid #00843D;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: background 0.2s;
  }

  .ex-try-btn:hover {
    background: #006B31;
    border-color: #006B31;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .examples-section {
      margin: 28px auto 36px;
      padding: 0 12px;
    }

    .ex-metrics {
      grid-template-columns: repeat(2, 1fr);
    }

    .ex-total-badge {
      font-size: 15px;
    }

    .ex-card-head-left {
      gap: 8px;
    }
  }

  @media (max-width: 480px) {
    .ex-metrics {
      grid-template-columns: repeat(2, 1fr);
    }

    .ex-head-text h3 {
      font-size: 12.5px;
    }

    .ex-card-body {
      padding: 12px 12px;
    }
  }

  /* ── Section shell ── */
  .tips-section {
    max-width: 960px;
    margin: 40px auto 48px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
  }

  /* ── Section header — exact .sect-hd clone ── */
  .tips-sect-hd {
    background: linear-gradient(90deg, #0d1f4e, #002868);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .tips-sect-hd h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2.5vw, 17px);
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.3;
  }

  .tips-section-intro {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
    margin: 10px 0 20px;
  }

  /* ── Tip Card — extends .card ── */
  .tip-card {
    background: #FFFFFF;
    border: 1px solid #D0D5E8;
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
  }

  .tip-card:hover {
    box-shadow: 0 4px 20px rgba(0, 40, 104, 0.09);
  }

  /* ── Tip card top bar — color-coded per tip ── */
  .tip-card-bar {
    height: 4px;
    width: 100%;
    display: block;
  }

  /* ── Tip card header ── */
  .tip-card-head {
    padding: 14px 16px 10px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-bottom: 1px solid #D0D5E8;
  }

  .tip-number-badge {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-top: 1px;
  }

  .tip-head-text {
    flex: 1;
  }

  .tip-head-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #1A1F36;
    margin: 0 0 4px 0;
    line-height: 1.35;
  }

  .tip-head-text .tip-tagline {
    font-size: 11.5px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
  }

  /* Badge row — mirrors .badge / .badge-gold / .badge-green etc */
  .tip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    margin-top: 1px;
  }

  .tip-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9px;
    color: #fff;
    white-space: nowrap;
  }

  .tb-navy  { background: #002868; }
  .tb-green { background: #00843D; }
  .tb-gold  { background: #C8860A; }
  .tb-red   { background: #BF0A30; }
  .tb-purple{ background: #7C3AED; }
  .tb-teal  { background: #0891B2; }

  /* ── Tip card body ── */
  .tip-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tip-main-text {
    font-size: 13px;
    color: #1A1F36;
    line-height: 1.7;
    margin: 0;
  }

  .tip-main-text strong {
    color: #002868;
  }

  /* ── Do/Don't two-col split ── */
  .tip-do-dont {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .tip-do,
  .tip-dont {
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    border-left: 4px solid transparent;
  }

  .tip-do {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-left-color: #00843D;
    color: #065F46;
  }

  .tip-dont {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left-color: #BF0A30;
    color: #991B1B;
  }

  .tip-do .dd-label,
  .tip-dont .dd-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    display: block;
  }

  .tip-do .dd-label  { color: #00843D; }
  .tip-dont .dd-label{ color: #BF0A30; }

  /* ── Stat highlight strip — mirrors .result-grid items ── */
  .tip-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .tip-stat {
    background: #F8F9FF;
    border: 1px solid #D0D5E8;
    border-radius: 9px;
    padding: 9px 11px;
    text-align: center;
  }

  .tip-stat .ts-label {
    font-size: 10px;
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
  }

  .tip-stat .ts-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #002868;
  }

  .tip-stat.ts-green { background: #ECFDF5; border-color: #A7F3D0; }
  .tip-stat.ts-green .ts-label,
  .tip-stat.ts-green .ts-value { color: #065F46; }

  .tip-stat.ts-gold  { background: #FFFBEB; border-color: #FDE68A; }
  .tip-stat.ts-gold  .ts-label,
  .tip-stat.ts-gold  .ts-value { color: #78350F; }

  .tip-stat.ts-red   { background: #FEF2F2; border-color: #FECACA; }
  .tip-stat.ts-red   .ts-label,
  .tip-stat.ts-red   .ts-value { color: #991B1B; }

  /* ── Info / callout boxes — mirrors .info-box / .gold-box / .warn-box ── */
  .tip-callout {
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 12.5px;
    line-height: 1.65;
    border-left: 4px solid transparent;
  }

  .tip-callout.co-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left-color: #002868;
    color: #1e40af;
  }

  .tip-callout.co-gold {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left-color: #C8860A;
    color: #78350F;
  }

  .tip-callout.co-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-left-color: #00843D;
    color: #065F46;
  }

  .tip-callout.co-warn {
    background: #FFF3CD;
    border: 1px solid #FFCA28;
    border-left-color: #F59E0B;
    color: #92400E;
  }

  /* ── Step list ── */
  .tip-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .tip-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: #1A1F36;
    line-height: 1.6;
  }

  .tip-steps li .step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #002868;
    color: #fff;
    border-radius: 50%;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
  }

  /* ── Calculator tab pointer — mirrors .info-box style ── */
  .tip-tab-pointer {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left: 4px solid #002868;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #1e40af;
    font-weight: 500;
  }

  .tip-tab-pointer .tab-arrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    background: #002868;
    color: #fff;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .tips-section {
      margin: 28px auto 36px;
      padding: 0 12px;
    }

    .tip-do-dont {
      grid-template-columns: 1fr;
    }

    .tip-stat-strip {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 480px) {
    .tip-stat-strip {
      grid-template-columns: repeat(2, 1fr);
    }

    .tip-card-head {
      padding: 12px 13px 10px;
    }

    .tip-card-body {
      padding: 12px 13px 14px;
    }

    .tip-head-text h3 {
      font-size: 12.5px;
    }

    .tip-number-badge {
      width: 30px;
      height: 30px;
      font-size: 12px;
    }
  }

  /* ── Section shell ── */
  .faq-section {
    max-width: 960px;
    margin: 40px auto 48px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
  }

  /* ── Section header — exact .sect-hd clone ── */
  .faq-sect-hd {
    background: linear-gradient(90deg, #0d1f4e, #002868);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .faq-sect-hd h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2.5vw, 17px);
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.3;
  }

  .faq-section-intro {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
    margin: 10px 0 18px;
  }

  /* ── Category Label — mirrors .card-title style ── */
  .faq-category-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #002868;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 22px 0 8px;
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .faq-category-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #D0D5E8;
  }

  /* ── FAQ Item — accordion ── */
  .faq-item {
    background: #FFFFFF;
    border: 1px solid #D0D5E8;
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .faq-item.faq-open {
    border-color: #002868;
    box-shadow: 0 3px 14px rgba(0, 40, 104, 0.09);
  }

  /* ── Question button ── */
  .faq-q {
    width: 100%;
    background: none;
    border: none;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    transition: background 0.15s;
  }

  .faq-q:hover {
    background: #F8F9FF;
  }

  .faq-item.faq-open .faq-q {
    background: #F8F9FF;
  }

  .faq-q-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
  }

  /* Q number badge — mirrors .badge style */
  .faq-q-num {
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    background: #002868;
    color: #fff;
    padding: 2px 7px;
    border-radius: 9px;
    margin-top: 2px;
    white-space: nowrap;
  }

  .faq-item.faq-open .faq-q-num {
    background: #00843D;
  }

  .faq-q-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1A1F36;
    line-height: 1.45;
    margin: 0;
  }

  .faq-item.faq-open .faq-q-text {
    color: #002868;
  }

  /* Chevron */
  .faq-chevron {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F8F9FF;
    border: 1px solid #D0D5E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #002868;
    font-weight: 700;
    transition: transform 0.3s ease, background 0.2s, border-color 0.2s;
    margin-top: 1px;
  }

  .faq-item.faq-open .faq-chevron {
    transform: rotate(180deg);
    background: #002868;
    border-color: #002868;
    color: #fff;
  }

  /* ── Answer panel ── */
  .faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease, padding 0.3s;
    padding: 0 16px;
  }

  .faq-item.faq-open .faq-a {
    max-height: 900px;
    padding: 0 16px 16px;
  }

  .faq-a-inner {
    border-top: 1px solid #D0D5E8;
    padding-top: 13px;
  }

  .faq-a-inner p {
    font-size: 13px;
    line-height: 1.75;
    color: #1A1F36;
    margin: 0 0 10px;
  }

  .faq-a-inner p:last-child {
    margin-bottom: 0;
  }

  .faq-a-inner strong {
    color: #002868;
  }

  .faq-a-inner ul,
  .faq-a-inner ol {
    margin: 8px 0 10px;
    padding-left: 18px;
  }

  .faq-a-inner ul li,
  .faq-a-inner ol li {
    font-size: 12.5px;
    line-height: 1.7;
    color: #1A1F36;
    margin-bottom: 5px;
  }

  /* Inline callout inside answer — mirrors .info-box / .gold-box */
  .faq-callout {
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.65;
    border-left: 4px solid transparent;
    margin: 10px 0;
  }

  .faq-callout.fc-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left-color: #002868;
    color: #1e40af;
  }

  .faq-callout.fc-success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-left-color: #00843D;
    color: #065F46;
  }

  .faq-callout.fc-gold {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-left-color: #C8860A;
    color: #78350F;
  }

  .faq-callout.fc-warn {
    background: #FFF3CD;
    border: 1px solid #FFCA28;
    border-left-color: #F59E0B;
    color: #92400E;
  }

  .faq-callout.fc-danger {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-left-color: #BF0A30;
    color: #991B1B;
  }

  /* Inline mini-table inside answer */
  .faq-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #D0D5E8;
  }

  .faq-mini-table thead th {
    background: #002868;
    color: #fff;
    padding: 7px 10px;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-weight: 700;
  }

  .faq-mini-table tbody td {
    padding: 7px 10px;
    border-bottom: 1px solid #D0D5E8;
    color: #1A1F36;
    vertical-align: middle;
  }

  .faq-mini-table tbody tr:last-child td {
    border-bottom: none;
  }

  .faq-mini-table tbody tr:nth-child(even) {
    background: #F8F9FF;
  }

  .faq-mini-table .green { color: #00843D; font-weight: 600; }
  .faq-mini-table .red   { color: #BF0A30; font-weight: 600; }
  .faq-mini-table .navy  { color: #002868; font-weight: 600; }

  /* Tab pointer inside answer */
  .faq-tab-ptr {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left: 4px solid #002868;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #1e40af;
    margin-top: 10px;
  }

  .faq-tab-ptr .ftp-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    background: #002868;
    color: #fff;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Mobile ── */
  @media (max-width: 768px) {
    .faq-section {
      margin: 28px auto 36px;
      padding: 0 12px;
    }

    .faq-q-text {
      font-size: 12.5px;
    }

    .faq-mini-table {
      font-size: 11.5px;
    }

    .faq-mini-table thead th,
    .faq-mini-table tbody td {
      padding: 6px 8px;
    }
  }

  @media (max-width: 480px) {
    .faq-q {
      padding: 12px 13px;
    }

    .faq-a {
      padding: 0 13px;
    }

    .faq-item.faq-open .faq-a {
      padding: 0 13px 14px;
    }

    .faq-q-text {
      font-size: 12px;
    }

    .faq-chevron {
      width: 22px;
      height: 22px;
      font-size: 9px;
    }
  }


  .related-section {
    max-width: 960px;
    margin: 40px auto 48px;
    padding: 0 14px;
    font-family: 'Inter', sans-serif;
  }

  .related-sect-hd {
    background: linear-gradient(90deg, #0d1f4e, #002868);
    color: #fff;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .related-sect-hd h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(14px, 2.5vw, 17px);
    font-weight: 700;
    margin: 0;
    color: #fff;
    line-height: 1.3;
  }

  .related-intro {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.65;
    margin: 8px 0 18px;
  }

  /* Grid layout */
  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  @media (max-width: 900px) {
    .related-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 600px) {
    .related-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Card style – based on .card */
  .related-card {
    background: #FFFFFF;
    border: 1px solid #D0D5E8;
    border-radius: 12px;
    padding: 12px 13px 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  }

  .related-card:hover {
    box-shadow: 0 4px 18px rgba(0, 40, 104, 0.10);
    transform: translateY(-2px);
    border-color: #002868;
  }

  .related-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  .related-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #1A1F36;
    margin: 0 0 2px;
    line-height: 1.4;
  }

  .related-chip {
    font-family: 'Montserrat', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
  }

  .rc-blue   { background: #002868; }
  .rc-green  { background: #00843D; }
  .rc-gold   { background: #C8860A; }
  .rc-purple { background: #7C3AED; }

  .related-desc {
    font-size: 12.5px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
  }

  .related-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    font-size: 11px;
    color: #6B7280;
  }

  .related-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }

  .related-link {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #002868;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .related-link span.arrow {
    font-size: 10px;
  }

  .related-link:hover {
    color: #00843D;
  }

  .related-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
  }

  .related-pill {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #F8F9FF;
    border: 1px solid #D0D5E8;
    color: #6B7280;
  }

  .legal-section {
    max-width: 960px;
    margin: 32px auto 40px;
    padding: 0 14px 4px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: #6B7280;
    line-height: 1.7;
  }

  .legal-sect-hd {
    background: linear-gradient(90deg, #0d1f4e, #002868);
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .legal-sect-hd h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(13px, 2.3vw, 15px);
    font-weight: 700;
    margin: 0;
    color: #fff;
  }

  .legal-grid {
    display: grid;
    grid-template-columns: 1.4fr 1.1fr;
    gap: 14px;
  }

  @media (max-width: 768px) {
    .legal-section {
      padding: 0 12px 4px;
      margin: 26px auto 32px;
    }
    .legal-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Card shells (reuse .info-box / .gold-box style language) */
  .legal-card {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #D0D5E8;
    padding: 11px 13px 12px;
  }

  .legal-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #1A1F36;
    margin: 0 0 6px 0;
  }

  .legal-card p {
    margin: 0 0 8px 0;
  }

  .legal-card p:last-child {
    margin-bottom: 0;
  }

  .legal-subheading {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    color: #6B7280;
    margin: 8px 0 4px;
  }

  .legal-highlight {
    font-weight: 600;
    color: #002868;
  }

  .legal-list {
    margin: 6px 0 4px;
    padding-left: 16px;
  }

  .legal-list li {
    margin-bottom: 4px;
  }

  /* Callouts using existing color system */
  .legal-callout {
    border-radius: 8px;
    padding: 9px 11px;
    margin-top: 8px;
    border-left: 4px solid transparent;
  }

  .legal-callout.info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-left-color: #002868;
    color: #1e40af;
  }

  .legal-callout.warn {
    background: #FFF3CD;
    border: 1px solid #FFCA28;
    border-left-color: #F59E0B;
    color: #92400E;
  }

  .legal-callout.success {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    border-left-color: #00843D;
    color: #065F46;
  }

  /* Authority links list */
  .legal-links {
    margin: 6px 0 0;
    padding-left: 16px;
  }

  .legal-links li {
    margin-bottom: 4px;
  }

  .legal-links a {
    color: #002868;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .legal-links a:hover {
    color: #00843D;
  }

  .legal-footnote {
    margin-top: 10px;
    font-size: 11px;
    color: #9CA3AF;
  }

/* =========================================
   AGGRESSIVE MOBILE OVERFLOW PATCH 3.0
   ========================================= */

/* 1. Fix the overlapping $ and % signs in inputs */
.ip input { 
    padding-left: 26px !important; 
}
.ip input.sp { 
    padding-right: 30px !important; 
    padding-left: 11px !important; 
}

@media (max-width: 640px) {
    /* 2. Fix the H1 Banner & Watermark Icon */
    .calc-header { 
        padding: 24px 16px 18px !important; 
    }
    .calc-header::before { 
        font-size: 50px !important; 
        right: -5px !important; 
        opacity: 0.04 !important; 
    }
    .calc-header h1 { 
        font-size: 20px !important; 
        line-height: 1.35 !important; 
    }
    
    /* 3. Force single column grids */
    .two-col, .result-grid, .row-2, .row-3 { 
        grid-template-columns: 1fr !important; 
    }

    /* 4. THE MAGIC FIX: Stop Grid & Flex Blowout (EXPANDED) */
    /* Now includes the Tips, Examples, FAQs, and Related cards */
    .two-col > div, .card, .ri, .tip-card, .ex-card, .faq-item, .related-card, .legal-card {
        min-width: 0 !important; 
        max-width: 100vw !important;
        overflow: hidden !important; 
        box-sizing: border-box !important;
    }

    /* 5. Dynamically shrink the giant result numbers */
    .result-hero {
        padding: 16px 12px !important;
    }
    .result-hero .value { 
        font-size: clamp(22px, 8vw, 32px) !important; 
        word-break: break-word !important; 
        line-height: 1.1 !important;
    }

    /* 6. Strict Table Containment */
    div[style*="overflow-x:auto"], .table-wrapper, .ex-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 7. FIX FOR SQUEEZED PRO TIPS TEXT */
    /* Forces the button to sit on top of the text naturally on mobile */
    .tip-tab-pointer {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}