/* =====================================================================
   HFG Loan Officer Page - layout and components
   Structure is fixed. Everything an LO changes lives in lo-data.js.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hfg-off-white);
  color: var(--hfg-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--hfg-blue); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; font-weight: 800; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

/* Hidden by clipping rather than by parking it at left:-9999px. Both hide it
   from sight and keep it reachable by keyboard, but a box 9999px off to the
   left inflates documentElement.scrollWidth, which makes every automated
   "does this page scroll sideways?" check report a false positive at phone
   widths. Clipping leaves the scroll box alone. */
.skip {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: absolute; left: 12px; top: 12px; z-index: 200;
  width: auto; height: auto; margin: 0; overflow: visible;
  clip-path: none; white-space: normal;
  background: var(--hfg-white); color: var(--hfg-blue);
  padding: 10px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow);
}

:focus-visible { outline: 3px solid var(--hfg-teal); outline-offset: 2px; }

/* ---------- shared bits ---------- */

.eyebrow {
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hfg-teal-dark);
  margin: 0 0 10px;
}
.eyebrow-inv { color: var(--hfg-lime); }
/* lime tick before every section eyebrow — the repeating divider device */
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 3px;
  background: var(--hfg-lime); border-radius: 2px;
  vertical-align: middle; margin-right: 10px; position: relative; top: -1px;
}

.sec-h { font-size: clamp(25px, 2.7vw, 34px); color: var(--hfg-blue); margin: 0 0 10px; text-wrap: balance; }
.sec-h-inv { color: var(--hfg-white); }
.sec-sub { font-size: 16.5px; color: var(--hfg-gray-dark); max-width: 62ch; margin: 0 0 26px; }
.sec-sub-inv { color: rgba(255, 255, 255, 0.78); }

.band { padding-block: clamp(56px, 6vw, 88px); }
.band-paper { background: var(--hfg-white); }
.band-navy { background: var(--hfg-blue-dark); color: var(--hfg-white); }
.band-mid { background: var(--hfg-blue); color: var(--hfg-white); }
/* hairline wherever two light bands meet, so the change of section always reads */
.band:not(.band-navy) + .band:not(.band-navy) { border-top: 1px solid var(--hfg-line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 16px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-lime { background: var(--hfg-lime); color: var(--hfg-blue-deep); box-shadow: 0 12px 26px -14px rgba(174, 177, 0, 0.9); }
.btn-lime:hover { background: var(--hfg-lime-light); }
.btn-blue { background: var(--hfg-blue); color: var(--hfg-white); }
.btn-blue:hover { background: var(--hfg-blue-light); }
.btn-teal { background: var(--hfg-teal); color: var(--hfg-white); }
.btn-teal:hover { background: var(--hfg-teal-dark); }
.btn-ghost { background: transparent; color: var(--hfg-white); border-color: rgba(255, 255, 255, 0.45); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-outline { background: transparent; color: var(--hfg-blue); border-color: var(--hfg-line-strong); }
.btn-outline:hover { border-color: var(--hfg-blue); background: rgba(8, 75, 123, 0.04); }
.btn-sm { padding: 10px 20px; font-size: 15px; }
.btn-wide { width: 100%; }

/* ---------- corporate header ---------- */

/* Placeholder for the corp site's own menu. Deliberately not sticky: the page
   nav below it is, and two stacked sticky bars eat a phone's viewport. */
.bar {
  background: var(--hfg-blue-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 13px; }
.bar-logo { height: 32px; width: auto; }
.bar-right { display: flex; align-items: center; gap: 18px; }
.bar-tel { color: var(--hfg-white); text-decoration: none; font-weight: 700; font-size: 16px; }
.bar-tel:hover { color: var(--hfg-lime); }

/* The nav is sticky, so an anchor that lands at viewport top lands behind it.
   64px clears the 60px bar; scroll-behavior is the smooth jump. */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- page nav ---------- */

.pagenav {
  position: sticky; top: 0; z-index: 55;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hfg-line);
  box-shadow: 0 6px 18px -14px rgba(0, 70, 120, 0.35);
}
.pagenav-in { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.pagenav-id { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.pagenav-shot { width: 34px; height: 34px; border-radius: var(--radius-pill); object-fit: cover; flex: none; }
.pagenav-id-t { display: flex; flex-direction: column; line-height: 1.2; }
.pagenav-name { font-size: 14.5px; font-weight: 700; color: var(--hfg-blue); }
.pagenav-nmls { font-size: 11px; color: var(--hfg-gray-dark); }

/* Scrolls rather than wraps: a nav that grows a second row shifts the whole
   page down mid-scroll, which is worse than a row you can swipe. */
.pagenav-links {
  display: flex; align-items: stretch; gap: 0;
  margin: 0 0 0 auto; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  /* A flex item defaults to min-width:auto and refuses to shrink below its
     content, so without this the link row pushes the whole bar wider than the
     screen and the PAGE scrolls sideways instead of the nav. */
  min-width: 0;
}
.pagenav-links::-webkit-scrollbar { display: none; }
.pagenav-link {
  display: block; white-space: nowrap; text-decoration: none;
  font-size: 14px; font-weight: 500; color: var(--hfg-gray-dark);
  padding: 19px 10px 16px; border-bottom: 3px solid transparent;
}
.pagenav-link:hover { color: var(--hfg-blue); }
.pagenav-link.is-active { color: var(--hfg-blue); font-weight: 700; border-bottom-color: var(--hfg-lime); }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(1000px 620px at 88% -8%, rgba(14, 160, 193, 0.30), transparent 62%),
    linear-gradient(158deg, var(--hfg-blue-deep) 0%, var(--hfg-blue-dark) 52%, var(--hfg-blue) 100%);
  color: var(--hfg-white);
  position: relative;
  overflow: hidden;
}
.hero-in {
  display: flex; flex-wrap: wrap; gap: 36px 56px; align-items: center;
  padding-top: clamp(40px, 5vw, 68px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.hero-copy { flex: 1.5 1 440px; min-width: 0; }
.hero h1 {
  font-size: clamp(36px, 4.8vw, 58px); font-weight: 800;
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--hfg-white); margin: 0 0 20px; text-wrap: pretty; max-width: 18ch;
}
/* The lime half sits on its own line: the break is the design, not a wrap. */
.hero h1 .hl { color: var(--hfg-lime); display: block; }
.hero-lede { font-size: 1.12rem; color: rgba(255, 255, 255, 0.84); max-width: 52ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-card { flex: 1 1 280px; max-width: 340px; margin: 0 0 0 auto; }
.hero-card-shot {
  display: block; width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 20px 20px 0 0;
}
.hero-card-cap {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--hfg-lime);
  border-radius: 0 0 20px 20px;
  padding: 14px 18px;
}
.hero-card-name { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--hfg-white); }
.hero-card-meta {
  display: block; margin-top: 4px; font-family: var(--font-label);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hfg-teal-light);
}

/* ---------- calculator ---------- */

.calc-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.calc-in > * { min-width: 0; }
/* No lime tick on this one. The reference drops it here, and it is right to:
   the eyebrow sits directly above a very large heading, and the tick reads as
   a stray dash rather than the section divider it is everywhere else. */
.calc-copy .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: var(--hfg-teal-dark); }
.calc-copy .eyebrow::before { content: none; }
.calc-h {
  font-size: clamp(38px, 4.4vw, 56px); font-weight: 800;
  line-height: 1.02; letter-spacing: -0.03em;
  color: var(--hfg-ink); margin: 10px 0 16px; max-width: 12ch;
}
.calc-lede { font-size: 19px; color: var(--hfg-gray-dark); margin: 0 0 30px; }
.calc-steps { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 22px; }
.calc-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.calc-step-n {
  font-size: 16px; font-weight: 500; color: var(--hfg-blue);
  padding-top: 11px; position: relative;
}
.calc-step-n::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 30px; height: 3px; background: var(--hfg-teal);
}
.calc-step-t b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--hfg-ink); }
.calc-step-t span { display: block; margin-top: 5px; font-size: 17px; color: var(--hfg-gray-dark); }
.calc-link {
  display: inline-block; font-size: 17px; font-weight: 700;
  color: var(--hfg-blue); text-decoration: none;
  border-bottom: 2px solid var(--hfg-teal); padding-bottom: 2px;
}
.calc-link:hover { color: var(--hfg-blue-dark); }

