/* ============================================================
   MFD CENTRAL — mfd-theme.css
   LOCATION: public_html/assets/css/mfd-theme.css
   ============================================================
   The single source of truth for how MFD Central looks. Loaded by
   EVERY calculator and every site page. Restyling the whole site
   means editing this file, not forty others.

   Tokens are taken from the approved SIP calculator design.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONTS — self-hosted, no third-party request
   Manrope ships as a variable font, so one file covers 400-800.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/assets/fonts/manrope-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 400 800;
  font-display: swap; src: url('/assets/fonts/manrope-var-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/instrument-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/instrument-serif-400-normal-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/instrument-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/assets/fonts/instrument-serif-400-italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
                 U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------
   2. TOKENS
   ------------------------------------------------------------ */
:root {
  /* ink */
  --ink:        #0f172a;
  --ink-2:      #334155;
  --muted:      #475569;
  --muted-2:    #64748b;
  --muted-3:    #94a3b8;

  /* accents */
  --cyan:       #0e7490;
  --cyan-lit:   #0891b2;
  --cyan-glow:  #22d3ee;
  --indigo:     #4f46e5;
  --indigo-lit: #818cf8;
  --indigo-pale:#c7d2fe;
  --blue:       #1d4ed8;
  --navy:       #1e3a8a;
  --navy-deep:  #152c6b;

  /* gold */
  --gold:       #d4af37;
  --gold-lit:   #ffc930;
  --gold-deep:  #8a6d1f;

  /* surfaces */
  --bg:         #f3f7fd;
  --surface:    #ffffff;
  --surface-2:  #f8fafc;
  --line:       #e2e8f0;
  --line-soft:  rgba(148,163,184,.22);

  /* state */
  --danger:     #b91c1c;
  --warning:    #78350f;
  --success:    #047857;

  /* type */
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  /* geometry */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(15,23,42,.05);
  --shadow-md: 0 10px 30px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 60px rgba(15,23,42,.13);

  --tap: 44px;                 /* minimum touch target, everywhere */
  --header-h: 64px;
}

/* ------------------------------------------------------------
   3. BASE
   The page background is a static gradient. The 3D stage from
   mfd-stage.js sits on top of it, so if WebGL is unavailable or
   disabled the page still looks finished rather than blank.
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    radial-gradient(1000px 700px at 12% 12%, rgba(34,211,238,.20), transparent 55%),
    radial-gradient(900px 700px at 88% 18%, rgba(99,102,241,.16), transparent 58%),
    radial-gradient(900px 700px at 70% 90%, rgba(212,175,55,.11), transparent 55%),
    linear-gradient(135deg, #f2f7ff 0%, #fbfaf4 45%, #f4fbff 100%);
  background-attachment: fixed;
}

/* The background layers sit BEHIND the page.
   They use z-index:-1 rather than a blanket rule on every other child.
   The earlier approach — body > *:not(#mfdStageRoot) — contained an ID
   inside :not(), which gave it higher specificity than .mfd-header and
   silently stripped the header's sticky positioning and z-index, so
   dropdowns rendered underneath the page content. */
#mfdStageRoot, #mfdParticleRoot {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--cyan-lit); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.08;
}
.display em { font-style: italic; color: var(--cyan); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ------------------------------------------------------------
   4. MOTION
   ------------------------------------------------------------ */
@keyframes mfdRise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mfdPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .15; transform: scale(1.9); } }
@keyframes mfdSheen { from { transform: translateX(-120%); } to { transform: translateX(220%); } }

.rise { animation: mfdRise .5s cubic-bezier(.22,.61,.36,1) both; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .16s; }
.rise-4 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
   5. LAYOUT
   ------------------------------------------------------------ */
.mfd-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 18px 56px; }
.mfd-shell.narrow { max-width: 470px; }
.mfd-shell.wide   { max-width: 1320px; }

.mfd-stack   { display: grid; gap: 18px; }
.mfd-cols-2  { display: grid; gap: 18px; grid-template-columns: 1fr; }
.mfd-cols-3  { display: grid; gap: 18px; grid-template-columns: 1fr; }

/* ------------------------------------------------------------
   6. CARDS
   Frosted so the 3D objects drifting behind stay faintly visible.
   ------------------------------------------------------------ */
