/* ==========================================================================
   WellthCare Independent — landing page
   Values below come from 02_BRAND_AND_LAYOUT_REFERENCE.pdf and the
   CURRENT_IMPLEMENTATION reference screenshots (desktop 1440, mobile 390).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --deep-teal:    #035F5E;
  --action-teal:  #286E6D;
  --medium-teal:  #408483;
  --lavender:     #AE99BE;
  --surface:      #FAFBF8;
  --aqua:         #E7F2F2;
  --ink:          #334F54;
  --muted:        #52666B;
  --border:       #D5E4E2;

  /* Presentation */
  --deep-ink:     #0D4A50;
  --purple:       #8A4FC4;
  --ivory:        #FBF6EA;
  --ribbon:       #CFE7E4;
  --subhead:      #0F5D63;
  --support:      #4E4F78;
  --icon-circle:  #DFF0EE;

  --header-gradient: linear-gradient(100deg, #064F50 0%, #08675F 55%, #287C67 100%);
  --problem-gradient: linear-gradient(160deg, #FBF6EA 0%, #F3F6EF 45%, #E4F1EF 100%);
  --problem-border: #DCEBE8;

  /* Layout */
  --wrap:      1240px;
  --gutter:    clamp(20px, 4vw, 64px);
  --col-gap:   64px;
  --header-h:  72px;
  --section-pad: 32px;

  /* Inset from the viewport edge to the 1240px wrap's content edge. Split
     copy columns pad by this so their text lines up with every other
     section even though the split itself is full-bleed. */
  --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));

  /* Type scale */
  --fs-display:   clamp(34px, 5.2vw, 72px);
  --fs-secondary: clamp(22px, 3vw, 40px);
  --fs-subtitle:  clamp(18px, 2.2vw, 30px);
  --fs-audience:  clamp(16px, 1.4vw, 20px);

  --font: "Avenir Next", system-ui, sans-serif;
}

@media (min-width: 768px) { :root { --section-pad: 40px; } }
@media (min-width: 1024px) { :root { --section-pad: 56px; } }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1024px) { body { font-size: 18px; } }

h1, h2, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

.sprite { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 100;
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  background: #fff; color: var(--deep-ink); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--action-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header :focus-visible,
.mobile-menu :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Wrap + sections
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  background: var(--surface);
  /* Bleeding photos and the phone's aqua oval intentionally extend past the
     content column; clip them at the section so they never scroll the page. */
  overflow-x: clip;
}

.section--problem {
  background: var(--problem-gradient);
  border-block: 1px solid var(--problem-border);
  padding-block: clamp(40px, 7.9vw, 114px);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.h-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--deep-ink);
  text-wrap: balance;
}

@media (max-width: 359px) {
  .h-display { font-size: 30px; line-height: 1.06; }
}

.h-secondary {
  font-size: var(--fs-secondary);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--deep-ink);
}

.subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 500;
  line-height: 1.22;
  color: var(--subhead);
}

.subtitle--closing { font-weight: 700; color: var(--deep-ink); }

.audience {
  font-size: var(--fs-audience);
  line-height: 1.45;
  max-width: 416px;
  color: var(--support);
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subhead);
}
.eyebrow--purple { color: var(--purple); }

.disclaimer { font-size: 15px; color: var(--support); }

.rule {
  height: 1px; border: 0; margin: 0;
  background: var(--border);
}
.rule--teal { background: #A8CFCC; }

/* --------------------------------------------------------------------------
   Icon circles
   -------------------------------------------------------------------------- */
.icon-circle {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--icon-circle);
  color: var(--action-teal);
}
.icon-circle svg { width: 20px; height: 20px; }

.icon-circle--md, .icon-circle--lg { width: 48px; height: 48px; }
.icon-circle--md svg, .icon-circle--lg svg { width: 24px; height: 24px; }

