/* MultiCalculators site stylesheet - loaded by the mc-design-system must-use plugin.
   Generated by Design System/build_site_css.py. Edit the sources, rebuild, re-upload; do not edit on the server. */

/* ===== BEGIN MultiCalculators Design System v1 (generated by Design System/build_ds_css.py - do not edit here) ===== */
:root{--mc-canvas:#f8fafc;
  --mc-surface:#ffffff;
  --mc-sunken:#f1f5f9;
  --mc-line:#e2e8f0;
  --mc-line-control:#8391a7;
  --mc-ink:#0f172a;
  --mc-ink-body:#334155;
  --mc-ink-muted:#5b6b82;
  --mc-brand:#1d4ed8;
  --mc-brand-hover:#1e40af;
  --mc-brand-soft:#eff6ff;
  --mc-brand-line:#bfd3fb;
  --mc-on-brand:#ffffff;
  --mc-link:var(--mc-brand);
  --mc-money:#1d4ed8;
  --mc-money-soft:#eff6ff;
  --mc-health:#047857;
  --mc-health-soft:#ecfdf5;
  --mc-home:#b45309;
  --mc-home-soft:#fffbeb;
  --mc-work:#6d28d9;
  --mc-work-soft:#f5f3ff;
  --mc-everyday:#be185d;
  --mc-everyday-soft:#fdf2f8;
  --mc-accent:var(--mc-money);
  --mc-accent-soft:var(--mc-money-soft);
  --mc-success:#0f766e;
  --mc-success-soft:#ecfdf5;
  --mc-success-line:#a7f3d0;
  --mc-warning:#a16207;
  --mc-warning-soft:#fefce8;
  --mc-danger:#b91c1c;
  --mc-danger-soft:#fef2f2;
  --mc-favorite:#b45309;
  --mc-favorite-soft:var(--mc-home-soft);
  --mc-navy:#172554;
  --mc-navy-deep:#101b43;
  --mc-navy-raised:#1e3170;
  --mc-on-navy:#ffffff;
  --mc-on-navy-body:#cbd5e1;
  --mc-on-navy-muted:#a5b4cf;
  --mc-on-navy-accent:#93b4ff;
  --mc-shadow-sm:0 1px 2px rgba(15, 23, 42, 0.051), 0 1px 3px rgba(15, 23, 42, 0.059);
  --mc-shadow-md:0 4px 10px rgba(15, 23, 42, 0.059), 0 12px 28px -6px rgba(15, 23, 42, 0.122);
  --mc-shadow-lg:0 8px 24px rgba(15, 23, 42, 0.102), 0 24px 48px -12px rgba(15, 23, 42, 0.161);
  --mc-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px #1d4ed8;
  --mc-space-1:4px;
  --mc-space-2:8px;
  --mc-space-3:12px;
  --mc-space-4:16px;
  --mc-space-5:20px;
  --mc-space-6:24px;
  --mc-space-8:32px;
  --mc-space-10:40px;
  --mc-space-14:56px;
  --mc-radius-sm:6px;
  --mc-radius-md:10px;
  --mc-radius-lg:14px;
  --mc-radius-xl:20px;
  --mc-radius-full:9999px;
  --mc-container:1200px;
  --mc-prose:70ch;
  --mc-control-sm:34px;
  --mc-control:40px;
  --mc-control-lg:48px;
  --mc-search:52px;
  --mc-header:64px;
  --mc-card-min:260px;
  --font-mc-sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mc-mono:ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace}
