/* Miller Home Lending — public site styles */
:root {
  --navy: #17305f;
  --navy-dark: #101f42;
  --green: #0d7f4c;
  --green-dark: #0b6e42;
  --gold: #c9a35c;      /* decorative accents only — fails contrast as text on white */
  --gold-dark: #a8853f;
  --ink: #1c2434;
  --muted: #5b6474;
  --line: #e6e2d8;
  --bg: #ffffff;
  --bg-alt: #faf8f4;
  --bg-cool: #f2f6fb;   /* ice blue — cool counterweight to the warm cream */
  --radius: 14px;
  --shadow: 0 2px 8px rgba(23, 48, 95, .07), 0 12px 32px rgba(23, 48, 95, .06);
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--navy); }

.container { width: min(1140px, 92%); margin-inline: auto; }
.center { text-align: center; }
.muted { color: var(--muted); }
/* Available to assistive tech and crawlers, invisible on screen. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: .5rem 1rem; z-index: 99; }

/* Buttons */
.btn {
  display: inline-block; padding: .7rem 1.5rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; font-size: 1rem; transition: all .15s ease; font-family: inherit;
}
.btn-lg { padding: .9rem 2rem; font-size: 1.06rem; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(13,127,76,.22); }
.btn-primary:hover { background: var(--green-dark); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(13,127,76,.3); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* Header phone (desktop only — mobile has the bottom action bar's Call) */
.nav-phone {
  color: var(--navy); text-decoration: none; font-weight: 700;
  font-size: .93rem; white-space: nowrap; padding: .5rem .6rem;
}
.nav-phone:hover { color: var(--green-dark); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(228,232,240,.8);
  box-shadow: 0 1px 12px rgba(23,48,95,.05);
}
.header-inner { display: flex; align-items: center; gap: 1.6rem; padding: .5rem 0; }
.brand { flex-shrink: 0; }
.brand img { height: 72px; width: auto; max-width: none; display: block; }
.main-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 1rem; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: .2rem; }
.nav-links a {
  position: relative; text-decoration: none; color: var(--ink);
  font-weight: 600; font-size: .93rem; white-space: nowrap;
  padding: .5rem .85rem; border-radius: 10px;
  transition: color .15s ease, background-color .15s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .22rem;
  height: 2.5px; border-radius: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.nav-links a:hover { color: var(--navy); background: var(--bg-alt); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--navy); }
.nav-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.btn-ai {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.15rem; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: .9rem; color: var(--navy); white-space: nowrap;
  border: 2px solid var(--navy); background: transparent;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn-ai svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-ai:hover, .btn-ai.active {
  background: var(--navy); color: #fff; transform: translateY(-1px);
}
.main-nav .nav-cta { color: #fff; padding: .55rem 1.25rem; font-size: .9rem; }
.main-nav .nav-cta:hover { color: #fff; }
/* Eight nav links plus the actions exceed the 1140px container at full size,
   so the compact treatment applies at EVERY desktop width — not just a band. */
@media (min-width: 1180px) {
  .nav-links { gap: 0; }
  .nav-links a { font-size: .85rem; padding: .45rem .55rem; }
  .nav-links a::after { left: .55rem; right: .55rem; }
  .btn-ai, .main-nav .nav-cta { font-size: .84rem; padding: .45rem .9rem; }
  .header-inner { gap: 1rem; }
  .nav-phone { display: none; }
}

/* One desktop size now. The previous banded rules existed only to make the old
   logo's "Trusted for best rates and service" tagline legible, which needed
   112px. The current mark has no tagline and reads clearly at 72px — and being
   narrower, it removes the header width pressure that the eight nav links and a
   large logo used to create. NOTE: this block must stay AFTER the compressed-nav
   block above, which previously set .brand img itself and silently won. */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; }
.nav-toggle span { display: block; width: 24px; height: 3px; background: var(--navy); margin: 5px 0; border-radius: 2px; transition: .2s; }
.header-apply { display: none; }

/* Tablets and small laptops (781–1179px) can't fit the nav — collapse to the
   hamburger, but keep Apply Now visible in the header since they don't get
   the bottom tab bar. Phones (≤780) refine these rules further below. */
@media (max-width: 1179px) {
  .nav-toggle { display: block; }
  .header-inner { justify-content: space-between; }
  .main-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
    max-height: calc(100dvh - 130px); overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body.nav-open .main-nav { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { padding: .65rem 1.4rem; font-size: .95rem; border-top: 1px solid var(--line); border-radius: 0; }
  .nav-links a::after { display: none; }
  .nav-actions {
    flex-direction: column; align-items: stretch; gap: .55rem;
    padding: .8rem 1.4rem 1rem; border-top: 1px solid var(--line);
  }
  .btn-ai, .main-nav .nav-cta { text-align: center; justify-content: center; padding: .6rem 1rem; }
  .nav-phone { text-align: center; padding: .9rem 1.4rem; border-top: 1px solid var(--line); }
}
@media (min-width: 781px) and (max-width: 1179px) {
  .brand img { height: 66px; }
  .header-apply { display: inline-block; margin-left: auto; padding: .55rem 1.2rem; font-size: .9rem; }
  /* Menu already shows a green Apply — keep one filled primary per view */
  body.nav-open .header-apply { visibility: hidden; }
}

/* Hero — split layout: the message on a warm light background beside a clean,
   ungraded team photo in a framed panel (parchment offset echoes the icon tiles) */
.hero { background: linear-gradient(180deg, #fff 0%, var(--bg-cool) 100%); color: var(--ink); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.08fr; gap: 3rem;
  align-items: center; padding: 4rem 0 4.6rem;
}
/* Photo keeps its natural aspect ratio — nobody gets cropped off the ends */
.hero-photo { min-width: 0; }
.hero-photo-frame { position: relative; }
.hero-photo-frame::before {
  content: ""; position: absolute; inset: 1.3rem -1.1rem -1.2rem 1.3rem;
  background: linear-gradient(135deg, #e6edf8, #d6e0f0); border-radius: 24px;
}
.hero-photo-frame img {
  position: relative; display: block; width: 100%; height: auto;
  border-radius: 18px; box-shadow: 0 18px 44px rgba(23,48,95,.16);
}
/* Trust row beneath the photo — ratings and licensing in one quiet line */
.hero-proof {
  position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.1rem;
}
.hero-proof img {
  height: 38px; width: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 4px 8px;
}
.hero-proof span { font-size: .82rem; font-weight: 600; color: var(--muted); }
/* Gentle entrance — content rises, photo fades in */
@media (prefers-reduced-motion: no-preference) {
  .hero-content > * { animation: hero-rise .55s ease both; }
  .hero-content > *:nth-child(2) { animation-delay: .05s; }
  .hero-content > *:nth-child(3) { animation-delay: .1s; }
  .hero-content > *:nth-child(4) { animation-delay: .15s; }
  .hero-content > *:nth-child(5) { animation-delay: .2s; }
  .hero-content > *:nth-child(6) { animation-delay: .25s; }
  .hero-photo { animation: hero-fade .7s ease .2s both; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(8px); } }
.hero-content { min-width: 0; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1rem; color: var(--navy); }
.hero p { font-size: 1.13rem; color: #3d4a68; max-width: 34rem; }
.hero-checks { margin: 1.4rem 0 0; }
.hero-checks li { color: var(--ink); font-size: 1.02rem; margin-bottom: .7rem; padding-left: 2.2rem; }
.hero-checks li::before {
  content: "✓"; color: var(--navy-dark); background: var(--gold);
  width: 1.4rem; height: 1.4rem; border-radius: 50%; top: .15rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; line-height: 1;
}
/* Hero funnel entry — goal picker (Rocket-style first question) */
.hero-funnel { margin-top: 1.8rem; }
.hero-funnel-label { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin-bottom: .7rem; }
.hero-goals { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: .9rem; }
.hero-goal {
  display: flex; flex-direction: column; gap: .25rem;
  background: #fff;
  border-radius: 14px; padding: 1.05rem 1.1rem;
  text-decoration: none; box-shadow: 0 6px 18px rgba(23,48,95,.09);
  border: 2px solid var(--line);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hero-goal:hover {
  transform: translateY(-3px); border-color: var(--green);
  box-shadow: 0 12px 28px rgba(23,48,95,.14);
}
.hero-goal svg {
  width: 40px; height: 40px; padding: 8px; margin-bottom: .35rem;
  background: #e9f4ee; border-radius: 10px;
}
.hero-goal .ic-accent { stroke: var(--green); }
.hero-goal strong { color: var(--navy); font-size: 1.05rem; }
.hero-goal small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.hero-funnel-note { margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.hero-funnel-alt { margin-top: .35rem; font-size: .85rem; color: var(--muted); }
.hero-funnel-alt a { color: var(--green-dark); font-weight: 600; }

.hero-actions { display: flex; gap: .9rem; margin-top: 1.8rem; flex-wrap: wrap; }
.center-actions { justify-content: center; }

/* Hero chat (front and center) */
.hero-chat {
  display: flex; gap: .6rem; margin-top: 1.8rem; max-width: 34rem;
  background: #fff; border: 1.5px solid transparent; border-radius: 999px;
  padding: .4rem .4rem .4rem 1.3rem;
  box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.hero-chat:focus-within { border-color: var(--green); }
.hero-chat input { flex: 1; border: 0; font: inherit; font-size: 1.02rem; outline: none; background: transparent; color: var(--ink); min-width: 0; }
.hero-chat .btn { white-space: nowrap; }
.hero-chips { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.hero-chips a {
  color: #eef2fb; text-decoration: none; font-size: .85rem; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 999px; padding: .3rem .9rem;
}
.hero-chips a:hover { background: rgba(255,255,255,.14); }
.nav-ai { color: var(--green-dark) !important; }

/* Chat app (/ai) — full-height, composer pinned to the bottom */
body.chat-page { display: flex; flex-direction: column; min-height: 100dvh; }
body.chat-page main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.chat-page .site-footer { display: none; }
.chat-app { flex: 1; display: flex; flex-direction: column; min-height: 0; background: var(--bg-cool); }
.chat-app .container { max-width: 760px; }

.chat-topbar { background: linear-gradient(115deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; }
.chat-topbar-inner { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; }
.chat-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
  background: linear-gradient(135deg, var(--green), #3fae83);
  box-shadow: 0 2px 10px rgba(13,127,76,.4);
}
.chat-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.chat-title strong { font-size: 1rem; }
.chat-status { font-size: .76rem; color: #b9c5e2; display: flex; align-items: center; gap: .35rem; }
.chat-status i {
  width: 7px; height: 7px; border-radius: 50%; background: #6fdc6f;
  box-shadow: 0 0 6px #6fdc6f; display: inline-block;
}
.chat-call {
  margin-left: auto; color: #fff; font-size: .82rem; font-weight: 600;
  text-decoration: none; border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 999px; padding: .35rem .9rem; white-space: nowrap;
}
.chat-call:hover { background: rgba(255,255,255,.12); }

.chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.chat-thread { display: flex; flex-direction: column; gap: .8rem; padding-top: 1.2rem; padding-bottom: 1.2rem; }

.chat-bubble {
  max-width: 88%; padding: .8rem 1.1rem; border-radius: 18px;
  font-size: .96rem; line-height: 1.55;
  animation: bubble-in .22s ease both;
  overflow-wrap: break-word;
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-bubble.user {
  align-self: flex-end; color: #fff; border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, #25457f, var(--navy-dark));
  box-shadow: 0 2px 10px rgba(23,48,95,.25);
}
.chat-bubble.assistant {
  align-self: flex-start; background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-bottom-left-radius: 6px;
  box-shadow: 0 1px 6px rgba(23,48,95,.06);
}
.chat-bubble.assistant ul, .chat-bubble.assistant ol { padding-left: 1.2rem; margin: .4rem 0; }
.chat-bubble.assistant p { margin-bottom: .5rem; }
.chat-bubble.assistant p:last-child { margin-bottom: 0; }
.chat-bubble.assistant a { color: var(--green-dark); }
.chat-rate-disclaimer {
  margin-top: .7rem; padding-top: .6rem; border-top: 1px dashed var(--line);
  font-size: .78rem; color: var(--muted); font-style: italic;
}
.chat-typing span {
  display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%;
  background: var(--muted); animation: chat-blink 1.2s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat-composer {
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: .7rem 0 max(.7rem, env(safe-area-inset-bottom));
}
.chat-suggestions {
  overflow: hidden; padding-bottom: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.chat-suggestions.dismissed { display: none; }
.sug-track { display: flex; width: max-content; animation: sug-slide 26s linear infinite; }
.sug-set { display: flex; gap: .5rem; padding-right: .5rem; }
@keyframes sug-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.chat-suggestions:hover .sug-track,
.chat-suggestions:focus-within .sug-track,
.chat-suggestions:active .sug-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sug-track { animation: none; }
  .chat-suggestions { overflow-x: auto; }
}
.chat-suggestions button {
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--navy);
  background: #fff; border: 1.5px solid var(--line); border-radius: 999px;
  padding: .45rem 1rem; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.chat-suggestions button:hover { border-color: var(--green); color: var(--green-dark); }
.chat-input-row { display: flex; gap: .55rem; align-items: center; }
.chat-input-row input {
  flex: 1; font: inherit; font-size: 1rem; padding: .8rem 1.15rem;
  border: 1.5px solid var(--line); border-radius: 999px; min-width: 0; background: #fff;
}
.chat-input-row input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(13,127,76,.15); }
.chat-send {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: linear-gradient(135deg, var(--green), var(--green-dark));
  box-shadow: 0 3px 12px rgba(13,127,76,.35); transition: transform .12s ease;
}
.chat-send:hover { transform: translateY(-1px); }
.chat-send:disabled { opacity: .55; transform: none; cursor: default; }
.chat-disclaimer { margin-top: .55rem; font-size: .72rem; color: var(--muted); text-align: center; }
.chat-disclaimer a { color: var(--muted); }

/* Mobile tab bar */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: none; grid-template-columns: repeat(4, 1fr);
  padding: .4rem .3rem calc(.4rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(23,48,95,.08);
}
.mc-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 50px; text-decoration: none;
  color: var(--muted); font-weight: 600; font-size: .68rem; letter-spacing: .01em;
}
.mc-item svg { width: 23px; height: 23px; }
.mc-item .mc-spark { color: var(--gold); }
.mc-item.active { color: var(--green-dark); }
.mc-apply { color: var(--green-dark); }

/* Sections */
.section { padding: clamp(2.4rem, 7vw, 4rem) 0; }
.section.alt { background: var(--bg-cool); }
.section-head { text-align: center; max-width: 44rem; margin: 0 auto 2.5rem; }
.section-head h2, .split h2, .cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--navy); letter-spacing: -.015em; }
.section-head p { color: var(--muted); margin-top: .5rem; }

/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem 1.5rem; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column; gap: .55rem;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(23,48,95,.12), 0 18px 44px rgba(23,48,95,.10); }
.card h3 { color: var(--navy); font-size: 1.15rem; }
.card p { color: var(--muted); font-size: .95rem; flex: 1; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eaf5ef, #dcefe5);
  border: 1px solid #d3e8db;
}
.card-icon svg { width: 28px; height: 28px; }
.ic-main { stroke: var(--navy); color: var(--navy); }
.ic-accent { stroke: var(--gold-dark); }
.card-link { color: var(--green); font-weight: 700; font-size: .92rem; }

/* Split */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.checks { list-style: none; margin: 1.2rem 0 1.8rem; }
.checks li { padding-left: 2rem; position: relative; margin-bottom: .65rem; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 800; }
.lead { font-size: 1.14rem; color: var(--ink); }

/* Rates */
/* Rates strip — navy statement band; the white cards pop against it */
.rates-strip { background: linear-gradient(115deg, var(--navy) 0%, var(--navy-dark) 100%); }
.rates-strip .section-head h2 { color: #fff; }
.rates-strip .section-head p { color: #cbd6ee; }
.rates-strip .rates-updated { color: #b9c5e2; }
.rates-strip .rates-updated a { color: #fff; }
.tab-row { display: flex; gap: .5rem; justify-content: center; margin-bottom: 1.6rem; }
.tab {
  border: 2px solid var(--navy); background: transparent; color: var(--navy);
  padding: .5rem 1.6rem; border-radius: 999px; font-weight: 700; cursor: pointer; font-size: .95rem;
}
.tab.active { background: var(--navy); color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.rate-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); gap: 1.3rem; justify-content: center; }
.rate-card {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow);
  padding: 1.6rem; text-align: center; border-top: 4px solid var(--gold);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rate-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.rate-program { font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.rate-big { font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.rate-big span { font-size: 1.4rem; }
.rate-meta { display: flex; justify-content: center; gap: 1.4rem; color: var(--muted); font-size: .9rem; margin-top: .4rem; }
.rates-updated { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 1.4rem; }

/* Testimonials */
.testimonial-scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(340px, 82vw);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .2rem 1.2rem;
}
.testimonial-scroller .testimonial { scroll-snap-align: start; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.3rem; }
.testimonial {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem;
}
.testimonial p { color: var(--ink); font-size: .95rem; flex: 1; }
.testimonial cite { color: var(--navy); font-weight: 700; font-style: normal; }
.stars { color: #c9a35c; letter-spacing: .12em; }

/* CTA band */
.cta-band { background: linear-gradient(115deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #cbd6ee; margin-top: .5rem; margin-bottom: 1.4rem; }
/* Phone numbers must stay white on navy. iOS Safari auto-links bare numbers
   and paints them its own dark blue — unreadable here — so every phone number
   on a dark band is an explicit tel: link that we colour ourselves. */
.cta-band a:not(.btn), .page-hero a:not(.btn) { color: #fff; font-weight: 600; text-decoration: underline; }

/* Page hero + prose */
.page-hero { background: linear-gradient(115deg, var(--navy) 0%, var(--navy-dark) 100%); color: #fff; padding: 3.2rem 0; }
.page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.breadcrumb a { color: #cbd6ee; text-decoration: none; font-size: .9rem; }
.prose { max-width: 46rem; margin-inline: auto; }
.prose.narrow { max-width: 42rem; }
.prose h2 { color: var(--navy); margin: 2rem 0 .7rem; font-size: 1.45rem; }
.prose h3 { color: var(--navy); margin: 1.5rem 0 .5rem; }
.prose p, .prose li { margin-bottom: .8rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.prose .lead { font-size: 1.15rem; }
.prose a { color: var(--green-dark); }
.timeline li { margin-bottom: 1rem; }
.disclosures { margin-top: 2.5rem; font-size: .9rem; color: var(--muted); }

/* FAQ */
.faq-list { max-width: 46rem; }
.faq-guides {
  margin-top: 2.4rem; padding: 1.4rem 1.6rem;
  background: var(--bg-cool); border-radius: var(--radius);
}
.faq-guides h2 { font-size: 1.15rem; color: var(--navy); margin-bottom: .7rem; }
.faq-guides ul { list-style: none; display: grid; gap: .55rem; }
.faq-guides li { color: var(--muted); font-size: .95rem; }
.faq-guides a { color: var(--green-dark); font-weight: 600; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; background: #fff; box-shadow: var(--shadow); }
.faq-item summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 1.1rem 1.3rem; list-style: none; position: relative; }
.faq-item summary::after { content: "+"; position: absolute; right: 1.2rem; font-size: 1.3rem; color: var(--green); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 1.3rem 1.1rem; color: var(--muted); }

/* Forms */
.quote-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.4rem; }
.quote-form label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .92rem; color: var(--navy); }
.quote-form input, .quote-form select, .quote-form textarea {
  font: inherit; padding: .65rem .85rem; border: 1.5px solid var(--line);
  border-radius: 10px; background: #fff;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(13,127,76,.15);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.notice { border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.notice.success { background: #e8f6e0; border: 1px solid var(--green); color: var(--green-dark); }
.contact-aside {
  background: var(--bg-alt); border-radius: var(--radius); padding: 2rem;
  display: flex; flex-direction: column; gap: .7rem; align-self: start;
}
.contact-aside h3 { color: var(--navy); margin-top: .6rem; }
.contact-big a { font-size: 1.5rem; font-weight: 800; color: var(--navy); text-decoration: none; }

/* Footer */
.site-footer { background: var(--navy-dark); color: #b9c5e2; margin-top: 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 2.5rem; padding: 3.2rem 0 2rem; }
.footer-grid h4 { color: #fff; margin-bottom: .8rem; }
.footer-grid a { display: block; color: #b9c5e2; text-decoration: none; margin-bottom: .5rem; font-size: .93rem; }
.footer-grid a:hover { color: #fff; }
.footer-grid .btn { display: inline-block; color: #fff; margin-top: .4rem; }
.footer-logo { height: 60px; width: auto; background: #fff; padding: 6px 10px; border-radius: 10px; margin-bottom: .8rem; }
.badges { display: flex; gap: .7rem; margin-top: .8rem; }
.badges img { height: 40px; width: auto; background: #fff; border-radius: 8px; padding: 3px 6px; }
.social { display: flex; gap: .6rem; margin-top: .8rem; }
.social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #3c4f7e;
  display: flex; align-items: center; justify-content: center; margin: 0;
  font-weight: 800; font-size: .8rem;
}
.footer-legal { border-top: 1px solid #26355c; padding: 1.4rem 0 2rem; font-size: .78rem; color: #8d9bc0; }
.footer-legal p { margin-bottom: .5rem; }

/* Calculators */
.calc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; }
.calc-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .3rem; }
.calc-nav button {
  text-align: left; font: inherit; font-weight: 600; padding: .65rem .9rem;
  background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; color: var(--muted);
}
.calc-nav button.active { color: var(--navy); border-left-color: var(--green); background: var(--bg-alt); }
.calc-panel { display: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2rem; }
.calc-panel.active { display: block; }
.calc-panel h2 { color: var(--navy); margin-bottom: .4rem; }
.calc-panel .hint { color: var(--muted); font-size: .92rem; margin-bottom: 1.4rem; }
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.6rem; }
.calc-grid label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--navy); }
.calc-grid input, .calc-grid select { font: inherit; padding: .6rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; }
.calc-result { margin-top: 1.6rem; background: var(--bg-alt); border-radius: 12px; padding: 1.4rem 1.6rem; }
.calc-result .big { font-size: clamp(1.7rem, 5vw, 2.2rem); font-weight: 800; color: var(--navy); }
.result-sub { color: var(--muted); font-size: .9rem; margin-bottom: .8rem; }
.result-note { margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.page-hero-sub { color: #cbd6ee; margin-top: .5rem; }

/* Payment breakdown visualization */
.bd-bar {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--line); margin: .4rem 0 .9rem;
}
.bd-bar span { display: block; height: 100%; min-width: 4px; transition: width .25s ease; }
.bd-rows { font-size: .93rem; }
.bd-rows div {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px dashed var(--line);
}
.bd-rows div:last-child { border-bottom: 0; }
.bd-rows span { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.bd-rows i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.bd-rows i.nodot { visibility: hidden; }
.bd-rows strong { color: var(--ink); white-space: nowrap; }

/* Status badges */
.badge-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.badge {
  display: inline-block; border-radius: 999px; padding: .3rem .9rem;
  font-size: .82rem; font-weight: 700;
}
.badge.good { background: #d1fadf; color: #027a48; }
.badge.warn { background: #fef0c7; color: #b54708; }
.badge.bad { background: #fee4e2; color: #b42318; }

/* Amortization table */
.amort-wrap { overflow-x: auto; margin-top: .9rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.amort-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.amort-table th { background: var(--navy); color: #fff; text-align: right; padding: .5rem .8rem; font-weight: 600; }
.amort-table th:first-child, .amort-table td:first-child { text-align: left; }
.amort-table td { text-align: right; padding: .4rem .8rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.amort-table tbody tr:nth-child(even) { background: var(--bg-alt); }

/* Application wizard */
.apply-hero { padding: 2.4rem 0; }
.apply-container { max-width: 720px; }
.apply-section { padding-top: 2rem; }
.apply-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.4rem, 4vw, 2.2rem);
}
.apply-progress {
  height: 8px; border-radius: 999px; background: var(--line);
  overflow: hidden; margin-bottom: .7rem;
}
.apply-progress span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--green-dark));
  transition: width .3s ease;
}
.apply-step-label { font-size: .85rem; font-weight: 700; color: var(--muted); margin-bottom: 1.4rem; text-transform: uppercase; letter-spacing: .04em; }
.apply-step { display: none; border: 0; }
.apply-step.active { display: block; animation: bubble-in .25s ease both; }
.apply-step h2 { color: var(--navy); margin-bottom: 1rem; }
.option-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.4rem; }
.option-card {
  position: relative; display: flex; flex-direction: column; gap: .2rem;
  border: 2px solid var(--line); border-radius: 14px; padding: 1.2rem 1.1rem;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.option-card input { position: absolute; opacity: 0; }
.option-card .oc-icon {
  width: 40px; height: 40px; padding: 8px; margin-bottom: .2rem;
  background: #e9f4ee; border-radius: 10px;
}
.option-card .ic-accent { stroke: var(--green); }
/* Phones: stack full-width, icon beside the text — no cramped columns */
@media (max-width: 560px) {
  .option-cards { grid-template-columns: 1fr; gap: .8rem; }
  .option-card {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    column-gap: .9rem; align-items: center; padding: 1rem 1.1rem;
  }
  .option-card .oc-icon { grid-row: 1 / 3; margin-bottom: 0; }
  .option-card strong { grid-column: 2; }
  .option-card small { grid-column: 2; }
}
.option-card strong { color: var(--navy); font-size: 1.05rem; }
.option-card small { color: var(--muted); }
.option-card:has(input:checked) {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(13,127,76,.15);
  background: #f4fdf8;
}
.apply-check { flex-direction: row !important; align-items: center; gap: .5rem; font-weight: 600; color: var(--navy); font-size: .95rem; }
.apply-check input { width: 18px; height: 18px; accent-color: var(--green); }
.apply-notes { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--navy); margin-top: 1rem; }
.apply-notes textarea { font: inherit; padding: .65rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; }
.apply-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.apply-nav .btn-primary { margin-left: auto; }
.apply-fineprint { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); }
.apply-success .lead { margin-bottom: 1.4rem; }
.apply-next { background: var(--bg-alt); border-radius: 12px; padding: 1.4rem; }
.apply-next h3 { color: var(--navy); margin-bottom: .4rem; }
.apply-next p { color: var(--muted); margin-bottom: 1rem; }

/* Mobile */
@media (max-width: 900px) {
  /* Hero stacks: message first, framed photo below it */
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; padding: 2.6rem 0 3.2rem; }
  .hero-photo-frame::before { inset: 1rem -.7rem -.9rem 1rem; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .calc-layout { grid-template-columns: 1fr; }
  .calc-nav { position: static; flex-direction: row; overflow-x: auto; }
  .calc-nav button { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .calc-nav button.active { border-bottom-color: var(--green); }
}
@media (max-width: 780px) {
  body:not(.chat-page) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .mobile-cta { display: grid; }
  .site-footer { margin-top: 0; }

  .hero-content { text-align: center; }
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
  .hero p { font-size: 1.02rem; margin-inline: auto; }
  .hero-chat { margin-inline: auto; }
  .hero-checks { text-align: left; max-width: 22rem; margin-inline: auto; }
  .hero-goals { grid-template-columns: 1fr 1fr; max-width: 24rem; margin-inline: auto; }
  .hero-goal { padding: .9rem .85rem; text-align: left; }
  .hero-goal strong { font-size: .98rem; }
  .hero-actions, .hero-chips { justify-content: center; }
  .hero-proof { margin-top: 1.8rem; gap: .8rem; }
  .hero-proof img { height: 32px; }
  .hero-proof span { width: 100%; text-align: center; font-size: .78rem; }

  /* Rate cards swipe horizontally instead of stacking */
  .rate-cards {
    display: flex; justify-content: flex-start; overflow-x: auto;
    scroll-snap-type: x mandatory; padding: .3rem .2rem 1rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rate-cards::-webkit-scrollbar { display: none; }
  .rate-card { min-width: min(250px, 78vw); scroll-snap-align: center; flex-shrink: 0; }

  /* Bigger touch targets */
  .btn { padding: .8rem 1.6rem; }
  .card { padding: 1.4rem 1.3rem; }
  .page-hero { padding: 2.2rem 0; }
  .section-head { margin-bottom: 1.8rem; }
  .prose h2 { font-size: 1.3rem; }
  .cta-band .hero-actions .btn { width: 100%; text-align: center; }

  /* Chat page: hide suggestion chips and compress chrome so the
     conversation gets the space */
  .chat-suggestions { display: none; }
  body.chat-page .brand img { height: 42px; }
  body.chat-page .header-inner { padding: .45rem 0; }
  /* Tab bar shows on the chat page too — lift the composer above it */
  body.chat-page .chat-composer { padding-bottom: calc(.55rem + 64px + env(safe-area-inset-bottom)); }
  .chat-topbar-inner { padding: .45rem 0; gap: .6rem; }
  .chat-avatar { width: 32px; height: 32px; font-size: .95rem; }
  .chat-title strong { font-size: .93rem; }
  .chat-call { font-size: .76rem; padding: .3rem .7rem; }
  .chat-thread { padding-top: .8rem; padding-bottom: .8rem; gap: .6rem; }
  .chat-bubble { font-size: .93rem; padding: .7rem .95rem; }
  .chat-composer { padding: .5rem 0 max(.5rem, env(safe-area-inset-bottom)); }
  .chat-input-row input { padding: .7rem 1rem; }
  .chat-send { width: 42px; height: 42px; }
  .chat-disclaimer { margin-top: .45rem; font-size: .66rem; }

  .header-inner { padding: .4rem 0; }
  .brand img { height: 52px; }
  .hero-chat { flex-direction: column; border-radius: 18px; padding: .6rem; }
  .hero-chat input { padding: .5rem .7rem; }
  .form-row { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}