/**
 * Mortgage Calculator widget styles.
 *
 * Ported verbatim from /extras/milestone/HTML Elements/milestone-mortgage-calculator-v2.html
 * (the <style> block). All rules are scoped to .mms-calc so the calculator
 * can coexist with the rest of the Milestone site styles without leaking.
 *
 * Brand colors come from --mms-{token} where applicable, with hex fallbacks
 * inline so the calc still renders correctly even before the plugin's :root
 * variable injection resolves.
 */

/* ── ISOLATION RESET ─────────────────────────────────────────────── */
.mms-calc, .mms-calc *, .mms-calc *::before, .mms-calc *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}
.mms-calc h1,.mms-calc h2,.mms-calc h3,.mms-calc h4,.mms-calc h5,.mms-calc h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700; line-height: 1.2;
  margin: 0; padding: 0; border: none; background: none;
  color: #1f2937; letter-spacing: -0.01em;
}
.mms-calc p,.mms-calc ul,.mms-calc ol,.mms-calc li {
  margin: 0; padding: 0; list-style: none;
  font-family: 'DM Sans', sans-serif !important;
}
.mms-calc a { text-decoration: none; color: inherit; }
.mms-calc input,.mms-calc select,.mms-calc button,.mms-calc textarea {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.95rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;
}
.mms-calc input[type="number"]::-webkit-inner-spin-button,
.mms-calc input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