/* The panel keeps its old behaviour, only the frame changed. */
.calc .engine {
  max-width: 520px; margin-left: auto;
  background: linear-gradient(158deg, var(--hfg-blue-deep), var(--hfg-blue-dark));
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-lift);
}

/* ---------- scenario engine ---------- */

.engine {
  background: rgba(3, 21, 36, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(3px);
}
.engine-tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; padding: 4px; margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.08); border-radius: var(--radius-pill);
}
.engine-tab {
  border: 0; background: transparent; cursor: pointer;
  padding: 9px 8px; border-radius: var(--radius-pill);
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72); font-weight: 500;
  transition: background 0.14s ease, color 0.14s ease;
}
.engine-tab:hover { color: var(--hfg-white); }
.engine-tab[aria-selected="true"] { background: var(--hfg-lime); color: var(--hfg-blue-deep); font-weight: 700; }

.fld { margin-bottom: 12px; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.fld-row > .fld { min-width: 0; }
.fld-row .ip { padding: 0 10px; gap: 4px; }
.fld-row .ip input { font-size: 16px; }
.fld-row .ip .pre, .fld-row .ip .suf { font-size: 12.5px; }
.fld label {
  display: block; font-family: var(--font-label); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66); margin-bottom: 5px;
}
.fld .hint { text-transform: none; letter-spacing: 0; font-family: var(--font-sans); color: rgba(255, 255, 255, 0.45); }
.ip {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  min-width: 0; overflow: hidden;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.ip:focus-within { border-color: var(--hfg-lime); background: rgba(255, 255, 255, 0.11); }
.ip .pre, .ip .suf { font-family: var(--font-label); font-size: 14px; color: rgba(255, 255, 255, 0.55); flex: none; }
.ip input, .ip select {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--hfg-white); font-family: var(--font-display); font-weight: 700;
  font-size: 17px; padding: 9px 0; text-align: right;
}
.ip select { text-align: left; font-size: 15px; cursor: pointer; }
.ip select option { background: var(--hfg-blue-deep); color: var(--hfg-white); }
.ip input::placeholder { color: rgba(255, 255, 255, 0.34); font-weight: 500; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.fld-row .chips { margin-top: 5px; gap: 4px; }
.fld-row .chip { padding: 3px 8px; font-size: 10px; }
.chip {
  border: 1px solid rgba(255, 255, 255, 0.2); background: transparent;
  color: rgba(255, 255, 255, 0.78); cursor: pointer;
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-family: var(--font-label); font-size: 11px;
  transition: all 0.14s ease;
}
.chip:hover { border-color: var(--hfg-lime); color: var(--hfg-white); }
.chip[aria-pressed="true"] { background: var(--hfg-lime); border-color: var(--hfg-lime); color: var(--hfg-blue-deep); font-weight: 700; }

.rate-ref { margin: 8px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); line-height: 1.45; }
.fld-rate label { display: flex; align-items: center; }
.tweak {
  display: inline-block; margin-left: auto; padding: 2px 7px;
  background: var(--hfg-lime); color: var(--hfg-blue-deep);
  border-radius: var(--radius-pill); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; vertical-align: middle;
  animation: tweakBlink 1.6s ease-in-out infinite;
}
/* the empty rate field pulses until a rate is entered, then goes quiet */
.fld-rate .ip {
  border-color: rgba(215, 219, 0, 0.55);
  animation: rateGlow 1.6s ease-in-out infinite;
}
.fld-rate .ip:focus-within { border-color: var(--hfg-lime); animation: none; }
.engine.has-rate .fld-rate .ip { animation: none; border-color: rgba(255, 255, 255, 0.18); }
.engine.has-rate .tweak { display: none; }