.mfd-card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
}
.mfd-card.solid { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mfd-card.flush { padding: 0; overflow: hidden; }

/* Collapsible section — the year-wise projection tables ship collapsed so
   the result tiles and the chart stay above the fold, as on the SIP
   calculator. Pair with .mfd-card.flush; the whole header is the control. */
.mfd-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px 22px; border: 0; background: transparent;
  font-family: inherit; text-align: left; cursor: pointer;
}
.mfd-toggle:hover { background: rgba(15, 23, 42, .025); }
.mfd-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
.mfd-toggle .t    { font-size: 15px; font-weight: 800; color: var(--ink); }
.mfd-toggle .meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mfd-toggle .cue  { font-size: 12px; font-weight: 700; color: var(--cyan); white-space: nowrap; }
.mfd-toggle + *   { border-top: 1px solid rgba(15, 23, 42, .07); }

.mfd-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.mfd-card-head h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.01em; }

.mfd-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--muted-2);
}

/* Headline stat, as used for the corpus figure. */
.mfd-stat { display: grid; gap: 4px; }
.mfd-stat .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.mfd-stat .k { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted-2); }
.mfd-stat.accent .v { color: var(--cyan); }

/* ------------------------------------------------------------
   7. FORMS — 44px targets, 16px inputs (stops iOS zoom on focus)
   ------------------------------------------------------------ */
.mfd-field { margin-bottom: 15px; }
.mfd-field > label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }

.mfd-input, .mfd-field input, .mfd-field textarea, .mfd-field select {
  width: 100%; min-height: var(--tap); padding: 11px 13px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.mfd-input:focus, .mfd-field input:focus, .mfd-field textarea:focus, .mfd-field select:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(14,116,144,.13);
}
.mfd-field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.mfd-hint  { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
.mfd-error { font-size: 12.5px; color: var(--danger); margin-top: 5px; }
.has-error { border-color: var(--danger) !important; }

/* Range slider, as used for the SIP inputs. */
.mfd-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--cyan), var(--indigo-lit));
  border-radius: var(--r-pill); outline: none; padding: 0; margin: 14px 0; }
.mfd-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 3px solid var(--cyan); cursor: pointer;
  box-shadow: 0 2px 8px rgba(15,23,42,.2);
}
.mfd-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  border: 3px solid var(--cyan); cursor: pointer;
}

/* ------------------------------------------------------------
   8. BUTTONS
   ------------------------------------------------------------ */
.mfd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 24px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; border: none; border-radius: var(--r-pill); cursor: pointer;
  background: linear-gradient(135deg, var(--blue), var(--cyan-lit));
  box-shadow: 0 8px 20px rgba(14,116,144,.28);
  transition: transform .18s, box-shadow .18s, filter .18s;
  text-decoration: none;
}
.mfd-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,116,144,.36); color: #fff; }
.mfd-btn:active { transform: translateY(1px); }
.mfd-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.mfd-btn.block { width: 100%; }
.mfd-btn.sm { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }

.mfd-btn.ghost {
  background: rgba(255,255,255,.7); color: var(--ink);
  border: 1px solid var(--line); box-shadow: none;
}
.mfd-btn.ghost:hover { background: #fff; color: var(--ink); border-color: var(--muted-3); }

.mfd-btn.gold {
  background: linear-gradient(135deg, var(--gold-lit), var(--gold));
  color: #4a3b00; box-shadow: 0 8px 20px rgba(212,175,55,.32);
}

/* Chips / segmented tabs. */
.mfd-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.mfd-chip {
  min-height: 38px; padding: 8px 15px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.75); color: var(--muted); border: 1px solid var(--line);
  transition: all .15s;
}
.mfd-chip:hover { border-color: var(--cyan); color: var(--cyan); }
.mfd-chip[aria-selected="true"], .mfd-chip.on {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* ------------------------------------------------------------
   9. BADGES & ALERTS
   ------------------------------------------------------------ */
.mfd-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
  background: rgba(29,78,216,.09); color: var(--blue); border: 1px solid rgba(29,78,216,.18);
}
.mfd-badge.gold { background: rgba(212,175,55,.14); color: var(--gold-deep); border-color: rgba(212,175,55,.3); }