[data-mc-theme="dark"]{--mc-canvas:#0b1120;
  --mc-surface:#121a2b;
  --mc-sunken:#1a2438;
  --mc-line:#26324a;
  --mc-line-control:#5d6d88;
  --mc-ink:#eef2f8;
  --mc-ink-body:#c5cedb;
  --mc-ink-muted:#98a6bb;
  --mc-brand:#7aa5ff;
  --mc-brand-hover:#a3c0ff;
  --mc-brand-soft:#172a52;
  --mc-brand-line:#2c4a86;
  --mc-on-brand:#0b1120;
  --mc-money:#7aa5ff;
  --mc-money-soft:#172a52;
  --mc-health:#3fd4a0;
  --mc-health-soft:#0d2e25;
  --mc-home:#f5b64a;
  --mc-home-soft:#34240b;
  --mc-work:#b89dff;
  --mc-work-soft:#261c4d;
  --mc-everyday:#f78ab8;
  --mc-everyday-soft:#3d1428;
  --mc-success:#34d3bf;
  --mc-success-soft:#0c2e2b;
  --mc-success-line:#1d4d47;
  --mc-warning:#f2c94c;
  --mc-warning-soft:#332a0a;
  --mc-danger:#ff8a8a;
  --mc-danger-soft:#3b1414;
  --mc-favorite:#f5b64a;
  --mc-navy:#172554;
  --mc-navy-deep:#101b43;
  --mc-navy-raised:#1e3170;
  --mc-on-navy:#ffffff;
  --mc-on-navy-body:#cbd5e1;
  --mc-on-navy-muted:#a5b4cf;
  --mc-on-navy-accent:#93b4ff;
  --mc-shadow-sm:0 1px 2px rgba(0, 0, 0, 0.4);
  --mc-shadow-md:0 12px 28px -6px rgba(0, 0, 0, 0.702);
  --mc-shadow-lg:0 24px 48px -12px rgba(0, 0, 0, 0.8);
  --mc-focus-ring:0 0 0 2px #121a2b, 0 0 0 4px #7aa5ff}
.mcds:not(#mcds-x) .mc-text-display{font-family:var(--font-mc-sans);font-size:40px;line-height:48px;font-weight:700;letter-spacing:-0.02em}
.mcds:not(#mcds-x) .mc-text-h1{font-family:var(--font-mc-sans);font-size:32px;line-height:40px;font-weight:700;letter-spacing:-0.015em}
.mcds:not(#mcds-x) .mc-text-h2{font-family:var(--font-mc-sans);font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.01em}
.mcds:not(#mcds-x) .mc-text-h3{font-family:var(--font-mc-sans);font-size:18px;line-height:26px;font-weight:600}
.mcds:not(#mcds-x) .mc-text-lead{font-family:var(--font-mc-sans);font-size:18px;line-height:30px;font-weight:400}
.mcds:not(#mcds-x) .mc-text-body{font-family:var(--font-mc-sans);font-size:16px;line-height:26px;font-weight:400}
.mcds:not(#mcds-x) .mc-text-small{font-family:var(--font-mc-sans);font-size:14px;line-height:22px;font-weight:400}
.mcds:not(#mcds-x) .mc-text-label{font-family:var(--font-mc-sans);font-size:12px;line-height:16px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase}
.mcds:not(#mcds-x) .mc-text-number{font-family:var(--font-mc-sans);font-size:34px;line-height:40px;font-weight:700;letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
.mcds:not(#mcds-x) .mc-text-code{font-family:var(--font-mc-mono);font-size:14px;line-height:22px;font-weight:400}
.mcds:not(#mcds-x){font-family: var(--font-mc-sans);font-size: 16px;line-height: 1.625;color: var(--mc-ink-body);-webkit-font-smoothing: antialiased}
.mcds:not(#mcds-x) *, .mcds:not(#mcds-x) *::before, .mcds:not(#mcds-x) *::after{box-sizing: border-box}
[data-mc-cat="money"]{--mc-accent: var(--mc-money);
  --mc-accent-soft: var(--mc-money-soft)}
[data-mc-cat="health"]{--mc-accent: var(--mc-health);
  --mc-accent-soft: var(--mc-health-soft)}
[data-mc-cat="home"]{--mc-accent: var(--mc-home);
  --mc-accent-soft: var(--mc-home-soft)}
[data-mc-cat="work"]{--mc-accent: var(--mc-work);
  --mc-accent-soft: var(--mc-work-soft)}
[data-mc-cat="everyday"]{--mc-accent: var(--mc-everyday);
  --mc-accent-soft: var(--mc-everyday-soft)}
.mcds:not(#mcds-x) .mcds-i{width: 18px;height: 18px;flex: none;fill: none;stroke: currentColor;stroke-width: 1.9;stroke-linecap: round;stroke-linejoin: round}
.mcds:not(#mcds-x) .mcds-btn:focus-visible, .mcds:not(#mcds-x) .mcds-icon-btn:focus-visible, .mcds:not(#mcds-x) .mcds-link:focus-visible, .mcds:not(#mcds-x) .mcds-tag:focus-visible, .mcds:not(#mcds-x) .mcds-filter:focus-visible, .mcds:not(#mcds-x) .mcds-nav a:focus-visible, .mcds:not(#mcds-x) .mcds-footer a:focus-visible, .mcds:not(#mcds-x) .mcds-tool__title a:focus-visible, .mcds:not(#mcds-x) .mcds-cat__title a:focus-visible{outline: 2px solid transparent;box-shadow: var(--mc-focus-ring)}
.mcds:not(#mcds-x) .mcds-link{color: var(--mc-link);text-decoration: underline;text-decoration-color: var(--mc-brand-line);text-decoration-thickness: 1px;text-underline-offset: 3px;border-radius: 2px;transition: text-decoration-color .15s}
.mcds:not(#mcds-x) .mcds-link:hover{text-decoration-color: currentColor}
.mcds:not(#mcds-x) .mcds-link--quiet{color: var(--mc-ink-body);text-decoration: none}
.mcds:not(#mcds-x) .mcds-link--quiet:hover{color: var(--mc-brand);text-decoration: underline}
.mcds:not(#mcds-x) .mcds-link--more{display: inline-flex;align-items: center;gap: var(--mc-space-1);font-weight: 600;font-size: 14px;text-decoration: none}
.mcds:not(#mcds-x) .mcds-link--more:hover{text-decoration: underline}
.mcds:not(#mcds-x) .mcds-btn{display: inline-flex;align-items: center;justify-content: center;gap: var(--mc-space-2);height: var(--mc-control);padding: 0 var(--mc-space-4);border-radius: var(--mc-radius-md);border: 1px solid transparent;font-weight: 600;font-size: 14px;line-height: 1;font-family: var(--font-mc-sans);text-decoration: none;white-space: nowrap;cursor: pointer;transition: background-color .15s, border-color .15s, color .15s}
.mcds:not(#mcds-x) .mcds-btn .mcds-i{width: 16px;height: 16px}
.mcds:not(#mcds-x) .mcds-btn--primary{background: var(--mc-brand);color: var(--mc-on-brand)}
.mcds:not(#mcds-x) .mcds-btn--primary:hover{background: var(--mc-brand-hover)}
.mcds:not(#mcds-x) .mcds-btn--secondary{background: var(--mc-surface);color: var(--mc-ink);border-color: var(--mc-line-control)}
.mcds:not(#mcds-x) .mcds-btn--secondary:hover{background: var(--mc-sunken)}
.mcds:not(#mcds-x) .mcds-btn--ghost{background: transparent;color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-btn--ghost:hover{background: var(--mc-brand-soft)}
.mcds:not(#mcds-x) .mcds-btn--sm{height: var(--mc-control-sm);padding: 0 var(--mc-space-3);font-size: 13px}
.mcds:not(#mcds-x) .mcds-btn--lg{height: var(--mc-control-lg);padding: 0 var(--mc-space-6);font-size: 16px}
.mcds:not(#mcds-x) .mcds-btn.is-done{color: var(--mc-success);border-color: var(--mc-success)}
.mcds:not(#mcds-x) .mcds-btn[disabled]{opacity: .45;cursor: not-allowed}
.mcds:not(#mcds-x) .mcds-icon-btn{display: inline-flex;align-items: center;justify-content: center;width: var(--mc-control-sm);height: var(--mc-control-sm);padding: 0;border-radius: var(--mc-radius-full);border: 1px solid var(--mc-line);background: var(--mc-surface);color: var(--mc-ink-muted);cursor: pointer;transition: color .15s, border-color .15s, background-color .15s}
.mcds:not(#mcds-x) .mcds-icon-btn:hover{color: var(--mc-favorite);border-color: var(--mc-line-control)}
.mcds:not(#mcds-x) .mcds-icon-btn[aria-pressed="true"]{color: var(--mc-favorite);background: var(--mc-favorite-soft);border-color: var(--mc-favorite)}
.mcds:not(#mcds-x) .mcds-icon-btn[aria-pressed="true"] .mcds-i{fill: currentColor}
.mcds:not(#mcds-x) .mcds-chip{display: inline-flex;align-items: center;gap: var(--mc-space-1);height: 24px;padding: 0 10px;border-radius: var(--mc-radius-full);background: var(--mc-accent-soft);color: var(--mc-accent);font-weight: 600;font-size: 12px;line-height: 1;font-family: var(--font-mc-sans);letter-spacing: .01em;white-space: nowrap}
.mcds:not(#mcds-x) .mcds-chip--neutral{background: var(--mc-sunken);color: var(--mc-ink-body)}
.mcds:not(#mcds-x) .mcds-chip .mcds-i{width: 13px;height: 13px}
.mcds:not(#mcds-x) .mcds-tag{display: inline-flex;align-items: center;height: 28px;padding: 0 12px;border-radius: var(--mc-radius-full);background: var(--mc-sunken);color: var(--mc-ink-body);font-size: 13px;line-height: 1;text-decoration: none;transition: background-color .15s, color .15s}
.mcds:not(#mcds-x) .mcds-tag:hover{background: var(--mc-brand-soft);color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-filters{display: flex;flex-wrap: wrap;gap: var(--mc-space-2)}
.mcds:not(#mcds-x) .mcds-filter{display: inline-flex;align-items: center;height: 36px;padding: 0 var(--mc-space-4);border-radius: var(--mc-radius-full);border: 1px solid var(--mc-line-control);background: var(--mc-surface);color: var(--mc-ink-body);font-weight: 600;font-size: 14px;line-height: 1;font-family: var(--font-mc-sans);cursor: pointer;transition: .15s}
.mcds:not(#mcds-x) .mcds-filter:hover{color: var(--mc-brand);border-color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-filter[aria-pressed="true"]{background: var(--mc-brand);border-color: var(--mc-brand);color: var(--mc-on-brand)}
.mcds:not(#mcds-x) .mcds-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(var(--mc-card-min), 1fr));gap: var(--mc-space-4)}
.mcds:not(#mcds-x) .mcds-tool{position: relative;display: flex;flex-direction: column;gap: var(--mc-space-3);padding: var(--mc-space-5);background: var(--mc-surface);border: 1px solid var(--mc-line);border-radius: var(--mc-radius-lg);box-shadow: var(--mc-shadow-sm);transition: border-color .15s, box-shadow .15s, transform .15s}
.mcds:not(#mcds-x) .mcds-tool:hover{border-color: var(--mc-line-control);box-shadow: var(--mc-shadow-md);transform: translateY(-2px)}
.mcds:not(#mcds-x) .mcds-tool__top{display: flex;align-items: center;justify-content: space-between;gap: var(--mc-space-2)}
.mcds:not(#mcds-x) .mcds-tool__body{display: flex;flex-direction: column;gap: 6px;min-height: 96px}
.mcds:not(#mcds-x) .mcds-tool__title{margin: 0;font-weight: 600;font-size: 17px;line-height: 23px;font-family: var(--font-mc-sans);color: var(--mc-ink);letter-spacing: -.005em;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}
.mcds:not(#mcds-x) .mcds-tool__title a{color: inherit;text-decoration: none;border-radius: 4px}
.mcds:not(#mcds-x) .mcds-tool__title a::after{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: var(--mc-radius-lg)}
.mcds:not(#mcds-x) .mcds-tool__desc{margin: 0;font-size: 14px;line-height: 22px;color: var(--mc-ink-muted);display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden}
.mcds:not(#mcds-x) .mcds-tool__actions{display: grid;grid-template-columns: 1fr 1fr;gap: var(--mc-space-2);margin-top: auto}
.mcds:not(#mcds-x) .mcds-tool__actions, .mcds:not(#mcds-x) .mcds-tool .mcds-icon-btn{position: relative;z-index: 1}
@media (prefers-reduced-motion: reduce){
.mcds:not(#mcds-x) .mcds-tool, .mcds:not(#mcds-x) .mcds-cat{transition: none}
.mcds:not(#mcds-x) .mcds-tool:hover, .mcds:not(#mcds-x) .mcds-cat:hover{transform: none}}
.mcds:not(#mcds-x) .mcds-cat{position: relative;display: flex;flex-direction: column;gap: var(--mc-space-3);padding: var(--mc-space-5);background: var(--mc-surface);border: 1px solid var(--mc-line);border-radius: var(--mc-radius-lg);box-shadow: var(--mc-shadow-sm);transition: border-color .15s, box-shadow .15s, transform .15s}
.mcds:not(#mcds-x) .mcds-cat:hover{border-color: var(--mc-line-control);box-shadow: var(--mc-shadow-md);transform: translateY(-2px)}
.mcds:not(#mcds-x) .mcds-cat__head{display: flex;align-items: center;gap: var(--mc-space-3)}
.mcds:not(#mcds-x) .mcds-cat__icon{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: var(--mc-radius-md);background: var(--mc-accent-soft);color: var(--mc-accent);flex: none}
.mcds:not(#mcds-x) .mcds-cat__icon .mcds-i{width: 20px;height: 20px}
.mcds:not(#mcds-x) .mcds-cat__title{margin: 0;font-weight: 600;font-size: 17px;line-height: 23px;font-family: var(--font-mc-sans);color: var(--mc-ink)}
.mcds:not(#mcds-x) .mcds-cat__title a{color: inherit;text-decoration: none;border-radius: 4px}
.mcds:not(#mcds-x) .mcds-cat__title a:hover{color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-cat__desc{margin: 0;font-size: 14px;line-height: 22px;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-cat__links{display: flex;flex-wrap: wrap;gap: 6px;margin-top: auto;padding-top: var(--mc-space-1)}
.mcds:not(#mcds-x) .mcds-stats{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: var(--mc-space-3)}
.mcds:not(#mcds-x) .mcds-stat{display: flex;flex-direction: column;justify-content: center;gap: 2px;min-width: 0;padding: var(--mc-space-4) var(--mc-space-5);background: var(--mc-surface);border: 1px solid var(--mc-line);border-radius: var(--mc-radius-lg)}
.mcds:not(#mcds-x) .mcds-stat strong{font-weight: 700;font-size: 24px;line-height: 1.15;font-family: var(--font-mc-sans);color: var(--mc-ink);letter-spacing: -.01em;font-variant-numeric: tabular-nums}
.mcds:not(#mcds-x) .mcds-stat span{font-size: 13px;line-height: 18px;color: var(--mc-ink-muted);white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
@media (max-width: 640px){
.mcds:not(#mcds-x) .mcds-stats{grid-template-columns: repeat(2, minmax(0, 1fr))}}
.mcds:not(#mcds-x) .mcds-answer{padding: var(--mc-space-5) var(--mc-space-6);background: var(--mc-success-soft);border: 1px solid var(--mc-success-line);border-radius: var(--mc-radius-lg)}
.mcds:not(#mcds-x) .mcds-answer__label{display: flex;align-items: center;gap: 6px;margin: 0 0 var(--mc-space-2);font-weight: 700;font-size: 12px;line-height: 16px;font-family: var(--font-mc-sans);letter-spacing: .06em;text-transform: uppercase;color: var(--mc-success)}
.mcds:not(#mcds-x) .mcds-answer dl{margin: 0;display: grid;gap: var(--mc-space-2)}
.mcds:not(#mcds-x) .mcds-answer dl div{display: grid;grid-template-columns: 112px 1fr;gap: var(--mc-space-3);font-size: 15px;line-height: 24px}
.mcds:not(#mcds-x) .mcds-answer dt{font-weight: 600;color: var(--mc-ink)}
.mcds:not(#mcds-x) .mcds-answer dd{margin: 0;color: var(--mc-ink-body)}
@media (max-width: 480px){
.mcds:not(#mcds-x) .mcds-answer dl div{grid-template-columns: 1fr;gap: 0}}
.mcds:not(#mcds-x) .mcds-search{display: flex;align-items: center;gap: var(--mc-space-2);height: var(--mc-search);padding: 0 6px 0 var(--mc-space-4);background: var(--mc-surface);border: 1px solid var(--mc-line-control);border-radius: var(--mc-radius-lg);box-shadow: var(--mc-shadow-sm);transition: border-color .15s, box-shadow .15s}
.mcds:not(#mcds-x) .mcds-search:focus-within{border-color: var(--mc-brand);box-shadow: var(--mc-focus-ring)}
.mcds:not(#mcds-x) .mcds-search > .mcds-i{color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-search input{flex: 1;min-width: 0;height: 100%;border: 0;background: transparent;outline: none;font-weight: 400;font-size: 16px;line-height: 1;font-family: var(--font-mc-sans);color: var(--mc-ink)}
.mcds:not(#mcds-x) .mcds-search input::placeholder{color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-search--compact{height: var(--mc-control);border-radius: var(--mc-radius-md);box-shadow: none;padding: 0 var(--mc-space-3)}
.mcds:not(#mcds-x) .mcds-result{display: grid;gap: var(--mc-space-3);padding: var(--mc-space-5);background: var(--mc-brand-soft);border: 1px solid var(--mc-brand-line);border-radius: var(--mc-radius-lg)}
.mcds:not(#mcds-x) .mcds-result__label{margin: 0;font-size: 13px;line-height: 18px;font-weight: 600;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-result__value{margin: 0;font-weight: 700;font-size: 34px;line-height: 40px;font-family: var(--font-mc-sans);letter-spacing: -.01em;color: var(--mc-ink);font-variant-numeric: tabular-nums}
.mcds:not(#mcds-x) .mcds-result__rows{margin: 0;display: grid;grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));gap: var(--mc-space-3)}
.mcds:not(#mcds-x) .mcds-result__rows div{padding: var(--mc-space-3);background: var(--mc-surface);border-radius: var(--mc-radius-md)}
.mcds:not(#mcds-x) .mcds-result__rows dt{font-size: 12px;line-height: 16px;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-result__rows dd{margin: 2px 0 0;font-size: 17px;font-weight: 600;color: var(--mc-ink);font-variant-numeric: tabular-nums}
.mcds:not(#mcds-x) .mcds-verdict{display: flex;align-items: flex-start;gap: var(--mc-space-2);padding: 10px var(--mc-space-3);border-radius: var(--mc-radius-sm);font-size: 14px;line-height: 22px}
.mcds:not(#mcds-x) .mcds-verdict strong{font-weight: 700}
.mcds:not(#mcds-x) .mcds-verdict--good{background: var(--mc-success-soft);color: var(--mc-success)}
.mcds:not(#mcds-x) .mcds-verdict--ok{background: var(--mc-surface);color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-verdict--warn{background: var(--mc-warning-soft);color: var(--mc-warning)}
.mcds:not(#mcds-x) .mcds-verdict--bad{background: var(--mc-danger-soft);color: var(--mc-danger)}
.mcds:not(#mcds-x) .mcds-formula{margin: 0;padding: 10px var(--mc-space-3);background: var(--mc-surface);border-radius: var(--mc-radius-sm);font-weight: 400;font-size: 14px;line-height: 22px;font-family: var(--font-mc-mono);color: var(--mc-ink-body);overflow-x: auto}
.mcds:not(#mcds-x) .mcds-crumbs{display: flex;flex-wrap: wrap;gap: 6px;margin: 0 0 var(--mc-space-3);padding: 0;list-style: none;font-size: 13px;line-height: 18px;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-crumbs li + li::before{content: "/";margin-right: 6px;color: var(--mc-line-control)}
.mcds:not(#mcds-x) .mcds-crumbs a{color: var(--mc-ink-body);text-decoration: none}
.mcds:not(#mcds-x) .mcds-crumbs a:hover{color: var(--mc-brand);text-decoration: underline}
.mcds:not(#mcds-x) .mcds-hero__title{margin: 0;color: var(--mc-ink)}
.mcds:not(#mcds-x) .mcds-hero__lead{margin: var(--mc-space-3) 0 0;max-width: 62ch;font-size: 18px;line-height: 30px;color: var(--mc-ink-body)}
.mcds:not(#mcds-x) .mcds-hero--pillar{padding: var(--mc-space-10);background: var(--mc-accent-soft);border-radius: var(--mc-radius-xl)}
.mcds:not(#mcds-x) .mcds-hero--pillar .mcds-hero__title{margin-top: var(--mc-space-3);font-weight: 700;font-size: 40px;line-height: 48px;font-family: var(--font-mc-sans);letter-spacing: -.02em}
.mcds:not(#mcds-x) .mcds-hero--cluster{display: flex;gap: var(--mc-space-4);align-items: flex-start;padding: var(--mc-space-8);background: var(--mc-surface);border: 1px solid var(--mc-line);border-radius: var(--mc-radius-xl)}
.mcds:not(#mcds-x) .mcds-hero--cluster .mcds-cat__icon{width: 48px;height: 48px}
.mcds:not(#mcds-x) .mcds-hero--cluster .mcds-hero__title{font-weight: 700;font-size: 32px;line-height: 40px;font-family: var(--font-mc-sans);letter-spacing: -.015em}
.mcds:not(#mcds-x) .mcds-hero--tool{padding: var(--mc-space-2) 0 0}
.mcds:not(#mcds-x) .mcds-hero--tool .mcds-hero__title{font-weight: 700;font-size: 32px;line-height: 40px;font-family: var(--font-mc-sans);letter-spacing: -.015em}
.mcds:not(#mcds-x) .mcds-hero--tool .mcds-hero__lead{font-size: 16px;line-height: 26px}
.mcds:not(#mcds-x) .mcds-hero__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--mc-space-2) var(--mc-space-4);margin-top: var(--mc-space-4);font-size: 13px;color: var(--mc-ink-muted)}
@media (max-width: 640px){
.mcds:not(#mcds-x) .mcds-hero--pillar{padding: var(--mc-space-6)}
.mcds:not(#mcds-x) .mcds-hero--pillar .mcds-hero__title{font-size: 30px;line-height: 36px}
.mcds:not(#mcds-x) .mcds-hero--cluster{padding: var(--mc-space-6);flex-direction: column}
.mcds:not(#mcds-x) .mcds-hero--cluster .mcds-hero__title, .mcds:not(#mcds-x) .mcds-hero--tool .mcds-hero__title{font-size: 26px;line-height: 32px}
.mcds:not(#mcds-x) .mcds-hero__lead{font-size: 16px;line-height: 26px}}
.mcds:not(#mcds-x) .mcds-header{position: sticky;top: 0;z-index: 50;background: var(--mc-surface);border-bottom: 1px solid var(--mc-line)}
.mcds:not(#mcds-x) .mcds-header.is-scrolled{box-shadow: var(--mc-shadow-lg)}
.mcds:not(#mcds-x) .mcds-header__inner{display: flex;align-items: center;gap: var(--mc-space-6);max-width: var(--mc-container);height: var(--mc-header);margin: 0 auto;padding: 0 var(--mc-space-6)}
.mcds:not(#mcds-x) .mcds-wordmark{display: inline-flex;align-items: center;gap: var(--mc-space-2);font-weight: 700;font-size: 18px;line-height: 1;font-family: var(--font-mc-sans);letter-spacing: -.01em;color: var(--mc-ink);text-decoration: none;white-space: nowrap}
.mcds:not(#mcds-x) .mcds-wordmark b{color: var(--mc-brand);font-weight: 700}
.mcds:not(#mcds-x) .mcds-wordmark img{width: 32px;height: 32px;flex: none;display: block}
.mcds:not(#mcds-x) .mcds-nav{display: flex;gap: 2px;margin: 0;padding: 0;list-style: none}
.mcds:not(#mcds-x) .mcds-nav a{display: inline-flex;align-items: center;height: 36px;padding: 0 var(--mc-space-3);border-radius: var(--mc-radius-md);color: var(--mc-ink-body);font-size: 14px;font-weight: 600;text-decoration: none;white-space: nowrap;transition: background-color .15s, color .15s}
.mcds:not(#mcds-x) .mcds-nav a:hover{background: var(--mc-sunken);color: var(--mc-ink)}
.mcds:not(#mcds-x) .mcds-nav a[aria-current="page"]{background: var(--mc-brand-soft);color: var(--mc-brand)}
.mcds:not(#mcds-x) .mcds-header__search{flex: 1;max-width: 340px;margin-left: auto}
.mcds:not(#mcds-x) .mcds-header__menu{display: none;margin-left: auto}
@media (max-width: 900px){
.mcds:not(#mcds-x) .mcds-nav, .mcds:not(#mcds-x) .mcds-header__search{display: none}
.mcds:not(#mcds-x) .mcds-header__menu{display: inline-flex}
.mcds:not(#mcds-x) .mcds-header__inner{padding: 0 var(--mc-space-4)}}
.mcds:not(#mcds-x) .mcds-footer{background: var(--mc-surface);border-top: 1px solid var(--mc-line);font-size: 14px;line-height: 22px}
.mcds:not(#mcds-x) .mcds-footer__grid{display: grid;grid-template-columns: 1.5fr repeat(3, 1fr);gap: var(--mc-space-8);max-width: var(--mc-container);margin: 0 auto;padding: var(--mc-space-10) var(--mc-space-6) var(--mc-space-8)}
.mcds:not(#mcds-x) .mcds-footer__about p{margin: var(--mc-space-3) 0 0;max-width: 36ch;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-footer h2{margin: 0 0 var(--mc-space-3);font-weight: 700;font-size: 12px;line-height: 16px;font-family: var(--font-mc-sans);letter-spacing: .06em;text-transform: uppercase;color: var(--mc-ink-muted)}
.mcds:not(#mcds-x) .mcds-footer ul{margin: 0;padding: 0;list-style: none;display: grid;gap: var(--mc-space-2)}
.mcds:not(#mcds-x) .mcds-footer a{color: var(--mc-ink-body);text-decoration: none;border-radius: 2px}
.mcds:not(#mcds-x) .mcds-footer a:hover{color: var(--mc-brand);text-decoration: underline}
.mcds:not(#mcds-x) .mcds-footer__bar{display: flex;flex-wrap: wrap;justify-content: space-between;gap: var(--mc-space-3);max-width: var(--mc-container);margin: 0 auto;padding: var(--mc-space-5) var(--mc-space-6);border-top: 1px solid var(--mc-line);color: var(--mc-ink-muted);font-size: 13px}
@media (max-width: 900px){
.mcds:not(#mcds-x) .mcds-footer__grid{grid-template-columns: repeat(2, 1fr)}
.mcds:not(#mcds-x) .mcds-footer__about{grid-column: 1 / -1}}
@media (max-width: 480px){
.mcds:not(#mcds-x) .mcds-footer__grid{grid-template-columns: 1fr;padding: var(--mc-space-8) var(--mc-space-4)}
.mcds:not(#mcds-x) .mcds-footer__bar{padding: var(--mc-space-4)}}
.mcds:not(#mcds-x) .mcds-section{padding: var(--mc-space-14) 0}
.mcds:not(#mcds-x) .mcds-section__head{margin-bottom: var(--mc-space-6)}
.mcds:not(#mcds-x) .mcds-eyebrow{display: block;margin-bottom: var(--mc-space-2);font-weight: 600;font-size: 12px;line-height: 16px;font-family: var(--font-mc-sans);letter-spacing: .06em;text-transform: uppercase;color: var(--mc-accent)}
@media (max-width: 980px){
.mcds:not(#mcds-x) .mcds-section{padding: var(--mc-space-10) 0}}
@media (max-width: 640px){
.mcds:not(#mcds-x) .mcds-section{padding: var(--mc-space-8) 0}}
.mcds:not(#mcds-x) .mcds-search input{padding:0;margin:0;box-shadow:none;border-radius:0;-webkit-appearance:none;appearance:none}
.mcds:not(#mcds-x) .mcds-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mcds:not(#mcds-x) button.mcds-btn,.mcds:not(#mcds-x) button.mcds-icon-btn,.mcds:not(#mcds-x) button.mcds-filter{text-transform:none;letter-spacing:normal;box-shadow:none;min-height:0}
/* ===== END MultiCalculators Design System v1 ===== */

/* ==========================================================
   MULTICALCULATORS: COMPLETE RESPONSIVE SITE CSS
   GeneratePress Premium

   Desktop:
   Flexible main content + 320px right sidebar

   Tablet and mobile:
   Stacked single-column layout
   ========================================================== */


/* ==========================================================
   1. SITE DESIGN VARIABLES
   ========================================================== */

body {
    --mc-font-body: "Segoe UI Variable", "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;

    --mc-font-heading: "Segoe UI Variable", "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;

    --mc-text: #172033;
    --mc-heading: #081a36;
    --mc-muted: #526174;
    --mc-primary: #1458e6;
    --mc-primary-hover: #0d46bd;
    --mc-border: #dce4ee;
    --mc-soft-bg: #f5f8fc;
    --mc-page-bg: #f4f6f8;
    --mc-white: #ffffff;
    --mc-focus: #ffbf47;
    --mc-radius: 10px;
}


/* ==========================================================
   2. GLOBAL TYPOGRAPHY
   Uses local system fonts without external font requests
   ========================================================== */

body,
button,
input,
select,
textarea {
    font-family: var(--mc-font-body);
}

body {
    color: var(--mc-text);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   3. PROFESSIONAL HEADING TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.widget-title {
    max-width: 100%;
    color: var(--mc-heading);
    font-family: var(--mc-font-heading);
    font-style: normal;
    font-weight: 700;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal;
    hyphens: none;
    text-wrap: wrap;
}

/* Main page and article titles */
h1,
.entry-title {
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -0.028em;
}

/* Article title */
.single-post .entry-title {
    max-width: 100%;
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -0.028em;
}

/* Static page title */
.page .entry-title {
    max-width: 100%;
    font-size: 40px;
    line-height: 1.18;
    letter-spacing: -0.025em;
}

/* Homepage H1 inside custom content */
.home .entry-content h1 {
    max-width: 100%;
    font-size: 42px;
    line-height: 1.16;
    letter-spacing: -0.028em;
}

/* H2 */
.entry-content h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: 30px;
    line-height: 1.24;
    letter-spacing: -0.022em;
}

/* H3 */
.entry-content h3 {
    margin-top: 34px;
    margin-bottom: 12px;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.016em;
}

/* H4 */
.entry-content h4 {
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

/* H5 */
.entry-content h5 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0;
}

/* H6 */
.entry-content h6 {
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.4;
    letter-spacing: 0;
}

/* Avoid unnecessary space before the first content heading */
.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > h4:first-child {
    margin-top: 0;
}

/* Article metadata */
.single-post .entry-meta {
    margin-top: 0;
    margin-bottom: 30px;
    color: var(--mc-muted);
    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================
   4. BODY CONTENT SPACING
   ========================================================== */

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content table,
.entry-content blockquote {
    margin-top: 0;
    margin-bottom: 1.15em;
}

.entry-content li {
    margin-bottom: 0.4em;
}

.entry-content li:last-child {
    margin-bottom: 0;
}

/* Keep long URLs and text inside containers */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.widget {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Restore natural wrapping for headings */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-title {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}


/* ==========================================================
   5. LINKS
   ========================================================== */

.entry-content a:not(.button):not(.wp-block-button__link),
.widget a {
    color: var(--mc-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.entry-content a:not(.button):not(.wp-block-button__link):hover,
.widget a:hover {
    color: var(--mc-primary-hover);
}


/* ==========================================================
   6. KEYBOARD ACCESSIBILITY
   ========================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--mc-focus);
    outline-offset: 3px;
}


/* ==========================================================
   7. RESPONSIVE MEDIA
   ========================================================== */

.entry-content img,
.entry-content video,
.entry-content canvas,
.entry-content svg {
    max-width: 100%;
    height: auto;
}

.entry-content iframe {
    max-width: 100%;
}


/* ==========================================================
   8. TABLE DESIGN
   ========================================================== */

.entry-content table {
    width: 100%;
    border-collapse: collapse;
}

.entry-content th,
.entry-content td {
    padding: 12px 14px;
    border: 1px solid var(--mc-border);
    text-align: left;
    vertical-align: top;
}

.entry-content th {
    color: var(--mc-heading);
    background: var(--mc-soft-bg);
    font-weight: 700;
}


/* ==========================================================
   9. LAYOUT CALCULATION SAFETY
   ========================================================== */

body.right-sidebar .site-content,
body.right-sidebar .site-content *,
body.right-sidebar .site-content *::before,
body.right-sidebar .site-content *::after {
    box-sizing: border-box;
}


/* ==========================================================
   10. DESKTOP TWO-COLUMN LAYOUT
   Main content + 24px gap + 320px sidebar
   ========================================================== */

@media (min-width: 1025px) {

    body.right-sidebar .site-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
    }

    /* Main content */
    body.right-sidebar #primary {
        display: block !important;
        float: none !important;
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Right sidebar */
    body.right-sidebar #right-sidebar {
        display: block !important;
        float: none !important;
        flex: 0 0 320px !important;
        width: 320px !important;
        min-width: 320px !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.right-sidebar #right-sidebar .inside-right-sidebar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ==========================================================
   11. SIDEBAR WIDGET DESIGN
   ========================================================== */

body.right-sidebar #right-sidebar .widget {
    display: block !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 24px !important;
    padding: 20px !important;
    overflow: hidden !important;
    color: var(--mc-text);
    background: var(--mc-white) !important;
    border: 1px solid #edf0f4;
    border-radius: var(--mc-radius);
    box-shadow: 0 2px 8px rgba(8, 26, 54, 0.04);
}

/* Sidebar headings */
body.right-sidebar #right-sidebar .widget-title,
body.right-sidebar #right-sidebar .widget h2 {
    margin: 0 0 14px;
    color: var(--mc-heading);
    font-family: var(--mc-font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

body.right-sidebar #right-sidebar .widget-inner,
body.right-sidebar #right-sidebar .wp-block-group,
body.right-sidebar #right-sidebar .wp-block-group__inner-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Sidebar lists */
body.right-sidebar #right-sidebar ul {
    margin: 0;
    padding-left: 1.1em;
}

body.right-sidebar #right-sidebar li {
    margin-bottom: 10px;
    line-height: 1.5;
}

body.right-sidebar #right-sidebar li:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   12. SIDEBAR SEARCH FORM
   ========================================================== */

body.right-sidebar #right-sidebar .search-form {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.right-sidebar #right-sidebar .search-field {
    display: block !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 10px 13px;
    color: var(--mc-text);
    background: var(--mc-white);
    border: 1px solid #aeb9c7;
    border-radius: 6px 0 0 6px;
}

body.right-sidebar #right-sidebar .search-submit {
    display: block !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff;
    background: #202025;
    border: 0;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
}

body.right-sidebar #right-sidebar .search-submit:hover {
    background: var(--mc-primary);
}


/* ==========================================================
   13. GENERAL SIDEBAR MEDIA
   Does not stretch fixed advertisement iframes
   ========================================================== */

body.right-sidebar #right-sidebar img,
body.right-sidebar #right-sidebar video,
body.right-sidebar #right-sidebar canvas,
body.right-sidebar #right-sidebar svg {
    display: block;
    max-width: 100% !important;
    height: auto !important;
}

body.right-sidebar #right-sidebar iframe {
    display: block;
    max-width: 100% !important;
    border: 0;
}

body.right-sidebar #right-sidebar ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ==========================================================
   14. ADSTERRA 300×250 SIDEBAR BANNER
   ========================================================== */

/* Class placed inside a Custom HTML widget */
body.right-sidebar #right-sidebar .widget:has(.mc-ad-widget) {
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--mc-white) !important;
    text-align: center !important;
}

/* Class assigned directly to the outer widget */
body.right-sidebar #right-sidebar .widget.mc-ad-widget {
    padding: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
}

body.right-sidebar #right-sidebar .mc-ad-widget {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    max-width: 320px;
    min-height: 250px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

body.right-sidebar #right-sidebar .mc-adsterra-300x250 {
    display: block;
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    height: 250px;
    min-height: 250px;
    max-height: 250px;
    margin: 0 auto;
    overflow: hidden;
}

body.right-sidebar #right-sidebar .mc-adsterra-300x250 iframe {
    display: block !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    margin: 0 !important;
    border: 0 !important;
}


/* ==========================================================
   15. MANUAL ADSENSE PLACEMENTS
   Inserted through Ad Inserter
   ========================================================== */

.mc-manual-ad {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 250px;
    margin: 32px auto;
    padding: 0;
    overflow: hidden;
    text-align: center;
    background: transparent;
}

.mc-manual-ad ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* ==========================================================
   16. TABLET LAYOUT AND TYPOGRAPHY
   ========================================================== */

@media (min-width: 769px) and (max-width: 1024px) {

    /* Single-column layout */
    body.right-sidebar .site-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.right-sidebar #primary,
    body.right-sidebar #right-sidebar {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.right-sidebar #right-sidebar {
        margin-top: 30px !important;
        padding: 0 !important;
    }

    body.right-sidebar #right-sidebar .inside-right-sidebar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Tablet headings */
    h1,
    .entry-title,
    .single-post .entry-title,
    .page .entry-title,
    .home .entry-content h1 {
        margin-bottom: 17px;
        font-size: 38px;
        line-height: 1.18;
        letter-spacing: -0.024em;
    }

    .entry-content h2 {
        margin-top: 40px;
        margin-bottom: 14px;
        font-size: 28px;
        line-height: 1.25;
    }

    .entry-content h3 {
        margin-top: 30px;
        margin-bottom: 11px;
        font-size: 23px;
        line-height: 1.3;
    }

    .entry-content h4 {
        margin-top: 26px;
        margin-bottom: 9px;
        font-size: 19px;
        line-height: 1.35;
    }
}


/* ==========================================================
   17. MOBILE LAYOUT AND TYPOGRAPHY
   ========================================================== */

@media (max-width: 768px) {

    body {
        font-size: 16px;
        line-height: 1.65;
    }

    /* Single-column layout */
    body.right-sidebar .site-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.right-sidebar #primary,
    body.right-sidebar #right-sidebar {
        display: block !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.right-sidebar #right-sidebar {
        margin-top: 24px !important;
        padding: 0 !important;
    }

    body.right-sidebar #right-sidebar .inside-right-sidebar {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Mobile H1 */
    h1,
    .entry-title,
    .single-post .entry-title,
    .page .entry-title,
    .home .entry-content h1 {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: 32px;
        line-height: 1.2;
        letter-spacing: -0.022em;
        word-break: normal;
        overflow-wrap: normal;
        white-space: normal;
        hyphens: none;
    }

    /* Mobile H2 */
    .entry-content h2 {
        margin-top: 34px;
        margin-bottom: 13px;
        font-size: 26px;
        line-height: 1.26;
        letter-spacing: -0.018em;
    }

    /* Mobile H3 */
    .entry-content h3 {
        margin-top: 28px;
        margin-bottom: 10px;
        font-size: 22px;
        line-height: 1.32;
        letter-spacing: -0.012em;
    }

    /* Mobile H4 */
    .entry-content h4 {
        margin-top: 24px;
        margin-bottom: 9px;
        font-size: 19px;
        line-height: 1.38;
        letter-spacing: -0.006em;
    }

    /* Article metadata */
    .single-post .entry-meta {
        margin-bottom: 24px;
        font-size: 13px;
    }

    /* Sidebar widgets */
    body.right-sidebar #right-sidebar .widget {
        margin-bottom: 20px !important;
        padding: 16px !important;
    }

    body.right-sidebar #right-sidebar .widget:has(.mc-ad-widget),
    body.right-sidebar #right-sidebar .widget.mc-ad-widget {
        padding: 0 !important;
    }

    /* Search button */
    body.right-sidebar #right-sidebar .search-submit {
        flex-basis: 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    /* Table cells */
    .entry-content th,
    .entry-content td {
        padding: 10px;
    }

    /* Manual advertisement spacing */
    .mc-manual-ad {
        min-height: 250px;
        margin: 24px auto;
    }
}


/* ==========================================================
   18. SMALL PHONE TYPOGRAPHY
   ========================================================== */

@media (max-width: 480px) {

    h1,
    .entry-title,
    .single-post .entry-title,
    .page .entry-title,
    .home .entry-content h1 {
        font-size: 29px;
        line-height: 1.22;
        letter-spacing: -0.018em;
    }

    .entry-content h2 {
        margin-top: 32px;
        font-size: 24px;
        line-height: 1.28;
    }

    .entry-content h3 {
        margin-top: 26px;
        font-size: 21px;
        line-height: 1.34;
    }

    .entry-content h4 {
        margin-top: 22px;
        font-size: 18px;
        line-height: 1.4;
    }
}


/* ==========================================================
   19. SMALL PHONE FIXED AD PROTECTION
   Fixed 300px ad may not fit after mobile page padding
   ========================================================== */

@media (max-width: 380px) {

    body.right-sidebar #right-sidebar .widget:has(.mc-ad-widget),
    body.right-sidebar #right-sidebar .widget.mc-ad-widget {
        display: none !important;
    }
}


/* ==========================================================
   20. REDUCED MOTION ACCESSIBILITY
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* Author box avatar - clean small circle */
.m-a-box-avatar img,
.m-a-box-avatar-url img,
img.attachment-150x150.size-150x150 {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: top center !important;
}
img.avatar { border-radius: 50% !important; object-fit: cover !important; }

/* ===== BEGIN MultiCalculators Theme Alignment v2 (rollout step 3, option A: navy chrome) =====
   Loads AFTER the original theme CSS. Points the old --mc-* variables at the design-system palette and
   restyles the GeneratePress header, navigation, mobile header, footer and back-to-top button in navy.
   The original theme CSS above stays untouched; delete this block to roll back. */

/* 1. Old theme variables -> design-system tokens (old values in comments).
   `html body` (0,0,2) beats the original `body` (0,0,1) whatever order the CSS loads in. */
html body {
  --mc-font-body: var(--font-mc-sans);      /* "Segoe UI Variable", "Segoe UI", Roboto ... */
  --mc-font-heading: var(--font-mc-sans);
  --mc-text: var(--mc-ink-body);            /* #172033 */
  --mc-heading: var(--mc-ink);              /* #081a36 */
  --mc-muted: var(--mc-ink-muted);          /* #526174 */
  --mc-primary: var(--mc-brand);            /* #1458e6 */
  --mc-primary-hover: var(--mc-brand-hover);/* #0d46bd */
  --mc-border: var(--mc-line);              /* #dce4ee */
  --mc-soft-bg: var(--mc-sunken);           /* #f5f8fc */
  --mc-page-bg: var(--mc-canvas);           /* #f4f6f8 */
  --mc-white: var(--mc-surface);            /* #ffffff */
  --mc-focus: var(--mc-brand);              /* #ffbf47 amber outline -> brand */
}

/* 2. Links in page content (GeneratePress default #1b78e2 is 4.2:1 on white, below AA; brand is 6.7:1) */
a { color: var(--mc-brand); }
a:hover, a:focus { color: var(--mc-brand-hover); }

/* 3. Top utility bar (About, Methodology, Editorial, Accuracy): deep navy */
#secondary-navigation { background-color: var(--mc-navy-deep); }
#secondary-navigation .main-nav ul li a { color: var(--mc-on-navy-body); font-size: 13px; font-weight: 600; line-height: 34px; }
#secondary-navigation .main-nav ul li a:hover,
#secondary-navigation .main-nav ul li.current-menu-item > a { color: var(--mc-on-navy); background-color: transparent; }
#secondary-navigation .menu-toggle, #secondary-navigation .secondary-menu-toggle { color: var(--mc-on-navy-body); line-height: 34px; }
/* phones: hide the utility bar so only one Menu button shows; its links live in the footer menu */
@media (max-width: 768px) { #secondary-navigation { display: none; } }

/* 4. Main navigation bar: navy */
#site-navigation, #site-navigation ul ul { background-color: var(--mc-navy); }
#site-navigation.is_stuck { box-shadow: var(--mc-shadow-lg); }  /* only while actually stuck (stuckElement is always present) */
#site-navigation .main-nav > ul > li > a { color: var(--mc-on-navy-body); font-size: 14.5px; font-weight: 600; line-height: 64px; background-color: transparent; padding-left: 14px; padding-right: 14px; }
#site-navigation .main-nav > ul > li:hover > a,
#site-navigation .main-nav > ul > li.sfHover > a,
#site-navigation .main-nav > ul > li > a:focus { color: var(--mc-on-navy); background-color: var(--mc-navy-raised); }
#site-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .main-nav > ul > li.current-menu-ancestor > a,
#site-navigation .main-nav > ul > li.current-page-ancestor > a { color: var(--mc-on-navy); box-shadow: inset 0 -3px 0 var(--mc-on-navy-accent); }
#site-navigation .main-nav ul ul { border: 1px solid var(--mc-navy-raised); border-radius: var(--mc-radius-md); box-shadow: var(--mc-shadow-lg); overflow: hidden; }
#site-navigation .main-nav ul ul li a { color: var(--mc-on-navy-body); font-size: 14px; font-weight: 500; line-height: 1.4; background-color: var(--mc-navy); }
#site-navigation .main-nav ul ul li a:hover,
#site-navigation .main-nav ul ul li.sfHover > a { color: var(--mc-on-navy); background-color: var(--mc-navy-raised); }
#site-navigation .menu-toggle, #site-navigation .menu-bar-item > a { color: var(--mc-on-navy); }
/* small laptops: keep logo + ten menu items on one row (logo size for this range is in section 5) */
@media (min-width: 769px) and (max-width: 1100px) {
  #site-navigation .main-nav > ul > li > a { font-size: 14px; padding-left: 9px; padding-right: 9px; }
}
/* keyboard focus on navy: the light-blue ring (brand blue is too faint on navy) */
#secondary-navigation a:focus-visible, #site-navigation a:focus-visible, #mobile-header a:focus-visible,
#mobile-header .menu-toggle:focus-visible, #site-navigation .menu-toggle:focus-visible, .site-footer a:focus-visible {
  outline: 2px solid var(--mc-on-navy-accent); outline-offset: 2px;
}

/* 5. Logo: 36px tall (use the light-text logo file mc-logo-header-on-dark.png on navy) */
#site-navigation .navigation-branding img,
#site-navigation .site-logo img,
#mobile-header .site-logo img { height: 36px; width: auto; max-width: none; padding-top: 0; padding-bottom: 0; }
/* GeneratePress pads the logo 10px top and bottom inside a border-box, which shrank it to 16px of art */
@media (min-width: 769px) and (max-width: 1100px) {
  #site-navigation .navigation-branding img, #site-navigation .site-logo img { height: 30px; }
}
/* the branding box must not shrink, or max-width:100% squashes a wide logo */
#site-navigation .navigation-branding, #site-navigation .site-logo,
#mobile-header .navigation-branding, #mobile-header .site-logo { flex-shrink: 0; max-width: none; }

/* 5b. Page ground: design-system canvas instead of GeneratePress #fafafa */
body { background-color: var(--mc-canvas); }

/* 6. Mobile header bar: navy */
#mobile-header, #mobile-header ul ul, #mobile-header .main-nav { background-color: var(--mc-navy); }
#mobile-header .main-title a, #mobile-header .main-title a:hover { color: var(--mc-on-navy); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
#mobile-header .menu-toggle { color: var(--mc-on-navy); }
#mobile-header .main-nav ul li a { color: var(--mc-on-navy-body); font-size: 15px; font-weight: 600; }
#mobile-header .main-nav ul li a:hover,
#mobile-header .main-nav ul li.current-menu-item > a { color: var(--mc-on-navy); background-color: var(--mc-navy-raised); }
#mobile-header .main-nav ul li { border-top: 1px solid var(--mc-navy-raised); }

/* 7. Footer: navy, matching the header */
.site-footer .site-info { background-color: var(--mc-navy); color: var(--mc-on-navy-muted); font-size: 14px; }
.site-footer .site-info a { color: var(--mc-on-navy-body); text-decoration: none; }
.site-footer .site-info a:hover { color: var(--mc-on-navy); text-decoration: underline; text-decoration-color: var(--mc-on-navy-accent); }
.site-footer .footer-bar .menu li { margin: 0 6px; }
.site-footer .copyright-bar { color: var(--mc-on-navy-muted); font-size: 13px; }

/* 8. Back-to-top button */
body a.generate-back-to-top { background-color: var(--mc-brand); color: var(--mc-on-brand); border-radius: var(--mc-radius-md); box-shadow: var(--mc-shadow-md); }
body a.generate-back-to-top:hover, body a.generate-back-to-top:focus { background-color: var(--mc-brand-hover); color: var(--mc-on-brand); }

/* ===== END MultiCalculators Theme Alignment v2 ===== */