/* Metrecx Solutions - site styles
   Palette sourced from the live metrecx.com Elementor kit:
   navy 23476B, teal 0D88B0, cyan 29BBF2, gold EFB82F */

:root {
  --navy: #23476B;
  --navy-deep: #17324D;
  --navy-ink: #0F2237;
  --teal: #0D88B0;
  --teal-dark: #0A6E8F;
  --cyan: #29BBF2;
  --cyan-soft: #E8F6FD;
  --gold: #EFB82F;
  --gold-dark: #B88A15;
  --gold-soft: #FDF4E0;

  --ink: #1A2330;
  --body: #4A5568;
  --muted: #6B7280;
  --line: #E2E8F0;
  --line-soft: #EEF2F7;
  --bg: #FFFFFF;
  --bg-soft: #F7F9FC;

  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15, 34, 55, .06), 0 1px 3px rgba(15, 34, 55, .08);
  --shadow: 0 4px 6px -1px rgba(15, 34, 55, .07), 0 12px 24px -8px rgba(15, 34, 55, .12);
  --shadow-lg: 0 12px 32px -8px rgba(15, 34, 55, .16);

  --wrap: 1140px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--navy-ink);
  line-height: 1.18;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.02em;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2rem); }
.narrow { max-width: 760px; }
.section { padding-block: var(--section-y); }
.section-soft { background: var(--bg-soft); }
.section-navy { background: var(--navy); color: #DCE6F1; }
.section-navy h2, .section-navy h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: .85rem;
}
.section-navy .eyebrow { color: var(--gold); }

.lede { font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem); color: var(--body); }
.section-navy .lede { color: #C6D5E6; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-size: 1rem; font-weight: 650; line-height: 1;
  padding: .95rem 1.6rem; border-radius: var(--radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--gold); color: var(--navy-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #E0A81C; color: var(--navy-ink); box-shadow: var(--shadow); }

.btn-navy { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); }
.btn-navy:hover { background: var(--navy-deep); color: #fff; box-shadow: var(--shadow); }

.btn-ghost { background: transparent; color: var(--navy); border-color: #C3D2E2; }
.btn-ghost:hover { background: #fff; border-color: var(--navy); color: var(--navy); }

.section-navy .btn-ghost { color: #fff; border-color: rgba(255,255,255,.42); }
.section-navy .btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }

.btn-sm { padding: .7rem 1.15rem; font-size: .9375rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.25rem; min-height: 84px; }

.brand { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.brand img { height: 52px; width: auto; display: block; }
@media (max-width: 600px) { .brand img { height: 42px; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.nav a {
  color: var(--navy-deep); text-decoration: none; font-weight: 550; font-size: .96rem;
  padding: .55rem .7rem; border-radius: 8px;
}
.nav a:hover { background: var(--bg-soft); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--teal-dark); background: var(--cyan-soft); }

/* Programs dropdown. The label is still a link to the hub; the chevron opens
   the four audience pages. Desktop opens on hover or keyboard focus, and the
   .open class covers touch, where there is no hover. */
.nav-item { position: relative; display: flex; align-items: center; }
/* The label and the chevron are two controls that have to read as one pill:
   the link keeps the left half of the radius, the button the right half. */
.nav-item.has-menu > a { padding-right: .35rem; border-radius: 8px 0 0 8px; }
.nav-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; padding: .55rem .55rem .55rem .15rem;
  background: none; border: 0; border-radius: 0 8px 8px 0;
  color: inherit; cursor: pointer;
}
.nav-item.has-menu:hover > a,
.nav-item.has-menu:hover > .nav-sub-toggle,
.nav-item.open > a,
.nav-item.open > .nav-sub-toggle { background: var(--bg-soft); }
.nav-item.has-menu > a.in-section,
.nav-item.has-menu > a[aria-current="page"],
.nav-item.has-menu > a.in-section + .nav-sub-toggle,
.nav-item.has-menu > a[aria-current="page"] + .nav-sub-toggle {
  background: var(--cyan-soft); color: var(--teal-dark);
}
.nav-sub-toggle svg { transition: transform .18s ease; }
.nav-item.open > .nav-sub-toggle svg { transform: rotate(180deg); }
.nav-menu {
  position: absolute; top: calc(100% + .3rem); left: 0; z-index: 60;
  min-width: 210px; display: none; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: .4rem; box-shadow: var(--shadow-lg);
}
.nav-item.open > .nav-menu { display: flex; }
.nav-menu a { display: block; white-space: nowrap; font-size: .95rem; font-weight: 550; line-height: 1.3; padding: .6rem .7rem; }
/* Programs stays lit while the reader is on any of its four pages. */
.nav a.in-section { color: var(--teal-dark); background: var(--cyan-soft); }
@media (min-width: 901px) {
  .nav-item.has-menu:hover > .nav-menu,
  .nav-item.has-menu:focus-within > .nav-menu { display: flex; }
  /* The menu sits .3rem below the nav item, and that gap used to be dead
     space: the pointer crossed it, :hover was lost, and the menu closed
     before anyone could reach an item in it. This bridges the gap with an
     invisible strip that belongs to the menu, so travelling straight down
     from the label never leaves the hover target. It only exists while the
     menu is open, because the menu itself is display:none until then. */
  .nav-item.has-menu > .nav-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -.45rem;
    height: .45rem;
  }
  .nav-item.has-menu:hover > .nav-sub-toggle svg,
  .nav-item.has-menu:focus-within > .nav-sub-toggle svg { transform: rotate(180deg); }
}
.header-cta { margin-left: .6rem; flex: 0 0 auto; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  width: 44px; height: 44px; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; position: relative;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 84px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 1rem clamp(1.15rem, 4vw, 2rem) 1.6rem;
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem .6rem; font-size: 1.05rem; }
  .nav-item { flex-wrap: wrap; }
  .nav-item.has-menu > a { flex: 1 1 auto; border-radius: 8px; padding-right: .6rem; }
  .nav-sub-toggle { margin: 0; padding: .8rem .8rem; border-radius: 8px; }
  .nav-item.has-menu:hover > a,
  .nav-item.has-menu:hover > .nav-sub-toggle { background: none; }
  .nav-menu {
    position: static; width: 100%; order: 3;
    background: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; box-shadow: none;
    margin: 0 0 .35rem .6rem; padding: 0 0 0 .5rem;
  }
  .nav-menu a { font-size: 1rem; padding: .65rem .6rem; }
  /* Apply Now sits outside the collapsible nav so it is visible at every width. */
  .header-cta { margin: 0 0 0 auto; }
  .nav-toggle { margin-left: .35rem; }
}
@media (max-width: 420px) {
  .header-cta { padding: .62rem .8rem; font-size: .875rem; }
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 480px at 88% -12%, rgba(41,187,242,.16), transparent 62%),
    radial-gradient(760px 420px at 4% 8%, rgba(239,184,47,.13), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
  padding-block: clamp(3.25rem, 7vw, 5.75rem);
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { max-width: 34em; }

.hero-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow-lg);
}
.hero-card h2 { font-size: 1.2rem; margin-bottom: 1.1rem; }
.hero-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.hero-card li { display: flex; gap: .7rem; align-items: flex-start; font-size: .98rem; color: var(--navy-deep); }

.tick { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; color: var(--teal); }
.tick-gold { color: var(--gold-dark); }

/* ---------- generic blocks ---------- */
.grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.5vw, 1.9rem); box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: #CFDDEB; }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--cyan-soft); color: var(--teal-dark);
  font-weight: 800; font-size: 1.1rem; margin-bottom: 1rem;
}
.section-navy .step-num { background: rgba(255,255,255,.12); color: var(--gold); }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist li span { color: var(--navy-deep); }
.section-navy .checklist li span { color: #DCE6F1; }

.note {
  border-left: 3px solid var(--gold); background: var(--gold-soft);
  padding: 1.05rem 1.3rem; border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--navy-deep); font-size: .98rem;
}