@media (min-width: 1024px) {
  .icon-circle { width: 44px; height: 44px; }
  .icon-circle svg { width: 22px; height: 22px; }
  .icon-circle--md, .icon-circle--lg { width: 60px; height: 60px; }
  .icon-circle--md svg, .icon-circle--lg svg { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.btn__arrow { width: 20px; height: 20px; flex: none; }

/* Header pills */
.btn--header,
.btn--ghost {
  min-height: 44px;
  padding-inline: 24px;
  font-size: 16px;
}

.btn--ghost {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .14); }

.btn--dark { background: var(--deep-ink); color: #fff; }
.btn--dark:hover { background: #09383D; }

/* Body call-to-action */
.btn--cta {
  min-height: 52px;
  padding-inline: 28px;
  font-size: 17px;
  box-shadow: 0 10px 24px rgba(13, 74, 80, .18);
}

.btn--primary { background: var(--action-teal); color: #fff; }
.btn--primary:hover { background: var(--deep-teal); }

.btn--block { width: 100%; }

@media (max-width: 639px) {
  .btn--cta { width: 100%; }
}

/* Footer pills */
.btn--outline {
  min-height: 44px;
  padding-inline: 22px;
  font-size: 15px;
  color: var(--subhead);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #A8CFCC;
}
.btn--outline:hover { background: var(--aqua); color: var(--deep-ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header-gradient);
}

.site-header__inner {
  max-width: 1440px;
  margin-inline: auto;
  min-height: 56px;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

@media (min-width: 640px) {
  .site-header__inner { min-height: var(--header-h); }
}

.site-header__logo { display: block; border-radius: 6px; }
.site-header__logo img { width: auto; height: 30px; }

@media (max-width: 359px) { .site-header__logo img { height: 24px; } }
@media (min-width: 640px) { .site-header__logo img { height: 44px; } }

.site-header__logo img { flex: none; }

.site-header__nav {
  display: flex;
  align-items: center;
  flex: none;
  gap: 12px;
}

/* The header must never be wider than the viewport — an overflowing header
   widens the whole document and pushes every section's copy off-screen. */
@media (max-width: 639px) {
  .site-header__nav { gap: 8px; }
  .btn--header { min-height: 40px; padding-inline: 16px; font-size: 14px; }
  .menu-toggle { width: 40px; height: 40px; }
}

@media (max-width: 379px) {
  .site-header__inner { padding-inline: 14px; }
  .site-header__nav { gap: 6px; }
  .btn--header { padding-inline: 12px; font-size: 13px; }
  .menu-toggle { width: 38px; height: 38px; }
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  padding: 10px 8px;
  border-radius: 6px;
}
.nav-link:hover { text-decoration: underline; }

/* Mobile menu toggle */
.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(255, 255, 255, .14); }
.menu-toggle svg { width: 24px; height: 24px; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: block; }

.mobile-menu {
  padding: 8px var(--gutter) 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.mobile-menu[hidden] { display: none; }

.mobile-menu__link {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
  font-weight: 600;
  padding: 12px 4px;
  border-radius: 8px;
}
.mobile-menu__link:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}
@media (max-width: 639px) {
  .nav-desktop-only { display: none; }
}

/* --------------------------------------------------------------------------
   Split sections (copy + bleeding photo)
   -------------------------------------------------------------------------- */
/* The split is a full-bleed 50/50 grid of the VIEWPORT — not a centred 1240px
   wrap with the photo bleeding out of it. The copy column carries the wrap
   inset itself (--edge), so text still lands on the 1240px content edge while
   the photo panel is a true half of the screen. */
.split__inner {
  display: grid;
  gap: 28px;
}

.split__copy { padding-inline: var(--gutter); }

/* Stacked order below 1024: photo first, except the opening. */
@media (max-width: 1023px) {
  .split__copy { order: 2; }
  .split__media { order: 1; }
  .split__inner--opening .split__copy { order: 1; }
  .split__inner--opening .split__media { order: 2; }
}

@media (min-width: 1024px) {
  .split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .split__copy {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-inline: var(--edge) clamp(32px, 4vw, 64px);
  }
  .split--reversed .split__copy {
    padding-inline: clamp(32px, 4vw, 64px) var(--edge);
  }

  .split__inner--opening .split__copy { justify-content: center; }
}

/* On desktop the photo bleeds to the section's top and bottom edges, so the
   vertical padding moves off the section and onto the copy column.
   The opening uses 70% of the standard vertical section padding. */
.split { --pad-y: var(--section-pad); padding-block: var(--pad-y); }
#introduction { --pad-y: calc(var(--section-pad) * 0.7); }

@media (min-width: 1024px) {
  .split { padding-block: 0; }
  .split__copy { padding-block: var(--pad-y); }
}

/* --- media -------------------------------------------------------------- */
.split__media {
  position: relative;
  overflow: hidden;
}

.split__media picture { display: block; width: 100%; }

.split__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  max-height: 480px;
}

@media (min-width: 1024px) {
  /* The panel is half the viewport wide and the source photos are square, so
     the photo's own ratio sets the height — the hero grows with the screen.
     min-height is only the floor; if the copy is taller the row wins and
     height:100% makes the photo fill it. */
  .split__media { min-height: clamp(512px, calc(100dvh - var(--header-h) - 64px), 672px); }
  .split__media--opening {
    min-height: clamp(448px, calc(100dvh - var(--header-h) - 96px), 608px);
  }

  .split__media picture { height: 100%; }

  .split__media img {
    height: 100%;
    aspect-ratio: auto;
    max-height: none;
  }
}

@media (min-width: 1024px) {
  .split--reversed .split__media { grid-column: 1; grid-row: 1; }
  .split--reversed .split__copy  { grid-column: 2; grid-row: 1; }
}

/* --- curved photo edge --------------------------------------------------- */
.curve {
  display: none;
  position: absolute;
  inset-block: 0;
  left: -1px;
  width: clamp(72px, 7vw, 112px);
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.curve--flip { left: auto; right: -1px; transform: scaleX(-1); }

/* The ribbon is stroked on the same path as the fill's edge and painted
   first; the opaque fill then covers its inner half. That leaves exactly
   half the stroke showing over the photo and makes a transparent seam
   between the two impossible at any curve width. */
.curve__ribbon {
  fill: none;
  stroke: var(--ribbon);
  stroke-width: 26;
  opacity: .8;
}
.curve__fill { fill: var(--surface); }

@media (min-width: 1024px) { .curve { display: block; } }

/* --------------------------------------------------------------------------
   01 — Introduction
   -------------------------------------------------------------------------- */
#introduction .subtitle { margin-top: 14px; }
#introduction .audience { margin-top: 18px; }
#introduction .btn--cta { margin-top: 28px; align-self: start; }

@media (max-width: 639px) {
  #introduction .btn--cta { align-self: stretch; }
}

/* --------------------------------------------------------------------------
   02 — Problem
   -------------------------------------------------------------------------- */
.problem__subtitle { margin-top: clamp(24px, 7vw, 105px); }

.metrics {
  display: grid;
  gap: 28px;
  margin-top: clamp(28px, 6vw, 92px);
}

@media (min-width: 768px) {
  .metrics { grid-template-columns: repeat(3, 1fr); gap: 36px; }
}

.metric + .metric {
  border-top: 1px solid var(--border);
  padding-top: 28px;
}

@media (min-width: 768px) {
  .metric + .metric {
    border-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--border);
    padding-left: 36px;
  }
}

.metric__value {
  margin-top: 10px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--deep-ink);
}
.metric__unit { font-size: .55em; letter-spacing: -0.02em; }

.metric__note {
  margin-top: 12px;
  max-width: 288px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--support);
}

#problem .rule { margin-top: clamp(32px, 6vw, 90px); }
.problem__closing { margin-top: clamp(20px, 2.5vw, 32px); }

/* --------------------------------------------------------------------------
   03 — Benefits
   -------------------------------------------------------------------------- */
.benefits { display: grid; gap: 32px; }

@media (min-width: 1024px) {
  .benefits {
    grid-template-columns: minmax(0, 1fr) 288px;
    gap: var(--col-gap);
    align-items: center;
  }
}

.benefits__copy .subtitle { margin-top: 12px; }

.benefit-list { margin-top: clamp(20px, 2vw, 28px); }

@media (min-width: 1024px) {
  .benefit-list { column-count: 2; column-gap: 40px; }
}

.benefit {
  display: flex;
  align-items: center;
  gap: 16px;
  break-inside: avoid;
  padding-block: 9px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--subhead);
}

