/* =========================================================
   GS — Footer (payoff)   (namespaced under .gs-fpay)
   A layered end-of-page unit: ONE rich dark element — the recovery/CTA card on
   the Harbor Deep gradient — overlapping a LIGHT footer, closing on a giant
   kinetic tagline (three phrases that stagger in on scroll, the last in Fern).
   Everything is built from the design-system tokens (gradients, radius/shadow
   scales, button system, motion). Degrades to a static, fully-usable footer
   with no JS and under prefers-reduced-motion.
   ========================================================= */
.gs-fpay,
.gs-fpay *,
.gs-fpay *::before,
.gs-fpay *::after { box-sizing: border-box; }

.gs-fpay {
  --gsfp-radius: var(--gs-card-radius, 12px);   /* design-system card/panel radius */
  --gsfp-overlap: clamp(56px, 8vw, 104px);
  position: relative;
  font-family: var(--gs-body-font, 'Source Sans Pro', 'Segoe UI', Arial, sans-serif);
  padding-top: clamp(24px, 4vw, 56px);
}

/* Shared content container (theme tokens) — matches every other section edge. */
.gs-fpay__inner {
  position: relative; z-index: 1;
  max-width: var(--gs-content-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--gs-content-pad, clamp(36px, 5vw, 84px));
}
/* The inner that holds the recovery card must sit ABOVE the footer panel (which
   is pulled up under it) so the card — and its button — stay on top of the
   overlap instead of being painted over. */
.gs-fpay > .gs-fpay__inner { z-index: 3; }

