.morg-page {
      --morg-navy:    #0F2A4A;
      --morg-blue:    #1A56DB;
      --morg-sky:     #EBF3FF;
      --morg-green:   #16A34A;
      --morg-green-lt:#F0FDF4;
      --morg-amber:   #D97706;
      --morg-amber-lt:#FFFBEB;
      --morg-red:     #DC2626;
      --morg-slate:   #64748B;
      --morg-border:  #E2E8F0;
      --morg-white:   #FFFFFF;
      --morg-bg:      #F8FAFC;
      --morg-text:    #1E293B;
      --morg-radius:  10px;
      --morg-shadow:  0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
      font-family: 'Inter', sans-serif;
      background: var(--morg-bg);
      color: var(--morg-text);
      font-size: inherit;
      line-height: 1.6;
    }
    .morg-page *, .morg-page *::before, .morg-page *::after { box-sizing: border-box; }
    .morg-page h1,.morg-page h2,.morg-page h3,.morg-page h4 { line-height: 1.25; margin: 0; padding: 0; }

    /* ── 1. HEADER ── */
    
    
    /* Hero (still part of "header zone") */
    .morg-hero {
      background: linear-gradient(135deg, var(--morg-navy) 0%, #1A3A6B 100%);
      padding: 36px 0 32px;
      color: #fff;
    }
    .morg-hero-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .morg-breadcrumb {
      padding-bottom: 12px;
      font-size: .8rem;
      color: var(--morg-slate);
    }
    .morg-breadcrumb a { color: #94BBDD; }
    .morg-breadcrumb span { margin: 0 6px; }
    .morg-hero h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.5rem, 3.5vw, 2.3rem);
      font-weight: 400;
      margin-bottom: 10px;
    }
    .morg-hero p { color: #94BBDD; max-width: 640px; font-size: .95rem; line-height: 1.7; }
    .morg-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .morg-badge {
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(255,255,255,.2);
      color: #CBD5E1;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: .75rem;
      font-weight: 500;
    }
    .morg-badge-green {
      background: rgba(22,163,74,.2);
      border-color: rgba(22,163,74,.4);
      color: #86EFAC;
    }

    /* ── 2. MAIN PANEL (calc inputs + results) ── */
    .morg-page-wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .morg-body-layout {
      display: flex;
      gap: 28px;
      padding: 28px 0;
      align-items: flex-start;
    }
    .morg-main-panel {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* Calculator row: inputs card first (top), results card second (below) */
    .morg-calc-row {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: stretch;
    }
    .morg-inputs-col {
      width: 100%;
      min-width: 0;
    }
    .morg-results-col {
      width: 100%;
      min-width: 0;
    }

    /* Card */
    .morg-card {
      background: var(--morg-white);
      border: 1px solid var(--morg-border);
      border-radius: var(--morg-radius);
      box-shadow: var(--morg-shadow);
      padding: 22px;
    }
    .morg-card-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--morg-navy);
      margin-bottom: 18px;
      padding-bottom: 11px;
      border-bottom: 2px solid var(--morg-sky);
    }

    /* Tab nav (Purchase / Refi) */
    .morg-tab-nav {
      display: flex;
      border: 1px solid var(--morg-border);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 18px;
    }
    .morg-tab-btn {
      flex: 1;
      padding: 9px 6px;
      font-size: .78rem;
      font-weight: 600;
      border: none;
      background: #F8FAFC;
      color: var(--morg-slate);
      cursor: pointer;
      transition: all .2s;
    }
    .morg-tab-btn.morg-active { background: var(--morg-blue); color: #fff; }
    .morg-tab-btn:hover:not(.morg-active) { background: var(--morg-sky); color: var(--morg-navy); }

    /* Loan type row */
    .morg-loan-row {gap: 6px;margin-bottom: 16px;display:grid;grid-template-columns:repeat(2,1fr);}
    .morg-type-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: .72rem;
      font-weight: 600;
      border: 1.5px solid var(--morg-border);
      border-radius: 6px;
      background: #fff;
      color: var(--morg-slate);
      cursor: pointer;
      transition: all .2s;
      text-align: center;
    }
    .morg-type-btn.morg-active {
      border-color: var(--morg-blue);
      background: var(--morg-sky);
      color: var(--morg-blue);
    }

    /* Fields */
    .morg-field { margin-bottom: 13px; }
    .morg-field label {
      display: block;
      font-size: .78rem;
      font-weight: 600;
      color: var(--morg-navy);
      margin-bottom: 5px;
    }
    .morg-field label .morg-tip {
      font-weight: 400;
      color: var(--morg-slate);
      font-size: .72rem;
    }
    .morg-input-wrap { position: relative; }
    .morg-input-wrap .morg-prefix,
    .morg-input-wrap .morg-suffix {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      color: var(--morg-slate);
      font-size: .85rem;
      font-weight: 500;
      pointer-events: none;
    }
    .morg-input-wrap .morg-prefix { left: 11px; }
    .morg-input-wrap .morg-suffix { right: 11px; }
    .morg-input-wrap input {
      width: 100%;
      padding: 10px 12px;
      border: 1.5px solid var(--morg-border);
      border-radius: 7px;
      font-size: .9rem;
      font-family: inherit;
      color: var(--morg-text);
      background: #fff;
      transition: border-color .2s, box-shadow .2s;
      -moz-appearance: textfield;
    }
    .morg-input-wrap input::-webkit-outer-spin-button,
    .morg-input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    .morg-input-wrap input:focus {
      outline: none;
      border-color: var(--morg-blue);
      box-shadow: 0 0 0 3px rgba(26,86,219,.1);
    }
    .morg-input-wrap.morg-has-prefix input { padding-left: 26px; }
    .morg-input-wrap.morg-has-suffix input { padding-right: 28px; }

    /* Slider */
    .morg-slider-wrap { margin-top: 4px; }
    .morg-slider-wrap input[type=range] {
      width: 100%;
      accent-color: var(--morg-blue);
      height: 4px;
      cursor: pointer;
    }
    .morg-slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: .68rem;
      color: var(--morg-slate);
      margin-top: 2px;
    }

    /* Section divider label */
    .morg-group-title {
      font-size: .7rem;
      font-weight: 700;
      color: var(--morg-slate);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin: 16px 0 10px;
    }

    /* Grid 2-col for pairs of inputs */
    .morg-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    /* Calc button */
    .morg-calc-btn {
      width: 100%;
      padding: 13px;
      background: var(--morg-blue);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .2s, transform .1s;
      margin-top: 8px;
      letter-spacing: .01em;
      font-family: inherit;
    }
    .morg-calc-btn:hover { background: #1648C0; }
    .morg-calc-btn:active { transform: scale(.99); }

    /* ── RESULTS PANEL ── */
    .morg-results-panel { padding: 22px; position: relative; }
    .morg-empty-state { text-align: center; padding: 40px 20px; color: var(--morg-slate); }
    .morg-empty-icon { font-size: 2.5rem; margin-bottom: 12px; opacity: .5; }

    /* Calculating / loading state */
    .morg-calc-loading {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 20px;
      color: var(--morg-slate);
    }
    .morg-spinner {
      width: 38px;
      height: 38px;
      border: 4px solid var(--morg-sky);
      border-top-color: var(--morg-blue);
      border-radius: 50%;
      animation: morg-spin .7s linear infinite;
      margin-bottom: 14px;
    }
    @keyframes morg-spin { to { transform: rotate(360deg); } }
    .morg-calc-loading p { font-weight: 600; color: var(--morg-navy); font-size: .92rem; }

    /* Fade transition for results content as it refreshes */
    #morg-resultsContent {
      opacity: 1;
      transition: opacity .15s ease;
    }
    #morg-resultsContent.morg-fading { opacity: 0; }

    /* "Updated" badge that flashes briefly after a fresh calculation */
    .morg-updated-badge {
      display: none;
      align-items: center;
      gap: 6px;
      font-size: .74rem;
      font-weight: 700;
      color: var(--morg-green);
      background: var(--morg-green-lt);
      border: 1px solid #BBF7D0;
      padding: 4px 10px;
      border-radius: 999px;
      margin-bottom: 14px;
      width: fit-content;
      animation: morg-fadein .25s ease;
    }
    .morg-updated-badge.morg-show { display: inline-flex; }
    .morg-updated-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--morg-green);
    }
    @keyframes morg-fadein { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }

    /* Stale-results notice shown if inputs change after a calculation but before recalculating */
    .morg-stale-banner {
      display: none;
      align-items: center;
      gap: 8px;
      font-size: .8rem;
      font-weight: 600;
      color: var(--morg-amber);
      background: var(--morg-amber-lt);
      border: 1px solid #FDE68A;
      padding: 8px 12px;
      border-radius: 8px;
      margin-bottom: 14px;
    }
    .morg-stale-banner.morg-show { display: flex; }

    /* Summary strip */
    .morg-summary-strip {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 11px;
      margin-bottom: 18px;
    }
    .morg-summary-item {
      background: var(--morg-sky);
      border-radius: 8px;
      padding: 13px;
    }
    .morg-summary-item.morg-highlight { background: var(--morg-navy); }
    .morg-s-label { font-size: .72rem; font-weight: 600; color: var(--morg-slate); margin-bottom: 4px; }
    .morg-highlight .morg-s-label { color: #94BBDD; }
    .morg-s-value { font-size: 1.3rem; font-weight: 700; color: var(--morg-navy); }
    .morg-highlight .morg-s-value { color: #fff; font-size: 1.5rem; }
    .morg-s-sub { font-size: .7rem; color: var(--morg-slate); margin-top: 2px; }
    .morg-highlight .morg-s-sub { color: #94BBDD; }

    /* PMI notice */
    .morg-pmi-notice {
      background: var(--morg-amber-lt);
      border: 1px solid #FCD34D;
      border-radius: 8px;
      padding: 11px 14px;
      margin-bottom: 15px;
      font-size: .8rem;
      color: #92400E;
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .morg-pmi-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

    /* Btn row */
    .morg-btn-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .morg-print-btn, .morg-share-btn {
      padding: 7px 14px;
      font-size: .76rem;
      font-weight: 600;
      border: 1.5px solid var(--morg-border);
      border-radius: 7px;
      background: #fff;
      color: var(--morg-slate);
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }
    .morg-print-btn:hover { border-color: var(--morg-blue); color: var(--morg-blue); }
    .morg-share-btn:hover { border-color: var(--morg-green); color: var(--morg-green); }

    /* Result tabs */
    .morg-rtab-nav {
      display: flex;
      border: 1px solid var(--morg-border);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 14px;
      flex-wrap:wrap;
    }
    .morg-rtab {
      flex: 1;
      padding: 8px 6px;
      font-size: .73rem;
      font-weight: 600;
      border: none;
      background: #F8FAFC;
      color: var(--morg-slate);
      cursor: pointer;
      transition: all .2s;
      font-family: inherit;
    }
    .morg-rtab.morg-active { background: var(--morg-navy); color: #fff; }
    .morg-rtab:hover:not(.morg-active) { background: var(--morg-sky); }

    /* Donut + legend */
    .morg-breakdown-row {
      display: flex;
      gap: 16px;
      margin-bottom: 18px;
      align-items: center;
      flex-wrap: wrap;
    }
    .morg-donut-wrap { flex: 0 0 140px; }
    .morg-donut-wrap svg { width: 140px; height: 140px; }
    .morg-legend { flex: 1; min-width: 160px; }
    .morg-legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: .8rem;
    }
    .morg-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
    .morg-l-label { color: var(--morg-slate); flex: 1; }
    .morg-l-val { font-weight: 700; color: var(--morg-navy); }

    /* Savings box */
    .morg-savings-box {
      background: var(--morg-green-lt);
      border: 1px solid #86EFAC;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 14px;
    }
    .morg-savings-box h4 { color: var(--morg-green); font-size: .85rem; font-weight: 700; margin-bottom: 10px; }
    .morg-savings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .morg-sv-label { font-size: .71rem; color: #166534; font-weight: 600; }
    .morg-sv-val { font-size: 1.05rem; font-weight: 700; color: var(--morg-green); }

    /* Amortization table */
    .morg-amort-wrap {
      overflow-x: auto;
      max-height: 320px;
      overflow-y: auto;
      border: 1px solid var(--morg-border);
      border-radius: 8px;
    }
    .morg-amort-table { width: 100%; border-collapse: collapse; font-size: .76rem; }
    .morg-amort-table th {
      background: var(--morg-navy);
      color: #fff;
      padding: 9px 10px;
      text-align: right;
      font-weight: 600;
      position: sticky;
      top: 0;
      z-index: 1;
      white-space: nowrap;
    }
    .morg-amort-table th:first-child { text-align: center; }
    .morg-amort-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--morg-border); }
    .morg-amort-table td:first-child { text-align: center; font-weight: 600; color: var(--morg-navy); }
    .morg-amort-table tr:last-child td { border-bottom: none; }
    .morg-amort-table tr:nth-child(even) td { background: #F8FAFC; }
    .morg-amort-table tr:hover td { background: var(--morg-sky); }
    .morg-year-row td { background: #EBF3FF !important; font-weight: 700; color: var(--morg-navy); font-size: .78rem; }

    /* Compare table */
    .morg-compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .morg-compare-table th {
      background: var(--morg-sky);
      color: var(--morg-navy);
      padding: 9px 12px;
      text-align: left;
      font-weight: 700;
      border-bottom: 2px solid var(--morg-border);
    }
    .morg-compare-table td { padding: 9px 12px; border-bottom: 1px solid var(--morg-border); }
    .morg-compare-table tr:last-child td { border-bottom: none; }
    .morg-compare-table .morg-win { color: var(--morg-green); font-weight: 700; }
    .morg-compare-table .morg-lose { color: var(--morg-red); }

    /* Affordability meter */
    .morg-afford-box {
      border: 1px solid var(--morg-border);
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 14px;
    }
    .morg-afford-box h4 { font-size: .85rem; font-weight: 700; color: var(--morg-navy); margin-bottom: 11px; }
    .morg-meter-row { margin-bottom: 10px; }
    .morg-m-label { display: flex; justify-content: space-between; font-size: .76rem; margin-bottom: 5px; }
    .morg-meter-bar { height: 8px; background: var(--morg-border); border-radius: 99px; overflow: hidden; }
    .morg-meter-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
    .morg-fill-good { background: var(--morg-green); }
    .morg-fill-warn { background: var(--morg-amber); }
    .morg-fill-bad  { background: var(--morg-red); }
    .morg-afford-verdict { font-size: .78rem; padding: 10px 12px; border-radius: 7px; margin-top: 8px; }
    .morg-verdict-good { background: var(--morg-green-lt); color: #166534; }
    .morg-verdict-warn { background: var(--morg-amber-lt); color: #92400E; }
    .morg-verdict-bad  { background: #FEF2F2; color: var(--morg-red); }

    /* ── INFO SECTIONS (below calculator, inside main panel) ── */
    .morg-info-section { padding: 32px 0 0; }
    .morg-info-section h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.15rem, 2.5vw, 1.6rem);
      font-weight: 400;
      color: var(--morg-navy);
      margin-bottom: 6px;
    }
    .morg-info-section .morg-lead { color: var(--morg-slate); margin-bottom: 22px; max-width: 640px; font-size: .91rem; }
    .morg-info-section h3 { font-size: .98rem; font-weight: 700; color: var(--morg-navy); margin: 18px 0 7px; }
    .morg-info-section p { color: #334155; margin-bottom: 11px; font-size: .89rem; line-height: 1.75; }
    .morg-info-section ul { padding-left: 20px; margin-bottom: 11px; }
    .morg-info-section li { color: #334155; font-size: .89rem; margin-bottom: 5px; line-height: 1.6; }
    .morg-section-label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--morg-slate);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 4px;
    }

    /* Formula box */
    .morg-formula-box {
      background: var(--morg-navy);
      border-radius: 10px;
      padding: 18px 22px;
      margin: 18px 0;
    }
    .morg-f-title { color: #94BBDD; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px; }
    .morg-f-formula { color: #60A5FA; font-family: monospace; font-size: 1rem; letter-spacing: .03em; margin-bottom: 9px; overflow-x:auto;white-space:nowrap;}
    .morg-f-vars { display: flex; flex-direction: column; gap: 4px; }
    .morg-f-var { color: #CBD5E1; font-size: .8rem; }
    .morg-f-var strong { color: #fff; }

    /* Worked example */
    .morg-worked-example {
      background: var(--morg-sky);
      border-radius: 10px;
      padding: 18px 22px;
      margin: 18px 0;
     overflow-x:auto;
    }
    .morg-worked-example h4 { color: var(--morg-navy); font-size: .88rem; font-weight: 700; margin-bottom: 11px; }
    .morg-we-step { display: flex; gap: 12px; margin-bottom: 8px; }
    .morg-we-num {
      background: var(--morg-navy);
      color: #fff;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .7rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .morg-we-text { color: #1E3A5F; font-size: .83rem; line-height: 1.6; }
    .morg-we-result {
      background: var(--morg-navy);
      color: #fff;
      border-radius: 8px;
      padding: 10px 14px;
      margin-top: 11px;
      font-size: .85rem;
    }

    /* Reference tables */
    .morg-ref-table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 14px 0; }
    .morg-ref-table th {
      background: var(--morg-navy);
      color: #fff;
      padding: 10px 12px;
      text-align: left;
      font-weight: 600;
    }
    .morg-ref-table td { padding: 9px 12px; border-bottom: 1px solid var(--morg-border); }
    .morg-ref-table tr:nth-child(even) td { background: #F8FAFC; }
    .morg-ref-table tr:last-child td { border-bottom: none; }

    /* FAQ */
    .morg-faq-section { padding: 32px 0 0; }
    .morg-faq-section h2 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.15rem, 2.5vw, 1.6rem);
      color: var(--morg-navy);
      margin-bottom: 6px;
    }
    .morg-faq-section .morg-lead { color: var(--morg-slate); margin-bottom: 22px; font-size: .91rem; }
    .morg-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--morg-border); border-radius: var(--morg-radius); overflow: hidden; }
    .morg-faq-item { border-bottom: 1px solid var(--morg-border); }
    .morg-faq-item:nth-child(odd) { border-right: 1px solid var(--morg-border); }
    .morg-faq-item:last-child, .morg-faq-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
    .morg-faq-q {
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 15px 18px;
      font-size: .87rem;
      font-weight: 600;
      color: var(--morg-navy);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      font-family: inherit;
    }
    .morg-faq-q:hover { background: var(--morg-sky); }
    .morg-faq-icon { font-size: .7rem; color: var(--morg-slate); transition: transform .2s; flex-shrink: 0; }
    .morg-faq-q.morg-open .morg-faq-icon { transform: rotate(180deg); }
    .morg-faq-a { padding: 0 18px 14px; font-size: .83rem; color: #334155; line-height: 1.75; display: none; }
    .morg-faq-a.morg-open { display: block; }

    
    /* ── PRINT ── */
    @media print {
      .morg-calc-btn, .morg-tab-nav, .morg-btn-row { display: none !important; }
      .morg-page { background: #fff; }
      .morg-card { box-shadow: none; border: 1px solid #ccc; }
      .morg-body-layout { display: block; }
    }





/* ── BMI Gauge ── */
    .bmi-gauge-wrap { margin: 0 0 18px; }
    .bmi-gauge-track {
      height: 18px; border-radius: 9px; position: relative; overflow: visible;
      background: linear-gradient(to right,
        #5b9bd5 0%,       /* underweight */
        #5b9bd5 18.5%,
        #4caf79 18.5%,    /* normal */
        #4caf79 25%,
        #f5a623 25%,      /* overweight */
        #f5a623 30%,
        #e05c5c 30%       /* obese */
      );
    }
    .bmi-gauge-needle {
      position: absolute; top: 50%; width: 3px; height: 28px;
      background: var(--morg-navy); border-radius: 2px;
      transform: translate(-50%, -50%); transition: left .5s ease;
    }
    .bmi-gauge-labels {
      display: flex; justify-content: space-between;
      font-size: .68rem; color: var(--morg-slate); margin-top: 5px;
    }
    .bmi-gauge-ticks { display: flex; justify-content: space-between; font-size:.68rem; color:var(--morg-slate); margin-top:2px; }

    /* ── BMI result summary cards ── */
    .bmi-summary-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 10px; margin: 0 0 18px;
    }
    .bmi-stat-card {
      background: var(--morg-sky); border: 1px solid var(--morg-border);
      border-radius: var(--morg-radius); padding: 12px 14px; text-align: center;
    }
    .bmi-stat-label { font-size: .72rem; color: var(--morg-slate); margin-bottom: 4px; }
    .bmi-stat-val   { font-size: 1.35rem; font-weight: 700; color: var(--morg-navy); }
    .bmi-stat-sub   { font-size: .7rem; color: var(--morg-slate); margin-top:2px; }

    /* ── Category badge ── */
    .bmi-cat-badge {
      display: inline-block; padding: 5px 16px; border-radius: 20px;
      font-size: .8rem; font-weight: 600; margin-bottom: 14px;
    }
    .bmi-cat-under   { background: #ddeeff; color: #1a5fa8; }
    .bmi-cat-normal  { background: #d6f0e2; color: #1e7044; }
    .bmi-cat-over    { background: #fef0d6; color: #8a5b00; }
    .bmi-cat-obese1  { background: #ffe0de; color: #9b2929; }
    .bmi-cat-obese2  { background: #ffd0cc; color: #861e1e; }
    .bmi-cat-obese3  { background: #ffc0bb; color: #721515; }

    /* ── Weight delta box ── */
    .bmi-delta-box {
      background: var(--morg-bg); border: 1px solid var(--morg-border);
      border-radius: var(--morg-radius); padding: 14px 16px; margin-bottom: 14px;
      font-size: .85rem; line-height: 1.6;
    }
    .bmi-delta-box strong { color: var(--morg-navy); }

    /* ── Ethnicity note ── */
    .bmi-ethnic-note {
      border-left: 3px solid #5b9bd5; background: #f0f6ff;
      border-radius: 0 var(--morg-radius) var(--morg-radius) 0;
      padding: 10px 14px; font-size: .8rem; margin-bottom: 14px; color: #2c4a6e;
    }

    /* ── Next steps ── */
    .bmi-steps-list { list-style: none; padding: 0; margin: 0; }
    .bmi-steps-list li {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 8px 0; border-bottom: 1px solid var(--morg-border);
      font-size: .82rem; line-height: 1.5;
    }
    .bmi-steps-list li:last-child { border-bottom: none; }
    .bmi-step-icon { font-size: 1.1rem; flex-shrink:0; margin-top:1px; }

    /* ── Age-by-age reference table ── */
    .bmi-age-table { width:100%; border-collapse:collapse; font-size:.82rem; }
    .bmi-age-table th { background:var(--morg-navy); color:#fff; padding:8px 10px; text-align:left; font-weight:600; }
    .bmi-age-table td { padding:7px 10px; border-bottom:1px solid var(--morg-border); }
    .bmi-age-table tr:nth-child(even) td { background:var(--morg-bg); }

    /* ── Mode toggle (Adult / Teen & Child) ── */
    .bmi-mode-bar {
      display: flex; gap: 6px; margin-bottom: 16px;
    }
    .bmi-mode-btn {
      flex: 1; padding: 8px 10px; border: 1px solid var(--morg-border);
      border-radius: var(--morg-radius); background: var(--morg-white);
      color: var(--morg-slate); font-size: .82rem; font-weight: 500; cursor: pointer;
      transition: all .15s;
    }
    .bmi-mode-btn.morg-active {
      background: var(--morg-navy); color: #fff; border-color: var(--morg-navy);
    }

    /* ── Child percentile bar ── */
    .bmi-pct-bar-wrap { position:relative; height:14px; border-radius:7px; overflow:hidden;
      background: linear-gradient(to right, #5b9bd5 5%, #4caf79 5% 85%, #f5a623 85% 95%, #e05c5c 95%);
      margin: 8px 0 4px;
    }
    .bmi-pct-needle {
      position:absolute; top:0; width:3px; height:100%;
      background: var(--morg-navy); border-radius:1px; transition: left .5s ease;
    }

    /* ── Unit toggle ── */
    .bmi-unit-toggle { display:flex; gap:6px; margin-bottom:14px; }
    .bmi-unit-btn { padding:6px 18px; border:1px solid var(--morg-border); border-radius:var(--morg-radius);
      background:var(--morg-white); color:var(--morg-slate); font-size:.82rem; cursor:pointer; }
    .bmi-unit-btn.morg-active { background:var(--morg-navy); color:#fff; border-color:var(--morg-navy); }

    /* ── Stale / loading / updated (re-use morg classes, just define aliases) ── */



 /* ── Affordability result cards ── */
    .maff-result-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .maff-stat-card {
      background: var(--morg-light-bg, #F8FAFF);
      border: 1px solid var(--morg-border, #E2E8F0);
      border-radius: var(--morg-radius, 10px);
      padding: 14px 12px;
      text-align: center;
    }
    .maff-stat-card.maff-primary {
      background: var(--morg-navy, #0F2A4A);
      border-color: var(--morg-navy, #0F2A4A);
    }
    .maff-stat-card.maff-primary .maff-stat-label { color: rgba(255,255,255,.65); }
    .maff-stat-card.maff-primary .maff-stat-val   { color: #fff; }
    .maff-stat-label {
      font-size: .72rem;
      color: var(--morg-slate, #64748B);
      margin-bottom: 5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .03em;
    }
    .maff-stat-val {
      font-size: 1.18rem;
      font-weight: 700;
      color: var(--morg-navy, #0F2A4A);
      line-height: 1.1;
    }
    .maff-stat-sub {
      font-size: .7rem;
      color: var(--morg-slate, #64748B);
      margin-top: 3px;
    }

    /* ── Mode switcher (income-based / payment-based / reverse) ── */
    .maff-mode-nav {
      display: flex;
      gap: 0;
      background: var(--morg-light-bg, #F1F5F9);
      border-radius: 8px;
      padding: 3px;
      margin-bottom: 18px;
    }
    .maff-mode-btn {
      flex: 1;
      padding: 7px 4px;
      border: none;
      background: transparent;
      border-radius: 6px;
      font-size: .76rem;
      font-weight: 500;
      color: var(--morg-slate, #64748B);
      cursor: pointer;
      transition: background .18s, color .18s;
      font-family: inherit;
      white-space: nowrap;
    }
    .maff-mode-btn.maff-active {
      background: #fff;
      color: var(--morg-navy, #0F2A4A);
      box-shadow: 0 1px 3px rgba(0,0,0,.10);
    }

    /* ── Credit score impact slider ── */
    .maff-credit-track {
      position: relative;
      height: 8px;
      border-radius: 4px;
      background: linear-gradient(to right, #DC2626 0%, #D97706 35%, #16A34A 65%, #1A56DB 100%);
      margin: 8px 0 4px;
    }
    .maff-credit-track input[type=range] {
      position: absolute;
      top: -4px;
      left: 0;
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      margin: 0;
    }
    .maff-credit-track input[type=range]::-webkit-slider-thumb {
      appearance: none;
      -webkit-appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--morg-navy, #0F2A4A);
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(0,0,0,.18);
    }
    .maff-credit-labels {
      display: flex;
      justify-content: space-between;
      font-size: .68rem;
      color: var(--morg-slate, #64748B);
      margin-top: 2px;
    }

    /* ── Stress test panel ── */
    .maff-stress-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 10px;
    }
    .maff-stress-row {
      background: var(--morg-light-bg, #F8FAFF);
      border: 1px solid var(--morg-border, #E2E8F0);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: .8rem;
    }
    .maff-stress-row.maff-warn  { border-color: #D97706; background: #FFFBEB; }
    .maff-stress-row.maff-bad   { border-color: #DC2626; background: #FEF2F2; }
    .maff-stress-label { color: var(--morg-slate, #64748B); font-size: .7rem; margin-bottom: 3px; }
    .maff-stress-val   { font-weight: 700; color: var(--morg-navy, #0F2A4A); font-size: .95rem; }

    /* ── Salary reference table ── */
    .maff-salary-table { width:100%; border-collapse:collapse; font-size:.78rem; }
    .maff-salary-table th {
      background: var(--morg-navy, #0F2A4A);
      color: #fff;
      padding: 8px 10px;
      text-align: left;
      font-weight: 600;
    }
    .maff-salary-table td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--morg-border, #E2E8F0);
      color: var(--morg-navy, #0F2A4A);
    }
    .maff-salary-table tr:nth-child(even) td { background: var(--morg-light-bg, #F8FAFF); }
    .maff-salary-table .maff-hl { font-weight: 600; color: #1A56DB; }

    /* ── Closing costs box ── */
    .maff-closing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 8px;
      font-size: .78rem;
    }
    .maff-closing-row {
      display: flex;
      justify-content: space-between;
      padding: 5px 8px;
      background: var(--morg-light-bg, #F8FAFF);
      border-radius: 6px;
    }
    .maff-closing-total {
      grid-column: 1/-1;
      background: var(--morg-navy, #0F2A4A);
      color: #fff;
      padding: 8px 12px;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      font-weight: 600;
    }

    /* ── Reverse mode target input highlight ── */
    .maff-reverse-note {
      font-size: .75rem;
      color: var(--morg-slate);
      background: #EFF6FF;
      border-left: 3px solid #1A56DB;
      padding: 8px 10px;
      border-radius: 0 6px 6px 0;
      margin: 8px 0 14px;
      line-height: 1.5;
    }

    /* ── Scenario compare ── */
    .maff-scenario-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    .maff-sc-card {
      border: 1px solid var(--morg-border);
      border-radius: 8px;
      overflow: hidden;
    }
    .maff-sc-head {
      background: var(--morg-navy);
      color: #fff;
      font-size: .75rem;
      font-weight: 600;
      padding: 7px 10px;
    }
    .maff-sc-body { padding: 10px; font-size: .78rem; }
    .maff-sc-row  { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--morg-border); }
    .maff-sc-row:last-child { border-bottom: none; font-weight: 600; }
    .maff-sc-label { color: var(--morg-slate); }
    .maff-sc-val   { color: var(--morg-navy); font-weight: 500; }

    /* ── Co-borrower toggle ── */
    .maff-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .maff-toggle-label { font-size: .82rem; color: var(--morg-navy); font-weight: 500; }
    .maff-toggle {
      position: relative;
      width: 38px;
      height: 20px;
    }
    .maff-toggle input { opacity:0; width:0; height:0; }
    .maff-toggle-slider {
      position: absolute;
      inset: 0;
      background: #CBD5E1;
      border-radius: 20px;
      cursor: pointer;
      transition: background .2s;
    }
    .maff-toggle-slider::before {
      content: '';
      position: absolute;
      width: 14px; height: 14px;
      left: 3px; top: 3px;
      background: #fff;
      border-radius: 50%;
      transition: transform .2s;
    }
    .maff-toggle input:checked + .maff-toggle-slider { background: #1A56DB; }
    .maff-toggle input:checked + .maff-toggle-slider::before { transform: translateX(18px); }

    /* ── Payoff animation fade ── */
    .maff-fading { animation: maff-fade-in .4s ease; }
    @keyframes maff-fade-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

    /* ── Responsive tweaks ── */
    @media (max-width: 520px) {
      .maff-result-cards        { grid-template-columns: 1fr 1fr; }
      .maff-stress-grid         { grid-template-columns: 1fr; }
      .maff-scenario-cards      { grid-template-columns: 1fr; }
      .maff-closing-grid        { grid-template-columns: 1fr; }
      .maff-mode-btn            { font-size: .68rem; padding: 6px 2px; }
    }

 /* ─────────────────────────────────────────────
   LOAN CALCULATOR
───────────────────────────────────────────── */

.lcalc-mode-nav{display:flex;gap:0;background:var(--morg-light-bg,#F1F5F9);border-radius:8px;padding:3px;margin-bottom:18px}
    .lcalc-mode-btn{flex:1;padding:7px 4px;border:none;background:transparent;border-radius:6px;font-size:.76rem;font-weight:500;color:var(--morg-slate,#64748B);cursor:pointer;transition:background .18s,color .18s;font-family:inherit;white-space:nowrap}
    .lcalc-mode-btn.lcalc-active{background:#fff;color:var(--morg-navy,#0F2A4A);box-shadow:0 1px 3px rgba(0,0,0,.10)}
    .lcalc-purpose-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
    .lcalc-purpose-btn{padding:5px 10px;border:1px solid var(--morg-border,#E2E8F0);border-radius:20px;background:#fff;font-size:.72rem;font-weight:500;color:var(--morg-slate,#64748B);cursor:pointer;font-family:inherit;transition:all .15s}
    .lcalc-purpose-btn.lcalc-active{background:var(--morg-navy,#0F2A4A);color:#fff;border-color:var(--morg-navy,#0F2A4A)}
    .lcalc-credit-track{position:relative;height:8px;border-radius:4px;background:linear-gradient(to right,#DC2626 0%,#D97706 35%,#16A34A 65%,#1A56DB 100%);margin:8px 0 4px}
    .lcalc-credit-track input[type=range]{position:absolute;top:-4px;left:0;width:100%;appearance:none;-webkit-appearance:none;background:transparent;margin:0}
    .lcalc-credit-track input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--morg-navy,#0F2A4A);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18)}
    .lcalc-credit-labels{display:flex;justify-content:space-between;font-size:.68rem;color:var(--morg-slate,#64748B);margin-top:2px}
    .lcalc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-bottom:14px}
    .lcalc-stat-card{background:var(--morg-light-bg,#F8FAFF);border:1px solid var(--morg-border,#E2E8F0);border-radius:10px;padding:12px;text-align:center}
    .lcalc-stat-card.lcalc-primary{background:var(--morg-navy,#0F2A4A);border-color:var(--morg-navy,#0F2A4A)}
    .lcalc-stat-card.lcalc-primary .lcalc-stat-label{color:rgba(255,255,255,.65)}
    .lcalc-stat-card.lcalc-primary .lcalc-stat-val{color:#fff}
    .lcalc-stat-label{font-size:.7rem;color:var(--morg-slate,#64748B);margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.03em}
    .lcalc-stat-val{font-size:1.1rem;font-weight:700;color:var(--morg-navy,#0F2A4A);line-height:1.15}
    .lcalc-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
    .lcalc-compare-card{border:1px solid var(--morg-border,#E2E8F0);border-radius:8px;overflow:hidden}
    .lcalc-compare-head{background:var(--morg-navy,#0F2A4A);color:#fff;font-size:.75rem;font-weight:600;padding:8px 12px}
    .lcalc-compare-head.lc-b{background:#1A56DB}
    .lcalc-badge-winner{background:#16A34A;color:#fff;font-size:.65rem;padding:2px 6px;border-radius:3px;margin-right:4px}
    .lcalc-compare-body{padding:10px 12px;font-size:.78rem}
    .lcalc-compare-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--morg-border,#E2E8F0)}
    .lcalc-compare-row:last-child{border-bottom:none;font-weight:600}
    .lcalc-compare-label{color:var(--morg-slate,#64748B)}
    .lcalc-compare-val{color:var(--morg-navy,#0F2A4A);font-weight:500}
    .lcalc-compare-val.lcalc-win{color:#16A34A;font-weight:700}
    .lcalc-compare-diff{grid-column:1/-1;background:#EAF3DE;border:1px solid #C0DD97;border-radius:8px;padding:10px 14px;font-size:.8rem;color:#3B6D11;text-align:center;font-weight:500;margin-top:6px}
    .lcalc-consol-debt-row{display:grid;grid-template-columns:1fr 80px 70px 28px;gap:6px;align-items:center;margin-bottom:6px;font-size:.78rem}
    .lcalc-consol-debt-row input{padding:5px 8px;border:1px solid var(--morg-border,#E2E8F0);border-radius:6px;font-size:.78rem;font-family:inherit;color:var(--morg-navy,#0F2A4A);width:100%}
    .lcalc-consol-remove{background:none;border:none;color:#DC2626;cursor:pointer;font-size:1.1rem;padding:0;line-height:1}
    .lcalc-add-debt-btn{background:none;border:1px dashed var(--morg-border,#CBD5E1);border-radius:6px;color:var(--morg-slate,#64748B);cursor:pointer;font-size:.75rem;padding:6px 10px;width:100%;font-family:inherit;margin-bottom:10px;transition:background .15s}
    .lcalc-add-debt-btn:hover{background:var(--morg-light-bg,#F1F5F9)}
    .lcalc-consol-result{background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;padding:12px 14px;margin-top:10px;font-size:.82rem}
    .lcalc-consol-result-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid #BFDBFE}
    .lcalc-consol-result-row:last-child{border-bottom:none;font-weight:700}
    .lcalc-apr-note{font-size:.72rem;background:#FAEEDA;border-left:3px solid #D97706;padding:7px 10px;border-radius:0 6px 6px 0;color:#854F0B;margin-top:6px;line-height:1.5}
    .lcalc-reverse-note{font-size:.75rem;color:var(--morg-slate);background:#EFF6FF;border-left:3px solid #1A56DB;padding:8px 10px;border-radius:0 6px 6px 0;margin:6px 0 14px;line-height:1.5}
    .lcalc-ref-table{width:100%;border-collapse:collapse;font-size:.78rem}
    .lcalc-ref-table th{background:var(--morg-navy,#0F2A4A);color:#fff;padding:8px 10px;text-align:left;font-weight:600}
    .lcalc-ref-table td{padding:7px 10px;border-bottom:1px solid var(--morg-border,#E2E8F0);color:var(--morg-navy,#0F2A4A)}
    .lcalc-ref-table tr:nth-child(even) td{background:var(--morg-light-bg,#F8FAFF)}
    .lcalc-ref-table .lcalc-hl{font-weight:600;color:#1A56DB}
    .lcalc-biweekly-box{background:#EAF3DE;border:1px solid #C0DD97;border-radius:8px;padding:10px 14px;margin-top:8px;font-size:.78rem;color:#3B6D11}
    .lcalc-extra-card{background:var(--morg-light-bg,#F8FAFF);border:1px solid var(--morg-border,#E2E8F0);border-radius:8px;padding:10px 12px}
    .lcalc-extra-card.lcalc-highlight{background:#EFF6FF;border-color:#BFDBFE}
    .lcalc-extra-label{font-size:.7rem;color:var(--morg-slate,#64748B);margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em}
    .lcalc-extra-val{font-size:.95rem;font-weight:700;color:var(--morg-navy,#0F2A4A)}
    .lcalc-extra-card.lcalc-highlight .lcalc-extra-val{color:#1A56DB}
    .lcalc-fading{animation:lcalc-fade-in .4s ease}
    @keyframes lcalc-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
    @media(max-width:520px){
      .lcalc-stat-grid{grid-template-columns:1fr 1fr}
      .lcalc-compare-grid{grid-template-columns:1fr}
      .lcalc-consol-debt-row{grid-template-columns:1fr 65px 58px 24px}
      .lcalc-mode-btn{font-size:.66rem;padding:6px 2px}
    }



/* ── ROI Calculator ── */

:root {
      --roi-navy:   #0F2A4A;
      --roi-blue:   #1A56DB;
      --roi-green:  #16A34A;
      --roi-red:    #DC2626;
      --roi-amber:  #D97706;
      --roi-purple: #7C3AED;
      --roi-slate:  #64748B;
      --roi-bg:     #F8FAFC;
      --roi-white:  #FFFFFF;
      --roi-border: #E2E8F0;
      --roi-radius: 12px;
    }

    /* ── Page shell ── */
    .roi-page { background: var(--roi-bg); }

    /* ── Main calc row ── */
    .roi-calc-row { display: flex; flex-direction: column; gap: 20px; }
    .roi-inputs-col, .roi-results-col { width: 100%; }

    /* ── Card ── */
    .roi-card { background: var(--roi-white); border: 1px solid var(--roi-border); border-radius: var(--roi-radius); padding: 22px; }
    .roi-card-title { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--roi-blue); margin-bottom: 18px; }

    /* ── Fields ── */
    .roi-field { margin-bottom: 16px; }
    .roi-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--roi-navy); margin-bottom: 5px; }
    .roi-tip { font-weight: 400; color: var(--roi-slate); font-size: .75rem; }
    .roi-input-wrap { position: relative; display: flex; align-items: center; }
    .roi-input-wrap input[type="number"] { width: 100%; border: 1.5px solid var(--roi-border); border-radius: 8px; padding: 9px 12px; font-size: .88rem; color: var(--roi-navy); background: var(--roi-white); outline: none; transition: border-color .15s; -moz-appearance: textfield; appearance: textfield; }
    .roi-input-wrap input[type="number"]::-webkit-inner-spin-button,
    .roi-input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
    .roi-input-wrap input[type="number"]:focus { border-color: var(--roi-blue); }
    .roi-has-prefix input { padding-left: 30px; }
    .roi-has-suffix input { padding-right: 36px; }
    .roi-prefix { position: absolute; left: 10px; color: var(--roi-slate); font-size: .85rem; pointer-events: none; }
    .roi-suffix { position: absolute; right: 10px; color: var(--roi-slate); font-size: .85rem; pointer-events: none; }
    .roi-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media(max-width:400px){ .roi-grid-2 { grid-template-columns: 1fr; } }

    /* ── Sliders ── */
    .roi-slider-wrap { margin-top: 7px; }
    .roi-slider-wrap input[type="range"] { width: 100%; accent-color: var(--roi-blue); height: 4px; cursor: pointer; }
    .roi-slider-labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--roi-slate); margin-top: 2px; }

    /* ── Toggle-button groups ── */
    .roi-type-btn { border: 1.5px solid var(--roi-border); background: var(--roi-white); color: var(--roi-slate); border-radius: 7px; padding: 6px 13px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; }
    .roi-type-btn.roi-active { background: var(--roi-blue); border-color: var(--roi-blue); color: #fff; }
    .roi-type-btn:hover:not(.roi-active) { border-color: var(--roi-blue); color: var(--roi-blue); }

    /* ── Group title ── */
    .roi-group-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--roi-slate); border-top: 1px solid var(--roi-border); padding-top: 14px; margin: 18px 0 12px; }

    /* ── Optional toggle row ── */
    .roi-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .roi-toggle-label { font-size: .8rem; font-weight: 600; color: var(--roi-navy); }
    .roi-toggle-sub { font-size: .72rem; color: var(--roi-slate); margin-top: 1px; }
    .roi-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
    .roi-switch input { opacity: 0; width: 0; height: 0; }
    .roi-switch-track { position: absolute; inset: 0; background: var(--roi-border); border-radius: 11px; cursor: pointer; transition: background .2s; }
    .roi-switch input:checked + .roi-switch-track { background: var(--roi-blue); }
    .roi-switch-track::after { content:''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
    .roi-switch input:checked + .roi-switch-track::after { transform: translateX(16px); }
    .roi-optional-panel { overflow: hidden; transition: max-height .3s ease, opacity .25s; }
    .roi-optional-panel.roi-hidden { max-height: 0 !important; opacity: 0; pointer-events: none; }
    .roi-optional-panel.roi-visible { opacity: 1; }

    /* ── Compare row ── */
    .roi-compare-add { background: none; border: 1.5px dashed var(--roi-border); border-radius: 8px; color: var(--roi-slate); font-size: .78rem; font-weight: 600; padding: 7px 14px; cursor: pointer; width: 100%; text-align: center; margin-top: 8px; transition: all .15s; }
    .roi-compare-add:hover { border-color: var(--roi-blue); color: var(--roi-blue); }
    .roi-compare-block { border: 1px solid var(--roi-border); border-radius: 8px; padding: 12px; margin-top: 10px; position: relative; background: #FAFBFD; }
    .roi-compare-block-title { font-size: .75rem; font-weight: 700; color: var(--roi-navy); margin-bottom: 8px; display: flex; justify-content: space-between; }
    .roi-compare-remove { background: none; border: none; color: var(--roi-slate); cursor: pointer; font-size: .8rem; padding: 0; }
    .roi-compare-remove:hover { color: var(--roi-red); }

    /* ── Calc button ── */
    .roi-calc-btn { width: 100%; background: var(--roi-blue); color: #fff; border: none; border-radius: 9px; padding: 13px; font-size: .92rem; font-weight: 700; cursor: pointer; margin-top: 18px; transition: background .15s, transform .1s; letter-spacing: .01em; }
    .roi-calc-btn:hover { background: #1547BE; }
    .roi-calc-btn:active { transform: scale(.98); }
    .roi-calc-btn:disabled { background: #93AEDD; cursor: not-allowed; }

    /* ── Results panel ── */
    .roi-results-panel { min-height: 300px; }
    .roi-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 20px; }
    .roi-empty-icon { font-size: 2.5rem; margin-bottom: 14px; }
    .roi-calc-loading { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; gap: 14px; }
    .roi-spinner { width: 36px; height: 36px; border: 3px solid var(--roi-border); border-top-color: var(--roi-blue); border-radius: 50%; animation: roiSpin .7s linear infinite; }
    @keyframes roiSpin { to { transform: rotate(360deg); } }
    .roi-stale-banner { display: none; align-items: center; gap: 8px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 7px; padding: 8px 12px; font-size: .77rem; color: #92400E; margin-bottom: 12px; }
    .roi-stale-banner.roi-show { display: flex; }
    .roi-updated-badge { display: none; align-items: center; gap: 6px; font-size: .73rem; font-weight: 600; color: var(--roi-green); margin-bottom: 10px; }
    .roi-updated-badge.roi-show { display: flex; }
    .roi-updated-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--roi-green); animation: roiPulse 1s ease-out 1; }
    @keyframes roiPulse { 0%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:.5} 100%{transform:scale(1);opacity:1} }
    .roi-fading { animation: roiFadeIn .3s ease; }
    @keyframes roiFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

    /* ── Summary strip ── */
    .roi-summary-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .roi-summary-item { background: var(--roi-bg); border: 1px solid var(--roi-border); border-radius: 9px; padding: 12px 14px; }
    .roi-summary-item.roi-highlight { grid-column: span 2; background: var(--roi-navy); }
    .roi-s-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--roi-slate); margin-bottom: 3px; }
    .roi-highlight .roi-s-label { color: rgba(255,255,255,.65); }
    .roi-s-value { font-size: 1.55rem; font-weight: 700; color: var(--roi-navy); line-height: 1.1; }
    .roi-highlight .roi-s-value { color: #fff; }
    .roi-s-value.roi-negative { color: var(--roi-red); }
    .roi-s-sub { font-size: .71rem; color: var(--roi-slate); margin-top: 3px; }
    .roi-highlight .roi-s-sub { color: rgba(255,255,255,.6); }

    /* ── Benchmark badge ── */
    .roi-benchmark-bar { background: var(--roi-bg); border: 1px solid var(--roi-border); border-radius: 9px; padding: 13px 14px; margin-bottom: 14px; }
    .roi-benchmark-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--roi-slate); margin-bottom: 8px; }
    .roi-bench-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
    .roi-bench-label { font-size: .75rem; color: var(--roi-navy); min-width: 140px; }
    .roi-bench-track { flex: 1; height: 7px; background: var(--roi-border); border-radius: 4px; overflow: hidden; }
    .roi-bench-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }
    .roi-bench-pct { font-size: .72rem; color: var(--roi-slate); min-width: 38px; text-align: right; }
    .roi-your-marker { position: relative; }

    /* ── Verdict band ── */
    .roi-verdict { border-radius: 8px; padding: 10px 13px; font-size: .8rem; font-weight: 600; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 8px; }
    .roi-verdict-good  { background: #F0FDF4; border: 1px solid #86EFAC; color: #15803D; }
    .roi-verdict-warn  { background: #FFFBEB; border: 1px solid #FCD34D; color: #92400E; }
    .roi-verdict-bad   { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

    /* ── Result tabs ── */
    .roi-rtab-nav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--roi-border); margin-bottom: 14px; }
    .roi-rtab { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 12px; font-size: .76rem; font-weight: 600; color: var(--roi-slate); cursor: pointer; transition: all .15s; }
    .roi-rtab.roi-active { color: var(--roi-blue); border-bottom-color: var(--roi-blue); }
    .roi-rtab:hover:not(.roi-active) { color: var(--roi-navy); }
    .roi-rtab-content { }

    /* ── Donut ── */
    .roi-breakdown-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
    .roi-donut-wrap { width: 140px; flex-shrink: 0; }
    .roi-donut-wrap svg { width: 100%; height: auto; }
    .roi-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
    .roi-legend-item { display: flex; align-items: center; gap: 8px; font-size: .78rem; }
    .roi-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .roi-l-label { flex: 1; color: var(--roi-navy); }
    .roi-l-val { font-weight: 600; color: var(--roi-navy); }
    .roi-l-pct { color: var(--roi-slate); font-size: .72rem; }

    /* ── Compare tab ── */
    .roi-compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .roi-compare-table th { background: var(--roi-bg); padding: 9px 10px; text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--roi-slate); border-bottom: 1px solid var(--roi-border); }
    .roi-compare-table td { padding: 9px 10px; border-bottom: 1px solid var(--roi-border); color: var(--roi-navy); }
    .roi-compare-table tr:last-child td { border-bottom: none; }
    .roi-win  { color: var(--roi-green) !important; font-weight: 600; }
    .roi-lose { color: var(--roi-slate); }

    /* ── Print / share row ── */
    .roi-btn-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
    .roi-print-btn, .roi-share-btn { flex: 1; border: 1.5px solid var(--roi-border); background: var(--roi-white); border-radius: 7px; padding: 7px 12px; font-size: .75rem; font-weight: 600; color: var(--roi-slate); cursor: pointer; transition: all .15s; text-align: center; }
    .roi-print-btn:hover, .roi-share-btn:hover { border-color: var(--roi-blue); color: var(--roi-blue); }

    /* ── Info sections ── */
    .roi-info-section { background: var(--roi-white); border: 1px solid var(--roi-border); border-radius: var(--roi-radius); padding: 28px; margin-top: 20px; }
    .roi-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--roi-blue); margin-bottom: 8px; }
    .roi-info-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--roi-navy); margin: 0 0 10px; }
    .roi-info-section h3 { font-size: .95rem; font-weight: 700; color: var(--roi-navy); margin: 18px 0 7px; }
    .roi-info-section p  { font-size: .85rem; color: #374151; line-height: 1.65; margin: 0 0 10px; }
    .roi-info-section ul { font-size: .85rem; color: #374151; line-height: 1.7; padding-left: 18px; }
    .roi-lead { font-size: .9rem; color: var(--roi-slate); margin-bottom: 18px !important; }

    /* ── Formula box ── */
    .roi-formula-box { background: #F0F4FF; border: 1px solid #C7D4F5; border-radius: 9px; padding: 15px 17px; margin: 12px 0; }
    .roi-f-title  { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--roi-blue); margin-bottom: 6px; }
    .roi-f-formula { font-size: 1.05rem; font-weight: 700; color: var(--roi-navy); margin-bottom: 10px; font-family: 'Courier New', monospace; }
    .roi-f-var { font-size: .78rem; color: #374151; margin-bottom: 3px; }
    .roi-f-var strong { color: var(--roi-navy); }

    /* ── Worked example ── */
    .roi-worked-example { background: #F8FAFC; border: 1px solid var(--roi-border); border-radius: 9px; padding: 14px; margin-top: 12px; }
    .roi-worked-example h4 { font-size: .78rem; font-weight: 700; color: var(--roi-navy); margin: 0 0 10px; }
    .roi-we-step { display: flex; gap: 10px; margin-bottom: 7px; align-items: flex-start; }
    .roi-we-num { min-width: 22px; height: 22px; border-radius: 50%; background: var(--roi-blue); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .roi-we-text { font-size: .78rem; color: #374151; line-height: 1.5; }
    .roi-we-result { background: #ECFDF5; border: 1px solid #86EFAC; border-radius: 7px; padding: 8px 12px; font-size: .78rem; color: #15803D; font-weight: 600; margin-top: 10px; }

    /* ── Reference table ── */
    .roi-ref-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
    .roi-ref-table th { background: var(--roi-bg); border: 1px solid var(--roi-border); padding: 8px 10px; text-align: right; font-weight: 700; color: var(--roi-navy); font-size: .72rem; }
    .roi-ref-table th:first-child { text-align: left; }
    .roi-ref-table td { border: 1px solid var(--roi-border); padding: 7px 10px; text-align: right; color: #374151; }
    .roi-ref-table td:first-child { text-align: left; font-weight: 600; color: var(--roi-navy); }
    .roi-ref-table tr:nth-child(even) td { background: #F8FAFC; }
    .roi-ref-table .roi-highlight-row td { background: #EFF6FF; font-weight: 700; color: var(--roi-navy); }

    /* ── FAQ ── */
    .roi-faq-section { margin-top: 20px; }
    .roi-faq-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--roi-navy); margin: 0 0 6px; }
    .roi-faq-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
    .roi-faq-item { border: 1px solid var(--roi-border); border-radius: 9px; overflow: hidden; }
    .roi-faq-q { width: 100%; background: var(--roi-white); border: none; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 600; color: var(--roi-navy); cursor: pointer; text-align: left; gap: 10px; }
    .roi-faq-q:hover { background: var(--roi-bg); }
    .roi-faq-icon { font-size: .72rem; color: var(--roi-slate); transition: transform .2s; flex-shrink: 0; }
    .roi-faq-q.roi-open .roi-faq-icon { transform: rotate(180deg); }
    .roi-faq-a { display: none; padding: 0 16px 13px; font-size: .8rem; color: #374151; line-height: 1.65; border-top: 1px solid var(--roi-border); padding-top: 12px; }
    .roi-faq-a.roi-open { display: block; }

    /* ── Notification / PMI-style notice ── */
    .roi-notice { display: none; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 9px; padding: 12px 14px; margin-bottom: 14px; font-size: .78rem; color: #92400E; gap: 10px; align-items: flex-start; }
    .roi-notice.roi-show { display: flex; }
    .roi-notice-icon { font-size: 1.1rem; flex-shrink: 0; }

    /* ── Niche selector tabs ── */
    .roi-niche-row { display: flex; gap: 6px; flex-wrap: wrap; }

    /* ── @print ── */
    @media print {
      .roi-calc-btn, .roi-btn-row, .roi-rtab-nav { display: none !important; }
      .roi-results-panel { border: none !important; }
      .roi-calc-row { grid-template-columns: 1fr !important; }
    }


    /* ── @Percentage calculator ── */

:root {
      --pct-navy:   #0F2A4A;
      --pct-blue:   #1A56DB;
      --pct-green:  #16A34A;
      --pct-red:    #DC2626;
      --pct-amber:  #D97706;
      --pct-purple: #7C3AED;
      --pct-teal:   #0891B2;
      --pct-slate:  #64748B;
      --pct-bg:     #F8FAFC;
      --pct-white:  #FFFFFF;
      --pct-border: #E2E8F0;
      --pct-radius: 12px;
    }

    .pct-page { background: var(--pct-bg); }

    /* ── Hero ── */
    .pct-hero { background: linear-gradient(135deg,#0F2A4A 0%,#1A3A5C 60%,#1A56DB 100%); padding: 36px 0 32px; }
    .pct-hero-inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
    .pct-breadcrumb { font-size: .78rem; color: rgba(255,255,255,.65); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .pct-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
    .pct-breadcrumb a:hover { color: #fff; }
    .pct-breadcrumb span { opacity: .5; }
    .pct-hero h1 { font-family: 'Inter', sans-serif; font-size: clamp(1.35rem,3vw,1.9rem); font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.25; }
    .pct-hero p  { font-size: .88rem; color: rgba(255,255,255,.82); max-width: 700px; line-height: 1.6; margin: 0 0 16px; }
    .pct-hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
    .pct-badge { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.9); border-radius: 20px; padding: 4px 12px; font-size: .73rem; font-weight: 500; }
    .pct-badge-green { background: rgba(22,163,74,.25); border-color: rgba(22,163,74,.5); color: #86EFAC; }

    /* ── Mode selector tabs ── */
    .pct-mode-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
    .pct-mode-btn { border: 1.5px solid var(--pct-border); background: var(--pct-white); color: var(--pct-slate); border-radius: 7px; padding: 7px 13px; font-size: .78rem; font-weight: 600; cursor: pointer; transition: all .15s; }
    .pct-mode-btn.pct-active { background: var(--pct-blue); border-color: var(--pct-blue); color: #fff; }
    .pct-mode-btn:hover:not(.pct-active) { border-color: var(--pct-blue); color: var(--pct-blue); }

    /* ── Card ── */
    .pct-card { background: var(--pct-white); border: 1px solid var(--pct-border); border-radius: var(--pct-radius); padding: 22px; margin-bottom: 16px; }
    .pct-card-title { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pct-blue); margin-bottom: 18px; }
    .pct-card-desc { font-size: .82rem; color: var(--pct-slate); margin: -10px 0 18px; line-height: 1.5; }

    /* ── Fields ── */
    .pct-field { margin-bottom: 16px; }
    .pct-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--pct-navy); margin-bottom: 5px; }
    .pct-tip { font-weight: 400; color: var(--pct-slate); font-size: .75rem; }
    .pct-input-wrap { position: relative; display: flex; align-items: center; }
    .pct-input-wrap input[type="number"],
    .pct-input-wrap input[type="text"] {
      width: 100%; border: 1.5px solid var(--pct-border); border-radius: 8px;
      padding: 9px 12px; font-size: .88rem; color: var(--pct-navy);
      background: var(--pct-white); outline: none; transition: border-color .15s;
      -moz-appearance: textfield; appearance: textfield; box-sizing: border-box;
    }
    .pct-input-wrap input[type="number"]::-webkit-inner-spin-button,
    .pct-input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
    .pct-input-wrap input:focus { border-color: var(--pct-blue); }
    .pct-has-prefix input { padding-left: 30px; }
    .pct-has-suffix input { padding-right: 36px; }
    .pct-prefix { position: absolute; left: 10px; color: var(--pct-slate); font-size: .85rem; pointer-events: none; }
    .pct-suffix { position: absolute; right: 10px; color: var(--pct-slate); font-size: .85rem; pointer-events: none; }
    .pct-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .pct-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    @media(max-width:480px){ .pct-grid-2, .pct-grid-3 { grid-template-columns: 1fr; } }

    /* ── Equation display ── */
    .pct-eq { background: #F0F4FF; border: 1px solid #C7D4F5; border-radius: 8px; padding: 9px 13px; font-size: .82rem; color: var(--pct-navy); margin-bottom: 14px; font-family: 'Courier New', monospace; letter-spacing: .01em; }

    /* ── Calc button ── */
    .pct-calc-btn { width: 100%; background: var(--pct-blue); color: #fff; border: none; border-radius: 9px; padding: 13px; font-size: .92rem; font-weight: 700; cursor: pointer; margin-top: 6px; transition: background .15s, transform .1s; letter-spacing: .01em; }
    .pct-calc-btn:hover { background: #1547BE; }
    .pct-calc-btn:active { transform: scale(.98); }

    /* ── Result card ── */
    .pct-result-card { display: none; background: var(--pct-white); border: 1px solid var(--pct-border); border-radius: var(--pct-radius); padding: 22px; margin-bottom: 16px; animation: pctFadeIn .3s ease; }
    .pct-result-card.pct-show { display: block; }
    @keyframes pctFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ── Answer box ── */
    .pct-answer { background: var(--pct-navy); border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; text-align: center; }
    .pct-answer-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin-bottom: 4px; }
    .pct-answer-value { font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1.1; }
    .pct-answer-sub { font-size: .78rem; color: rgba(255,255,255,.65); margin-top: 4px; }
    .pct-answer.pct-answer-good { background: linear-gradient(135deg,#15803D,#16A34A); }
    .pct-answer.pct-answer-warn { background: linear-gradient(135deg,#B45309,#D97706); }
    .pct-answer.pct-answer-bad  { background: linear-gradient(135deg,#991B1B,#DC2626); }

    /* ── Breakdown grid ── */
    .pct-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .pct-bk-item { background: var(--pct-bg); border: 1px solid var(--pct-border); border-radius: 9px; padding: 11px 13px; }
    .pct-bk-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--pct-slate); margin-bottom: 3px; }
    .pct-bk-val { font-size: 1.15rem; font-weight: 700; color: var(--pct-navy); }
    @media(max-width:400px){ .pct-breakdown { grid-template-columns: 1fr; } }

    /* ── Formula box ── */
    .pct-formula-box { background: #F0F4FF; border: 1px solid #C7D4F5; border-radius: 9px; padding: 13px 15px; margin-bottom: 14px; }
    .pct-f-title  { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pct-blue); margin-bottom: 5px; }
    .pct-f-formula { font-size: .95rem; font-weight: 700; color: var(--pct-navy); margin-bottom: 8px; font-family: 'Courier New', monospace; }
    .pct-f-step { font-size: .78rem; color: #374151; margin-bottom: 3px; }
    .pct-f-step strong { color: var(--pct-navy); }

    /* ── Mode panels ── */
    .pct-mode-panel { display: none; }
    .pct-mode-panel.pct-active { display: block; }

    /* ── Tip split table ── */
    .pct-split-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 4px; }
    .pct-split-table th { background: var(--pct-bg); padding: 7px 10px; text-align: right; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pct-slate); border-bottom: 1px solid var(--pct-border); }
    .pct-split-table th:first-child { text-align: left; }
    .pct-split-table td { padding: 7px 10px; border-bottom: 1px solid var(--pct-border); text-align: right; color: var(--pct-navy); }
    .pct-split-table td:first-child { text-align: left; font-weight: 600; }
    .pct-split-table tr:last-child td { border-bottom: none; }

    /* ── Grade scale ── */
    .pct-grade-scale { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
    .pct-grade-pill { background: var(--pct-bg); border: 1px solid var(--pct-border); border-radius: 6px; padding: 5px 10px; font-size: .75rem; font-weight: 600; color: var(--pct-slate); }
    .pct-grade-pill.pct-grade-active { background: var(--pct-navy); border-color: var(--pct-navy); color: #fff; }

    /* ── Info sections ── */
    .pct-info-section { background: var(--pct-white); border: 1px solid var(--pct-border); border-radius: var(--pct-radius); padding: 28px; margin-top: 4px; }
    .pct-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pct-blue); margin-bottom: 8px; }
    .pct-info-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--pct-navy); margin: 0 0 10px; }
    .pct-info-section h3 { font-size: .95rem; font-weight: 700; color: var(--pct-navy); margin: 18px 0 7px; }
    .pct-info-section p  { font-size: .85rem; color: #374151; line-height: 1.65; margin: 0 0 10px; }
    .pct-lead { font-size: .9rem; color: var(--pct-slate); margin-bottom: 18px !important; }

    /* ── FAQ ── */
    .pct-faq-section { margin-top: 20px; }
    .pct-faq-section h2 { font-size: 1.25rem; font-weight: 700; color: var(--pct-navy); margin: 0 0 6px; }
    .pct-faq-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
    .pct-faq-item { border: 1px solid var(--pct-border); border-radius: 9px; overflow: hidden; }
    .pct-faq-q { width: 100%; background: var(--pct-white); border: none; padding: 13px 16px; display: flex; justify-content: space-between; align-items: center; font-size: .82rem; font-weight: 600; color: var(--pct-navy); cursor: pointer; text-align: left; gap: 10px; }
    .pct-faq-q:hover { background: var(--pct-bg); }
    .pct-faq-icon { font-size: .72rem; color: var(--pct-slate); transition: transform .2s; flex-shrink: 0; }
    .pct-faq-q.pct-open .pct-faq-icon { transform: rotate(180deg); }
    .pct-faq-a { display: none; padding: 12px 16px 13px; font-size: .8rem; color: #374151; line-height: 1.65; border-top: 1px solid var(--pct-border); }
    .pct-faq-a.pct-open { display: block; }

    /* ── Related calculators ── */
    .pct-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
    .pct-related-card { background: var(--pct-white); border: 1px solid var(--pct-border); border-radius: 9px; padding: 13px 14px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
    .pct-related-card:hover { border-color: var(--pct-blue); box-shadow: 0 2px 8px rgba(26,86,219,.1); }
    .pct-related-icon { font-size: 1.3rem; margin-bottom: 6px; }
    .pct-related-name { font-size: .8rem; font-weight: 700; color: var(--pct-navy); margin-bottom: 2px; }
    .pct-related-desc { font-size: .72rem; color: var(--pct-slate); }

    @media print {
      .pct-calc-btn, .pct-mode-tabs { display: none !important; }
    }


/* ── VAT Calculator ── */

:root {
      --vat-navy:   #0F2A4A;
      --vat-blue:   #1A56DB;
      --vat-green:  #16A34A;
      --vat-red:    #DC2626;
      --vat-amber:  #D97706;
      --vat-slate:  #64748B;
      --vat-bg:     #F8FAFC;
      --vat-white:  #FFFFFF;
      --vat-border: #E2E8F0;
      --vat-radius: 12px;
    }

    /* ── Page shell ── */
    .vat-page { background: var(--vat-bg); }

    /* ── Hero ── */
    .vat-hero { background: linear-gradient(135deg,#0F2A4A 0%,#1A3A5C 60%,#1A56DB 100%); padding: 36px 0 32px; }
    .vat-hero-inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
    .vat-breadcrumb { font-size:.78rem; color:rgba(255,255,255,.65); margin-bottom:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .vat-breadcrumb a { color:rgba(255,255,255,.75); text-decoration:none; }
    .vat-breadcrumb a:hover { color:#fff; }
    .vat-breadcrumb span { opacity:.5; }
    .vat-hero h1 { font-family:'Inter',sans-serif; font-size:clamp(1.35rem,3vw,1.9rem); font-weight:700; color:#fff; margin:0 0 10px; line-height:1.25; }
    .vat-hero p  { font-size:.88rem; color:rgba(255,255,255,.82); max-width:700px; line-height:1.6; margin:0 0 16px; }
    .vat-hero-badges { display:flex; flex-wrap:wrap; gap:8px; }
    .vat-badge { background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.9); border-radius:20px; padding:4px 12px; font-size:.73rem; font-weight:500; }
    .vat-badge-green { background:rgba(22,163,74,.25); border-color:rgba(22,163,74,.5); color:#86EFAC; }

    /* ── Mode tabs ── */
    .vat-mode-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
    .vat-mode-btn { border:1.5px solid var(--vat-border); background:var(--vat-white); color:var(--vat-slate); border-radius:7px; padding:7px 13px; font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s; }
    .vat-mode-btn.vat-active { background:var(--vat-blue); border-color:var(--vat-blue); color:#fff; }
    .vat-mode-btn:hover:not(.vat-active) { border-color:var(--vat-blue); color:var(--vat-blue); }

    /* ── Rate quick buttons ── */
    .vat-rate-row { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
    .vat-rate-btn { border:1.5px solid var(--vat-border); background:var(--vat-white); color:var(--vat-slate); border-radius:7px; padding:5px 11px; font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s; }
    .vat-rate-btn.vat-active { background:var(--vat-navy); border-color:var(--vat-navy); color:#fff; }
    .vat-rate-btn:hover:not(.vat-active) { border-color:var(--vat-navy); color:var(--vat-navy); }

    /* ── Card ── */
    .vat-card { background:var(--vat-white); border:1px solid var(--vat-border); border-radius:var(--vat-radius); padding:22px; margin-bottom:16px; }
    .vat-card-title { font-size:.78rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--vat-blue); margin-bottom:18px; }
    .vat-card-desc { font-size:.82rem; color:var(--vat-slate); margin:-10px 0 16px; line-height:1.5; }

    /* ── Warning box ── */
    .vat-warn-box { background:#FEF9C3; border:1.5px solid #FDE047; border-radius:8px; padding:10px 14px; font-size:.78rem; color:#713F12; margin-bottom:16px; display:flex; gap:8px; align-items:flex-start; }
    .vat-warn-box strong { color:#92400E; }

    /* ── Fields ── */
    .vat-field { margin-bottom:16px; }
    .vat-field label { display:block; font-size:.8rem; font-weight:600; color:var(--vat-navy); margin-bottom:5px; }
    .vat-hint { font-weight:400; color:var(--vat-slate); font-size:.74rem; }
    .vat-input-wrap { position:relative; display:flex; align-items:center; }
    .vat-input-wrap input[type="number"],
    .vat-input-wrap input[type="text"],
    .vat-input-wrap select {
      width:100%; border:1.5px solid var(--vat-border); border-radius:8px;
      padding:9px 12px; font-size:.88rem; color:var(--vat-navy);
      background:var(--vat-white); outline:none; transition:border-color .15s;
      -moz-appearance:textfield; appearance:textfield; box-sizing:border-box;
    }
    .vat-input-wrap input[type="number"]::-webkit-inner-spin-button,
    .vat-input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; }
    .vat-input-wrap input:focus,
    .vat-input-wrap select:focus { border-color:var(--vat-blue); }
    .vat-has-prefix input  { padding-left:28px; }
    .vat-has-suffix input  { padding-right:36px; }
    .vat-prefix { position:absolute; left:10px; color:var(--vat-slate); font-size:.85rem; pointer-events:none; }
    .vat-suffix { position:absolute; right:10px; color:var(--vat-slate); font-size:.85rem; pointer-events:none; }
    .vat-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .vat-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
    @media(max-width:520px){ .vat-grid-2,.vat-grid-3 { grid-template-columns:1fr; } }

    /* ── Calc button ── */
    .vat-calc-btn { width:100%; background:var(--vat-blue); color:#fff; border:none; border-radius:9px; padding:13px; font-size:.92rem; font-weight:700; cursor:pointer; margin-top:6px; transition:background .15s,transform .1s; letter-spacing:.01em; }
    .vat-calc-btn:hover { background:#1547BE; }
    .vat-calc-btn:active { transform:scale(.98); }

    /* ── Result card ── */
    .vat-result-card { display:none; background:var(--vat-white); border:1px solid var(--vat-border); border-radius:var(--vat-radius); padding:22px; margin-bottom:16px; animation:vatFadeIn .3s ease; }
    .vat-result-card.vat-show { display:block; }
    @keyframes vatFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ── Answer box ── */
    .vat-answer { border-radius:10px; padding:18px 20px; margin-bottom:16px; text-align:center; }
    .vat-answer-navy  { background:var(--vat-navy); }
    .vat-answer-green { background:linear-gradient(135deg,#15803D,#16A34A); }
    .vat-answer-blue  { background:linear-gradient(135deg,#1e40af,#1A56DB); }
    .vat-answer-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.6); margin-bottom:4px; }
    .vat-answer-value { font-size:2.4rem; font-weight:700; color:#fff; line-height:1.1; }
    .vat-answer-sub   { font-size:.78rem; color:rgba(255,255,255,.65); margin-top:4px; }

    /* ── Three-box row (net / VAT / gross) ── */
    .vat-trio { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:16px; }
    .vat-trio-item { border-radius:9px; padding:13px 12px; text-align:center; }
    .vat-trio-item.t-net   { background:#EFF6FF; border:1px solid #BFDBFE; }
    .vat-trio-item.t-vat   { background:#FEF3C7; border:1px solid #FDE68A; }
    .vat-trio-item.t-gross { background:#F0FDF4; border:1px solid #BBF7D0; }
    .vat-trio-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; }
    .vat-trio-item.t-net   .vat-trio-label { color:#1D4ED8; }
    .vat-trio-item.t-vat   .vat-trio-label { color:#92400E; }
    .vat-trio-item.t-gross .vat-trio-label { color:#15803D; }
    .vat-trio-value { font-size:1.25rem; font-weight:700; color:var(--vat-navy); }
    @media(max-width:420px){ .vat-trio { grid-template-columns:1fr; } }

    /* ── Breakdown grid ── */
    .vat-breakdown { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
    .vat-bk-item { background:var(--vat-bg); border:1px solid var(--vat-border); border-radius:9px; padding:11px 13px; }
    .vat-bk-label { font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--vat-slate); margin-bottom:3px; }
    .vat-bk-val   { font-size:1.15rem; font-weight:700; color:var(--vat-navy); }
    @media(max-width:400px){ .vat-breakdown { grid-template-columns:1fr; } }

    /* ── Formula box ── */
    .vat-formula-box { background:#F0F4FF; border:1px solid #C7D4F5; border-radius:9px; padding:13px 15px; margin-bottom:14px; }
    .vat-f-title   { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--vat-blue); margin-bottom:5px; }
    .vat-f-formula { font-size:.93rem; font-weight:700; color:var(--vat-navy); margin-bottom:8px; font-family:'Courier New',monospace; }
    .vat-f-step    { font-size:.78rem; color:#374151; margin-bottom:3px; }
    .vat-f-step strong { color:var(--vat-navy); }

    /* ── Mode panels ── */
    .vat-mode-panel { display:none; }
    .vat-mode-panel.vat-active { display:block; }

    /* ── Invoice table ── */
    .vat-inv-hdr { display:grid; grid-template-columns:2.5fr 80px 80px 90px 28px; gap:6px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--vat-slate); padding:0 2px 6px; border-bottom:1px solid var(--vat-border); margin-bottom:8px; }
    .vat-inv-row { display:grid; grid-template-columns:2.5fr 80px 80px 90px 28px; gap:6px; margin-bottom:6px; align-items:center; }
    .vat-inv-row input, .vat-inv-row select {
      border:1.5px solid var(--vat-border); border-radius:7px; padding:7px 8px;
      font-size:.8rem; color:var(--vat-navy); width:100%; box-sizing:border-box;
      outline:none; background:var(--vat-white); -moz-appearance:textfield; appearance:textfield;
    }
    .vat-inv-row input::-webkit-inner-spin-button,
    .vat-inv-row input::-webkit-outer-spin-button { -webkit-appearance:none; }
    .vat-inv-row input:focus, .vat-inv-row select:focus { border-color:var(--vat-blue); }
    .vat-inv-del { background:none; border:none; color:#CBD5E1; cursor:pointer; font-size:1rem; padding:4px; line-height:1; transition:color .15s; }
    .vat-inv-del:hover { color:var(--vat-red); }
    .vat-add-row-btn { background:none; border:1.5px dashed var(--vat-border); border-radius:8px; color:var(--vat-slate); font-size:.78rem; font-weight:600; padding:7px 14px; cursor:pointer; width:100%; text-align:center; margin:6px 0 14px; transition:all .15s; }
    .vat-add-row-btn:hover { border-color:var(--vat-blue); color:var(--vat-blue); }
    .vat-inv-totals { border-top:2px solid var(--vat-border); padding-top:12px; margin-top:6px; }
    .vat-inv-total-row { display:flex; justify-content:space-between; font-size:.83rem; margin-bottom:5px; color:var(--vat-navy); }
    .vat-inv-total-row.vat-grand { font-size:1rem; font-weight:700; border-top:1px solid var(--vat-border); padding-top:8px; margin-top:4px; }
    @media(max-width:600px){
      .vat-inv-hdr { grid-template-columns:1fr 60px 60px 72px 28px; font-size:.65rem; }
      .vat-inv-row { grid-template-columns:1fr 60px 60px 72px 28px; }
    }

    /* ── Flat rate table ── */
    .vat-frs-table { width:100%; border-collapse:collapse; font-size:.78rem; margin-top:8px; }
    .vat-frs-table th { background:var(--vat-bg); padding:7px 10px; text-align:left; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--vat-slate); border-bottom:1px solid var(--vat-border); }
    .vat-frs-table td { padding:7px 10px; border-bottom:1px solid var(--vat-border); color:var(--vat-navy); }
    .vat-frs-table tr:last-child td { border-bottom:none; }
    .vat-frs-table td:first-child { font-weight:600; }

    /* ── Global rates table ── */
    .vat-rates-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin-top:12px; }
    .vat-rate-card { background:var(--vat-white); border:1px solid var(--vat-border); border-radius:8px; padding:10px 12px; cursor:pointer; transition:all .15s; }
    .vat-rate-card:hover { border-color:var(--vat-blue); box-shadow:0 2px 8px rgba(26,86,219,.1); }
    .vat-rate-card-country { font-size:.78rem; font-weight:700; color:var(--vat-navy); margin-bottom:2px; }
    .vat-rate-card-rate { font-size:.82rem; color:var(--vat-slate); }
    .vat-rate-card-rate span { font-weight:700; color:var(--vat-blue); }

    /* ── Invoice checklist ── */
    .vat-checklist { list-style:none; padding:0; margin:0; }
    .vat-checklist li { display:flex; gap:8px; align-items:flex-start; font-size:.82rem; color:#374151; padding:5px 0; border-bottom:1px solid var(--vat-border); line-height:1.45; }
    .vat-checklist li:last-child { border-bottom:none; }
    .vat-checklist li::before { content:'☑'; color:var(--vat-green); font-size:.9rem; flex-shrink:0; margin-top:1px; }

    /* ── Info & FAQ ── */
    .vat-info-section { background:var(--vat-white); border:1px solid var(--vat-border); border-radius:var(--vat-radius); padding:28px; margin-top:4px; }
    .vat-section-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--vat-blue); margin-bottom:8px; }
    .vat-info-section h2 { font-size:1.25rem; font-weight:700; color:var(--vat-navy); margin:0 0 10px; }
    .vat-info-section h3 { font-size:.95rem; font-weight:700; color:var(--vat-navy); margin:18px 0 7px; }
    .vat-info-section p  { font-size:.85rem; color:#374151; line-height:1.65; margin:0 0 10px; }
    .vat-lead { font-size:.9rem; color:var(--vat-slate); margin-bottom:18px !important; }
    .vat-faq-grid { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
    .vat-faq-item { border:1px solid var(--vat-border); border-radius:9px; overflow:hidden; }
    .vat-faq-q { width:100%; background:var(--vat-white); border:none; padding:13px 16px; display:flex; justify-content:space-between; align-items:center; font-size:.82rem; font-weight:600; color:var(--vat-navy); cursor:pointer; text-align:left; gap:10px; }
    .vat-faq-q:hover { background:var(--vat-bg); }
    .vat-faq-icon { font-size:.72rem; color:var(--vat-slate); transition:transform .2s; flex-shrink:0; }
    .vat-faq-q.vat-open .vat-faq-icon { transform:rotate(180deg); }
    .vat-faq-a { display:none; padding:12px 16px 13px; font-size:.8rem; color:#374151; line-height:1.65; border-top:1px solid var(--vat-border); }
    .vat-faq-a.vat-open { display:block; }

    /* ── Related calculators ── */
    .vat-related { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:14px; }
    .vat-related-card { background:var(--vat-white); border:1px solid var(--vat-border); border-radius:9px; padding:13px 14px; text-decoration:none; transition:border-color .15s,box-shadow .15s; }
    .vat-related-card:hover { border-color:var(--vat-blue); box-shadow:0 2px 8px rgba(26,86,219,.1); }
    .vat-related-icon { font-size:1.3rem; margin-bottom:6px; }
    .vat-related-name { font-size:.8rem; font-weight:700; color:var(--vat-navy); margin-bottom:2px; }
    .vat-related-desc { font-size:.72rem; color:var(--vat-slate); }

    @media print {
      .vat-calc-btn,.vat-mode-tabs,.vat-hero { display:none !important; }
      .vat-result-card { display:block !important; }
    }



    /* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

@media (max-width:860px){

    .morg-page-wrap{width:100%;max-width:100%;padding:0 15px;margin:auto}
    .morg-body-layout,
    .morg-calc-row,
    .morg-breakdown-row,
    .morg-btn-row{flex-direction:column}

    .morg-body-layout{gap:20px}

    .morg-main-panel,
    .morg-inputs-col,
    .morg-results-col{
        width:100%;
        max-width:100%;
        flex:none;
    }
}

@media (max-width:768px){

    html,body{overflow-x:hidden}

    .content-wrap,
    .content-wrap .wrap,
    .content-grid,
    .content-grid>*,
    [role="main"],
    .morg-page,
    .morg-card,
    .morg-info-section,
    .morg-faq-section,
    .morg-results-panel,
    .morg-amort-wrap,
    .morg-formula-box{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .content-wrap .wrap,
    .morg-page-wrap,
    .morg-hero-inner{
        padding-left:12px;
        padding-right:12px;
    }

    .morg-body-layout{gap:16px;padding:20px 0}

    .morg-card,
    .morg-info-section{
        padding-left:12px;
        padding-right:12px;
    }

    .morg-grid-2,
    .morg-summary-strip,
    .morg-savings-grid{
        grid-template-columns:1fr!important;
        gap:12px;
    }

    .morg-breakdown-row{
        align-items:center;
        text-align:center;
    }

    .morg-donut-wrap{flex:none}

    .morg-print-btn,
    .morg-share-btn{
        width:100%;
    }

    .morg-loan-row{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:8px;
        min-width:0;
    }

    .morg-tab-nav{
        flex-wrap:wrap;
        min-width:0;
    }

    .morg-tab-btn{
        flex:1 1 50%;
    }

    .morg-rtab-nav{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        white-space:nowrap;
        min-width:0;
        -webkit-overflow-scrolling:touch;
    }

    .morg-rtab{
        flex:none;
        min-width:140px;
    }

    .morg-amort-wrap,
    .morg-ref-table,
    .morg-table-wrap{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .morg-donut-wrap svg,
    #morg-donutSvg{
        max-width:100%;
        height:auto;
    }

    .morg-f-formula{
        font-size:.95rem;
        line-height:1.5;
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    .morg-loan-row button,
    .morg-tab-nav button,
    .morg-rtab-nav button{
        min-width:0;
        word-break:break-word;
    }
}

@media (max-width:600px){

    .morg-hero{padding:28px 0}

    .morg-hero h1{font-size:1.65rem}

    .morg-faq-grid{
        grid-template-columns:1fr;
    }

    .morg-faq-item:nth-child(odd){
        border-right:0;
    }

    .morg-card{
        padding:14px 12px;
    }

    .morg-card-title{
        font-size:1rem;
    }

    .morg-input-wrap input,
    .morg-calc-btn{
        font-size:16px;
    }
}