/* ============================================================
   VIADOR PARTNERS — Homepage (hp-) + intake wizard (wiz-)
   ------------------------------------------------------------
   Loaded AFTER styles.css. Every colour, font, radius, shadow and
   width below resolves to a token already defined in styles.css
   :root — nothing here introduces a new brand value.

     --cream #FFFFFF · --cream-dark #F2EDE6
     --ink #141210 · --ink-mid #2E2B27 · --ink-soft #52504C
     --gold #6B745E (olive-green primary) · --gold-light #D9A84A
     --line / --line-soft · --shadow-sm|md|lg · --max 1160px · --gap
     Inter via --font-display / --font-body

   Mobile-first: base rules are the small-screen layout; media
   queries scale up at 700px and 1000px.
   ============================================================ */

/* ── Local aliases (derived from tokens, not new brand values) ── */
:root {
  --hp-green:        var(--gold);            /* #6B745E */
  --hp-green-hover:  #8B9474;                /* existing nav hover value in styles.css */
  --hp-green-deep:   #454D3D;
  --hp-green-wash:   rgba(107, 116, 94, 0.07);
  --hp-green-line:   rgba(107, 116, 94, 0.22);
  --hp-r-sm: 10px;
  --hp-r:    16px;
  --hp-r-lg: 22px;
  --hp-pad:  clamp(52px, 8vw, 108px);
}

/* ── Shell ──────────────────────────────────────────────── */
.hp-wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.hp-section { padding-block: var(--hp-pad); }
.hp-section--tint { background: var(--cream-dark); }

.hp-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hp-green);
  margin-bottom: 18px;
  line-height: 1.4;
}
.hp-h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--ink);
}
.hp-lede {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: 16px;
}
.hp-section-head { margin-bottom: clamp(36px, 5vw, 56px); }

/* ── Buttons ────────────────────────────────────────────── */
.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--hp-r-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              color .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.hp-btn-primary {
  background: var(--hp-green);
  border-color: var(--hp-green);
  color: #fff;
  box-shadow: 0 2px 10px rgba(107,116,94,.24), 0 10px 26px rgba(107,116,94,.16);
}
.hp-btn-primary:hover {
  background: var(--hp-green-hover);
  border-color: var(--hp-green-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(107,116,94,.28), 0 16px 34px rgba(107,116,94,.2);
}
.hp-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-mid);
}
.hp-btn-ghost:hover { border-color: var(--hp-green); color: var(--hp-green); transform: translateY(-2px); }
.hp-btn-lg { padding: 19px 36px; font-size: 16px; }
.hp-btn:focus-visible,
.hp-choice:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 3px; }

/* ── Header ─────────────────────────────────────────────────
   The homepage uses the SITEWIDE canonical <header class="nav-wrap">
   markup and styling from styles.css — no homepage-specific nav
   component exists. The only addition here is pinning it, which is
   scoped to this page because home.css loads on the homepage alone.
   Everything visual (colours, type, dropdowns, 720px collapse) still
   comes from styles.css, so the nav is identical to every other page. */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 300;
}

/* ── Hero ───────────────────────────────────────────────── */
.hp-hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(107,116,94,.09) 0%, rgba(107,116,94,0) 58%),
    linear-gradient(180deg, var(--cream) 0%, #FBF9F5 100%);
  padding-block: clamp(48px, 8vw, 96px) clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.hp-hero-grid { display: grid; gap: clamp(40px, 6vw, 64px); align-items: center; }
.hp-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 7.4vw, 68px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
  max-width: 17ch;
  text-wrap: balance;
}
.hp-hero-sub {
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 22px;
  max-width: 48ch;
}
.hp-hero-cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
/* Full-bleed CTAs on small screens — ragged half-width buttons read as broken. */
@media (max-width: 559px) { .hp-hero-cta .hp-btn { width: 100%; } }

/* Credibility strip — experience-based. No ratings, no review scores. */
.hp-cred {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hp-cred-item { display: inline-flex; align-items: center; gap: 9px; }
.hp-cred-item svg { width: 17px; height: 17px; color: var(--hp-green); flex: 0 0 auto; }
.hp-cred-sep { color: var(--line); display: none; }
@media (min-width: 560px) { .hp-cred-sep { display: inline; } }

/* Hero media */
.hp-hero-media { position: relative; }
.hp-hero-media img {
  width: 100%;
  height: auto;
  border-radius: var(--hp-r-lg);
  box-shadow: var(--shadow-lg);
  display: block;
}
.hp-hero-media::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 58%;
  height: 58%;
  border-radius: var(--hp-r-lg);
  border: 1.5px solid var(--hp-green-line);
  z-index: -1;
}
@media (min-width: 1000px) {
  .hp-hero-grid { grid-template-columns: 1.06fr 0.94fr; }
}

