/* State of the Healthcare Financial Experience — self-contained widget styles.
   Every rule is namespaced under .soth-experience-scope so it cannot affect the host page. */
.soth-experience-scope { position: relative; }

/* ============================================================
   FONTS — Avenir Next (the design's "Avenir Next LT Pro").
   Faces are subset to Latin + the punctuation this page uses.
   300 maps to Ultra Light, the closest cut to Avenir Next LT Pro
   Light; Mulish (layout.tsx) stays as the loading fallback.
   ============================================================ */
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Demi.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Next LT Pro";
  src: url("assets/fonts/AvenirNextLTPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.soth-experience-scope {
  /* Zelis brand tokens (from Figma design styles) */
  --zelis-neon-blue: #320fff;   /* Bright Blue / Accent */
  --zelis-ink-stone: #41329b;
  --zelis-ink-blue: #23004b;
  --zelis-ink-mist: #f7f6ff;
  --zelis-solar: #ffbe00;
  --zelis-warm-gray: #b4b4b9;
  --zelis-white: #ffffff;

  /* Font stacks: real Avenir if present, else Mulish, else system */
  --font-avenir: "Avenir Next LT Pro", "Mulish", "Segoe UI", system-ui, sans-serif;
  --font-georgia: Georgia, "Times New Roman", serif;
}

.soth-experience-scope * {
  box-sizing: border-box;
}

/* Lenis drives smoothing; native smooth scrolling would fight it */
.soth-experience-scope {
  scroll-behavior: auto;
}

.soth-experience-scope {
  margin: 0;
  background: var(--zelis-white);
  color: var(--zelis-ink-blue);
  font-family: var(--font-avenir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Primary button: neon-blue → on hover smoothly inverts to white bg / blue text / blue border.
   (bg/color/border live here, not inline, so :hover can override them.) */
.soth-experience-scope .btn-primary,
.soth-experience-scope .soth-btn-primary {
  background: var(--zelis-neon-blue);
  color: #ffffff;
  border: 1.5px solid var(--zelis-neon-blue);
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.soth-experience-scope .btn-primary:hover,
.soth-experience-scope .soth-btn-primary:hover {
  background: #ffffff;
  color: var(--zelis-neon-blue);
  border-color: var(--zelis-neon-blue);
}

/* The Figma artboard is a fixed 1440px desktop design.
   We render each section centered at 1440 and let the page
   scroll horizontally only below that width (desktop-first 1:1). */
/* scale the fixed 1440 canvas to fit the viewport (zoom keeps sticky + glass working) */
.soth-experience-scope #page-root,
.soth-experience-scope #soth-page-root {
  zoom: var(--page-zoom, 1);
}

.soth-experience-scope .section,
.soth-experience-scope .soth-section {
  position: relative;
  width: 1440px;
  margin-inline: auto;
}

/* phone layout: fluid width, no artboard zoom */
.soth-experience-scope #page-root.is-mobile,
.soth-experience-scope #soth-page-root.is-mobile {
  zoom: 1;
  width: 100%;
}
.soth-experience-scope #page-root.is-mobile .section,
.soth-experience-scope #soth-page-root.is-mobile .soth-section {
  width: 100%;
}

/* Full-bleed background: fills the 1440 section below 1440px (where the whole
   canvas is already scaled to the viewport), and stretches edge-to-edge on
   wider screens so section backgrounds reach the viewport edges. */
.soth-experience-scope .bleed-bg,
.soth-experience-scope .soth-bleed-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
@media (min-width: 1440px) {
  .soth-experience-scope .bleed-bg,
  .soth-experience-scope .soth-bleed-bg {
    left: calc(720px - 50vw);
    width: 100vw;
  }
}

/* Figma trims text blocks to cap-height / alphabetic baseline
   ([text-box-trim:trim-both]); mirror that so vertical rhythm matches 1:1.
   Browsers without `text-box` just keep the normal half-leading. */
.soth-experience-scope .tb-trim,
.soth-experience-scope .soth-tb-trim {
  text-box: trim-both cap alphabetic;
}