.mfd-alert {
  padding: 13px 16px; border-radius: var(--r-md); font-size: 14px;
  border: 1px solid transparent; line-height: 1.55; margin-bottom: 16px;
}
.mfd-alert.success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.mfd-alert.error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.mfd-alert.info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.mfd-alert.warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ------------------------------------------------------------
   10. TABLES
   ------------------------------------------------------------ */
.mfd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mfd-table thead th {
  background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 11px 12px; text-align: left; white-space: nowrap;
}
.mfd-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mfd-table tbody tr:nth-child(even) { background: rgba(241,245,249,.6); }
.mfd-table .r { text-align: right; font-variant-numeric: tabular-nums; }

/* Projection tables — the year-by-year grids the calculators produce.
   Lifted from the SIP calculator so all forty match: a light sticky
   header rather than the navy one, centred tabular figures, and a
   weight hierarchy — .strong for the year and the closing value,
   .accent for whichever column is the tool's answer. Rows are
   separated by a hairline, not a stripe; the PDF stripes instead. */
.mfd-table.numeric { font-size: 12.5px; }
.mfd-table.numeric thead th {
  position: sticky; top: 0; z-index: 1;
  background: rgba(241, 245, 249, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--muted); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 11px 14px; text-align: center;
}
.mfd-table.numeric tbody td {
  padding: 10px 14px; text-align: center;
  font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(15, 23, 42, .05);
}
.mfd-table.numeric tbody tr:nth-child(even) { background: transparent; }
.mfd-table.numeric tbody td.strong { font-weight: 800; color: var(--ink); }
.mfd-table.numeric tbody td.accent { font-weight: 700; color: var(--cyan); }

/* Tables scroll rather than squash on a phone. */
.mfd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }

/* ------------------------------------------------------------
   11. UTILITIES
   ------------------------------------------------------------ */
.mfd-muted   { color: var(--muted-2); }
.mfd-small   { font-size: 13px; }
.mfd-center  { text-align: center; }
.mfd-divider { height: 1px; background: var(--line); border: 0; margin: 22px 0; }
.mfd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mfd-print-only { display: none; }

/* ------------------------------------------------------------
   12. RESPONSIVE
   ------------------------------------------------------------ */
@media (min-width: 700px) {
  .mfd-cols-2 { grid-template-columns: 1fr 1fr; gap: 20px; }
  .mfd-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .mfd-card   { padding: 26px 24px; }
  .mfd-shell  { padding: 40px 28px 70px; }
  .mfd-stat .v { font-size: 36px; }
}

@media (min-width: 1024px) {
  .mfd-shell { padding: 48px 32px 80px; }
}

/* ------------------------------------------------------------
   13. PRINT — drop the decoration, keep the content
   ------------------------------------------------------------ */
@media print {
  #mfdStageRoot, .mfd-btn, .mfd-chips { display: none !important; }
  body { background: #fff !important; }
  .mfd-card { box-shadow: none; border: 1px solid #ddd; background: #fff; backdrop-filter: none; }
  .mfd-print-only { display: block; }
}

/* ============================================================
   14. SITE CHROME — header, navigation, footer
   Markup comes from includes/chrome.php (PHP pages) or
   /api/chrome.php via mfd-chrome.js (calculators). Same HTML,
   so these styles serve both.
   ============================================================ */
.mfd-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 1px 20px rgba(15,23,42,.05);
}
.mfd-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 8px 18px;
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}

.mfd-brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.mfd-brand-logo { height: 42px; width: auto; border-radius: 8px; display: block; }
.mfd-footer-logo { height: 46px; width: auto; border-radius: 8px; display: block; }

/* ---------- hamburger ---------- */
.mfd-nav-toggle {
  width: var(--tap); height: var(--tap); border: none; background: transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; padding: 0 10px;
}
.mfd-nav-toggle span {
  display: block; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.mfd-nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mfd-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mfd-nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- nav: mobile drawer first ---------- */
.mfd-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 8px 12px 16px;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
}
.mfd-nav.open { display: block; }