@keyframes tweakBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes rateGlow {
  0%, 100% { border-color: rgba(215, 219, 0, 0.35); box-shadow: 0 0 0 0 rgba(215, 219, 0, 0); }
  50% { border-color: var(--hfg-lime); box-shadow: 0 0 0 3px rgba(215, 219, 0, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .tweak, .fld-rate .ip { animation: none; }
  .fld-rate .ip { border-color: var(--hfg-lime); }
}
.rate-ref b { color: var(--hfg-lime); font-family: var(--font-display); }
.linkbtn {
  border: 0; background: none; padding: 0 0 0 6px; cursor: pointer;
  color: var(--hfg-lime); text-decoration: underline; font-size: 13px; font-weight: 700;
}
.rate-ref small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); margin-top: 3px; }

/* --- answer card --- */

.answer {
  background: var(--hfg-lime); color: var(--hfg-blue-deep);
  border-radius: var(--radius); padding: 15px 18px 14px; margin: 0 0 14px;
}
.answer-label { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.answer-value { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 4vw, 42px); line-height: 1; letter-spacing: -0.03em; margin: 4px 0 2px; }
.answer-note { font-family: var(--font-label); font-size: 11px; opacity: 0.72; }
.answer-empty { background: rgba(255, 255, 255, 0.08); border: 1px dashed rgba(255, 255, 255, 0.3); color: var(--hfg-white); padding: 16px; text-align: center; }
.answer-empty .answer-value { font-size: 18px; letter-spacing: 0; line-height: 1.3; margin: 6px 0 4px; }
.answer-empty .answer-note { opacity: 0.66; font-size: 11.5px; line-height: 1.5; max-width: 34ch; margin-inline: auto; }

/* --- collapsible extra inputs --- */

.more { border-top: 1px solid rgba(255, 255, 255, 0.16); margin: 2px 0 8px; }
.more > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 9px 2px; font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hfg-lime);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto;
  border-right: 2px solid var(--hfg-lime); border-bottom: 2px solid var(--hfg-lime);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.16s ease;
}
.more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.more-in { padding-top: 2px; }
.more-flush { border-top: 0; margin: 0; }
.more-flush > summary { padding-top: 4px; }

.stack { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; margin: 14px 0 12px; background: rgba(255, 255, 255, 0.12); }
.stack i { display: block; height: 100%; }
.sw-pi { background: var(--hfg-lime); }
.sw-tax { background: var(--hfg-teal); }
.sw-ins { background: var(--hfg-teal-light); }
.sw-hoa { background: var(--hfg-blue-light); }
.sw-mi { background: #9FB4C6; }

.breakdown { list-style: none; }
.breakdown li {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px; color: rgba(255, 255, 255, 0.82);
}
.breakdown li:last-child { border-bottom: 0; }
.breakdown b { margin-left: auto; font-family: var(--font-display); color: var(--hfg-white); font-size: 15.5px; }
.sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.engine-foot { margin-top: 10px; }
.engine-disc { font-size: 9.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.42); margin-top: 8px; }

/* ---------- proof bar ---------- */

.proofbar { background: var(--hfg-blue); color: var(--hfg-white); }
/* Flex, not a fixed 4-column grid: an officer with no Proof Stat 3 has
   three stats, and a hard repeat(4, 1fr) left a blank quarter on the
   right. flex: 1 1 0 divides the bar evenly however many there are. */
.proofbar-in { display: flex; flex-wrap: wrap; gap: 0; padding-block: 26px; }
.pb { flex: 1 1 0; min-width: 0; text-align: center; padding-inline: 18px; position: relative; display: flex; flex-direction: column; }
.pb + .pb::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
  width: 1px; background: rgba(255, 255, 255, 0.22);
}
.pb b { display: block; font-family: var(--font-display); font-size: clamp(26px, 3vw, 36px); font-weight: 800; color: var(--hfg-lime); line-height: 1; }
.pb span { display: block; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); margin-top: auto; padding-top: 8px; }
.pb-stars { color: var(--hfg-teal-light); letter-spacing: 1px; font-size: 13px; margin-top: 5px; line-height: 1; }

/* ---------- where to begin ---------- */

.begin-in { display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: flex-start; }
.begin-head { flex: 1 1 300px; max-width: 380px; }
/* The cards beside this column run about three times its height, so top-aligned
   it left a thousand pixels of dead space that read as a bug. Sticky turns that
   into deliberate whitespace: the heading travels with the cards. Offset clears
   the sticky page nav (60px) plus a gap. Switched off below 900px, where the
   two columns stack and there is nothing to travel alongside. */
.begin-head { position: sticky; top: 88px; }
.begin-head .sec-h { margin-bottom: 14px; }
.begin-head .sec-sub { margin: 0; }
.begin-call { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hfg-line); }
.begin-call-l {
  margin: 0 0 6px; font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hfg-teal-dark);
}
.begin-call-v {
  font-size: 22px; font-weight: 800; color: var(--hfg-blue);
  text-decoration: none; letter-spacing: -0.01em;
}
.begin-call-v:hover { color: var(--hfg-teal-dark); text-decoration: underline; }