/* Lead-form inputs (SotH "See the complete picture") */
.soth-experience-scope .soth-input::placeholder {
  color: var(--zelis-warm-gray);
  opacity: 1;
}
.soth-experience-scope .soth-input:focus {
  border-color: var(--zelis-solar);
}

/* ------------------------------------------------------------------ *
 * HubSpot lead form, restyled 1:1 to the SotH design. HubSpot's own
 * stylesheet still handles structure (hidden UTM fields, validation
 * plumbing); everything cosmetic below overrides it (!important, since
 * HubSpot's rules are equally specific and load after ours).
 * ------------------------------------------------------------------ */
.soth-hsform,
.soth-experience-scope .soth-hsform .hs-form {
  width: 100%;
  font-family: var(--font-avenir) !important;
}
.soth-experience-scope .soth-hsform .hs-form {
  display: flex !important;
  flex-direction: column;
  gap: 6px; /* small — each field reserves its own error line below (see padding-bottom) */
}
/* HubSpot groups fields into <fieldset> rows (form-columns-2 / -1). Lay each
   row out ourselves: two fields side by side, with a comfortable gutter. */
.soth-experience-scope .soth-hsform fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}
.soth-hsform fieldset.form-columns-2,
.soth-experience-scope .soth-hsform fieldset.form-columns-1 {
  display: flex !important;
  flex-wrap: wrap;
  column-gap: 22px; /* gutter between the two side-by-side fields */
  row-gap: 6px; /* vertical spacing where a fieldset stacks (error line is reserved per-field) */
}
.soth-experience-scope .soth-hsform fieldset.form-columns-2 > .hs-form-field {
  flex: 1 1 calc(50% - 11px);
  min-width: 0;
}
/* phones: every field spans the full row (two-up is too cramped, and HubSpot's
   own column widths would otherwise leave e.g. Organization Name at ~50%) */
.soth-experience-scope #page-root.is-mobile .soth-hsform .hs-form-field,
.soth-experience-scope #soth-page-root.is-mobile .soth-hsform .hs-form-field {
  width: 100% !important;
  flex: 1 1 100% !important;
}
.soth-experience-scope .soth-hsform fieldset.form-columns-1 > .hs-form-field {
  flex: 1 1 100%;
}
/* a choice list (e.g. the report checkboxes) always takes its own full row —
   the whole fieldset stacks so its text-field partner isn't stranded at 50%.
   Match the *choice* items only, never HubSpot's error <ul class="inputs-list">
   (which is injected into every invalid field on submit and would otherwise
   collapse the two-per-row layout). */
.soth-hsform fieldset:has(.hs-form-checkbox),
.soth-hsform fieldset:has(.hs-form-radio),
.soth-experience-scope .soth-hsform fieldset:has(.hs-form-booleancheckbox) {
  flex-direction: column;
}
.soth-hsform fieldset:has(.hs-form-checkbox) > .hs-form-field,
.soth-hsform fieldset:has(.hs-form-radio) > .hs-form-field,
.soth-experience-scope .soth-hsform fieldset:has(.hs-form-booleancheckbox) > .hs-form-field {
  flex: 1 1 100%;
}
/* the choice field + everything inside it spans the full row so its options
   have room to sit on one line (HubSpot otherwise caps them at ~50%) */
.soth-hsform .hs-form-field:has(.hs-form-checkbox),
.soth-hsform .hs-form-field:has(.hs-form-radio),
.soth-hsform .hs-form-field:has(.hs-form-booleancheckbox),
.soth-hsform .hs-form-field:has(.hs-form-checkbox) > .input,
.soth-hsform .hs-form-field:has(.hs-form-radio) > .input,
.soth-hsform .hs-form-field:has(.hs-form-booleancheckbox) > .input,
.soth-experience-scope .soth-hsform ul.inputs-list:not(.hs-error-msgs) {
  width: 100% !important;
  max-width: 100% !important;
}
.soth-experience-scope .soth-hsform .hs-form-field {
  position: relative; /* anchor for the absolutely-placed error line below */
  float: none !important;
  margin: 0 !important;
  /* reserve a fixed line under every field for the validation message, so the
     form never grows/shifts when HubSpot injects errors on submit */
  padding: 0 0 22px !important;
}
.soth-experience-scope .soth-hsform .hs-form-field > label {
  display: block;
  margin: 0 0 10px !important;
  padding: 0 !important;
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  color: #fff !important;
}
.soth-experience-scope .soth-hsform .hs-form-required {
  color: var(--zelis-solar) !important;
  margin-left: 2px;
}
.soth-experience-scope .soth-hsform .hs-field-desc {
  margin: 0 0 8px !important;
  font-size: 13px;
  line-height: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6) !important;
}
.soth-experience-scope .soth-hsform .input {
  margin: 0 !important;
}
.soth-hsform input.hs-input:not([type="checkbox"]):not([type="radio"]),
.soth-hsform select.hs-input,
.soth-experience-scope .soth-hsform textarea.hs-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(35, 0, 75, 0.2) !important;
  border: 1px solid #fff !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
  color: #fff !important;
  font-family: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}
