/* ============================================================
   GLOBAL DESIGN SYSTEM
============================================================ */
:root {
  --navy: #002868; --navy-d: #001a45; --navy-l: #003a8c; --navy-xl: #e8ecf7;
  --red: #BF0A30; --red-l: #ffeaea;
  --green: #00875A; --green-l: #e6f5f0;
  --amber: #D97706; --amber-l: #fef3c7;
  --g50: #f8fafc; --g100: #f1f5f9; --g200: #e2e8f0; --g300: #cbd5e1;
  --g400: #94a3b8; --g500: #64748b; --g600: #475569; --g700: #334155; --g900: #0f172a;
  --r: 12px; --rl: 18px;
  --sh: 0 4px 20px rgba(0,40,104,.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--g50);color:var(--g900);font-size:14px;line-height:1.6}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif}

/* ── HEADER ── */
.hdr { background:var(--navy-d); position:relative; overflow:hidden; padding:56px 20px 48px; text-align:center; color:#fff; }
.hdr-bg { position:absolute; inset:0; background:linear-gradient(135deg, #001a45 0%, #002868 50%, #004aad 100%); z-index:0; }
.hdr-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:30px 30px; z-index:1; }
.hdr-inner { position:relative; z-index:2; max-width: 900px; margin: 0 auto; }
.hdr .brand { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:12px; }
.hdr h1 { font-size:clamp(26px, 4vw, 44px); font-weight:900; letter-spacing:-1px; line-height:1.15; margin-bottom:16px; }
.hdr h1 span { color:#7fd6e8; }
.hdr .sub { color:rgba(255,255,255,.8); font-size:16px; margin-bottom:24px; }
.pill-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.pill { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:100px; padding:6px 14px; font-size:12px; font-weight:600; }
.pill.hi { background:rgba(0,135,90,.25); border-color:rgba(0,135,90,.4); color:#6ee7b7; }

/* ── CALCULATOR SHELL ── */
.wrap { max-width:1200px; margin: -30px auto 80px; padding: 0 16px; position:relative; z-index:10; }
.card { background:#fff; border-radius:var(--rl); box-shadow:var(--sh); padding:32px; margin-bottom:24px; border:1px solid var(--g200); }

.grid-2 { display:grid; grid-template-columns: 1fr 1.1fr; gap:32px; }
@media(max-width:960px) { .grid-2 { grid-template-columns: 1fr; } }

.sec-ttl { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.sec-ttl .ico { width:36px; height:36px; border-radius:10px; background:var(--navy-xl); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--navy); }
.sec-ttl h2 { font-size:18px; font-weight:800; color:var(--navy); }

/* ── INPUTS ── */
.igrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.fg { display:flex; flex-direction:column; gap:6px; }
.fg label { font-size:12px; font-weight:700; color:var(--g700); display:flex; align-items:center; gap:5px; text-transform:uppercase; letter-spacing:0.5px; }
.irow { display:flex; align-items:center; border:1.5px solid var(--g200); border-radius:8px; overflow:hidden; background:#fff; transition:border-color .15s; }
.irow:focus-within { border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,40,104,.08); }
.ipfx, .isfx { padding:0 12px; background:var(--g50); color:var(--g600); font-weight:700; font-size:13px; height:44px; display:flex; align-items:center; border-right:1px solid var(--g200); }
.isfx { border-right:none; border-left:1px solid var(--g200); }
.fg input { flex:1; border:none; outline:none; padding:0 14px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600; height:44px; color:var(--g900); width:100%; }

.tip { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; background:var(--g300); border-radius:50%; font-size:9px; font-weight:800; color:#fff; cursor:help; position:relative; }
.tip:hover::after { content:attr(data-t); position:absolute; bottom:20px; left:50%; transform:translateX(-50%); background:var(--navy); color:#fff; padding:8px 12px; border-radius:6px; width:220px; font-size:11px; font-weight:500; text-transform:none; letter-spacing:0; text-align:center; z-index:10; }

hr { border:none; border-top:1px solid var(--g200); margin:24px 0; }

/* ── RESULTS ── */
.res-panel { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r); padding:24px; height:100%; display:flex; flex-direction:column; }
.kpi-main { background:var(--navy); border-radius:12px; padding:24px; color:#fff; margin-bottom:20px; text-align:center; position:relative; overflow:hidden; }
.kpi-main::before { content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--green); }
.kpi-main .lbl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.7); margin-bottom:8px; }
.kpi-main .val { font-family:'Montserrat',sans-serif; font-size:42px; font-weight:900; line-height:1; margin-bottom:8px; }
.kpi-main .sub { font-size:14px; font-weight:500; color:rgba(255,255,255,.9); }

.mgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px; }
.mc { background:#fff; border:1px solid var(--g200); border-radius:10px; padding:16px; border-left:4px solid var(--navy); }
.mc.g { border-left-color:var(--green); }
.mc.a { border-left-color:var(--amber); }
.mc.r { border-left-color:var(--red); }
.mc .ml { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--g500); margin-bottom:4px; }
.mc .mv { font-family:'Montserrat',sans-serif; font-size:20px; font-weight:800; color:var(--g900); }

/* Chart Container */
.chart-wrap { width:100%; height:240px; margin-bottom:24px; background:#fff; border:1px solid var(--g200); border-radius:10px; padding:16px; }

/* Breakdown Table */
.breakdown { background:#fff; border:1px solid var(--g200); border-radius:10px; overflow:hidden; }
.bd-row { display:flex; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--g100); font-size:13.5px; font-weight:500; }
.bd-row:last-child { border-bottom:none; }
.bd-row.hl { background:var(--navy-xl); font-weight:700; color:var(--navy); }
.bd-row.neg { color:var(--red); }
.bd-row.pos { color:var(--green); }
.bd-head { background:var(--g50); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--g500); padding:8px 16px; border-bottom:1px solid var(--g200); }

/* Buttons */
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.btn { flex:1; padding:12px 14px; border-radius:8px; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; cursor:pointer; display:flex; justify-content:center; align-items:center; gap:8px; transition:all .2s; border:2px solid; white-space:nowrap; }
.btn-p { background:var(--navy); border-color:var(--navy); color:#fff; }
.btn-p:hover { background:var(--navy-d); }
.btn-wa { background:#25D366; border-color:#25D366; color:#fff; }
.btn-wa:hover { background:#128C7E; border-color:#128C7E; }
.btn-clear { background:#fff; border-color:var(--red); color:var(--red); }
.btn-clear:hover { background:var(--red-l); }
/* ============================================================
   GLOBAL DESIGN SYSTEM — exact match with calculator
============================================================ */

body { font-family:'Inter',sans-serif; background:var(--g50); color:var(--g900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4,h5 { font-family:'Montserrat',sans-serif; }

/* ── LAYOUT ── */
.wrap { max-width:1100px; margin:0 auto 80px; padding:0 16px; }
.card { background:#fff; border-radius:var(--rl); box-shadow:var(--sh); padding:36px 40px; margin-bottom:32px; border:1px solid var(--g200); }
@media(max-width:680px) { .card { padding:24px 18px; } }

/* ── SECTION TITLE ── */
.sec-ttl { display:flex; align-items:flex-start; gap:16px; margin-bottom:32px; }
.sec-ttl .ico-big { width:52px; height:52px; border-radius:14px; background:var(--navy-xl); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.sec-ttl .ttl-text h2 { font-size:clamp(20px,3vw,26px); font-weight:900; color:var(--navy); line-height:1.2; margin-bottom:6px; }
.sec-ttl .ttl-text p { font-size:14px; color:var(--g500); line-height:1.6; max-width:600px; }

/* ── TYPOGRAPHY ── */
.body-text { font-size:15px; color:var(--g700); line-height:1.8; margin-bottom:18px; }
.body-text strong { color:var(--g900); font-weight:700; }
.body-text a { color:var(--navy); font-weight:600; text-decoration:none; }
.body-text a:hover { text-decoration:underline; }

h3.sub-head {
  font-family:'Montserrat',sans-serif;
  font-size:17px;
  font-weight:800;
  color:var(--navy);
  margin: 32px 0 14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--navy-xl);
  display:flex;
  align-items:center;
  gap:10px;
}
h3.sub-head .sh-ico { font-size:18px; }

h4.mini-head {
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--g900);
  margin:22px 0 8px;
}

/* ── FORMULA BOX ── */
.formula-box {
  background:var(--navy);
  border-radius:12px;
  padding:24px 28px;
  margin:24px 0;
  position:relative;
  overflow:hidden;
}
.formula-box::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),#7fd6e8);
}
.formula-box .fb-label {
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:10px;
}
.formula-box .fb-formula {
  font-family:'Montserrat',sans-serif;
  font-size:clamp(16px,2.5vw,22px);
  font-weight:900;
  color:#7fd6e8;
  line-height:1.4;
  margin-bottom:12px;
}
.formula-box .fb-vars { display:flex; flex-wrap:wrap; gap:8px; }
.formula-box .fb-var {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  border-radius:6px;
  padding:4px 12px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.85);
}

/* ── FORMULA STEP-BY-STEP ── */
.formula-steps {
  counter-reset: step;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:20px 0;
}
.formula-step {
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:10px;
  padding:14px 16px;
  position:relative;
}
.formula-step::before {
  counter-increment: step;
  content: counter(step);
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:var(--navy);
  width:26px;
  height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.formula-step .fs-content {}
.formula-step .fs-title { font-weight:700; font-size:14px; color:var(--g900); margin-bottom:4px; }
.formula-step .fs-detail { font-size:13px; color:var(--g600); line-height:1.6; }
.formula-step .fs-math {
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  background:var(--navy-xl);
  display:inline-block;
  padding:3px 10px;
  border-radius:5px;
  margin-top:6px;
}

/* ── INPUT / OUTPUT VISUAL ── */
.input-output-grid {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
  margin:24px 0;
}
@media(max-width:600px) {
  .input-output-grid { grid-template-columns:1fr; }
  .io-arrow { transform:rotate(90deg); }
}
.io-box { border-radius:10px; padding:18px; }
.io-box.inputs { background:var(--navy-xl); border:1px solid #c7d2fe; }
.io-box.outputs { background:var(--green-l); border:1px solid #a7f3d0; }
.io-box h4 { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; }
.io-box.inputs h4 { color:var(--navy); }
.io-box.outputs h4 { color:var(--green); }
.io-list { list-style:none; display:flex; flex-direction:column; gap:7px; }
.io-list li { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; }
.io-list li::before { content:''; width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.io-box.inputs .io-list li::before { background:var(--navy); }
.io-box.outputs .io-list li::before { background:var(--green); }
.io-arrow { font-size:28px; color:var(--g300); text-align:center; }

/* ── HIGHLIGHT CALLOUT ── */
.callout {
  border-radius:10px;
  padding:18px 20px;
  margin:20px 0;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid;
}
.callout.navy { background:var(--navy-xl); border-color:#c7d2fe; }
.callout.green { background:var(--green-l); border-color:#a7f3d0; }
.callout.amber { background:var(--amber-l); border-color:#fde68a; }
.callout.red   { background:var(--red-l);   border-color:#fca5a5; }
.callout .c-ico { font-size:22px; flex-shrink:0; line-height:1; }
.callout .c-body { font-size:13.5px; color:var(--g700); line-height:1.7; }
.callout .c-body strong { color:var(--g900); font-weight:700; }

/* ── TWO COLUMN TEXT ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:20px 0; }
@media(max-width:640px) { .two-col { grid-template-columns:1fr; } }
.col-box { background:var(--g50); border:1px solid var(--g200); border-radius:10px; padding:20px; }
.col-box h4 { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:800; color:var(--navy); margin-bottom:10px; }
.col-box ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.col-box ul li { font-size:13px; color:var(--g700); display:flex; gap:8px; align-items:flex-start; line-height:1.55; }
.col-box ul li::before { content:'✓'; color:var(--green); font-weight:900; flex-shrink:0; }
.col-box ul li.no::before { content:'✗'; color:var(--red); }

/* ── COMPARISON ROW ── */
.vs-bar {
  display:grid;
  grid-template-columns:1fr 60px 1fr;
  gap:12px;
  align-items:stretch;
  margin:20px 0;
}
@media(max-width:560px) { .vs-bar { grid-template-columns:1fr; } .vs-center { display:none; } }
.vs-left  { background:var(--navy-xl); border:1.5px solid var(--navy-l); border-radius:12px; padding:20px; }
.vs-right { background:var(--green-l); border:1.5px solid #6ee7b7; border-radius:12px; padding:20px; }
.vs-center { display:flex; align-items:center; justify-content:center; }
.vs-badge { width:42px; height:42px; background:var(--g200); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-size:12px; font-weight:900; color:var(--g600); }
.vs-left h4 { color:var(--navy); font-size:14px; margin-bottom:10px; }
.vs-right h4 { color:var(--green); font-size:14px; margin-bottom:10px; }
.vs-left p, .vs-right p { font-size:13px; color:var(--g700); line-height:1.65; }
.vs-tag {
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:2px 10px;
  border-radius:100px;
  margin-bottom:8px;
}
.vs-left .vs-tag { background:var(--navy); color:#fff; }
.vs-right .vs-tag { background:var(--green); color:#fff; }

/* ── INLINE CALC DEMO BOX ── */
.demo-calc {
  background:var(--navy);
  border-radius:14px;
  padding:28px;
  margin:24px 0;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.demo-calc::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--green),#7fd6e8,var(--amber));
}
.demo-calc .dc-title {
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:16px;
}
.dc-scenario {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:16px;
  margin-bottom:16px;
  font-size:13px;
  color:rgba(255,255,255,.85);
  line-height:1.7;
}
.dc-scenario strong { color:#7fd6e8; }
.dc-result-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
@media(max-width:480px) { .dc-result-grid { grid-template-columns:1fr 1fr; } }
.dc-r {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  padding:12px;
  text-align:center;
}
.dc-r .dr-num {
  font-family:'Montserrat',sans-serif;
  font-size:20px;
  font-weight:900;
  color:#6ee7b7;
  line-height:1;
}
.dc-r .dr-num.warn { color:#fcd34d; }
.dc-r .dr-num.bad  { color:#fca5a5; }
.dc-r .dr-lbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:rgba(255,255,255,.5); margin-top:4px; }

/* ── BENCHMARK TABLE ── */
.bmark-table { width:100%; border-collapse:collapse; font-size:13px; margin:16px 0; }
.bmark-table thead tr { background:var(--navy); color:#fff; }
.bmark-table thead th { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; padding:11px 14px; text-align:left; white-space:nowrap; }
.bmark-table thead th:first-child { border-radius:8px 0 0 0; }
.bmark-table thead th:last-child  { border-radius:0 8px 0 0; }
.bmark-table tbody tr { border-bottom:1px solid var(--g200); transition:background .15s; }
.bmark-table tbody tr:hover { background:var(--g50); }
.bmark-table tbody td { padding:11px 14px; color:var(--g700); vertical-align:middle; }
.bmark-table tbody td:first-child { font-weight:700; color:var(--g900); }
.pill-g { display:inline-block; background:#d1fae5; color:#065f46; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.pill-a { display:inline-block; background:#fef3c7; color:#92400e; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.pill-r { display:inline-block; background:#fee2e2; color:#991b1b; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.pill-n { display:inline-block; background:var(--navy-xl); color:var(--navy); font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── DIVIDER ── */
.section-divider { border:none; border-top:2px solid var(--g200); margin:36px 0; }

/* ── ORDERED/UNORDERED LISTS ── */
.content-list { padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; margin:16px 0; }
.content-list li { font-size:14px; color:var(--g700); display:flex; gap:12px; align-items:flex-start; line-height:1.7; }
.content-list li .li-ico { flex-shrink:0; }
.content-list.ordered { counter-reset:li; }
.content-list.ordered li::before { counter-increment:li; content:counter(li); font-family:'Montserrat',sans-serif; font-size:12px; font-weight:900; color:#fff; background:var(--navy); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ── WARNING STRIP ── */
.warning-strip { background:var(--red-l); border:1px solid #fca5a5; border-left:5px solid var(--red); border-radius:10px; padding:16px 20px; margin:20px 0; font-size:13.5px; color:#7f1d1d; line-height:1.7; }
.warning-strip strong { font-weight:700; color:#991b1b; }

/* ── SUCCESS STRIP ── */
.success-strip { background:var(--green-l); border:1px solid #a7f3d0; border-left:5px solid var(--green); border-radius:10px; padding:16px 20px; margin:20px 0; font-size:13.5px; color:#064e3b; line-height:1.7; }
.success-strip strong { font-weight:700; color:var(--green); }

/* ── INSIGHT CARD ── */
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0; }
@media(max-width:640px) { .insight-grid { grid-template-columns:1fr; } }
.insight-card { border-radius:10px; padding:18px; border:1.5px solid; }
.insight-card.blue  { background:var(--navy-xl); border-color:#c7d2fe; }
.insight-card.green { background:var(--green-l); border-color:#a7f3d0; }
.insight-card.amber { background:var(--amber-l); border-color:#fde68a; }
.insight-card .ic-num { font-family:'Montserrat',sans-serif; font-size:32px; font-weight:900; line-height:1; margin-bottom:4px; }
.insight-card.blue  .ic-num { color:var(--navy); }
.insight-card.green .ic-num { color:var(--green); }
.insight-card.amber .ic-num { color:var(--amber); }
.insight-card .ic-label { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; color:var(--g600); margin-bottom:6px; }
.insight-card .ic-desc { font-size:12.5px; color:var(--g700); line-height:1.6; }

/* ── SENSITIVITY TABLE ── */
.sens-table { width:100%; border-collapse:collapse; font-size:13px; text-align:center; }
.sens-table th { background:var(--g100); font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--g600); padding:10px 12px; border:1px solid var(--g200); }
.sens-table th.axis-label { background:var(--navy); color:#fff; font-size:10px; letter-spacing:1px; }
.sens-table td { padding:9px 12px; border:1px solid var(--g200); font-weight:600; color:var(--g700); transition:background .15s; }
.sens-table td:first-child { background:var(--g100); font-family:'Montserrat',sans-serif; font-weight:800; color:var(--g900); }
.sens-table td.high  { background:#d1fae5; color:#065f46; font-weight:800; }
.sens-table td.med   { background:#fef3c7; color:#92400e; font-weight:700; }
.sens-table td.low   { background:#fee2e2; color:#991b1b; font-weight:700; }
.sens-table td.neg   { background:#7f1d1d; color:#fca5a5; font-weight:800; }

/* ── DEMO LABEL ── */
.demo-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:var(--g400); text-align:center; padding:40px 0 12px; }
/* ============================================================
   GLOBAL DESIGN SYSTEM — exact match with calculator
============================================================ */

html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--g50); color:var(--g900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4,h5 { font-family:'Montserrat',sans-serif; }

/* ── LAYOUT ── */
.wrap { max-width:1100px; margin:0 auto 80px; padding:0 16px; }

/* ════════════════════════════════════════════════════
   SECTION HEADER CARD
════════════════════════════════════════════════════ */
.section-header-card {
  background:var(--navy-d);
  border-radius:var(--rl);
  padding:40px 40px 36px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
}
.section-header-card::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, #001a45 0%, #002868 60%, #004aad 100%);
  z-index:0;
}
.section-header-card::after {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:28px 28px;
  z-index:1;
}
.shc-inner { position:relative; z-index:2; }
.shc-eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:14px;
}
.shc-inner h2 {
  font-size:clamp(22px,3.5vw,34px);
  font-weight:900;
  color:#fff;
  line-height:1.2;
  margin-bottom:12px;
}
.shc-inner h2 span { color:#7fd6e8; }
.shc-inner p { font-size:15px; color:rgba(255,255,255,.75); max-width:680px; line-height:1.7; margin-bottom:24px; }
.shc-pills { display:flex; flex-wrap:wrap; gap:8px; }
.shc-pill {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;
  padding:5px 14px;
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.85);
}
.shc-pill.g { background:rgba(0,135,90,.25); border-color:rgba(0,135,90,.4); color:#6ee7b7; }
@media(max-width:600px) { .section-header-card { padding:28px 20px; } }

/* ════════════════════════════════════════════════════
   CASE STUDY CARD
════════════════════════════════════════════════════ */
.case-card {
  background:#fff;
  border-radius:var(--rl);
  box-shadow:var(--sh);
  border:1px solid var(--g200);
  margin-bottom:28px;
  overflow:hidden;
  transition:box-shadow .25s;
}
.case-card:hover { box-shadow:var(--sh-hover); }

/* — CARD HEADER BAND — */
.case-header {
  padding:28px 36px 24px;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:flex-start;
}
.case-header::before {
  content:'';
  position:absolute; inset:0;
  z-index:0;
}
.case-card:nth-child(2) .case-header::before { background:linear-gradient(135deg,#001a45,#002868); }
.case-card:nth-child(3) .case-header::before { background:linear-gradient(135deg,#065f46,#00875A); }
.case-card:nth-child(4) .case-header::before { background:linear-gradient(135deg,#7c2d12,#c2410c); }
.case-card:nth-child(5) .case-header::before { background:linear-gradient(135deg,#1e1b4b,#4338ca); }
.case-card:nth-child(6) .case-header::before { background:linear-gradient(135deg,#064e3b,#059669); }

.ch-left { position:relative; z-index:1; }
.case-num {
  font-size:10px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:8px;
}
.case-header h3 {
  font-size:clamp(16px,2.5vw,22px);
  font-weight:900;
  color:#fff;
  line-height:1.25;
  margin-bottom:6px;
}
.case-subtitle {
  font-size:13px;
  color:rgba(255,255,255,.75);
  font-weight:500;
  line-height:1.55;
  max-width:500px;
}
.ch-right {
  position:relative; z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  flex-shrink:0;
}
.verdict-badge {
  border-radius:100px;
  padding:6px 16px;
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:0.5px;
  text-transform:uppercase;
  white-space:nowrap;
}
.vb-strong { background:#d1fae5; color:#065f46; }
.vb-good   { background:#e0e7ff; color:#3730a3; }
.vb-solid  { background:var(--amber-l); color:#92400e; }
.vb-cash   { background:#fce7f3; color:#9d174d; }
.vb-caution { background:var(--red-l); color:#991b1b; }

.city-flag {
  font-size:28px;
  line-height:1;
}

@media(max-width:580px) {
  .case-header { grid-template-columns:1fr; }
  .ch-right { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
}
@media(max-width:600px) { .case-header { padding:22px 18px 20px; } }

/* — CARD BODY — */
.case-body { padding:28px 36px 32px; }
@media(max-width:600px) { .case-body { padding:20px 18px 24px; } }

/* Property snapshot */
.property-snapshot {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:24px;
}
.ps-item {
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:8px;
  padding:8px 14px;
  font-size:12px;
  font-weight:600;
  color:var(--g700);
  display:flex;
  align-items:center;
  gap:6px;
}
.ps-item .ps-ico { font-size:14px; }

/* Main grid: inputs + results */
.case-main-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:24px;
}
@media(max-width:700px) { .case-main-grid { grid-template-columns:1fr; } }

/* Input panel */
.input-panel { background:var(--g50); border:1px solid var(--g200); border-radius:var(--r); overflow:hidden; }
.panel-head {
  background:var(--navy-xl);
  padding:10px 16px;
  font-family:'Montserrat',sans-serif;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--navy);
}
.input-table { width:100%; border-collapse:collapse; }
.input-table tr { border-bottom:1px solid var(--g200); }
.input-table tr:last-child { border-bottom:none; }
.input-table td { padding:9px 14px; font-size:13px; }
.input-table td:first-child { color:var(--g600); font-weight:500; }
.input-table td:last-child { color:var(--g900); font-weight:700; text-align:right; font-family:'Montserrat',sans-serif; }
.input-table .group-row td { background:var(--navy-xl); font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; color:var(--navy); padding:6px 14px; }

/* Results panel */
.results-panel { display:flex; flex-direction:column; gap:12px; }

.kpi-hero {
  background:var(--navy);
  border-radius:var(--r);
  padding:20px;
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.kpi-hero::before { content:''; position:absolute; top:0;left:0;right:0;height:3px; background:var(--green); }
.kpi-hero .kh-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:rgba(255,255,255,.55); margin-bottom:6px; }
.kpi-hero .kh-val { font-family:'Montserrat',sans-serif; font-size:40px; font-weight:900; color:#7fd6e8; line-height:1; margin-bottom:4px; }
.kpi-hero .kh-sub { font-size:12px; color:rgba(255,255,255,.7); font-weight:500; }

.kpi-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi-mini {
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:8px;
  padding:12px;
}
.kpi-mini .km-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--g400); margin-bottom:3px; }
.kpi-mini .km-val  { font-family:'Montserrat',sans-serif; font-size:18px; font-weight:800; color:var(--g900); line-height:1.2; }
.kpi-mini.pos .km-val { color:var(--green); }
.kpi-mini.warn .km-val { color:var(--amber); }
.kpi-mini.neg  .km-val { color:var(--red); }
.kpi-mini.navy .km-val { color:var(--navy); }

/* Breakdown bar */
.breakdown-bar {
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:var(--r);
  overflow:hidden;
}
.bb-head {
  background:var(--g100);
  padding:8px 14px;
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--g500);
  border-bottom:1px solid var(--g200);
}
.bb-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--g100);
  font-size:13px;
}
.bb-row:last-child { border-bottom:none; }
.bb-row span { color:var(--g600); font-weight:500; }
.bb-row strong { font-family:'Montserrat',sans-serif; font-weight:800; }
.bb-row.pos strong { color:var(--green); }
.bb-row.neg strong { color:var(--red); }
.bb-row.total { background:var(--navy); }
.bb-row.total span, .bb-row.total strong { color:#fff; }

/* Stacked progress bar */
.return-stack-wrap { margin:20px 0 6px; }
.rs-label { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.8px; color:var(--g500); margin-bottom:8px; }
.return-stack { display:flex; border-radius:100px; overflow:hidden; height:14px; gap:2px; }
.rs-segment { height:100%; border-radius:100px; transition:width .5s; }
.rs-cf   { background:var(--green); }
.rs-app  { background:var(--navy); }
.rs-eq   { background:var(--amber); }
.rs-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.rsl-item { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--g600); }
.rsl-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* Expert verdict */
.expert-verdict {
  border-radius:10px;
  padding:16px 18px;
  border-left:4px solid;
  margin-top:6px;
}
.ev-strong  { background:var(--green-l); border-color:var(--green); }
.ev-good    { background:var(--navy-xl); border-color:var(--navy); }
.ev-solid   { background:var(--amber-l); border-color:var(--amber); }
.ev-cash    { background:#fdf4ff; border-color:#a855f7; }
.ev-caution { background:var(--red-l); border-color:var(--red); }

.ev-label {
  font-family:'Montserrat',sans-serif;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:6px;
}
.ev-strong  .ev-label { color:var(--green); }
.ev-good    .ev-label { color:var(--navy); }
.ev-solid   .ev-label { color:var(--amber); }
.ev-cash    .ev-label { color:#7e22ce; }
.ev-caution .ev-label { color:var(--red); }

.expert-verdict p { font-size:13.5px; color:var(--g700); line-height:1.7; }
.expert-verdict p strong { color:var(--g900); font-weight:700; }

/* Situation tags */
.situation-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.sit-tag {
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:100px;
  border:1px solid;
}
.sit-buy   { background:#d1fae5; border-color:#6ee7b7; color:#065f46; }
.sit-caution { background:var(--amber-l); border-color:#fde68a; color:#92400e; }
.sit-avoid { background:var(--red-l); border-color:#fca5a5; color:#991b1b; }
.sit-info  { background:var(--navy-xl); border-color:#c7d2fe; color:var(--navy); }

/* Section divider */
.between-label {
  text-align:center;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--g400);
  padding:8px 0 20px;
}

/* Scroll note */
.scroll-note {
  display:none;
  font-size:11px;
  font-weight:600;
  color:var(--g400);
  text-align:center;
  margin-bottom:8px;
}
@media(max-width:600px) { .scroll-note { display:block; } }

/* Compare strip at bottom */
.compare-strip {
  background:#fff;
  border:1px solid var(--g200);
  border-radius:var(--rl);
  padding:28px 32px;
  box-shadow:var(--sh);
  margin-bottom:24px;
}
@media(max-width:600px) { .compare-strip { padding:20px 16px; } }

.cs-title { font-family:'Montserrat',sans-serif; font-size:16px; font-weight:900; color:var(--navy); margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.compare-table { width:100%; border-collapse:collapse; min-width:700px; font-size:13px; }
.compare-table thead tr { background:var(--navy); }
.compare-table thead th { font-family:'Montserrat',sans-serif; font-size:11px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,.85); padding:12px 14px; text-align:left; white-space:nowrap; }
.compare-table thead th:first-child { border-radius:8px 0 0 0; }
.compare-table thead th:last-child  { border-radius:0 8px 0 0; }
.compare-table tbody tr { border-bottom:1px solid var(--g200); transition:background .15s; }
.compare-table tbody tr:hover { background:var(--g50); }
.compare-table tbody tr:last-child { border-bottom:none; }
.compare-table tbody td { padding:11px 14px; vertical-align:middle; color:var(--g700); }
.compare-table tbody td:first-child { font-weight:700; color:var(--g900); white-space:nowrap; }
.compare-table .best td { background:#f0fdf4; }
.compare-table .best td:first-child { color:var(--green); }
.compare-table .worst td { background:#fef2f2; }
.compare-table .worst td:first-child { color:var(--red); }

.tag-g { display:inline-block; background:#d1fae5; color:#065f46; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.tag-a { display:inline-block; background:#fef3c7; color:#92400e; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.tag-r { display:inline-block; background:#fee2e2; color:#991b1b; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.tag-n { display:inline-block; background:var(--navy-xl); color:var(--navy); font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }
.tag-p { display:inline-block; background:#fdf4ff; color:#7e22ce; font-size:11px; font-weight:700; padding:2px 10px; border-radius:100px; }

/* KEY LESSON */
.key-lesson {
  background:var(--navy);
  border-radius:var(--r);
  padding:18px 20px;
  margin-top:18px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.key-lesson .kl-ico { font-size:20px; flex-shrink:0; }
.key-lesson .kl-body { font-size:13px; color:rgba(255,255,255,.85); line-height:1.7; }
.key-lesson .kl-body strong { color:#7fd6e8; font-weight:700; }

html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--g50); color:var(--g900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif; }

/* ── LAYOUT ── */
.wrap { max-width:1100px; margin:0 auto 80px; padding:0 16px; }

/* ════════════════════════════════════════════════════
   SECTION HEADER
════════════════════════════════════════════════════ */
.rel-header {
  background:#fff;
  border-radius:var(--rl);
  border:1px solid var(--g200);
  box-shadow:var(--sh);
  padding:32px 36px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
}
.rh-left { display:flex; align-items:center; gap:18px; }
.rh-icon {
  width:56px; height:56px;
  background:var(--navy);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  flex-shrink:0;
}
.rh-text h2 {
  font-size:clamp(18px,2.5vw,24px);
  font-weight:900;
  color:var(--navy);
  line-height:1.2;
  margin-bottom:5px;
}
.rh-text p { font-size:13.5px; color:var(--g500); line-height:1.6; max-width:520px; }
.rh-count {
  background:var(--navy-xl);
  border:1.5px solid #c7d2fe;
  border-radius:var(--r);
  padding:12px 20px;
  text-align:center;
  flex-shrink:0;
}
.rh-count .rc-num { font-family:'Montserrat',sans-serif; font-size:30px; font-weight:900; color:var(--navy); line-height:1; }
.rh-count .rc-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--g500); margin-top:2px; }
@media(max-width:600px) { .rel-header { padding:22px 18px; } .rh-count { display:none; } }

/* ════════════════════════════════════════════════════
   CATEGORY GROUP
════════════════════════════════════════════════════ */
.cat-group { margin-bottom:28px; }
.cat-label {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.cat-label .cl-ico {
  width:32px; height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.cat-label .cl-ico.navy  { background:var(--navy); }
.cat-label .cl-ico.green { background:var(--green); }
.cat-label .cl-ico.amber { background:var(--amber); }
.cat-label .cl-ico.red   { background:var(--red); }
.cat-label .cl-ico.indigo{ background:#4f46e5; }
.cat-label .cl-ico.teal  { background:#0891b2; }

.cat-label h3 {
  font-size:15px;
  font-weight:900;
  color:var(--g900);
  line-height:1;
}
.cat-label .cl-count {
  background:var(--g100);
  border:1px solid var(--g200);
  border-radius:100px;
  padding:2px 10px;
  font-size:11px;
  font-weight:700;
  color:var(--g500);
}

/* ════════════════════════════════════════════════════
   CALCULATOR CARDS GRID
════════════════════════════════════════════════════ */
.calc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:12px;
}
@media(max-width:480px) { .calc-grid { grid-template-columns:1fr; } }

/* ── STANDARD CALC CARD ── */
.calc-card {
  background:#fff;
  border:1.5px solid var(--g200);
  border-radius:var(--r);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  color:inherit;
  transition: box-shadow .2s, border-color .2s, transform .15s;
  position:relative;
  overflow:hidden;
}
.calc-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  border-radius:var(--r) var(--r) 0 0;
  opacity:0;
  transition: opacity .2s;
}
.calc-card:hover {
  box-shadow:var(--sh-hover);
  border-color:var(--navy-l);
  transform:translateY(-2px);
}
.calc-card:hover::before { opacity:1; }

/* accent top-border colour by category */
.cat-navy  .calc-card::before { background:var(--navy); }
.cat-green .calc-card::before { background:var(--green); }
.cat-amber .calc-card::before { background:var(--amber); }
.cat-red   .calc-card::before { background:var(--red); }
.cat-indigo .calc-card::before { background:#4f46e5; }
.cat-teal  .calc-card::before { background:#0891b2; }

.calc-card:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }

/* card icon */
.cc-icon {
  width:40px; height:40px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  flex-shrink:0;
}
.cat-navy  .cc-icon { background:var(--navy-xl); }
.cat-green .cc-icon { background:var(--green-l); }
.cat-amber .cc-icon { background:var(--amber-l); }
.cat-red   .cc-icon { background:var(--red-l); }
.cat-indigo .cc-icon { background:#eef2ff; }
.cat-teal  .cc-icon { background:#ecfeff; }

/* card text */
.cc-body {}
.cc-name {
  font-family:'Montserrat',sans-serif;
  font-size:13px;
  font-weight:800;
  color:var(--g900);
  line-height:1.3;
  margin-bottom:4px;
}
.cc-desc {
  font-size:12px;
  color:var(--g500);
  line-height:1.55;
}

/* card footer: use-when tag + arrow */
.cc-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--g100);
}
.cc-tag {
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  padding:3px 8px;
  border-radius:100px;
}
.cat-navy  .cc-tag { background:var(--navy-xl); color:var(--navy); }
.cat-green .cc-tag { background:var(--green-l); color:var(--green); }
.cat-amber .cc-tag { background:var(--amber-l); color:var(--amber); }
.cat-red   .cc-tag { background:var(--red-l); color:var(--red); }
.cat-indigo .cc-tag { background:#eef2ff; color:#4f46e5; }
.cat-teal  .cc-tag { background:#ecfeff; color:#0e7490; }

.cc-arrow {
  font-size:16px;
  color:var(--g300);
  transition:transform .2s, color .2s;
}
.calc-card:hover .cc-arrow { transform:translateX(3px); color:var(--navy); }

/* ════════════════════════════════════════════════════
   FEATURED / WIDE CARD (BRRRR + RENT VS BUY)
════════════════════════════════════════════════════ */
.calc-grid-wide {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:28px;
}
@media(max-width:600px) { .calc-grid-wide { grid-template-columns:1fr; } }

.calc-card-featured {
  background:var(--navy);
  border:none;
  border-radius:var(--rl);
  padding:22px;
  display:flex;
  gap:16px;
  text-decoration:none;
  color:inherit;
  position:relative;
  overflow:hidden;
  transition:box-shadow .2s, transform .15s;
}
.calc-card-featured::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--green),#7fd6e8);
}
.calc-card-featured:hover {
  box-shadow:var(--sh-hover);
  transform:translateY(-2px);
}
.calc-card-featured.green-feat { background:var(--green); }
.calc-card-featured.green-feat::before { background:linear-gradient(90deg,#7fd6e8,var(--amber)); }

.cfeat-icon {
  width:52px; height:52px;
  background:rgba(255,255,255,.12);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  flex-shrink:0;
}
.cfeat-body {}
.cfeat-eyebrow {
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,.5);
  margin-bottom:5px;
}
.cfeat-name {
  font-family:'Montserrat',sans-serif;
  font-size:16px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
  margin-bottom:6px;
}
.cfeat-desc { font-size:13px; color:rgba(255,255,255,.75); line-height:1.6; margin-bottom:12px; }
.cfeat-cta {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:#7fd6e8;
}
.calc-card-featured.green-feat .cfeat-cta { color:#fde68a; }
.cfeat-cta::after { content:'→'; transition:transform .2s; }
.calc-card-featured:hover .cfeat-cta::after { transform:translateX(4px); }

/* ════════════════════════════════════════════════════
   BOTTOM BROWSE STRIP
════════════════════════════════════════════════════ */
.browse-strip {
  background:#fff;
  border:1px solid var(--g200);
  border-radius:var(--rl);
  padding:24px 28px;
  box-shadow:var(--sh);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.bs-left h3 { font-size:15px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.bs-left p  { font-size:13px; color:var(--g500); }
.bs-right { display:flex; gap:10px; flex-wrap:wrap; }
.bs-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  border-radius:8px;
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:opacity .2s, transform .15s;
}
.bs-btn:hover { opacity:.88; transform:translateY(-1px); }
.bs-btn.primary { background:var(--navy); color:#fff; }
.bs-btn.secondary { background:var(--g100); color:var(--g700); border:1px solid var(--g200); }
@media(max-width:560px) { .browse-strip { flex-direction:column; align-items:flex-start; } }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--g50); color:var(--g900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif; }
.wrap { max-width:1100px; margin:0 auto 80px; padding:0 16px; }

/* ════════════════════════════
   DISCLAIMER BANNER (TOP)
════════════════════════════ */
.disc-banner {
  background:var(--amber-l);
  border:1.5px solid #fde68a;
  border-left:5px solid var(--amber);
  border-radius:var(--rl);
  padding:20px 28px;
  margin-bottom:24px;
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.disc-banner .db-ico { font-size:26px; flex-shrink:0; line-height:1; margin-top:2px; }
.disc-banner .db-body { flex:1; }
.disc-banner .db-body strong { font-family:'Montserrat',sans-serif; font-size:14px; font-weight:900; color:#92400e; display:block; margin-bottom:5px; }
.disc-banner .db-body p { font-size:13.5px; color:#78350f; line-height:1.7; }
@media(max-width:560px) { .disc-banner { padding:16px 18px; } }

/* ════════════════════════════
   MAIN CARD SHELL
════════════════════════════ */
.main-card {
  background:#fff;
  border-radius:var(--rl);
  border:1px solid var(--g200);
  box-shadow:var(--sh);
  overflow:hidden;
  margin-bottom:24px;
}

/* ── CARD HEADER ── */
.card-header {
  background:var(--navy-d);
  padding:32px 36px;
  position:relative;
  overflow:hidden;
}
.card-header::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#001a45 0%,#002868 70%,#003a8c 100%);
  z-index:0;
}
.card-header::after {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:26px 26px;
  z-index:1;
}
.ch-inner { position:relative; z-index:2; }
.ch-eyebrow { font-size:10px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:10px; }
.card-header h2 { font-size:clamp(18px,2.8vw,26px); font-weight:900; color:#fff; line-height:1.2; margin-bottom:8px; }
.card-header p { font-size:14px; color:rgba(255,255,255,.72); line-height:1.7; max-width:640px; }
.ch-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.ch-badge {
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:100px;
  padding:4px 14px;
  font-size:11px;
  font-weight:700;
  color:rgba(255,255,255,.85);
  display:flex;
  align-items:center;
  gap:5px;
}
.ch-badge.g { background:rgba(0,135,90,.25); border-color:rgba(110,231,183,.4); color:#6ee7b7; }
@media(max-width:560px) { .card-header { padding:24px 18px; } }

/* ── CARD BODY ── */
.card-body { padding:36px; }
@media(max-width:560px) { .card-body { padding:22px 18px; } }

/* ════════════════════════════
   SECTION DIVIDER
════════════════════════════ */
.s-divider { border:none; border-top:2px solid var(--g100); margin:32px 0; }

/* ════════════════════════════
   SECTION LABELS
════════════════════════════ */
.sec-label {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.sec-label .sl-ico {
  width:34px; height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  flex-shrink:0;
}
.sec-label h3 { font-size:16px; font-weight:900; color:var(--navy); line-height:1; }

/* ════════════════════════════
   BODY TEXT
════════════════════════════ */
.body-text { font-size:14px; color:var(--g700); line-height:1.85; margin-bottom:16px; }
.body-text strong { color:var(--g900); font-weight:700; }
.body-text a { color:var(--navy); font-weight:600; text-decoration:none; }
.body-text a:hover { text-decoration:underline; }

/* ════════════════════════════
   NOT LIST (what we are NOT)
════════════════════════════ */
.not-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:18px 0;
}
@media(max-width:560px) { .not-grid { grid-template-columns:1fr; } }
.not-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--red-l);
  border:1px solid #fca5a5;
  border-radius:9px;
  padding:12px 14px;
  font-size:13px;
  color:#7f1d1d;
  line-height:1.55;
}
.not-item .ni-ico { font-size:16px; flex-shrink:0; }
.not-item strong { font-weight:700; color:#991b1b; }

/* ════════════════════════════
   IS LIST (what we ARE)
════════════════════════════ */
.is-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:18px 0;
}
@media(max-width:560px) { .is-grid { grid-template-columns:1fr; } }
.is-item {
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:var(--green-l);
  border:1px solid #a7f3d0;
  border-radius:9px;
  padding:12px 14px;
  font-size:13px;
  color:#064e3b;
  line-height:1.55;
}
.is-item .ii-ico { font-size:16px; flex-shrink:0; }
.is-item strong { font-weight:700; color:var(--green); }

/* ════════════════════════════
   CALLOUT BOXES
════════════════════════════ */
.callout {
  border-radius:10px;
  padding:16px 20px;
  margin:18px 0;
  display:flex;
  gap:14px;
  align-items:flex-start;
  border:1px solid;
}
.callout.amber { background:var(--amber-l); border-color:#fde68a; }
.callout.navy  { background:var(--navy-xl); border-color:#c7d2fe; }
.callout.green { background:var(--green-l); border-color:#a7f3d0; }
.callout .c-ico { font-size:20px; flex-shrink:0; line-height:1.2; }
.callout .c-body { font-size:13.5px; line-height:1.75; }
.callout.amber .c-body { color:#78350f; }
.callout.navy  .c-body { color:var(--navy-d); }
.callout.green .c-body { color:#065f46; }
.callout .c-body strong { font-weight:700; display:block; margin-bottom:3px; }

/* ════════════════════════════
   FORMULA STANDARD TABLE
════════════════════════════ */
.standard-table { width:100%; border-collapse:collapse; font-size:13px; margin:16px 0; }
.standard-table thead tr { background:var(--navy); }
.standard-table thead th { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,.85); padding:10px 14px; text-align:left; }
.standard-table thead th:first-child { border-radius:7px 0 0 0; }
.standard-table thead th:last-child  { border-radius:0 7px 0 0; }
.standard-table tbody tr { border-bottom:1px solid var(--g200); }
.standard-table tbody tr:last-child { border-bottom:none; }
.standard-table tbody tr:hover { background:var(--g50); }
.standard-table tbody td { padding:10px 14px; color:var(--g700); vertical-align:middle; line-height:1.55; }
.standard-table tbody td:first-child { font-weight:700; color:var(--g900); }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tag-g { display:inline-block; background:#d1fae5; color:#065f46; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
.tag-a { display:inline-block; background:#fef3c7; color:#92400e; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }

/* ════════════════════════════
   GOV RESOURCES CARD
════════════════════════════ */
.gov-card {
  background:#fff;
  border-radius:var(--rl);
  border:1px solid var(--g200);
  box-shadow:var(--sh);
  overflow:hidden;
  margin-bottom:24px;
}
.gov-header {
  background:linear-gradient(135deg,#003a8c,#002868);
  padding:24px 28px;
  display:flex;
  align-items:center;
  gap:16px;
}
.gh-seal { font-size:36px; }
.gh-text h3 { font-family:'Montserrat',sans-serif; font-size:17px; font-weight:900; color:#fff; margin-bottom:4px; }
.gh-text p { font-size:13px; color:rgba(255,255,255,.72); line-height:1.6; }
.gov-body { padding:24px 28px; }
@media(max-width:560px) { .gov-header { padding:18px 18px; } .gov-body { padding:18px 18px; } }

.gov-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:14px;
}
@media(max-width:560px) { .gov-grid { grid-template-columns:1fr; } }
.gov-grid.three { grid-template-columns:repeat(3,1fr); }
@media(max-width:680px) { .gov-grid.three { grid-template-columns:1fr 1fr; } }
@media(max-width:420px) { .gov-grid.three { grid-template-columns:1fr; } }

.gov-link-card {
  display:flex;
  flex-direction:column;
  gap:8px;
  background:var(--g50);
  border:1.5px solid var(--g200);
  border-radius:10px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  transition:box-shadow .2s, border-color .2s, transform .15s;
  position:relative;
}
.gov-link-card:hover {
  box-shadow:0 6px 24px rgba(0,40,104,.1);
  border-color:var(--navy-l);
  transform:translateY(-2px);
}
.gov-link-card::after {
  content:'↗';
  position:absolute;
  top:12px; right:12px;
  font-size:14px;
  color:var(--g300);
  transition:color .2s;
}
.gov-link-card:hover::after { color:var(--navy); }

.glc-top { display:flex; align-items:center; gap:10px; }
.glc-flag {
  width:36px; height:36px;
  border-radius:8px;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex-shrink:0;
}
.glc-flag.irs    { background:#003087; }
.glc-flag.hud    { background:#003087; }
.glc-flag.cfpb   { background:#005e5d; }
.glc-flag.fhfa   { background:#1d3461; }
.glc-flag.sec    { background:#003087; }
.glc-flag.census { background:#003087; }
.glc-flag.ssa    { background:#003087; }
.glc-flag.fdic   { background:#154360; }
.glc-flag.bls    { background:#1a3a5c; }
.glc-flag.gsa    { background:#2c3e50; }

.glc-agency { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:900; color:var(--navy); line-height:1.2; }
.glc-name   { font-size:12px; font-weight:700; color:var(--g900); line-height:1.35; margin-top:1px; }
.glc-desc   { font-size:12px; color:var(--g500); line-height:1.6; }
.glc-url    {
  font-size:11px;
  font-weight:700;
  color:var(--navy);
  background:var(--navy-xl);
  padding:3px 10px;
  border-radius:100px;
  display:inline-block;
  text-decoration:none;
  width:fit-content;
}

/* ════════════════════════════
   EDITORIAL TRANSPARENCY
════════════════════════════ */
.editorial-card {
  background:#fff;
  border-radius:var(--rl);
  border:1px solid var(--g200);
  box-shadow:var(--sh);
  overflow:hidden;
  margin-bottom:24px;
}
.ec-header {
  background:var(--green);
  padding:22px 28px;
  display:flex;
  align-items:center;
  gap:14px;
}
.ec-header .eh-ico { font-size:28px; }
.ec-header h3 { font-family:'Montserrat',sans-serif; font-size:17px; font-weight:900; color:#fff; margin-bottom:3px; }
.ec-header p  { font-size:13px; color:rgba(255,255,255,.8); }
.ec-body { padding:28px; }
@media(max-width:560px) { .ec-header { padding:16px 18px; } .ec-body { padding:18px; } }

.process-steps { display:flex; flex-direction:column; gap:12px; margin:18px 0; }
.process-step {
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:10px;
  padding:14px 16px;
  counter-increment:step;
}
.ps-num {
  font-family:'Montserrat',sans-serif;
  font-size:12px;
  font-weight:900;
  color:#fff;
  background:var(--green);
  width:26px; height:26px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ps-content {}
.ps-title { font-weight:800; font-size:14px; color:var(--g900); margin-bottom:4px; }
.ps-detail { font-size:13px; color:var(--g600); line-height:1.65; }
.ps-detail strong { color:var(--g900); font-weight:700; }

/* UPDATE BADGE ROW */
.update-row {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
}
.up-badge {
  background:var(--g100);
  border:1px solid var(--g200);
  border-radius:8px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.up-badge .ub-ico { font-size:20px; flex-shrink:0; }
.up-badge .ub-text { }
.up-badge .ub-text strong { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800; color:var(--g900); display:block; line-height:1.2; }
.up-badge .ub-text span { font-size:11px; color:var(--g500); }

/* INDEPENDENCE STATEMENT */
.independence-box {
  background:var(--navy);
  border-radius:12px;
  padding:22px 24px;
  margin:20px 0;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.ib-ico { font-size:24px; flex-shrink:0; }
.ib-text { font-size:13.5px; color:rgba(255,255,255,.85); line-height:1.75; }
.ib-text strong { color:#7fd6e8; font-weight:700; }

/* ════════════════════════════
   LEGAL FOOTER BAR
════════════════════════════ */
.legal-footer {
  background:var(--navy-d);
  border-radius:var(--rl);
  padding:24px 28px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.lf-left { display:flex; align-items:center; gap:12px; }
.lf-logo { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:900; color:#fff; }
.lf-logo span { color:#7fd6e8; }
.lf-divider { width:1px; height:24px; background:rgba(255,255,255,.2); }
.lf-copy { font-size:12px; color:rgba(255,255,255,.55); }
.lf-links { display:flex; flex-wrap:wrap; gap:12px; }
.lf-links a { font-size:12px; color:rgba(255,255,255,.65); text-decoration:none; font-weight:600; transition:color .2s; }
.lf-links a:hover { color:#7fd6e8; text-decoration:underline; }
@media(max-width:560px) { .legal-footer { flex-direction:column; align-items:flex-start; } .lf-left { flex-direction:column; align-items:flex-start; } .lf-divider { display:none; } }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--g50); color:var(--g900); font-size:14px; line-height:1.6; }
h1,h2,h3,h4 { font-family:'Montserrat',sans-serif; }
.wrap { max-width:1100px; margin:0 auto 80px; padding:0 16px; }

/* ════════════════════════════
   SECTION HEADER CARD
════════════════════════════ */
.tips-header {
  background:var(--navy-d);
  border-radius:var(--rl);
  padding:40px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
}
.tips-header::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg,#001a45 0%,#002868 55%,#003a8c 100%);
  z-index:0;
}
.tips-header::after {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:28px 28px;
  z-index:1;
}
.th-inner { position:relative; z-index:2; }
.th-eyebrow { font-size:10px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
.tips-header h2 { font-size:clamp(22px,3.5vw,34px); font-weight:900; color:#fff; line-height:1.2; margin-bottom:10px; }
.tips-header h2 span { color:#fcd34d; }
.tips-header p  { font-size:15px; color:rgba(255,255,255,.72); max-width:660px; line-height:1.7; margin-bottom:22px; }
.th-stats { display:flex; flex-wrap:wrap; gap:12px; }
.th-stat {
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:10px;
}
.th-stat .ts-ico { font-size:18px; }
.th-stat .ts-text strong { font-family:'Montserrat',sans-serif; font-size:15px; font-weight:900; color:#fcd34d; display:block; line-height:1; }
.th-stat .ts-text span  { font-size:11px; color:rgba(255,255,255,.6); }
@media(max-width:560px) { .tips-header { padding:26px 18px; } }

/* ════════════════════════════
   TIP CARD — MAIN
════════════════════════════ */
.tip-card {
  background:#fff;
  border-radius:var(--rl);
  border:1px solid var(--g200);
  box-shadow:var(--sh);
  margin-bottom:24px;
  overflow:hidden;
  transition:box-shadow .25s;
}
.tip-card:hover { box-shadow:var(--sh-hover); }

/* — TIP HEADER BAND — */
.tip-band {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:0;
}
@media(max-width:600px) { .tip-band { grid-template-columns:auto 1fr; } .tb-right { display:none; } }

/* Number badge */
.tb-num {
  width:72px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:24px 0;
  flex-shrink:0;
}
.tb-num .tn-label { font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:2px; }
.tb-num .tn-num   { font-family:'Montserrat',sans-serif; font-size:38px; font-weight:900; color:#fff; line-height:1; }

/* Tip card accent colours */
.tip-card:nth-child(2) .tb-num { background:var(--navy); }
.tip-card:nth-child(3) .tb-num { background:var(--green); }
.tip-card:nth-child(4) .tb-num { background:var(--amber); }
.tip-card:nth-child(5) .tb-num { background:#4f46e5; }
.tip-card:nth-child(6) .tb-num { background:#0891b2; }

/* Headline area */
.tb-center {
  padding:24px 24px 24px 20px;
  border-bottom:1px solid var(--g200);
}
.tc-eyebrow { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; }
.tip-card:nth-child(2) .tc-eyebrow { color:var(--navy); }
.tip-card:nth-child(3) .tc-eyebrow { color:var(--green); }
.tip-card:nth-child(4) .tc-eyebrow { color:var(--amber); }
.tip-card:nth-child(5) .tc-eyebrow { color:#4f46e5; }
.tip-card:nth-child(6) .tc-eyebrow { color:#0891b2; }

.tb-center h3 { font-size:clamp(16px,2.2vw,21px); font-weight:900; color:var(--g900); line-height:1.2; margin-bottom:6px; }
.tb-center .tc-sub { font-size:13.5px; color:var(--g500); line-height:1.6; max-width:600px; }

/* Right side icon block */
.tb-right {
  padding:24px 28px;
  border-left:1px solid var(--g200);
  border-bottom:1px solid var(--g200);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:46px;
  min-width:90px;
  height:100%;
}

/* — TIP BODY — */
.tip-body { padding:28px 32px; }
@media(max-width:560px) { .tip-body { padding:20px 18px; } }
@media(max-width:560px) { .tb-center { padding:18px 16px; } }

.body-text { font-size:14px; color:var(--g700); line-height:1.85; margin-bottom:16px; }
.body-text strong { color:var(--g900); font-weight:700; }
.body-text a { color:var(--navy); font-weight:600; text-decoration:none; }
.body-text a:hover { text-decoration:underline; }

/* ── FORMULA BOX ── */
.formula-box {
  background:var(--navy);
  border-radius:10px;
  padding:18px 22px;
  margin:18px 0;
  position:relative;
  overflow:hidden;
}
.formula-box::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--green),#7fd6e8); }
.formula-box .fb-lbl { font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:8px; }
.formula-box .fb-formula { font-family:'Montserrat',sans-serif; font-size:clamp(13px,2vw,17px); font-weight:900; color:#7fd6e8; line-height:1.4; margin-bottom:10px; }
.formula-box .fb-vars { display:flex; flex-wrap:wrap; gap:6px; }
.formula-box .fb-var { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:5px; padding:3px 10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.8); }

/* ── CALLOUT ── */
.callout {
  border-radius:10px;
  padding:15px 18px;
  margin:16px 0;
  display:flex;
  gap:12px;
  align-items:flex-start;
  border:1px solid;
}
.callout.navy  { background:var(--navy-xl); border-color:#c7d2fe; }
.callout.green { background:var(--green-l); border-color:#a7f3d0; }
.callout.amber { background:var(--amber-l); border-color:#fde68a; }
.callout.red   { background:var(--red-l);   border-color:#fca5a5; }
.callout.indigo{ background:#eef2ff; border-color:#c7d2fe; }
.callout .c-ico { font-size:19px; flex-shrink:0; line-height:1.3; }
.callout .c-body { font-size:13.5px; line-height:1.75; }
.callout.navy   .c-body { color:var(--navy-d); }
.callout.green  .c-body { color:#065f46; }
.callout.amber  .c-body { color:#78350f; }
.callout.red    .c-body { color:#7f1d1d; }
.callout.indigo .c-body { color:#312e81; }
.callout .c-body strong { font-weight:700; }

/* ── ACTION CHECKLIST ── */
.action-list {
  counter-reset: action;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:18px 0;
}
.action-item {
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--g50);
  border:1px solid var(--g200);
  border-radius:9px;
  padding:12px 14px;
}
.action-item .ai-ico {
  width:24px; height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  color:#fff;
  flex-shrink:0;
}
.tip-card:nth-child(2) .ai-ico { background:var(--navy); }
.tip-card:nth-child(3) .ai-ico { background:var(--green); }
.tip-card:nth-child(4) .ai-ico { background:var(--amber); }
.tip-card:nth-child(5) .ai-ico { background:#4f46e5; }
.tip-card:nth-child(6) .ai-ico { background:#0891b2; }

.action-item .ai-text { font-size:13px; color:var(--g700); line-height:1.65; }
.action-item .ai-text strong { color:var(--g900); font-weight:700; }

/* ── TWO-COLUMN LAYOUT ── */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:18px 0; }
@media(max-width:580px) { .two-col { grid-template-columns:1fr; } }
.col-box { background:var(--g50); border:1px solid var(--g200); border-radius:9px; padding:16px; }
.col-box h4 { font-family:'Montserrat',sans-serif; font-size:12px; font-weight:800; color:var(--navy); margin-bottom:10px; text-transform:uppercase; letter-spacing:0.5px; }
.col-box ul { list-style:none; display:flex; flex-direction:column; gap:7px; }
.col-box ul li { font-size:12.5px; color:var(--g700); display:flex; gap:8px; align-items:flex-start; line-height:1.55; }
.col-box ul li::before { content:'✓'; color:var(--green); font-weight:900; flex-shrink:0; }
.col-box ul li.bad::before { content:'✗'; color:var(--red); }

/* ── SENSITIVITY TABLE ── */
.sens-table { width:100%; border-collapse:collapse; font-size:12.5px; text-align:center; margin:16px 0; }
.sens-table th { background:var(--g100); font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:var(--g500); padding:9px 10px; border:1px solid var(--g200); }
.sens-table th.axis { background:var(--navy); color:#fff; }
.sens-table td { padding:8px 10px; border:1px solid var(--g200); font-weight:600; color:var(--g700); }
.sens-table td:first-child { background:var(--g100); font-family:'Montserrat',sans-serif; font-weight:800; color:var(--g900); text-align:left; }
.sens-table td.hi  { background:#d1fae5; color:#065f46; font-weight:800; }
.sens-table td.med { background:#fef3c7; color:#92400e; font-weight:700; }
.sens-table td.lo  { background:#fee2e2; color:#991b1b; font-weight:700; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── REAL NUMBER DEMO ── */
.number-demo {
  background:var(--navy);
  border-radius:12px;
  padding:22px 24px;
  margin:18px 0;
  position:relative;
  overflow:hidden;
}
.number-demo::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,var(--amber),#fcd34d,var(--green)); }
.nd-title { font-size:10px; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.45); margin-bottom:14px; }
.nd-scenario { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:14px 16px; font-size:13px; color:rgba(255,255,255,.82); line-height:1.75; margin-bottom:14px; }
.nd-scenario strong { color:#fcd34d; }
.nd-row { display:flex; justify-content:space-between; align-items:center; padding:8px 14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:7px; margin-bottom:6px; }
.nd-row:last-child { margin-bottom:0; }
.nd-row span { font-size:12.5px; color:rgba(255,255,255,.7); font-weight:500; }
.nd-row strong { font-family:'Montserrat',sans-serif; font-size:15px; font-weight:900; }
.nd-row strong.good { color:#6ee7b7; }
.nd-row strong.warn { color:#fcd34d; }
.nd-row strong.bad  { color:#fca5a5; }

/* ── DIVIDER ── */
.tip-divider { border:none; border-top:2px solid var(--g100); margin:22px 0; }

/* ── MINI BADGE ROW ── */
.badge-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.mini-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:100px;
  border:1px solid;
}
.mb-g { background:var(--green-l); border-color:#a7f3d0; color:#065f46; }
.mb-a { background:var(--amber-l); border-color:#fde68a; color:#92400e; }
.mb-n { background:var(--navy-xl); border-color:#c7d2fe; color:var(--navy); }
.mb-r { background:var(--red-l); border-color:#fca5a5; color:#991b1b; }
.mb-i { background:#eef2ff; border-color:#c7d2fe; color:#4338ca; }

/* ── CALCULATOR LINK CTA ── */
.calc-cta {
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--navy-xl);
  border:1.5px solid #c7d2fe;
  border-radius:10px;
  padding:14px 18px;
  margin-top:20px;
  text-decoration:none;
  transition:background .2s, box-shadow .2s;
}
.calc-cta:hover { background:#d6dffb; box-shadow:0 4px 16px rgba(0,40,104,.1); }
.calc-cta .cta-ico { font-size:22px; flex-shrink:0; }
.calc-cta .cta-text strong { font-family:'Montserrat',sans-serif; font-size:13px; font-weight:800; color:var(--navy); display:block; margin-bottom:2px; }
.calc-cta .cta-text span { font-size:12px; color:var(--g500); }
.calc-cta .cta-arrow { margin-left:auto; font-size:18px; color:var(--navy); font-weight:900; transition:transform .2s; }
.calc-cta:hover .cta-arrow { transform:translateX(4px); }

/* ── QUICK REFERENCE TABLE ── */
.summary-card {
  background:#fff;
  border:1px solid var(--g200);
  border-radius:var(--rl);
  box-shadow:var(--sh);
  padding:28px 32px;
  margin-bottom:24px;
}
@media(max-width:560px) { .summary-card { padding:20px 16px; } }
.sc-title { font-family:'Montserrat',sans-serif; font-size:16px; font-weight:900; color:var(--navy); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.ref-table { width:100%; border-collapse:collapse; font-size:13px; }
.ref-table thead tr { background:var(--navy); }
.ref-table thead th { font-family:'Montserrat',sans-serif; font-size:10px; font-weight:800; letter-spacing:0.8px; text-transform:uppercase; color:rgba(255,255,255,.85); padding:10px 14px; text-align:left; }
.ref-table thead th:first-child { border-radius:7px 0 0 0; }
.ref-table thead th:last-child  { border-radius:0 7px 0 0; }
.ref-table tbody tr { border-bottom:1px solid var(--g200); transition:background .15s; }
.ref-table tbody tr:last-child { border-bottom:none; }
.ref-table tbody tr:hover { background:var(--g50); }
.ref-table tbody td { padding:10px 14px; color:var(--g700); vertical-align:middle; line-height:1.5; }
.ref-table tbody td:first-child { font-weight:800; color:var(--g900); }
.tag-g { display:inline-block; background:#d1fae5; color:#065f46; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
.tag-a { display:inline-block; background:#fef3c7; color:#92400e; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
.tag-r { display:inline-block; background:#fee2e2; color:#991b1b; font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
.tag-n { display:inline-block; background:var(--navy-xl); color:var(--navy); font-size:10px; font-weight:700; padding:2px 8px; border-radius:100px; }
/* ===== FAQ SECTION WRAPPER ===== */
.faq-section {
  max-width: 980px;
  margin: 60px auto 80px;
  padding: 0 16px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0f172a;
}

.faq-header h2 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 900;
  color: #002868;
  margin-bottom: 6px;
}

.faq-header p {
  font-size: 14px;
  color: #64748b;
  max-width: 640px;
  line-height: 1.7;
}

/* ===== FAQ LIST & ITEM ===== */
.faq-list {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* ===== FAQ QUESTION BUTTON ===== */
.faq-question {
  width: 100%;
  background: #f8fafc;
  border: none;
  outline: none;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
  border-bottom: 1px solid #e2e8f0;
}

.faq-question:hover {
  background: #eef2ff;
}

.faq-q-label {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #002868;
  background: #e0e7ff;
  border-radius: 999px;
  padding: 4px 10px;
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.faq-q-icon {
  font-size: 18px;
  font-weight: 700;
  color: #94a3b8;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Expanded state class you can toggle via JS */
.faq-item.is-open .faq-question {
  background: #e0e7ff;
  border-bottom-color: #e5e7eb;
}

.faq-item.is-open .faq-q-icon {
  transform: rotate(45deg); /* turns + into × */
  color: #002868;
}

/* ===== FAQ ANSWER CONTENT ===== */
.faq-answer {
  padding: 14px 18px 16px;
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  display: none; /* default collapsed */
}

.faq-answer p + p {
  margin-top: 6px;
}

/* When open, show the answer */
.faq-item.is-open .faq-answer {
  display: block;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .faq-section {
    margin-top: 40px;
    margin-bottom: 60px;
  }

  .faq-question {
    padding: 12px 14px;
  }

  .faq-answer {
    padding: 12px 14px 14px;
  }
}
/* ============================================================
   MAIN CALCULATOR MOBILE FIX
   ============================================================ */

/* 1. Make the main calculator stack cleanly on tablets/phones */
@media (max-width: 960px) {
  .wrap .grid-2 {
    display: block !important;           /* stack instead of grid */
  }

  .wrap .grid-2 > * {
    width: 100% !important;              /* each child full width */
  }

  /* Add spacing between the inputs card and results card */
  .wrap .grid-2 > .card + .res-panel,
  .wrap .grid-2 > .res-panel {
    margin-top: 20px;
  }
}

/* 2. Ensure the results panel fits and does not get squashed */
@media (max-width: 960px) {
  .wrap .res-panel {
    padding: 20px 16px !important;
    border-radius: 14px;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* KPI + mini KPIs */
  .wrap .kpi-main .val {
    font-size: 32px !important;
  }

  .wrap .mgrid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
}

/* 3. Prevent sections from becoming too thin on narrow screens */
@media (max-width: 640px) {
  /* Let the main wrap use full width with a bit of side padding */
  .wrap {
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card {
    padding: 22px 18px !important;
  }

  /* Text sections (formulas, steps, FAQs) stay one comfortable column */
  .two-col,
  .case-main-grid,
  .insight-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 4. Global guard against horizontal scroll */
@media (max-width: 960px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}