.starts { flex: 2 1 480px; min-width: 0; display: grid; gap: 14px; }
.start {
  display: grid; grid-template-columns: 78px 1fr; align-items: start; gap: 8px;
  background: var(--hfg-white); border: 1px solid var(--hfg-line);
  border-radius: 16px; padding: 24px 26px;
  transition: border-color 0.16s ease, transform 0.16s ease;
}
.start:hover { border-color: var(--hfg-teal); transform: translateX(4px); }
.start-n {
  font-family: var(--font-display); font-size: 40px; font-weight: 800;
  line-height: 1; color: var(--hfg-line-strong);
}
.start-body { min-width: 0; }
.start-step { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hfg-teal-dark); margin: 0 0 4px; }
.start h3 { font-size: 21px; color: var(--hfg-blue); margin: 0 0 8px; }
.start p { color: var(--hfg-gray-dark); font-size: 15.5px; margin: 0; }
.start .btn { margin-top: 14px; }

/* The middle row is the one most people should take, so it is the only thing
   in this section with a filled background. */
.start-lead { background: var(--hfg-blue); border-color: var(--hfg-blue); }
.start-lead:hover { border-color: var(--hfg-blue); }
.start-lead .start-n,
.start-lead .start-step { color: var(--hfg-lime); }
.start-lead h3 { color: var(--hfg-white); }
.start-lead p { color: rgba(255, 255, 255, 0.82); }


/* ---------- generic card grids ---------- */

.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }

/* ---------- differentiators ---------- */

.vcard {
  position: relative; overflow: hidden;
  background: var(--hfg-white); border-radius: var(--radius);
  border-top: 3px solid var(--hfg-lime);
  padding: 28px 26px 30px;
}
.vcard h3 { font-size: 23px; font-weight: 800; color: var(--hfg-blue); margin: 0 0 10px; }
.vcard p { color: var(--hfg-gray-dark); font-size: 15.5px; margin: 0; }
.vcard > * { position: relative; z-index: 1; }
/* The card's number, huge and nearly invisible behind the corner. There used
   to be a small teal one at the top of the card as well; two numbers saying the
   same thing was one too many, so the ghost is the only one left. It comes from
   data-n, so the digit is not markup a screen reader reads out. */
.vcard::after {
  content: attr(data-n); position: absolute; z-index: 0;
  top: -18px; right: 6px;
  font-family: var(--font-display); font-size: 120px; font-weight: 800;
  line-height: 1; color: rgba(8, 75, 123, 0.06); pointer-events: none;
}
/* any-count card grid — used where lo-data.js decides how many cards exist */
.gridauto { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; align-items: stretch; }
/* loan programs: four standard cards fill one row, specialty card spans below */
/* ---------- loan options ---------- */

.prog-head { display: flex; flex-wrap: wrap; gap: 16px 48px; justify-content: space-between; align-items: end; margin-bottom: 34px; }
.prog-head .sec-h { margin: 0; }
.prog-head .sec-sub { margin: 0; flex: 1 1 340px; max-width: 46ch; }

.prog-in { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: start; }
.prog-tabs { flex: 1 1 260px; max-width: 340px; display: grid; gap: 10px; }
.ptab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--hfg-blue); background: var(--hfg-off-white);
  border: 0; border-radius: var(--radius); padding: 18px 20px;
  transition: background 0.16s ease, color 0.16s ease;
}
.ptab:hover { background: var(--hfg-line); }
.ptab-arrow { color: var(--hfg-teal); font-size: 18px; }
.ptab[aria-selected="true"] { background: var(--hfg-blue); color: var(--hfg-white); }
.ptab[aria-selected="true"] .ptab-arrow { color: var(--hfg-lime); }

.prog-panels { flex: 1.4 1 420px; min-width: 0; }
.ppanel {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--hfg-blue-dark), var(--hfg-blue));
  color: var(--hfg-white); border-radius: var(--radius-lg); padding: 36px;
}
.ppanel[hidden] { display: none; }
/* The mark, bottom right and barely there. */
.ppanel::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 200px; height: 200px; opacity: 0.06; pointer-events: none;
  background: url('logo-white-icon.png') no-repeat center / contain;
}
.ppanel > * { position: relative; z-index: 1; }
.ppanel-n { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hfg-teal-light); margin: 0 0 10px; }
.ppanel h3 { font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--hfg-white); margin: 0 0 12px; }
.ppanel-blurb { color: rgba(255, 255, 255, 0.84); font-size: 16.5px; margin: 0 0 22px; max-width: 46ch; }
.ppanel-pts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.ppanel-pts li { position: relative; padding-left: 34px; font-size: 15.5px; color: rgba(255, 255, 255, 0.92); }
.ppanel-pts li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px;
  width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: var(--hfg-lime); color: var(--hfg-blue-deep);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
.btn-outline-inv {
  background: transparent; color: var(--hfg-white);
  border: 2px solid rgba(255, 255, 255, 0.35);
}
.btn-outline-inv:hover { border-color: var(--hfg-white); }

/* ---------- specialty band ---------- */

/* Rules rather than cards. On a solid blue band a grid of bordered boxes
   turns into a lot of edges; a hairline between items says the same thing
   and lets the band stay flat. */
.spec { position: relative; overflow: hidden; }
.spec::before {
  content: ""; position: absolute; z-index: 0;
  left: -90px; top: 50%; transform: translateY(-50%);
  width: 420px; height: 420px; opacity: 0.05; pointer-events: none;
  background: url('logo-white-icon.png') no-repeat center / contain;
}
.spec-in { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 34px 56px; align-items: start; }
.spec-head { flex: 1 1 300px; max-width: 400px; }
.spec-head .sec-h { margin-bottom: 12px; }
.spec-head .sec-sub { margin: 0; }