.soth-hsform input.hs-input::placeholder,
.soth-experience-scope .soth-hsform textarea.hs-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1;
}
.soth-experience-scope .soth-hsform .hs-input:focus {
  border-color: var(--zelis-solar) !important;
}
.soth-experience-scope .soth-hsform select.hs-input {
  appearance: none;
  -webkit-appearance: none;
}
.soth-experience-scope .soth-hsform .hs-input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 5000s ease-in-out 0s;
}

/* checkbox / radio groups (e.g. "Which report would you like to download?") */
.soth-experience-scope .soth-hsform ul.inputs-list:not(.hs-error-msgs) {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-flow: row wrap; /* desktop: options sit in one line */
  gap: 12px 32px;
}
/* phones: back to a stacked list */
.soth-experience-scope #page-root.is-mobile .soth-hsform ul.inputs-list:not(.hs-error-msgs),
.soth-experience-scope #soth-page-root.is-mobile .soth-hsform ul.inputs-list:not(.hs-error-msgs) {
  flex-direction: column;
}
.soth-experience-scope .soth-hsform ul.inputs-list:not(.hs-error-msgs) > li {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
}
.soth-hsform .hs-form-checkbox label,
.soth-hsform .hs-form-radio label,
.soth-experience-scope .soth-hsform .hs-form-booleancheckbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 300;
  color: #fff !important;
  cursor: pointer;
}
.soth-hsform .hs-form-checkbox input,
.soth-hsform .hs-form-radio input,
.soth-experience-scope .soth-hsform .hs-form-booleancheckbox input {
  width: 18px !important;
  height: 18px;
  margin: 0 !important;
  flex: 0 0 auto;
  accent-color: var(--zelis-neon-blue);
}

/* submit button — matches .btn-primary */
.soth-experience-scope .soth-hsform .hs_submit {
  margin-top: 18px; /* breathing room between the consent copy and the CTA */
}
.soth-experience-scope .soth-hsform .hs-submit .actions {
  margin: 0 !important;
  padding: 0 !important;
}
.soth-hsform input.hs-button,
.soth-experience-scope .soth-hsform .hs-button.primary {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  width: auto;
  align-self: flex-start;
  background: var(--zelis-neon-blue) !important;
  color: #fff !important;
  border: 1.5px solid var(--zelis-neon-blue) !important;
  border-radius: 4px !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}
.soth-hsform input.hs-button:hover,
.soth-experience-scope .soth-hsform .hs-button.primary:hover {
  background: #fff !important;
  color: var(--zelis-neon-blue) !important;
  border-color: var(--zelis-neon-blue) !important;
}
/* phones: full-width CTA (top spacing is shared with desktop via .hs_submit) */
#page-root.is-mobile .soth-hsform input.hs-button,
.soth-experience-scope #page-root.is-mobile .soth-hsform .hs-button.primary,
.soth-experience-scope #soth-page-root.is-mobile .soth-hsform .hs-button.primary {
  display: block;
  width: 100% !important;
  align-self: stretch;
  text-align: center;
}

/* consent / rich-text (GDPR notice, "Select all that apply.", etc.) */
.soth-hsform .hs-richtext,
.soth-hsform .legal-consent-container,
.soth-experience-scope .soth-hsform .hs-form-field > legend {
  font-size: 13px;
  line-height: 19px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7) !important;
}
.soth-hsform .hs-richtext a,
.soth-experience-scope .soth-hsform .legal-consent-container a {
  color: #fff;
  text-decoration: underline;
}