/* ── Benefit band ───────────────────────────────────────── */
.hp-benefits { display: grid; gap: 18px; }
.hp-benefit {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--hp-r);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
}
.hp-benefit:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--hp-green-line); }
.hp-benefit-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--hp-green-wash);
  color: var(--hp-green);
  margin-bottom: 18px;
}
.hp-benefit-icon svg { width: 23px; height: 23px; }
.hp-benefit h3 {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.hp-benefit p { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 640px) { .hp-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-benefits { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

/* ── Program cards ──────────────────────────────────────── */
.hp-programs { display: grid; gap: 24px; }
.hp-program {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--hp-r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.hp-program:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.hp-program-img { aspect-ratio: 640 / 420; background: var(--cream-dark); overflow: hidden; }
.hp-program-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-program-body { padding: 26px 24px 8px; }
.hp-program h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.hp-program-desc { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Flexibility spec list — replaces the old rate block. Deliberately carries NO
   rate values, "as low as" framing, attribution or current-as-of disclaimer.
   Reuses the former rate block's container treatment so the cards look unchanged. */
.hp-specs {
  margin: 20px 24px 0;
  border: 1px solid var(--hp-green-line);
  border-radius: var(--hp-r-sm);
  background: var(--hp-green-wash);
  padding: 16px 18px;
  flex: 1;   /* absorb the card's free space so all three boxes end level and no gap sits above the CTA */
  display: flex;          /* let the list stretch to the stretched box... */
  flex-direction: column;
}
/* ...and spread the bullets across it, so a card whose bullets are all single-line
   fills the same vertical rhythm as one with a wrapped bullet instead of clustering
   at the top with dead space beneath.

   NOTE: equal-height rows (flex:1 on the li) were tried and are geometrically
   impossible here — flex items have min-height:auto, so a wrapped bullet holds
   55.6px while the box's content height is only ~160px (40px per row). Forcing it
   either clips text or requires ~60px taller cards. space-between is the best fit:
   bullets 1 and 4 align exactly across all three cards and no box has a bottom gap.
   Middle bullets offset by the wrapped line; removing that needs a content change. */
.hp-specs ul {
  list-style: none; margin: 0; padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hp-specs li {
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--hp-green-deep);
  font-weight: 600;
}
.hp-specs li + li { border-top: 1px solid rgba(107,116,94,.14); }
.hp-specs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hp-green);
}
.hp-program-cta { padding: 20px 24px 26px; margin-top: auto; }
.hp-program-cta .hp-btn { width: 100%; }

/* Advisory framing line above the cards */
.hp-advisory {
  max-width: 74ch;
  margin: 0 0 clamp(28px, 4vw, 40px);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  padding-left: 18px;
  border-left: 3px solid var(--hp-green-line);
}

.hp-programs-note {
  margin-top: 30px;
  max-width: 82ch;
  margin-inline: auto;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
/* ── "Also available" strip — one row of small tiles, deliberately not cards ── */
.hp-also {
  margin-top: clamp(30px, 4vw, 42px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}
.hp-also-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hp-also-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp-also-list li {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink-mid);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  padding: 9px 15px;
  white-space: nowrap;
}

/* ── Business-purpose band ─────────────────────────────── */
.hp-bpl {
  margin-top: clamp(34px, 5vw, 52px);
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--hp-green);
  border-radius: var(--hp-r);
  box-shadow: var(--shadow-sm);
  padding: clamp(24px, 3.6vw, 36px);
}
.hp-bpl-head {
  font-family: var(--font-display);
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.018em;
  font-weight: 700;
  color: var(--ink);
  max-width: 40ch;
}
.hp-bpl-body {
  margin-top: 12px;
  font-size: clamp(15px, 1.7vw, 16px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 72ch;
}
.hp-bpl-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--hp-green);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .18s var(--ease-out), gap .18s var(--ease-out);
}
.hp-bpl-link:hover { border-bottom-color: var(--hp-green); gap: 11px; }
.hp-bpl-link:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 3px; }

@media (min-width: 700px) { .hp-programs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .hp-programs { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

/* ── Wizard section ─────────────────────────────────────── */
/* scroll-margin clears the sticky canonical nav (18px pad ×2 + 46px mark ≈ 82px).
   #dealform is the legacy alias anchor targeted by ~180 sitewide CTAs. */
.hp-intake,
#dealform { scroll-margin-top: 96px; }
.hp-intake { background: var(--cream-dark); }
.hp-intake-inner { max-width: 780px; margin: 0 auto; }
.hp-intake-head { text-align: center; margin-bottom: 34px; }
.hp-intake-head .hp-lede { margin-inline: auto; }

.wiz {
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--hp-r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(24px, 4vw, 40px);
}
.wiz-head { margin-bottom: 26px; }
.wiz-prog-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.wiz-prog-count { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hp-green); }
.wiz-prog-label { font-size: 13px; color: var(--ink-soft); }
.wiz-prog { display: flex; gap: 6px; }
.wiz-seg { flex: 1; height: 5px; border-radius: 99px; background: rgba(20,18,16,.09); transition: background .3s var(--ease-out); }
.wiz-seg.is-done { background: var(--hp-green); }
.wiz-seg.is-current { background: var(--hp-green-hover); }

.wiz-q {
  font-family: var(--font-display);
  font-size: clamp(21px, 3.2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 700;
  color: var(--ink);
}
.wiz-q:focus { outline: none; }
.wiz-sub { margin-top: 9px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }

/* Step 1 — big tappable commitment cards */
.wiz-choices { display: grid; gap: 12px; margin-top: 26px; }
.wiz-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-height: 84px;
  justify-content: center;
  padding: 20px 22px;
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--hp-r);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out),
              transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.wiz-choice:hover {
  border-color: var(--hp-green);
  background: var(--hp-green-wash);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.wiz-choice.is-selected { border-color: var(--hp-green); background: var(--hp-green-wash); box-shadow: var(--shadow-sm); }
.wiz-choice-n { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.wiz-choice-t { font-size: 13.5px; color: var(--ink-soft); }
@media (min-width: 620px) { .wiz-choices { grid-template-columns: repeat(3, 1fr); gap: 14px; } }

/* Fields */
.wiz-grid { display: grid; gap: 16px; margin-top: 26px; }
@media (min-width: 620px) { .wiz-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .wiz-f.full { grid-column: 1 / -1; } }
.wiz-f { display: flex; flex-direction: column; gap: 7px; }
.wiz-f label { font-size: 13.5px; font-weight: 600; color: var(--ink-mid); letter-spacing: 0.005em; }
.wiz-opt { font-weight: 400; color: var(--ink-soft); font-size: 12px; }
.wiz-f input,
.wiz-f select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;               /* >=16px stops iOS zoom-on-focus */
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--hp-r-sm);
  padding: 14px 15px;
  transition: border-color .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.wiz-f select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2352504C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  padding-right: 40px;
}
.wiz-f input:focus,
.wiz-f select:focus { outline: none; border-color: var(--hp-green); box-shadow: 0 0 0 3px rgba(107,116,94,.16); }
.wiz-err { display: none; font-size: 12.5px; color: #A4423A; }
.wiz-f.is-invalid input,
.wiz-f.is-invalid select { border-color: #A4423A; }
.wiz-f.is-invalid .wiz-err { display: block; }

.wiz-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.wiz-consent input {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  margin-top: 2px;
  accent-color: var(--hp-green);
}
.wiz-consent a { color: var(--hp-green); text-decoration: underline; }
.wiz-err-consent { margin-top: 8px; }
.consent-invalid .wiz-err-consent { display: block; }

.wiz-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.wiz-next, .wiz-submit {
  flex: 1 1 auto;
  min-width: 180px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1;
  padding: 17px 30px;
  border-radius: var(--hp-r-sm);
  border: 1.5px solid var(--hp-green);
  background: var(--hp-green);
  color: #fff;
  cursor: pointer;
  transition: background .18s var(--ease-out), transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  box-shadow: 0 2px 10px rgba(107,116,94,.22);
}
.wiz-next:hover, .wiz-submit:hover:not(:disabled) {
  background: var(--hp-green-hover); border-color: var(--hp-green-hover);
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(107,116,94,.28);
}
.wiz-submit:disabled { opacity: .6; cursor: default; }
.wiz-back {
  order: -1;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 15px; font-weight: 500; line-height: 1;
  padding: 16px 22px;
  border-radius: var(--hp-r-sm);
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.wiz-back:hover { border-color: var(--ink-soft); color: var(--ink); }
.wiz-next:focus-visible, .wiz-back:focus-visible, .wiz-submit:focus-visible { outline: 3px solid var(--hp-green); outline-offset: 3px; }

.wiz-status { margin-top: 14px; font-size: 14px; line-height: 1.55; }
.wiz-status.is-err { color: #A4423A; }

.wiz-done { text-align: center; padding-block: 12px; }
.wiz-done-mark {
  width: 58px; height: 58px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hp-green-wash);
  color: var(--hp-green);
}
.wiz-done-mark svg { width: 27px; height: 27px; }
.wiz-done .wiz-sub { margin-inline: auto; max-width: 46ch; }
.wiz-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

.wiz-foot {
  margin-top: 22px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ── Trust band ─────────────────────────────────────────── */
.hp-trust-card {
  display: grid;
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: var(--hp-r-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 5vw, 52px);
}
.hp-trust-photo { justify-self: center; max-width: 260px; width: 100%; }
.hp-trust-photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--hp-r-lg);
  box-shadow: var(--shadow-md);
}
.hp-trust h2 { margin-top: 4px; }
.hp-trust-blurb { margin-top: 18px; font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 58ch; }
.hp-trust-sig { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.hp-trust-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.014em; }
.hp-trust-role { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
@media (min-width: 820px) { .hp-trust-card { grid-template-columns: 280px 1fr; } }

/* The .hp-compliance strip was removed — the disclaimer now lives only in the
   footer (.hp-footer-legal), so no styles are needed for it here. */

/* ── Footer ─────────────────────────────────────────────── */
.hp-footer { background: #1F2326; color: rgba(255,255,255,0.72); padding-block: clamp(48px, 6vw, 72px) 32px; }
.hp-footer-top { display: grid; gap: 36px; }
.hp-footer-brand img { height: 34px; width: auto; }
.hp-footer-tagline { margin-top: 14px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 34ch; }
.hp-footer-cta { margin-top: 22px; }
.hp-footer-col h4 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 14px;
}
.hp-footer-col a {
  display: block; font-size: 14.5px; line-height: 1.5; padding: 5px 0;
  color: rgba(255,255,255,0.74); text-decoration: none; transition: color .15s;
}
.hp-footer-col a:hover { color: #fff; }
.hp-social { display: flex; gap: 10px; margin-top: 18px; }
.hp-social a {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 9px;
  color: rgba(255,255,255,0.74); transition: border-color .15s, color .15s, background .15s;
}
.hp-social a:hover { border-color: rgba(255,255,255,0.4); color: #fff; background: rgba(255,255,255,0.05); }
.hp-social svg { width: 17px; height: 17px; }
.hp-footer-bottom {
  margin-top: 42px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center;
}
.hp-footer-legal { font-size: 12.5px; line-height: 1.7; color: rgba(255,255,255,0.55); }
.hp-footer-links { display: flex; gap: 18px; font-size: 12.5px; }
.hp-footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; }
.hp-footer-links a:hover { color: #fff; text-decoration: underline; }
@media (min-width: 700px) { .hp-footer-top { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1000px) { .hp-footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; } }

/* ── Motion / accessibility ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hp-btn:hover, .hp-benefit:hover, .hp-program:hover, .wiz-choice:hover,
  .wiz-next:hover, .wiz-submit:hover { transform: none; }
}
.hp-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--hp-green); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--hp-r-sm) 0; z-index: 500; font-size: 14px; font-weight: 600;
}
.hp-skip:focus { left: 0; }

/* ── Long-form prose (anchor pages) ────────────────────────
   styles.css resets every margin, and every hp- rule above is a component,
   so a page built on home.css with NO page-scoped <style> has nothing to
   space paragraphs, lists or h3s in a run of article copy. This block is the
   one place that owns that. First consumer: /can-a-foreigner-buy-property-in-the-us.
   Every value resolves to an existing token; nothing new is introduced. */
.hp-prose { max-width: 70ch; }
.hp-prose p,
.hp-prose ul,
.hp-prose ol {
  margin-top: 18px;
  font-size: clamp(16px, 1.9vw, 18px);
  line-height: 1.7;
  color: var(--ink-mid);
}
.hp-prose ul,
.hp-prose ol { padding-left: 1.3em; }
.hp-prose li + li { margin-top: 8px; }
.hp-prose h3 {
  margin-top: 32px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.3;
  letter-spacing: -0.014em;
  font-weight: 700;
  color: var(--ink);
}
.hp-prose a { color: var(--hp-green); text-decoration: underline; text-underline-offset: 2px; }
.hp-prose a:hover { color: var(--hp-green-deep); }
.hp-prose strong { color: var(--ink); font-weight: 600; }

/* ── fn question set — module classes it emits ──────────────
   assets/wizard.js's "fn" set renders .wiz-choices-stack and .wiz-choice-lab.
   Until now their only rules lived in /foreign-national-loans's page-scoped
   <style>, so any other surface mounting the fn set got an unstyled step 1.
   These belong to the module, so they live here. Placed after the 620px
   3-up rule above so the stack wins at every width (same specificity). */
.wiz-choices-stack { grid-template-columns: 1fr; }
.wiz-choice-lab {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* ── Prose table (FN anchor page comparison table) ─────────────────────
   styles.css resets table spacing, so .hp-prose needs its own table rules.
   Scoped to .hp-table; nothing else on the site uses it. */
.hp-table-wrap { overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.hp-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; min-width: 640px; }
.hp-table caption { text-align: left; font-size: 13px; color: var(--ink-soft); padding: 0 0 10px; caption-side: top; }
.hp-table th, .hp-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line, #E5E0D8); }
.hp-table thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); background: var(--cream-dark, #F2EDE6); }
.hp-table tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.hp-table tbody tr:last-child th, .hp-table tbody tr:last-child td { border-bottom: 0; }