@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }

/* Mortgage Help — follows the Investor Mandates visual system:
   Palette: ink var(--wp--preset--color--ink) · bg-light var(--wp--preset--color--bg-light) · cream var(--wp--preset--color--cream) · copper var(--wp--preset--color--accent)
   Fonts: Fraunces (display) · IBM Plex Sans (body) · JetBrains Mono (kicker)
*/
*, *::before, *::after { box-sizing: border-box; }
.mh-page {
  background: var(--wp--preset--color--bg-light);
  color: var(--wp--preset--color--ink);
  font-family: 'IBM Plex Sans', sans-serif;
}
.mh-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
}
.mh-kicker {
  color: rgba(14,14,16,0.6);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mh-h1 {
  color: var(--wp--preset--color--cream);
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.mh-h2 {
  color: var(--wp--preset--color--ink);
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.mh-body {
  color: rgba(14,14,16,0.85);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
}
.mh-body-sm {
  color: rgba(14,14,16,0.85);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
}
.mh-legal {
  color: rgba(14,14,16,0.6);
  font-family: 'Fraunces', serif;
  font-size: 13px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
}
.mh-legal a { color: inherit; }
.mh-accent-rule {
  background: var(--wp--preset--color--accent);
  border: none;
  flex-shrink: 0;
  height: 2px;
  margin: 8px 0 16px;
  width: 40px;
}
.mh-section-head { margin-bottom: 56px; }
.mh-section-head .mh-kicker { margin-bottom: 24px; }

.mh-hero {
  background: var(--wp--preset--color--bg-dark);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.mh-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.mh-hero__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(45,55,69,0.72) 0%, rgba(45,55,69,0.88) 100%);
  pointer-events: none;
}
.mh-hero .mh-inner {
  position: relative;
  z-index: 2;
}
.mh-hero__kicker {
  color: rgba(247,237,217,0.5);
  margin-bottom: 44px;
}
.mh-hero__h1 {
  max-width: 1280px;
  margin-bottom: 52px;
}
.mh-hero__lead {
  color: rgba(247,237,217,0.8);
  font-size: 18px;
  max-width: 1100px;
}

.mh-why,
.mh-process,
.mh-form {
  background: #FFFFFF;
  padding: 80px 0;
}
.mh-why__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.mh-why__card {
  background: transparent;
  border: 0;
  border-radius: 8px;
}
.mh-why__label,
.mh-requirements__label {
  color: var(--wp--preset--color--accent);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.mh-card-icon {
  display: block;
  margin-bottom: 16px;
  color: var(--wp--preset--color--ink);
}
.mh-card-icon svg {
  display: block;
  width: 40px;
  height: 40px;
}

.mh-process {
  border-top: 1px solid rgba(14,14,16,0.08);
}
.mh-process .mh-accent-rule { background: rgba(14,14,16,0.2); }
.mh-process__steps {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.mh-process__num {
  color: var(--wp--preset--color--accent);
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 12px;
}
.mh-process__step .mh-body-sm {
  font-size: 14px;
  font-weight: 500;
}

.mh-requirements {
  background: var(--wp--preset--color--bg-light);
  border-top: 1px solid rgba(14,14,16,0.08);
  padding: 80px 0;
}
.mh-requirements__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mh-requirements__item {
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,0.08);
  border-radius: 8px;
  padding: 28px 24px;
}

.mh-crosslink {
  background: var(--wp--preset--color--bg-light);
  padding: 0 0 80px;
}
.mh-crosslink__box {
  align-items: center;
  background: var(--wp--preset--color--accent);
  border-radius: 8px;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 28px 32px;
}
.mh-crosslink__kicker {
  color: rgba(14,14,16,0.62);
  margin-bottom: 10px;
}
.mh-crosslink__text {
  color: var(--wp--preset--color--ink);
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}
.mh-crosslink__link {
  align-items: center;
  background: var(--wp--preset--color--bg-dark);
  border-radius: 999px;
  color: #FFFFFF;
  display: inline-flex;
  flex-shrink: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 48px;
  padding: 0 28px;
  text-decoration: none;
}
.mh-crosslink__link:hover { background: #232b36; color: #FFFFFF; }

.mh-form { border-top: 1px solid rgba(14,14,16,0.08); }
.mh-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mh-field { margin-bottom: 32px; }
.mh-field__label {
  color: rgba(14,14,16,0.7);
  display: block;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}
.mh-field__input {
  appearance: none;
  background: #F8F7F4;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--wp--preset--color--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  height: 48px;
  max-width: 1280px;
  outline: none;
  padding: 0 16px;
  width: 100%;
}
.mh-field__input::placeholder { color: rgba(14,14,16,0.45); }
.mh-field__input:focus { border-color: var(--wp--preset--color--accent); }
.mh-form-privacy {
  align-items: flex-start;
  display: flex;
  gap: 10px;
  margin: 8px 0 32px;
}
.mh-form-privacy input[type="checkbox"] {
  accent-color: var(--wp--preset--color--accent);
  cursor: pointer;
  flex-shrink: 0;
  height: 16px;
  margin-top: 1px;
  width: 16px;
}
.mh-form-privacy input[type="checkbox"].is-invalid {
  outline: 2px solid var(--wp--preset--color--error, #e05353);
  outline-offset: 1px;
}
.mh-form-privacy label {
  color: rgba(14,14,16,0.7);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}
.mh-form-privacy label a { color: var(--wp--preset--color--accent); }
.mh-form-privacy label a:hover { text-decoration: underline; }
.mh-btn-primary {
  align-items: center;
  background: var(--wp--preset--color--accent);
  border: none;
  border-radius: 999px;
  color: var(--wp--preset--color--ink);
  cursor: pointer;
  display: inline-flex;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  gap: 8px;
  height: 48px;
  min-width: 220px;
  padding: 0 32px;
  text-decoration: none;
}
.mh-btn-primary:hover { background: #b8743e; }
.mh-btn-primary:disabled { cursor: wait; opacity: 0.75; }
.mh-form__msg {
  display: none;
  font-size: 14px;
  margin-top: 16px;
}
.mh-form__msg.success { color: #2a7a4b; display: block; }
.mh-form__msg.error { color: #c0392b; display: block; }

.mh-legal-block {
  background: var(--wp--preset--color--bg-light);
  padding: 80px 0;
}

/* 961-1439px tablet tier (25.08 sweep — Class B, missing-tablet-tier bug pattern per
   wiki/synthesis/2026-08-25_uaeprop_tablet_padding_bug_patterns.md): live-verified at
   1024px .mh-inner was still 80px (desktop value) — this file's widest tier was <=960px
   with nothing above it. 48px matches the sitewide tablet-padding canon; vertical value
   (48px 0) reused directly from the <=960px tier below. */
@media (min-width:961px) and (max-width:1439px) {
  .mh-inner { padding-left: 48px; padding-right: 48px; }
  .mh-hero, .mh-why, .mh-process, .mh-requirements, .mh-form, .mh-legal-block {
    padding: 48px 0;
  }
}
@media (max-width: 960px) {
  .t2-crumb {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .mh-inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .mh-hero,
  .mh-why,
  .mh-process,
  .mh-requirements,
  .mh-form,
  .mh-legal-block {
    /* Mobile canon range is 48-64px vertical rhythm (was 40px, slightly
       under — bumped to stay consistent with the other 3 support-page
       templates in this campaign, which compress the same 80px down to
       56px). */
    padding: 48px 0;
  }
  .mh-crosslink { padding-bottom: 48px; }
  .mh-h1 { font-size: 48px; }
  .mh-why__grid,
  .mh-process__steps,
  .mh-requirements__grid {
    grid-template-columns: 1fr 1fr;
  }
  .mh-crosslink__box {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  /* Mobile canon spacing scale: 20px side padding at the 390px tier,
     24px from 430px up (set above) — was flat 20px at all widths ≤960. */
  .t2-crumb {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .mh-inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 600px) {
  .mh-h1 { font-size: 40px; }
  /* 26.08 (Mikhail-reported): .mh-process__steps deliberately excluded from
     this 1-column collapse — PROCESS's 6 cards are short icon+number+one-line
     cards (not the denser why/requirements grids), so Mikhail asked for 2
     per row even at the 390px tier instead of stacking to 1. Its own 2-col
     rule already lives in the <=960px block above and simply falls through
     unchanged now that this selector no longer re-overrides it here. */
  .mh-why__grid,
  .mh-requirements__grid {
    grid-template-columns: 1fr;
  }
  .mh-crosslink__text { font-size: 24px; }
  .mh-crosslink__link {
    justify-content: center;
    width: 100%;
  }
}