/* ---------- Recovery / CTA card (the one dark focal element) ---------- */
.gs-fpay__recovery {
  position: relative; z-index: 2; overflow: hidden; isolation: isolate;
  border-radius: var(--gsfp-radius);
  padding: clamp(32px, 5vw, 72px);
  color: var(--gs-white, #ffffff);
  background:
    radial-gradient(115% 130% at 100% 0%, rgba(133, 196, 65, 0.20) 0%, rgba(133, 196, 65, 0) 44%),
    var(--gs-grad-harbor-deep, linear-gradient(180deg, #1d3a5d 0%, #457aba 100%));
  box-shadow: var(--gs-shadow-4, 0 38px 76px -16px rgba(29, 58, 93, 0.5));
}
/* Soft brand glow anchored bottom-left for depth. */
.gs-fpay__recovery-glow {
  position: absolute; z-index: -1; inset: auto auto -34% -12%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.gs-fpay__recovery-body { position: relative; max-width: 42rem; }

/* Optional bold image — bleeds off the right edge and blends into the gradient. */
.gs-fpay__recovery-media {
  position: absolute; z-index: -1; inset: 0 0 0 auto; width: 54%;
  pointer-events: none;
}
.gs-fpay__recovery-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44%);
          mask-image: linear-gradient(90deg, transparent 0, #000 44%);
}
.gs-fpay__recovery--has-image .gs-fpay__recovery-body { max-width: 33rem; }

.gs-fpay__eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font-weight: var(--gs-eyebrow-weight, 500); font-size: var(--gs-eyebrow-size, 0.8125rem);
  letter-spacing: var(--gs-eyebrow-tracking, 0.1em); text-transform: uppercase;
  color: var(--gs-eyebrow-on-dark, #dde7f4);
}
.gs-fpay__recovery-heading {
  margin: 0 0 12px;
  font-family: var(--gs-heading-font, 'PT Serif', Georgia, serif);
  font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.08; letter-spacing: -0.01em; color: var(--gs-white, #ffffff);
  text-wrap: balance;
}
.gs-fpay__recovery-sub {
  margin: 0 0 26px; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.55; color: rgba(255, 255, 255, 0.86); max-width: 34rem;
}
.gs-fpay__recovery-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 3vw, 28px); }

/* Buttons use the shared design-system component (.gs-btn, gs-button.css):
   primary = Fern solid; secondary = white outline (on-dark) beside it. */

/* ---------- Footer (curtain panel over the pinned mantra) ----------
   .gs-fpay__footer is the positioning container. .gs-fpay__panel is the opaque
   LIGHT curtain (columns + legal). .gs-fpay__mantra is pinned at the viewport
   bottom BEHIND the panel; as the page scrolls to the end the panel lifts off
   it. No `overflow` on the footer — it would break the sticky mantra. */
.gs-fpay__footer {
  position: relative; z-index: 1;
  margin-top: clamp(28px, 4vw, 48px);
  /* The mantra's Harbor-50 tint extends up behind the whole card (not just the
     revealed band), so there is no hard cutoff and the card's rounded BOTTOM
     corners read against a tint instead of white-on-white. */
  background: var(--gs-harbor-50, #f4f7fb);
}
.gs-fpay__panel {
  position: relative; z-index: 2;
  border-top: 1px solid var(--gs-harbor-100, #dde7f4);
  /* Rounded card — all four corners on the design-system panel radius (md/12px).
     A soft downward shadow lifts the white card off the Harbor-50 field so the
     rounded bottom corners are clearly visible (Harbor-50 alone is near-white),
     and it doubles as the curtain casting onto the mantra as it lifts. */
  border-radius: var(--gsfp-radius);
  background: linear-gradient(180deg, var(--gs-harbor-50, #f4f7fb) 0%, #ffffff 58%);
  box-shadow: 0 20px 44px -26px rgba(29, 58, 93, 0.34);
  color: var(--gs-slate, #2b4950);
  padding-block: clamp(48px, 6vw, 84px) clamp(40px, 4vw, 56px);
}
/* When the recovery card is present, slide the footer up so the card overlaps
   it (margin on the container; the extra top padding clears the card). */
.gs-fpay__footer--overlapped { margin-top: calc(-1 * var(--gsfp-overlap)); }
.gs-fpay__footer--overlapped .gs-fpay__panel { padding-top: calc(var(--gsfp-overlap) + clamp(40px, 5vw, 72px)); }

/* Page-specific legal copy sits below the tucked recovery and above the shared
   footer brand. Native details keeps long disclosures in normal document flow. */
.gs-fpay__disclosures {
  margin-block: 0 clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--gs-harbor-100, #dde7f4);
  color: var(--gs-slate, #2b4950);
}
.gs-fpay__disclosures-toggle {
  cursor: pointer;
  padding-block: 18px;
  font-weight: 700;
  line-height: 1.4;
}
.gs-fpay__disclosures-toggle:focus-visible {
  outline: 3px solid var(--gs-green-cta, #0a8744);
  outline-offset: 3px;
}
.gs-fpay__disclosures-content { max-width: 78ch; padding-block: 0 22px; }
.gs-fpay__disclosure-block { margin-bottom: 16px; line-height: 1.6; }
.gs-fpay__disclosure-block:last-child { margin-bottom: 0; }
.gs-fpay__disclosure-block :is(p, ul, ol, blockquote, h4) { margin: 0 0 12px; }
.gs-fpay__disclosure-block :is(ul, ol) { padding-left: 1.5em; }
.gs-fpay__disclosure-block li + li { margin-top: 6px; }
.gs-fpay__disclosure-block :last-child { margin-bottom: 0; }
.gs-fpay__disclosure-block a { color: var(--gs-navy, #1d3a5d); text-decoration: underline; text-underline-offset: 2px; }
.gs-fpay__disclosure-block a:focus-visible { outline: 3px solid var(--gs-green-cta, #0a8744); outline-offset: 2px; }
.gs-fpay__disclosure-marker { display: inline-block; margin-bottom: 4px; }
/* Same overlap when the recovery card is a separate GS — Recovery section set to
   "Tuck into the footer below" (the global-footer setup, where the card is per
   page but the footer is shared). Without :has() support the card simply sits
   above the footer. */
body:has(.gs-recovery--tuck) .gs-fpay { padding-top: 0; }
body:has(.gs-recovery--tuck) .gs-fpay__footer { margin-top: calc(-1 * var(--gsfp-overlap)); }
body:has(.gs-recovery--tuck) .gs-fpay__footer .gs-fpay__panel { padding-top: calc(var(--gsfp-overlap) + clamp(40px, 5vw, 72px)); }

/* Top: brand header row (logo/descriptor | socials), then full-width link grid. */
.gs-fpay__brand {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 20px 32px;
  margin-bottom: clamp(36px, 5vw, 60px);
  padding-bottom: clamp(28px, 3.5vw, 40px);
  border-bottom: 1px solid var(--gs-harbor-100, #dde7f4);
}
.gs-fpay__brand-id { max-width: 420px; }
.gs-fpay__logo { display: inline-flex; text-decoration: none; color: var(--gs-navy, #1d3a5d); }
.gs-fpay__logo .gs-fpay__logo-svg { height: var(--gsfp-logo-h, 30px); width: auto; display: block; color: var(--gs-navy, #1d3a5d); }
.gs-fpay__logo-img { height: var(--gsfp-logo-h, 30px); width: auto; display: block; }
.gs-fpay__tagline { margin: 16px 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--gs-slate, #2b4950); }

.gs-fpay__socials { display: flex; gap: 10px; }
.gs-fpay__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--gs-radius-pill, 1000px);
  color: var(--gs-slate-400, #2b4950);
  background: var(--gs-harbor-50, #f4f7fb); border: 1px solid var(--gs-harbor-100, #dde7f4);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.gs-fpay__social svg { width: 18px; height: 18px; }
.gs-fpay__social:hover { background: var(--gs-fern-300, #85c441); border-color: var(--gs-fern-300, #85c441); color: var(--gs-ink, #0f141a); transform: translateY(-2px); }
.gs-fpay__social:focus-visible { outline: 2px solid var(--gs-fern-300, #85c441); outline-offset: 2px; }

/* Link grid — full width; reflows the full column list to multiple rows. */
.gs-fpay__grid {
  display: grid;
  grid-template-columns: repeat(var(--gsfp-cols, 4), minmax(0, 1fr));
  /* Tighter column gutters give each of the 6 columns more width (labels stop
     wrapping); a larger row gap keeps vertical air when the grid wraps. */
  gap: clamp(40px, 4.5vw, 52px) clamp(18px, 2vw, 26px);
}
.gs-fpay__col { min-width: 0; }
.gs-fpay__col-heading {
  list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 16px; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gs-navy, #1d3a5d);
  margin-bottom: 18px;
}
.gs-fpay__col-heading::-webkit-details-marker { display: none; }
.gs-fpay__chev { width: 18px; height: 18px; display: none; transition: transform 0.2s ease; color: var(--gs-slate, #2b4950); }
.gs-fpay__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gs-fpay__link {
  color: var(--gs-slate-400, #2b4950); text-decoration: none; font-size: 0.9rem;
  transition: color 0.16s ease;
}
.gs-fpay__link:hover { color: var(--gs-green-cta, #1e6724); }
.gs-fpay__link:focus-visible { outline: 2px solid var(--gs-fern-300, #85c441); outline-offset: 2px; border-radius: 2px; }
.gs-fpay__link--static { cursor: default; }

/* ---------- Mantra (full-width statement, curtain-revealed) ----------
   Pinned to the viewport bottom BEHIND the footer panel (position: sticky). The
   opaque panel (z-index 2) covers it; as the page scrolls to the very end the
   panel lifts off it like a curtain. Horizontal phrase; each part a
   progressively darker Harbor shade. */
.gs-fpay__mantra {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; align-items: center;
  /* Band height is driven by the (width-scaled) type + padding — NOT viewport
     height — so the curtain reveals the SAME text-to-band ratio on every device
     (proportionate to desktop) instead of a fixed vh slab that looks far too
     tall around the small type on a phone. Vertical padding kept tight
     (trimmed to offset the taller line box below, so the band stays compact). */
  padding-block: clamp(8px, 2.4vw, 40px); padding-inline: 0;
  /* Container context so the mantra can size to the CONTENT width (cqi) below. */
  container-type: inline-size;
  background: var(--gs-harbor-50, #f4f7fb);
  overflow: hidden;
}
.gs-fpay__mantra-inner {
  /* Shrink-wrap the phrase (max-content) and center it, with no cap and no
     gutter, so the ONE line reads FULL-BLEED — the full content width, edge to
     edge (the "curtain" statement). */
  width: max-content; max-width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  display: flex; flex-wrap: nowrap; align-items: baseline;
  gap: 0 0.3em;
  font-family: var(--gs-heading-font, 'PT Serif', Georgia, serif);
  font-weight: 700;
  /* Fill the CONTENT width edge-to-edge on ONE line, scaling down proportionally
     on small screens (never wraps/stacks). cqi = 1% of the band's content box,
     which EXCLUDES the scrollbar — so, unlike vw, the line never overflows into
     a right-edge clip when the page has a vertical scrollbar. vw is the fallback
     for browsers without container units. */
  font-size: clamp(0.85rem, 5.1vw, 9rem);
  font-size: clamp(0.85rem, 5.45cqi, 9rem);
  /* line-height 1.2 (not 1.0): the gradient is painted via background-clip:text,
     which only fills glyphs WITHIN the line box — at 1.0 the descenders (p, y, g)
     spill below it and their tips render unpainted, looking chopped. 1.2 gives
     the line box room to contain the full descender. */
  line-height: 1.2; letter-spacing: -0.025em; white-space: nowrap;
}
.gs-fpay__mantra-word { white-space: nowrap; }
/* Progressively darker Harbor — the no-clip fallback (older browsers). */
.gs-fpay__mantra-word--1 { color: var(--gs-harbor-200, #80a2cb); }
.gs-fpay__mantra-word--2 { color: var(--gs-harbor-300, #457aba); }
.gs-fpay__mantra-word--3 { color: var(--gs-harbor-400, #1d3a5d); }
/* Artsy finish: one continuous Harbor sweep (light → deep) clipped across the
   whole phrase, so "progressively darker" reads as a smooth gradient rather
   than three discrete steps. Falls back to the per-word colors above. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gs-fpay__mantra-inner {
    background-image: linear-gradient(96deg,
      var(--gs-harbor-200, #80a2cb) 0%,
      var(--gs-harbor-300, #457aba) 50%,
      var(--gs-harbor-400, #1d3a5d) 100%);
    -webkit-background-clip: text;
            background-clip: text;
  }
  .gs-fpay__mantra-word { color: transparent; -webkit-text-fill-color: transparent; }
}

/* Legal bar */
.gs-fpay__legal {
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--gs-harbor-100, #dde7f4);
  font-size: 0.85rem; color: var(--gs-slate, #2b4950);
}
.gs-fpay__legal p { margin: 0; }
.gs-fpay__legal a { color: var(--gs-navy, #1d3a5d); text-decoration: none; }
.gs-fpay__legal a:hover { color: var(--gs-green-cta, #1e6724); text-decoration: underline; }
/* Sign-in is now a regular link column (see .gs-fpay__col); it inherits all the
   column styles, so no bespoke sign-in rules are needed here. */

/* ---------- Scroll-activated motion ---------- */
/* Reveal (shared pattern): default fully visible; JS adds .gs-reveal-on to <html>
   and .is-revealed per element once it scrolls in. */
.gs-reveal-on .gs-fpay [data-gs-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.gs-reveal-on .gs-fpay [data-gs-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Recovery card settles up into place as it enters. */
    .gs-fpay__recovery[data-gsfp-card] {
      animation: gsfpCardSettle linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 42%;
    }
  }
}
/* Transform only: a scroll-linked animation holds its first frame while the
   card sits below the viewport, so an opacity step here left the CTAs at 55%
   (a contrast failure). The one-shot reveal above does the fade. Same as
   GS — Recovery. */
@keyframes gsfpCardSettle {
  from { transform: translateY(46px) scale(0.985); }
  to   { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1040px) {
  .gs-fpay__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .gs-fpay__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gs-fpay__brand-id { max-width: none; }
  /* Narrow card: keep the image as a super-subtle watermark that peers in from
     the RIGHT (echoing the desktop/tablet placement) rather than a centered wash.
     The base left-fade mask stays on, so it dissolves into the copy toward the left. */
  .gs-fpay__recovery-media { inset: 0 0 0 auto; width: 78%; opacity: 0.14; }
  .gs-fpay__recovery--has-image .gs-fpay__recovery-body { max-width: none; }
}
@media (max-width: 560px) {
  .gs-fpay__grid { grid-template-columns: 1fr; gap: 0; }
  /* The accordion rows carry their own dividers (col border-top + last-child
     border-bottom), so drop the brand + legal borders here — otherwise they
     stack into doubled lines at the top and bottom of the column list. */
  .gs-fpay__brand { border-bottom: 0; padding-bottom: 0; }
  .gs-fpay__legal { border-top: 0; }
  .gs-fpay__col { border-top: 1px solid var(--gs-harbor-100, #dde7f4); }
  .gs-fpay__col:last-child { border-bottom: 1px solid var(--gs-harbor-100, #dde7f4); }
  .gs-fpay__col-heading { cursor: pointer; padding: 16px 0; margin: 0; }
  .gs-fpay__chev { display: block; }
  .gs-fpay__col[open] .gs-fpay__chev { transform: rotate(180deg); }
  /* Collapsed column links are height-clipped so JS can animate them open/closed
     (max-height set inline) with the same smooth ease as the FAQ accordion. The
     bottom breathing space rides on the last <li> — NOT the ul's padding, which
     max-height:0 can't shrink past — so a collapsed column clips fully to nothing. */
  .gs-fpay__links { padding: 0; overflow: hidden; }
  .gs-fpay__links > li:last-child { padding-bottom: 18px; }
  .gs-fpay__recovery-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .gs-fpay__recovery-ctas .gs-btn { width: 100%; }
  /* Mantra stays ONE line at every size (vw-scaled) — it never stacks/wraps. */
}

/* Mobile accordion: smooth height ease (matches the FAQ accordion). JS sets the
   inline max-height; reduced-motion users get an instant, un-transitioned toggle. */
@media (max-width: 560px) and (prefers-reduced-motion: no-preference) {
  .gs-fpay__links { transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
}