/* ============================================================
   1. FONTS
   ============================================================ */
/* Outfit, self-hosted (audit L4, 30 Sep). The Google Fonts stylesheet was
   the largest render-blocking request on every page (~0.8s in Lighthouse
   mobile): the browser had to fetch CSS from one origin before it could learn
   the font lived on another. Google serves one variable file for all five
   weights, so these two are the same bytes it sent, from our own origin, with
   the year-long cache fonts/* already has. The filenames carry Google's
   version (v15) because that cache is immutable: a new cut needs a new name.
   The latin file is preloaded in the <head>; latin-ext only downloads if a page
   ever shows a character from it. */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/outfit-v15-latin-ext.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:'Outfit';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/outfit-v15-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;}

/* Outfit Fallback (audit L11, 8 Oct). Arial, resized to occupy the space Outfit
   will. Since L10 the page paints before Outfit has arrived, so the hero drew
   in plain Arial and re-flowed when the font swapped in: CLS 0.106 on the
   homepage at phone width with the font held back 1s, and 0.055 on /dscr/.
   With these overrides the fallback text takes the same lines and the same
   height, so the swap changes the letterforms and moves nothing (0.001).
   The numbers were computed with fontTools from publicfonts/Outfit-*.ttf and
   Windows' Arial, weighted by English letter frequency; they are measurements,
   not taste, so do not round or tune them by eye. Two faces because Arial Bold
   is wider against Outfit's bold than Arial is against its regular. local()
   only: nothing is downloaded, and a device with no Arial (most Android)
   skips this face and falls through to sans-serif exactly as before.
   It must sit between 'Outfit' and sans-serif in every stack;
   tests/font-fallback.test.ts fails on a stack that leaves it out. */
@font-face{font-family:'Outfit Fallback';font-style:normal;font-weight:100 500;src:local('Arial');size-adjust:99.34%;ascent-override:100.66%;descent-override:26.17%;line-gap-override:0%;}
@font-face{font-family:'Outfit Fallback';font-style:normal;font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:94.90%;ascent-override:105.37%;descent-override:27.40%;line-gap-override:0%;}

/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --white:       #ffffff;
  /* Darkened from #517686 on 30 Sep (audit L3). White on the old teal was
     4.9:1, which left no room for a muted tier: every softened line in the
     footer (0.6 to 0.8 white) measured 2.85 to 4.0, under the 4.5 body-text
     minimum. At #466a7a white is 5.8:1 and --on-teal-muted 4.75:1. Same hue,
     one step darker; the four static landing pages carry the same value. */
  --teal:        #466a7a;
  --on-teal-muted: rgba(255, 255, 255, 0.85);
  --navy:        #223d55;
  --rose:        #d2566d;
  --light-bg:    #f5f7f9;
  --text-dark:   #1a1a2e;
  --text-muted:  #6b7280;
  --navy-dark:   #1a2f42;
  --success:     #1e7a45;
  --success-bg:  #dcf1e3;
  --teal-light:  rgba(81, 118, 134, 0.12);
  --rose-glow:   rgba(210, 86, 109, 0.35);
  --card-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.14);
  /* The static landing pages' palette (public/dscr, /fha, /realestateinvesting),
     shared since 10 Oct so the React pages read as the same site: the call to
     action, the light cyan for an accent word on teal, the teal's own text
     and its darker rule, and the hairline. Same values as those pages'
     :root; change both together. */
  --accent:         #1a7f99;
  --accent-glow:    rgba(33, 158, 188, 0.25);
  --accent-on-teal: #8fd8ea;
  --header-text:    #d4e8ee;
  --teal-deep:      #274654;
  --line:           #e6ebf0;
}

/* ============================================================
   3. RESET / BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--white);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
}

/* ============================================================
   4. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--text-dark);
}

p {
  line-height: 1.7;
}

/* ============================================================
   5. LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section-light  { background: var(--light-bg); }
.section-white  { background: var(--white); }
.section-navy   { background: var(--navy); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-title {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.section-title-white {
  color: var(--white);
}

.section-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.section-sub-teal {
  color: rgba(200, 226, 232, 0.85);
}

.section-eyebrow {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Clears the fixed nav on pages that have no hero to sit under it. */
.page-top-spacer {
  height: 68px;
  background: var(--light-bg);
}

/* Section divider */
.section-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 24px;
  background: var(--light-bg);
}

.section-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(34,61,85,0.2), transparent);
}

.section-divider-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

.section-divider-label svg {
  color: var(--navy);
  opacity: 0.5;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}

.btn-rose     { background: var(--rose); color: var(--white); }
.btn-teal     { background: var(--teal); color: var(--white); }
/* The static pages' call to action (.cta) and their outlined twin (.cta.outline). */
.btn-accent   { background: var(--accent); color: var(--white); }
.btn-outline-teal {
  background: transparent; border: 2px solid var(--teal); color: var(--teal);
  padding: 6px 16px;
}
.btn-outline  { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn-outline-navy {
  background: transparent;
  border: 2px solid var(--navy);
  color: var(--navy);
  padding: 11px 28px;
}

.btn-lg   { padding: 16px 40px; font-size: 1.1rem; border-radius: 50px; }
.btn-sm   { padding: 8px 18px; font-size: 0.9rem; }
.btn-full { width: 100%; justify-content: center; }

/* Shine sweep */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg);
  transition: left 0.45s ease;
}
.btn:hover::after { left: 150%; }

.btn:hover                { transform: scale(1.03); }
.btn-rose:hover           { box-shadow: 0 8px 24px var(--rose-glow); }
.btn-teal:hover           { box-shadow: 0 8px 24px rgba(81,118,134,0.4); }
.btn-accent:hover         { box-shadow: 0 8px 24px var(--accent-glow); }
.btn-outline-teal:hover   { background: var(--teal); color: var(--white); box-shadow: none; }
.btn-outline:hover        { box-shadow: 0 8px 24px rgba(255,255,255,0.2); }
.btn-outline-navy:hover   { box-shadow: 0 8px 24px rgba(34,61,85,0.2); }
.btn:disabled             { opacity: 0.7; transform: none; cursor: not-allowed; }

