/* =========================================================
   GS — Recovery   (namespaced under .gs-recovery)
   The recovery/CTA card from GS — Footer (payoff), standalone. Same gradient
   card, glow, optional bleed image, eyebrow/heading/sub, and dual CTAs — for
   pages that need it BEFORE the footer instead of overlapping it (e.g. a blog
   post: related content, then this, then a plain footer). Degrades to a
   static, fully-usable card with no JS and under prefers-reduced-motion.
   ========================================================= */
.gs-recovery,
.gs-recovery *,
.gs-recovery *::before,
.gs-recovery *::after { box-sizing: border-box; }

.gs-recovery {
  --gs-recovery-radius: var(--gs-card-radius, 12px);
  position: relative;
  font-family: var(--gs-body-font, 'Source Sans Pro', 'Segoe UI', Arial, sans-serif);
  padding-block: clamp(28px, 4.5vw, 64px);
  padding-inline: 0;
}

/* Tucked: the site footer (GS — Footer payoff, in the global partial) slides up
   under the card — see the :has() rule in that module. Drop the bottom padding
   so the card's lower edge is what overlaps, and stack above the footer. */
.gs-recovery--tuck { padding-bottom: 0; z-index: 3; }

/* Shared content container (theme tokens) — matches every other section edge. */
.gs-recovery__inner {
  max-width: var(--gs-content-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--gs-content-pad, clamp(36px, 5vw, 84px));
}

