:root,[data-theme="light"]{
  --color-bg:#f7f6f2;--color-surface:#ffffff;--color-surface-2:#f9f8f5;
  --color-surface-offset:#f3f0ec;--color-surface-dynamic:#e6e4df;
  --color-divider:#dcd9d5;--color-border:#d4d1ca;
  --color-text:#1a1814;--color-text-muted:#5c5a55;--color-text-faint:#a8a5a0;
  --color-text-inverse:#f9f8f4;
  --color-primary:#002868;--color-primary-hover:#001d4d;--color-primary-active:#001238;
  --color-primary-highlight:#dde4f0;
  --color-green:#027A48;--color-green-hover:#015c37;--color-green-highlight:#d1fae5;
  --color-red:#BF0A30;--color-red-hover:#96071e;--color-red-highlight:#ffe4e9;
  --color-gold:#b45309;--color-gold-highlight:#fef3c7;
  --color-success:#027A48;--color-warning:#b45309;--color-error:#BF0A30;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --shadow-sm:0 1px 2px oklch(0.2 0.01 80/0.06);
  --shadow-md:0 4px 12px oklch(0.2 0.01 80/0.08);
  --shadow-lg:0 12px 32px oklch(0.2 0.01 80/0.12);
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);
  --text-sm:clamp(.875rem,.8rem + .35vw,1rem);
  --text-base:clamp(1rem,.95rem + .25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --font-display:"DM Serif Display",Georgia,serif;
  --font-body:"Inter","Helvetica Neue",sans-serif;
  --content-wide:1200px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:4rem}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);line-height:1.6}
img,svg{display:block;max-width:100%}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty;max-width:72ch}
::selection{background:oklch(from var(--color-primary) l c h/.25);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;border-radius:var(--radius-sm)}
a,button,[role=button],input,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ── LAYOUT ── */
.app-header{background:var(--color-primary);color:var(--color-text-inverse);padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:var(--shadow-md)}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--color-text-inverse)}
.logo-mark svg{width:32px;height:32px}
.logo-text{font-family:var(--font-display);font-size:1.1rem;letter-spacing:-.01em;line-height:1.2}
.logo-sub{font-size:var(--text-xs);opacity:.75;font-weight:400;display:block}
.header-actions{display:flex;align-items:center;gap:.75rem}
.theme-btn{width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;color:var(--color-text-inverse);opacity:.85;border:1px solid rgba(255,255,255,.2)}
.theme-btn:hover{opacity:1;background:rgba(255,255,255,.1)}

.page-hero{background:linear-gradient(135deg,var(--color-primary) 0%,#003380 100%);color:#fff;padding:2.5rem 1.5rem 2rem;text-align:center}
.page-hero h1{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.5rem}
.page-hero p{font-size:var(--text-sm);opacity:.85;max-width:55ch;margin:0 auto}

.main{max-width:var(--content-wide);margin:0 auto;padding:1.5rem 1rem 4rem}

/* ── TABS ── */
.tab-nav{display:flex;gap:.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:.3rem;margin-bottom:1.5rem;overflow-x:auto}
.tab-btn{flex:1;min-width:max-content;padding:.5rem 1rem;border-radius:calc(var(--radius-lg) - .15rem);font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);white-space:nowrap;transition:all var(--transition)}
.tab-btn.active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm)}
.tab-btn:hover:not(.active){background:var(--color-surface-offset);color:var(--color-text)}
.tab-panel{display:none}.tab-panel.active{display:block}

/* ── SECTION CARD ── */
.section-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm)}
.section-header{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--color-divider)}
.section-icon{width:32px;height:32px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-blue{background:var(--color-primary-highlight);color:var(--color-primary)}
.icon-green{background:var(--color-green-highlight);color:var(--color-green)}
.icon-red{background:var(--color-red-highlight);color:var(--color-red)}
.icon-gold{background:var(--color-gold-highlight);color:var(--color-gold)}
.section-title{font-size:var(--text-base);font-weight:600;color:var(--color-text)}
.section-subtitle{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── FORM GRID ── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.875rem}
.form-grid-2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.field-row{display:flex;align-items:stretch;border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface-2);transition:border-color var(--transition)}
.field-row:focus-within{border-color:var(--color-primary)}
.field-row input,.field-row select{border:none;background:transparent;padding:.55rem .75rem;flex:1;font-size:var(--text-sm);min-width:0;outline:none}
.field-prefix,.field-suffix{padding:.55rem .6rem;background:var(--color-surface-offset);color:var(--color-text-muted);font-size:var(--text-xs);font-weight:500;display:flex;align-items:center;white-space:nowrap;border-right:1px solid var(--color-border)}
.field-suffix{border-right:none;border-left:1px solid var(--color-border)}
.field-hint{font-size:var(--text-xs);color:var(--color-text-faint)}

/* ── REHAB TABLE ── */
.rehab-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.rehab-table th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);padding:.4rem .6rem;border-bottom:2px solid var(--color-divider);text-align:left;font-weight:600}
.rehab-table td{padding:.35rem .6rem;border-bottom:1px solid var(--color-divider)}
.rehab-table input{border:none;background:transparent;width:100%;font-size:var(--text-sm);padding:.2rem .3rem;outline:none;color:var(--color-text)}
.rehab-table input:focus{background:var(--color-primary-highlight);border-radius:var(--radius-sm)}
.rehab-total-row td{font-weight:700;color:var(--color-text);background:var(--color-surface-offset);font-size:var(--text-sm)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.25rem;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--color-primary);color:#fff;border:none}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-success{background:var(--color-green);color:#fff;border:none}
.btn-success:hover{background:var(--color-green-hover)}
.btn-outline{background:transparent;border:1.5px solid var(--color-border);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}
.btn-sm{padding:.4rem .9rem;font-size:var(--text-xs)}
.btn-lg{padding:.8rem 2rem;font-size:var(--text-base);border-radius:var(--radius-lg)}
.calc-actions{display:flex;flex-wrap:wrap;gap:.75rem;padding-top:.5rem}