/* ============================================================
   7. CARDS
   ============================================================ */
.card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--card-shadow);
  padding: 32px;
}

.card-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-heading svg {
  color: var(--teal);
  flex-shrink: 0;
}

/* ============================================================
   8. INPUTS / FORMS
   ============================================================ */
.input-group {
  margin-bottom: 20px;
}

.input-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 8px;
}

.optional-tag {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.form-input {
  width: 100%;
  padding: 11px 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  appearance: none;
}

.form-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(81,118,134,0.2);
}

.form-input.input-error {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(210,86,109,0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
}

/* Prefix / suffix inputs */
.input-prefix-wrap,
.input-suffix-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix {
  position: absolute;
  left: 14px;
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  font-weight: 500;
  z-index: 1;
}

.input-suffix {
  position: absolute;
  right: 14px;
  font-size: 1rem;
  color: var(--text-muted);
  pointer-events: none;
  font-weight: 500;
}

.form-input.input-has-prefix { padding-left: 30px; }
.form-input.input-has-suffix { padding-right: 36px; }

/* Select */
.select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.form-select {
  width: 100%;
  padding: 11px 40px 11px 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-dark);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(81,118,134,0.2);
}

.select-arrow {
  position: absolute;
  right: 12px;
  pointer-events: none;
  color: var(--text-muted);
}

/* ---------- Custom state select (reui c-select-4 style combobox) ---------- */
/* Used by <StateSelect> in place of a native <select> for state fields —
   same visual language as the static /fha, /dscr, /realestateinvesting
   pages' enhanceStateSelect(). */
.cselect { position: relative; }
.cselect-trigger {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 16px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cselect-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cselect-trigger:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(81,118,134,0.2);
}
.cselect-trigger.input-error {
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(210,86,109,0.15);
}
.cselect-value.has-value { color: var(--text-dark); }
.cselect-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform 0.2s ease; }
.cselect.open .cselect-chevron { transform: rotate(180deg); }
.cselect-panel {
  position: fixed;
  z-index: 1200;
  background: var(--white);
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.16);
  overflow: hidden;
  /* A column, so the option list is what gives way when the panel is handed
     less height than it wants (max-height comes from useAnchoredPanel: the
     room between the trigger and the edge of the screen). The search box
     keeps its size; the list scrolls. */
  display: flex;
  flex-direction: column;
}
.cselect-search { border-bottom: 1px solid #e5e7eb; padding: 6px; flex-shrink: 0; }
/* 16px, not 0.9rem: iOS Safari zooms the page whenever a focused field is under
   16px, and the visitor has to pinch back out in the middle of the form. The
   same search box on the three landing pages had the same problem. */
.cselect-search input {
  width: 100%;
  border: none;
  outline: none;
  background: #f5f7f9;
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 18px;
  color: var(--text-dark);
}
.cselect-options { max-height: 220px; min-height: 0; overflow-y: auto; padding: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.cselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.92rem;
  color: var(--text-dark);
  cursor: pointer;
}
.cselect-option:hover { background: #f5f7f9; }
.cselect-option .cselect-check { flex-shrink: 0; opacity: 0; color: var(--rose); }
.cselect-option.selected { font-weight: 600; }
.cselect-option.selected .cselect-check { opacity: 1; }
.cselect-empty { padding: 14px 10px; text-align: center; font-size: 0.93rem; color: var(--text-muted); }

/* Field error */
.field-error {
  display: block;
  font-size: 0.88rem;
  color: var(--rose);
  margin-top: 5px;
  font-weight: 500;
}

/* Error banner */
.error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(210,86,109,0.1);
  border: 1px solid rgba(210,86,109,0.3);
  color: var(--rose);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.error-banner svg { flex-shrink: 0; }
.error-banner a   { color: var(--rose); text-decoration: underline; }

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-dark);
  font-weight: 400;
  margin-bottom: 24px;
  line-height: 1.5;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 5px;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-top: 1px;
}

.checkbox-input:checked + .checkbox-custom {
  background: var(--teal);
  border-color: var(--teal);
}

/* Spinner */
.btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   9. SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* ============================================================
   10. COMPONENT STYLES
   ============================================================ */

/* ---- NAV ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
  /* White from the first paint, on every page, as on the static pages. It was
     transparent over the homepage hero until 10 Oct, which made the hub the
     one page whose header changed colour as you scrolled. */
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.nav-scrolled {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
/* The static pages' header is 980px wide; the hub's has three more links, so
   it keeps the site container. */
.nav-landing .nav-inner { max-width: 980px; padding-left: 24px; padding-right: 24px; }

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  transition: opacity 0.2s ease;
}

.nav-logo:hover { opacity: 0.85; }

.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-logo-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  transition: color 0.3s ease;
}

.nav-logo-title {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.2;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.nav-scrolled .nav-logo-name  { color: var(--text-dark); }
.nav-scrolled .nav-logo-title { color: var(--text-muted); }

/* Avatar circle in nav */
.nav-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--navy);
}

.nav-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.nav-avatar-fallback {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  background: var(--navy);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links .btn-sm { padding: 6px 16px; font-size: 0.95rem; }
.nav-links .btn-outline-teal { padding: 4px 14px; }

.nav-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dark);
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.25s ease;
}

.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: var(--teal); }
.nav-scrolled .nav-link { color: var(--text-dark); }
.nav-scrolled .nav-link:hover { color: var(--teal); }

/* ── Calculator hover dropdown ── */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-dropdown-trigger svg { transition: transform 0.2s ease; }
.nav-dropdown--open .nav-dropdown-trigger svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -6px);
  margin-top: 14px;
  min-width: 190px;
  background: var(--white);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
}

.nav-dropdown--open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-item:hover {
  background: var(--light-bg);
  color: var(--teal);
}

/* ── Hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  flex-shrink: 0;
}

.nav-hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.3s ease;
  transform-origin: center;
}

.nav-scrolled .nav-hamburger-bar,
.nav-menu-open .nav-hamburger-bar { background: var(--navy); }

.nav-hamburger-bar.open:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger-bar.open:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger-bar.open:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile slide-down menu ── */
.nav-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0,0,0,0.3);
}

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 76px;
  right: 16px;
  left: auto;
  width: 280px;
  z-index: 99;
  background: var(--white);
  border-radius: 16px;
  padding: 8px 20px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  flex-direction: column;
  gap: 0;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.nav-mobile-menu--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-mobile-link {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  border-bottom: 1px solid #f0f2f5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-mobile-link--btn {
  background: none;
  border: none;
  border-bottom: 1px solid #f0f2f5;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  width: 100%;
  padding: 14px 0;
  cursor: pointer;
}

.nav-mobile-link:hover,
.nav-mobile-link--btn:hover { color: var(--teal); }

.nav-mobile-sublink {
  padding-left: 20px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* Group heading above the calculator sublinks. Not a link: the calculators it
   heads now live on four different pages, so there is nothing for it to open. */
.nav-mobile-label {
  cursor: default;
}
.nav-mobile-label:hover { color: inherit; }

/* ---- CALCULATOR ---- */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}

.date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Results card */
.card-results {
  display: flex;
  flex-direction: column;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  flex: 1;
}

.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--light-bg);
  border-radius: 12px;
}

.stat-label {
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  transition: transform 0.2s ease;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-value.stat-pulse {
  animation: statPulse 0.4s ease;
}

.insight-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--teal-light);
  border: 1px solid rgba(81,118,134,0.25);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 0.9rem;
  color: var(--navy);
  margin-top: 20px;
  line-height: 1.55;
}

.insight-callout svg {
  flex-shrink: 0;
  color: var(--teal);
  margin-top: 2px;
}

.calc-cta { margin-top: 16px; }

/* ---- CHART ---- */
.chart-wrapper {
  margin-bottom: 24px;
}

.chart-tooltip {
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--card-shadow-hover);
  padding: 14px 18px;
  font-size: 0.95rem;
  min-width: 200px;
}

.chart-tooltip-year {
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-weight: 500;
}

.chart-tooltip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-tooltip-label {
  color: var(--text-muted);
  flex: 1;
  font-size: 0.9rem;
}

.chart-tooltip-val {
  color: var(--text-dark);
  font-weight: 600;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.93rem;
  color: var(--text-muted);
  font-weight: 500;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

/* ---- TABLE ---- */
.table-wrapper {
  margin-bottom: 24px;
}

.table-toggle {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-collapsible {
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.table-scroll {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.amort-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: 0.9rem;
}

.amort-table th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 13px 16px;
  text-align: center;
  white-space: nowrap;
}

.amort-table th:first-child {
  text-align: center;
}

.amort-table td.num {
  text-align: center;
  font-weight: 500;
}

.amort-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--text-dark);
  white-space: nowrap;
}

.amort-table tbody tr:hover { background: rgba(81,118,134,0.10); transition: background 0.15s; }
.row-stripe { background: rgba(81,118,134,0.07); }

.year-summary-row td {
  background: rgba(34,61,85,0.08);
  font-weight: 700;
  border-bottom: none;
}

.year-summary-row {
  border-bottom: 1px solid rgba(34,61,85,0.2);
}

.year-label {
  text-align: center;
  font-weight: 700;
  color: var(--navy);
}

.year-label-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.year-label svg { color: var(--teal); }

.amort-table td.teal { color: var(--teal); }
.amort-table td.rose { color: var(--rose); }
.amort-table td.bold { font-weight: 700; }

/* ---- LEAD FORM ---- */
.form-card {
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  max-width: 560px;
  margin: 0 auto;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18);
}

.form-row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

.submit-btn {
  padding: 15px;
  font-size: 1rem;
}

.form-footnote {
  text-align: center;
  margin-top: 24px;
}

.form-footnote p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.form-footnote svg { color: rgba(255,255,255,0.5); }

/* Success state */
.success-state {
  text-align: center;
  padding: 20px 0;
  animation: fadeUp 0.5s ease;
}

/* Filled pale-green badge + checkmark glyph. Same treatment as the static
   landing pages (/fha, /dscr, /realestateinvesting) so every opt-in confirms
   the same way. Size is overridable per surface via --success-check-size. */
.success-check {
  width: var(--success-check-size, 56px);
  height: var(--success-check-size, 56px);
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: calc(var(--success-check-size, 56px) * 0.46);
  line-height: 1;
}

/* Outline booking CTA that closes out every success state. */
.success-cta {
  margin-top: 24px;
}

.success-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.success-body {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ---- EDUCATION ---- */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.edu-card {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 32px 28px;
  border-left: 4px solid var(--teal);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}

.edu-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-shadow-hover);
  border-left-color: var(--rose);
}

.edu-card-icon {
  margin-bottom: 20px;
  width: 48px;
  height: 48px;
  background: var(--teal-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edu-card-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.35;
}

.edu-card-body {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 400;
}

.edu-callout {
  background: linear-gradient(135deg, var(--navy), var(--teal));
  border-radius: 16px;
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.edu-callout-text { flex: 1; }

.edu-callout-main {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.5;
}

.edu-callout-sub {
  font-size: 0.95rem;
  color: rgba(200,226,232,0.8);
  font-weight: 300;
  line-height: 1.6;
}

/* ---- FOOTER ---- */
.footer {
  background: var(--teal);
  color: var(--white);
  padding: 64px 0 52px;
  position: relative;
  overflow: hidden;
}

.footer-dots::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  animation: floatDots 8s ease-in-out infinite;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.footer-brand svg { color: rgba(255,255,255,0.85); }

.footer-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--white);
}

.footer-title {
  font-size: 0.95rem;
  color: var(--on-teal-muted);
  margin-bottom: 14px;
}

.footer-meta {
  font-size: 0.9rem;
  color: var(--on-teal-muted);
  margin-bottom: 4px;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  font-weight: 400;
  transition: color 0.2s ease;
}

.footer-contact-link:hover { color: var(--white); }
.footer-contact-link svg { color: rgba(255,255,255,0.85); flex-shrink: 0; }