.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: .7rem; }
.cta-band .btn-row { justify-content: center; }

/* ---------- programs ---------- */
.program-card { display: flex; flex-direction: column; }
.program-card .fee {
  margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--line-soft);
  font-size: .9rem; font-weight: 650; color: var(--teal-dark);
}
/* Audience cards on the education hub are whole-card links. */
a.program-card { text-decoration: none; color: inherit; }
a.program-card h3 { color: var(--navy-ink); }
a.program-card .note {
  margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--line-soft);
  font-size: .9rem; font-weight: 650; color: var(--teal-dark);
}
a.program-card:hover .note { color: var(--navy-ink); }
a.program-card:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.program-card .tag {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-dark); background: var(--gold-soft);
  padding: .3rem .6rem; border-radius: 6px; margin-bottom: .8rem;
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; max-width: 860px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details[open] { border-color: #CFDDEB; box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 3rem 1.15rem 1.35rem;
  font-weight: 650; color: var(--navy-ink); position: relative; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .faq-body { padding: 0 1.35rem 1.35rem; }
.faq .faq-body p:first-child { margin-top: 0; }

.timeline { list-style: none; margin: .3rem 0 1.15rem; padding: 0; display: grid; gap: .5rem; }
.timeline li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .85rem; background: var(--bg-soft); border-radius: 8px; font-size: .96rem; }
.timeline li b { color: var(--navy-deep); font-weight: 650; }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 2.75rem); align-items: start; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.calc-fields { display: grid; gap: 1.15rem; }
.field label { display: block; font-weight: 650; color: var(--navy-ink); margin-bottom: .4rem; font-size: .95rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .affix { position: absolute; left: .95rem; color: var(--muted); font-weight: 600; pointer-events: none; }
.input-wrap .affix-right { left: auto; right: .95rem; }
.input-wrap.has-prefix input { padding-left: 2.1rem; }
.input-wrap.has-suffix input { padding-right: 2.4rem; }

.field input, .field select, .form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem .95rem; border: 1px solid #CBD5E1; border-radius: 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .form-field input:focus, .form-field textarea:focus, .field select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(41,187,242,.22);
}

