/* =========================================================================
   Structured section styles.

   The palette is the ramp measured from the SaviorPay logo artwork, nothing
   invented: #3d5aa8 ecosystem blue, #00aeef accent, #1c75bc mid, #73a6d9
   light, #a3dce9 pale. Accent-as-text on light grounds uses #0076a2, which
   measures 5.11:1 — the raw accent is 2.53:1 and fails.

   Type is Manrope for display and Inter for text, both self-hosted variable
   fonts. The scale is fluid so tablet and narrow mobile are designed states
   rather than whatever the desktop layout collapses into.
   ====================================================================== */

:root {
  --spx-blue:      #3d5aa8;
  --spx-blue-deep: #334c8e;
  --spx-mid:       #1c75bc;
  --spx-accent:    #00aeef;
  --spx-accent-tx: #0076a2;
  --spx-light:     #73a6d9;
  --spx-pale:      #a3dce9;

  --spx-ink:   #0f172a;
  --spx-body:  #475569;
  --spx-muted: #64748b;

  --spx-paper: #ffffff;
  --spx-tint:  #f4f7fc;
  --spx-line:  #dde5f2;
  --spx-navy:  #0b1730;
  --spx-navy2: #132441;

  --spx-measure: 62ch;
  --spx-wrap: min(1200px, calc(100% - 48px));

  --spx-r-sm: 12px;
  --spx-r-md: 20px;
  --spx-r-lg: 28px;

  --spx-shadow:   0 1px 2px rgba(15,23,42,.04), 0 12px 32px -20px rgba(15,23,42,.30);
  --spx-shadow-l: 0 2px 4px rgba(15,23,42,.05), 0 28px 60px -32px rgba(15,23,42,.40);
}

/* Images carry width/height attributes so the browser can reserve space and
   avoid layout shift. But a height attribute is a presentational hint that
   sets a used height, and aspect-ratio only governs the box when the other
   dimension is auto — so without this the attribute wins and the ratio is
   ignored. Anything that opts into an explicit height overrides this. */
.sp-x img { height: auto; }

/* ---------- shell ---------- */
.sp-x { padding: clamp(56px, 7vw, 108px) 0; }
.sp-x-wrap { width: var(--spx-wrap); margin: 0 auto; }

/* ---------- type ---------- */
.sp-x-eyebrow {
  margin: 0 0 16px;
  font-family: Inter, system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--spx-accent-tx);
}
.sp-x-display {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(2.35rem, 1.2rem + 3.6vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--spx-ink);
  text-wrap: balance;
}
.sp-x-title {
  margin: 0;
  font-family: Manrope, system-ui, sans-serif;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 800;
  color: var(--spx-ink);
  text-wrap: balance;
  max-width: 22ch;
}
.sp-x-lead {
  margin: 20px 0 0;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem);
  line-height: 1.72;
  color: var(--spx-body);
  max-width: var(--spx-measure);
}
.sp-x-lead--hero { font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); }