.spec-list {
  flex: 1.3 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0;
}
.spec-list li { padding: 20px 24px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.spec-list li:nth-child(odd) { padding-left: 0; }
.spec-list li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.spec-list b { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--hfg-lime); margin-bottom: 7px; line-height: 1.3; }
.spec-list span { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); }

/* ---------- reviews (light band) ---------- */

.rev-h { margin-bottom: 8px; }
.rev-sub { margin-bottom: 0; }
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
.rev-score {
  background: var(--hfg-blue-dark);
  border-radius: var(--radius-lg); padding: 20px 26px; flex: none;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.rev-stars { display: flex; gap: 2px; }
.rev-score .star { font-family: var(--font-sans); font-size: 20px; line-height: 1; color: var(--hfg-lime); letter-spacing: 0; text-transform: none; display: inline-block; margin: 0; }
.rev-score .star-off { color: rgba(255, 255, 255, 0.25); }
.rev-score b { font-family: var(--font-display); font-size: 40px; color: var(--hfg-white); line-height: 1; }
.rev-score .rev-cap { display: block; font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-top: 6px; }

/* One tall featured quote spanning two rows, the rest beside it. auto-fit
   rather than a fixed count, so five, three or two all sit square. */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.q {
  margin: 0; background: var(--hfg-off-white);
  border-radius: var(--radius-lg); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.q blockquote { margin: 0; font-size: 15.5px; color: var(--hfg-ink); line-height: 1.6; flex: 1; }
.q-stars { display: flex; gap: 2px; }
.q .star { font-family: var(--font-sans); font-size: 16px; line-height: 1; color: var(--hfg-teal); }
.q .star-off { color: var(--hfg-line); }
.q figcaption { font-size: 14px; display: flex; align-items: center; gap: 12px; }
.q-who { min-width: 0; }
.q figcaption b { display: block; color: var(--hfg-blue); }
.q figcaption span { font-family: var(--font-label); font-size: 11.5px; color: var(--hfg-gray-dark); }

.q-feat {
  grid-row: span 2; position: relative; overflow: hidden;
  background: var(--hfg-blue-dark); padding: 34px 32px;
}
/* Centred, not top-aligned. The card is as tall as two small ones whatever
   goes in it, so a short quote left a navy void beneath it and looked like
   something had failed to load. Centring makes a short quote read as
   deliberate and leaves a long one exactly where it was. */
.q-feat blockquote {
  font-size: clamp(19px, 1.6vw, 23px); font-weight: 500;
  color: var(--hfg-white); line-height: 1.45;
  display: flex; align-items: center;
}
.q-feat .star { color: var(--hfg-lime); font-size: 18px; }
.q-feat .star-off { color: rgba(255, 255, 255, 0.25); }
.q-feat figcaption b { color: var(--hfg-white); }
.q-feat figcaption span { color: rgba(255, 255, 255, 0.66); }
.q-feat > * { position: relative; z-index: 1; }
.q-mark {
  position: absolute; z-index: 0; top: -18px; right: 14px;
  font-family: var(--font-display); font-size: 170px; line-height: 1;
  color: var(--hfg-lime); opacity: 0.14; pointer-events: none;
}
/* Selector deliberately carries figcaption: the sibling rule
   `.q-feat figcaption span` is more specific than a lone `.q-av`, so the
   initials inherited white-at-66% and sat on lime at 1.29:1 -- there, but
   unreadable. This outranks it. */
.q figcaption .q-av {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--hfg-lime); color: var(--hfg-blue-deep);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 14px; font-weight: 800;
}
.q-more { margin-top: 26px; }
.q-more a { color: var(--hfg-teal-dark); font-weight: 700; }

.aw { margin-top: 48px; border-top: 1px solid var(--hfg-line); padding-top: 34px; }
.aw-h { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hfg-gray-dark); margin-bottom: 22px; }
.aw-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; }
/* Round chips rather than rounded rectangles: the award marks are circular
   badges, and a square plate around a circle reads as a mistake. */
.aw-row span {
  background: var(--hfg-blue-dark); border-radius: var(--radius-pill);
  width: 132px; height: 132px; padding: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.aw-row img { height: 100%; width: 100%; object-fit: contain; }

/* ---------- process ---------- */

/* The process list is styled with the other additions further down: it is a
   full-width band, not a narrow column, so it runs horizontally. */


/* ---------- FAQ + checklist two-up ---------- */

.two-col { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: start; }

.checklist {
  background: var(--hfg-off-white); border: 1px solid var(--hfg-line);
  border-radius: var(--radius-lg); padding: 24px 22px;
}
.cl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.cl-head h3 { font-size: 19px; color: var(--hfg-blue); }
.cl-count { font-family: var(--font-label); font-size: 12px; color: var(--hfg-teal-dark); white-space: nowrap; }
.cl-sub { font-size: 14px; color: var(--hfg-gray-dark); margin-bottom: 14px; }
.cl-meter { height: 6px; background: var(--hfg-line); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 14px; }
.cl-meter i { display: block; height: 100%; background: var(--hfg-lime); width: 0; transition: width 0.2s ease; }

.cl-group { border-top: 1px solid var(--hfg-line); }
.cl-group:last-of-type { border-bottom: 1px solid var(--hfg-line); }
.cl-group > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 2px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15.5px; color: var(--hfg-blue);
}
.cl-group > summary::-webkit-details-marker { display: none; }
.cl-group > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 4px;
  border-right: 2px solid var(--hfg-teal-dark); border-bottom: 2px solid var(--hfg-teal-dark);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.16s ease;
}
.cl-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cl-group > summary:hover { color: var(--hfg-blue-light); }
.cl-gcount {
  margin-left: auto; font-family: var(--font-label); font-size: 11px;
  letter-spacing: 0.08em; color: var(--hfg-gray); white-space: nowrap;
}
.cl-gcount.done { color: var(--hfg-teal-dark); }
.cl-items { padding: 0 2px 12px; }
.cl-item { display: flex; align-items: flex-start; gap: 11px; padding: 5px 0; cursor: pointer; font-size: 14.5px; }
.cl-item input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--hfg-teal); flex: none; cursor: pointer; }
.cl-item input:checked + span { color: var(--hfg-gray); text-decoration: line-through; }
.cl-actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 16px; }

