/* ============================================================
   Honest Mortgage — SHARED site styles
   Loaded on every page (after colors_and_type.css).
   Holds: rounded buttons, injected header + footer chrome,
   and reusable page primitives (page-hero, prose, cards,
   process steps, CTA bands, forms, funnel, calculator).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--fg2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.section { padding: clamp(56px, 6.5vw, 88px) 0; }
.section--tight { padding: clamp(40px, 5vw, 60px) 0; }
.section--sand { background: var(--surface-sand); }
/* full-width navy section for two-column content (the centered variant is .band--navy) */
.section--navy { background: var(--navy); position: relative; overflow: hidden; }
.section--navy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 14%, rgba(126,181,227,0.16), transparent 48%); }
.section--navy > * { position: relative; }
.section--navy .eyebrow { color: var(--sky); }
.section--navy .shead h2 { color: #fff; }
/* the !important also overrides inline colour on prose spans */
.section--navy .shead p,
.section--navy .prose,
.section--navy .prose span { color: var(--fg-on-dark-2) !important; }
.center { text-align: center; }

/* ---- BUTTONS: rounded (pill) per brand mockup ---- */
.hm-btn { border-radius: var(--radius-pill); }

/* Primary CTA: pressable "solid edge" pill — a hard bottom edge that sinks on
   click (button treatment #4). Layered over the design-system button so the
   hover/active transforms override the base 1px lift. */
.hm-btn--primary { box-shadow: 0 5px 0 var(--terracotta-press), 0 12px 22px -8px rgba(0,44,89,.4); }
.hm-btn--primary:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--terracotta-press), 0 8px 16px -8px rgba(0,44,89,.4); }
.hm-btn--primary:active { transform: translateY(5px); box-shadow: 0 0 0 var(--terracotta-press); }

/* ---- shared accents ---- */
.eyebrow { font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 18px; }
.eyebrow--sky { color: var(--sky); }
.eyebrow--muted { color: var(--muted); }
.stars { display: inline-flex; gap: 3px; color: var(--terracotta); }
.stars svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.stars--sky { color: var(--sky); }

.shead { max-width: 62ch; }
.shead h2 { font-weight: 800; font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -0.025em; line-height: 1.06; color: var(--navy); margin: 0 0 18px; }
.shead p { font-size: 19px; line-height: 1.6; color: var(--fg2); margin: 0; }
.shead--light h2 { color: #fff; }
/* `.shead p` and `.band__inner p` out-rank `.eyebrow` (element + class beats
   a class), so eyebrows in section heads and CTA bands rendered as 19px body
   text — beside correct 12px ones on the same page — and sat flush on their
   heading or 32px off it. Put the designed eyebrow back; the modifiers need
   restating because `.shead p` / `.band--navy p` also beat them on colour. */
.shead .eyebrow, .band .eyebrow { font-size: 12px; line-height: 1.4; color: var(--terracotta); margin: 0 0 18px; max-width: none; }
.shead .eyebrow--sky, .band .eyebrow--sky { color: var(--sky); }
.shead .eyebrow--muted, .band .eyebrow--muted { color: var(--muted); }
.band__inner .eyebrow { margin-inline: auto; }
.shead--light p { color: var(--fg-on-dark-2); }

/* ============================================================
   HEADER (injected by chrome.js)
   ============================================================ */
/* Rate strip above the header (chrome.js rateStrip). Holds its 34px while
   loading so nothing below jumps; it scrolls away while the header sticks. */
.rate-strip { height: 34px; background: #011d38; border-bottom: 1px solid rgba(245,239,230,0.08); font-size: 13px; line-height: 1; }
.rate-strip .wrap { height: 100%; display: flex; align-items: center; justify-content: center; }
.rate-strip__link { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-on-dark-2); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s var(--ease); }
.rate-strip.is-ready .rate-strip__link { opacity: 1; }
.rate-strip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); flex: none; }
.rate-strip__fig { font-weight: 700; color: #fff; }
.rate-strip__apr { font-weight: 700; font-size: 11px; letter-spacing: .08em; color: var(--sky); }
.rate-strip__sep { color: rgba(245,239,230,0.4); }
.rate-strip__go { margin-left: 6px; font-weight: 600; color: var(--sky); }
/* Florida: wherever a rate appears, say it's subject to change. */
.rate-strip__note { font-size: 11.5px; color: rgba(245,239,230,0.6); }
.rate-strip__link:hover .rate-strip__go { text-decoration: underline; text-underline-offset: 3px; }
.rate-strip__link:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 480px) { .rate-strip { font-size: 12.5px; } .rate-strip__long { display: none; } .rate-strip__link { gap: 6px; } }
/* Phones and small tablets: with "Illustrative APR · Subject to change" the
   line runs past both edges below ~700px, so the note takes its own small line
   under the rate. The strip holds that 44px height while loading, so nothing
   below jumps when it fills. */
@media (max-width: 700px) {
  .rate-strip { height: 44px; }
  .rate-strip__link { flex-wrap: wrap; justify-content: center; row-gap: 3px; }
  .rate-strip__note { order: 9; flex-basis: 100%; text-align: center; font-size: 10.5px; line-height: 1; }   /* last, so the arrow stays on the rate line */
}
@media (prefers-reduced-motion: reduce) { .rate-strip__link { transition: none; } }
.site-header { position: sticky; top: 0; z-index: 70; background: var(--navy); border-bottom: 1px solid rgba(245,239,230,0.08); }
.site-header .wrap { height: 84px; display: flex; align-items: center; gap: 36px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* E1 — render the mark static at full contrast with clear space. It must
   never fade or animate in; the logo is not the place to spend motion. */
.brand img { height: 64px; width: auto; opacity: 1 !important; filter: none !important;
  animation: none !important; transition: none !important; transform: none !important; }
/* E1 clear space: the mark is 64px tall, so ~2 cap-heights of breathing room. */
.brand { padding: 6px 0; margin-right: 28px; }
.nav-primary { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.navitem { position: relative; }
.navitem > a, .navitem > button {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--cream);
  padding: 12px 16px; border-radius: 999px; text-decoration: none; transition: color var(--dur-fast) var(--ease);
}
.navitem > a:hover, .navitem > button:hover, .navitem.active > a, .navitem.active > button { color: var(--sky); }
.navitem svg.chev { width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease); }
.navitem:hover svg.chev { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 268px; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  border: 1px solid var(--rule); padding: 8px; opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.navitem:hover .dropdown, .navitem:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: 11px 14px; border-radius: 6px; font-size: 14.5px; font-weight: 500; color: var(--ink); text-decoration: none; transition: background var(--dur-fast) var(--ease); }
.dropdown a:hover { background: var(--cream); color: var(--navy); }
.dropdown a.cur { color: var(--terracotta); }
/* For professionals: agents and advisors side by side, each under a label.
   Anchored to the right edge, not centred — it sits next to the CTA, and a
   centred 500px panel would run off the screen on a laptop. */