.mfd-nav-list { list-style: none; margin: 0; padding: 0; }
.mfd-nav-item > a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 10px 12px; border-radius: var(--r-sm);
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700;
}
.mfd-nav-item > a:hover { background: rgba(15,23,42,.045); color: var(--ink); }
.mfd-nav-item.active > a { color: var(--cyan); }
.mfd-caret { font-size: 11px; color: var(--muted-3); margin-left: 8px; }

.mfd-dropdown { list-style: none; margin: 0 0 6px; padding: 0 0 0 12px; display: none; }
.mfd-nav-item.open .mfd-dropdown { display: block; }
.mfd-dropdown a {
  display: flex; align-items: center; min-height: var(--tap); padding: 8px 12px;
  border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-size: 14px;
}
.mfd-dropdown a:hover { background: rgba(15,23,42,.045); color: var(--ink); }

.mfd-nav-auth {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.mfd-nav-signin, .mfd-nav-user {
  color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 700;
  padding: 11px 8px; min-height: var(--tap); display: inline-flex; align-items: center;
}
.mfd-nav-user { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- footer ---------- */
.mfd-footer {
  margin-top: 40px; border-top: 1px solid var(--line);
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.mfd-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 34px 18px 26px;
  display: grid; grid-template-columns: 1fr; gap: 26px;
}
.mfd-footer-col h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--muted-2); margin: 0 0 12px; font-weight: 800;
}
.mfd-footer-col a {
  display: block; color: var(--ink); text-decoration: none;
  font-size: 14px; padding: 7px 0; min-height: 34px;
}
.mfd-footer-col a:hover { color: var(--cyan); }
.mfd-footer-note { color: var(--muted-2); font-size: 13.5px; margin: 12px 0 0; max-width: 330px; }

.mfd-footer-bar {
  max-width: 1180px; margin: 0 auto; padding: 16px 18px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: var(--muted-2);
}
.mfd-footer-links { display: flex; gap: 18px; }
.mfd-footer-links a { color: var(--muted-2); text-decoration: none; }
.mfd-footer-links a:hover { color: var(--ink); }

@media (min-width: 900px) {
  .mfd-nav-toggle { display: none; }

  .mfd-nav {
    display: flex !important; align-items: center; gap: 6px;
    position: static; background: none; border: none; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; max-height: none; overflow: visible;
  }
  .mfd-nav-list { display: flex; align-items: center; gap: 2px; }
  .mfd-nav-item { position: relative; }
  .mfd-nav-item > a { min-height: 42px; padding: 9px 13px; font-size: 14.5px; }

  .mfd-dropdown {
    display: block; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 214px; padding: 7px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility .16s;
  }
  .mfd-nav-item.has-children:hover .mfd-dropdown,
  .mfd-nav-item.has-children:focus-within .mfd-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .mfd-dropdown a { min-height: 40px; padding: 8px 11px; }

  .mfd-nav-auth { margin: 0 0 0 10px; padding: 0 0 0 14px;
                  border-top: none; border-left: 1px solid var(--line); }

  .mfd-header-inner { padding: 8px 32px; }
  .mfd-brand-logo   { height: 46px; }
  .mfd-footer-inner { grid-template-columns: 2fr 1fr 1fr; padding: 42px 32px 30px; }
  .mfd-footer-bar   { padding: 18px 32px; }
}

/* ============================================================
   15. LEGACY CLASS COMPATIBILITY
   The pages built before this theme existed (signup, signin,
   verify, profile, dashboard, calculators, forgot/reset) use the
   older class names. Mapping them here restyles all of them to the
   new design without editing a single one of those files.
   New pages should use the .mfd-* classes above.
   ============================================================ */
.shell        { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 18px 56px; }
.shell-narrow { max-width: 470px; }

.page-head h1 { font-family: var(--font-display); font-weight: 400;
                font-size: clamp(28px, 5vw, 42px); letter-spacing: -.01em; margin: 0 0 6px; }
.page-head p  { color: var(--muted-2); margin: 0; font-size: 15px; }