.footer-linkedin { margin-top: 4px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-compliance {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.footer-compliance a {
  font-size: 0.8rem;
  color: var(--on-teal-muted);
  text-decoration: none;
  /* 24px tall tap target (WCAG 2.5.8) without moving the text. */
  display: inline-block;
  padding: 5px 0;
  transition: color 0.2s ease;
}

.footer-compliance a:hover {
  color: var(--white);
}

/* The separator dot belongs to the link before it (audit L9, 5 Oct). As its own
   flex item it could wrap onto the next line alone, so on a phone a row of
   links started with a stray dot. Drawn as ::after, it wraps with its link: a
   row may end on a dot but never start with one. The second content value
   hides it from screen readers, as aria-hidden did. */
.footer-compliance a:not(:last-child)::after {
  content: '\00B7';
  content: '\00B7' / '';
  display: inline-block;
  margin-left: 12px;
  color: rgba(255,255,255,0.3);
}

.footer-copy {
  font-size: 0.9rem;
  color: var(--on-teal-muted);
}

.footer-disclaimer {
  font-size: 0.83rem;
  color: var(--on-teal-muted);
  text-align: left;
  line-height: 1.6;
}

/* ============================================================
   11. ANIMATIONS
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes statPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
  }

  @keyframes floatDots {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

}

/* ============================================================
   13. MEDIA QUERIES
   ============================================================ */
@media (max-width: 900px) {
  .edu-grid {
    grid-template-columns: 1fr;
  }
  .edu-callout {
    flex-direction: column;
    text-align: center;
    padding: 36px 28px;
  }
}

@media (max-width: 768px) {
  .section { padding: 56px 0; }

  /* Nav: hide desktop links, show hamburger */
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-overlay { display: block; }
  .nav-mobile-menu { display: flex; }

  /* Truncate logo subtitle on small screens */
  .nav-logo-title {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Calculator */
  .calc-grid {
    grid-template-columns: 1fr;
  }

  .date-row {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Prevent stat values from overflowing */
  .stat-value {
    white-space: normal;
    font-size: 1.3rem;
  }

  /* Card padding: reduce from 32px to 20px on mobile */
  .card { padding: 20px; }

  /* Section header: tighten gap below title block */
  .section-header { margin-bottom: 32px; }

  /* Footer email: allow wrapping so it doesn't overflow */
  .footer-contact-link {
    word-break: break-all;
  }

  /* Forms */
  .form-row-2 {
    grid-template-columns: 1fr;
  }

  .form-card {
    padding: 28px 20px;
  }

  /* Enlarge touch targets for inputs and buttons */
  .form-input,
  .form-select {
    min-height: 48px;
    font-size: 1rem;
  }

  .btn {
    min-height: 48px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-right { align-items: flex-start; }

}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 1.2rem; }

  /* Section padding tighter */
  .section { padding: 44px 0; }

  /* Container side padding */
  .container { padding-left: 16px; padding-right: 16px; }

  /* Hide the nav logo subtitle on very small phones to prevent overflow */
  .nav-logo-title { display: none; }

  /* Review card height auto on tiny screens */
  .review-card { height: auto; min-height: 220px; }
}

/* ============================================================
   13. MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,20,35,0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 24px 16px;
  animation: fadeIn 0.2s ease;
}

.modal-panel {
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
  animation: fadeUp 0.25s ease;
  position: relative;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 32px 0;
  margin-bottom: 6px;
}

.modal-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
}

.modal-close {
  background: var(--light-bg);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: #e5e7eb; color: var(--navy); }

.modal-body {
  padding: 16px 32px 32px;
}

.modal-sub {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

.modal-note {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.modal-note strong { color: var(--rose); }

@media (max-width: 600px) {
  .modal-header { padding: 20px 20px 0; }
  .modal-body   { padding: 12px 20px 24px; }
}

/* ============================================================
   14. REVIEWS CAROUSEL
   ============================================================ */
.reviews-carousel {
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  padding: 16px 40px 28px;
  margin-bottom: 40px;
}

.reviews-track {
  display: flex;
  will-change: transform;
}

.review-slide {
  min-width: calc(100% / 3);
  padding: 0 8px;
}

.review-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  padding: 24px 22px;
  border-left: 4px solid var(--teal);
  height: 260px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.3s ease;
}

@media (max-width: 768px) {
  .review-card { padding: 28px 20px; height: 280px; }
}

.review-stars {
  display: flex;
  gap: 3px;
  margin: 0;
  flex-shrink: 0;
}

.review-star { color: #f59e0b; font-size: 18px; }

.review-quote-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.review-quote {
  font-size: 0.93rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.6;
  font-style: normal;
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
  margin: 0;
  overflow: hidden;
}

.review-see-more {
  background: none;
  border: none;
  padding: 4px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-align: left;
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
  flex-shrink: 0;
}
.review-see-more:hover { text-decoration: underline; }

.review-author {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* Review full-text modal */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.review-modal {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 28px 28px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  border-left: 4px solid var(--teal);
  max-height: 80vh;
  overflow-y: auto;
}

.review-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.2s ease;
}
.review-modal-close:hover { color: var(--navy); }

.review-modal-quote {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text-dark);
  line-height: 1.7;
  font-style: normal;
  font-family: 'Outfit', 'Outfit Fallback', sans-serif;
  margin: 16px 0 0;
}

.review-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #4285F4; /* overridden per-card via inline style */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
}

.review-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}

.review-meta {
  font-size: 0.86rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.reviews-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s ease, transform 0.2s ease;
}

.reviews-dot.active {
  background: var(--teal);
  transform: scale(1.3);
}