.dropdown--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; min-width: 500px; }
.navitem--end .dropdown { left: auto; right: 0; transform: translateY(6px); }
.navitem--end:hover .dropdown, .navitem--end:focus-within .dropdown { transform: translateY(0); }
.dropdown__label { margin: 0; padding: 10px 14px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3, #6b7280); }
.nav-cta { margin-left: 12px; }
.nav-cta-bar { display: none; }   /* shown only while the nav is collapsed, below */
/* The narrowest phones: 96px between logo and menu icon, the button needs
   ~110px — trim the logo a little rather than squeeze the button. */
@media (max-width: 359px) {
  .site-header .brand img { height: 52px; }
  .site-header .nav-cta-bar { padding: 10px 13px; }   /* specific enough to beat the collapsed-nav rule that follows */
}
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--cream); cursor: pointer; padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* Five items plus the CTA fill a 1100px window with ~30px to spare, so the
   menu collapses at 1120 — earlier than the old three-dropdown bar (900) —
   leaving headroom for fonts that render slightly wider on other systems. */
@media (max-width: 1120px) {
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-primary.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 84px; left: 0; right: 0; background: var(--navy);
    /* Navy on the navy hero: a 1px hairline let the menu's end vanish into the
       page. A thick terracotta bar plus a drop shadow marks where it stops. */
    padding: 10px 28px 22px; border-bottom: 4px solid var(--terracotta); box-shadow: 0 18px 32px -12px rgba(0,16,34,0.6);
    max-height: calc(100vh - 84px); overflow-y: auto;
  }
  .nav-primary.open .navitem { width: 100%; }
  .nav-primary.open .navitem > a, .nav-primary.open .navitem > button { width: 100%; justify-content: space-between; padding: 16px 4px; border-bottom: 1px solid rgba(245,239,230,0.08); border-radius: 0; }
  .nav-primary.open .dropdown { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: transparent; box-shadow: none; border: 0; padding: 4px 0 12px 14px; }
  .nav-primary.open .dropdown a { color: var(--fg-on-dark-2); padding: 9px 8px; }
  .nav-primary.open .dropdown a:hover { background: transparent; color: #fff; }
  .nav-primary.open .navitem.open-sub .dropdown { display: block; }
  .nav-primary.open .navitem:not(.open-sub) .dropdown { display: none; }
  /* Get Started sits in the bar beside the menu icon (chrome.js nav-cta-bar),
     so it isn't repeated at the foot of the opened menu. */
  .nav-primary.open .nav-cta { display: none; }
  .site-header .wrap { gap: 10px; }
  .brand { margin-right: 0; }   /* the button's auto margin spaces it; 28px here pushed the icon off a 320px screen */
  .nav-cta-bar { display: inline-flex; margin-left: auto; padding: 11px 16px; min-height: 40px; white-space: nowrap; }
  .nav-cta-bar + .nav-toggle { margin-left: 0; }   /* the button takes the push right; without it (Get Started page) the icon keeps its own */
  .nav-primary.open .dropdown--cols { display: block; min-width: 0; }
  .nav-primary.open .navitem:not(.open-sub) .dropdown--cols { display: none; }
  .nav-primary.open .dropdown__label { color: var(--sky); padding: 12px 8px 4px; }
}
.fcol__label { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,239,230,0.5); }
.fcol__label:first-child { margin-top: 0; }

/* ============================================================
   FOOTER (injected by chrome.js)
   ============================================================ */
.site-footer { background: var(--navy); color: var(--fg-on-dark-2); padding: var(--space-7) 0 var(--space-5); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 40px; width: auto; margin-bottom: 20px; }
.footer__brand p { font-size: 15px; line-height: 1.6; max-width: 30ch; margin: 0 0 24px; }
.footer__brand .stars { color: var(--sky); }
.fcol h5 { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sky); font-weight: 700; }
.fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fcol a { text-decoration: none; font-size: 15px; color: var(--fg-on-dark-2); transition: color var(--dur-fast) var(--ease); }
.fcol a:hover { color: #fff; }
.footer__bottom { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--rule-dark); display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: space-between; }
.footer__legal { font-size: 13px; line-height: 1.6; color: rgba(245,239,230,0.6); max-width: 78ch; }
.footer__eho { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.footer__eho .eho-mark { height: 40px; width: 40px; flex: none; opacity: 0.9; color: var(--cream); }
.footer__eho img { height: 40px; width: auto; opacity: 0.9; }
.footer__eho span { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,239,230,0.6); }
/* "Powered by TKBS": the TKBS standard (as on Gold Standard Services). Own
   centred row at the very foot, hairline in the site's accent, tiny spaced
   caps, quiet until hovered. */
.footer__credit { margin-top: 28px; padding-top: 20px; text-align: center; border-top: 1px solid rgba(126,181,227,0.12); }
.footer__credit a { font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(245,239,230,0.4); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--sky); }

/* ============================================================
   PAGE HERO (subpages) — compact navy band
   ============================================================ */
.page-hero { position: relative; overflow: hidden; background: var(--navy); color: var(--cream); padding: clamp(56px, 8vw, 104px) 0 clamp(56px, 8vw, 96px); }
.page-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(circle at 14% 26%, rgba(126,181,227,0.20), transparent 46%), radial-gradient(circle at 92% 6%, rgba(201,107,76,0.12), transparent 42%); }
.page-hero .wrap { position: relative; }
.page-hero .eyebrow { color: var(--sky); }
.page-hero h1 { font-weight: 900; letter-spacing: -0.03em; line-height: 0.98; font-size: clamp(40px, 6.4vw, 80px); margin: 0; color: #fff; max-width: 18ch; }
.page-hero h1 .soft { color: var(--sky); }
.page-hero .lede { margin: 22px 0 0; max-width: 56ch; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: var(--fg-on-dark-2); font-weight: 400; }
.page-hero__actions { margin-top: 34px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.crumbs { font-size: 13px; letter-spacing: 0.04em; color: rgba(245,239,230,0.6); margin: 0 0 26px; }
.crumbs a { color: var(--sky); text-decoration: none; }

/* ============================================================
   PROSE + LAYOUT PRIMITIVES
   ============================================================ */
.measure { max-width: 68ch; }
.prose p { font-size: 18px; line-height: 1.65; color: var(--fg2); margin: 0 0 18px; }
.prose h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin: 40px 0 12px; }
.prose strong { color: var(--navy); }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.split--text-right > .split__media { order: -1; }
/* display:grid so the image STRETCHES to the box. With the default block
   layout, `height:100%` on the img cannot resolve against a *min*-height,
   so a short photo left a white band under itself. */
.split__media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); min-height: 380px; display: grid; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
/* photo with a caption along its foot (refinancing rate watch) */
.split__media--cap { position: relative; }
.media-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 48px 22px 18px; font-size: 15px; line-height: 1.5; color: var(--fg-on-dark-2); background: linear-gradient(to top, rgba(0,26,56,.88) 0%, rgba(0,26,56,.6) 60%, transparent); }
.media-cap b { display: block; font-size: 18px; color: #fff; margin-bottom: 2px; }
/* phones: the photo is ~230px tall, so an overlaid caption hid most of it —
   drop it beneath the photo as a navy band instead */
@media (max-width: 640px) {
  .split__media--cap { display: block; max-height: none; background: var(--navy); }
  .split__media--cap img { height: 220px; }
  .media-cap { position: static; padding: 16px 18px 18px; background: none; }
}

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.icard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 30px 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow-soft); }
.icard__icon { width: 46px; height: 46px; border-radius: var(--radius-card); display: grid; place-items: center; background: var(--sky-tint); color: var(--navy); }
.icard__icon svg { width: 24px; height: 24px; }
.icard--accent { border-top: 4px solid var(--terracotta); }
.icard h3, .icard h4 { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.icard p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--fg2); }
/* linked cards (a.icard) get a clickable hover lift */
a.icard { text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); }
a.icard:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--sky); }
/* temporary build note on cards that still need a real destination */