.card {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 24px 20px;
}
.card h1 { font-family: var(--font-display); font-weight: 400; font-size: 27px; margin: 0 0 6px; }
.card .sub { color: var(--muted-2); font-size: 14px; margin: 0 0 22px; }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: var(--tap); padding: 11px 13px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(14,116,144,.13);
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.field .hint { font-size: 12px; color: var(--muted-2); margin-top: 5px; }
.field-error { font-size: 12.5px; color: var(--danger); margin-top: 5px; }
.field input.has-error, .field textarea.has-error { border-color: var(--danger); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 24px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; border: none; border-radius: var(--r-pill); cursor: pointer; text-decoration: none;
  background: linear-gradient(135deg, var(--blue), var(--cyan-lit));
  box-shadow: 0 8px 20px rgba(14,116,144,.28);
  transition: transform .18s, box-shadow .18s;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(14,116,144,.36); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-block  { width: 100%; }
.btn-sm     { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }
.btn-ghost  { background: rgba(255,255,255,.7); color: var(--ink);
              border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: var(--muted-3); }

.alert { padding: 13px 16px; border-radius: var(--r-md); font-size: 14px;
         border: 1px solid transparent; line-height: 1.55; margin-bottom: 16px; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

.form-links { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
              font-size: 14px; color: var(--muted-2); text-align: center; }
.form-links a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.form-links a:hover { text-decoration: underline; }

/* ---------- calculators page ---------- */
.filter-bar {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-md);
  padding: 14px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.filter-bar input[type="search"] {
  width: 100%; min-height: var(--tap); padding: 11px 14px; font-size: 16px;
  font-family: inherit; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.filter-bar input[type="search"]:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(14,116,144,.13);
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.chip {
  min-height: 38px; padding: 8px 15px; border-radius: var(--r-pill);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(255,255,255,.75); color: var(--muted); border: 1px solid var(--line);
  transition: all .15s;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.result-note { margin-top: 10px; font-size: 13px; color: var(--muted-2); }
.no-results  { text-align: center; padding: 44px 20px; color: var(--muted-2); }

.tool-cats { display: grid; grid-template-columns: 1fr; gap: 22px; }
.cat-card {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.cat-head {
  background: linear-gradient(135deg, rgba(255,201,48,.9), rgba(212,175,55,.85));
  padding: 14px 18px; border-bottom: 1px solid rgba(212,175,55,.5);
  display: flex; align-items: center; gap: 11px;
}
.cat-head h2 { margin: 0; font-size: 15.5px; color: #4a3b00; font-weight: 800; letter-spacing: .2px; }
.cat-icon  { font-size: 20px; line-height: 1; }
.cat-count { margin-left: auto; font-size: 12px; color: #6b5600; font-weight: 800; }
.cat-body  { padding: 14px; background: rgba(248,250,252,.6); flex: 1; }

.tool-link {
  display: block; padding: 13px 15px; margin-bottom: 9px; min-height: var(--tap);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  text-decoration: none; color: var(--ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.tool-link:last-child { margin-bottom: 0; }
.tool-link:hover { transform: translateY(-2px); border-color: var(--cyan);
                   box-shadow: 0 8px 18px rgba(14,116,144,.13); color: var(--ink); }
.tool-link .t-name  { font-weight: 700; font-size: 15px; display: block; }
.tool-link .t-blurb { font-size: 12.5px; color: var(--muted-2); display: block;
                      margin-top: 2px; line-height: 1.45; }
.tool-link.pending {
  opacity: .55; cursor: default; border-style: dashed;
  background: rgba(255,255,255,.5);
}
.tool-link.pending:hover { transform: none; box-shadow: none; border-color: var(--line); }
.badge-soon {
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--warning); background: #fef3c7; border: 1px solid #fde68a;
  padding: 2px 6px; border-radius: 4px; margin-left: 7px; vertical-align: 2px;
}

@media (min-width: 700px) {
  .shell { padding: 40px 28px 70px; }
  .card  { padding: 30px 28px; }
  .tool-cats { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 24px; }
  .filter-bar { display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
  .filter-bar input[type="search"] { max-width: 360px; }
  .chips { margin-top: 0; }
}

/* ============================================================
   16. PRINT — chrome and decoration removed
   ============================================================ */
@media print {
  .mfd-header, .mfd-footer, .mfd-nav-toggle, .filter-bar, .chips,
  .btn, #mfdChromePlaceholder { display: none !important; }
  .card, .cat-card { box-shadow: none; border: 1px solid #ddd;
                     background: #fff; backdrop-filter: none; }
}