.calc-result {
  background: var(--navy); color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow-lg);
}
.calc-result .label { font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: #A8C0D8; font-weight: 700; }
.calc-result .amount { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.1rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.1; margin: .35rem 0 .2rem; }
.calc-result .amount small { font-size: 1rem; font-weight: 600; color: #A8C0D8; letter-spacing: 0; }
.calc-breakdown { list-style: none; margin: 1.5rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255,255,255,.18); display: grid; gap: .7rem; }
.calc-breakdown li { display: flex; justify-content: space-between; gap: 1rem; font-size: .96rem; color: #C6D5E6; }
.calc-breakdown li b { color: #fff; font-weight: 650; }
.calc-disclaimer { margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; color: #A8C0D8; }
.calc-empty { color: #A8C0D8; font-size: .96rem; }

/* ---------- forms ---------- */
.form-grid { display: grid; gap: 1.15rem; max-width: 620px; }
.form-field label { display: block; font-weight: 650; color: var(--navy-ink); margin-bottom: .4rem; font-size: .95rem; }
.form-note { font-size: .9rem; color: var(--muted); }

/* ---------- glossary ---------- */
.alpha-index { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 2.5rem; }
.alpha-index a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-weight: 650; font-size: .92rem; text-decoration: none; color: var(--navy);
}
.alpha-index a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.glossary-group { margin-bottom: 2.75rem; scroll-margin-top: 96px; }
.glossary-group h2 {
  font-size: 1.5rem; color: var(--teal-dark);
  border-bottom: 2px solid var(--line); padding-bottom: .5rem; margin-bottom: 1.35rem;
}
.glossary-group dl { margin: 0; display: grid; gap: 1.15rem; }
.glossary-group dt { font-weight: 700; color: var(--navy-ink); margin-bottom: .2rem; }
.glossary-group dd { margin: 0; color: var(--body); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-ink); color: #A8C0D8; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); gap: clamp(1.75rem, 3.2vw, 2.5rem); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer .brand img { height: 60px; }
.site-footer h3 { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: #A8C0D8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.legal {
  margin-top: clamp(2.25rem, 5vw, 3.25rem); padding-top: 1.85rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .855rem; line-height: 1.7; color: #8FA9C4;
}
.legal p { max-width: 74ch; }
.eho { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.15rem; font-weight: 650; color: #C6D5E6; }
.eho svg { flex: 0 0 auto; }
.copyright { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; color: #7E97B2; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- legal documents (privacy, terms) ---------- */
.legal-toc { columns: 2; column-gap: 2rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.legal-toc li { break-inside: avoid; margin-bottom: .4rem; font-size: .93rem; }
.legal-toc a { color: var(--teal-dark); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 620px) { .legal-toc { columns: 1; } }

.legal-doc h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line); scroll-margin-top: 100px;
}
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc p { margin-bottom: 1.05rem; }
.legal-doc ul { margin: 0 0 1.05rem 1.1rem; padding: 0; }
.legal-doc li { margin-bottom: .6rem; }
.legal-doc .note { margin: 1.2rem 0; }

/* ---------- approved Human Guidance homepage ---------- */
.home-page {
  --hg-ink: #173B3A;
  --hg-deep: #0F302F;
  --hg-sage: #E5EEE9;
  --hg-paper: #FBFAF6;
  --hg-cream: #F3EEE4;
  --hg-coral: #A64F3A;
  --hg-muted: #5F706D;
  --hg-line: #CFDCD5;
  background: var(--hg-paper);
  color: var(--hg-ink);
  font-family: "DM Sans", var(--font);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-x: hidden;
}
.home-page .wrap {
  max-width: 1180px;
  padding-inline: 28px;
}
.home-page .site-header {
  height: 116px;
  position: relative;
  background: rgba(251,250,246,.86);
  border-bottom-color: rgba(23,59,58,.12);
}
.home-page .header-inner {
  min-height: 116px;
  gap: 34px;
}
.home-page .brand img {
  width: 150px;
  height: auto;
}
.home-page .nav {
  gap: 4px;
}
.home-page .nav a {
  padding: 13px 15px;
  border-radius: 8px;
  color: #2F4B47;
  font-size: 1.125rem;
  font-weight: 700;
}
.home-page .nav a:hover,
.home-page .nav a.in-section,
.home-page .nav a[aria-current="page"] {
  background: var(--hg-sage);
  color: var(--hg-ink);
}
.home-page .nav-item.has-menu:hover > a,
.home-page .nav-item.has-menu:hover > .nav-sub-toggle,
.home-page .nav-item.open > a,
.home-page .nav-item.open > .nav-sub-toggle,
.home-page .nav-item.has-menu > a.in-section + .nav-sub-toggle,
.home-page .nav-item.has-menu > a[aria-current="page"] + .nav-sub-toggle {
  background: var(--hg-sage);
  color: var(--hg-ink);
}
.home-page .nav-sub-toggle { padding: 13px 13px 13px 2px; }
/* The home nav runs a size larger; keep the submenu at reading size. */
.home-page .nav-menu a {
  font-size: 1rem;
  font-weight: 600;
  padding: .6rem .75rem;
}
.home-page .header-cta {
  margin-left: 12px;
}
.home-page .nav-toggle {
  width: 46px;
  height: 46px;
  border-color: var(--hg-line);
  color: var(--hg-ink);
}
.home-page .nav-toggle span,
.home-page .nav-toggle span::before,
.home-page .nav-toggle span::after {
  background: var(--hg-ink);
}
.home-page .hg-hero {
  position: relative;
  background: var(--hg-sage);
  padding: clamp(58px, 8vw, 104px) 0 86px;
}
.home-page .hg-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -100px;
  top: -140px;
  border-radius: 50%;
  background: #D8E8DF;
  opacity: .72;
}
.home-page .hg-hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(42px, 7vw, 100px);
  align-items: center;
  position: relative;
}
.home-page .hg-kicker,
.home-page .hg-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .8125rem;
  font-weight: 700;
}
.home-page .hg-kicker {
  color: #607771;
  margin-bottom: 22px;
}
.home-page .hg-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--hg-coral);
}
.home-page .hg-hero h1 {
  max-width: 650px;
  margin: 0 0 25px;
  color: var(--hg-deep);
  font: 500 clamp(2.8rem, 6.2vw, 5rem)/1.02 "Newsreader", Georgia, serif;
  letter-spacing: -.045em;
  /* Left to itself the rag steps down line after line and the whole
     headline reads as though it is tilting to the right. Balancing each
     sentence squares the right edge; the looser leading stops the
     ascenders and descenders interlocking, which sold the same illusion.
     Browsers without text-wrap: balance just get the old rag. */
  text-wrap: balance;
}
.home-page .hg-hero h1 em {
  display: block;
  color: var(--hg-coral);
  font-style: normal;
  text-wrap: balance;
}
.home-page .hg-lede {
  max-width: 620px;
  margin: 0;
  color: #506865;
  font-size: 1.4375rem;
  line-height: 1.65;
}
.home-page .hg-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.home-page .hg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 17px 24px;
  border: 0;
  border-radius: 7px;
  background: var(--hg-coral);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(201,109,82,.18);
  transition: transform .2s, background .2s, box-shadow .2s;
}
.home-page .hg-action:hover {
  transform: translateY(-2px);
  background: #8D3F2E;
  color: #fff;
  box-shadow: 0 12px 22px rgba(201,109,82,.25);
}
.home-page .hg-action-quiet {
  border: 1px solid #AEBFBA;
  background: transparent;
  color: var(--hg-ink);
  box-shadow: none;
}
.home-page .hg-action-quiet:hover {
  background: var(--hg-sage);
  color: var(--hg-ink);
  box-shadow: none;
}
.home-page .hg-rail {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 58px;
  color: #6A7B77;
  font-size: .8125rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.home-page .hg-rail span {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--hg-coral);
}
.home-page .hg-guide {
  padding: 34px;
  border: 1px solid rgba(23,59,58,.15);
  border-radius: 18px;
  background: rgba(251,250,246,.8);
  box-shadow: 0 22px 50px rgba(31,65,56,.12);
  transform: rotate(1deg);
}
.home-page .hg-guide-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 21px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hg-line);
}
.home-page .hg-guide h2 {
  max-width: 380px;
  margin: 0;
  color: var(--hg-deep);
  font: 500 2.125rem/1.15 "Newsreader", Georgia, serif;
}
.home-page .hg-guide-label {
  color: var(--hg-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-page .hg-reasons {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-page .hg-reasons li {
  display: flex;
  gap: 11px;
  color: #45605C;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.home-page .hg-reasons .tick {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: #D8E8DF;
  color: #2F7061;
}
.home-page .hg-guide-note {
  margin: 22px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--hg-line);
  color: #71807D;
  font-size: 1rem;
}
.home-page .hg-section {
  padding: clamp(76px, 10vw, 138px) 0;
}
.home-page .hg-section-grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(42px, 8vw, 130px);
}
.home-page .hg-label {
  color: var(--hg-coral);
}
.home-page .hg-section h2,
.home-page .hg-stand h2 {
  max-width: 650px;
  margin: 17px 0 26px;
  color: var(--hg-deep);
  font: 500 clamp(2.375rem, 4.5vw, 3.8125rem)/1.02 "Newsreader", Georgia, serif;
  letter-spacing: -.04em;
}
.home-page .hg-copy {
  max-width: 700px;
  color: var(--hg-muted);
  font-size: 1.3125rem;
  line-height: 1.75;
}
.home-page .hg-copy p {
  margin: 0 0 21px;
}
.home-page .hg-pull {
  margin-top: 30px;
  padding: 14px 0 14px 22px;
  border-left: 2px solid var(--hg-coral);
  color: var(--hg-ink);
  font: 500 1.6875rem/1.35 "Newsreader", Georgia, serif;
}
.home-page .hg-model {
  position: relative;
  background: var(--hg-cream);
}
.home-page .hg-model::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 8% 15%, rgba(201,109,82,.1), transparent 21%), radial-gradient(circle at 88% 80%, rgba(111,151,132,.13), transparent 24%);
  pointer-events: none;
}
.home-page .hg-model-inner {
  position: relative;
}
.home-page .hg-model-head {
  max-width: 690px;
  margin-bottom: 58px;
}
.home-page .hg-model h2 {
  max-width: 650px;
}
.home-page .hg-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid #C8D5CE;
  background: #C8D5CE;
}
.home-page .hg-step {
  min-height: 280px;
  padding: 29px;
  background: rgba(251,250,246,.68);
  transition: background .2s, transform .2s;
}
.home-page .hg-step:hover {
  background: var(--hg-paper);
  transform: translateY(-5px);
}
.home-page .hg-step-num {
  color: var(--hg-coral);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.home-page .hg-step h3 {
  margin: 48px 0 14px;
  color: var(--hg-deep);
  font: 500 1.875rem/1.08 "Newsreader", Georgia, serif;
}
.home-page .hg-step p {
  margin: 0;
  color: var(--hg-muted);
  font-size: 1.125rem;
}
.home-page .hg-note {
  max-width: 690px;
  margin: 28px 0 0;
  padding: 17px 21px;
  border-radius: 6px;
  background: #E4D8C7;
  color: #5A6158;
  font-size: 1.0625rem;
}
.home-page .hg-audience {
  background: var(--hg-deep);
  color: #D9E6DE;
}
.home-page .hg-audience-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(45px, 10vw, 150px);
  align-items: center;
}
.home-page .hg-audience h2 {
  max-width: 470px;
  color: #F6F1E8;
}
.home-page .hg-audience .hg-label {
  color: #E19A80;
}
.home-page .hg-audience .hg-copy {
  color: #B5CAC0;
}
.home-page .hg-audience-list {
  border-top: 1px solid rgba(221,237,226,.24);
}
.home-page .hg-audience-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(221,237,226,.24);
  color: #EDF3ED;
  font-size: 1.375rem;
  text-decoration: none;
}
.home-page .hg-audience-row small {
  margin-left: auto;
  color: #91AEA1;
  font-size: .8125rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-page .hg-audience-row .arrow-up-right {
  color: #E19A80;
  transition: transform .2s;
}
.home-page .hg-audience-row:hover {
  color: #fff;
}
.home-page .hg-audience-row:hover .arrow-up-right {
  transform: translate(4px, -4px);
}
.home-page .hg-stand {
  padding: 100px 0;
  background: #DCEAE2;
}
.home-page .hg-stand-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 45px;
}
.home-page .hg-stand h2 {
  max-width: 600px;
  margin-bottom: 0;
}
.home-page .hg-stand-copy {
  max-width: 500px;
  color: var(--hg-muted);
  font-size: 1.3125rem;
}
.home-page .hg-stand-copy p {
  margin: 0 0 25px;
}
.home-page .site-footer {
  background: #102F2E;
  color: #A9C0B6;
  padding: 75px 0 25px;
  font-size: 1.0625rem;
}
.home-page .footer-grid {
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 35px;
}
.home-page .site-footer .brand img {
  width: 150px;
  height: auto;
}
.home-page .site-footer h3 {
  margin: 4px 0 17px;
  color: #F2EEE5;
  font-size: .8125rem;
}
.home-page .site-footer ul {
  gap: 8px;
  font-size: 1rem;
}
.home-page .site-footer a {
  color: #A9C0B6;
}
.home-page .site-footer a:hover {
  color: #fff;
}
.home-page .legal {
  margin-top: 57px;
  padding-top: 24px;
  border-top-color: rgba(230,241,231,.16);
  color: #829F93;
  font-size: .9375rem;
  line-height: 1.75;
}
.home-page .eho {
  color: #D6E5DB;
}
.home-page .copyright {
  color: #6F8E82;
}
@media (max-width: 1080px) {
  .home-page .footer-grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .home-page .nav {
    position: absolute;
    inset: 116px 0 auto 0;
    z-index: 20;
    padding: 13px 28px 20px;
    flex-direction: column;
    align-items: stretch;
    background: var(--hg-paper);
    border-bottom: 1px solid var(--hg-line);
  }
  .home-page .nav a { padding: 12px 13px; }
  .home-page .hg-hero-grid,
  .home-page .hg-section-grid,
  .home-page .hg-audience-grid {
    grid-template-columns: 1fr;
  }
  .home-page .hg-hero { padding-top: 68px; }
  .home-page .hg-guide {
    max-width: 620px;
    transform: none;
  }
  .home-page .hg-steps { grid-template-columns: 1fr; }
  .home-page .hg-step { min-height: 0; }
  .home-page .hg-step h3 { margin-top: 26px; }
  .home-page .hg-stand-inner { display: block; }
  .home-page .hg-stand-copy { margin-top: 25px; }
  .home-page .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .home-page .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .home-page .wrap { padding-inline: 20px; }
  .home-page .site-header,
  .home-page .header-inner { min-height: 100px; height: 100px; }
  .home-page .header-inner { gap: 10px; }
  .home-page .nav { inset: 100px 0 auto 0; padding-inline: 20px; }
  .home-page .brand img { width: 132px; }
  .home-page .nav-toggle { width: 38px; height: 38px; }
  .home-page .header-cta { margin-left: 0; padding: 14px 16px; font-size: .9375rem; }
  .home-page .nav a { padding: 13px 10px; font-size: 1.125rem; }
  .home-page .hg-hero h1 { font-size: 3rem; }
  .home-page .hg-lede { font-size: 1.1875rem; }
  .home-page .hg-guide { padding: 22px; }
  .home-page .hg-guide h2 { font-size: 1.8125rem; }
  .home-page .hg-reasons li { font-size: 1.0625rem; }
  .home-page .hg-copy,
  .home-page .hg-stand-copy { font-size: 1.1875rem; }
  .home-page .hg-audience-row { font-size: 1.25rem; }
  .home-page .hg-section { padding: 75px 0; }
  .home-page .footer-grid { grid-template-columns: 1fr 1fr; }
  .home-page .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hg-action:hover,
  .home-page .hg-step:hover { transform: none; }
}