.sp-x-sectionhead { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sp-x-sectionhead--dark .sp-x-title { color: #fff; }
.sp-x-sectionhead--dark .sp-x-lead { color: rgba(255,255,255,.78); }
.sp-x-sectionhead--dark .sp-x-eyebrow { color: var(--spx-pale); }

/* ---------- buttons ---------- */
.sp-x-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.sp-x-ctas--center { justify-content: center; }
.sp-x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 26px;
  border-radius: 999px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.sp-x-btn--primary {
  background: var(--spx-blue); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(61,90,168,.75);
}
.sp-x-btn--primary:hover { background: var(--spx-blue-deep); transform: translateY(-1px); }
.sp-x-btn--ghost {
  background: #fff; color: var(--spx-ink); border: 1.5px solid var(--spx-line);
}
.sp-x-btn--ghost:hover { border-color: var(--spx-blue); color: var(--spx-blue); }
.sp-x-btn--accent { background: var(--spx-accent); color: var(--spx-ink); }
.sp-x-btn--accent:hover { transform: translateY(-1px); }
.sp-x-btn--onDark { background: #fff; color: var(--spx-ink); }
.sp-x-btn--onDarkGhost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.sp-x-btn--onDarkGhost:hover { border-color: #fff; }
.sp-x-btn:focus-visible { outline: 3px solid var(--spx-accent-tx); outline-offset: 3px; }

/* ---------- hero ---------- */
.sp-x--hero {
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(115,166,217,.20), transparent 62%),
    linear-gradient(180deg, var(--spx-tint) 0%, #fff 78%);
  padding-top: clamp(44px, 5vw, 84px);
  padding-bottom: clamp(44px, 4.5vw, 72px);
}
.sp-x-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.sp-x-hero__media {
  margin: 0; border-radius: var(--spx-r-lg); overflow: hidden;
  box-shadow: var(--spx-shadow-l);
  background: var(--spx-navy);
}
.sp-x-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sp-x-stats {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  margin: 40px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--spx-line);
}
.sp-x-stats div { display: grid; gap: 4px; }
.sp-x-stats dt { order: 2; font-size: .84rem; color: var(--spx-muted); font-weight: 600; }
.sp-x-stats dd {
  order: 1; margin: 0;
  font-family: Manrope, sans-serif; font-weight: 800;
  font-size: 1.55rem; line-height: 1; color: var(--spx-blue);
  font-variant-numeric: tabular-nums;
}

/* ---------- trust bar ---------- */
.sp-x--trust { padding: 0; }
.sp-x--trust .sp-x-wrap {
  border-block: 1px solid var(--spx-line);
  padding: 22px 0;
}
.sp-x-trust__list {
  display: flex; flex-wrap: wrap; gap: 16px 52px;
  margin: 0; padding: 0; list-style: none;
}
.sp-x-trust__list li { display: flex; align-items: baseline; gap: 10px; }
.sp-x-trust__list strong {
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem;
  color: var(--spx-ink);
}
.sp-x-trust__list span { color: var(--spx-muted); font-size: .93rem; }

/* ---------- problem ---------- */
.sp-x--problem { background: var(--spx-paper); }
.sp-x-problem__grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;   /* the copy column must not stretch into dead space */
}
.sp-x-problem__points { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.sp-x-problem__points li {
  display: grid; gap: 7px;
  padding: 22px 0;
  border-top: 1px solid var(--spx-line);
}
.sp-x-problem__points li:last-child { border-bottom: 1px solid var(--spx-line); }
.sp-x-problem__points strong {
  font-family: Manrope, sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--spx-ink);
}
.sp-x-problem__points span { color: var(--spx-body); line-height: 1.7; }

/* ---------- cards ---------- */
.sp-x--pillars { background: var(--spx-tint); }
.sp-x-cards { display: grid; gap: 20px; }
.sp-x-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-x-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-x-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 30px 28px 26px;
  background: #fff; border: 1px solid var(--spx-line);
  border-radius: var(--spx-r-md);
  text-decoration: none; color: inherit;
  box-shadow: var(--spx-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.sp-x-card:hover { transform: translateY(-3px); border-color: var(--spx-light); box-shadow: var(--spx-shadow-l); }
a.sp-x-card:focus-visible { outline: 3px solid var(--spx-accent-tx); outline-offset: 3px; }
.sp-x-card__kicker {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--spx-accent-tx);
}
.sp-x-card h3 {
  margin: 0; font-family: Manrope, sans-serif;
  font-size: 1.26rem; line-height: 1.22; font-weight: 700; color: var(--spx-ink);
}
.sp-x-card p { margin: 0; color: var(--spx-body); line-height: 1.68; font-size: .98rem; }
.sp-x-card__go { margin-top: auto; padding-top: 12px; color: var(--spx-blue); font-weight: 800; }

/* ---------- stories (dark) ---------- */
.sp-x--stories { background: linear-gradient(180deg, var(--spx-navy) 0%, var(--spx-navy2) 100%); }
.sp-x-stories__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.sp-x-story {
  display: flex; flex-direction: column;
  border-radius: var(--spx-r-md); overflow: hidden;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.13);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
a.sp-x-story:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(163,220,233,.45); }
a.sp-x-story:focus-visible { outline: 3px solid var(--spx-pale); outline-offset: 3px; }
.sp-x-story__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sp-x-story__body { padding: 24px 26px 28px; display: grid; gap: 9px; }
.sp-x-story__merchant {
  font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--spx-pale);
}
.sp-x-story h3 {
  margin: 0; font-family: Manrope, sans-serif; font-size: 1.24rem; line-height: 1.25;
  font-weight: 700; color: #fff;
}
.sp-x-story p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.7; font-size: .98rem; }

/* ---------- video ---------- */
.sp-x--video { background: var(--spx-paper); }
.sp-x-videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sp-x-video { margin: 0; display: grid; gap: 14px; }
.sp-x-video video {
  /* The footage and its poster frames are both 16:9. Forcing a portrait box
     cropped the poster and let the frame beneath it show through. */
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--spx-r-md); background: var(--spx-navy);
  box-shadow: var(--spx-shadow);
  display: block;
}
.sp-x-video figcaption { display: grid; gap: 3px; }
.sp-x-video figcaption strong { font-family: Manrope, sans-serif; font-size: 1.02rem; color: var(--spx-ink); }
.sp-x-video figcaption span { color: var(--spx-muted); font-size: .92rem; line-height: 1.6; }