.reviews-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.reviews-nav-btn {
  background: var(--white);
  border: 1.5px solid #e2e5ed;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--navy);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reviews-nav-btn:hover { background: var(--light-bg); border-color: var(--teal); }

/* ============================================================
   15. PREFERS-REDUCED-MOTION OVERRIDE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hub-goal:hover, .hub-goal:focus-visible, .dcp-option:hover { transform: none; }

  .edu-card { will-change: auto; }
}

/* Email typo hint: advisory, never an error state. */
.email-hint {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: #b54708;
  text-align: left;
}
button.email-hint { text-decoration: underline; cursor: pointer; }

/* ============================================================
   The equity pages (revamp phase 2, 9 Oct): /home-equity/
   (phase 3) and /adu/ (phase 5), which share these classes.
   Drawn by DebtPageViews.tsx, HomeEquityViews.tsx and AduViews.tsx. Layout, spacing and colours follow Max's design
   preview v4 (darren-frontend-preview-v4.html, the debt payoff page). The
   No font-family here: everything inherits body's stack, which carries
   'Outfit Fallback' (tests/font-fallback.test.ts).
   ============================================================ */
.dcp {
  --dcp-bg:     #f5f7f9;
  --dcp-ink:    #223d55;
  --dcp-muted:  #627180;
  --dcp-line:   #dce4e9;
  --dcp-action: var(--accent);
  --dcp-save:   #24653c;
  --dcp-save-bg:#dcf1e3;
  background: var(--dcp-bg);
  color: var(--dcp-ink);
}
.dcp :where(h1, h2, h3, p, dl, dd) { margin: 0; }

/* Hero: the page's <h1> and LCP element, pre-rendered (src/prerender.tsx). */
.dcp-hero { background: var(--teal); color: #fff; border-bottom: 3px solid var(--teal-deep); }
/* 1080px and 64px, the static pages' container and hero padding (10 Oct). */
.dcp-hero-inner {
  max-width: 1080px; margin: 0 auto; padding: 64px 40px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
}
.dcp-eyebrow {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--header-text); margin-bottom: 16px;
}
.dcp-eyebrow-dark { color: var(--teal); }
.dcp-h1 {
  font-size: clamp(32px, 4.1vw, 49px); line-height: 1.12; letter-spacing: -.02em;
  font-weight: 700; color: #fff;
}
/* The accent word, as the static pages' .hero-title em: light cyan, heavier,
   slanted. A transform, not italics, so Outfit Fallback cannot synthesise a
   different slant before the font arrives. */
.dcp-h1 em, .hub-h1 em {
  font-style: normal; font-weight: 800; color: var(--accent-on-teal);
  display: inline-block; transform: skewX(-10deg);
}
.dcp-hero-sub { color: var(--header-text); margin: 18px 0 23px; font-size: 18px; line-height: 1.6; max-width: 30.18em; /* 46ch in Outfit Regular, fixed across the font swap (see .hub-h1) */ }
.dcp-hero-btn { background: var(--dcp-action); color: #fff; text-decoration: none; }
.dcp-hero-btn:hover, .hub-hero-btn:hover { box-shadow: 0 8px 24px var(--accent-glow); }
.dcp-hero-note { font-size: 14px; color: var(--header-text); margin-top: 14px; }
.dcp-how {
  background: rgba(37, 70, 87, .33); border: 1px solid rgba(185, 210, 223, .31);
  border-radius: 16px; padding: 24px;
}
.dcp-how dl > div {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  padding: 10px 0; border-bottom: 1px solid rgba(173, 199, 215, .2); font-size: 15px;
}
.dcp-how dt { font-weight: 500; }
.dcp-how dd { color: var(--header-text); text-align: right; }
.dcp-how p { font-size: 14px; color: var(--header-text); margin-top: 14px; line-height: 1.6; }
.dcp-hero-link {
  display: inline; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 2px;
}

.dcp-licensed {
  background: var(--light-bg); border-bottom: 1px solid var(--line); box-shadow: var(--card-shadow);
  position: relative;
}
/* Wraps rather than widening the page, as the static strip learned at 850px. */
.dcp-licensed-inner {
  max-width: 1080px; margin: 0 auto; padding: 22px 40px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px;
}
.dcp-licensed-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--text-muted); white-space: nowrap;
}
.dcp-licensed-item svg { color: var(--navy); flex-shrink: 0; }
.dcp-licensed-divider { width: 1px; height: 24px; background: var(--line); flex-shrink: 0; }

/* The mobile sticky bar (PageParts MobileActionBar), as on the static pages:
   phones and tablets only. The space under the footer is teal so the bar never
   covers the footer's last links and the page does not end in a white band. */
.dcp-mobile-bar, .dcp-mobile-bar-space { display: none; }
@media (max-width: 900px) {
  .dcp-mobile-bar-space { display: block; height: 76px; background: var(--teal); }
  .dcp-mobile-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    gap: 10px; align-items: center; padding: 12px 16px;
    background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    transition: transform .25s ease, visibility .25s;
  }
  .dcp-mobile-bar.is-away { transform: translateY(110%); visibility: hidden; }
  .dcp-mobile-bar-cta { flex: 1; justify-content: center; text-decoration: none; }
  .dcp-mobile-bar-call {
    width: 52px; height: 48px; flex-shrink: 0; border-radius: 8px;
    border: 2px solid var(--teal); color: var(--teal);
    display: flex; align-items: center; justify-content: center;
  }
}
@media (max-width: 820px) {
  .dcp-licensed-inner { justify-content: center; gap: 8px 16px; padding: 16px 20px; }
  .dcp-licensed-item { font-size: 0.88rem; }
  .dcp-licensed-divider { display: none; }
}

/* The flow: trust line, steps, one panel at a time, disclosure. */
.dcp-flow { padding: 22px 40px 44px; scroll-margin-top: 80px; }
.dcp-trust {
  list-style: none; margin: 0 0 24px; padding: 0;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
  font-size: 14px; color: var(--dcp-muted);
}
.dcp-trust li { display: inline-flex; align-items: center; gap: 5px; }
.dcp-trust svg { color: var(--teal); }

.dcp-steps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.dcp-step {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px;
  border: 0; border-radius: 24px; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--dcp-muted);
}
.dcp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; border-radius: 50%; background: #fff; font-weight: 500;
}
.dcp-step-done { color: var(--dcp-ink); }
.dcp-step-active { background: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(70, 106, 122, .19); }
.dcp-step-active .dcp-step-num { background: rgba(255, 255, 255, .19); }

