/* =====================================================
   MORTGAGE POINTS BREAKEVEN CALCULATOR
   USFinanceCalculators.com | Kadence Integration
   ===================================================== */
:root {
  --p-navy:    var(--global-palette1, #002868);
  --p-dark:    var(--global-palette3, #1D1D1F);
  --p-gray:    var(--global-palette4, #5F6368);
  --p-border:  var(--global-palette5, #E0E4E8);
  --p-bg:      var(--global-palette6, #F7F9FC);
  --p-white:   var(--global-palette7, #FFFFFF);
  --p-red:     var(--global-palette8, #BF0A30);
  --p-green:   var(--global-palette9, #00875A);
  --p-amber:   #D97706;
  --p-purple:  #7C3AED;
  --p-teal:    #0891B2;
  --p-sky:     #0284c7;
  --p-radius:  10px;
  --p-trans:   0.2s ease;
}

#mpWrapper {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 1200px; margin: 0 auto;
  color: var(--p-dark); -webkit-font-smoothing: antialiased;
  font-size: 0.9rem; line-height: 1.6;
}

/* ---- HEADER ---- */
.mp-header {
  background: linear-gradient(135deg, #001840 0%, #002868 45%, #0a3060 100%);
  border-radius: 18px; padding: 36px 32px 28px;
  text-align: center; margin-bottom: 22px;
  position: relative; overflow: hidden;
}
.mp-header::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 15% 50%, rgba(2,132,199,0.13) 0%, transparent 55%),
              radial-gradient(ellipse at 85% 50%, rgba(0,135,90,0.1) 0%, transparent 55%);
}
.mp-header::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  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;
}
.mp-header-icon { font-size: 2.6rem; display:block; margin-bottom:10px; position:relative; z-index:1; }
.mp-title {
  font-family:'Montserrat','Inter',sans-serif!important;
  font-size: clamp(1.3rem,3vw,1.95rem)!important; font-weight:900!important;
  color:#fff!important; margin:0 0 10px!important; line-height:1.2!important;
  position:relative; z-index:1;
}
.mp-subtitle { font-size:0.86rem; color:rgba(255,255,255,0.72); max-width:800px; margin:0 auto 20px; line-height:1.65; position:relative; z-index:1; }
.mp-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; position:relative; z-index:1; }
.mp-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; }

/* ---- MODE TOGGLE ---- */
.mp-mode-bar { display:flex; gap:8px; margin-bottom:18px; background:var(--p-bg); border:1px solid var(--p-border); border-radius:12px; padding:5px; }
.mp-mode-btn { flex:1; padding:9px 10px; border:none; border-radius:9px; font-family:'Montserrat','Inter',sans-serif; font-size:0.76rem; font-weight:700; letter-spacing:0.03em; cursor:pointer; background:transparent; color:var(--p-gray); transition:all var(--p-trans); text-align:center; }
.mp-mode-btn.active { background:var(--p-navy); color:#fff; box-shadow:0 2px 8px rgba(0,40,104,0.25); }

/* ---- MAIN GRID ---- */
.mp-grid { display:grid; grid-template-columns:380px 1fr; gap:22px; align-items:start; }
.mp-left { display:flex; flex-direction:column; gap:16px; }
.mp-panel { background:var(--p-white); border:1px solid var(--p-border); border-radius:16px; padding:22px; }
.mp-panel.tinted { background:var(--p-bg); }

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

/* ---- FORM FIELDS ---- */
/* Force 2-column grids to be exactly 50/50 on desktop, regardless of long text */
.mp-r2 { 
  display: grid; 
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 10px; 
}
/* Container for the label and input */
.mp-f { 
  display: flex; 
  flex-direction: column; 
  margin-bottom: 12px; 
  height: 100%; /* Ensure it fills the grid cell height */
}

/* Force the label to take up remaining space, pushing input to the bottom */
.mp-f label { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; /* Aligns text to the bottom of the label area */
  flex-grow: 1; /* Pushes the input box to the absolute bottom of the container */
  font-size: 0.73rem; 
  font-weight: 600; 
  color: var(--p-dark); 
  margin-bottom: 5px; 
}

.mp-f label small { 
  font-weight: 400; 
  color: var(--p-gray); 
}
.mp-f label small { font-weight:400; color:var(--p-gray); }
/* Ensure the input wrapper always stretches to 100% of its strictly-sized column */
.mp-iw { 
  display: flex; 
  align-items: center; 
  width: 100%; 
  box-sizing: border-box;
  border: 1.5px solid var(--p-border); 
  border-radius: 8px; 
  overflow: hidden; 
  background: var(--p-white); 
  transition: border-color var(--p-trans); 
}
.mp-iw:focus-within { border-color:var(--p-navy); }
.mp-pre,.mp-suf { background:var(--p-bg); color:var(--p-gray); font-size:0.76rem; font-weight:600; padding:0 9px; height:40px; display:flex; align-items:center; flex-shrink:0; }
.mp-pre { border-right:1.5px solid var(--p-border); }
.mp-suf { border-left:1.5px solid var(--p-border); }
.mp-iw input { flex:1; height:40px; border:none; outline:none; background:transparent; font-size:0.88rem; color:var(--p-dark); padding:0 9px; min-width:0; font-family:'Inter',sans-serif; }
.mp-sel { width:100%; height:40px; border:1.5px solid var(--p-border); border-radius:8px; background:var(--p-white); font-size:0.82rem; color:var(--p-dark); padding:0 9px; outline:none; cursor:pointer; transition:border-color var(--p-trans); font-family:'Inter',sans-serif; }
.mp-sel:focus { border-color:var(--p-navy); }

/* Points Selector */
.mp-pts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
.mp-pt-btn { padding:8px 4px; border:1.5px solid var(--p-border); border-radius:8px; background:var(--p-white); font-size:0.76rem; font-weight:700; color:var(--p-gray); cursor:pointer; text-align:center; transition:all var(--p-trans); }
.mp-pt-btn.active { background:var(--p-navy); border-color:var(--p-navy); color:#fff; }
.mp-pt-btn:hover:not(.active) { border-color:var(--p-navy); color:var(--p-navy); }

/* Stay slider */
.mp-slider-wrap { padding:4px 0; }
.mp-slider { width:100%; -webkit-appearance:none; height:5px; border-radius:4px; background: linear-gradient(to right, var(--p-navy) 0%, var(--p-navy) var(--pct, 30%), var(--p-border) var(--pct, 30%), var(--p-border) 100%); outline:none; cursor:pointer; }
.mp-slider::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--p-navy); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,40,104,0.35); cursor:pointer; }
.mp-slider-labels { display:flex; justify-content:space-between; font-size:0.65rem; color:var(--p-gray); margin-top:4px; }

/* ---- BUTTONS ---- */
.mp-calc-btn { width:100%; padding:13px; background:var(--p-navy); 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 var(--p-trans); display:flex; align-items:center; justify-content:center; gap:8px; }
.mp-calc-btn:hover { background:#001a4d; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,40,104,0.3); }
.mp-reset-btn { width:100%; padding:9px; background:transparent; color:var(--p-gray); font-size:0.76rem; font-weight:600; border:1.5px solid var(--p-border); border-radius:10px; cursor:pointer; margin-top:7px; transition:all var(--p-trans); }
.mp-reset-btn:hover { border-color:var(--p-red); color:var(--p-red); }
.mp-err { background:#FFF5F7; border:1.5px solid var(--p-red); border-radius:9px; padding:9px 13px; margin-bottom:10px; font-size:0.8rem; color:var(--p-red); display:none; align-items:center; gap:7px; }
.mp-err.show { display:flex; }

/* ---- RESULTS ---- */
.mp-empty { text-align:center; padding:60px 20px; color:var(--p-gray); }
.mp-empty-icon { font-size:3.2rem; display:block; margin-bottom:14px; opacity:0.3; }
.mp-empty p { font-size:0.84rem; line-height:1.7; }
.mp-results { display:none; }
.mp-results.show { display:block; }

/* ---- VERDICT BANNER ---- */
.mp-verdict { border-radius:14px; padding:18px 20px; margin-bottom:16px; display:flex; align-items:flex-start; gap:14px; }
.mp-verdict.win { background:#F0FBF6; border:1.5px solid rgba(0,135,90,0.25); }
.mp-verdict.warn { background:#FFFBEB; border:1.5px solid rgba(217,119,6,0.25); }
.mp-verdict.lose { background:#FFF5F7; border:1.5px solid rgba(191,10,48,0.18); }
.mp-verdict-icon { font-size:2rem; flex-shrink:0; line-height:1; }
.mp-verdict-title { font-family:'Montserrat','Inter',sans-serif; font-size:1rem; font-weight:800; margin-bottom:4px; }
.mp-verdict.win .mp-verdict-title { color:var(--p-green); }
.mp-verdict.warn .mp-verdict-title { color:var(--p-amber); }
.mp-verdict.lose .mp-verdict-title { color:var(--p-red); }
.mp-verdict-body { font-size:0.8rem; line-height:1.6; color:var(--p-dark); }

/* ---- KPI GRID ---- */
.mp-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px; }
.mp-kpi { background:var(--p-white); border:1px solid var(--p-border); border-radius:10px; padding:12px 13px; text-align:center; }
.mp-kpi.blue { background:#EFF6FF; border-color:rgba(2,132,199,0.2); }
.mp-kpi.green { background:#F0FBF6; border-color:rgba(0,135,90,0.2); }
.mp-kpi.purple { background:#F5F3FF; border-color:rgba(124,58,237,0.2); }
.mp-kpi.amber { background:#FFFBEB; border-color:rgba(217,119,6,0.2); }
.mp-kpi.red { background:#FFF5F7; border-color:rgba(191,10,48,0.15); }
.mp-kpi.teal { background:#F0F9FF; border-color:rgba(8,145,178,0.2); }
.mp-kpi-lbl { font-size:0.62rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--p-gray); margin-bottom:4px; }
.mp-kpi-val { font-family:'Montserrat','Inter',sans-serif; font-size:1.1rem; font-weight:800; color:var(--p-dark); }

/* ---- SCENARIO TABLE ---- */
.mp-scenario-wrap { background:var(--p-white); border:1px solid var(--p-border); border-radius:12px; padding:14px 16px; margin-bottom:16px; overflow-x:auto; }
.mp-scenario-title { font-family:'Montserrat','Inter',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--p-navy); margin-bottom:10px; }
.mp-tbl { width:100%; border-collapse:collapse; font-size:0.78rem; }
.mp-tbl th { background:var(--p-bg); padding:8px 10px; text-align:left; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--p-gray); border-bottom:1px solid var(--p-border); }
.mp-tbl td { padding:9px 10px; border-bottom:1px solid var(--p-border); color:var(--p-dark); font-variant-numeric:tabular-nums; }
.mp-tbl tr:last-child td { border-bottom:none; }
.mp-tbl tr.highlight { background:linear-gradient(90deg, #F0FBF6, #EFF6FF); }
.mp-tbl tr.highlight td { font-weight:700; }
.mp-badge-win { display:inline-block; background:var(--p-green); color:#fff; font-size:0.6rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:5px; }
.mp-badge-opt { display:inline-block; background:var(--p-sky); color:#fff; font-size:0.6rem; font-weight:700; padding:1px 7px; border-radius:10px; margin-left:5px; }

/* ---- CHART ---- */
.mp-chart-wrap { background:var(--p-white); border:1px solid var(--p-border); border-radius:12px; padding:16px; margin-bottom:16px; }
.mp-chart-title { font-family:'Montserrat','Inter',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--p-navy); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.mp-chart-tabs { display:flex; gap:6px; }
.mp-ctab { padding:4px 10px; font-size:0.66rem; font-weight:700; border:1.5px solid var(--p-border); border-radius:6px; background:transparent; color:var(--p-gray); cursor:pointer; transition:all var(--p-trans); }
.mp-ctab.active { background:var(--p-navy); border-color:var(--p-navy); color:#fff; }

/* ---- PMI & ARM WARNINGS ---- */
.mp-alert { background:#FFFBEB; border:1.5px solid rgba(217,119,6,0.3); border-radius:10px; padding:11px 14px; margin-bottom:14px; font-size:0.79rem; line-height:1.6; color:var(--p-dark); display:none; }
.mp-alert.show { display:flex; gap:10px; align-items:flex-start; }
.mp-alert-icon { flex-shrink:0; font-size:1.2rem; }
.mp-alert strong { color:var(--p-amber); }

/* ---- OPPORTUNITY COST ---- */
.mp-opp { background:var(--p-white); border:1.5px solid rgba(124,58,237,0.2); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.mp-opp-title { font-family:'Montserrat','Inter',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--p-purple); margin-bottom:10px; }
.mp-opp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mp-opp-block { background:var(--p-bg); border-radius:9px; padding:12px; text-align:center; }
.mp-opp-block.w { background:#F0FBF6; border:1px solid rgba(0,135,90,0.2); }
.mp-opp-block.l { background:#FFF5F7; border:1px solid rgba(191,10,48,0.15); }
.mp-opp-lbl { font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--p-gray); margin-bottom:5px; }
.mp-opp-val { font-family:'Montserrat','Inter',sans-serif; font-size:1.1rem; font-weight:900; }
.mp-opp-block.w .mp-opp-val { color:var(--p-green); }
.mp-opp-block.l .mp-opp-val { color:var(--p-red); }
.mp-opp-note { font-size:0.76rem; color:var(--p-dark); border-top:1px solid var(--p-border); padding-top:8px; margin-top:8px; line-height:1.55; }

/* ---- TAX DEDUCTION ---- */
.mp-tax { background:var(--p-white); border:1.5px solid rgba(8,145,178,0.2); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.mp-tax-title { font-family:'Montserrat','Inter',sans-serif; font-size:0.7rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--p-teal); margin-bottom:10px; }
.mp-tax-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px; }
.mp-tax-item { background:var(--p-bg); border-radius:8px; padding:10px; text-align:center; }
.mp-tax-lbl { font-size:0.61rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--p-gray); margin-bottom:3px; }
.mp-tax-val { font-family:'Montserrat','Inter',sans-serif; font-size:0.95rem; font-weight:800; color:var(--p-teal); }
.mp-tax-note { font-size:0.74rem; color:var(--p-gray); line-height:1.5; }

/* ---- ACTIONS ---- */
.mp-actions { display:flex; gap:8px; margin-top:4px; }
.mp-action-btn { flex:1; padding:10px; border:1.5px solid var(--p-border); border-radius:9px; background:var(--p-white); font-size:0.76rem; font-weight:700; color:var(--p-dark); cursor:pointer; transition:all var(--p-trans); display:flex; align-items:center; justify-content:center; gap:6px; }
.mp-action-btn:hover { border-color:var(--p-navy); color:var(--p-navy); }
.mp-action-btn.primary { background:var(--p-navy); border-color:var(--p-navy); color:#fff; }
.mp-action-btn.primary:hover { background:#001a4d; }

/* ---- RESPONSIVE ---- */
@media (max-width:960px) { .mp-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .mp-r2 { grid-template-columns:1fr; } .mp-kpis { grid-template-columns:1fr 1fr; } .mp-opp-grid { grid-template-columns:1fr; } .mp-tax-grid { grid-template-columns:1fr 1fr; } .mp-header { padding:26px 18px 20px; } .mp-panel { padding:18px 14px; } .mp-pts-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width:480px) { .mp-kpis { grid-template-columns:1fr; } .mp-pts-grid { grid-template-columns:repeat(4,1fr); } .mp-actions { flex-direction:column; } }

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION TOKENS — mirrors .mp- prefix system exactly
═══════════════════════════════════════════════════════════════ */
.mp-sections-wrap {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--p-dark, #1D1D1F);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Section container */
.mp-section {
  background: var(--p-white, #FFFFFF);
  border: 1px solid var(--p-border, #E0E4E8);
  border-radius: 16px;
  padding: 28px 28px 24px;
  margin-top: 22px;
}

/* Section heading band */
.mp-section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--p-border, #E0E4E8);
}

.mp-section-hd-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.mp-section-hd-icon.navy  { background: #EFF6FF; }
.mp-section-hd-icon.green { background: #F0FBF6; }
.mp-section-hd-icon.amber { background: #FFFBEB; }
.mp-section-hd-icon.purple{ background: #F5F3FF; }
.mp-section-hd-icon.teal  { background: #F0F9FF; }
.mp-section-hd-icon.red   { background: #FFF5F7; }

.mp-section-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 1.0rem;
  font-weight: 800;
  color: var(--p-navy, #002868);
  margin: 0;
  letter-spacing: 0.01em;
}

.mp-section-sub {
  font-size: 0.78rem;
  color: var(--p-gray, #5F6368);
  margin: 2px 0 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   1. HOW IT WORKS
═══════════════════════════════════════════════════════════════ */
.mp-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.mp-step-card {
  background: var(--p-bg, #F7F9FC);
  border: 1px solid var(--p-border, #E0E4E8);
  border-radius: 12px;
  padding: 16px 14px;
  position: relative;
  transition: border-color var(--p-trans, 0.2s ease), box-shadow var(--p-trans);
}

.mp-step-card:hover {
  border-color: var(--p-navy, #002868);
  box-shadow: 0 4px 14px rgba(0,40,104,0.10);
}

.mp-step-num {
  width: 28px;
  height: 28px;
  background: var(--p-navy, #002868);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

.mp-step-card h4 {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--p-navy, #002868);
  margin: 0 0 6px;
}

.mp-step-card p {
  font-size: 0.78rem;
  color: var(--p-gray, #5F6368);
  margin: 0;
  line-height: 1.55;
}

/* Formula box */
.mp-formula-box {
  background: #EFF6FF;
  border: 1.5px solid rgba(0,40,104,0.18);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 0 14px;
  font-size: 0.82rem;
  color: var(--p-dark, #1D1D1F);
  line-height: 1.7;
}

.mp-formula-box strong { color: var(--p-navy, #002868); }

.mp-formula-box code {
  display: block;
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  background: rgba(0,40,104,0.07);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0;
  color: var(--p-navy, #002868);
  font-weight: 700;
}

/* Tabs for scenarios */
.mp-hiw-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.mp-hiw-tab {
  padding: 5px 14px;
  border: 1.5px solid var(--p-border, #E0E4E8);
  border-radius: 8px;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  background: transparent;
  color: var(--p-gray, #5F6368);
  cursor: pointer;
  transition: all var(--p-trans, 0.2s ease);
}

.mp-hiw-tab.active {
  background: var(--p-navy, #002868);
  border-color: var(--p-navy, #002868);
  color: #fff;
}

.mp-infobox {
  border-left: 3.5px solid;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 0.79rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

.mp-infobox.tip    { background: #EFF6FF; border-color: var(--p-sky, #0284c7); color: #1E3A5F; }
.mp-infobox.green  { background: #F0FBF6; border-color: var(--p-green, #00875A); color: #065F46; }
.mp-infobox.amber  { background: #FFFBEB; border-color: var(--p-amber, #D97706); color: #78350F; }
.mp-infobox.purple { background: #F5F3FF; border-color: var(--p-purple, #7C3AED); color: #3B0764; }
.mp-infobox.teal   { background: #F0F9FF; border-color: var(--p-teal, #0891B2); color: #164E63; }
.mp-infobox.red    { background: #FFF5F7; border-color: var(--p-red, #BF0A30); color: #7F1D1D; }

.mp-infobox strong { display: block; margin-bottom: 2px; font-size: 0.8rem; }

/* ═══════════════════════════════════════════════════════════════
   2. WORKED EXAMPLES
═══════════════════════════════════════════════════════════════ */
.mp-examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
}

.mp-ex-card {
  border: 1.5px solid var(--p-border, #E0E4E8);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--p-trans), box-shadow var(--p-trans);
}

.mp-ex-card:hover {
  border-color: var(--p-sky, #0284c7);
  box-shadow: 0 4px 16px rgba(2,132,199,0.12);
}

.mp-ex-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.mp-ex-head.navy   { background: linear-gradient(135deg, #001840, #002868); color:#fff; }
.mp-ex-head.green  { background: linear-gradient(135deg, #00664A, #00875A); color:#fff; }
.mp-ex-head.amber  { background: linear-gradient(135deg, #B45309, #D97706); color:#fff; }
.mp-ex-head.purple { background: linear-gradient(135deg, #5B21B6, #7C3AED); color:#fff; }
.mp-ex-head.teal   { background: linear-gradient(135deg, #0E7490, #0891B2); color:#fff; }

.mp-ex-icon { font-size: 1.4rem; }

.mp-ex-head h4 {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0 0 1px;
  color: #fff;
}

.mp-ex-head p {
  font-size: 0.69rem;
  opacity: 0.82;
  margin: 0;
  color: #fff;
}

.mp-ex-body {
  padding: 14px 16px;
  background: var(--p-white, #FFFFFF);
}

.mp-ex-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--p-border, #E0E4E8);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 0.78rem;
}

.mp-ex-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 11px;
  background: var(--p-white, #FFFFFF);
}

.mp-ex-row.hl {
  background: #EFF6FF;
  font-weight: 700;
}

.mp-ex-row.green-hl { background: #F0FBF6; font-weight: 700; }
.mp-ex-row.amber-hl { background: #FFFBEB; font-weight: 700; }

.mp-ex-row span:first-child { color: var(--p-gray, #5F6368); }
.mp-ex-row span:last-child  { font-family: Montserrat, Inter, sans-serif; font-weight: 700; color: var(--p-dark, #1D1D1F); }

.mp-ex-verdict {
  font-size: 0.75rem;
  border-radius: 7px;
  padding: 7px 10px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.mp-ex-verdict.win  { background: #F0FBF6; color: #065F46; }
.mp-ex-verdict.lose { background: #FFF5F7; color: #7F1D1D; }
.mp-ex-verdict.warn { background: #FFFBEB; color: #78350F; }

.mp-ex-verdict-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   3. FAQ
═══════════════════════════════════════════════════════════════ */
.mp-faq-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-faq-item {
  border: 1.5px solid var(--p-border, #E0E4E8);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color var(--p-trans);
}

.mp-faq-item.open {
  border-color: var(--p-navy, #002868);
}

.mp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--p-white, #FFFFFF);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p-dark, #1D1D1F);
  gap: 10px;
  transition: background var(--p-trans);
}

.mp-faq-item.open .mp-faq-q {
  background: #EFF6FF;
  color: var(--p-navy, #002868);
}

.mp-faq-q-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-faq-q-icon {
  width: 22px;
  height: 22px;
  background: var(--p-bg, #F7F9FC);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.mp-faq-item.open .mp-faq-q-icon {
  background: var(--p-navy, #002868);
  color: #fff;
}

.mp-faq-arrow {
  font-size: 0.75rem;
  color: var(--p-gray, #5F6368);
  transition: transform var(--p-trans);
  flex-shrink: 0;
}

.mp-faq-item.open .mp-faq-arrow {
  transform: rotate(180deg);
  color: var(--p-navy, #002868);
}

.mp-faq-a {
  display: none;
  padding: 12px 16px 14px;
  font-size: 0.79rem;
  color: var(--p-dark, #1D1D1F);
  line-height: 1.7;
  background: var(--p-white, #FFFFFF);
  border-top: 1px solid var(--p-border, #E0E4E8);
}

.mp-faq-item.open .mp-faq-a { display: block; }

.mp-faq-a strong { color: var(--p-navy, #002868); }

.mp-faq-a ul {
  margin: 8px 0 0 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.79rem;
}

/* ═══════════════════════════════════════════════════════════════
   4. PRO TIPS
═══════════════════════════════════════════════════════════════ */
.mp-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.mp-tip-card {
  border-radius: 12px;
  padding: 16px;
  border: 1.5px solid;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow var(--p-trans);
}

.mp-tip-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.09);
}

.mp-tip-card.t-navy  { background: #EFF6FF; border-color: rgba(0,40,104,0.18); }
.mp-tip-card.t-green { background: #F0FBF6; border-color: rgba(0,135,90,0.20); }
.mp-tip-card.t-amber { background: #FFFBEB; border-color: rgba(217,119,6,0.22); }
.mp-tip-card.t-purple{ background: #F5F3FF; border-color: rgba(124,58,237,0.20); }
.mp-tip-card.t-teal  { background: #F0F9FF; border-color: rgba(8,145,178,0.20); }

.mp-tip-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mp-tip-num {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 0.72rem;
  flex-shrink: 0;
  color: #fff;
}

.t-navy  .mp-tip-num  { background: var(--p-navy, #002868); }
.t-green .mp-tip-num  { background: var(--p-green, #00875A); }
.t-amber .mp-tip-num  { background: var(--p-amber, #D97706); }
.t-purple .mp-tip-num { background: var(--p-purple, #7C3AED); }
.t-teal  .mp-tip-num  { background: var(--p-teal, #0891B2); }

.mp-tip-label {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.t-navy  .mp-tip-label  { color: var(--p-navy, #002868); }
.t-green .mp-tip-label  { color: var(--p-green, #00875A); }
.t-amber .mp-tip-label  { color: #92400E; }
.t-purple .mp-tip-label { color: var(--p-purple, #7C3AED); }
.t-teal  .mp-tip-label  { color: var(--p-teal, #0891B2); }

.mp-tip-card h4 {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--p-dark, #1D1D1F);
  margin: 0;
}

.mp-tip-card p {
  font-size: 0.78rem;
  color: var(--p-gray, #5F6368);
  margin: 0;
  line-height: 1.6;
}

.mp-tip-card p strong { color: var(--p-dark, #1D1D1F); }

.mp-tip-highlight {
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 0.75rem;
  line-height: 1.5;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.t-navy  .mp-tip-highlight { background: rgba(0,40,104,0.08); color: var(--p-navy, #002868); }
.t-green .mp-tip-highlight { background: rgba(0,135,90,0.10); color: #065F46; }
.t-amber .mp-tip-highlight { background: rgba(217,119,6,0.12); color: #78350F; }
.t-purple .mp-tip-highlight { background: rgba(124,58,237,0.10); color: #3B0764; }
.t-teal  .mp-tip-highlight { background: rgba(8,145,178,0.10); color: #164E63; }

.mp-tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mp-tip-tag {
  font-size: 0.65rem;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid;
}

.t-navy  .mp-tip-tag { background: rgba(0,40,104,0.07); color: var(--p-navy, #002868); border-color: rgba(0,40,104,0.2); }
.t-green .mp-tip-tag { background: rgba(0,135,90,0.08); color: var(--p-green, #00875A); border-color: rgba(0,135,90,0.25); }
.t-amber .mp-tip-tag { background: rgba(217,119,6,0.08); color: #92400E; border-color: rgba(217,119,6,0.3); }
.t-purple .mp-tip-tag{ background: rgba(124,58,237,0.08); color: var(--p-purple,#7C3AED); border-color: rgba(124,58,237,0.25); }
.t-teal  .mp-tip-tag { background: rgba(8,145,178,0.08); color: var(--p-teal,#0891B2); border-color: rgba(8,145,178,0.25); }

/* ═══════════════════════════════════════════════════════════════
   5. RELATED CALCULATORS
═══════════════════════════════════════════════════════════════ */
.mp-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.mp-rel-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--p-border, #E0E4E8);
  border-radius: 11px;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  background: var(--p-white, #FFFFFF);
  transition: all var(--p-trans, 0.2s ease);
}

.mp-rel-card:hover {
  border-color: var(--p-navy, #002868);
  background: #EFF6FF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,40,104,0.10);
}

.mp-rel-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--p-bg, #F7F9FC);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: background var(--p-trans);
}

.mp-rel-card:hover .mp-rel-icon {
  background: var(--p-navy, #002868);
}

.mp-rel-info { flex: 1; min-width: 0; }

.mp-rel-name {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--p-dark, #1D1D1F);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-rel-card:hover .mp-rel-name { color: var(--p-navy, #002868); }

.mp-rel-cat {
  font-size: 0.65rem;
  color: var(--p-gray, #5F6368);
  font-weight: 600;
}

.mp-rel-arrow {
  font-size: 0.75rem;
  color: var(--p-gray, #5F6368);
  transition: transform var(--p-trans), color var(--p-trans);
}

.mp-rel-card:hover .mp-rel-arrow {
  transform: translateX(3px);
  color: var(--p-navy, #002868);
}

/* ═══════════════════════════════════════════════════════════════
   6. DISCLAIMER & TRANSPARENCY
═══════════════════════════════════════════════════════════════ */
.mp-disclaimer-section {
  background: #FFFBEB;
  border: 1.5px solid rgba(217,119,6,0.3);
  border-radius: 16px;
  padding: 22px 24px;
  margin-top: 22px;
}

.mp-disclaimer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(217,119,6,0.2);
}

.mp-disclaimer-icon {
  font-size: 1.6rem;
}

.mp-disclaimer-title {
  font-family: Montserrat, Inter, sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  color: #92400E;
  margin: 0;
}

.mp-disclaimer-sub {
  font-size: 0.72rem;
  color: #B45309;
  margin: 2px 0 0 0;
}

.mp-disclaimer-body {
  font-size: 0.79rem;
  color: var(--p-dark, #1D1D1F);
  line-height: 1.7;
  margin-bottom: 14px;
}

.mp-disclaimer-body strong { color: #92400E; }

.mp-disc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.mp-disc-block {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.79rem;
  line-height: 1.6;
  color: var(--p-dark, #1D1D1F);
}

.mp-disc-block.warn   { background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.2); }
.mp-disc-block.teal   { background: rgba(8,145,178,0.07); border: 1px solid rgba(8,145,178,0.18); }

.mp-disc-block-title {
  font-family: Montserrat, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.warn .mp-disc-block-title { color: #92400E; }
.teal .mp-disc-block-title { color: var(--p-teal, #0891B2); }

.mp-disc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mp-disc-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.mp-disc-list li::before {
  content: "›";
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
  line-height: 1.3;
}

.warn .mp-disc-list li::before { color: #D97706; }
.teal .mp-disc-list li::before { color: var(--p-teal, #0891B2); }

/* Gov links row */
.mp-gov-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.mp-gov-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--p-white, #FFFFFF);
  border: 1.5px solid var(--p-border, #E0E4E8);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  color: var(--p-navy, #002868);
  text-decoration: none;
  transition: all var(--p-trans);
}

.mp-gov-link:hover {
  border-color: var(--p-navy, #002868);
  background: #EFF6FF;
}

/* Transparency strip */
.mp-trans-strip {
  background: linear-gradient(135deg, #001840, #002868);
  border-radius: 11px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.mp-trans-logo {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255,255,255,0.22);
  flex-shrink: 0;
}

.mp-trans-logo span {
  font-family: Montserrat, sans-serif;
  font-weight: 900;
  font-size: 0.75rem;
  color: #93c5fd;
  line-height: 1;
  text-align: center;
}

.mp-trans-content { flex: 1; }

.mp-trans-content p {
  font-size: 0.77rem;
  color: rgba(255,255,255,0.82);
  margin: 0 0 9px;
  line-height: 1.6;
}

.mp-trans-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.mp-trans-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #fff;
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 0.67rem;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.mp-trans-chip .ck { color: #6EE7B7; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .mp-section { padding: 22px 20px 18px; }
  .mp-disc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mp-section { padding: 18px 14px; }
  .mp-steps-grid { grid-template-columns: 1fr 1fr; }
  .mp-examples-grid { grid-template-columns: 1fr; }
  .mp-tips-grid { grid-template-columns: 1fr; }
  .mp-related-grid { grid-template-columns: 1fr 1fr; }
  .mp-disclaimer-section { padding: 18px 14px; }
  .mp-trans-strip { flex-direction: column; text-align: center; }
  .mp-trans-chips { justify-content: center; }
}

@media (max-width: 480px) {
  .mp-steps-grid { grid-template-columns: 1fr; }
  .mp-related-grid { grid-template-columns: 1fr; }
  .mp-section-title { font-size: 0.9rem; }
}

/* =========================================================
   📱 MOBILE CONTAINMENT FIX (PREVENT BLOWOUT)
   ========================================================= */
html, body { 
  max-width: 100vw !important; 
  overflow-x: hidden !important; 
}

/* Force grids, panels, and tables to shrink */
#mpWrapper, .mp-grid, .mp-panel, .mp-results, .mp-scenario-wrap, .mp-chart-wrap {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force Chart.js canvas to respect mobile boundaries */
canvas#mpChart {
  max-width: 100% !important;
  height: auto !important;
}