/* ---------- split ---------- */
.sp-x--split { background: var(--spx-paper); }
.sp-x--split.is-flipped { background: var(--spx-tint); }
.sp-x-split__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.sp-x--split.is-flipped .sp-x-split__media { order: -1; }
.sp-x-split__media {
  margin: 0; border-radius: var(--spx-r-lg); overflow: hidden; box-shadow: var(--spx-shadow-l);
}
.sp-x-split__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.sp-x-ticks { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.sp-x-ticks li { position: relative; padding-left: 34px; line-height: 1.68; color: var(--spx-body); }
.sp-x-ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--spx-accent);
  box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--spx-accent);
}
.sp-x-ticks strong { color: var(--spx-ink); font-weight: 700; }

/* ---------- mission band ---------- */
.sp-x--mission {
  background:
    radial-gradient(760px 400px at 12% 0%, rgba(0,174,239,.18), transparent 60%),
    linear-gradient(135deg, var(--spx-blue-deep) 0%, var(--spx-blue) 55%, var(--spx-mid) 100%);
  color: #fff;
}
.sp-x-mission__inner { max-width: 72ch; }
.sp-x-mission__inner .sp-x-title { color: #fff; }
.sp-x-mission__inner .sp-x-lead { color: rgba(255,255,255,.86); }
.sp-x-mission__inner .sp-x-eyebrow { color: var(--spx-pale); }
.sp-x-mission__note {
  margin: 26px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.72);
  max-width: 68ch;
}

/* ---------- faq ---------- */
.sp-x--faq { background: var(--spx-paper); }
.sp-x-faq__grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 68px); align-items: start;
}
.sp-x--faq .sp-x-sectionhead { margin-bottom: 0; }
.sp-x-faq__list { display: grid; gap: 2px; }
.sp-x-faq__list details { border-top: 1px solid var(--spx-line); padding: 4px 0; }
.sp-x-faq__list details:last-child { border-bottom: 1px solid var(--spx-line); }
.sp-x-faq__list summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.06rem;
  color: var(--spx-ink); line-height: 1.4;
}
.sp-x-faq__list summary::-webkit-details-marker { display: none; }
.sp-x-faq__list summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--spx-blue); line-height: 1;
}
.sp-x-faq__list details[open] summary::after { content: "\2212"; }
.sp-x-faq__list summary:focus-visible { outline: 3px solid var(--spx-accent-tx); outline-offset: 2px; border-radius: 4px; }
.sp-x-faq__list p { margin: 0 0 20px; color: var(--spx-body); line-height: 1.75; max-width: var(--spx-measure); }

/* ---------- closing cta ---------- */
.sp-x--cta { background: var(--spx-tint); }
.sp-x-cta__inner { text-align: center; display: grid; justify-items: center; }
.sp-x-cta__inner .sp-x-title { max-width: 20ch; }
.sp-x-cta__inner .sp-x-lead { margin-inline: auto; }

/* =========================================================================
   Responsive. Tablet, mobile and narrow mobile are designed states.
   ====================================================================== */

@media (max-width: 1080px) {
  :root { --spx-wrap: min(1200px, calc(100% - 40px)); }
  .sp-x-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-x-videos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .sp-x-faq__grid { grid-template-columns: 1fr; }
  .sp-x--faq .sp-x-sectionhead { margin-bottom: 24px; }
}

@media (max-width: 860px) {
  .sp-x-hero__grid,
  .sp-x-problem__grid,
  .sp-x-split__grid { grid-template-columns: 1fr; }
  .sp-x--split.is-flipped .sp-x-split__media { order: 0; }
  .sp-x-hero__media img { aspect-ratio: 16 / 10; }
  .sp-x-cards--3, .sp-x-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-x-stories__grid { grid-template-columns: 1fr; }
  .sp-x-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-x-title { max-width: none; }
}

@media (max-width: 600px) {
  :root { --spx-wrap: calc(100% - 32px); }
  .sp-x { padding: 52px 0; }
  .sp-x-cards--3, .sp-x-cards--4 { grid-template-columns: 1fr; }
  .sp-x-videos { grid-template-columns: 1fr; gap: 26px; }
  .sp-x-video video { aspect-ratio: 16 / 9; }
  .sp-x-ctas { gap: 10px; }
  .sp-x-btn { width: 100%; }         /* thumb-reachable, no mis-taps */
  .sp-x-stats { gap: 18px 32px; }
  .sp-x-trust__list { gap: 12px 28px; }
}