@media (min-width: 1024px) { .benefit { font-size: 22px; padding-block: 7px; } }

.benefit-groups {
  display: grid;
  gap: 24px;
  margin-top: clamp(24px, 2.6vw, 32px);
}

@media (min-width: 1024px) {
  .benefit-groups { grid-template-columns: repeat(3, 1fr); gap: 0; }
}

.benefit-group { display: flex; align-items: flex-start; gap: 16px; }

@media (min-width: 1024px) {
  .benefit-group + .benefit-group {
    border-left: 1px solid var(--border);
    padding-left: 24px;
  }
  .benefit-group { padding-right: 24px; }
}

.benefit-group .eyebrow { margin-bottom: 4px; }

.benefit-group__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--deep-ink);
}
@media (min-width: 1024px) { .benefit-group__title { font-size: 20px; } }

.benefit-group__note {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--support);
}

.benefits__copy .disclaimer { margin-top: clamp(20px, 2.2vw, 28px); }

/* Phone over an aqua oval (the oval is CSS, not a supplied asset). */
.benefits__phone {
  position: relative;
  justify-self: center;
  width: min(240px, 62vw);
}

@media (min-width: 1024px) { .benefits__phone { width: 288px; } }

.benefits__phone::before {
  content: "";
  position: absolute;
  inset: -10% -15%;
  border-radius: 50%;
  background: var(--aqua);
}