/* ---------- Human Guidance shared production pages ---------- */
.site-page:not(.home-page) {
  --hg-ink: #173B3A;
  --hg-deep: #0F302F;
  --hg-sage: #E5EEE9;
  --hg-paper: #FBFAF6;
  --hg-cream: #F3EEE4;
  --hg-coral: #A64F3A;
  --hg-muted: #5F706D;
  --hg-line: #CFDCD5;
  --navy: var(--hg-ink);
  --navy-deep: var(--hg-deep);
  --navy-ink: var(--hg-deep);
  --teal: #397566;
  --teal-dark: #2F7061;
  --cyan: var(--hg-coral);
  --cyan-soft: #DCEAE2;
  --gold: var(--hg-coral);
  --gold-dark: #A9533D;
  --gold-soft: #F1DED7;
  --ink: var(--hg-deep);
  --body: var(--hg-muted);
  --muted: #71807D;
  --line: var(--hg-line);
  --line-soft: #E3EAE6;
  --bg: var(--hg-paper);
  --bg-soft: var(--hg-cream);
  --radius: 7px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(31,65,56,.06);
  --shadow: 0 14px 30px rgba(31,65,56,.1);
  --shadow-lg: 0 22px 50px rgba(31,65,56,.12);
  --wrap: 1180px;
  --section-y: clamp(4.75rem, 9vw, 8rem);
  overflow-x: hidden;
  background: var(--hg-paper);
  color: var(--hg-muted);
  font-family: "DM Sans", var(--font);
  font-size: 1.125rem;
  line-height: 1.72;
}
.site-page:not(.home-page) .wrap {
  padding-inline: 28px;
}
.site-page:not(.home-page) .narrow {
  max-width: 820px;
}
.site-page:not(.home-page) h1,
.site-page:not(.home-page) h2,
.site-page:not(.home-page) h3,
.site-page:not(.home-page) h4 {
  color: var(--hg-deep);
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.035em;
}
.site-page:not(.home-page) h1 {
  font-size: clamp(3rem, 7vw, 5.25rem);
  line-height: .99;
}
.site-page:not(.home-page) h2 {
  font-size: clamp(2.25rem, 4.7vw, 3.75rem);
  line-height: 1.04;
}
.site-page:not(.home-page) h3 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.12;
}
.site-page:not(.home-page) h4 {
  font-size: 1.3rem;
}
.site-page:not(.home-page) p {
  margin-bottom: 1.35rem;
}
.site-page:not(.home-page) a {
  color: #2F7061;
}
.site-page:not(.home-page) a:hover {
  color: var(--hg-coral);
}
.site-page:not(.home-page) :focus-visible {
  outline-color: var(--hg-coral);
}
.site-page:not(.home-page) .site-header {
  position: relative;
  background: rgba(251,250,246,.9);
  border-bottom-color: rgba(23,59,58,.12);
}
.site-page:not(.home-page) .header-inner {
  min-height: 116px;
  gap: 34px;
}
.site-page:not(.home-page) .brand img {
  width: 150px;
  height: auto;
}
.site-page:not(.home-page) .nav {
  gap: 4px;
}
.site-page:not(.home-page) .nav a {
  padding: 13px 15px;
  border-radius: 8px;
  color: #2F4B47;
  font-size: 1.125rem;
  font-weight: 700;
}
.site-page:not(.home-page) .nav a:hover,
.site-page:not(.home-page) .nav a[aria-current="page"] {
  background: var(--hg-sage);
  color: var(--hg-ink);
}
.site-page:not(.home-page) .header-cta {
  margin-left: 12px;
}
.site-page:not(.home-page) .nav-toggle {
  width: 46px;
  height: 46px;
  border-color: var(--hg-line);
}
.site-page:not(.home-page) .nav-toggle span,
.site-page:not(.home-page) .nav-toggle span::before,
.site-page:not(.home-page) .nav-toggle span::after {
  background: var(--hg-ink);
}
.site-page:not(.home-page) .hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.75rem, 9vw, 8rem);
  border-bottom-color: rgba(23,59,58,.1);
  background: var(--hg-sage);
}
.site-page:not(.home-page) .hero::after {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -110px;
  top: -190px;
  border-radius: 50%;
  background: #D8E8DF;
  opacity: .75;
}
.site-page:not(.home-page) .hero .wrap {
  position: relative;
  z-index: 1;
}
.site-page:not(.home-page) .hero h1 {
  max-width: 900px;
  margin-bottom: 1.5rem;
  /* These headlines run two and three sentences at display size, which left
     to itself strands the last word alone on its own line. Balancing evens
     the rag out. Browsers without support just get the old rag. */
  text-wrap: balance;
}
.site-page:not(.home-page) .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.35rem;
  color: var(--hg-coral);
  font-size: .8125rem;
  letter-spacing: .14em;
}
.site-page:not(.home-page) .eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.site-page:not(.home-page) .lede {
  max-width: 720px;
  color: #506865;
  font-size: clamp(1.2rem, 2.2vw, 1.4375rem);
  line-height: 1.65;
}
.site-page:not(.home-page) .section-soft {
  background: var(--hg-cream);
}
.site-page:not(.home-page) .section-navy {
  background: var(--hg-deep);
  color: #B5CAC0;
}
.site-page:not(.home-page) .section-navy h2,
.site-page:not(.home-page) .section-navy h3 {
  color: #F6F1E8;
}
.site-page:not(.home-page) .section-navy .lede {
  color: #B5CAC0;
}
.site-page:not(.home-page) .section-navy .eyebrow {
  color: #E19A80;
}
/* Buttons are deliberately NOT scoped away from the home page. The Human
   Guidance palette was rolled out page by page and these rules used to carry
   :not(.home-page), which left --gold unremapped on the home page and rendered
   the same Apply Now button gold there and coral everywhere else. One button,
   one appearance, every page. --hg-coral is defined on .home-page too, so these
   resolve there. */