.dcp-panel {
  max-width: 920px; margin: 0 auto; padding: 30px; background: #fff;
  border: 1px solid var(--dcp-line); border-radius: 16px; box-shadow: var(--card-shadow);
  transition: box-shadow .2s ease;
}
/* The static lead form's hover: the card the visitor is working in lifts. */
.dcp-panel:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, .12); }
.dcp-h2 { font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 24px; }
.dcp-h2-lg { font-size: clamp(25px, 3vw, 30px); letter-spacing: -.02em; margin-bottom: 10px; }
.dcp-h3 { font-size: 18px; font-weight: 600; margin: 24px 0 14px; }
.dcp-lead { color: var(--dcp-muted); font-size: 16px; line-height: 1.65; margin-bottom: 22px; }
.dcp-hint, .dcp-caption { font-size: 14px; line-height: 1.5; color: var(--dcp-muted); margin-top: 14px; }
.dcp-optional { font-weight: 400; color: var(--dcp-muted); }
.dcp-panel .input-label { color: var(--dcp-ink); }
.dcp-panel .btn-teal { background: var(--dcp-action); }

.dcp-grid-2, .dcp-grid-3 { display: grid; gap: 16px 20px; margin-bottom: 16px; }
.dcp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dcp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dcp-field { margin-bottom: 16px; }
.dcp-field .email-hint, .dcp-grid-2 .email-hint { display: block; }

