/* ============================================================
   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; }