.site-page .btn {
  padding: 1.05rem 1.5rem;
  border-radius: 7px;
  font-size: 1.0625rem;
  font-weight: 700;
}
.site-page .btn-primary {
  background: var(--hg-coral);
  color: #fff;
  box-shadow: 0 8px 18px rgba(201,109,82,.18);
}
.site-page .btn-primary:hover {
  background: #8D3F2E;
  color: #fff;
  box-shadow: 0 12px 22px rgba(201,109,82,.25);
}
.site-page .btn-ghost {
  border-color: #AEBFBA;
  color: var(--hg-ink);
}
.site-page .btn-ghost:hover {
  border-color: var(--hg-ink);
  background: var(--hg-sage);
  color: var(--hg-ink);
}
.site-page .section-navy .btn-ghost {
  color: #F6F1E8;
  border-color: rgba(221,237,226,.45);
}
.site-page .section-navy .btn-ghost:hover {
  background: rgba(221,237,226,.1);
  border-color: #EDF3ED;
  color: #fff;
}

/* The generic inner-page link colour, `.site-page:not(.home-page) a`, has
   specificity (0,2,1) and outranks `.site-page .btn-*` at (0,2,0). That is why
   the Apply Now label rendered dark teal on coral on every page except the home
   page, where the link rule does not match at all. Qualifying these with `a`
   brings them to (0,2,1) and they win on source order. Keep the `a` if you
   touch them. */