/* ============================================================
   PROMISE FRAMING — "We promise," leads each promise headline.
   The lead sits on its own line and carries the accent; the
   promise itself stays a single colour underneath it.
   ============================================================ */
.promise-h .wpromise { display: block; color: var(--terracotta); }
/* !important: `.hero h1 .soft` / `.page-hero h1 .soft` carry an element
   selector and would otherwise keep their sky tint mid-promise. */
.promise-h .soft { color: inherit !important; }
/* dark fields take the sky accent instead of terracotta */
.hero .promise-h .wpromise,
.chero .promise-h .wpromise,
.page-hero .promise-h .wpromise,
.people .promise-h .wpromise,
.rates-section .promise-h .wpromise,
.section--navy .promise-h .wpromise,
.band--navy .promise-h .wpromise { color: var(--sky); }
/* the warm poster is a terracotta gradient, so terracotta vanishes and sky only
   reaches ~1.9:1 — navy gets ~3.8:1 against the light end and reads cleanly. */
.poster--warm .promise-h .wpromise { color: var(--navy); }

/* Sections carrying a promise headline, and the accent each resolves to:
     poster--warm .......... navy        (terracotta gradient)
     people / page-hero /
     rates-section / chero . sky         (navy fields)
     section / --sand /
     band / final .......... terracotta  (light fields, the default above)
   Add new dark or coloured sections here, or the lead inherits terracotta. */

/* "Speak to a person" trigger bar (reusable, e.g. under the calculators) */
.talk-cta { display: inline-flex; align-items: center; gap: 12px; text-align: left; background: var(--navy); color: var(--cream); border: 0; border-radius: var(--radius-card); padding: 14px 20px; cursor: pointer; font-family: var(--font-sans); text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.talk-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,44,89,0.55); }
.talk-cta__ic { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--terracotta); color: #fff; }
.talk-cta__ic svg { width: 19px; height: 19px; }
.talk-cta__tx b { font-size: 15px; display: block; color: var(--cream); }
.talk-cta__tx span { font-size: 13px; color: var(--fg-on-dark-2); }

/* shared call-directory modal (Speak to a person) */
.cd-overlay { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,44,89,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cd-overlay.open { display: flex; }
.cd-modal { background: #fff; border-radius: var(--radius-card); max-width: 780px; width: 100%; max-height: 88vh; overflow-y: auto; overflow-x: hidden; padding: 28px clamp(20px, 4vw, 32px); position: relative; box-shadow: 0 30px 70px -20px rgba(0,44,89,0.5); }
.cd-close { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 30px; line-height: 1; color: var(--fg3); cursor: pointer; }
.cd-title { margin: 0 40px 6px 0; font-size: 24px; color: var(--navy); }
.cd-sub { margin: 0 0 12px; color: var(--fg2); font-size: 15px; }
.cd-note { margin: 0 0 16px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--terracotta); }
/* minmax(0,1fr): plain 1fr can't shrink below a card's content, which pushed
   the grid past the modal and raised a sideways scrollbar. */
.cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cd-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 12px 14px; }
.cd-ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sky-tint); }
.cd-meta { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; }
.cd-meta b { font-size: 15px; color: var(--navy); line-height: 1.2; }
.cd-meta span { font-size: 12.5px; color: var(--fg2); }
.cd-act { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cd-num { font-size: 12.5px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-call { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; background: var(--terracotta); color: #fff; text-decoration: none; font-weight: 700; font-size: 13.5px; padding: 9px 14px; border-radius: var(--radius-pill); box-shadow: var(--shadow-btn); transition: background var(--dur-fast) var(--ease); }
.cd-call:hover { background: var(--terracotta-press, #A64E33); }
.cd-call svg { width: 15px; height: 15px; }
.cd-mainline { margin-top: 16px; font-size: 14px; color: var(--fg2); }
.cd-mainline a { color: var(--terracotta); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) { .cd-grid { grid-template-columns: 1fr; } }
/* Phones: the button + number drop to their own row under the name. */
@media (max-width: 480px) {
  .cd-act { flex: 1 1 100%; margin-left: 0; align-items: stretch; }
  .cd-call { justify-content: center; }
  .cd-num { text-align: center; }
}

/* numbered process steps */
.steps { display: grid; gap: 4px; counter-reset: step; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 10px 0; border-bottom: 1px dotted var(--rule-dotted); align-items: start; }
.step:last-child { border-bottom: 0; }
.step__n { font-weight: 900; font-size: 30px; color: var(--terracotta); letter-spacing: -0.03em; line-height: 1; }
.step h4 { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--navy); }
.step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg2); max-width: 58ch; }

/* loan-type chips */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lpill { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 12px 22px; display: inline-flex; flex-direction: column; line-height: 1.2; box-shadow: var(--shadow-soft); }
.lpill b { color: var(--navy); font-size: 15px; }
.lpill span { color: var(--fg3); font-size: 12.5px; }

/* stat band */
.statband { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat__num { font-weight: 900; font-size: clamp(34px, 4vw, 50px); letter-spacing: -0.03em; color: var(--navy); line-height: 1; }
.stat__num--light { color: #fff; }
.stat__label { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--fg3); max-width: 22ch; }
.stat__label--light { color: var(--fg-on-dark-2); }

/* CTA band */
.band { background: var(--surface-warm); }
.band--navy { background: var(--navy); position: relative; overflow: hidden; }
.band--navy::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 84% 20%, rgba(126,181,227,0.16), transparent 46%); }
.band__inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
.band h2 { font-weight: 900; font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.03em; color: var(--navy); margin: 0 0 16px; }
.band--navy h2 { color: #fff; }
/* Scoped to the CTA block. As `.band p` it reached every paragraph in any
   section tinted with `.band` — FAQ answers, loan-option panels, cards — at
   19px with a centred 32px bottom margin (63px of dead space in an .icard). */
.band__inner p { font-size: 19px; color: var(--fg2); margin: 0 auto 32px; max-width: 52ch; }
.band--navy p { color: var(--fg-on-dark-2); }
.band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FORMS (refer, join, contact) + FUNNEL + CALCULATOR
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-weight: 600; font-size: 14px; color: var(--navy); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 16px; color: var(--ink); background: #fff;
  border: 1.5px solid var(--rule); border-radius: 10px; padding: 14px 16px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--sky); box-shadow: 0 0 0 4px var(--sky-tint); }