/* Thank-you state: HubSpot swaps the whole form out for its inline message, which
   carries none of the field classes above — so style it explicitly or it renders as
   dark unstyled text on the purple field. */
.soth-experience-scope .soth-hsform .submitted-message {
  background: transparent;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0;
}
.soth-experience-scope .soth-hsform .submitted-message > *:first-child {
  margin-top: 0;
}
.soth-hsform .submitted-message h1,
.soth-hsform .submitted-message h2,
.soth-hsform .submitted-message h3,
.soth-experience-scope .soth-hsform .submitted-message h4 {
  margin: 0;
  font-size: 40px;
  line-height: 46px;
  font-weight: 400;
  color: #fff;
}
.soth-experience-scope .soth-hsform .submitted-message p {
  margin: 0;
  font-size: 17px;
  line-height: 26px;
  font-weight: 300;
}
/* The message body is authored in HubSpot's rich-text editor, which bakes colours
   into INLINE styles (white backgrounds, near-black text) — those beat any external
   rule, so the copy renders as white blocks on the purple field. !important is the
   only way to reclaim it, and the message is plain prose so nothing is lost. */
.soth-hsform .submitted-message,
.soth-experience-scope .soth-hsform .submitted-message * {
  background: transparent !important;
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.soth-hsform .submitted-message h1,
.soth-hsform .submitted-message h2,
.soth-hsform .submitted-message h3,
.soth-hsform .submitted-message h4,
.soth-hsform .submitted-message strong,
.soth-experience-scope .soth-hsform .submitted-message b {
  color: #fff !important;
}
.soth-hsform .submitted-message strong,
.soth-experience-scope .soth-hsform .submitted-message b {
  font-weight: 500;
}
.soth-experience-scope .soth-hsform .submitted-message a {
  color: var(--zelis-solar) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.soth-experience-scope .soth-hsform .submitted-message a:hover {
  color: #fff !important;
}

/* validation messages */
.soth-experience-scope .soth-hsform .hs-error-msgs {
  list-style: none;
  /* sit in the reserved line at the bottom of the field — out of flow, so
     showing/hiding it never changes the form's height */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  margin: 0 !important;
  padding: 0 !important;
}
.soth-hsform .hs-error-msg,
.soth-experience-scope .soth-hsform label.hs-error-msg {
  color: #ff9db0 !important;
  font-size: 13px !important;
  font-weight: 300 !important;
}
.soth-experience-scope .soth-hsform .hs_error_rollup {
  display: none;
}

/* Collapse hidden-value rows (UTM, context, etc.). HubSpot hides the field
   itself, but its wrapping <fieldset> still consumes a 22px flex gap — killing
   the spacing between the last visible field, the consent copy and the button.
   Hide any fieldset that has no *visible* control. */
.soth-hsform
  .soth-experience-scope fieldset:has(input[type="hidden"]):not(:has(input:not([type="hidden"]))):not(:has(select)):not(:has(textarea)) {
  display: none !important;
}
.soth-experience-scope .soth-hsform .hs-form-field:has(> .input > input[type="hidden"]:only-child) {
  display: none;
}

/* First-screen "scroll to play" cue — smooth, premium bouncing chevron */
@keyframes scrollChevron {
  0%   { transform: translateY(-5px); opacity: 0.45; }
  50%  { transform: translateY(6px);  opacity: 1; }
  100% { transform: translateY(-5px); opacity: 0.45; }
}
.soth-experience-scope .scroll-chevron,
.soth-experience-scope .soth-scroll-chevron {
  animation: scrollChevron 1.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-chevron { animation: none; opacity: 0.85; }
}

/* --- host-theme guard (must come last to win) --- */
.soth-experience-scope,
.soth-experience-scope * {
  font-family: var(--font-avenir) !important;
  letter-spacing: normal;
  text-transform: none;
  font-style: normal;
}
.soth-experience-scope i,
.soth-experience-scope em,
.soth-experience-scope cite {
  font-style: italic;
}