.mms-calc {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px; line-height: 1.5; color: #1f2937;
  background: transparent; padding: 0 0 48px; max-width: 1100px; margin: 0 auto;
  overflow-x: hidden;
  --p:   var(--mms-p,   #1e3295);
  --plt: var(--mms-p,   #1e3295);
  --pdk: var(--mms-pdk, #171e3b);
  --p50: #eff6ff; --p100: #dbeafe; --sec: var(--mms-sec, #0ea5c9);
  --n50: #f9fafb; --n100: #f3f4f6; --n200: #e5e7eb;
  --n300: #d1d5db; --n400: #9ca3af; --n500: #6b7280;
  --n600: #4b5563; --n700: #374151; --n800: #1f2937;
  --grn: #10b981; --blu: #60a5fa; --gold: #FFD017;
  --r: 0; --sh: 0 4px 24px rgba(23,30,59,0.08);
}

/* ── TABS ─────────────────────────────────────────────────────────── */
.mms-calc .tab-nav {
  background: white; border-radius: 15px; padding: 6px;
  display: flex; gap: 4px; box-shadow: var(--sh);
  border: 1px solid var(--n200); margin-bottom: 28px;
}
.mms-calc .tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border: none; border-radius: 999px;
  font-family: 'DM Sans', sans-serif !important; font-size: 0.875rem; font-weight: 500;
  cursor: pointer; transition: all 0.2s; background: transparent; color: var(--n500); line-height: 1;
}
.mms-calc .tab-btn:hover:not(.active) { background: var(--n50); color: var(--n700) !important; }
.mms-calc .tab-btn.active { background: var(--p); color: white !important; box-shadow: 0 2px 12px rgba(23,30,59,0.3); }
.mms-calc .tab-btn.active svg { color: white !important; stroke: white !important; }
.mms-calc .tab-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.mms-calc .tab-label-short { display: none; }
@media (max-width:900px) { .mms-calc .tab-label-full { display:none; } .mms-calc .tab-label-short { display:inline; } }
/* Mobile (≤520px, covers iPhone 14 Pro Max @430px) — wrap 4 tabs into a 2×2 grid
   so the longer short labels ("Affordability") don't overflow the container. */
@media (max-width:520px) {
  .mms-calc .tab-nav { flex-wrap: wrap; }
  .mms-calc .tab-btn { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px 8px; }
}
/* Below 340px (small Androids, never iPhones) — fall back to icon-only single row. */
@media (max-width:340px) {
  .mms-calc .tab-nav { flex-wrap: nowrap; }
  .mms-calc .tab-btn { flex: 1; }
  .mms-calc .tab-label-short { display:none; }
}

/* ── LAYOUT ───────────────────────────────────────────────────────── */
.mms-calc .calc-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width:900px) { .mms-calc .calc-layout { grid-template-columns: 1fr; } }

/* ── CARD ─────────────────────────────────────────────────────────── */
.mms-calc .card { background: white; border-radius: 15px; padding: 28px; box-shadow: var(--sh); border: 1px solid var(--n200); }
.mms-calc .card-title { font-size: 1.15rem; font-weight: 700; color: var(--n800); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; }
.mms-calc .card-title svg { color: var(--p); width: 20px; height: 20px; flex-shrink: 0; }
.mms-calc .card-subtitle { font-size: 0.85rem; color: var(--n500); margin-bottom: 24px; line-height: 1.5; }

/* ── LOAN TYPE SEGMENTED CONTROL ──────────────────────────────────── */
.mms-calc .loan-types {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 1.5px solid var(--n200); margin-bottom: 22px;
  border-radius: 999px; overflow: hidden;
}
@media (max-width:640px) {
  .mms-calc .loan-types { grid-template-columns: repeat(3, 1fr); border-radius: 15px; }
}
@media (max-width:480px) {
  .mms-calc .loan-types { grid-template-columns: 1fr; border-radius: 15px; }
  .mms-calc .loan-type-btn { border-right: none; border-bottom: 1px solid var(--n200); padding: 12px 8px; }
  .mms-calc .loan-type-btn:last-child { border-bottom: none; }
}
.mms-calc .loan-type-btn {
  padding: 10px 6px; border: none; background: white; cursor: pointer;
  font-family: 'DM Sans', sans-serif !important; font-size: 0.82rem; font-weight: 700;
  color: var(--n600); transition: all 0.15s; border-right: 1px solid var(--n200);
  text-align: center; line-height: 1.2;
}
.mms-calc .loan-type-btn:last-child { border-right: none; }
.mms-calc .loan-type-btn .lt-sub { display: block; font-size: 0.68rem; font-weight: 500; color: var(--n400); margin-top: 2px; }
.mms-calc .loan-type-btn:hover:not(.active) { background: var(--n50); color: var(--p); }
.mms-calc .loan-type-btn.active { background: var(--p); color: white; }
.mms-calc .loan-type-btn.active .lt-sub { color: rgba(255,255,255,0.75); }

/* ── FORM ─────────────────────────────────────────────────────────── */
.mms-calc .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 24px; }
@media (max-width:560px) { .mms-calc .form-grid { grid-template-columns: 1fr; } }
.mms-calc .field label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; font-weight: 700; color: var(--n600);
  margin-bottom: 7px; letter-spacing: 0.04em; text-transform: uppercase;
}
.mms-calc .field label .label-hint { font-size: 0.68rem; font-weight: 500; color: var(--n400); text-transform: none; letter-spacing: 0; }
.mms-calc .input-wrap { position: relative; }
.mms-calc .input-wrap .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--n400); width: 16px; height: 16px; pointer-events: none; }
.mms-calc .input-wrap input,
.mms-calc .field select {
  width: 100%; padding: 11px 14px 11px 38px; border: 1.5px solid var(--n200); border-radius: 999px;
  font-family: 'DM Sans', sans-serif !important; font-size: 0.95rem; color: var(--n800);
  background: white; transition: border-color 0.15s, box-shadow 0.15s; outline: none; line-height: 1.4;
}
.mms-calc .field select.no-icon { padding-left: 14px; }
.mms-calc .input-wrap input:focus, .mms-calc .field select:focus {
  border-color: var(--p); box-shadow: 0 0 0 3px rgba(30,50,149,0.1);
}