.benefits__phone picture { position: relative; }
.benefits__phone img { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   04 / 07 — Icon rows
   -------------------------------------------------------------------------- */
.rows { margin-top: clamp(28px, 3.5vw, 44px); }

.row { display: flex; align-items: flex-start; gap: 18px; padding-block: 20px; }
.row + .row { border-top: 1px solid var(--border); }

.row__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--deep-ink);
}
@media (min-width: 1024px) { .row__title { font-size: 20px; } }

.row__text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--support);
}
@media (min-width: 1024px) { .row__text { font-size: 17px; } }

/* Closing rows are tighter and undivided. */
.rows--compact { margin-top: 18px; }
.rows--compact .row { padding-block: 10px; gap: 14px; }
.rows--compact .row + .row { border-top: 0; }
.rows--compact .row__title { font-size: 17px; }
@media (min-width: 1024px) { .rows--compact .row__title { font-size: 18px; } }
.rows--compact .row__text { font-size: 16px; }
.rows--compact .icon-circle--md { width: 40px; height: 40px; }
.rows--compact .icon-circle--md svg { width: 20px; height: 20px; }
@media (min-width: 1024px) {
  .rows--compact .icon-circle--md { width: 44px; height: 44px; }
  .rows--compact .icon-circle--md svg { width: 22px; height: 22px; }
}

/* --------------------------------------------------------------------------
   05 — Savings
   -------------------------------------------------------------------------- */
.savings__eyebrow { margin-top: clamp(18px, 2vw, 26px); }

.compare { margin-top: 14px; }
.compare__item + .compare__item { margin-top: 16px; }

.compare__label {
  font-size: 17px;
  font-weight: 500;
  color: var(--subhead);
}

.compare__amount {
  margin-top: 2px;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--deep-ink);
}

.compare__per {
  font-size: 15px;
  font-weight: 600;
  color: var(--deep-ink);
}

#savings .rule { margin-top: 22px; }

.compare__total {
  margin-top: 26px;
  font-size: clamp(30px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--deep-ink);
}

.compare__total-label {
  margin-top: 6px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--subhead);
}

.savings__kicker {
  margin-top: 26px;
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--purple);
}
.savings__kicker strong { font-weight: 800; }
.savings__kicker span { color: var(--ink); font-size: .9em; }

/* --------------------------------------------------------------------------
   06 — Future
   -------------------------------------------------------------------------- */
.future__head { display: grid; gap: 24px; }

@media (min-width: 1024px) {
  .future__head { grid-template-columns: 1fr 1fr; gap: var(--col-gap); align-items: start; }
  .future__headline { text-align: center; padding-top: 76px; }
}

.future__head .subtitle { margin-top: 14px; }

.future__total {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--deep-ink);
}

.future__total-note {
  margin-top: 8px;
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--support);
}