.field textarea { min-height: 120px; resize: vertical; }
/* row-gap 0: each .field already carries an 18px bottom margin, so when the
   pair stacks on a phone a row gap doubled it — fields alternated 36px/18px */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.form-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(28px, 4vw, 48px); }

/* funnel */
.funnel { max-width: 720px; margin: 0 auto; }
.progress { display: flex; align-items: center; gap: 8px; margin-bottom: 34px; }
.progress__step { flex: 1; height: 6px; border-radius: 999px; background: var(--sand-deep); transition: background var(--dur) var(--ease); }
.progress__step.done { background: var(--terracotta); }
.progress__label { text-align: center; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.fstep { display: none; }
.fstep.active { display: block; animation: fade .4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fstep h2 { font-weight: 800; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; color: var(--navy); margin: 0 0 8px; }
.fstep > p { font-size: 17px; color: var(--fg2); margin: 0 0 26px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { text-align: left; background: #fff; border: 1.5px solid var(--rule); border-radius: var(--radius-card); padding: 22px 22px 20px; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); font-family: var(--font-sans); }
.choice:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.choice.sel { border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-tint); }
.choice .choice__icon { color: var(--terracotta); margin-bottom: 10px; }
.choice .choice__icon svg { width: 28px; height: 28px; }
.choice b { display: block; color: var(--navy); font-size: 17px; margin-bottom: 4px; }
.choice span { font-size: 14px; color: var(--fg3); }
.fnav { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; gap: 16px; }
.fnav .back { background: none; border: 0; color: var(--muted); font-weight: 600; font-size: 15px; cursor: pointer; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 6px; }
.fnav .back:hover { color: var(--navy); }
.fdone { text-align: center; }
.fdone__check { width: 72px; height: 72px; border-radius: 999px; background: var(--terracotta-tint); color: var(--terracotta); display: grid; place-items: center; margin: 0 auto 24px; }
.fdone__check svg { width: 36px; height: 36px; }
.upload { margin-top: 28px; border: 2px dashed var(--sand-deep); border-radius: var(--radius-card); padding: 32px; text-align: center; background: var(--surface-warm); }
.upload svg { width: 32px; height: 32px; color: var(--navy); margin-bottom: 10px; }
.upload b { display: block; color: var(--navy); font-size: 16px; }
.upload span { font-size: 14px; color: var(--fg3); }

/* calculator */
.calc { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(28px, 4vw, 48px); }
.calc__controls { display: flex; flex-direction: column; gap: 26px; }
.crow { display: flex; flex-direction: column; gap: 10px; }
.crow__top { display: flex; justify-content: space-between; align-items: baseline; }
.crow__top label { font-weight: 600; font-size: 15px; color: var(--navy); }
.crow__val { font-weight: 700; font-size: 17px; color: var(--terracotta); }
.crow input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--sand-deep); outline: none; }
.crow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 999px; background: var(--terracotta); cursor: pointer; border: 3px solid #fff; box-shadow: var(--shadow-btn); }
.crow input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--terracotta); cursor: pointer; border: 3px solid #fff; }
.calc__result { background: var(--navy); border-radius: var(--radius-card); padding: 36px 32px; color: var(--cream); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.calc__result::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 10%, rgba(126,181,227,0.18), transparent 50%); }
.calc__result .lbl { position: relative; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); font-weight: 700; }
.calc__big { position: relative; font-weight: 900; font-size: clamp(44px, 6vw, 64px); letter-spacing: -0.03em; color: #fff; line-height: 1; margin: 10px 0 22px; }
.calc__break { position: relative; display: flex; flex-direction: column; gap: 12px; }
.calc__break div { display: flex; justify-content: space-between; font-size: 15px; color: var(--fg-on-dark-2); padding-bottom: 10px; border-bottom: 1px solid var(--rule-dark); }
.calc__break b { color: #fff; font-weight: 700; }
.calc__note { position: relative; margin-top: 20px; font-size: 13px; color: var(--fg-on-dark-2); line-height: 1.5; }

/* FAQ — native details/summary, AEO-friendly */
.faq { max-width: 880px; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; border-right: 2.5px solid var(--terracotta); border-bottom: 2.5px solid var(--terracotta); transform: rotate(45deg); transition: transform var(--dur) var(--ease); margin-top: -4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details[open] summary { padding-bottom: 8px; }
.faq__a { padding: 0 26px 24px; }
/* break-word: an email address in an answer is one long "word", and at 320px it ran past the card */
.faq__a p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--fg2); max-width: 64ch; overflow-wrap: break-word; }

/* tools grid (shared with home) */
.tools__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 26px 26px 24px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: transparent; }
.tool__icon { color: var(--navy); }
.tool__icon svg { width: 26px; height: 26px; }
.tool h4 { margin: 4px 0 0; font-size: 18px; font-weight: 700; color: var(--navy); }
.tool p { margin: 0; font-size: 14.5px; color: var(--fg3); }
.tool--feature { background: var(--navy); border-color: var(--navy); }
.tool--feature .tool__icon, .tool--feature h4 { color: #fff; }
.tool--feature p { color: var(--fg-on-dark-2); }

/* motion — cinematic shared reveal (rise + gentle blur lift) */
.reveal { opacity: 0; transform: translateY(30px); filter: blur(5px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; filter: none; }
/* directional + staggered variants (opt-in) */
.reveal--l { transform: translateX(-36px); }
.reveal--r { transform: translateX(36px); }
.reveal--l.in, .reveal--r.in { transform: none; }
.reveal[data-rd="1"].in { transition-delay: 0.09s; }
.reveal[data-rd="2"].in { transition-delay: 0.18s; }
.reveal[data-rd="3"].in { transition-delay: 0.27s; }
.reveal[data-rd="4"].in { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; } html { scroll-behavior: auto; } }

/* responsive */
@media (max-width: 980px) {
  .wrap { padding: 0 28px; }
  .split, .calc { grid-template-columns: 1fr; }
  .split__media { order: -1; max-height: 360px; min-height: 0; }
  .feature-grid, .feature-grid--2, .tools__grid { grid-template-columns: 1fr 1fr; }
  .statband { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .section { padding: var(--space-6) 0; }
  .feature-grid, .feature-grid--2, .tools__grid { grid-template-columns: 1fr; }
  /* four short stats stay 2×2 — one-up left half the band empty */
  .statband { gap: 28px 20px; }
  /* the navy CTA band runs straight into the navy footer: 64px + 96px of
     unbroken navy between the last button and the logo */
  .site-footer { padding-top: 48px; }
  .field-row { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .step { grid-template-columns: 40px 1fr; gap: 14px; }
}

/* ============================================================
   FEE COMPARISON — closing-cost chart (fee-compare.js)
   Typical lender vs. Honest Mortgage; waived fees strike through.
   ============================================================ */
.fc-table { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid var(--rule); overflow: hidden; }
.fc-row { display: grid; grid-template-columns: 1.7fr 1fr 1fr; align-items: stretch; }
.fc-row + .fc-row { border-top: 1px solid var(--rule); }
.fc-cell { padding: 13px 22px; }
/* Both figure columns centre vertically so every pair of numbers shares a
   baseline across the row. The "same — no markup" caption is pinned just
   below the Honest figure rather than stacked with it, so a caption on
   some rows can't push those numbers off-centre. */
.fc-cell--typ { text-align: right; display: flex; align-items: center; justify-content: flex-end; }
.fc-cell--honest { position: relative; text-align: right; background: var(--terracotta-tint); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.fc-label { display: block; font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.fc-note { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); }
.fc-tval { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy); }
.fc-tval.fc-strike { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted); opacity: 0.8; }
.fc-hval { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--terracotta); }
.fc-hval--same { color: var(--navy); font-weight: 700; }
.fc-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--terracotta); margin-top: 2px; }
.fc-same { position: absolute; right: 22px; top: calc(50% + 12px); font-size: 11px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.fc-row--head .fc-cell--label { display: flex; align-items: center; }
.fc-head-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fc-head-typ { font-size: 14px; font-weight: 700; color: var(--navy); }
.fc-cell--honesthead { background: var(--terracotta); align-items: flex-end; }
.fc-head-hm { display: block; font-size: 14px; font-weight: 800; color: #fff; }
.fc-head-hmsub { display: block; font-size: 11.5px; color: rgba(255,255,255,0.85); font-weight: 600; }
.fc-row--total { border-top: 2px solid var(--navy); background: var(--cream); align-items: center; }
.fc-total-lbl { font-size: 16.5px; font-weight: 800; color: var(--navy); }
.fc-total-typ { font-size: 22px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.fc-total-hm { font-size: 24px; font-weight: 900; color: var(--terracotta); font-variant-numeric: tabular-nums; }
.fc-row--total .fc-cell--honest { background: var(--terracotta-tint); }

.fc-savings { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--navy); border-radius: var(--radius-card); padding: 24px 30px; margin-top: 20px; position: relative; overflow: hidden; }
.fc-savings__glow { position: absolute; inset: 0; background: radial-gradient(circle at 90% 20%, rgba(201,107,76,0.2), transparent 50%); pointer-events: none; }
.fc-savings__body { position: relative; }
.fc-savings__lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sky); margin-bottom: 8px; }
.fc-savings__row { display: flex; align-items: baseline; gap: 14px; }
.fc-savings__big { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; color: var(--cream); font-variant-numeric: tabular-nums; }
.fc-savings__note { font-size: 15px; color: rgba(245,239,230,0.78); }
.fc-savings .hm-btn { position: relative; }
.fc-foot { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 14px 0 0; }