/* ---------- tools ---------- */

.tcard {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--hfg-white); border: 1px solid var(--hfg-line);
  border-radius: var(--radius-lg); padding: 26px 24px;
  text-decoration: none; color: inherit;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.tcard:hover { border-color: var(--hfg-teal); transform: translateY(-2px); box-shadow: var(--shadow); }
.tart {
  display: block; background: var(--hfg-off-white);
  border: 1px solid var(--hfg-line); border-radius: var(--radius);
  padding: 0; margin-bottom: 2px; overflow: hidden;
}
.tart svg { display: block; width: 100%; height: auto; aspect-ratio: 220 / 132; }
.tart-img { padding: 0; overflow: hidden; }
.tart-img img { display: block; width: 100%; height: auto; aspect-ratio: 220 / 132; object-fit: cover; object-position: center; }
.tcard h3 { font-size: 19px; color: var(--hfg-blue); }
.tcard p { font-size: 15px; color: var(--hfg-gray-dark); flex: 1; }
.tcard .tgo { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hfg-teal-dark); font-weight: 700; }

/* ---------- video ---------- */

.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vid { background: var(--hfg-white); border: 1px solid var(--hfg-line); border-radius: var(--radius); overflow: hidden; }
.vid-frame { aspect-ratio: 16 / 9; background: var(--hfg-blue-deep); display: grid; place-items: center; }
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid-empty { font-family: var(--font-label); font-size: 12px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.08em; text-transform: uppercase; }
.vid p { padding: 16px 18px; font-family: var(--font-display); font-weight: 700; color: var(--hfg-blue); font-size: 16px; }

/* ---------- faq ---------- */

/* Hairline rows rather than boxed cards: seven bordered boxes stacked read as
   a wall, and the questions are the point. A 3px left rule turns teal on the
   open one so the eye keeps its place. */
.faq { max-width: 860px; }
.faq details {
  border-top: 1px solid var(--hfg-line);
  border-left: 3px solid transparent;
  padding-left: 16px;
  transition: border-left-color 0.16s ease;
}
.faq details:last-of-type { border-bottom: 1px solid var(--hfg-line); }
.faq details[open] { border-left-color: var(--hfg-teal); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--hfg-blue);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--hfg-off-white); color: var(--hfg-blue);
  font-family: var(--font-label); font-size: 18px;
  display: grid; place-items: center;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .faq-a { padding: 0 4px 22px; color: var(--hfg-gray-dark); font-size: 16px; max-width: 62ch; }

/* ---------- agents ---------- */

.agent-in { display: flex; flex-wrap: wrap; gap: 34px 56px; align-items: start; }
.agent-head { flex: 1 1 300px; max-width: 400px; }
.agent-head .sec-h { margin-bottom: 12px; }
.agent-head .sec-sub { margin: 0 0 24px; }

/* Numbered, on rules, same device as the specialty band so the two dark
   sections read as a pair rather than two different ideas. */
.agent-list {
  flex: 1.3 1 420px; min-width: 0; list-style: none; margin: 0; padding: 0;
  counter-reset: agent;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.agent-list li {
  counter-increment: agent; position: relative;
  padding: 20px 24px 20px 46px; border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.agent-list li::before {
  content: counter(agent, decimal-leading-zero);
  position: absolute; left: 24px; top: 21px;
  font-family: var(--font-label); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--hfg-lime);
}
.agent-list li:nth-child(odd) { padding-left: 22px; }
.agent-list li:nth-child(odd)::before { left: 0; }
.agent-list li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.18); }
.agent-list b { display: block; font-family: var(--font-display); font-size: 16.5px; color: var(--hfg-white); margin-bottom: 8px; line-height: 1.3; }
.agent-list span { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }

/* ---------- about ---------- */

.about { display: grid; grid-template-columns: 320px 1fr; gap: 56px; align-items: center; }

/* The lime block sits behind and below-right of the photo. It is decoration
   drawn with a pseudo-element, so it adds no node and nothing to read. */
.about-frame { position: relative; }
.about-frame::before {
  content: ""; position: absolute; z-index: 0;
  inset: 16px -16px -16px 16px;
  background: var(--hfg-lime); border-radius: var(--radius-lg);
}
.about-frame .about-shot { position: relative; z-index: 1; }
/* height:auto is load-bearing. The img carries width="800" height="800" so the
   browser can reserve space before it loads; without height:auto the CSS width
   overrides the attribute width but the attribute HEIGHT still applies, and the
   photo renders 300px wide by 800px tall. aspect-ratio and object-fit keep it
   square even if an officer slips a non-square headshot past the build. */