.site-page a.btn-primary,
.site-page a.btn-primary:hover { color: #fff; }
.site-page a.btn-navy,
.site-page a.btn-navy:hover { color: #fff; }
.site-page a.btn-ghost,
.site-page a.btn-ghost:hover { color: var(--hg-ink); }
.site-page .section-navy a.btn-ghost { color: #F6F1E8; }
.site-page .section-navy a.btn-ghost:hover { color: #fff; }
.site-page:not(.home-page) .card,
.site-page:not(.home-page) .hero-card,
.site-page:not(.home-page) .faq details {
  border-color: rgba(23,59,58,.15);
  background: rgba(255,255,252,.78);
  box-shadow: var(--shadow-sm);
}
.site-page:not(.home-page) .card {
  padding: clamp(1.65rem, 3vw, 2.25rem);
}
.site-page:not(.home-page) .card:hover {
  border-color: #AEBFBA;
  box-shadow: var(--shadow);
}
.site-page:not(.home-page) .step-num {
  border-radius: 50%;
  background: #D8E8DF;
  color: #2F7061;
}
.site-page:not(.home-page) .checklist {
  gap: 1.1rem;
}
.site-page:not(.home-page) .checklist li {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--hg-line);
}
.site-page:not(.home-page) .checklist li span {
  color: var(--hg-ink);
}
.site-page:not(.home-page) .tick {
  margin-top: .2rem;
  padding: 4px;
  border-radius: 50%;
  background: #D8E8DF;
  color: #2F7061;
}
.site-page:not(.home-page) .note {
  border-left-color: var(--hg-coral);
  background: #E8DED0;
  color: #4E5F59;
}
.site-page:not(.home-page) .program-card .tag {
  color: var(--hg-coral);
  background: transparent;
  padding: 0;
  letter-spacing: .12em;
}
.site-page:not(.home-page) a.program-card .note {
  border-top-color: var(--hg-line);
  background: transparent;
  color: #2F7061;
}
.site-page:not(.home-page) .faq {
  max-width: 900px;
  gap: 1rem;
}
.site-page:not(.home-page) .faq summary {
  padding: 1.45rem 3.5rem 1.45rem 1.6rem;
  color: var(--hg-deep);
  font-size: 1.125rem;
}
.site-page:not(.home-page) .faq summary::after {
  border-color: var(--hg-coral);
}
.site-page:not(.home-page) .timeline li {
  padding: .8rem 1rem;
  background: var(--hg-sage);
}
.site-page:not(.home-page) .form-grid {
  gap: 1.35rem;
}
.site-page:not(.home-page) .form-field label,
.site-page:not(.home-page) .field label {
  color: var(--hg-deep);
  font-size: 1rem;
}
.site-page:not(.home-page) .field input,
.site-page:not(.home-page) .field select,
.site-page:not(.home-page) .form-field input,
.site-page:not(.home-page) .form-field textarea,
.site-page:not(.home-page) .form-field select {
  padding: .95rem 1rem;
  border-color: #B8C8C0;
  border-radius: 7px;
  background: #fffefa;
  font-size: 1.0625rem;
}
.site-page:not(.home-page) .field input:focus,
.site-page:not(.home-page) .field select:focus,
.site-page:not(.home-page) .form-field input:focus,
.site-page:not(.home-page) .form-field textarea:focus,
.site-page:not(.home-page) .form-field select:focus {
  border-color: var(--hg-coral);
  box-shadow: 0 0 0 3px rgba(201,109,82,.18);
}
.site-page:not(.home-page) .legal-toc a {
  color: #2F7061;
}
.site-page:not(.home-page) .legal-doc h2 {
  border-top-color: var(--hg-line);
}
.site-page:not(.home-page) .site-footer {
  padding: 75px 0 25px;
  background: #102F2E;
  color: #A9C0B6;
  font-size: 1.0625rem;
}
.site-page:not(.home-page) .footer-grid {
  grid-template-columns: 1.8fr repeat(4, 1fr);
  gap: 35px;
}
.site-page:not(.home-page) .site-footer .brand img {
  width: 150px;
  height: auto;
}
.site-page:not(.home-page) .site-footer h3 {
  margin: 4px 0 17px;
  color: #F2EEE5;
  font-family: "DM Sans", var(--font);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
}
.site-page:not(.home-page) .site-footer ul {
  gap: 8px;
  font-size: 1rem;
}
.site-page:not(.home-page) .site-footer a {
  color: #A9C0B6;
}
.site-page:not(.home-page) .site-footer a:hover {
  color: #fff;
}
.site-page:not(.home-page) .legal {
  margin-top: 57px;
  padding-top: 24px;
  border-top-color: rgba(230,241,231,.16);
  color: #829F93;
  font-size: .9375rem;
  line-height: 1.75;
}
.site-page:not(.home-page) .eho {
  color: #D6E5DB;
}
.site-page:not(.home-page) .copyright {
  color: #6F8E82;
}
@media (max-width: 1080px) {
  .site-page:not(.home-page) .footer-grid {
    grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .site-page:not(.home-page) .nav {
    position: absolute;
    inset: 116px 0 auto 0;
    z-index: 20;
    padding: 13px 28px 20px;
    background: var(--hg-paper);
    border-bottom: 1px solid var(--hg-line);
  }
  .site-page:not(.home-page) .nav a {
    padding: 12px 13px;
  }
  .site-page:not(.home-page) .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .site-page:not(.home-page) .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .site-page:not(.home-page) .wrap {
    padding-inline: 20px;
  }
  .site-page:not(.home-page) .header-inner {
    min-height: 100px;
    gap: 10px;
  }
  .site-page:not(.home-page) .brand img {
    width: 132px;
  }
  .site-page:not(.home-page) .nav {
    inset: 100px 0 auto 0;
    padding-inline: 20px;
  }
  .site-page:not(.home-page) .nav-toggle {
    width: 38px;
    height: 38px;
  }
  .site-page:not(.home-page) .header-cta {
    margin-left: 0;
    padding: 14px 16px;
    font-size: .9375rem;
  }
  .site-page:not(.home-page) .hero {
    padding-block: 4rem;
  }
  .site-page:not(.home-page) h1 {
    font-size: 3rem;
  }
  .site-page:not(.home-page) .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .site-page:not(.home-page) .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 360px) {
  .home-page .wrap,
  .site-page:not(.home-page) .wrap {
    padding-inline: 14px;
  }
  .home-page .header-inner,
  .site-page:not(.home-page) .header-inner {
    gap: 6px;
  }
  .home-page .brand img,
  .site-page:not(.home-page) .brand img {
    width: 105px;
  }
  .home-page .header-cta,
  .site-page:not(.home-page) .header-cta {
    padding: 11px 9px;
    font-size: .8125rem;
  }
}

/* ---------- application portal ---------- */

/* The progress rail is a real list of six named steps, not a bar with a
   percentage on it. People want to know what is still coming, and a bar at
   40% does not tell them that. */
.progress { margin-bottom: 2.75rem; }
.progress ol {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.progress-step {
  display: flex; align-items: center; gap: .55rem;
  flex: 1 1 auto; min-width: 0;
  padding: .6rem .85rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff;
  font-size: .86rem; line-height: 1.25; color: var(--muted);
}
.progress-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 24px; height: 24px;
  border-radius: 50%; background: var(--bg-soft); color: var(--muted);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.progress-label { min-width: 0; overflow-wrap: anywhere; }
.progress-step.is-done { border-color: var(--cyan-soft); background: var(--cyan-soft); color: var(--teal-dark); }
.progress-step.is-done .progress-num { background: var(--teal-dark); color: #fff; }
.progress-step.is-current { border-color: var(--navy); background: var(--navy); color: #fff; }
.progress-step.is-current .progress-num { background: var(--gold); color: var(--navy-ink); }

.portal-step[hidden] { display: none; }
.portal-step > .eyebrow { display: block; margin-bottom: .5rem; }
.portal-step > h2 { margin-top: 0; }
.portal-step > h2:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 4px; }
.step-lede { max-width: 62ch; color: var(--muted); margin-bottom: 2rem; }
.draft-note { margin: -1rem 0 1.75rem; }

/* Two columns at desktop so a fourteen field step does not read as a wall. */
.portal-step .form-grid {
  max-width: 880px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.5rem;
}
.portal-step .form-grid > .form-field:has(textarea) { grid-column: 1 / -1; }
.field-note { font-size: .85rem; color: var(--muted); margin: .35rem 0 0; }
.req { color: #B4231F; margin-left: .1rem; }
.has-error { border-color: #B4231F !important; background: #FEF6F6; }
.step-error {
  margin: 1.5rem 0 0; padding: .75rem 1rem;
  border-left: 3px solid #B4231F; background: #FEF6F6;
  color: #8A1B18; font-size: .92rem; font-weight: 600;
}

.step-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.btn-quiet {
  background: none; border: 0; padding: .5rem 0;
  color: var(--muted); font-size: .9rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.btn-quiet:hover { color: var(--navy); }
.btn-lg { font-size: 1.05rem; padding: .9rem 1.6rem; }

/* Consent is a decision, so it gets the weight of one rather than sitting in
   the run of fields as a stray checkbox. */
.consent-block { margin-top: 2rem; max-width: 700px; }
.cobuyer-switch { margin-bottom: 2rem; }
.consent { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.consent input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15rem;
  accent-color: var(--teal-dark); cursor: pointer;
}
.consent input.has-error { outline: 2px solid #B4231F; outline-offset: 2px; }
.consent > span { font-size: .93rem; line-height: 1.55; color: var(--navy-ink); }

.disclosure {
  max-width: 700px; margin: 1.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.disclosure h3 { font-size: 1.02rem; margin: 1.5rem 0 .4rem; color: var(--teal-dark); }
.disclosure h3:first-child { margin-top: 0; }
.disclosure p { font-size: .95rem; line-height: 1.6; margin: 0; }

/* ---------- borrower / co-borrower tabs ---------- */
.tab-strip {
  display: flex; gap: .3rem; margin-bottom: 2rem;
  border-bottom: 2px solid var(--line);
}
.tab {
  padding: .7rem 1.15rem; margin-bottom: -2px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: .96rem; font-weight: 650;
  cursor: pointer;
}
.tab:hover:not(.is-disabled) { color: var(--navy); }
.tab.is-active { color: var(--teal-dark); border-bottom-color: var(--teal-dark); }
.tab.is-disabled { opacity: .4; cursor: not-allowed; }
.tab-panel[hidden] { display: none; }
.tab-note { grid-column: 1 / -1; margin: 0 0 .5rem; }

.upload-card, .start-card {
  max-width: 700px; margin: 0 0 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--cyan-soft); border-radius: 12px;
}
.upload-card h3, .start-card h3 { margin-top: 0; }
.start-card { margin-bottom: 0; }

.portal-done { max-width: 640px; padding: 2.5rem 0; }

@media (max-width: 760px) {
  .portal-step .form-grid { grid-template-columns: minmax(0, 1fr); }
  .progress ol { gap: .3rem; }
  .progress-step { flex: 1 1 100%; padding: .5rem .7rem; }
  .progress-label { font-size: .85rem; }
  .step-nav { flex-direction: column; align-items: stretch; }
  .step-nav .btn { width: 100%; justify-content: center; }
  .disclosure, .upload-card, .start-card { padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   ACCOUNT AREA
   Sign in, the secure upload handoff, and the document checklist.
   -------------------------------------------------------------------------- */

.header-signin {
  flex: 0 0 auto;
  margin-left: .8rem;
  font-size: .9375rem;
  font-weight: 650;
  color: var(--hg-ink);
  text-decoration: none;
  padding: .55rem .2rem;
  border-bottom: 2px solid transparent;
}
.header-signin:hover,
.header-signin[aria-current="page"] { border-bottom-color: var(--hg-coral); }

@media (max-width: 900px) {
  .header-signin { margin-left: auto; }
  .site-page .header-cta { margin: 0 0 0 .5rem; }
}
@media (max-width: 420px) {
  .header-signin { font-size: .875rem; margin-left: auto; padding: .5rem .1rem; }
}

.auth-card {
  background: #fff;
  border: 1px solid var(--hg-line);
  border-radius: 18px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 34rem;
}
.auth-card h2 { margin-top: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.auth-card .btn { margin-top: .35rem; }
.auth-card .btn-quiet { display: block; margin-top: .75rem; padding-left: 0; }

.auth-message {
  margin-top: 1rem;
  max-width: 34rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border-left: 3px solid var(--hg-line);
  background: var(--hg-cream);
  font-size: .95rem;
}
.auth-message.is-error { border-left-color: var(--hg-coral); }
.auth-message.is-good { border-left-color: var(--hg-ink); }

.account-gate > .field-note { margin-top: 1.5rem; }

.account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--hg-line);
}
.account-email { margin: .15rem 0 0; font-weight: 650; font-size: 1.05rem; }

.account-panel {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.account-panel h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: .6rem; }

/* The upload area. This is a real uploader on this domain, not a link to
   somebody else's site dressed up to look like one, which is why there is
   no fake browser chrome around it any more. */
.upload-status {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--hg-line);
  background: var(--hg-cream);
  font-size: .9375rem;
  color: var(--hg-ink);
}
.upload-status.is-error { border-color: var(--hg-coral); color: var(--hg-coral); background: #fff; }
.upload-status.is-good { border-color: var(--hg-ink); background: var(--hg-sage); }

.doc-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .7rem; }
.doc-item {
  border: 1px solid var(--hg-line);
  border-radius: 14px;
  background: #fff;
  padding: 1.05rem 1.15rem;
  display: grid;
  gap: .75rem;
}
.doc-item.is-sent { background: var(--hg-sage); border-color: var(--hg-ink); }

.doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.doc-body { display: block; }
.doc-label { display: block; font-weight: 650; color: var(--hg-ink); }
.doc-note { display: block; margin-top: .2rem; font-size: .9rem; color: var(--hg-muted); }
.doc-stamp:not(:empty) {
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hg-ink);
  white-space: nowrap;
}

/* The drop target. The file input covers it rather than sitting inside it,
   so a click anywhere on the box opens the picker without a label/for
   dance, and a drag lands on the same rectangle the eye was aimed at. */
.drop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: .9rem 1rem;
  border: 1px dashed var(--hg-line);
  border-radius: 12px;
  background: var(--hg-paper);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.drop:hover, .drop:focus-visible, .drop.is-over {
  border-color: var(--hg-ink);
  background: var(--hg-cream);
  outline: none;
}
.drop.is-over { border-style: solid; }
.drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop-text { font-size: .9375rem; color: var(--hg-muted); }
.drop-text strong { color: var(--hg-ink); }

.doc-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.doc-files:empty { display: none; }
.doc-file {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem .8rem;
  border: 1px solid var(--hg-line);
  border-radius: 10px;
  background: var(--hg-paper);
  font-size: .9375rem;
}
.doc-file-name {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 600;
  color: var(--hg-ink);
  overflow-wrap: anywhere;
}
.doc-file-meta {
  flex: 0 0 auto;
  font-size: .8125rem;
  color: var(--hg-muted);
  font-variant-numeric: tabular-nums;
}
.doc-file-remove {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: .8125rem;
  font-weight: 650;
  color: var(--hg-coral);
  cursor: pointer;
  text-decoration: underline;
}
.doc-file-remove[disabled] { opacity: .5; cursor: default; }

/* The progress bar only exists while bytes are moving. */
.doc-file.is-uploading .doc-file-meta { flex: 1 1 8rem; }
.doc-file .bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--hg-line);
  overflow: hidden;
}
.doc-file .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hg-ink);
  transition: width .15s linear;
}

.doc-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  color: var(--hg-muted);
  cursor: pointer;
}
.doc-check input { width: 16px; height: 16px; flex: 0 0 auto; }

.app-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
.app-list li {
  border: 1px solid var(--hg-line);
  border-radius: 14px;
  background: #fff;
  padding: 1rem 1.15rem;
}
.app-name { display: block; font-weight: 650; color: var(--hg-ink); }
.app-meta { display: block; margin-top: .2rem; font-size: .9rem; color: var(--hg-muted); }

/* /begin is the campaign entrance and nothing but the widget. The embed
   SimpleCheck issues carries its own 96px bottom margin, so the section
   only pays for the space above it. */
.begin-section { padding-block: var(--section-y) 0; }

/* ==========================================================================
   Program pages
   Hero illustration, and the block types the program pages are built from.
   Everything here reads the Human Guidance tokens set on
   .site-page:not(.home-page) rather than restating colours, so these
   components follow the palette instead of pinning it.
   ========================================================================== */

.hero-split .hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-split .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  }
}
.hero-words { min-width: 0; }
.hero-split h1 { text-wrap: balance; }

.page-art {
  margin: 0;
  display: flex;
  justify-content: center;
}
.page-art img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--radius-lg);
}
/* On a narrow screen the illustration reads as decoration, so it goes
   first only if it is small enough not to push the headline off the
   screen. It is not, so it stays below the words. */