/* "Section A lender fees" — explains itself on hover, focus or tap with a
   card showing the real Section A from a sample Loan Estimate. */
.fc-sa { position: relative; display: inline-block; }
.fc-sa__trigger { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--navy); background: none; border: 0; padding: 0; cursor: help; text-align: left;
  display: inline-flex; align-items: center; gap: 5px; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: rgba(0,44,89,0.45); }
.fc-sa__ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* padding-top is an invisible bridge, so the pointer can travel from the
   label into the card without it closing */
.fc-sa__pop { position: absolute; left: -12px; top: 100%; z-index: 20; padding-top: 10px; width: min(340px, calc(100vw - 56px));
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility 0s linear .15s; }
.fc-sa.is-open .fc-sa__pop,
.fc-sa:focus-within:not(.is-dismissed) .fc-sa__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
  .fc-sa:hover:not(.is-dismissed) .fc-sa__pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.fc-sa__card { display: block; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 12px; text-decoration: none; text-transform: none; letter-spacing: normal; font-weight: 400; }
.fc-sa__card img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; }
.fc-sa__cap { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: var(--fg2); }
.fc-sa__src { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.fc-sa__go { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--terracotta); }
.fc-sa__card:hover .fc-sa__go { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .fc-sa__pop { transition: none; transform: none; } }

@media (max-width: 640px) {
  /* Every row is its own grid, so bare `fr` tracks sized to each row's own
     content and the columns drifted row to row (Underwriting, Title). minmax(0,…)
     gives every row identical columns; the smaller type keeps the $ totals
     inside them at 320px instead of being clipped by the table's overflow. */
  .fc-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fc-cell { padding: 14px 10px; }
  .fc-cell--typ, .fc-cell--honest { padding-left: 6px; }
  .fc-label, .fc-total-lbl { font-size: 15px; }
  .fc-tval, .fc-hval { font-size: 15px; }
  .fc-head-typ, .fc-head-hm { font-size: 13px; }
  .fc-total-typ { font-size: clamp(16px, 5vw, 20px); }
  .fc-total-hm { font-size: clamp(16px, 5.2vw, 22px); }
  .fc-note { display: none; }
  /* rows are one line tall here, so the pinned caption would spill out; the
     group label above already says "same either way" */
  .fc-same { display: none; }
  .fc-savings__big { font-size: 32px; }
  .fc-savings__lbl { letter-spacing: .12em; }  /* "…keep with us" left "US" alone on line two */
}
/* the narrowest phones: "Underwriting" is one word and needs ~100px */
@media (max-width: 360px) {
  .fc-row { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); }
  .fc-cell { padding-left: 8px; padding-right: 8px; }
  .fc-label, .fc-total-lbl { font-size: 14px; }
}

/* ============================================================
   RATES BOARD — "Rates, in the open." (rate-board.js) — navy section
   ============================================================ */
.rates-section { background: var(--navy); }
.rb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 40px; }
.rb-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sky); margin-bottom: 18px; }
.rb-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--terracotta); box-shadow: 0 0 0 4px rgba(201,107,76,0.25); }
.rb-title { font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; color: var(--cream); margin: 0; }
.rb-intro { font-size: 17px; line-height: 1.6; color: rgba(245,239,230,0.8); max-width: 42ch; margin: 0; }
.rb-type { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sky); margin-bottom: 14px; }
.rb-rate { font-size: 42px; font-weight: 900; letter-spacing: -0.03em; color: var(--cream); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.rb-pct { font-size: 0.5em; font-weight: 800; letter-spacing: 0; margin-left: 1px; }
.rb-footrow { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(245,239,230,0.12); }
.rb-disclaimer { font-size: 13px; line-height: 1.55; color: rgba(245,239,230,0.55); margin: 0; }
.rb-attr { margin-top: 8px; font-size: 12px; opacity: .8; }
.rb-attr a { color: rgba(245,239,230,0.92); text-decoration: underline; }

/* Option C (Sep 2026): the 30-year featured, a 12-month trend beside it.
   Sized by the board's own width, not the viewport, because the same board
   also sits inside the narrow funnel card — two columns only when there is
   room for them. */
.rb-c { container-type: inline-size; }
.rb-c__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: center; }
@container (min-width: 820px) {
  .rb-c__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(36px, 5vw, 64px); }
}
.rb-c--nochart .rb-c__grid { grid-template-columns: minmax(0, 1fr); }
.rb-rate--xl { font-size: clamp(36px, 5.2cqi, 58px); }
@container (min-width: 820px) { .rb-rate--xl { font-size: clamp(38px, 4.4cqi, 58px); } }
.rb-rate--sm { font-size: 26px; }
.rb-delta { display: inline-block; margin-top: 18px; padding: 6px 13px; border-radius: 999px; background: rgba(126,181,227,0.12);
  font-size: 14px; font-weight: 600; color: rgba(245,239,230,0.88); }