/* Step 1: one row per debt. */
.dcp-debt {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr .85fr 24px; gap: 13px; align-items: end;
  padding: 17px; margin-bottom: 13px;
  background: var(--dcp-bg); border: 1px solid var(--dcp-line); border-radius: 10px;
}
.dcp-debt .input-label { font-size: 14px; }
.dcp-debt > div { min-width: 0; }
.dcp-remove {
  border: 0; background: none; color: var(--dcp-muted); font-size: 24px; line-height: 1;
  padding: 8px 0; cursor: pointer;
}
.dcp-add {
  width: 100%; margin: 4px 0 18px; padding: 11px; border-radius: 8px; cursor: pointer;
  background: none; border: 2px dashed var(--dcp-line); color: var(--dcp-muted); font: inherit; font-size: 15px;
}
.dcp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 8px 0 22px; }
.dcp-stat {
  padding: 12px 16px; border: 2px solid var(--dcp-line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(34, 61, 85, .03); font-size: 14px; color: var(--dcp-muted);
}
.dcp-stat-value { display: block; margin-top: 5px; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dcp-teal { color: var(--teal); }
/* Navy, not rose (10 Oct): red read as a warning on figures that are only the
   visitor's own debts, and the static pages keep red for errors. */
.dcp-navy { color: var(--navy); }
.dcp-panel > .btn-full { margin-top: 6px; }

/* Step 2: the equity picture. */
.dcp-snapshot { background: var(--dcp-bg); border-radius: 10px; padding: 23px; margin: 20px 0; }
.dcp-snapshot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }
.dcp-ltv { font-size: 14px; color: var(--dcp-muted); }
.dcp-snapshot-number { font-size: 32px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dcp-bar { display: flex; height: 14px; margin: 18px 0 10px; border-radius: 7px; overflow: hidden; background: #9bc9d5; }
.dcp-bar span { background: var(--teal); }
.dcp-bar-labels { display: flex; justify-content: space-between; gap: 18px; font-size: 14px; color: var(--dcp-muted); }
.dcp-bar-labels > span:last-child { text-align: right; }
.dcp-bar-labels strong { display: block; font-size: 17px; font-weight: 500; color: var(--dcp-ink); }

.dcp-actions { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
.dcp-back { background: #fff; border: 1px solid var(--dcp-line); color: var(--dcp-ink); text-decoration: none; }

/* Step 3: the comparison. */
.dcp-note { background: var(--dcp-bg); border-radius: 10px; padding: 16px; margin: 15px 0; font-size: 15px; line-height: 1.6; }
.dcp-note h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.dcp-note p + p { margin-top: 8px; }
.dcp-note details { margin-top: 10px; }
.dcp-note summary, .dcp-details summary { cursor: pointer; font-weight: 500; }
.dcp-note details p { color: var(--dcp-muted); margin-top: 8px; }

.dcp-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.dcp-option {
  display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0;
  padding: 17px 12px; text-align: center; border: 2px solid var(--dcp-line); border-radius: 10px;
  box-shadow: 0 2px 10px rgba(34, 61, 85, .03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dcp-option:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: #c9d6de; }
.dcp-option-selected { border-color: var(--teal); }
/* Today is the baseline the three options are measured against, so it gets a
   row of its own across all three rather than a fourth narrow column. */
.dcp-option-today {
  grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; justify-content: center;
  column-gap: 20px; text-align: left;
}
.dcp-option-today .dcp-option-title { min-height: 0; }
.dcp-option-today .dcp-option-body { flex-basis: 100%; text-align: center; }
.dcp-option-title {
  font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal); min-height: 30px;
}
.dcp-option-pay { font-size: 27px; font-weight: 600; color: var(--teal); font-variant-numeric: tabular-nums; }
.dcp-option-scope, .dcp-option-body { font-size: 14px; line-height: 1.5; color: var(--dcp-muted); }
.dcp-option-wait .dcp-option-body { margin: auto 0; }
.dcp-verdict { font-size: 14px; padding: 5px 8px; border-radius: 18px; background: var(--dcp-bg); color: var(--dcp-ink); }
.dcp-verdict-save { background: var(--dcp-save-bg); color: var(--dcp-save); }
.dcp-pick {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 12px; border-radius: 6px; font: inherit; font-size: 14px; font-weight: 500;
  background: #fff; border: 1px solid var(--dcp-line); color: var(--dcp-ink);
}
.dcp-pick[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.dcp-link {
  display: block; margin: 8px auto 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--teal); text-decoration: underline;
}
.dcp-details { background: var(--dcp-bg); border-radius: 10px; padding: 16px; margin: 15px 0; font-size: 15px; }
.dcp-row {
  display: flex; justify-content: space-between; align-items: center; gap: 15px;
  padding: 10px 0; border-bottom: 1px solid var(--dcp-line); font-size: 16px;
}
.dcp-row > span:first-child { color: var(--dcp-muted); }
.dcp-row > span:last-child { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.dcp-row-strong > span { color: var(--dcp-ink) !important; font-weight: 600 !important; }
.dcp-row small { display: block; font-size: 14px; font-weight: 400; color: var(--dcp-muted); }

/* Confirmation. */
.dcp-recap { text-align: center; }
.dcp-recap .success-check { --success-check-size: 52px; }
.dcp-recap-rows { background: var(--dcp-bg); border-radius: 12px; padding: 20px 23px 8px; margin: 22px 0; text-align: left; }
.dcp-recap-rows .dcp-row:last-child { border-bottom: 0; }
.dcp-recap-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

.dcp-disclosure { max-width: 920px; margin: 22px auto 0; }
.dcp-disclosure > p { margin-top: 0 !important; border-top: 0 !important; padding-top: 0 !important; }

/* /home-equity/: the hero guide's title, choice chips, the two product cards. */
.dcp-how-title { font-size: 20px !important; font-weight: 600; color: #fff !important; margin: 0 0 8px !important; line-height: 1.3 !important; }
.dcp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.dcp-chip {
  padding: 10px 13px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 15px;
  background: #fff; border: 1px solid var(--dcp-line); color: var(--dcp-ink);
}
.dcp-chip[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }
.dcp-actions-note { margin-top: 0; }
.dcp-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.dcp-product { padding: 22px; border: 1px solid var(--dcp-line); border-radius: 12px; background: #fff; min-width: 0; }
.dcp-product h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.dcp-product > p, .dcp-product details p { font-size: 15px; line-height: 1.6; color: var(--dcp-muted); }
.dcp-product ul { padding-left: 18px; margin: 14px 0; font-size: 15px; line-height: 1.9; }
.dcp-product summary { cursor: pointer; font-size: 15px; font-weight: 500; color: var(--teal); }
.dcp-product details p { margin-top: 8px; }

/* /adu/: the white card in the hero. */
.dcp-hero-card {
  background: #fff; color: var(--dcp-ink); border-radius: 12px; padding: 28px;
  box-shadow: 0 14px 35px rgba(25, 59, 75, .19); min-width: 0;
}
.dcp-hero-card-title { font-size: 25px; font-weight: 600; line-height: 1.25; color: var(--teal); margin-bottom: 8px; }
.dcp-hero-card .dcp-caption { margin: 0 0 8px; }
.dcp-hero-card .dcp-row { font-size: 15px; }

@media (max-width: 850px) {
  .dcp-debt { grid-template-columns: repeat(2, minmax(0, 1fr)) 22px; }
  .dcp-debt > .dcp-remove { grid-column: 3; grid-row: 1 / 3; }
  .dcp-hero-inner { gap: 26px; }
}
@media (max-width: 650px) {
  .dcp-hero-inner { grid-template-columns: 1fr; padding: 32px 24px; gap: 27px; }
  .dcp-h1 { font-size: 35px; }
  .dcp-hero-sub { font-size: 17px; }
  .dcp-flow { padding: 20px 14px 32px; }
  .dcp-panel { padding: 22px 16px; }
  .dcp-steps { gap: 2px; }
  .dcp-step { padding: 9px 7px; font-size: 14px; gap: 5px; }
  .dcp-grid-2, .dcp-grid-3, .dcp-options, .dcp-products { grid-template-columns: 1fr; }
  .dcp-debt { gap: 10px; padding: 13px; }
  .dcp-stats { grid-template-columns: 1fr; }
  .dcp-stat { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .dcp-stat-value { margin-top: 0; }
  .dcp-option-title { min-height: 0; }
  .dcp-option-today { flex-direction: column; text-align: center; }
  .dcp-option-today .dcp-option-body { flex-basis: auto; }
  .dcp-snapshot-head { flex-direction: column; gap: 8px; }
  .dcp-hero-card { padding: 23px; }
  .dcp-hero-card-title { font-size: 22px; }
  .dcp-actions .btn { width: 100%; justify-content: center; }
  .dcp-recap-actions .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Homepage goal hub (frontend revamp, phase 4): src/components/HomeHub.tsx.
   From design preview v4. The nav is transparent over the hero on this page,
   so the hero's top padding clears it (68px) rather than a page-top-spacer.
   ══════════════════════════════════════════════════════════════════════════ */
.hub-hero { background: var(--teal); color: #fff; padding: 132px 0 64px; border-bottom: 3px solid var(--teal-deep); }
.hub-hero-inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
.hub-eyebrow {
  display: block; font-size: 14px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--header-text); margin-bottom: 16px;
}
.hub-eyebrow-dark { color: var(--teal); }
.hub-h1 {
  margin: 0; font-size: clamp(32px, 4.1vw, 50px); line-height: 1.12; letter-spacing: -.02em;
  /* 17ch in Outfit Bold (its 0 is 0.666em), written in em: a ch is the width
     of the 0 in whichever font is showing, so 17ch changed width when Outfit
     swapped in, the headline re-wrapped and the hero below it moved (CLS
     0.195 on PageSpeed mobile, 16 Oct). The same width, fixed. */
  font-weight: 700; color: #fff; max-width: 11.32em;
}
.hub-hero-sub { color: var(--header-text); margin: 20px 0 26px; max-width: 480px; font-size: 18px; line-height: 1.6; }
.hub-hero-btn { background: var(--dcp-action, #177f94); color: #fff; text-decoration: none; }
.hub-cred { font-size: 14px; color: var(--header-text); margin: 22px 0 0; line-height: 1.6; }
.hub-hero-aside {
  border-left: 1px solid rgba(200, 226, 232, .25); padding-left: 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.hub-hero-photo { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; }
.hub-hero-aside-title { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.25; }
.hub-hero-aside-text { margin: 10px 0 0; font-size: 16px; color: var(--header-text); line-height: 1.6; }
.hub-hero-aside .hub-cred { margin-top: 14px; }

.hub-section { padding: 64px 0; background: #fff; color: var(--navy); }
.hub-section :where(h2, h3, p) { margin: 0; }
.hub-h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; color: var(--navy); }
.hub-lead { margin-top: 10px !important; color: #627180; font-size: 17px; }
.hub-arrow { margin-top: auto; color: var(--dcp-action, #177f94); font-size: 15px; font-weight: 600; }

.hub-goals {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px;
}
.hub-goal {
  background: #fff; border: 1px solid #dce4e9; border-radius: 14px; padding: 23px 20px;
  min-height: 205px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  text-align: left; color: var(--navy); text-decoration: none; font: inherit; cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hub-goal:hover, .hub-goal:focus-visible { border-color: var(--teal); box-shadow: var(--card-shadow-hover); transform: translateY(-3px); }
.hub-goal h3 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.hub-goal p { font-size: 16px; color: #627180; line-height: 1.5; }
.hub-icon {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #e9f0f3; color: var(--teal);
}
.hub-goal.hub-unsure { background: var(--navy); border-color: var(--navy); color: #fff; }
.hub-goal.hub-unsure h3 { color: #fff; }
.hub-unsure p, .hub-unsure .hub-arrow { color: #c4d7e4; }

.hub-about-wrap { background: #f5f7f9; }
.hub-about { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: center; }
.hub-about img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; }
.hub-about p { font-size: 17px; color: #627180; line-height: 1.65; margin-top: 14px; }
.hub-about .hub-about-title { color: var(--teal); font-size: 17px; font-weight: 600; line-height: 1.45; margin-top: 8px; }
.hub-licenses { font-size: 14px !important; border-top: 1px solid #dce4e9; padding-top: 16px; margin: 18px 0 20px !important; }

.hub-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.hub-tool {
  border-top: 1px solid #dce4e9; padding: 20px 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 8px; color: var(--navy); text-decoration: none;
}
.hub-tool h3 { font-size: 17px; font-weight: 600; }
.hub-tool p { font-size: 15px; color: #627180; }
.hub-tool:hover h3 { color: var(--teal); }

.hub-education {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  /* The static pages' closing band (/realestateinvesting/ "playbook", /dscr/
     "Get Your Actual Rate"): teal, a short dark rule above the eyebrow. */
  background: var(--teal); color: #fff; border-radius: 16px; padding: 44px 42px;
}
.hub-education::before {
  content: ''; grid-column: 1 / -1; width: 80px; height: 3px; background: var(--teal-deep);
  margin-bottom: -16px;
}
.hub-education .hub-eyebrow-dark { color: var(--header-text); }
.hub-education .hub-h2 { color: #fff; }
.hub-education p { color: var(--header-text); font-size: 16px; line-height: 1.6; margin: 12px 0 20px; }
.hub-education aside { border-left: 1px solid rgba(200, 226, 232, .25); padding-left: 30px; }
.hub-education h3 { font-size: 20px; font-weight: 600; color: #fff; }
/* White, not --accent-on-teal: the light cyan measures 3.66:1 on teal, fine
   for a headline word and short of 4.5:1 at 14px (the static pages' rule). */
.hub-education .hub-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hub-link { color: var(--dcp-action, #177f94); font-weight: 600; font-size: 16px; text-decoration: none; }
.hub-link:hover { text-decoration: underline; }

.hub-chooser { max-width: 560px; }
.hub-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hub-choice {
  display: block; padding: 22px; border: 1px solid #dce4e9; border-radius: 12px;
  color: var(--navy); text-decoration: none;
}
.hub-choice:hover, .hub-choice:focus-visible { border-color: var(--teal); }
.hub-choice h3 { margin: 0 0 8px; font-size: 18px; }
.hub-choice p { margin: 0; font-size: 15px; color: var(--dcp-action, #177f94); font-weight: 600; }

@media (max-width: 850px) {
  .hub-hero { padding: 100px 0 44px; }
  .hub-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .hub-hero-aside {
    border-left: 0; border-top: 1px solid rgba(200, 226, 232, .25); padding: 20px 0 0;
    display: grid; grid-template-columns: 72px 1fr; gap: 15px; align-items: start;
  }
  .hub-hero-photo { width: 72px; height: 72px; }
  .hub-goals { grid-template-columns: 1fr 1fr; }
  .hub-tools { grid-template-columns: 1fr; gap: 0; }
  .hub-education { grid-template-columns: 1fr; padding: 28px 22px; gap: 25px; }
  .hub-education aside { border-left: 0; border-top: 1px solid rgba(200, 226, 232, .25); padding: 20px 0 0; }
  .hub-about { grid-template-columns: 160px 1fr; gap: 28px; }
}
@media (max-width: 650px) {
  .hub-section { padding: 44px 0; }
  .hub-goals { grid-template-columns: 1fr; }
  .hub-goal { min-height: 0; }
  .hub-about { grid-template-columns: 1fr; }
  .hub-about img { max-width: 160px; }
  .hub-choices { grid-template-columns: 1fr; }
}
:root { --apr-border: #d5e1e6; }
.apr-estimate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.apr-number { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.apr-assumption { flex-basis: 100%; font-size: 14px; font-weight: 400; color: var(--text-muted); }
.apr-info { position: relative; text-align: left; font-weight: 400; }
.apr-info summary { cursor: pointer; list-style: none; font-size: 1.1rem; color: var(--teal); }
.apr-info summary::-webkit-details-marker { display: none; }
.apr-info summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.apr-tooltip { display: block; position: absolute; z-index: 10; right: 0; top: 28px; width: min(270px, 75vw); padding: 14px; border: 1px solid var(--apr-border); border-radius: 8px; background: white; color: var(--text-muted); box-shadow: 0 6px 20px #19364026; font-size: 14px; line-height: 1.5; }
.apr-tooltip label { display: block; margin-top: 10px; font-weight: 600; }
.apr-tooltip input { width: 100%; box-sizing: border-box; font-size: 18px; padding: 8px; margin: 4px 0; border: 1px solid var(--apr-border); border-radius: 4px; }
.apr-tooltip small { display: block; }
@media (max-width: 600px) {
  .apr-tooltip { position: fixed; left: 16px; right: 16px; top: auto; bottom: 90px; width: auto; }
}

/* Readable base for the standalone service-area pages as well. */
html{font-size:112.5%}