/* ── KPI GRID ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.875rem;margin-bottom:1.5rem}
.kpi-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem 1.1rem;box-shadow:var(--shadow-sm)}
.kpi-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);font-weight:500;margin-bottom:.35rem}
.kpi-value{font-size:1.5rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--color-text)}
.kpi-value.green{color:var(--color-green)}
.kpi-value.red{color:var(--color-red)}
.kpi-value.blue{color:var(--color-primary)}
.kpi-value.gold{color:var(--color-gold)}
.kpi-sub{font-size:var(--text-xs);color:var(--color-text-faint);margin-top:.25rem}

/* ── SCENARIO COMPARE ── */
.scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;margin-bottom:1.25rem}
@media(max-width:640px){.scenario-grid{grid-template-columns:1fr}}
.scenario-card{background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;text-align:center;position:relative}
.scenario-card.winner{border-color:var(--color-green)}
.scenario-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--color-green);color:#fff;font-size:10px;font-weight:700;padding:.2rem .6rem;border-radius:var(--radius-full);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.scenario-name{font-weight:700;font-size:var(--text-sm);color:var(--color-text);margin-bottom:.5rem}
.scenario-ltv{font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:.75rem}
.scenario-rows .sr{display:flex;justify-content:space-between;padding:.25rem 0;border-bottom:1px solid var(--color-divider);font-size:var(--text-xs)}
.scenario-rows .sr:last-child{border-bottom:none}
.sr-label{color:var(--color-text-muted)}
.sr-val{font-weight:600;font-variant-numeric:tabular-nums}
.sr-val.green{color:var(--color-green)}.sr-val.red{color:var(--color-red)}