/* Loading: the layout holds its space but no figure shows until the live
   survey arrives (rate-board.js STATE). Feed down: a plain note instead. */
.rb-c--pending .rb-figs { visibility: hidden; }
.rb-down { margin: 28px 0 32px; max-width: 60ch; font-size: 17px; line-height: 1.6; color: rgba(245,239,230,0.88); }
.rb-down a { color: #fff; font-weight: 700; }
.rb-c__second { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(245,239,230,0.12); }
.rb-c__second .rb-type { margin-bottom: 10px; }
.rb-trend { margin: 0; }
.rb-trend svg { display: block; width: 100%; height: auto; overflow: visible; }
.rb-trend--wait { aspect-ratio: 560 / 300; max-width: 100%; }
.rb-grid { stroke: rgba(245,239,230,0.12); stroke-width: 1; }
.rb-axis { fill: rgba(245,239,230,0.55); font-size: 11px; font-family: var(--font-sans); }
/* The chart scales with its width, so on a phone 11 units renders ~7px.
   Larger units there keep the axis readable (~11px on screen). */
@container (max-width: 600px) { .rb-axis { font-size: 17px; } }
.rb-area { fill: rgba(201,107,76,0.12); stroke: none; }
.rb-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.rb-line--30 { stroke: var(--terracotta); stroke-width: 2.75; }
.rb-line--15 { stroke: var(--sky); stroke-width: 2; }
.rb-end { stroke: var(--navy); stroke-width: 2; }
.rb-end--30 { fill: var(--terracotta); }
.rb-end--15 { fill: var(--sky); }
.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12.5px; color: rgba(245,239,230,0.6); }
.rb-key::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.rb-key--30::before { background: var(--terracotta); }
.rb-key--15::before { background: var(--sky); }

/* fee-compare: lender-fee / third-party group labels (full-row so the pink
   Honest column stays continuous; label sits tight above its own fees) */
.fc-grouplbl { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fc-row--group .fc-cell { padding-top: 14px; padding-bottom: 2px; }
.fc-row--group + .fc-row { border-top: none; }

/* rate board: "no clickbait" promise banner (on the dark rates section) */
.rb-promise { display: block; background: rgba(126,181,227,0.14); border-left: 3px solid var(--sky); border-radius: 10px; padding: 14px 18px; margin: 0 0 26px; font-size: 15px; line-height: 1.55; color: var(--fg-on-dark-2); }
.rb-promise__tag { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--sky); margin-right: 8px; }

/* reusable "Our promise" banner for light sections */
.promise { display: block; background: rgba(126,181,227,0.12); border-left: 3px solid var(--sky); border-radius: 10px; padding: 14px 18px; margin: 0 0 28px; font-size: 15.5px; line-height: 1.55; color: var(--fg2); max-width: 72ch; }
.promise__tag { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 11px; color: var(--navy); margin-right: 8px; }

/* Advisor profile contact row (phone / email / states) */
.profile__contact { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; }
.profile__contact a, .profile__contact span { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); text-decoration: none; }
.profile__contact a:hover { color: var(--terracotta); }
.profile__contact span { color: var(--fg3); }
.profile__contact svg { width: 17px; height: 17px; color: var(--terracotta); }

/* E6 — guide cards with no destination yet: labelled, and the hover/lift
   affordance removed so nothing reads as clickable and dead-ends. */
.coming-soon { margin: 8px 0 0 !important; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted) !important; }
.icard:not(a):hover { transform: none; box-shadow: var(--shadow-soft); border-color: var(--rule); }

/* A7 — referral consent. Required to submit: the form posts via JS with a
   type=button, so the native `required` never fires and the check lives in the
   submit handler. This makes the requirement visible. */
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--fg2); cursor: pointer; }
.consent input { margin: 3px 0 0; width: 17px; height: 17px; flex: none; accent-color: var(--terracotta); cursor: pointer; }
.consent--missing { color: var(--terracotta); font-weight: 600; }
.consent--missing input { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* B14 — audience line on Refer, so a non-agent knows the page is for them too. */
.refer-audience { margin: 0 0 22px; font-size: 15.5px; line-height: 1.55; color: var(--fg2); font-weight: 600; max-width: 60ch; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }

/* Funnel/form validation feedback. The Continue button is never disabled —
   a disabled control with no styling reads as clickable and explains nothing —
   so missing fields are marked here instead. */
.field--error input, .field--error select, .field--error textarea { border-color: var(--terracotta) !important; box-shadow: 0 0 0 3px var(--terracotta-tint); }
.field--error label { color: var(--terracotta); }
.fmsg { margin: 4px 0 14px; font-size: 14px; font-weight: 600; color: var(--terracotta); }

/* ============================================================
   REVIEWS RAIL — shared by index.html and learn.html.
   Lives here, not in hm-rebuild.css: that file is loaded ONLY by the
   homepage, and Learn uses the same markup. Anything scoped to this
   component belongs in site.css or Learn renders it unstyled.
   ============================================================ */
.rev-google { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg2); text-decoration: none; font-weight: 600; }
.rev-google b { color: var(--navy); font-weight: 800; }
.rev-google__stars { color: var(--terracotta); letter-spacing: 1px; }
.rev-google:hover { color: var(--navy); }
/* Featured reviews carousel (hub-derived) — aggregate header + snap-scroll card rail */
.rev2-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 6px 0 26px; }
.rev2-head .rev-google { font-size: 15px; }
.rev2-head .rev-google b { font-size: 16px; }
.rev2-arrows { display: flex; gap: 10px; }
.rev2-arrows button { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--rule); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.rev2-arrows button:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.rev2-arrows svg { width: 20px; height: 20px; }
.rev2-rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 10px; }
.rev2-rail::-webkit-scrollbar { display: none; }

/* Homepage moving wall (reviews.js makeMarquee). The track holds the set
   twice only when the copy can never share the screen with its original. */