@media (max-width: 899px) {
  .page-art img { max-width: 320px; }
}

/* -- the four pillars on the hub page ------------------------------------ */

.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pillars { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.pillar h3 {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  letter-spacing: .01em;
  color: var(--ink);
}
.pillar p { margin: 0; font-size: .9375rem; line-height: 1.6; }

/* -- pull quote ----------------------------------------------------------- */

.pullquote {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 3px solid var(--gold);
  padding: .25rem 0 .25rem 1.25rem;
  margin-block: clamp(1.75rem, 3vw, 2.5rem);
  text-wrap: balance;
}

.fineprint {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 1.25rem;
}

/* -- numbered sequence ---------------------------------------------------- */
/* Numbered because these steps genuinely happen in this order and one of
   them has a hard constraint about when it must happen. */

.flow {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  position: relative;
}
.flow-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding-bottom: 1.75rem;
  position: relative;
}
.flow-step:last-child { padding-bottom: 0; }
/* The rail connecting the numbers. Drawn on the step rather than the list
   so it stops at the last number instead of running past it. */
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.flow-num {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cyan-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.flow-step h4 {
  margin: .3rem 0 .4rem;
  font-size: 1.0625rem;
  color: var(--ink);
}
.flow-step p { margin: 0; font-size: 1rem; line-height: 1.65; }

/* -- short definition cards ----------------------------------------------- */

.briefs {
  display: grid;
  gap: 1rem;
  margin-block: 1.75rem;
}
@media (min-width: 640px) { .briefs { grid-template-columns: repeat(2, 1fr); } }
.brief {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.375rem;
}
.brief h4 {
  margin: 0 0 .4rem;
  font-size: 1rem;
  color: var(--ink);
}
.brief p { margin: 0; font-size: .9375rem; line-height: 1.6; }

/* -- capital to equity comparison ---------------------------------------- */
/* Built from CSS rather than a generated image: these are figures, so they
   have to stay exact, stay sharp at any size, and follow the theme. */

.ratio {
  display: grid;
  gap: 1.25rem;
  margin-block: 2rem 0;
}
@media (min-width: 640px) { .ratio { grid-template-columns: repeat(2, 1fr); } }
.ratio-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Only one of the two is lifted, because only one of them is the point. */
.ratio-card.is-strong {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
}
.ratio-card h4 {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.ratio-meter {
  width: 58px;
  height: 132px;
  border-radius: 6px;
  background: var(--cyan-soft);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ratio-fill {
  width: 100%;
  background: var(--teal);
  border-radius: 0 0 6px 6px;
}
.ratio-card.is-strong .ratio-fill { background: var(--gold); }
.ratio-pct {
  margin: .875rem 0 .2rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ratio-cap {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 21ch;
}
.ratio-lines {
  margin: 0;
  width: 100%;
  border-top: 1px solid var(--line-soft);
  padding-top: .875rem;
  text-align: left;
}
.ratio-lines > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .3rem 0;
  font-size: .875rem;
}
.ratio-lines dt { margin: 0; color: var(--muted); }
.ratio-lines dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* -- timing table --------------------------------------------------------- */

.terms {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--line);
}
.term-row {
  display: grid;
  gap: .25rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) {
  .term-row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); }
}
.terms dt {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
}
.terms dd { margin: 0; font-size: 1rem; line-height: 1.6; }