/* ── SCENARIOS ────────────────────────────────────────────────────── */
.mms-calc .scenarios-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
@media (max-width:560px) { .mms-calc .scenarios-grid { grid-template-columns: 1fr; } }
.mms-calc .scenario-btn { padding: 12px 14px; border: 1.5px solid var(--n200); border-radius: 999px; background: white; cursor: pointer; text-align: left; transition: all 0.15s; font-family: 'DM Sans', sans-serif !important; }
.mms-calc .scenario-btn:hover { border-color: var(--p); background: var(--p); }
.mms-calc .scenario-btn:hover .s-title { color: #ffffff !important; }
.mms-calc .scenario-btn:hover .s-sub { color: rgba(255,255,255,0.7) !important; }
.mms-calc .scenario-btn.active { border-color: var(--pdk); background: var(--pdk); outline: none; }
.mms-calc .scenario-btn.active .s-title { color: #ffffff !important; }
.mms-calc .scenario-btn.active .s-sub { color: rgba(255,255,255,0.7) !important; }
.mms-calc .scenario-btn:focus { outline: none; }
.mms-calc .scenario-btn:focus:not(.active) { border-color: var(--p); }
.mms-calc .scenario-btn .s-title { font-size: 0.82rem; font-weight: 700; color: var(--n700); display: block; margin-bottom: 2px; }
.mms-calc .scenario-btn .s-sub { font-size: 0.75rem; color: var(--n400); }

/* ── ADVANCED ─────────────────────────────────────────────────────── */
.mms-calc .advanced-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font-family: 'DM Sans', sans-serif !important; font-size: 0.875rem; font-weight: 700; color: var(--p); padding: 0; margin-bottom: 16px; }
.mms-calc .advanced-toggle svg { transition: transform 0.2s; }
.mms-calc .advanced-toggle.open svg { transform: rotate(180deg); }
.mms-calc .advanced-fields { display: none; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; padding: 18px; background: var(--n50); border-radius: 15px; border: 1px solid var(--n200); }
.mms-calc .advanced-fields.open { display: grid; }
@media (max-width:560px) { .mms-calc .advanced-fields { grid-template-columns: 1fr; } }

/* ── LOAN DISPLAY ─────────────────────────────────────────────────── */
.mms-calc .loan-display { background: var(--p50); border: 1.5px solid var(--p100); border-radius: 15px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 8px; }
.mms-calc .loan-display .loan-meta { display: flex; flex-direction: column; gap: 2px; }
.mms-calc .loan-display .loan-meta-label { font-size: 0.7rem; font-weight: 600; color: var(--n500); text-transform: uppercase; letter-spacing: 0.05em; }
.mms-calc .loan-display .loan-meta-val { font-size: 1.1rem; font-weight: 700; color: var(--p); }
.mms-calc .loan-display .loan-meta-val.small { font-size: 0.85rem; color: var(--n700); }

/* ── RESULTS ──────────────────────────────────────────────────────── */
.mms-calc .results-stack { display: flex; flex-direction: column; gap: 20px; }
.mms-calc .payment-card { background: linear-gradient(to top right, #171E3B 0%, #1E3295 100%); border-radius: 15px; padding: 28px; color: white; box-shadow: 0 8px 32px rgba(23,30,59,0.25); }
.mms-calc .payment-label { font-size: 0.75rem; font-weight: 700; opacity: 0.8; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.mms-calc .payment-amount { font-size: 2.8rem; font-weight: 700; margin-bottom: 20px; line-height: 1; letter-spacing: -0.02em; }
.mms-calc .payment-breakdown { border-top: 1px solid rgba(255,255,255,0.2); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.mms-calc .payment-row { display: flex; justify-content: space-between; font-size: 0.85rem; }
.mms-calc .payment-row span { opacity: 0.8; }
.mms-calc .payment-row strong { font-weight: 600; }
.mms-calc .lo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding: 12px 20px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border-radius: 999px !important;
  border: 1px solid #ffffff !important;
  background-color: transparent !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.3s, transform 0.4s;
}
.mms-calc .lo-cta svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #ffffff; }
.mms-calc .lo-cta:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: #ffffff !important;
  transform: translateX(7px);
  filter: brightness(95%);
}
@media (max-width: 768px) {
  .mms-calc .lo-cta { display: flex !important; width: 100% !important; }
  .mms-calc .lo-cta:hover { transform: none; }
  .mms-calc .lo-cta:active { filter: brightness(88%); }
}
@media (max-width: 480px) {
  .mms-calc .lo-cta { padding: 16px 20px; font-size: 15px !important; }
}

/* ── BAR ──────────────────────────────────────────────────────────── */
.mms-calc .bar-chart { width: 100%; height: 22px; border-radius: 999px; overflow: hidden; display: flex; margin-bottom: 12px; background: var(--n200); }
.mms-calc .bar-pi  { background: var(--p);   transition: width 0.4s ease; }
.mms-calc .bar-tax { background: var(--blu); transition: width 0.4s ease; }
.mms-calc .bar-ins { background: var(--grn); transition: width 0.4s ease; }
.mms-calc .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mms-calc .legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--n600); }
.mms-calc .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── SUMMARY ──────────────────────────────────────────────────────── */
.mms-calc .summary-rows { display: flex; flex-direction: column; gap: 16px; }
.mms-calc .summary-row p:first-child { font-size: 0.8rem; color: var(--n500); margin-bottom: 2px; }
.mms-calc .summary-row p:last-child { font-size: 1.25rem; font-weight: 700; color: var(--n800); }

/* ── PAYOFF SAVINGS ───────────────────────────────────────────────── */
.mms-calc .savings-card {
  background: #ecfdf5; border: 1.5px solid #a7f3d0; border-radius: 15px;
  padding: 18px 22px; display: flex; gap: 14px; align-items: flex-start;
}
.mms-calc .savings-card .savings-icon {
  flex-shrink: 0; width: 36px; height: 36px;
  background: var(--grn); color: white; display: flex; align-items: center; justify-content: center;
}
.mms-calc .savings-card .savings-icon svg { width: 18px; height: 18px; }
.mms-calc .savings-card .savings-body { flex: 1; }
.mms-calc .savings-card .savings-label {
  font-size: 0.7rem; font-weight: 700; color: #047857;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.mms-calc .savings-card .savings-headline {
  font-size: 1rem; font-weight: 700; color: #064e3b;
  line-height: 1.4; margin-bottom: 4px;
}
.mms-calc .savings-card .savings-detail {
  font-size: 0.8rem; color: #065f46; line-height: 1.5;
}
.mms-calc .savings-card.is-empty { display: none; }

/* ── AFFORDABILITY ────────────────────────────────────────────────── */
.mms-calc .afford-result { background: var(--p50); border: 1.5px solid var(--p100); border-radius: 15px; padding: 24px; margin-top: 8px; }
.mms-calc .afford-result h4 { font-size: 0.75rem; font-weight: 700; color: var(--pdk); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.mms-calc .afford-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: center; margin-bottom: 20px; }
.mms-calc .afford-item p:first-child { font-size: 0.78rem; color: var(--n500); margin-bottom: 4px; }
.mms-calc .afford-item p:last-child { font-size: 1.2rem; font-weight: 700; color: var(--p); }
.mms-calc .use-values-btn { width: 100%; padding: 12px; background: var(--p); color: white; border: none; border-radius: 999px; font-family: 'DM Sans', sans-serif !important; font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.mms-calc .use-values-btn:hover { background: var(--plt); }

/* ── AMORTIZATION ─────────────────────────────────────────────────── */
.mms-calc .amort-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width:700px) { .mms-calc .amort-controls { grid-template-columns: 1fr 1fr; } }
@media (max-width:480px) { .mms-calc .amort-controls { grid-template-columns: 1fr; } }
.mms-calc .amort-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width:700px) { .mms-calc .amort-summary { grid-template-columns: 1fr 1fr; } }
.mms-calc .amort-stat { background: var(--n50); border: 1px solid var(--n200); border-radius: 15px; padding: 14px; text-align: center; }
.mms-calc .amort-stat .label { font-size: 0.73rem; color: var(--n500); margin-bottom: 4px; font-weight: 500; }
.mms-calc .amort-stat .value { font-size: 0.95rem; font-weight: 700; color: var(--n800); }
.mms-calc .table-wrap { overflow-x: auto; border-radius: 15px; border: 1px solid var(--n200); }
.mms-calc table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mms-calc thead th { background: var(--n50); padding: 11px 14px; text-align: right; font-weight: 700; font-size: 0.73rem; color: var(--n500); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--n200); white-space: nowrap; font-family: 'DM Sans', sans-serif !important; }
.mms-calc thead th:first-child { text-align: left; }
.mms-calc tbody td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--n100); color: var(--n700); }
.mms-calc tbody td:first-child { text-align: left; font-weight: 600; color: var(--n800); }
.mms-calc tbody tr:last-child td { border-bottom: none; }
.mms-calc tbody tr:hover td { background: var(--p50); }
.mms-calc .td-interest  { color: #e55; font-weight: 500; }
.mms-calc .td-principal { color: var(--p); font-weight: 500; }
.mms-calc .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.mms-calc .page-btn { padding: 6px 14px; border: 1.5px solid var(--n200); border-radius: 999px; background: white; font-family: 'DM Sans', sans-serif !important; font-size: 0.82rem; font-weight: 600; cursor: pointer; color: var(--n600); transition: all 0.15s; }
.mms-calc .page-btn:hover:not(:disabled) { border-color: var(--p); color: var(--p); }
.mms-calc .page-btn:disabled { opacity: 0.4; cursor: default; }
.mms-calc .page-info { font-size: 0.82rem; color: var(--n500); }
.mms-calc .year-toggle { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mms-calc .year-btn { padding: 5px 14px; border: 1.5px solid var(--n200); border-radius: 999px; background: white; font-family: 'DM Sans', sans-serif !important; font-size: 0.78rem; font-weight: 600; cursor: pointer; color: var(--n600); transition: all 0.15s; }
.mms-calc .year-btn.active { background: var(--p); color: white !important; border-color: var(--p); }

/* ── MISC ─────────────────────────────────────────────────────────── */
.mms-calc .tab-panel { display: none; }
.mms-calc .tab-panel.active { display: block; }
.mms-calc .section-label { font-size: 0.73rem; font-weight: 700; color: var(--n500); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }

/* ── TOOLTIPS / TERMS ─────────────────────────────────────────────── */
.mms-calc .term {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  background: var(--p100);
  color: var(--p);
  border-radius: 50%;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px;
  font-weight: 800;
  cursor: help;
  position: relative;
  outline: none;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}
.mms-calc .term::before { content: "?"; }
.mms-calc .term:hover, .mms-calc .term:focus { background: var(--p); color: white; }
.mms-calc .term-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--pdk);
  color: white;
  border-radius: 15px;
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.55;
  width: 240px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.mms-calc .term-tip::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--pdk);
}
.mms-calc .term:hover .term-tip,
.mms-calc .term:focus .term-tip { opacity: 1; visibility: visible; }