.rev2-marquee { scroll-snap-type: none; scroll-behavior: auto; }
.rev2-track { display: flex; gap: 22px; width: max-content; }
.rev2-marquee .rev2-card { scroll-snap-align: none; }
.rev2-marquee.is-moving { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rev2-marquee.is-moving .rev2-track { animation: rev2-drift var(--rev2-dur, 60s) linear infinite; }
/* Hover and keyboard focus both pause it, so a reader can stop on a review
   and a link never slides away mid-tab. Hover only where there is real
   hover: on a phone, :hover sticks after a tap, so the row stayed frozen
   after every swipe until you tapped somewhere else. */
@media (hover: hover) { .rev2-marquee.is-moving:hover .rev2-track { animation-play-state: paused; } }
.rev2-marquee.is-moving.is-dragging .rev2-track,
.rev2-marquee.is-moving:focus-within .rev2-track { animation-play-state: paused; }
/* While paused it can be grabbed and dragged (reviews.js wireDrag). */
.rev2-marquee.is-moving { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.rev2-marquee.is-moving.is-dragging { cursor: grabbing; }
@keyframes rev2-drift { to { transform: translateX(calc(-1 * var(--rev2-set, 0px))); } }
@media (prefers-reduced-motion: reduce) { .rev2-marquee .rev2-track { animation: none !important; } }
.rev2-marquee + .rev2-attrib { text-align: center; }
/* The four trust stats now live inside the reviews section (the standalone
   bar read as a stray band), separated by a hairline rather than a gap. */
.rev2-stats { margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--rule); }
/* Stat band: the four trust stats as quiet white cards on the sand, each with
   a soft shadow that lifts a little more on hover. Navy figures, the $ and +
   in terracotta. 2x2 on phones. */
.rev2-stats.statband { border-top: 0; padding-top: 0; gap: clamp(12px, 1.6vw, 18px); }
.statband .stat { position: relative; background: #fff; border: 1px solid rgba(0,44,89,0.07); border-radius: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(16px, 2vw, 24px);
  box-shadow: 0 1px 2px rgba(0,44,89,0.05), 0 14px 30px -20px rgba(0,44,89,0.28);
  transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease); }
@media (hover: hover) {
  .statband .stat:hover { transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(0,44,89,0.06), 0 22px 40px -22px rgba(0,44,89,0.36); }
}
.statband .stat__num { font-variant-numeric: tabular-nums; }
.statband .stat__unit { color: var(--terracotta); }
@media (max-width: 420px) {
  .statband .stat { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .statband .stat { transition: none; } .statband .stat:hover { transform: none; } }
.rev2-card { flex: 0 0 clamp(300px, 30vw, 380px); scroll-snap-align: start; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 34px -20px rgba(0,44,89,.14); }
/* Empty placeholder slots. With no quote inside, the card has nothing to give it
   height, so hold roughly a real review card's shape until the reviews land. */
/* The glyph is decoration, so it gets decoration's share of the space: the
   band was ~75px tall to show one quote mark, which pushed the actual
   review text below the fold of the card. */
.rev2-panel { background: linear-gradient(135deg, rgba(126,181,227,.22), rgba(0,44,89,.08));
  padding: 8px 26px 0; font-family: Georgia, "Times New Roman", serif; font-size: 36px; line-height: .78; color: var(--navy); }
.rev2-body { display: flex; flex-direction: column; flex: 1; padding: 14px 26px 24px; }
/* Now inline beside the reviewer's name, so it reads at caption scale. */
.rev2-stars { color: var(--terracotta); letter-spacing: 1px; font-size: 12.5px; line-height: 1; }
.rev2-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.rev2-body blockquote { margin: 0 0 20px; font-size: 16.5px; line-height: 1.5; color: var(--fg2); font-weight: 500; flex: 1 0 auto; }
.rev2-who { display: flex; align-items: center; gap: 12px; }
.rev2-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--cream);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.rev2-who cite { font-style: normal; font-size: 14px; color: var(--fg3); font-weight: 600; display: block; }
.rev2-who cite a { color: inherit; text-decoration: none; }
.rev2-who cite a:hover { text-decoration: underline; }
.rev2-when { font-size: 12.5px; color: var(--muted); }
.rev2-ava--img { object-fit: cover; }

/* Google's terms forbid editing review text, so long reviews are clamped
   visually only — the full text stays in the DOM and on the listing. */
.rev2-body blockquote { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Homepage: the two routes out of the reviews (the full wall, and the tools)
   sit in their own terracotta strip. Outline buttons wash out on terracotta,
   so both are solid: navy for the calculators, cream for the reviews. */
.section--terracotta { background: var(--terracotta); }
.cta-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hm-btn--navy { background: var(--navy); color: #fff; box-shadow: 0 10px 22px -10px rgba(0,20,45,.55); }
.hm-btn--navy:hover { background: var(--navy-hover); color: #fff; }
.hm-btn--cream { background: var(--cream); color: var(--navy); box-shadow: 0 10px 22px -10px rgba(0,20,45,.35); }
.hm-btn--cream:hover { background: #fff; color: var(--navy); }
.section--terracotta .hm-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (max-width: 520px) { .cta-strip .hm-btn { width: 100%; justify-content: center; } }

/* "Powered by Google" is required wherever Places data appears without a
   Google map on the same page. */
.rev2-attrib { margin: 14px 0 0; font-size: 12.5px; color: var(--fg3); }
.rev2-attrib a { color: var(--terracotta); }
.rev2-powered { white-space: nowrap; }

/* ---- Learn: the reviews WALL -------------------------------------------
   Same data as the homepage, different job. The rail teases: clamped cards
   you scroll sideways through. Learn is where someone arrives to actually
   read reviews, so the wall shows every one in FULL and lets each card be
   whatever height its words need. CSS columns give the stagger with no JS,
   no measuring pass, and no layout thrash on resize. */
.rev2-wall { columns: 2; column-gap: 24px; }
.rev2-wall .rev2-card {
  display: block; break-inside: avoid; margin: 0 0 24px;
  flex: none; width: auto;
  position: relative; overflow: visible;
  border-left: 3px solid var(--terracotta);
}
/* The rail's gradient band becomes an oversized glyph tucked in the corner:
   the same decorative note, without costing every card a fixed strip of
   height it has to fill. */
.rev2-wall .rev2-panel {
  position: absolute; top: 4px; right: 18px; z-index: 0;
  background: none; padding: 0;
  font-size: 64px; line-height: 1; color: var(--terracotta); opacity: .15;
}
.rev2-wall .rev2-body { position: relative; z-index: 1; padding: 24px 26px 22px; }
/* Nothing is hidden behind a scroll here, so nothing gets clamped. */
.rev2-wall .rev2-body blockquote {
  display: block; -webkit-line-clamp: none; overflow: visible; margin-bottom: 18px;
}
.rev2-wall @media (max-width: 900px) { .rev2-wall { columns: 1; } }

/* Portrait media in a split: let the image column match the height of the
   words beside it instead of sitting at its own 380px minimum. `.split` is
   centre-aligned by default, so the media never stretched — the override has
   to undo that on the grid, not just the child. */
.split--portrait { align-items: stretch; }
.split--portrait .split__media { min-height: 0; }
@media (max-width: 900px) {
  /* Stacked, a full-height portrait would be a wall of image. */
  .split--portrait .split__media { max-height: 420px; }
}

/* ---- "Speak to a person" bar -------------------------------------------
   Shared by the funnel (get-started) and the FAQ. Was scoped to #applyForm,
   which meant it could only ever work on one page. */
  /* "Speak to a person" full-width bar under the intent choices */
  .fperson { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--navy); color: var(--cream); border: 0; border-radius: var(--radius-card); padding: 16px 20px; cursor: pointer; font-family: var(--font-sans); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .fperson:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0,44,89,.55); }
  .fperson__ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--terracotta); color: #fff; }
  .fperson__ic svg { width: 20px; height: 20px; }
  .fperson__txt { display: flex; flex-direction: column; }
  .fperson__txt b { font-size: 16px; }
  .fperson__txt span { font-size: 13.5px; color: var(--fg-on-dark-2); }
  .fperson__arw { margin-left: auto; width: 18px; height: 18px; color: var(--cream); }

/* ============================================================
   KEYBOARD FOCUS — WCAG 2.4.7 (Level AA)
   Several custom controls set `outline: none` on the element itself, which
   removes the only cue a keyboard user has for where they are. :focus-visible
   restores it for keyboard navigation ONLY — it does not fire on mouse
   clicks, so the reason those outlines were removed still holds.

   Each rule below mirrors the selector that nulls the outline and adds
   :focus-visible, which raises specificity by one pseudo-class. That matters:
   site.css is NOT always the last stylesheet (clients.css and calculators.css
   load after it), so winning on source order alone would be luck.
   ============================================================ */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
}