/* ── DSCR METER ── */
.dscr-meter-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.dscr-gauge{flex:0 0 120px;text-align:center}
.dscr-number{font-size:2.5rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dscr-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.dscr-bar-wrap{flex:1;min-width:200px}
.dscr-bar-track{height:10px;background:var(--color-surface-dynamic);border-radius:var(--radius-full);overflow:hidden;margin:.5rem 0}
.dscr-bar-fill{height:100%;border-radius:var(--radius-full);transition:width .6s cubic-bezier(.16,1,.3,1),background .3s}
.dscr-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--color-text-faint)}
.dscr-info{flex:1;min-width:180px}
.dscr-status{font-size:var(--text-sm);font-weight:700;margin-bottom:.3rem}
.dscr-detail{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── RULE70 BADGE ── */
.rule70-wrap{display:flex;align-items:center;gap:1.25rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;flex-wrap:wrap}
.rule70-icon{width:48px;height:48px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}
.rule70-pass{background:var(--color-green-highlight);color:var(--color-green)}
.rule70-fail{background:var(--color-red-highlight);color:var(--color-red)}
.rule70-body{flex:1}
.rule70-title{font-weight:700;font-size:var(--text-sm);margin-bottom:.2rem}
.rule70-detail{font-size:var(--text-xs);color:var(--color-text-muted)}

/* ── REPEAT CYCLES ── */
.repeat-table{width:100%;font-size:var(--text-xs);border-collapse:collapse}
.repeat-table th{background:var(--color-primary);color:#fff;padding:.5rem .6rem;text-align:left;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em}
.repeat-table td{padding:.45rem .6rem;border-bottom:1px solid var(--color-divider);font-variant-numeric:tabular-nums}
.repeat-table tr:nth-child(even) td{background:var(--color-surface-offset)}
.repeat-table tr.total-row td{background:var(--color-primary-highlight);font-weight:700;color:var(--color-primary)}

/* ── EQUITY CHART ── */
.chart-wrap{position:relative;height:280px;margin-bottom:1.5rem}

/* ── AMORT TABLE ── */
.amort-wrap{max-height:320px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.amort-table{font-size:var(--text-xs);width:100%}
.amort-table th{position:sticky;top:0;background:var(--color-primary);color:#fff;padding:.45rem .6rem;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.03em;text-align:right}
.amort-table th:first-child{text-align:left}
.amort-table td{padding:.4rem .6rem;border-bottom:1px solid var(--color-divider);text-align:right;font-variant-numeric:tabular-nums}
.amort-table td:first-child{text-align:left;font-weight:500}
.amort-table tr:hover td{background:var(--color-surface-offset)}
.amort-table tr.milestone-20 td{background:var(--color-green-highlight)!important;font-weight:700}
.amort-table tr.milestone-50 td{background:var(--color-gold-highlight)!important;font-weight:700}
.milestone-badge{font-size:9px;background:var(--color-green);color:#fff;padding:.1rem .4rem;border-radius:var(--radius-full);margin-left:.3rem;vertical-align:middle}

/* ── ALERT BOX ── */
.alert{padding:.85rem 1rem;border-radius:var(--radius-md);font-size:var(--text-sm);display:none;margin-bottom:1rem;border-left:4px solid}
.alert-success{background:var(--color-green-highlight);border-color:var(--color-green);color:#065f46}
.alert-warning{background:var(--color-gold-highlight);border-color:var(--color-gold);color:#78350f}
.alert-error{background:var(--color-red-highlight);border-color:var(--color-red);color:#9f1239}
[data-theme="dark"] .alert-success{color:var(--color-green)}
[data-theme="dark"] .alert-warning{color:var(--color-gold)}
[data-theme="dark"] .alert-error{color:var(--color-red)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--color-text-muted)}
.empty-icon{font-size:3rem;margin-bottom:1rem;opacity:.4}
.empty-state h3{font-size:var(--text-lg);font-weight:600;color:var(--color-text);margin-bottom:.5rem}
.empty-state p{font-size:var(--text-sm);max-width:40ch;margin:0 auto 1.5rem}

/* ── RESULTS SECTION ── */
#results{display:none}
.results-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}
.results-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text)}
.export-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* ── PMI ── */
.pmi-banner{background:var(--color-gold-highlight);border:1px solid var(--color-gold);border-radius:var(--radius-md);padding:.75rem 1rem;font-size:var(--text-xs);color:var(--color-gold);font-weight:500;margin-bottom:1rem;display:none}
[data-theme="dark"] .pmi-banner{color:var(--color-gold)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .form-grid{grid-template-columns:1fr 1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .page-hero{padding:1.75rem 1rem 1.25rem}
  .section-card{padding:1rem}
  .main{padding:1rem .75rem 3rem}
}
@media(max-width:480px){
  .form-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .tab-btn{font-size:11px;padding:.4rem .7rem}
}
/* ============================================================
   HOW TO USE THIS CALCULATOR — CSS
   Add inside your existing <style> block
   ============================================================ */

/* ---------- Section Wrapper ---------- */
.htuc-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  margin-top: 48px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

.htuc-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Section Header ---------- */
.htuc-header {
  text-align: center;
  margin-bottom: 52px;
}

.htuc-badge {
  display: inline-block;
  background: rgba(0, 40, 104, 0.08);
  color: var(--global-palette1, #002868);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.htuc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 16px;
  line-height: 1.25;
}

.htuc-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--global-palette4, #5F6368);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Steps Grid ---------- */
.htuc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ---------- Individual Card ---------- */
.htuc-card {
  background: var(--global-palette7, #FFFFFF);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 4px solid var(--global-palette1, #002868);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.htuc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 40, 104, 0.1);
}

/* Highlight card (Step 6) */
.htuc-card--highlight {
  border-top-color: var(--global-palette9, #00875A);
  background: linear-gradient(135deg, #ffffff 0%, #f0faf6 100%);
}

/* ---------- Step Number Badge ---------- */
.htuc-step-num {
  position: absolute;
  top: -18px;
  left: 28px;
  width: 36px;
  height: 36px;
  background: var(--global-palette1, #002868);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 40, 104, 0.3);
}

.htuc-step-num--green {
  background: var(--global-palette9, #00875A);
  box-shadow: 0 2px 8px rgba(0, 135, 90, 0.3);
}

/* ---------- Card Icon ---------- */
.htuc-card-icon {
  font-size: 2rem;
  margin: 10px 0 14px;
  display: block;
}

/* ---------- Card Title ---------- */
.htuc-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 12px;
  line-height: 1.35;
}

/* ---------- Card Body Text ---------- */
.htuc-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.7;
  margin: 0 0 16px;
}

.htuc-card-text strong {
  color: var(--global-palette3, #1D1D1F);
  font-weight: 600;
}

/* ---------- Tip Box ---------- */
.htuc-tip {
  background: rgba(0, 40, 104, 0.05);
  border-left: 3px solid var(--global-palette1, #002868);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.6;
}

.htuc-tip--green {
  background: rgba(0, 135, 90, 0.06);
  border-left-color: var(--global-palette9, #00875A);
}

.htuc-tip-label {
  display: block;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  font-size: 0.8rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Footer Disclaimer Note ---------- */
.htuc-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-left: 4px solid var(--global-palette8, #BF0A30);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  margin-top: 48px;
  color: var(--global-palette4, #5F6368);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  line-height: 1.65;
}

.htuc-footer-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--global-palette8, #BF0A30);
}

.htuc-footer-note p {
  margin: 0;
}

.htuc-footer-note strong {
  color: var(--global-palette3, #1D1D1F);
}

/* ============================================================
   RESPONSIVE — Mobile & Tablet
   ============================================================ */

/* Tablet: 2 columns */
@media (max-width: 960px) {
  .htuc-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .htuc-section {
    padding: 52px 0 60px;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .htuc-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .htuc-section {
    padding: 40px 0 48px;
    margin-top: 32px;
  }

  .htuc-container {
    padding: 0 16px;
  }

  .htuc-header {
    margin-bottom: 36px;
  }

  .htuc-title {
    font-size: 1.45rem;
  }

  .htuc-subtitle {
    font-size: 0.95rem;
  }

  .htuc-card {
    padding: 28px 22px 24px;
  }

  .htuc-footer-note {
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px;
  }
}
/* ============================================================
   SHARED UTILITIES — used across all 4 sections below
   ============================================================ */

.brrrr-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.brrrr-section-header {
  text-align: center;
  margin-bottom: 52px;
}

.brrrr-badge {
  display: inline-block;
  background: rgba(0, 40, 104, 0.08);
  color: var(--global-palette1, #002868);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 16px;
  font-family: 'Inter', sans-serif;
}

.brrrr-badge--green {
  background: rgba(0, 135, 90, 0.09);
  color: var(--global-palette9, #00875A);
}

.brrrr-badge--red {
  background: rgba(191, 10, 48, 0.08);
  color: var(--global-palette8, #BF0A30);
}

.brrrr-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 16px;
  line-height: 1.25;
}

.brrrr-section-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: var(--global-palette4, #5F6368);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}


/* ============================================================
   SECTION 2 — WHAT IS THE BRRRR METHOD?
   ============================================================ */

.brrrr-what-section {
  background: var(--global-palette7, #FFFFFF);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* Acronym Flow */
.brrrr-acronym-flow {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 48px;
  flex-wrap: nowrap;
}

.brrrr-letter-card {
  flex: 1;
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 4px solid var(--global-palette1, #002868);
  border-radius: 12px;
  padding: 24px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.brrrr-letter-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 40, 104, 0.1);
}

.brrrr-letter-card--green {
  border-top-color: var(--global-palette9, #00875A);
  background: linear-gradient(135deg, #f0faf6 0%, #ffffff 100%);
}

.brrrr-letter {
  width: 48px;
  height: 48px;
  background: var(--global-palette1, #002868);
  color: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.brrrr-letter--green {
  background: var(--global-palette9, #00875A);
}

.brrrr-letter-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 8px;
}

.brrrr-letter-content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0;
}

.brrrr-flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--global-palette5, #E0E4E8);
  padding: 0 6px;
  flex-shrink: 0;
  font-weight: 700;
}

/* Why It Works Callout */
.brrrr-why-box {
  display: flex;
  gap: 16px;
  background: rgba(0, 40, 104, 0.04);
  border: 1px solid rgba(0, 40, 104, 0.12);
  border-left: 4px solid var(--global-palette1, #002868);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  margin-bottom: 48px;
  align-items: flex-start;
}

.brrrr-why-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.brrrr-why-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.97rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.7;
}

.brrrr-why-text strong {
  color: var(--global-palette3, #1D1D1F);
}

/* Feature Cards Grid */
.brrrr-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.brrrr-feature-card {
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 12px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.brrrr-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.brrrr-feature-icon {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}

.brrrr-feature-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 10px;
}

.brrrr-feature-card p {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0;
}


/* ============================================================
   SECTION 3 — REAL-WORLD EXAMPLE
   ============================================================ */

.brrrr-example-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* Timeline */
.brrrr-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 52px;
  position: relative;
}

.brrrr-timeline::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: var(--global-palette5, #E0E4E8);
}

.brrrr-timeline-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  position: relative;
}

.brrrr-timeline-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--global-palette1, #002868);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--global-palette6, #F7F9FC);
}

.brrrr-timeline-dot--green {
  background: var(--global-palette9, #00875A);
}

.brrrr-timeline-content {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 12px;
  padding: 20px 24px;
  flex: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.brrrr-timeline-phase {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--global-palette1, #002868);
  background: rgba(0,40,104,0.08);
  padding: 3px 10px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.brrrr-timeline-phase--green {
  color: var(--global-palette9, #00875A);
  background: rgba(0, 135, 90, 0.09);
}

.brrrr-timeline-content strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin-bottom: 8px;
}

.brrrr-timeline-content p {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0;
}

/* Tables (shared across sections 3 & 5) */
.brrrr-table-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 16px;
}

.brrrr-table-wrap {
  margin-bottom: 32px;
}

.brrrr-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--global-palette5, #E0E4E8);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.brrrr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  min-width: 600px;
}

.brrrr-table thead tr {
  background: var(--global-palette1, #002868);
  color: #ffffff;
}

.brrrr-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.brrrr-table tbody tr {
  border-bottom: 1px solid var(--global-palette5, #E0E4E8);
  background: var(--global-palette7, #FFFFFF);
}

.brrrr-table tbody tr:hover {
  background: rgba(0, 40, 104, 0.03);
}

.brrrr-table tbody td {
  padding: 13px 18px;
  color: var(--global-palette4, #5F6368);
  line-height: 1.5;
}

.brrrr-table tbody td strong {
  color: var(--global-palette3, #1D1D1F);
}

.brrrr-tr-highlight {
  background: rgba(0, 135, 90, 0.05) !important;
}

.brrrr-td-num {
  font-weight: 600;
  color: var(--global-palette3, #1D1D1F) !important;
  white-space: nowrap;
}

.brrrr-td-bold {
  color: var(--global-palette1, #002868) !important;
}

.brrrr-td-green {
  color: var(--global-palette9, #00875A) !important;
}

.brrrr-example-note {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-left: 4px solid var(--global-palette9, #00875A);
  border-radius: 0 12px 12px 0;
  padding: 18px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
}

.brrrr-example-note strong {
  color: var(--global-palette3, #1D1D1F);
}


/* ============================================================
   SECTION 4 — KEY METRICS EXPLAINED
   ============================================================ */

.brrrr-metrics-section {
  background: var(--global-palette7, #FFFFFF);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

.brrrr-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.brrrr-metric-card {
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 14px;
  padding: 28px 24px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.brrrr-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 40, 104, 0.09);
}

.brrrr-metric-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.brrrr-metric-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.brrrr-metric-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0;
  line-height: 1.3;
}

.brrrr-metric-abbr {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--global-palette4, #5F6368);
  text-transform: none;
  letter-spacing: 0;
}

.brrrr-metric-def {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0 0 14px;
}

.brrrr-metric-formula {
  background: rgba(0, 40, 104, 0.05);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.83rem;
  color: var(--global-palette3, #1D1D1F);
  line-height: 1.6;
  margin-bottom: 12px;
}

.brrrr-formula-label {
  display: block;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--global-palette1, #002868);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.brrrr-metric-benchmark {
  display: flex;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 8px;
}

.brrrr-metric-benchmark.good {
  background: rgba(0, 135, 90, 0.07);
  color: #005c3b;
}

.brrrr-metric-benchmark.warn {
  background: rgba(191, 10, 48, 0.06);
  color: #8b0620;
}

.brrrr-metric-benchmark span {
  font-weight: 700;
  flex-shrink: 0;
}


/* ============================================================
   SECTION 5 — BRRRR vs. BUY & HOLD
   ============================================================ */

.brrrr-vs-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

.brrrr-table--vs thead tr {
  background: var(--global-palette1, #002868);
}

.brrrr-th-blue {
  background: rgba(0, 40, 104, 0.15) !important;
}

.brrrr-th-gray {
  background: rgba(95, 99, 104, 0.15) !important;
}

.brrrr-td-blue {
  color: var(--global-palette1, #002868) !important;
  font-weight: 500;
}

/* Verdict Box */
.brrrr-verdict {
  margin-top: 40px;
}

.brrrr-verdict-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.brrrr-verdict-col {
  border-radius: 14px;
  padding: 28px 28px;
}

.brrrr-verdict-col--blue {
  background: rgba(0, 40, 104, 0.05);
  border: 1px solid rgba(0, 40, 104, 0.15);
  border-top: 4px solid var(--global-palette1, #002868);
}

.brrrr-verdict-col--gray {
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 4px solid var(--global-palette4, #5F6368);
}

.brrrr-verdict-col h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 16px;
}

.brrrr-verdict-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brrrr-verdict-col ul li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}

.brrrr-verdict-col--blue ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--global-palette1, #002868);
  font-weight: 700;
}

.brrrr-verdict-col--gray ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--global-palette4, #5F6368);
  font-weight: 700;
}


/* ============================================================
   RESPONSIVE — All Sections
   ============================================================ */

/* Tablet 960px */
@media (max-width: 960px) {
  .brrrr-what-section,
  .brrrr-example-section,
  .brrrr-metrics-section,
  .brrrr-vs-section {
    padding: 52px 0 60px;
  }

  .brrrr-section-header {
    margin-bottom: 36px;
  }

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

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

  .brrrr-acronym-flow {
    flex-wrap: wrap;
    gap: 16px;
  }

  .brrrr-flow-arrow {
    display: none;
  }

  .brrrr-letter-card {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
  }
}

/* Mobile 600px */
@media (max-width: 600px) {
  .brrrr-container {
    padding: 0 16px;
  }

  .brrrr-what-section,
  .brrrr-example-section,
  .brrrr-metrics-section,
  .brrrr-vs-section {
    padding: 40px 0 48px;
  }

  .brrrr-section-title {
    font-size: 1.45rem;
  }

  .brrrr-section-subtitle {
    font-size: 0.95rem;
  }

  /* Acronym: single column */
  .brrrr-acronym-flow {
    flex-direction: column;
    gap: 12px;
  }

  .brrrr-letter-card {
    flex: 1 1 100%;
  }

  /* Feature cards: single column */
  .brrrr-feature-grid {
    grid-template-columns: 1fr;
  }

  /* Metrics: single column */
  .brrrr-metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Verdict: single column */
  .brrrr-verdict-inner {
    grid-template-columns: 1fr;
  }

  /* Timeline: tighten */
  .brrrr-timeline::before {
    left: 18px;
  }

  .brrrr-timeline-dot {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .brrrr-timeline-content {
    padding: 16px 18px;
  }

  /* Tables: horizontal scroll label */
  .brrrr-table-scroll::before {
    content: '← Scroll to see full table →';
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--global-palette4, #5F6368);
    text-align: center;
    padding: 8px;
    background: var(--global-palette6, #F7F9FC);
    border-bottom: 1px solid var(--global-palette5, #E0E4E8);
  }

  .brrrr-why-box {
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px;
  }
}
/* ============================================================
   SECTION 6 — PRO TIPS & COMMON MISTAKES
   ============================================================ */

.brrrr-tips-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* Mixed badge */
.brrrr-badge--mixed {
  background: linear-gradient(135deg, rgba(0,40,104,0.08) 0%, rgba(191,10,48,0.08) 100%);
  color: var(--global-palette3, #1D1D1F);
}

/* ---- Two-Column Layout ---- */
.brrrr-tips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.brrrr-tips-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Column Header Banner ---- */
.brrrr-col-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 4px;
}

.brrrr-col-header--green {
  background: rgba(0, 135, 90, 0.08);
  border: 1px solid rgba(0, 135, 90, 0.2);
  border-left: 4px solid var(--global-palette9, #00875A);
}

.brrrr-col-header--red {
  background: rgba(191, 10, 48, 0.06);
  border: 1px solid rgba(191, 10, 48, 0.18);
  border-left: 4px solid var(--global-palette8, #BF0A30);
}

.brrrr-col-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.brrrr-col-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0;
  line-height: 1.35;
}

/* ---- Individual Tip / Mistake Card ---- */
.brrrr-tip-card {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 12px;
  padding: 22px 22px 22px 18px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.brrrr-tip-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.brrrr-tip-card--green::before {
  background: var(--global-palette9, #00875A);
}

.brrrr-tip-card--red::before {
  background: var(--global-palette8, #BF0A30);
}

.brrrr-tip-card:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
}

/* ---- Step Number Badge ---- */
.brrrr-tip-number {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(0, 135, 90, 0.1);
  color: var(--global-palette9, #00875A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

.brrrr-tip-number--red {
  background: rgba(191, 10, 48, 0.08);
  color: var(--global-palette8, #BF0A30);
}

/* ---- Card Content ---- */
.brrrr-tip-body {
  flex: 1;
}

.brrrr-tip-body h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 8px;
  line-height: 1.35;
}

.brrrr-tip-body p {
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.68;
  margin: 0 0 10px;
}

.brrrr-tip-body p:last-child {
  margin-bottom: 0;
}

.brrrr-tip-body em {
  font-style: italic;
  color: var(--global-palette3, #1D1D1F);
}

/* ---- Mistake Result Pill ---- */
.brrrr-mistake-result {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(191, 10, 48, 0.05);
  border: 1px solid rgba(191, 10, 48, 0.15);
  border-radius: 8px;
  padding: 9px 13px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: #7a0619;
  line-height: 1.55;
  margin-top: 10px;
}

.brrrr-mistake-result span {
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================
   SCORECARD — Deal Health Checklist
   ============================================================ */

.brrrr-scorecard {
  margin-top: 56px;
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 4px solid var(--global-palette1, #002868);
  border-radius: 0 0 16px 16px;
  padding: 36px 40px;
  box-shadow: 0 4px 20px rgba(0, 40, 104, 0.07);
}

.brrrr-scorecard-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 8px;
}

.brrrr-scorecard-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--global-palette4, #5F6368);
  margin: 0 0 28px;
  line-height: 1.6;
}

.brrrr-scorecard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.brrrr-check-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 10px;
  padding: 14px 16px;
}

.brrrr-check-icon {
  font-size: 1.2rem;
  color: var(--global-palette9, #00875A);
  flex-shrink: 0;
  margin-top: 1px;
}

.brrrr-check-item div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.brrrr-check-item strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  line-height: 1.3;
}

.brrrr-check-item span {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.5;
}

/* ============================================================
   RESPONSIVE — Section 6
   ============================================================ */

/* Tablet 960px */
@media (max-width: 960px) {
  .brrrr-tips-section {
    padding: 52px 0 60px;
  }

  .brrrr-tips-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .brrrr-scorecard {
    padding: 28px 28px;
  }

  .brrrr-scorecard-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile 600px */
@media (max-width: 600px) {
  .brrrr-tips-section {
    padding: 40px 0 48px;
  }

  .brrrr-tips-grid {
    gap: 32px;
  }

  .brrrr-tip-card {
    flex-direction: column;
    gap: 12px;
    padding: 20px 18px 18px 18px;
  }

  /* Keep left accent bar visible on mobile */
  .brrrr-tip-card::before {
    width: 100%;
    height: 4px;
    top: 0;
    left: 0;
    bottom: auto;
  }

  /* Reposition number badge inline with title on mobile */
  .brrrr-tip-number {
    width: auto;
    height: auto;
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 0.72rem;
  }

  .brrrr-tip-card:hover {
    transform: translateY(-3px);
  }

  .brrrr-scorecard {
    padding: 24px 18px;
    margin-top: 40px;
  }

  .brrrr-scorecard-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brrrr-check-item {
    padding: 12px 14px;
  }

  .brrrr-col-header {
    padding: 14px 16px;
  }

  .brrrr-col-header h3 {
    font-size: 0.88rem;
  }
}
/* ============================================================
   SECTION 7 — FAQ ACCORDION
   ============================================================ */

.brrrr-faq-section {
  background: var(--global-palette7, #FFFFFF);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* ---- Category Filter Tabs ---- */
.brrrr-faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}

.brrrr-faq-filter {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--global-palette4, #5F6368);
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 100px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.brrrr-faq-filter:hover {
  border-color: var(--global-palette1, #002868);
  color: var(--global-palette1, #002868);
  background: rgba(0, 40, 104, 0.05);
}

.brrrr-faq-filter.active {
  background: var(--global-palette1, #002868);
  color: #ffffff;
  border-color: var(--global-palette1, #002868);
  box-shadow: 0 2px 8px rgba(0, 40, 104, 0.25);
}

/* ---- FAQ List ---- */
.brrrr-faq-list {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---- Individual FAQ Item ---- */
.brrrr-faq-item {
  border-bottom: 1px solid var(--global-palette5, #E0E4E8);
  overflow: hidden;
  transition: background 0.15s ease;
}

.brrrr-faq-item:first-child {
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* Hidden state for filtered items */
.brrrr-faq-item.faq-hidden {
  display: none;
}

/* ---- Question Button ---- */
.brrrr-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.brrrr-faq-question:hover {
  background: rgba(0, 40, 104, 0.03);
}

.brrrr-faq-question[aria-expanded="true"] {
  background: rgba(0, 40, 104, 0.04);
}

.brrrr-faq-question span:first-child {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--global-palette3, #1D1D1F);
  line-height: 1.4;
  flex: 1;
}

/* ---- Animated +/× Icon ---- */
.brrrr-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: background 0.2s, border-color 0.2s, transform 0.25s ease;
}

/* Horizontal bar — always visible */
.brrrr-faq-icon::before {
  content: '';
  position: absolute;
  width: 12px;
  height: 2px;
  background: var(--global-palette4, #5F6368);
  border-radius: 2px;
  transition: background 0.2s;
}

/* Vertical bar — rotates to 0 when open */
.brrrr-faq-icon::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 12px;
  background: var(--global-palette4, #5F6368);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s;
}

/* Open state icon */
.brrrr-faq-question[aria-expanded="true"] .brrrr-faq-icon {
  background: var(--global-palette1, #002868);
  border-color: var(--global-palette1, #002868);
  transform: rotate(45deg);
}

.brrrr-faq-question[aria-expanded="true"] .brrrr-faq-icon::before,
.brrrr-faq-question[aria-expanded="true"] .brrrr-faq-icon::after {
  background: #ffffff;
}

/* ---- Answer Panel ---- */
.brrrr-faq-answer {
  padding: 0 24px 24px 24px;
  animation: faqSlideDown 0.25s ease forwards;
}

.brrrr-faq-answer p {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.75;
  margin: 0 0 14px;
}

.brrrr-faq-answer p:last-child {
  margin-bottom: 0;
}

.brrrr-faq-answer ul {
  padding-left: 0;
  margin: 12px 0 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brrrr-faq-answer ul li {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.6;
  padding-left: 20px;
  position: relative;
}

.brrrr-faq-answer ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--global-palette1, #002868);
  font-weight: 700;
}

.brrrr-faq-answer ul li strong {
  color: var(--global-palette3, #1D1D1F);
  font-weight: 600;
}

/* Slide-down animation */
@keyframes faqSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   RESPONSIVE — FAQ Section
   ============================================================ */

@media (max-width: 960px) {
  .brrrr-faq-section {
    padding: 52px 0 60px;
  }
}

@media (max-width: 600px) {
  .brrrr-faq-section {
    padding: 40px 0 48px;
  }

  .brrrr-faq-filters {
    gap: 6px;
    margin-bottom: 28px;
  }

  .brrrr-faq-filter {
    font-size: 0.8rem;
    padding: 7px 14px;
  }

  .brrrr-faq-question {
    padding: 18px 16px;
    gap: 12px;
  }

  .brrrr-faq-question span:first-child {
    font-size: 0.93rem;
  }

  .brrrr-faq-answer {
    padding: 0 16px 20px 16px;
  }

  .brrrr-faq-answer p {
    font-size: 0.88rem;
  }

  .brrrr-faq-icon {
    width: 26px;
    height: 26px;
  }
}
/* ============================================================
   SECTION 8 — RELATED CALCULATORS
   ============================================================ */

.brrrr-related-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* ---- Group Label ---- */
.brrrr-related-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--global-palette4, #5F6368);
  margin-bottom: 16px;
  margin-top: 40px;
}

.brrrr-related-label:first-of-type {
  margin-top: 0;
}

.brrrr-related-label-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.brrrr-dot--blue  { background: var(--global-palette1, #002868); }
.brrrr-dot--navy  { background: #1a3a6b; }
.brrrr-dot--green { background: var(--global-palette9, #00875A); }

/* ---- Primary Grid (4 cols — featured cards) ---- */
.brrrr-related-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 8px;
}

.brrrr-related-grid--primary {
  grid-template-columns: repeat(4, 1fr);
}

.brrrr-related-grid--secondary {
  grid-template-columns: repeat(3, 1fr);
}

/* ---- Base Calculator Card ---- */
.brrrr-calc-card {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 3px solid transparent;
  border-radius: 12px;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-top-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.brrrr-calc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 40, 104, 0.1);
  border-top-color: var(--global-palette1, #002868);
  text-decoration: none;
}

/* Featured card variant */
.brrrr-calc-card--featured {
  border-top-color: var(--global-palette1, #002868);
  box-shadow: 0 2px 12px rgba(0, 40, 104, 0.07);
}

.brrrr-calc-card--featured:hover {
  border-top-color: var(--global-palette9, #00875A);
  box-shadow: 0 12px 36px rgba(0, 40, 104, 0.13);
}

/* ---- Category Tag ---- */
.brrrr-calc-cat {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--global-palette1, #002868);
  background: rgba(0, 40, 104, 0.07);
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 12px;
  width: fit-content;
}

/* Category color variants */
.brrrr-calc-card:has(.brrrr-calc-cat:contains("Taxes")) .brrrr-calc-cat,
a[href*="/taxes/"] .brrrr-calc-cat {
  color: var(--global-palette8, #BF0A30);
  background: rgba(191, 10, 48, 0.07);
}

a[href*="/business/"] .brrrr-calc-cat {
  color: #6b3fa0;
  background: rgba(107, 63, 160, 0.07);
}

a[href*="/loans/"] .brrrr-calc-cat {
  color: var(--global-palette9, #00875A);
  background: rgba(0, 135, 90, 0.07);
}

/* ---- Card Icon ---- */
.brrrr-calc-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
  display: block;
  line-height: 1;
}

/* ---- Card Title ---- */
.brrrr-calc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 10px;
  line-height: 1.35;
  flex: 1;
}

/* ---- Card Description ---- */
.brrrr-calc-desc {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

/* ---- CTA Link ---- */
.brrrr-calc-cta {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--global-palette1, #002868);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s ease, color 0.2s ease;
}

.brrrr-calc-card:hover .brrrr-calc-cta {
  gap: 8px;
  color: var(--global-palette9, #00875A);
}

/* ============================================================
   BOTTOM CTA BANNER
   ============================================================ */

.brrrr-related-cta {
  margin-top: 52px;
  background: var(--global-palette1, #002868);
  border-radius: 16px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 8px 32px rgba(0, 40, 104, 0.2);
  position: relative;
  overflow: hidden;
}

/* Decorative background pattern */
.brrrr-related-cta::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.brrrr-related-cta::after {
  content: '';
  position: absolute;
  bottom: -60px;
  right: 80px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  pointer-events: none;
}

.brrrr-related-cta-text {
  flex: 1;
  position: relative;
  z-index: 1;
}

.brrrr-related-cta-text h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.brrrr-related-cta-text p {
  font-family: 'Inter', sans-serif;
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.6;
}

.brrrr-related-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--global-palette9, #00875A);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 0.2s ease, transform 0.2s ease,
              box-shadow 0.2s ease, gap 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 135, 90, 0.35);
}

.brrrr-related-cta-btn:hover {
  background: #006e49;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 135, 90, 0.45);
  gap: 12px;
  text-decoration: none;
}

/* ============================================================
   RESPONSIVE — Related Calculators
   ============================================================ */

/* Large Tablet 1024px */
@media (max-width: 1024px) {
  .brrrr-related-grid--primary {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet 960px */
@media (max-width: 960px) {
  .brrrr-related-section {
    padding: 52px 0 60px;
  }

  .brrrr-related-grid--secondary {
    grid-template-columns: repeat(2, 1fr);
  }

  .brrrr-related-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 32px;
    gap: 24px;
  }

  .brrrr-related-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Mobile 600px */
@media (max-width: 600px) {
  .brrrr-related-section {
    padding: 40px 0 48px;
  }

  .brrrr-related-grid--primary,
  .brrrr-related-grid--secondary {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Horizontal card layout on mobile for compact view */
  .brrrr-calc-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    padding: 18px 16px;
  }

  .brrrr-calc-cat {
    order: 1;
    width: 100%;
    margin-bottom: 8px;
  }

  .brrrr-calc-icon {
    order: 2;
    font-size: 1.5rem;
    margin-bottom: 0;
    margin-right: 12px;
    flex-shrink: 0;
    align-self: center;
  }

  .brrrr-calc-title {
    order: 3;
    flex: 1;
    font-size: 0.9rem;
    margin-bottom: 6px;
    align-self: center;
  }

  .brrrr-calc-desc {
    order: 4;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 0.8rem;
  }

  .brrrr-calc-cta {
    order: 5;
    width: 100%;
    font-size: 0.8rem;
  }

  .brrrr-related-label {
    margin-top: 32px;
    font-size: 0.75rem;
  }

  .brrrr-related-cta {
    padding: 24px 20px;
    border-radius: 12px;
    margin-top: 36px;
  }

  .brrrr-related-cta-text h3 {
    font-size: 1.1rem;
  }

  .brrrr-related-cta-text p {
    font-size: 0.87rem;
  }

  .brrrr-related-cta-btn {
    padding: 13px 20px;
    font-size: 0.88rem;
  }
}
/* ============================================================
   SECTION 9 — LEGAL DISCLAIMER & EDITORIAL TRANSPARENCY
   ============================================================ */

.brrrr-disclaimer-section {
  background: var(--global-palette6, #F7F9FC);
  padding: 72px 0 80px;
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

/* ============================================================
   EDITORIAL TRANSPARENCY BOX
   ============================================================ */

.brrrr-transparency-box {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-top: 4px solid var(--global-palette1, #002868);
  border-radius: 0 0 16px 16px;
  padding: 36px 40px;
  margin-bottom: 32px;
  box-shadow: 0 2px 16px rgba(0, 40, 104, 0.06);
}

.brrrr-transparency-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--global-palette5, #E0E4E8);
}

.brrrr-transparency-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 40, 104, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--global-palette1, #002868);
  margin-top: 2px;
}

.brrrr-transparency-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0 0 6px;
  line-height: 1.3;
}

.brrrr-transparency-sub {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--global-palette4, #5F6368);
  margin: 0;
  line-height: 1.6;
}

/* Transparency Grid */
.brrrr-transparency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.brrrr-transparency-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.brrrr-trans-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.brrrr-transparency-item strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin-bottom: 6px;
  line-height: 1.3;
}

.brrrr-transparency-item p {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0;
}

.brrrr-inline-link {
  color: var(--global-palette1, #002868);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}

.brrrr-inline-link:hover {
  color: var(--global-palette9, #00875A);
}

/* ============================================================
   AUTHORITY RESOURCES BOX
   ============================================================ */

.brrrr-authority-box {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

.brrrr-authority-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.brrrr-authority-header svg {
  color: var(--global-palette1, #002868);
  flex-shrink: 0;
}

.brrrr-authority-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0;
  line-height: 1.3;
}

.brrrr-authority-intro {
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.65;
  margin: 0 0 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--global-palette5, #E0E4E8);
}

/* Authority Cards Grid */
.brrrr-authority-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.brrrr-authority-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--global-palette6, #F7F9FC);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.brrrr-authority-card:hover {
  border-color: var(--global-palette1, #002868);
  background: rgba(0, 40, 104, 0.03);
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(0, 40, 104, 0.08);
  text-decoration: none;
}

.brrrr-authority-logo {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px;
  width: 36px;
  text-align: center;
}

.brrrr-authority-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.brrrr-authority-info strong {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  line-height: 1.35;
}

.brrrr-authority-info span {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.55;
}

.brrrr-authority-url {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: var(--global-palette1, #002868) !important;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.brrrr-authority-card:hover .brrrr-authority-url {
  color: var(--global-palette9, #00875A) !important;
}

/* ============================================================
   LEGAL DISCLAIMER BLOCK
   ============================================================ */

.brrrr-legal-block {
  background: var(--global-palette7, #FFFFFF);
  border: 1px solid var(--global-palette5, #E0E4E8);
  border-left: 4px solid var(--global-palette8, #BF0A30);
  border-radius: 0 16px 16px 0;
  overflow: hidden;
}

.brrrr-legal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 32px;
  background: rgba(191, 10, 48, 0.04);
  border-bottom: 1px solid var(--global-palette5, #E0E4E8);
}

.brrrr-legal-icon {
  color: var(--global-palette8, #BF0A30);
  flex-shrink: 0;
}

.brrrr-legal-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette3, #1D1D1F);
  margin: 0;
}

/* Legal Body */
.brrrr-legal-body {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brrrr-legal-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.brrrr-legal-bullet {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--global-palette8, #BF0A30);
  flex-shrink: 0;
  margin-top: 1px;
  width: 16px;
  text-align: center;
  opacity: 0.6;
}

.brrrr-legal-item p {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: var(--global-palette4, #5F6368);
  line-height: 1.7;
  margin: 0;
}

.brrrr-legal-item p strong {
  color: var(--global-palette3, #1D1D1F);
  font-weight: 600;
}

/* Legal Footer Bar */
.brrrr-legal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px 32px;
  background: var(--global-palette6, #F7F9FC);
  border-top: 1px solid var(--global-palette5, #E0E4E8);
}

.brrrr-legal-footer > span {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: var(--global-palette4, #5F6368);
  font-weight: 500;
}

.brrrr-legal-footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.brrrr-legal-footer-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--global-palette1, #002868);
  text-decoration: none;
  transition: color 0.15s;
}

.brrrr-legal-footer-links a:hover {
  color: var(--global-palette9, #00875A);
  text-decoration: underline;
}

.brrrr-legal-sep {
  font-size: 0.75rem;
  color: var(--global-palette5, #E0E4E8);
}

/* ============================================================
   RESPONSIVE — Section 9
   ============================================================ */

/* Tablet 960px */
@media (max-width: 960px) {
  .brrrr-disclaimer-section {
    padding: 52px 0 60px;
  }

  .brrrr-transparency-box,
  .brrrr-authority-box {
    padding: 28px 28px;
  }

  .brrrr-legal-body {
    padding: 24px 24px;
  }

  .brrrr-legal-header {
    padding: 18px 24px;
  }

  .brrrr-legal-footer {
    padding: 14px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .brrrr-authority-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile 600px */
@media (max-width: 600px) {
  .brrrr-disclaimer-section {
    padding: 40px 0 48px;
  }

  .brrrr-transparency-box,
  .brrrr-authority-box {
    padding: 22px 18px;
    border-radius: 0 0 12px 12px;
  }

  .brrrr-transparency-header {
    flex-direction: column;
    gap: 12px;
  }

  .brrrr-transparency-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .brrrr-authority-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brrrr-authority-card {
    padding: 14px 14px;
  }

  .brrrr-authority-card:hover {
    transform: none;
  }

  .brrrr-legal-body {
    padding: 20px 18px;
    gap: 16px;
  }

  .brrrr-legal-header {
    padding: 16px 18px;
  }

  .brrrr-legal-footer {
    padding: 14px 18px;
  }

  .brrrr-legal-footer-links {
    gap: 8px;
  }

  .brrrr-legal-footer > span {
    font-size: 0.74rem;
  }

  .brrrr-legal-footer-links a,
  .brrrr-legal-sep {
    font-size: 0.74rem;
  }
}
/* =========================================================
   📱 BRRRR CALCULATOR — MOBILE CONTAINMENT FIX
   ========================================================= */

/* 1. Global Viewport Lockdown */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* 2. Main Wrapper Straitjacket */
.main, .section-card, #results, .tab-panel {
  min-width: 0 !important; /* CRITICAL: Stops grid/flex blowout */
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* 3. Trap ALL Tables inside horizontal scroll boxes */
.rehab-table-wrap, /* <-- Added this! */
.amort-wrap, 
#repeatContent > div[style*="overflow-x:auto"],
.brrrr-table-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 8px !important;
}

/* Force the actual tables to stay wide enough to read */
.amort-table, .rehab-table, .repeat-table, .brrrr-table {
  min-width: 600px !important; 
  width: 100% !important;
}

/* 4. Chart Containment */
.chart-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.chart-wrap canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* 5. Mobile Layout Stacking (< 768px) */
@media screen and (max-width: 768px) {
  /* Ensure the Tab Nav can be swiped horizontally */
  .tab-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 4px !important;
  }
  
  .tab-btn {
    flex: 0 0 auto !important;
  }

  /* Stack input fields */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Make KPI cards a 2x2 grid instead of squishing */
  .kpi-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}