@media (max-width: 380px) {
  :root { --spx-wrap: calc(100% - 24px); }
  .sp-x-card { padding: 24px 20px; }
  .sp-x-story__body { padding: 20px; }
  .sp-x-stats { flex-direction: column; gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-x-btn, .sp-x-card, .sp-x-story { transition: none; }
  a.sp-x-card:hover, a.sp-x-story:hover, .sp-x-btn:hover { transform: none; }
}

/* =========================================================================
   Campaign sections
   ====================================================================== */

/* ---------- numbered process ---------- */
.sp-x--steps { background: var(--spx-tint); }
.sp-x-steps { list-style: none; margin: 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 44px; }
.sp-x-steps li {
  display: grid; grid-template-columns: 46px 1fr; gap: 18px;
  align-items: start; padding: 24px 0; border-top: 1px solid var(--spx-line);
}
.sp-x-steps__n {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--spx-blue); color: #fff;
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}
.sp-x-steps strong {
  display: block; font-family: Manrope, sans-serif; font-size: 1.1rem;
  font-weight: 700; color: var(--spx-ink); line-height: 1.3;
}
.sp-x-steps p { margin: 8px 0 0; color: var(--spx-body); line-height: 1.7; }

/* ---------- pull quote ---------- */
.sp-x--quote { background: var(--spx-paper); padding-block: clamp(44px, 5vw, 76px); }
.sp-x-quote { margin: 0; max-width: 60ch; padding-left: 28px; border-left: 4px solid var(--spx-accent); }
.sp-x-quote p {
  margin: 0; font-family: Manrope, sans-serif; font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.42;
  letter-spacing: -.02em; color: var(--spx-ink); text-wrap: balance;
}
.sp-x-quote cite {
  display: block; margin-top: 18px; font-style: normal;
  font-size: .93rem; color: var(--spx-muted);
}

/* ---------- form ---------- */
.sp-x--form { background: var(--spx-paper); }
.sp-x-form__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.sp-x-form__note {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--spx-line);
  font-size: .92rem; line-height: 1.7; color: var(--spx-muted); max-width: 56ch;
}
.sp-x-form__panel {
  background: var(--spx-tint); border: 1px solid var(--spx-line);
  border-radius: var(--spx-r-lg); padding: clamp(24px, 3vw, 36px);
}
.sp-x-form-fields { display: grid; gap: 16px; }
.sp-x-form-fields label { display: grid; gap: 7px; }
.sp-x-form-fields label > span {
  font-size: .88rem; font-weight: 600; color: var(--spx-ink);
}
.sp-x-form-fields label > span em { color: var(--spx-accent-tx); font-style: normal; }
.sp-x-form-fields input[type="text"],
.sp-x-form-fields input[type="email"],
.sp-x-form-fields input[type="tel"],
.sp-x-form-fields textarea {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--spx-line); border-radius: var(--spx-r-sm);
  background: #fff; color: var(--spx-ink);
  font-family: Inter, system-ui, sans-serif; font-size: 1rem; line-height: 1.4;
}
.sp-x-form-fields input:focus-visible,
.sp-x-form-fields textarea:focus-visible {
  outline: 3px solid var(--spx-accent-tx); outline-offset: 1px; border-color: var(--spx-blue);
}
.sp-x-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sp-x-form-fields fieldset {
  margin: 4px 0 0; padding: 0; border: 0; display: grid; gap: 11px;
}
.sp-x-form-fields legend {
  padding: 0 0 11px; font-size: .88rem; font-weight: 600; color: var(--spx-ink);
}
.sp-x-check { grid-template-columns: auto 1fr; align-items: start; gap: 11px !important; }
.sp-x-check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--spx-blue); }
.sp-x-check span { font-weight: 400 !important; color: var(--spx-body) !important; line-height: 1.55; }
.sp-x-form-fields button { margin-top: 6px; width: 100%; }
.sp-x-form-small {
  margin: 0; font-size: .84rem; line-height: 1.6; color: var(--spx-muted);
}

.sp-x-notice {
  margin: 0 0 20px; padding: 16px 18px; border-radius: var(--spx-r-sm);
  border: 1px solid; line-height: 1.6;
}
.sp-x-notice--ok  { background: #eef6f2; border-color: #b9dcca; color: #14503a; }
.sp-x-notice--err { background: #fdf0ef; border-color: #f0c8c4; color: #8a2018; }

@media (max-width: 860px) {
  .sp-x-steps { grid-template-columns: 1fr; gap: 0; }
  .sp-x-form__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sp-x-form-row { grid-template-columns: 1fr; }
  .sp-x-steps li { grid-template-columns: 34px 1fr; gap: 14px; }
  .sp-x-steps__n { width: 32px; height: 32px; font-size: .9rem; }
}