/* --- timeline ------------------------------------------------------------ */
.timeline {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  gap: 24px;
}

.timeline__dot {
  display: block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #8FC8C4;
}

.timeline__label { font-size: 16px; color: var(--muted); }

.timeline__value {
  margin-top: 2px;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--deep-ink);
}

/* Vertical below 768px */
@media (max-width: 767px) {
  .timeline { gap: 20px; }
  .timeline__step { position: relative; padding-left: 28px; }
  .timeline__dot { position: absolute; left: 0; top: 5px; }
  .timeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 5px; top: 17px; bottom: -22px;
    width: 2px;
    background: var(--ribbon);
  }
}

/* Horizontal from 768px */
@media (min-width: 768px) {
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .timeline::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 5px;
    height: 2px;
    background: var(--ribbon);
  }
  .timeline__step { position: relative; text-align: center; }
  .timeline__dot { margin: 0 auto; }
  .timeline__label { margin-top: 22px; }
}

/* --- garden figure ------------------------------------------------------- */
.garden {
  margin-top: clamp(32px, 4vw, 56px);
  max-width: 832px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 767px) { .garden { padding-inline: 0; } }

.garden picture {
  display: block;
  border: 6px solid var(--aqua);
  border-radius: 24px;
  overflow: hidden;
}

/* height:auto is required — the <img> height attribute would otherwise
   win over aspect-ratio and render the photo at its full square height. */
.garden img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   07 — Next step
   -------------------------------------------------------------------------- */
#next-step .subtitle--closing { margin-top: 16px; }
.next-step__eyebrow { margin-top: clamp(20px, 2.2vw, 28px); }
#next-step .btn--cta { margin-top: 28px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface);
  padding-block: clamp(24px, 3vw, 40px) clamp(32px, 4vw, 56px);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 1024px) { .site-footer__inner { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}

.modal::backdrop {
  background: rgba(6, 46, 50, .55);
  backdrop-filter: blur(3px);
}

.modal__panel {
  position: relative;
  padding: clamp(24px, 4vw, 36px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(6, 46, 50, .28);
}

.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--aqua);
  color: var(--deep-ink);
  cursor: pointer;
}
.modal__close:hover { background: var(--icon-circle); }
.modal__close svg { width: 20px; height: 20px; }

.modal__title {
  padding-right: 48px;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--deep-ink);
}

/* min-height keeps the still-empty "Build My Strategy" panel from collapsing
   to a sliver until copy is decided. */
.modal__body { min-height: 120px; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Modal form — "Get WellthCare" sale
   -------------------------------------------------------------------------- */
.sale-form__intro,
.sale-busy__note,
.sale-success p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.form-grid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
}

.field { display: grid; gap: 6px; }

.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--deep-ink);
}

.field__required { color: #B42318; }

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}

.field__input:focus-visible {
  outline: none;
  border-color: var(--action-teal);
  box-shadow: 0 0 0 3px rgba(40, 110, 109, .18);
}

.field__input.is-invalid { border-color: #B42318; }

.form-error {
  margin-top: 14px;
  color: #B42318;
  font-size: 15px;
  line-height: 1.45;
}
.form-error:empty { display: none; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

/* .btn--cta already goes full width below 640px, so the row has to stack
   at the same breakpoint or the two buttons overflow it. */
@media (max-width: 639px) {
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }
}

.sale-busy { padding: 20px 0; text-align: center; }

.sale-busy__title {
  margin-top: 18px;
  font-weight: 700;
  color: var(--deep-ink);
}

.sale-busy__note { margin-top: 8px; }

.spinner {
  width: 40px; height: 40px;
  margin: 0 auto;
  border: 3px solid var(--ribbon);
  border-top-color: var(--action-teal);
  border-radius: 50%;
  animation: spinner-rotate .8s linear infinite;
}

@keyframes spinner-rotate { to { transform: rotate(360deg); } }

.sale-success__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--deep-ink);
}

.sale-success p + p { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* The rule above freezes the spin, and a ring with a highlighted top then
     reads as a stalled spinner. Flatten it; the busy text carries progress. */
  .spinner { border-top-color: var(--ribbon); }
}