/* ── SIMPLE MODE TAB ──────────────────────────────────────────────── */
.mms-calc .simple-intro {
  background: var(--p50);
  border-left: 4px solid var(--p);
  border-radius: 15px;
  padding: 18px 22px;
  margin-bottom: 28px;
}
.mms-calc .simple-intro h3 {
  font-size: 1.25rem; font-weight: 700; color: var(--pdk);
  margin-bottom: 6px;
}
.mms-calc .simple-intro p {
  font-size: 0.9rem; color: var(--n600); line-height: 1.6;
}
.mms-calc .simple-form {
  display: grid; grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px;
}
.mms-calc .simple-field label {
  display: flex; align-items: center;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 1rem; font-weight: 700; color: var(--n800);
  margin-bottom: 4px; text-transform: none; letter-spacing: 0;
}
.mms-calc .simple-field .simple-help {
  font-size: 0.82rem; color: var(--n500); line-height: 1.5;
  margin-bottom: 10px;
}
.mms-calc .simple-field select {
  width: 100%; padding: 11px 14px; border: 1.5px solid var(--n200); border-radius: 999px;
  font-family: 'DM Sans', sans-serif !important; font-size: 0.95rem; color: var(--n800);
  background: white; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.mms-calc .simple-field select:focus { border-color: var(--p); box-shadow: 0 0 0 3px rgba(30,50,149,0.1); }

.mms-calc .simple-result {
  background: linear-gradient(to top right, #171E3B 0%, #1E3295 100%);
  border-radius: 15px; padding: 32px; color: white;
  box-shadow: 0 8px 32px rgba(23,30,59,0.25);
}
.mms-calc .simple-result-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.8; margin-bottom: 8px;
}
.mms-calc .simple-result-amount {
  font-size: 3rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.mms-calc .simple-result-detail {
  font-size: 0.85rem; opacity: 0.85; line-height: 1.6; margin-bottom: 24px;
}
.mms-calc .simple-breakdown {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 15px;
  padding: 20px; margin-bottom: 24px;
}
.mms-calc .simple-breakdown h4 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
  margin-bottom: 14px;
}
.mms-calc .simple-breakdown ul { display: flex; flex-direction: column; gap: 12px; }
.mms-calc .simple-breakdown li {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.9rem; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mms-calc .simple-breakdown li:last-child { border-bottom: none; padding-bottom: 0; }
.mms-calc .simple-breakdown .bk-label { display: inline-flex; align-items: center; opacity: 0.9; }
.mms-calc .simple-breakdown .bk-amount { font-weight: 700; }

.mms-calc .simple-result .term { background: rgba(255,255,255,0.18); color: white; }
.mms-calc .simple-result .term:hover, .mms-calc .simple-result .term:focus { background: white; color: var(--pdk); }

.mms-calc .simple-cta-block h4 {
  font-size: 1rem; font-weight: 700; color: white; margin-bottom: 6px;
}
.mms-calc .simple-cta-block p {
  font-size: 0.85rem; opacity: 0.85; line-height: 1.6; margin-bottom: 14px;
}

/* ── COMPLIANCE FOOTER ────────────────────────────────────────────── */
.mms-calc .compliance {
  margin: 28px auto 0; padding: 22px 24px;
  background: var(--n50); border: 1px solid var(--n200);
  border-radius: 15px;
  font-size: 0.78rem; line-height: 1.6; color: var(--n600);
  max-width: 900px;
}
.mms-calc .compliance .comp-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.mms-calc .compliance .comp-row:last-child { margin-bottom: 0; }
/* Text fallback (when no logo URL is set in admin) */
.mms-calc .compliance div.eho-logo {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 2px solid var(--n700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.65rem; color: var(--n700);
}

/* Logo image — cap hard against any theme img { width: 100% } rule.
   max-width + max-height + width + height + !important everywhere so
   nothing can balloon the asset to its natural pixel size. */
.mms-calc .compliance img.eho-logo,
.mms-calc img.eho-logo {
  flex-shrink: 0 !important;
  display: inline-block !important;
  width: auto !important;
  height: 40px !important;
  max-height: 40px !important;
  max-width: 80px !important;
  min-width: 0 !important;
  border: none !important;
  object-fit: contain !important;
}
.mms-calc .compliance .comp-text strong { color: var(--n800); font-weight: 700; }
.mms-calc .compliance a { color: var(--p); text-decoration: underline; }
.mms-calc .compliance a:hover { color: var(--plt); }
.mms-calc .compliance hr { border: none; border-top: 1px solid var(--n200); margin: 14px 0; }

/* ── PROTOCOL BREAKPOINTS ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .mms-calc .card { padding: 24px; }
  .mms-calc .payment-card { padding: 24px; }
  .mms-calc .simple-result { padding: 28px; }
}
@media (max-width: 768px) {
  .mms-calc { padding: 0 16px 40px; }
  .mms-calc .card { padding: 20px; }
  .mms-calc .payment-card { padding: 22px; }
  .mms-calc .simple-result { padding: 24px; }
  .mms-calc .simple-intro { padding: 16px 18px; }
  .mms-calc .compliance { padding: 18px 20px; }
}
@media (max-width: 480px) {
  .mms-calc .card { padding: 18px 16px; }
  .mms-calc .card-title { font-size: 1.05rem; }
  .mms-calc .payment-card { padding: 20px 18px; }
  .mms-calc .payment-amount { font-size: 2.1rem; }
  .mms-calc .simple-result { padding: 22px 18px; }
  .mms-calc .simple-result-amount { font-size: 2.25rem; }
  .mms-calc .simple-intro h3 { font-size: 1.1rem; }
  .mms-calc .afford-result { padding: 18px; }
  .mms-calc .afford-grid { grid-template-columns: 1fr; gap: 14px; text-align: left; }
  .mms-calc .afford-item { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .mms-calc .afford-item p:first-child { margin-bottom: 0; }
  .mms-calc .afford-item p:last-child { font-size: 1.1rem; }
  .mms-calc .use-values-btn { white-space: normal; line-height: 1.3; padding: 12px 14px; }
  .mms-calc .summary-row p:last-child { font-size: 1.1rem; }
  .mms-calc .amort-stat { padding: 12px; }
  .mms-calc .amort-stat .value { font-size: 0.88rem; }
  .mms-calc thead th, .mms-calc tbody td { padding: 8px 10px; font-size: 0.78rem; }

  .mms-calc .table-wrap { border: none; border-radius: 0; overflow: visible; padding: 2px; }
  .mms-calc .table-wrap table,
  .mms-calc .table-wrap thead,
  .mms-calc .table-wrap tbody,
  .mms-calc .table-wrap tr,
  .mms-calc .table-wrap td,
  .mms-calc .table-wrap th { display: block; }
  .mms-calc .table-wrap thead { position: absolute; left: -9999px; }
  .mms-calc .table-wrap tbody tr {
    background: #fff;
    border: 1px solid var(--n200);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }
  .mms-calc .table-wrap tbody tr:hover td { background: transparent; }
  .mms-calc .table-wrap tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 6px 0;
    border-bottom: none;
    text-align: right;
    font-size: 0.88rem;
  }
  .mms-calc .table-wrap tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--n500);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
  }
  .mms-calc .table-wrap tbody td:first-child {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--n800);
    text-align: left;
    padding: 0 0 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--n100);
  }
  .mms-calc .table-wrap tbody td:first-child::before { content: ''; display: none; }
}

/* ── MOBILE EDGE-TO-EDGE ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .mms-calc {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
  }
  .mms-calc .card { padding: 20px 16px; }
}