/* ---------- Recovery / CTA card (same visual as the footer's) ---------- */
.gs-recovery__card {
  position: relative; z-index: 2; overflow: hidden; isolation: isolate;
  border-radius: var(--gs-recovery-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-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-recovery__body { position: relative; max-width: 42rem; }

/* Optional bold image — bleeds off the right edge and blends into the gradient. */
.gs-recovery__media {
  position: absolute; z-index: -1; inset: 0 0 0 auto; width: 54%;
  pointer-events: none;
}
.gs-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-recovery__card--has-image .gs-recovery__body { max-width: 33rem; }

.gs-recovery__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-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-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-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. */

/* ---------- Scroll-activated motion (same as the footer's recovery card) ---------- */
.gs-reveal-on .gs-recovery [data-gs-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; }
.gs-reveal-on .gs-recovery [data-gs-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .gs-recovery__card[data-gs-recovery-card] {
      animation: gsRecoveryCardSettle linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 42%;
    }
  }
}
/* Transform only. The settle used to fade from 0.55 too, but a scroll-linked
   animation holds its first frame for as long as the card sits below or just
   inside the viewport, so the CTA buttons rested at 55% opacity (2.8:1, a
   WCAG AA failure that Lighthouse flags on every page). The entrance fade is
   the IntersectionObserver reveal above, which runs once and finishes. */
@keyframes gsRecoveryCardSettle {
  from { transform: translateY(46px) scale(0.985); }
  to   { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  /* Narrow card: keep the image as a super-subtle watermark that peers in from
     the RIGHT rather than a centered wash. The base left-fade mask stays on,
     so it dissolves into the copy toward the left. */
  .gs-recovery__media { inset: 0 0 0 auto; width: 78%; opacity: 0.14; }
  .gs-recovery__card--has-image .gs-recovery__body { max-width: none; }
}
@media (max-width: 640px) {
  .gs-recovery__ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .gs-recovery__ctas .gs-btn { width: 100%; }
}

/* ---------- Step-1 work-email form (cta_type = email_form) ----------
   The shared short form (gs-email-capture.css) — a white field card, which
   reads cleanly on the dark card. Capped to a comfortable width. */
.gs-recovery__form { max-width: 520px; }
.gs-recovery__form-fallback[hidden] { display: none; }
.gs-recovery__ctas--after-form { margin-top: 18px; }
/* Risk-reduction line under the form (lock icon + short promise). */
.gs-recovery__note {
  display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; max-width: 520px;
  font-family: var(--gs-body-font, sans-serif); font-size: .82rem; line-height: 1.5;
  color: color-mix(in srgb, var(--gs-white, #ffffff) 78%, transparent);
}
.gs-recovery__note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; color: currentColor; }
@media (max-width: 640px) {
  .gs-recovery__form { max-width: none; }
}

/* =========================================================
   Form modal (cta_type = modal) — the original case-study CTA experience:
   button opens an accessible dialog with an editor-selectable HubSpot
   form, a brief intro, and — on submit — an inline success state whose
   only action is a "Go back to reading" button (data-gs-modal-close;
   closing + focus-return is handled by the shared modal contract in
   module.js). Portaled to <body> on open. Additive: existing pages on
   cta_type "buttons" or "email_form" are unaffected. Same contract +
   field styling as .gs-case-rail__modal-form (the original case-study
   rail's modal), namespaced here so this module never depends on
   GS — Case rail being on the page.
   ========================================================= */
.gs-recovery__modal[hidden] { display: none; }
.gs-recovery__modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  overscroll-behavior: contain;
}
.gs-recovery__modal-backdrop {
  position: absolute; inset: 0; background: rgba(6, 42, 71, 0.55);
  backdrop-filter: blur(2px); animation: gsRecoveryModalFade 0.2s ease both;
}
.gs-recovery__modal-dialog {
  position: relative; z-index: 1; width: 100%; max-width: 540px;
  max-height: min(calc(100dvh - clamp(32px, 8vw, 80px)), calc(100vh - clamp(32px, 8vw, 80px)));
  overflow-y: auto;
  background: var(--gs-white, #ffffff); color: var(--gs-charcoal, #2f2f2f);
  border-radius: var(--gs-card-radius); padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--gs-shadow-xl, 0 30px 70px -20px rgba(6, 42, 71, 0.55));
  text-align: left; animation: gsRecoveryModalPop 0.22s ease both;
}
.gs-recovery__modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 1; color: var(--gs-charcoal, #2f2f2f);
  background: transparent; border: 0; border-radius: var(--gs-btn-radius); cursor: pointer;
  transition: background-color 0.2s ease;
}
.gs-recovery__modal-close:hover { background: rgba(6, 42, 71, 0.08); }
.gs-recovery__modal-close:focus-visible { outline: 3px solid var(--gs-green, #85c441); outline-offset: 2px; }
.gs-recovery__modal-title {
  font-family: var(--gs-heading-font, "PT Serif", Georgia, serif);
  font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15;
  letter-spacing: -0.015em; margin: 0 36px 18px 0; color: var(--gs-navy, #062a47);
}

.gs-recovery__modal-form .hs-form { font-family: var(--gs-body-font, 'Source Sans Pro', system-ui, sans-serif) !important; }
.gs-recovery__modal-form fieldset { max-width: 100% !important; margin-bottom: 0 !important; }

/* Field spacing + labels */
.gs-recovery__modal-form .hs-form-field { margin-bottom: 14px !important; }
.gs-recovery__modal-form .hs-form-field > label {
  display: block !important; margin-bottom: 5px !important;
  font-size: 0.8rem !important; font-weight: 700 !important; color: var(--gs-charcoal, #2f2f2f) !important;
}
.gs-recovery__modal-form .hs-form-required { color: var(--gs-error, #d23d2d) !important; margin-left: 2px !important; }

/* Text inputs, select, textarea */
.gs-recovery__modal-form input[type="text"],
.gs-recovery__modal-form input[type="email"],
.gs-recovery__modal-form input[type="tel"],
.gs-recovery__modal-form input[type="number"],
.gs-recovery__modal-form select,
.gs-recovery__modal-form textarea {
  width: 100% !important; box-sizing: border-box !important;
  background: var(--gs-slate-50, #f6f8f8) !important; border: 1.5px solid var(--gs-line, #e1e8ea) !important; border-radius: var(--gs-radius-sm, 4px) !important;
  padding: 11px 14px !important; font-family: inherit !important; font-size: 0.92rem !important;
  color: var(--gs-charcoal, #2f2f2f) !important; -webkit-appearance: none !important; outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.gs-recovery__modal-form select {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  background-color: var(--gs-slate-50, #f6f8f8) !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--gs-slate-300, #63919c) 50%), linear-gradient(135deg, var(--gs-slate-300, #63919c) 50%, transparent 50%) !important;
  background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  padding-right: 40px !important;
}
.gs-recovery__modal-form textarea { min-height: 96px !important; resize: vertical !important; }
.gs-recovery__modal-form input::placeholder,
.gs-recovery__modal-form textarea::placeholder { color: var(--gs-gray-200, #b0b0b0) !important; }
.gs-recovery__modal-form input[type="text"]:focus,
.gs-recovery__modal-form input[type="email"]:focus,
.gs-recovery__modal-form input[type="tel"]:focus,
.gs-recovery__modal-form input[type="number"]:focus,
.gs-recovery__modal-form select:focus,
.gs-recovery__modal-form textarea:focus {
  border-color: var(--gs-green-cta, #0a8744) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gs-green-cta, #0a8744) 16%, transparent) !important; background: var(--gs-white, #ffffff) !important;
}

/* Two-column rows (e.g. first / last name) */
.gs-recovery__modal-form .form-columns-2 { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.gs-recovery__modal-form .form-columns-2 .hs-form-field { width: 100% !important; float: none !important; }

/* Checkbox / radio group heading + helper text */
.gs-recovery__modal-form .hs-fieldtype-checkbox > label,
.gs-recovery__modal-form .hs-fieldtype-radio > label {
  font-size: 0.8rem !important; font-weight: 700 !important; color: var(--gs-charcoal, #2f2f2f) !important; margin-bottom: 3px !important;
}
.gs-recovery__modal-form .hs-field-desc { font-size: 0.8rem !important; color: var(--gs-slate-300, #63919c) !important; margin: 0 0 10px !important; padding: 0 !important; }

/* Options as wrapping pills with a custom check/radio control */
.gs-recovery__modal-form ul.inputs-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
.gs-recovery__modal-form .hs-form-checkbox,
.gs-recovery__modal-form .hs-form-radio { margin: 0 !important; padding: 0 !important; }
.gs-recovery__modal-form .hs-form-checkbox-display,
.gs-recovery__modal-form .hs-form-radio-display {
  display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important;
  background: var(--gs-slate-50, #f6f8f8) !important; border: 1.5px solid var(--gs-line, #e1e8ea) !important; border-radius: var(--gs-radius-sm, 4px) !important;
  padding: 7px 14px !important; cursor: pointer !important; transition: all 0.15s !important;
  font-size: 0.85rem !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--gs-charcoal, #2f2f2f) !important;
}
.gs-recovery__modal-form .hs-form-checkbox-display:hover,
.gs-recovery__modal-form .hs-form-radio-display:hover { border-color: var(--gs-slate-200, #96b0b6) !important; }
.gs-recovery__modal-form .hs-form-checkbox-display input[type="checkbox"],
.gs-recovery__modal-form .hs-form-radio-display input[type="radio"] {
  -webkit-appearance: none !important; appearance: none !important; position: relative !important;
  width: 16px !important; height: 16px !important; margin: 0 !important; flex-shrink: 0 !important; cursor: pointer !important;
  background: var(--gs-white, #ffffff) !important; border: 1.5px solid var(--gs-slate-200, #96b0b6) !important; border-radius: var(--gs-radius-sm, 4px) !important; transition: all 0.15s !important;
}
.gs-recovery__modal-form .hs-form-radio-display input[type="radio"] { border-radius: 50% !important; }
.gs-recovery__modal-form .hs-form-checkbox-display input[type="checkbox"]:checked,
.gs-recovery__modal-form .hs-form-radio-display input[type="radio"]:checked {
  background: var(--gs-green-cta, #0a8744) !important; border-color: var(--gs-green-cta, #0a8744) !important;
}
.gs-recovery__modal-form .hs-form-checkbox-display input[type="checkbox"]:checked::after {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 4px !important; height: 8px !important; border: solid var(--gs-white, #ffffff) !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -58%) rotate(45deg) !important;
}
.gs-recovery__modal-form .hs-form-radio-display input[type="radio"]:checked::after {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--gs-white, #ffffff) !important; transform: translate(-50%, -50%) !important;
}
.gs-recovery__modal-form .hs-form-checkbox-display input:focus-visible,
.gs-recovery__modal-form .hs-form-radio-display input:focus-visible { outline: 3px solid var(--gs-navy, #062a47) !important; outline-offset: 2px !important; }
.gs-recovery__modal-form .hs-form-checkbox-display:has(input:checked),
.gs-recovery__modal-form .hs-form-radio-display:has(input:checked) { border-color: var(--gs-green-cta, #0a8744) !important; background: var(--gs-fern-50, #f7faf5) !important; color: var(--gs-navy, #062a47) !important; }

/* Legal consent (GDPR) */
.gs-recovery__modal-form .legal-consent-container { margin: 4px 0 14px !important; }
.gs-recovery__modal-form .legal-consent-container .hs-richtext,
.gs-recovery__modal-form .hs-richtext {
  font-size: 0.78rem !important; line-height: 1.5 !important; color: var(--gs-slate-300, #63919c) !important; margin: 0 0 10px !important;
}
.gs-recovery__modal-form .legal-consent-container .hs-richtext p { margin: 0 0 8px !important; }
.gs-recovery__modal-form .legal-consent-container a,
.gs-recovery__modal-form .hs-richtext a { color: var(--gs-green-cta, #0a8744) !important; text-decoration: underline !important; }
.gs-recovery__modal-form .legal-consent-container a:focus-visible,
.gs-recovery__modal-form .hs-richtext a:focus-visible { outline: 3px solid var(--gs-navy, #062a47) !important; outline-offset: 2px !important; }
.gs-recovery__modal-form .hs-form-booleancheckbox { margin: 0 !important; }
.gs-recovery__modal-form .hs-form-booleancheckbox-display {
  display: flex !important; align-items: flex-start !important; gap: 8px !important;
  font-size: 0.8rem !important; line-height: 1.4 !important; color: var(--gs-charcoal, #2f2f2f) !important; cursor: pointer !important;
}
.gs-recovery__modal-form .hs-form-booleancheckbox-display input[type="checkbox"] {
  -webkit-appearance: none !important; appearance: none !important; position: relative !important;
  width: 16px !important; height: 16px !important; margin: 2px 0 0 !important; flex-shrink: 0 !important; cursor: pointer !important;
  background: var(--gs-white, #ffffff) !important; border: 1.5px solid var(--gs-slate-200, #96b0b6) !important; border-radius: var(--gs-radius-sm, 4px) !important; transition: all 0.15s !important;
}
.gs-recovery__modal-form .hs-form-booleancheckbox-display input[type="checkbox"]:checked {
  background: var(--gs-green-cta, #0a8744) !important; border-color: var(--gs-green-cta, #0a8744) !important;
}
.gs-recovery__modal-form .hs-form-booleancheckbox-display input[type="checkbox"]:checked::after {
  content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important;
  width: 4px !important; height: 8px !important; border: solid var(--gs-white, #ffffff) !important; border-width: 0 2px 2px 0 !important; transform: translate(-50%, -58%) rotate(45deg) !important;
}
.gs-recovery__modal-form .hs-form-booleancheckbox-display input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--gs-navy, #062a47) !important; outline-offset: 2px !important;
}

/* Submit */
.gs-recovery__modal-form .hs-submit { margin-top: 4px !important; }
.gs-recovery__modal-form .hs-submit .hs-field-desc { display: none !important; }
.gs-recovery__modal-form input[type="submit"],
.gs-recovery__modal-form .hs-button.primary {
  width: 100% !important; padding: 13px 24px !important; background: var(--gs-green-cta, #0a8744) !important; color: var(--gs-white, #ffffff) !important;
  border: none !important; border-radius: var(--gs-radius-sm, 4px) !important; font-family: inherit !important; font-weight: 700 !important; font-size: 0.95rem !important;
  cursor: pointer !important; line-height: 1.2 !important; transition: all 0.2s !important;
}
.gs-recovery__modal-form input[type="submit"]:hover,
.gs-recovery__modal-form .hs-button.primary:hover { background: var(--gs-green-cta, #1e6724) !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--gs-green-cta, #0a8744) 25%, transparent) !important; transform: translateY(-1px) !important; }
.gs-recovery__modal-form input[type="submit"]:focus-visible,
.gs-recovery__modal-form .hs-button.primary:focus-visible { outline: 3px solid var(--gs-navy, #062a47) !important; outline-offset: 2px !important; }

/* Errors */
.gs-recovery__modal-form .hs-error-msgs { list-style: none !important; padding: 0 !important; margin: 4px 0 0 !important; }
.gs-recovery__modal-form .hs-error-msg { color: var(--gs-error, #d23d2d) !important; font-size: 0.75rem !important; margin-top: 4px !important; }

@media (max-width: 640px) {
  .gs-recovery__modal-form .form-columns-2 { grid-template-columns: 1fr !important; gap: 0 !important; }
  .gs-recovery__modal-form ul.inputs-list { flex-direction: column !important; }
  .gs-recovery__modal-form input[type="submit"] { width: 100%; }
}
@media (max-width: 480px) {
  .gs-recovery__modal { padding: 12px; }
  .gs-recovery__modal-dialog { max-height: 100dvh; }
}

@keyframes gsRecoveryModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsRecoveryModalPop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .gs-recovery__modal-backdrop, .gs-recovery__modal-dialog { animation: none; }
}

/* ---------- Intro copy + success state (new: gs-case-rail's modal has no
   success step of its own to reuse here) ---------- */
.gs-recovery__modal-intro { color: var(--gs-charcoal, #2f2f2f); margin: 0 0 20px; font-size: 0.95rem; line-height: 1.55; }
.gs-recovery__modal-intro :first-child { margin-top: 0; }
.gs-recovery__modal-intro :last-child { margin-bottom: 0; }
.gs-recovery__modal-success { text-align: center; padding-top: 24px; }
.gs-recovery__modal-success-msg { color: var(--gs-charcoal, #2f2f2f); margin: 0 0 20px; }
.gs-recovery__modal-success-msg :first-child { margin-top: 0; }
.gs-recovery__modal-success-msg :last-child { margin-bottom: 0; }