.about-shot {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.about-copy { color: var(--hfg-ink); }
.about-copy .sec-h { text-align: left; }
.about-body { color: var(--hfg-gray-dark); }
.about-copy p { color: var(--hfg-gray-dark); margin-bottom: 14px; font-size: 16.5px; }
.about-body p:last-child { margin-bottom: 0; }
.about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.aw-about { grid-column: 1 / -1; margin-top: 8px; }

/* ---------- final cta ---------- */

/* The one full-lime band on the page. It is the last thing before the footer
   and the only place the brand colour carries a whole section, which is what
   makes it read as the end of the argument rather than another card. */
.final {
  background: var(--hfg-lime); color: var(--hfg-blue-deep);
  text-align: center; position: relative; overflow: hidden;
}
.final .wrap { position: relative; z-index: 1; }
.final .eyebrow { color: var(--hfg-blue-deep); }
.final .eyebrow::before { background: var(--hfg-blue-deep); }
.final .sec-h {
  margin-inline: auto; color: var(--hfg-blue-deep);
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 800;
}
.final .sec-sub { margin-inline: auto; text-align: center; color: rgba(3, 39, 64, 0.78); }
.final-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.final-note { margin-top: 18px; font-size: 15px; color: rgba(3, 39, 64, 0.78); }
.final-note a { color: var(--hfg-blue-deep); font-weight: 700; }

/* Navy buttons on lime: the lime pill style would vanish into the band. */
.final .btn-lime {
  background: var(--hfg-blue-deep); color: var(--hfg-white); box-shadow: none;
}
.final .btn-lime:hover { background: var(--hfg-blue-dark); }
.final .btn-outline {
  background: transparent; color: var(--hfg-blue-deep);
  border: 2px solid rgba(3, 39, 64, 0.35);
}
.final .btn-outline:hover { border-color: var(--hfg-blue-deep); }

/* The mark, far right and faint. Positioned off the headline on purpose: it
   sits behind the buttons, not behind anything anyone has to read. */
.final::after {
  content: ""; position: absolute; z-index: 0;
  right: -60px; bottom: -40px; width: 320px; height: 320px;
  background: url('logo-white-icon.png') no-repeat center / contain;
  opacity: 0.22; pointer-events: none;
}
@media (max-width: 900px) { .final::after { display: none; } }

/* ---------- footer ---------- */

.foot { background: var(--hfg-blue-deep); color: rgba(255, 255, 255, 0.72); padding-block: 44px 108px; }
.foot-top {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.foot-logo { height: 42px; width: auto; display: block; }
.foot-tag { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.6); max-width: 26ch; }
.foot-k {
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hfg-lime); margin-bottom: 12px;
}
.foot-col { font-size: 14.5px; line-height: 1.7; }
.foot-col p { margin: 0; }
.foot-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--hfg-white); }
.foot-meta { color: rgba(255, 255, 255, 0.6); font-size: 13.5px; }
.foot-col a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.foot-col a:hover { color: var(--hfg-lime); }
.foot-c { font-size: 15px; line-height: 1.65; }
.foot-c b { color: var(--hfg-white); }
.foot-c a { color: rgba(255, 255, 255, 0.82); }
.legal { font-size: 11.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.5); margin-top: 22px; }
.legal a { color: rgba(255, 255, 255, 0.72); }
.legal-dim { color: rgba(255, 255, 255, 0.34); margin-top: 12px; }

/* ---------- mobile action bar ---------- */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(3, 39, 64, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.actionbar .btn { flex: 1; padding: 13px 8px; font-size: 15px; }

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 1080px) {
  /* The calculator column stops being a column before the hero does. */
  .calc .engine { margin-inline: 0; max-width: none; }
  .prog-tabs { max-width: none; }
}

