/* =====================================================
   MORTGAGE REFINANCE CALCULATOR — CSS
   USFinanceCalculators.com | Kadence Integration
   ===================================================== */
:root {
  --c-blue:     var(--global-palette1, #002868);
  --c-charcoal: var(--global-palette3, #1D1D1F);
  --c-gray:     var(--global-palette4, #5F6368);
  --c-border:   var(--global-palette5, #E0E4E8);
  --c-bg:       var(--global-palette6, #F7F9FC);
  --c-white:    var(--global-palette7, #FFFFFF);
  --c-red:      var(--global-palette8, #BF0A30);
  --c-green:    var(--global-palette9, #00875A);
  --c-amber:    #D97706;
  --c-purple:   #7C3AED;
  --c-teal:     #0891B2;
  --c-sky:      #0284c7;
}

/* ---- RESET & BASE ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
#rfWrapper {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  max-width:1180px; margin:0 auto;
  color:var(--c-charcoal); -webkit-font-smoothing:antialiased;
  font-size:0.875rem; line-height:1.6;
}

/* ---- HEADER ---- */
.rf-header {
  background:linear-gradient(135deg,#001840 0%,#002868 45%,#003d8c 100%);
  border-radius:18px; padding:36px 32px 28px;
  text-align:center; margin-bottom:22px;
  position:relative; overflow:hidden;
}
.rf-header::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 15% 50%,rgba(2,132,199,0.14) 0%,transparent 55%),
              radial-gradient(ellipse at 85% 50%,rgba(0,135,90,0.1) 0%,transparent 55%);
  pointer-events:none;
}
.rf-header::after {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
                    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:44px 44px; pointer-events:none;
}
.rf-header-icon{font-size:2.5rem;display:block;margin-bottom:10px;position:relative;z-index:1;}
.rf-title {
  font-family:'Montserrat','Inter',sans-serif!important;
  font-size:clamp(1.25rem,3vw,1.85rem)!important; font-weight:900!important;
  color:#fff!important; margin:0 0 10px!important; line-height:1.2!important;
  position:relative; z-index:1;
}
.rf-subtitle {
  font-size:0.84rem; color:rgba(255,255,255,0.7);
  max-width:760px; margin:0 auto 20px; line-height:1.65; position:relative; z-index:1;
}
.rf-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;position:relative;z-index:1;}
.rf-badge {
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.88); font-size:0.68rem; font-weight:600;
  padding:4px 11px; border-radius:20px; letter-spacing:0.02em;
}

/* ---- REFI TYPE TABS ---- */
.rf-type-tabs {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px;
}
.rf-type-tab {
  background:var(--c-white); border:2px solid var(--c-border); border-radius:12px;
  padding:12px 8px; text-align:center; cursor:pointer;
  transition:all 0.2s; user-select:none;
}
.rf-type-tab:hover{border-color:var(--c-blue); background:var(--c-bg);}
.rf-type-tab.active{border-color:var(--c-blue); background:#EEF2FF;}
.rf-type-tab-icon{font-size:1.4rem;display:block;margin-bottom:4px;}
.rf-type-tab-label{font-size:0.68rem;font-weight:700;color:var(--c-blue);line-height:1.3;}
.rf-type-tab-desc{font-size:0.6rem;color:var(--c-gray);margin-top:3px;line-height:1.3;}

/* ---- MAIN GRID ---- */
.rf-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
.rf-panel {
  background:var(--c-white); border:1px solid var(--c-border);
  border-radius:16px; padding:26px;
}
.rf-panel.results-panel{background:var(--c-bg);}

/* ---- SECTION LABEL ---- */
.rf-sec {
  font-family:'Montserrat','Inter',sans-serif; font-size:0.68rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--c-blue);
  margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--c-border);
  display:flex; align-items:center; gap:7px;
}
.rf-gap{margin-top:20px;}

/* ---- RATE REFERENCE BAR ---- */
.rf-rate-bar {
  background:linear-gradient(135deg,#EFF6FF,#F0F9FF);
  border:1px solid rgba(2,132,199,0.25); border-radius:10px;
  padding:10px 14px; margin-bottom:16px; font-size:0.72rem;
}
.rf-rate-bar-title{font-weight:700;color:var(--c-sky);margin-bottom:6px;font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;}
.rf-rate-bar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.rf-rate-item{text-align:center;}
.rf-rate-item-label{color:var(--c-gray);font-size:0.6rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;}
.rf-rate-item-val{font-family:'Montserrat','Inter',sans-serif;font-size:0.85rem;font-weight:800;color:var(--c-blue);}

/* ---- FORM ELEMENTS ---- */
.rf-r2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rf-field{margin-bottom:13px;}
.rf-field label{display:block;font-size:0.74rem;font-weight:600;color:var(--c-charcoal);margin-bottom:5px;}
.rf-field label span{font-weight:400;color:var(--c-gray);font-size:0.64rem;}
.rf-iw{display:flex;align-items:center;border:1.5px solid var(--c-border);border-radius:8px;overflow:hidden;background:var(--c-white);transition:border-color 0.2s;}
.rf-iw:focus-within{border-color:var(--c-blue);}
.rf-pre,.rf-suf{background:var(--c-bg);color:var(--c-gray);font-size:0.76rem;font-weight:600;padding:0 10px;height:42px;display:flex;align-items:center;flex-shrink:0;border-right:1.5px solid var(--c-border);}
.rf-suf{border-right:none;border-left:1.5px solid var(--c-border);}
.rf-iw input{flex:1;height:42px;border:none;outline:none;background:transparent;font-size:0.88rem;color:var(--c-charcoal);padding:0 10px;min-width:0;}
.rf-sel{width:100%;height:42px;border:1.5px solid var(--c-border);border-radius:8px;background:var(--c-white);font-size:0.82rem;color:var(--c-charcoal);padding:0 10px;outline:none;cursor:pointer;transition:border-color 0.2s;}
.rf-sel:focus{border-color:var(--c-blue);}

/* conditional panels */
.rf-conditional{display:none;}
.rf-conditional.visible{display:block;}

/* ---- RANGE SLIDER ---- */
.rf-slider-wrap{display:flex;align-items:center;gap:10px;margin-top:6px;}
.rf-slider-wrap input[type=range]{flex:1;height:4px;accent-color:var(--c-blue);}
.rf-slider-val{font-family:'Montserrat','Inter',sans-serif;font-size:0.82rem;font-weight:800;color:var(--c-blue);min-width:38px;text-align:right;}

/* ---- BUTTONS ---- */
.rf-calc-btn {
  width:100%; padding:14px; background:var(--c-blue); color:#fff;
  font-family:'Montserrat','Inter',sans-serif; font-size:0.95rem; font-weight:800;
  border:none; border-radius:10px; cursor:pointer; letter-spacing:0.04em;
  transition:all 0.2s; display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:10px;
}
.rf-calc-btn:hover{background:#001a4d;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,40,104,0.3);}
.rf-reset-btn {
  width:100%; padding:9px; background:transparent; color:var(--c-gray);
  font-size:0.76rem; font-weight:600; border:1.5px solid var(--c-border);
  border-radius:10px; cursor:pointer; margin-top:8px; transition:all 0.2s;
}
.rf-reset-btn:hover{border-color:var(--c-red);color:var(--c-red);}
.rf-err{background:#FFF5F7;border:1.5px solid var(--c-red);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:0.8rem;color:var(--c-red);display:none;gap:8px;align-items:center;}
.rf-err.show{display:flex;}

/* ---- EMPTY STATE ---- */
.rf-empty{text-align:center;padding:44px 20px;color:var(--c-gray);}
.rf-empty-icon{font-size:2.8rem;display:block;margin-bottom:12px;opacity:0.35;}
.rf-empty p{font-size:0.82rem;line-height:1.65;max-width:36ch;margin:0 auto;}

/* ---- RESULTS ---- */
.rf-results{display:none;}
.rf-results.show{display:block;}

/* VERDICT HERO */
.rf-verdict {
  border-radius:14px; padding:20px 18px 16px;
  text-align:center; margin-bottom:16px; position:relative; overflow:hidden;
}
.rf-verdict.go{background:linear-gradient(135deg,#064e3b,#065f46,#047857);}
.rf-verdict.wait{background:linear-gradient(135deg,#7c2d12,#92400e,#b45309);}
.rf-verdict.caution{background:linear-gradient(135deg,#1e3a5f,#1d4ed8,#1e40af);}
.rf-verdict::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;}
.rf-verdict-badge{font-size:0.65rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:5px;position:relative;z-index:1;}
.rf-verdict-headline{font-family:'Montserrat','Inter',sans-serif;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:900;color:#fff;line-height:1.2;margin-bottom:5px;position:relative;z-index:1;}
.rf-verdict-sub{font-size:0.77rem;color:rgba(255,255,255,0.68);position:relative;z-index:1;line-height:1.5;}
.rf-verdict-pills{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap;position:relative;z-index:1;}
.rf-verdict-pill{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:rgba(255,255,255,0.88);font-size:0.68rem;font-weight:700;padding:4px 12px;border-radius:20px;}

/* KPI GRID */
.rf-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.rf-kpi{background:var(--c-white);border:1px solid var(--c-border);border-radius:10px;padding:11px 13px;text-align:center;}
.rf-kpi.green{border-color:rgba(0,135,90,0.25);background:#F0FBF6;}
.rf-kpi.blue{border-color:rgba(2,132,199,0.25);background:#F0F9FF;}
.rf-kpi.amber{border-color:rgba(217,119,6,0.25);background:#FFFBEB;}
.rf-kpi.purple{border-color:rgba(124,58,237,0.25);background:#F5F3FF;}
.rf-kpi.red{border-color:rgba(191,10,48,0.18);background:#FFF5F7;}
.rf-kpi-label{font-size:0.6rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--c-gray);margin-bottom:3px;}
.rf-kpi-val{font-family:'Montserrat','Inter',sans-serif;font-size:1.05rem;font-weight:800;color:var(--c-charcoal);}
.rf-kpi.green .rf-kpi-val{color:var(--c-green);}
.rf-kpi.blue .rf-kpi-val{color:var(--c-sky);}
.rf-kpi.amber .rf-kpi-val{color:var(--c-amber);}
.rf-kpi.purple .rf-kpi-val{color:var(--c-purple);}
.rf-kpi.red .rf-kpi-val{color:var(--c-red);}
.rf-kpi-sub{font-size:0.59rem;color:var(--c-gray);margin-top:2px;}

/* BREAK-EVEN BAR */
.rf-beq{background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.rf-beq-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--c-blue);margin-bottom:10px;}
.rf-beq-bar-wrap{background:var(--c-bg);border-radius:20px;height:12px;overflow:hidden;margin-bottom:8px;position:relative;}
.rf-beq-bar{height:12px;border-radius:20px;background:linear-gradient(90deg,var(--c-sky),var(--c-green));transition:width 0.8s cubic-bezier(0.16,1,0.3,1);}
.rf-beq-labels{display:flex;justify-content:space-between;font-size:0.62rem;color:var(--c-gray);font-weight:600;}
.rf-beq-marker{text-align:center;font-size:0.72rem;font-weight:700;color:var(--c-charcoal);margin-top:6px;}

/* NPV PANEL */
.rf-npv{background:var(--c-white);border:1px solid rgba(124,58,237,0.2);border-radius:12px;padding:13px 15px;margin-bottom:16px;}
.rf-npv-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--c-purple);margin-bottom:10px;}
.rf-npv-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rf-npv-block{background:var(--c-bg);border-radius:9px;padding:10px;text-align:center;}
.rf-npv-block.good{background:#F0FBF6;border:1px solid rgba(0,135,90,0.18);}
.rf-npv-block.bad{background:#FFF5F7;border:1px solid rgba(191,10,48,0.15);}
.rf-npv-block-label{font-size:0.63rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--c-gray);margin-bottom:5px;}
.rf-npv-block-val{font-family:'Montserrat','Inter',sans-serif;font-size:1.05rem;font-weight:900;}
.rf-npv-block.good .rf-npv-block-val{color:var(--c-green);}
.rf-npv-block.bad .rf-npv-block-val{color:var(--c-red);}
.rf-npv-note{font-size:0.72rem;line-height:1.5;color:var(--c-charcoal);border-top:1px solid var(--c-border);padding-top:8px;margin-top:8px;}

/* CHART TABS */
.rf-chart-tabs{display:flex;gap:6px;margin-bottom:10px;}
.rf-chart-tab{flex:1;padding:7px;background:var(--c-bg);border:1.5px solid var(--c-border);border-radius:8px;cursor:pointer;text-align:center;font-size:0.7rem;font-weight:700;color:var(--c-gray);transition:all 0.2s;}
.rf-chart-tab.active{background:var(--c-blue);border-color:var(--c-blue);color:#fff;}
.rf-chart-area{background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;padding:14px;margin-bottom:16px;}
canvas{max-width:100%;}

/* AMORTIZATION TABLE */
.rf-amort-wrap{background:var(--c-white);border:1px solid var(--c-border);border-radius:12px;overflow:hidden;margin-bottom:16px;}
.rf-amort-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--c-border);}
.rf-amort-head-title{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--c-blue);}
.rf-amort-toggle-btn{font-size:0.68rem;font-weight:600;color:var(--c-sky);background:none;border:none;cursor:pointer;padding:0;}
.rf-amort-scroll{max-height:220px;overflow-y:auto;display:none;}
.rf-amort-scroll.open{display:block;}
.rf-amort-table{width:100%;border-collapse:collapse;font-size:0.68rem;}
.rf-amort-table th{background:var(--c-bg);padding:7px 10px;text-align:right;font-weight:700;color:var(--c-gray);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.04em;position:sticky;top:0;z-index:1;}
.rf-amort-table th:first-child{text-align:left;}
.rf-amort-table td{padding:6px 10px;text-align:right;border-bottom:1px solid #f0f0f0;font-family:'Inter',monospace;}
.rf-amort-table td:first-child{text-align:left;font-weight:600;}
.rf-amort-table tr.highlight td{background:#EFF6FF;}

/* PMI PANEL */
.rf-pmi{background:#FFFBEB;border:1px solid rgba(217,119,6,0.25);border-radius:12px;padding:12px 15px;margin-bottom:16px;font-size:0.78rem;line-height:1.55;color:var(--c-charcoal);}
.rf-pmi-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--c-amber);margin-bottom:6px;}
.rf-pmi strong{color:var(--c-green);}

/* ARM ALERT */
.rf-arm-alert{background:#F5F3FF;border:1px solid rgba(124,58,237,0.25);border-radius:12px;padding:12px 15px;margin-bottom:16px;font-size:0.78rem;line-height:1.55;color:var(--c-charcoal);display:none;}
.rf-arm-alert.show{display:block;}
.rf-arm-alert-title{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:var(--c-purple);margin-bottom:6px;}

/* RESPONSIVE */
@media(max-width:900px){.rf-grid{grid-template-columns:1fr;}}
@media(max-width:768px){
  .rf-type-tabs{grid-template-columns:1fr 1fr;}
  .rf-r2{grid-template-columns:1fr;}
  .rf-header{padding:26px 18px 20px;}
  .rf-panel{padding:18px 14px;}
  .rf-rate-bar-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
  .rf-kpis{grid-template-columns:1fr;}
  .rf-npv-grid{grid-template-columns:1fr;}
  .rf-type-tabs{grid-template-columns:1fr 1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   SUPPLEMENTAL SECTION STYLES — rf- prefix, zero conflicts
═══════════════════════════════════════════════════════════════ */

/* ── Layout shell ── */
.rf-section {
  max-width: 1180px;
  margin: 0 auto 32px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.875rem;
  color: var(--c-charcoal, #1D1D1F);
}

/* ── Section header ── */
.rf-sec-hd {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.rf-sec-hd-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.rf-sec-hd-icon.blue  { background: #EEF2FF; color: var(--c-blue,  #002868); }
.rf-sec-hd-icon.green { background: #F0FBF6; color: var(--c-green, #00875A); }
.rf-sec-hd-icon.amber { background: #FFFBEB; color: var(--c-amber, #D97706); }
.rf-sec-hd-icon.purple{ background: #F5F3FF; color: var(--c-purple,#7C3AED); }
.rf-sec-hd-icon.teal  { background: #F0F9FF; color: var(--c-teal,  #0891B2); }
.rf-sec-hd-icon.red   { background: #FFF5F7; color: var(--c-red,   #BF0A30); }

.rf-sec-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  font-weight: 800;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.25;
  margin: 0 0 4px;
}
.rf-sec-sub {
  font-size: 0.78rem;
  color: var(--c-gray, #5F6368);
  line-height: 1.55;
  margin: 0;
}

/* ═══ SECTION 1 — HOW IT WORKS ══════════════════════════════ */

.rf-hiw-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.rf-hiw-tab {
  padding: 7px 16px;
  background: var(--c-bg, #F7F9FC);
  border: 1.5px solid var(--c-border, #E0E4E8);
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--c-gray, #5F6368);
  cursor: pointer;
  transition: all 0.2s;
  font-family: Montserrat, Inter, sans-serif;
}
.rf-hiw-tab.active,
.rf-hiw-tab:hover {
  background: var(--c-blue, #002868);
  border-color: var(--c-blue, #002868);
  color: #fff;
}

/* Steps grid */
.rf-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.rf-step-card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #E0E4E8);
  border-radius: 14px;
  padding: 18px 16px 16px;
  position: relative;
  transition: box-shadow 0.2s;
}
.rf-step-card:hover { box-shadow: 0 4px 18px rgba(0,40,104,0.08); }
.rf-step-num {
  width: 28px; height: 28px;
  background: var(--c-blue, #002868);
  color: #fff;
  border-radius: 50%;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.rf-step-icon { font-size: 1.4rem; margin-bottom: 6px; display: block; }
.rf-step-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--c-charcoal, #1D1D1F);
  margin: 0 0 6px;
}
.rf-step-desc {
  font-size: 0.72rem;
  color: var(--c-gray, #5F6368);
  line-height: 1.6;
  margin: 0;
}
.rf-step-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-step-tag.blue   { background: #EEF2FF; color: var(--c-blue,  #002868); }
.rf-step-tag.green  { background: #F0FBF6; color: var(--c-green, #00875A); }
.rf-step-tag.amber  { background: #FFFBEB; color: var(--c-amber, #D97706); }
.rf-step-tag.purple { background: #F5F3FF; color: var(--c-purple,#7C3AED); }
.rf-step-tag.teal   { background: #F0F9FF; color: var(--c-teal,  #0891B2); }
.rf-step-tag.red    { background: #FFF5F7; color: var(--c-red,   #BF0A30); }

/* Formula box */
.rf-formula-box {
  background: var(--c-charcoal, #1D1D1F);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.rf-formula-box-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 10px;
}
.rf-formula-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.rf-formula-item { text-align: center; }
.rf-formula-label {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.rf-formula-val {
  font-family: Montserrat, monospace;
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
}
.rf-formula-val.accent { color: #34D399; }
.rf-formula-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.3);
  font-size: 1.1rem;
  padding-top: 12px;
}

/* Infobox */
.rf-infobox {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.76rem;
  line-height: 1.6;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.rf-infobox.tip  { background: #F0FBF6; border-left: 3px solid var(--c-green,#00875A); }
.rf-infobox.warn { background: #FFFBEB; border-left: 3px solid var(--c-amber,#D97706); }
.rf-infobox.info { background: #EEF2FF; border-left: 3px solid var(--c-blue, #002868); }
.rf-infobox-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.rf-infobox strong { color: var(--c-charcoal, #1D1D1F); }

/* ═══ SECTION 2 — WORKED EXAMPLES ════════════════════════════ */

.rf-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.rf-example-card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #E0E4E8);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.rf-example-card:hover { box-shadow: 0 4px 18px rgba(0,40,104,0.09); }
.rf-example-hd {
  padding: 14px 16px 12px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.rf-example-hd::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.rf-example-hd.blue   { background: linear-gradient(135deg,#001840,#002868); }
.rf-example-hd.green  { background: linear-gradient(135deg,#064e3b,#065f46); }
.rf-example-hd.amber  { background: linear-gradient(135deg,#78350f,#92400e); }
.rf-example-hd.purple { background: linear-gradient(135deg,#3b0764,#4c1d95); }
.rf-example-hd.teal   { background: linear-gradient(135deg,#0c4a6e,#075985); }
.rf-example-hd.red    { background: linear-gradient(135deg,#7f1d1d,#991b1b); }
.rf-example-type {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 3px;
  position: relative; z-index: 1;
}
.rf-example-name {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 2px;
  position: relative; z-index: 1;
}
.rf-example-tagline {
  font-size: 0.67rem;
  color: rgba(255,255,255,0.65);
  position: relative; z-index: 1;
}
.rf-example-body { padding: 14px 16px; }
.rf-example-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--c-border, #E0E4E8);
  font-size: 0.71rem;
}
.rf-example-row:last-of-type { border-bottom: none; }
.rf-example-row-label { color: var(--c-gray, #5F6368); font-weight: 600; }
.rf-example-row-val {
  font-family: Montserrat, Inter, sans-serif;
  font-weight: 800;
  color: var(--c-charcoal, #1D1D1F);
  font-size: 0.73rem;
}
.rf-example-verdict {
  margin-top: 10px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-example-verdict.go    { background: #F0FBF6; color: var(--c-green, #00875A); }
.rf-example-verdict.wait  { background: #FFF5F7; color: var(--c-red,   #BF0A30); }
.rf-example-verdict.warn  { background: #FFFBEB; color: var(--c-amber, #D97706); }

/* ═══ SECTION 3 — FAQ ════════════════════════════════════════ */

.rf-faq-list { display: flex; flex-direction: column; gap: 8px; }
.rf-faq-item {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #E0E4E8);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.rf-faq-item.open { border-color: var(--c-blue, #002868); }
.rf-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}
.rf-faq-q-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.4;
}
.rf-faq-q-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: var(--c-bg, #F7F9FC);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.rf-faq-arrow {
  font-size: 0.7rem;
  color: var(--c-gray, #5F6368);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.rf-faq-item.open .rf-faq-arrow { transform: rotate(180deg); }
.rf-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  font-size: 0.78rem;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.7;
  padding: 0 16px;
}
.rf-faq-item.open .rf-faq-a {
  max-height: 600px;
  padding: 0 16px 16px;
}
.rf-faq-a ul { margin: 8px 0 0 16px; }
.rf-faq-a ul li { margin-bottom: 5px; font-size: 0.75rem; line-height: 1.55; }
.rf-faq-a strong { color: var(--c-charcoal, #1D1D1F); }

/* ═══ SECTION 4 — PRO TIPS ═══════════════════════════════════ */

.rf-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.rf-tip-card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #E0E4E8);
  border-radius: 14px;
  padding: 18px 16px;
  transition: box-shadow 0.2s;
}
.rf-tip-card:hover { box-shadow: 0 4px 18px rgba(0,40,104,0.08); }
.rf-tip-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rf-tip-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  flex-shrink: 0;
}
.rf-tip-num.blue   { background: var(--c-blue,  #002868); color: #fff; }
.rf-tip-num.green  { background: var(--c-green, #00875A); color: #fff; }
.rf-tip-num.amber  { background: var(--c-amber, #D97706); color: #fff; }
.rf-tip-num.purple { background: var(--c-purple,#7C3AED); color: #fff; }
.rf-tip-num.teal   { background: var(--c-teal,  #0891B2); color: #fff; }
.rf-tip-num.red    { background: var(--c-red,   #BF0A30); color: #fff; }
.rf-tip-badge {
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 8px;
}
.rf-tip-badge.blue   { background: #EEF2FF; color: var(--c-blue,  #002868); }
.rf-tip-badge.green  { background: #F0FBF6; color: var(--c-green, #00875A); }
.rf-tip-badge.amber  { background: #FFFBEB; color: var(--c-amber, #D97706); }
.rf-tip-badge.purple { background: #F5F3FF; color: var(--c-purple,#7C3AED); }
.rf-tip-badge.teal   { background: #F0F9FF; color: var(--c-teal,  #0891B2); }
.rf-tip-badge.red    { background: #FFF5F7; color: var(--c-red,   #BF0A30); }
.rf-tip-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--c-charcoal, #1D1D1F);
  margin: 0 0 7px;
}
.rf-tip-desc {
  font-size: 0.73rem;
  color: var(--c-gray, #5F6368);
  line-height: 1.65;
  margin: 0 0 10px;
}
.rf-tip-callout {
  background: var(--c-bg, #F7F9FC);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.69rem;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.55;
  font-weight: 500;
}

/* ═══ SECTION 5 — RELATED CALCULATORS ════════════════════════ */

.rf-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.rf-related-card {
  background: var(--c-white, #fff);
  border: 1px solid var(--c-border, #E0E4E8);
  border-radius: 12px;
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s;
}
.rf-related-card:hover {
  border-color: var(--c-blue, #002868);
  box-shadow: 0 4px 14px rgba(0,40,104,0.09);
  transform: translateY(-2px);
}
.rf-related-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  width: 36px; height: 36px;
  background: var(--c-bg, #F7F9FC);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
}
.rf-related-info { flex: 1; min-width: 0; }
.rf-related-name {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.3;
  margin-bottom: 2px;
}
.rf-related-tag {
  font-size: 0.6rem;
  color: var(--c-gray, #5F6368);
  font-weight: 500;
}
.rf-related-arrow {
  font-size: 0.75rem;
  color: var(--c-blue, #002868);
  flex-shrink: 0;
}

/* ═══ SECTION 6 — DISCLAIMER ══════════════════════════════════ */

.rf-disclaimer {
  background: #FFFBEB;
  border: 1.5px solid rgba(217,119,6,0.3);
  border-radius: 16px;
  padding: 22px 24px;
}
.rf-disclaimer-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.rf-disclaimer-icon {
  font-size: 1.4rem;
  width: 40px; height: 40px;
  background: rgba(217,119,6,0.12);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rf-disclaimer-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--c-amber, #D97706);
  margin: 0;
}
.rf-disclaimer-body {
  font-size: 0.76rem;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.7;
  margin-bottom: 16px;
}
.rf-disclaimer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.rf-disclaimer-col-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--c-amber, #D97706);
  margin-bottom: 8px;
}
.rf-disclaimer-col ul {
  margin: 0 0 0 14px;
  padding: 0;
}
.rf-disclaimer-col ul li {
  font-size: 0.73rem;
  color: var(--c-charcoal, #1D1D1F);
  line-height: 1.55;
  margin-bottom: 5px;
}
.rf-sources {
  padding-top: 14px;
  border-top: 1px solid rgba(217,119,6,0.2);
}
.rf-sources-title {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-gray, #5F6368);
  margin-bottom: 8px;
}
.rf-sources-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rf-source-link {
  padding: 4px 12px;
  background: rgba(217,119,6,0.08);
  border: 1px solid rgba(217,119,6,0.2);
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 600;
  color: #92400e;
  text-decoration: none;
  transition: all 0.2s;
}
.rf-source-link:hover {
  background: rgba(217,119,6,0.16);
  color: #78350f;
}
.rf-trust-strip {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--c-blue, #002868);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
}
.rf-trust-chip {
  font-size: 0.64rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 5px;
}
.rf-trust-chip::before {
  content: '✓';
  background: rgba(52,211,153,0.25);
  color: #34D399;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* =========================================================
   ACTION BUTTONS (PDF, Share, Copy)
   ========================================================= */
.rf-actions { 
  display: flex; 
  gap: 8px; 
  margin-top: 16px; 
}

.rf-action-btn { 
  flex: 1; 
  padding: 11px 10px; 
  border: 1.5px solid var(--c-border); 
  border-radius: 9px; 
  background: var(--c-white); 
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.78rem; 
  font-weight: 700; 
  color: var(--c-charcoal); 
  cursor: pointer; 
  transition: all 0.2s ease; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 6px; 
}

.rf-action-btn:hover { 
  border-color: var(--c-blue); 
  color: var(--c-blue); 
}

.rf-action-btn.primary { 
  background: var(--c-blue); 
  border-color: var(--c-blue); 
  color: #fff; 
}

.rf-action-btn.primary:hover { 
  background: #001a4d; 
  box-shadow: 0 4px 12px rgba(0, 40, 104, 0.2);
}
/* ═══ RESPONSIVE ══════════════════════════════════════════════ */

@media (max-width: 900px) {
  .rf-steps-grid,
  .rf-examples-grid,
  .rf-tips-grid { grid-template-columns: 1fr 1fr; }
  .rf-related-grid { grid-template-columns: 1fr 1fr; }
  .rf-formula-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rf-steps-grid,
  .rf-examples-grid,
  .rf-tips-grid,
  .rf-related-grid { grid-template-columns: 1fr; }
  .rf-disclaimer-grid { grid-template-columns: 1fr; }
  .rf-formula-grid { grid-template-columns: 1fr; }
  .rf-section { margin-bottom: 22px; }
  .rf-sec-hd { gap: 10px; }
  .rf-sec-title { font-size: 1rem; }
  .rf-trust-strip { flex-direction: column; gap: 6px; }
}
/* =========================================================
   📱 MOBILE CONTAINMENT FIX
   ========================================================= */
html, body { 
  max-width: 100vw !important; 
  overflow-x: hidden !important; 
}

/* Force structural wrappers to shrink */
#mreWrapper, .mre-grid, .mre-panel, .mre-results, .mre-scenario-wrap, .mre-chart-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

canvas#mreChart { max-width: 100% !important; height: auto !important; }

@media (max-width: 960px) {
  .mre-grid { grid-template-columns: 1fr !important; }
}
/* =========================================================
   SPACING FIXES (Hero, Calculator & Headings)
   ========================================================= */

/* 1. Add breathing room below the Hero Subtitle */
.rf-subtitle {
  margin-bottom: 32px !important;
  line-height: 1.6;
}

/* 2. Give the Calculator itself top & bottom margins */
.rf-grid {
  margin-top: 16px !important;
  margin-bottom: 56px !important; /* Huge space before the next H2 */
}

/* 3. Restore healthy spacing around all H2 and H3 headings */
#rfWrapper h2 {
  margin-top: 48px !important;
  margin-bottom: 16px !important;
  line-height: 1.3;
}

#rfWrapper h3 {
  margin-top: 32px !important;
  margin-bottom: 12px !important;
}