/* -- bring / get back ----------------------------------------------------- */

.twocol {
  display: grid;
  gap: 1.25rem;
  margin-block: 1.75rem;
}
@media (min-width: 720px) { .twocol { grid-template-columns: repeat(2, 1fr); } }
.col-list {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--bg-soft);
}
.col-list.col-back {
  background: var(--bg);
  border: 1px solid var(--line);
}
.col-list h4 {
  margin: 0 0 .875rem;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.col-list ul { margin: 0; padding: 0; list-style: none; }
.col-list li {
  position: relative;
  padding: .4rem 0 .4rem 1.5rem;
  font-size: .9375rem;
  line-height: 1.55;
}
.col-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
.col-list.col-back li::before { background: var(--gold); }

/* -- questions and answers ------------------------------------------------ */

.qa { margin-top: 1.5rem; }
.qa-item {
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.qa-item:first-child { border-top: 1px solid var(--line); }
.qa-item h4 {
  margin: 0 0 .5rem;
  font-size: 1.0625rem;
  color: var(--ink);
  font-weight: 600;
}
.qa-item p { margin: 0; font-size: 1rem; line-height: 1.68; }

/* The CTA band inverts, so anything inside it that normally takes an ink
   colour has to be told otherwise. */
.section-navy .pullquote { color: #fff; border-left-color: var(--gold); }

/* The portal opens directly on the progress rail now that the hero is gone.
   A full section's worth of top padding under a sticky header reads as a
   blank screen, so the first section gets a shorter one. */
.portal-section-top { padding-block: clamp(2rem, 4vw, 3.25rem) var(--section-y); }

/* Page heading on the portal. Smaller than a hero h1: it is a label for
   where you are, not an argument for being here. */
.portal-title {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  margin: 0 0 1.75rem;
}

/* ---------- submit a buyer (agent and broker intake) ---------- */

/* This form is one screen rather than six steps, so the grouping has to do
   the work the step counter does on the portal: real fieldsets, a legend
   per group, and enough air between groups that the page reads as five
   short questions instead of one long interrogation. */
.intake-form { max-width: 880px; margin-top: 2.5rem; }

.intake-block {
  border: 0; padding: 0; margin: 0 0 3rem;
  min-width: 0; /* a fieldset will not shrink below its content otherwise */
}

.intake-block > legend {
  padding: 0; margin-bottom: .5rem;
  font-family: var(--font-display, inherit);
  font-size: 1.2rem; font-weight: 650; color: var(--navy-ink);
}

.intake-block > legend + .field-note { margin: 0 0 1.5rem; }
.intake-block > legend + .form-grid,
.intake-block > .field-note + .form-grid { margin-top: 1.25rem; }

/* Same two-column treatment the portal steps get, for the same reason:
   a single column of short answers reads as a much longer form than it is.
   Scoped here rather than shared with .portal-step because this page has
   no steps to hang that selector on. */
.intake-block .form-grid {
  max-width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.5rem;
}

.intake-block .form-grid > .form-field:has(textarea) { grid-column: 1 / -1; }

.checkset { border: 0; padding: 0; margin: 0; min-width: 0; }

.checkset > legend {
  padding: 0; margin-bottom: .5rem;
  font-size: 1.2rem; font-weight: 650; color: var(--navy-ink);
}

.checkset-grid {
  display: grid; gap: .65rem 1.5rem; margin-top: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The whole row is the target, not the 20px box. An agent filling this in
   on a phone between showings should not have to aim. */
.checkset-item {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.checkset-item:hover { border-color: var(--teal-dark); }
.checkset-item:has(input:checked) {
  border-color: var(--teal-dark); background: var(--cyan-soft);
}
.checkset-item:has(input:focus-visible) {
  outline: 2px solid var(--teal-dark); outline-offset: 2px;
}

.checkset-item input[type="checkbox"] {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem;
  accent-color: var(--teal-dark); cursor: pointer;
}

.checkset-item > span {
  font-size: .93rem; line-height: 1.5; color: var(--navy-ink);
}

/* The reference number is the entire product of this screen, so it gets
   the weight of a heading rather than sitting inside a sentence. */
.intake-done { max-width: 700px; margin-top: 2.5rem; }
.intake-done h2 { margin-top: 0; }
.intake-done h2:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 4px; }
.intake-done #submit-buyer-ref {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 1.05em; letter-spacing: .02em; color: var(--navy-ink);
}

.intake-flow { max-width: 68ch; margin: 2rem 0 2rem; padding-left: 1.3rem; }
.intake-flow > li { margin-bottom: 1.15rem; line-height: 1.7; }
.intake-flow > li strong { color: var(--navy-ink); }

@media (max-width: 720px) {
  .intake-block .form-grid,
  .checkset-grid { grid-template-columns: minmax(0, 1fr); }
}

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

/* A standfirst for a page whose h1 is a plain label rather than a sentence.
   "How It Works" wants naming, not arguing, so the sentence that used to be
   the headline sits underneath it instead. Kept in the display serif so it
   reads as a continuation of the title, and set well short of the body copy
   that follows so the two do not compete. */
.hero-deck {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.32;
  font-weight: 400;
  color: var(--hg-ink, var(--navy));
  max-width: 24em;
  margin: -0.4rem 0 1.4rem;
  text-wrap: balance;
}

/* The h1 above it was sized for a running sentence. A two or three word
   label at that size needs the gap under it closed up, or the deck reads as
   a separate thought rather than the second half of the same one. */
.site-page:not(.home-page) .hero h1 + .hero-deck { margin-top: -0.6rem; }

/* ---------- Home: the five buyer promises ----------
   From the one page buyer handout. A row on a wide screen, a stack on a
   phone. No fixed column count: five items do not divide evenly into a
   grid at any useful width, so this lets them wrap and stay even. */
.home-page .hg-promises {
  background: var(--hg-sage);
}
.home-page .hg-promise-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.home-page .hg-promise-row li {
  flex: 1 1 190px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  border-radius: 10px;
  background: var(--hg-paper);
  border: 1px solid var(--hg-line);
}
.home-page .hg-promise-row strong {
  color: var(--hg-deep);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}
.home-page .hg-promise-row span {
  color: var(--hg-muted);
  font-size: .9375rem;
  line-height: 1.55;
}

/* ---------- data tables ----------
   Buyer pathways and the direct-versus-Metrecx comparison. The wrapper
   scrolls rather than the page: four columns of short phrases will not fit
   at phone width, and a horizontal scrollbar on one element is much better
   than the whole page sliding sideways. */
.table-wrap {
  overflow-x: auto;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .9375rem;
}
.data-table th,
.data-table td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.5;
}
.data-table thead th {
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody td:first-child {
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .data-table { min-width: 520px; }
  .data-table th, .data-table td { padding: .7rem .8rem; }
}