/* The range sliders and the inline calculator value field each null the
   outline on the element, so they need the matching selector back. */
.cs-control input[type=range]:focus-visible,
.crow input[type=range]:focus-visible,
.cl2 input[type=range]:focus-visible,
.est input[type=range]:focus-visible,
.fc-slider:focus-visible,
input.cs-cval:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}

/* Terracotta on navy is too low-contrast to read as a focus ring. */
.site-header a:focus-visible, .site-header button:focus-visible,
.hero a:focus-visible, .hero button:focus-visible,
.band--navy a:focus-visible, .band--navy button:focus-visible,
.cs-result a:focus-visible, .cs-result button:focus-visible,
.site-footer a:focus-visible, .site-footer button:focus-visible,
.fperson:focus-visible, .est input[type=range]:focus-visible {
  outline-color: var(--sky);
}

/* Skip link — the first thing a keyboard user reaches, invisible otherwise. */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--terracotta); color: #fff;
  padding: 12px 18px; border-radius: 0 0 10px 10px;
  font-weight: 700; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* The choice tiles already use terracotta for the SELECTED answer (.choice.sel),
   so a terracotta focus ring would make a merely-focused tile look chosen.
   Navy keeps the two readable as different things.
   NOT .fperson — that bar is navy, so a navy ring would vanish; it keeps the
   sky ring set above. */
.choice:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* The dialog container takes focus on open so the title is announced first.
   It is a container, not a control, so it should not draw a focus ring. */
.cd-modal:focus { outline: none; }
.cd-modal:focus-visible { outline: none; }

/* Step headings receive focus when the funnel advances, so the new question is
   announced. They are headings, not controls — no ring. */
.fstep h2:focus, .fstep h2:focus-visible { outline: none; }

/* Rate + APR side by side. Reg Z 1026.24(f)(2)(ii) requires the APR with
   "equal prominence and in close proximity" to the advertised rate, so both
   use .rb-rate — same size, same weight, same colour. */
.rb-figs { display: flex; gap: clamp(16px, 3vw, 30px); align-items: flex-end; flex-wrap: wrap; }
.rb-fig { display: flex; flex-direction: column; gap: 5px; }
.rb-fig__lbl { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,239,230,0.6); }

/* The TCPA disclosure is a full paragraph where the referral form's consent is
   one line, so it needs to sit quieter. There is a floor here though: the
   disclosure has to stay "clear and conspicuous" to be valid consent, so this
   goes no smaller and keeps normal body colour rather than fading to grey. */
#tcpaWrap { font-size: 12.5px; line-height: 1.55; color: var(--fg3); align-items: flex-start; }
#tcpaWrap input { width: 15px; height: 15px; margin-top: 2px; }
#tcpaWrap.consent--missing { color: var(--terracotta); }


/* Learn resources: the ones you can actually open lead, and read as live.
   The unbuilt ones stay visible (they signal what is coming) but recede —
   quieter surface, muted icon, no hover lift, and a cursor that does not
   promise a click. Greying out the LIVE cards would have been the wrong way
   round; these are the ones that are not ready. */
.icard--soon { background: transparent; border-style: dashed; box-shadow: none; }
.icard--soon h4 { color: var(--fg3); }
.icard--soon p { color: var(--muted); }
.icard--soon .icard__icon { background: transparent; color: var(--muted); opacity: .75; }
.icard--soon:hover { transform: none; box-shadow: none; }

/* ============================================================
   SCROLL CUE — moved out of hm-rebuild.css, which ONLY the homepage
   loads. The Loan Estimate page uses the same component, so it was
   getting the markup and none of the styling. Third time this exact
   trap has bitten: anything reused across pages belongs here.

   Hidden by default; switched on only above 981px, where the homepage
   hero is tall enough to conceal the next section.
   ============================================================ */
.scrollcue {
  position: absolute; left: 50%; bottom: 20px; z-index: 2;
  display: none; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  color: var(--terracotta);
  border: 1.5px solid rgba(201,107,76,.55);
  background: rgba(201,107,76,.10);
  transform: translateX(-50%);
  transition: opacity .45s var(--ease), visibility .45s var(--ease), background .2s var(--ease);
}
.scrollcue:hover { background: rgba(201,107,76,.22); }
.scrollcue.is-gone { opacity: 0; visibility: hidden; }

/* Two separate animations: the nudge says "there is more", the glow draws
   the eye to it. Different durations so they drift out of phase and the
   pairing never reads as one mechanical loop. */
@keyframes cueNudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@keyframes cueGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,107,76,.34), 0 0 12px 0 rgba(201,107,76,.30); }
  50%      { box-shadow: 0 0 0 9px rgba(201,107,76,0), 0 0 22px 3px rgba(201,107,76,.55); }
}
@media (min-width: 981px) {
  .scrollcue { display: grid; animation: cueNudge 2.4s var(--ease) infinite, cueGlow 3.1s var(--ease) infinite; }
}
/* Still visible, just still — the cue is information, the motion is not. */
@media (prefers-reduced-motion: reduce) {
  .scrollcue { animation: none !important; box-shadow: 0 0 14px 1px rgba(201,107,76,.45); }
}



/* Careers form consent — same treatment as the funnel's. */
#joinTcpaWrap { font-size: 12.5px; line-height: 1.55; color: var(--fg3); align-items: flex-start; margin: 8px 0 16px; }
#joinTcpaWrap input { width: 15px; height: 15px; margin-top: 2px; }
#joinTcpaWrap.consent--missing { color: var(--terracotta); }