@media (max-width: 900px) {
  .begin-head { position: static; }
  .two-col { grid-template-columns: 1fr; gap: 30px; }
  .agent-list { grid-template-columns: 1fr 1fr; }
  .spec-list { grid-template-columns: 1fr 1fr; }
  .grid3, .quotes, .starts, .vids { grid-template-columns: 1fr 1fr; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .about { grid-template-columns: 1fr; gap: 28px; }
  .about-frame { max-width: 260px; }
  .proofbar-in { gap: 22px 0; }
  .pb { flex-basis: 50%; }
  .pb:nth-child(3)::before { display: none; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid3, .quotes, .starts, .vids { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 24px; }
  .agent-list { grid-template-columns: 1fr; }
  .spec-list { grid-template-columns: 1fr; }
  .fld-row { grid-template-columns: 1fr; }
  .bar-tel { display: none; }
  .engine { padding: 18px 16px; }
  .engine-tab { font-size: 10.5px; letter-spacing: 0.04em; }
  .aw-row { gap: 28px; }
  .aw-row img { height: 80px; }
  .actionbar { display: flex; }
  /* the action bar is fixed over the page, so the footer needs clearance */
  .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* the score pill becomes a full-width row rather than a fixed-width block */
  .rev-score { flex: 1 1 100%; justify-content: center; }
  .rev-head { gap: 18px; }
}

@media (max-width: 420px) {
  .wrap { padding-inline: 18px; }
  .band { padding-block: 34px; }
  .bar-in { gap: 10px; }
  .btn { padding: 12px 18px; font-size: 15px; }
  .btn-sm { padding: 9px 14px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .about-cta .btn, .final-cta .btn { flex: 1 1 100%; }
  .engine { padding: 16px 14px; }
  .fld-row .chip { padding: 4px 9px; font-size: 10.5px; }
  .answer-value { font-size: 34px; }
  .rev-score b { font-size: 34px; }
  .aw-row { gap: 20px; }
  .aw-row img { height: 64px; }
  .foot-col, .legal { word-break: break-word; }
  .cl-item { font-size: 14px; }
}

@media print {
  .bar, .actionbar, .hero-cta, .engine, .cl-actions { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .band { padding-block: 18pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =====================================================================
   Label typography
   HFG is a single-family Dunbar system. Every uppercase micro-label on
   this page renders in Dunbar Medium with wide tracking, which is the
   brand's eyebrow device. Numbers that sit in columns get tabular
   figures so they do not jitter while the calculator updates.
   ===================================================================== */

.eyebrow,
.hero-id-meta,
.hero-proof span,
.answer-label,
.answer-note,
.pb span,
.start-step,
.rev-cap,
.aw-h,
.cl-count,
.sens-h { font-weight: 500; }

.answer-value,
.pb b,
.hero-proof b,
.rev-score b,
.breakdown b,
.sens-p { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* =====================================================================
   Scenario engine tabs
   ===================================================================== */

.etabs {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}
.etab {
  flex: 1; appearance: none; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: var(--radius-pill);
  background: transparent; color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-label); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background 180ms cubic-bezier(0.2, 0, 0, 1), color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.etab:hover { color: #fff; }
.etab[aria-selected="true"] { background: var(--hfg-white); color: var(--hfg-blue); }
.etab:focus-visible { outline: 2px solid var(--hfg-lime); outline-offset: 2px; }

/* =====================================================================
   Rate sensitivity strip
   The number that answers "should I wait".
   ===================================================================== */

.sens { margin-top: 18px; }
.sens-h {
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 10px;
}
.sens-row {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
.sens-row li {
  text-align: center; padding: 9px 4px 10px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06); border: 1px solid transparent;
}
.sens-row li.is-current {
  background: rgba(215, 219, 0, 0.14); border-color: rgba(215, 219, 0, 0.5);
}
.sens-r {
  display: block; font-family: var(--font-label); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.66);
}
.sens-row li.is-current .sens-r { color: var(--hfg-lime); }
.sens-p {
  display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: #fff;
}
.sens-d {
  display: block; font-family: var(--font-label); font-size: 10.5px;
  color: rgba(255, 255, 255, 0.5); margin-top: 1px;
}
.sens-note {
  font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.5); margin-top: 8px;
}

/* =====================================================================
   Affordability panel
   ===================================================================== */

.breakdown-flat { margin-top: 14px; }
.breakdown-flat li { padding-left: 0; }
.breakdown-flat li .sw { display: none; }

/* =====================================================================
   Process
   ===================================================================== */

/* Five circles joined by a dashed rule, centred on the circles. The rule is
   drawn on the row rather than between items so it does not break when the
   grid wraps: a wrapped row simply draws its own shorter line. */
.steps {
  list-style: none; margin: 34px 0 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
  gap: 26px 14px; position: relative; text-align: center;
}
.steps li { counter-increment: step; position: relative; padding-top: 74px; }
/* the joining line, behind the circles */
.steps li::after {
  content: ""; position: absolute; top: 27px; left: 50%; width: 100%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--hfg-line-strong) 0 8px, transparent 8px 14px);
  z-index: 0;
}
.steps li:last-child::after { content: none; }
.steps li::before {
  content: counter(step); position: absolute; top: 0; left: 50%;
  transform: translateX(-50%); z-index: 1;
  width: 56px; height: 56px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 19px; font-weight: 800;
  background: var(--hfg-white); color: var(--hfg-blue);
  border: 2px solid var(--hfg-blue);
}
/* first is where you are, last is where you land */
.steps li:first-child::before {
  background: var(--hfg-lime); color: var(--hfg-blue-deep); border-color: var(--hfg-lime);
  box-shadow: 0 0 0 7px rgba(215, 219, 0, 0.22);
}
.steps li:last-child::before { background: var(--hfg-blue); color: var(--hfg-white); }
.steps li b {
  display: block; font-family: var(--font-display); font-size: 17px;
  font-weight: 700; color: var(--hfg-blue); margin-bottom: 6px;
}
.steps li span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--hfg-gray-dark); }


/* =====================================================================
   Mobile: the calculator comes first
   The premise of this page is that a borrower does something in the
   first few seconds. On a phone the hero copy is a full screen on its
   own, so the engine moves up directly under the headline, ahead of the
   lede, the buttons and the proof pills. The officer's name and photo
   still come first: the page has to say who is talking before it asks
   the visitor to type anything.
   ===================================================================== */

@media (max-width: 900px) {
  /* v1 put the calculator inside the hero and used display:contents here to
     interleave it with the copy. The calculator is its own section now, and
     .hero-id and .hero-proof no longer exist, so all that survived was an
     ordering that floated the photo card above the headline -- the card had
     no order and therefore sorted ahead of everything that did.
     Mobile order is simply DOM order: the headline leads, the card follows.
     The page still says who is talking first, because the sticky nav carries
     the officer's photo and name from the top of the page down. */
  .hero-in { gap: 28px; }
  .hero-card { margin-inline: 0; max-width: 320px; }

  /* three rate steps instead of five, current in the middle */
  .sens-row { grid-template-columns: repeat(3, 1fr); }
  .sens-row li:first-child, .sens-row li:last-child { display: none; }
}
}


/* =====================================================================
   Mailto fallback panel
   Appears only when a mail link goes nowhere. See site.js.
   ===================================================================== */

.mf {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(3, 39, 64, 0.55);
}
.mf[hidden] { display: none; }
.mf-card {
  position: relative; width: 100%; max-width: 440px;
  background: var(--hfg-white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift); padding: 28px 26px 22px;
}
.mf-card h3 { font-size: 20px; color: var(--hfg-blue); margin: 4px 0 14px; line-height: 1.25; }
.mf-x {
  position: absolute; top: 10px; right: 12px; appearance: none; border: 0; background: transparent;
  font-size: 26px; line-height: 1; color: var(--hfg-gray); cursor: pointer; padding: 4px 8px;
}
.mf-x:hover { color: var(--hfg-ink); }
.mf-addr {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--hfg-ink);
  word-break: break-all; padding: 12px 14px; background: var(--hfg-off-white);
  border: 1px solid var(--hfg-line); border-radius: var(--radius-sm); margin: 0 0 8px;
  user-select: all;
}
.mf-subj { font-size: 13.5px; color: var(--hfg-gray-dark); margin: 0 0 16px; }
.mf-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mf-note { font-size: 13px; color: var(--hfg-gray-dark); margin: 14px 0 0; }
@media (max-width: 420px) { .mf-actions .btn { flex: 1 1 100%; } }