/* Propzora Pay: stacked-card section (landing page) */
.lp-pay {
  --lp-gutter: max(24px, calc((100vw - 1200px) / 2 + 24px));
  --lp-cw: min(78vw, 340px);
  --lp-gap: 18px;
  background: #f0f5ff;
  padding: 80px 0 72px;
  overflow: hidden;
}
@media (max-width: 768px) { .lp-pay { padding: 60px 0 56px; } }

.lp-pay__head { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.lp-pay__head .s-sub { margin-bottom: 32px; max-width: 600px; }

.lp-pay__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 30px;
  outline: none;
  cursor: grab;
}
.lp-pay__scroller::-webkit-scrollbar { display: none; }
.lp-pay__scroller:focus-visible { box-shadow: inset 0 0 0 2px rgba(30,58,138,0.35); }
.lp-pay__scroller.is-dragging { cursor: grabbing; }

/* The track is as wide as all its cards, so every sticky card can stay pinned until the end. */
.lp-pay__track {
  display: flex;
  align-items: stretch;
  gap: var(--lp-gap);
  width: max-content;
  min-width: 100%;
  padding-left: var(--lp-gutter);
}
.lp-pay__end { flex: 0 0 0; height: 1px; }

/* Each card pins to the left edge; the next card slides over it. */
.lp-pcard {
  --cover: 0;
  position: sticky;
  left: var(--lp-gutter);
  flex: 0 0 var(--lp-cw);
  width: var(--lp-cw);
  min-height: calc(var(--lp-cw) * 1.68);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  color: #0f1f4d;
  border: 1px solid rgba(30,58,138,0.08);
  box-shadow: 0 16px 36px -16px rgba(30,58,138,0.38), 0 2px 8px rgba(30,58,138,0.08);
  transform-origin: left center;
  transform: scale(calc(1 - var(--cover) * 0.13));
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.lp-pcard--transfer { background: linear-gradient(165deg, #dff4ff 0%, #dbeafe 55%, #fbe7f3 100%); }
.lp-pcard--split    { background: linear-gradient(165deg, #e0f2fe 0%, #e0e7ff 55%, #f5e1f5 100%); }
.lp-pcard--request  { background: linear-gradient(165deg, #eef6ff 0%, #dbeafe 55%, #e6defa 100%); }
.lp-pcard--schedule { background: linear-gradient(165deg, #e8f5ff 0%, #d9e6fb 55%, #efe2f6 100%); }

.lp-pcard__bg { position: absolute; inset: 0; z-index: -3; }
.lp-pcard__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-pcard__ph {
  display: none;
  position: absolute;
  top: 22px; left: 22px; right: 22px;
  height: 44%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  border: 1.5px dashed rgba(30,58,138,0.28);
  border-radius: 16px;
  background: repeating-linear-gradient(135deg, rgba(30,58,138,0.04) 0 10px, transparent 10px 20px);
  color: rgba(30,58,138,0.6);
}
.lp-pcard__ph svg { width: 28px; height: 28px; opacity: 0.7; }
.lp-pcard__ph b { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; }
.lp-pcard__ph span { font-size: 11px; line-height: 1.4; opacity: 0.8; }
.lp-pcard__bg.is-empty img { display: none; }
.lp-pcard__bg.is-empty .lp-pcard__ph { display: flex; }

.lp-pcard__scrim {
  position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(180deg, rgba(244,248,255,0) 30%, rgba(244,248,255,0.82) 62%, rgba(244,248,255,0.96) 100%);
}
/* Greys the card out as the next one covers it */
.lp-pcard__veil {
  position: absolute; inset: 0; z-index: 3;
  background: #dbe3f3;
  opacity: calc(var(--cover) * 0.6);
  pointer-events: none;
}

.lp-pcard__badge {
  position: absolute; top: 18px; right: 18px; z-index: 2;
  background: #1e3a8a; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px -4px rgba(30,58,138,0.5);
}

.lp-pcard__body { z-index: 2; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; }
.lp-pcard__eyebrow { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #1e3a8a; }
.lp-pcard .lp-pcard__title { font-size: 26px; font-weight: 800; line-height: 1.12; letter-spacing: -0.6px; color: #162a6e; margin: 0; }
.lp-pcard__text { font-size: 14px; line-height: 1.6; color: #475569; margin: 0; }
.lp-pcard__cta {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  margin-top: 6px; padding: 13px 22px;
  border: 1.5px solid #1e3a8a; border-radius: 999px;
  color: #1e3a8a; font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background 0.2s;
}
.lp-pcard__cta svg { width: 16px; height: 16px; flex-shrink: 0; }
.lp-pcard__cta:hover { background: rgba(30,58,138,0.08); }
.lp-pcard__cta:focus-visible { outline: 3px solid rgba(30,58,138,0.45); outline-offset: 3px; }
/* Whole card is clickable */
.lp-pcard__cta::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }

.lp-pay__nav { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 14px; }
.lp-pay__btn {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: #1e3a8a; color: #fff; cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(30,58,138,0.7);
  transition: transform 0.12s, opacity 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.lp-pay__btn svg { width: 20px; height: 20px; }
.lp-pay__btn:hover:not(:disabled) { background: #162d6e; }
.lp-pay__btn:active:not(:disabled) { transform: scale(0.92); }
.lp-pay__btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.lp-pay__btn:focus-visible { outline: 3px solid rgba(30,58,138,0.4); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .lp-pay__btn, .lp-pcard__cta { transition: none; }
}

@media (max-width: 480px) {
  .lp-pcard__body { padding: 20px 18px; gap: 8px; }
  .lp-pcard__eyebrow { font-size: 14px; }
  .lp-pcard .lp-pcard__title { font-size: 22px; letter-spacing: -0.4px; }
  .lp-pcard__text { font-size: 13.5px; line-height: 1.55; }
  .lp-pcard__cta { padding: 11px 18px; font-size: 13.5px; margin-top: 4px; }
}

/* ── Card illustrations: sit in the empty glass-slab space above the text, over the background image ── */
.lp-pcard__art {
  position: absolute; left: 0; right: 0; top: 4%; height: 42%;
  z-index: -1; pointer-events: none;
  container-type: inline-size;
  --a:#1E3A8A; --t:#1E3A8A; --hi:#1E3A8A; --line:#d5ddf0; --cell:#dfe6f4; --mute:#5f6f98; --sh:rgba(30,58,138,.15);
}
.lp-pcard--split    .lp-pcard__art { --a:#6D28D9; --t:#6D28D9; --hi:#6D28D9; --line:#e0d7f3; --cell:#e8e0f7; --mute:#76679c; --sh:rgba(109,40,217,.14); }
.lp-pcard--request  .lp-pcard__art { --a:#17803D; --t:#17803D; --hi:#17803D; --line:#d3e7da; --cell:#dbeee2; --mute:#5b7a67; --sh:rgba(23,128,61,.15); }
.lp-pcard--schedule .lp-pcard__art { --a:#F5B301; --t:#1E3A8A; --hi:#F5B301; --on:#1c1400; --line:#efe3c3; --cell:#f5ecd5; --mute:#8a7a4d; --sh:rgba(183,121,0,.16); }

.lpa-doc {
  position: absolute; left: 21%; right: 21%; top: 3%; bottom: -14%;
  padding: 3.9cqw 4.1cqw;
  border-radius: 2.9cqw;
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.5));
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 2.4cqw 7cqw var(--sh);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 92%);
  mask-image: linear-gradient(#000 55%, transparent 92%);
}
.lpa-t { font-size: 7.5cqw; font-weight: 500; color: var(--t); letter-spacing: -.02em; line-height: 1.15; margin-bottom: 2.9cqw; }
.lpa-l { height: 1.33cqw; border-radius: 1.2cqw; background: var(--line); margin: 1.9cqw 0; filter: blur(.3px); }
.lpa-field { display: flex; align-items: center; gap: .7cqw; height: 9cqw; padding: 0 2.7cqw; border-radius: 2.2cqw; background: #f0f3fb; border: .4cqw solid #F5B301; font-size: 4.1cqw; color: var(--mute); }
.lpa-cur { display: inline-block; width: .5cqw; height: 4.1cqw; background: #F5B301; animation: lpa-blink 1s steps(1) infinite; }
.lpa-btn { height: 8cqw; border-radius: 2.4cqw; background: var(--a); color: var(--on,#fff); display: grid; place-items: center; font-size: 3.6cqw; font-weight: 600; margin-top: 4.1cqw; }
.lpa-chip {
  position: absolute; display: flex; align-items: center; gap: 1.5cqw; white-space: nowrap;
  padding: max(6px,1.8cqw) max(12px,3.4cqw) max(6px,1.8cqw) max(10px,2.7cqw); border-radius: 99px;
  font-size: max(11.5px,3.4cqw); font-weight: 500; line-height: 1.2; color: #0b0b0d;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 1.5cqw 4.2cqw var(--sh);
  opacity: 0;
  animation: lpa-pop 8s cubic-bezier(.2,.7,.2,1) infinite;
}
.lpa-chip svg { width: 1.15em; height: 1.15em; flex: none; stroke: var(--ic, var(--a)); }
.lpa-chip--on { background: var(--a); color: var(--on,#fff); }
.lpa-chip--on svg { stroke: var(--on,#fff); }
@keyframes lpa-pop {
  0% { opacity: 0; transform: translateY(2.2cqw) scale(.94); }
  8%, 80% { opacity: 1; transform: none; }
  90%, 100% { opacity: 0; transform: translateY(-1.3cqw); }
}
@keyframes lpa-blink { 50% { opacity: 0; } }
/* Pause while a card is buried under the next one */
.lp-pcard[inert] .lpa-chip, .lp-pcard[inert] .lpa-cur { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lpa-chip { animation: none; opacity: 1; transform: none; }
  .lpa-cur { animation: none; }
}

/* Split Pay pieces */
.lpa-amt { font-size: 6.5cqw; font-weight: 600; color: var(--t); letter-spacing: -.02em; line-height: 1.2; }
.lpa-bar { display: flex; gap: 1cqw; margin-top: 3.6cqw; }
.lpa-bar i { flex: 1; height: 3.1cqw; border-radius: 2.4cqw; transform-origin: left; animation: lpa-grow 8s ease-out infinite; }
.lpa-legend { display: flex; gap: 2.9cqw; margin-top: 3.9cqw; }
.lpa-legend span { flex: 1; display: flex; align-items: center; gap: 1.2cqw; }
.lpa-legend b { width: 2.9cqw; height: 2.9cqw; border-radius: 50%; flex: none; }
.lpa-legend u { flex: 1; height: 1.33cqw; border-radius: 1.2cqw; background: var(--line); }
@keyframes lpa-grow { 0% { transform: scaleX(0); } 12%, 80% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
.lp-pcard[inert] .lpa-bar i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lpa-bar i { animation: none; transform: none; } }

/* Request + Schedule pieces */
.lpa-who { display: flex; align-items: center; gap: 2.4cqw; margin-top: 1cqw; }
.lpa-who b { width: 7.3cqw; height: 7.3cqw; border-radius: 50%; background: var(--line); flex: none; }
.lpa-who div { flex: 1; }
.lpa-who .lpa-l { margin: 0 0 1.2cqw; }
.lpa-who .lpa-l + .lpa-l { margin: 0; }
.lpa-track { height: 2.9cqw; border-radius: 2.4cqw; background: var(--cell); margin-top: 3.6cqw; overflow: hidden; }
.lpa-fill { height: 100%; border-radius: 2.4cqw; background: var(--a); transform-origin: left; animation: lpa-grow 8s ease-out infinite 4.6s; }
.lpa-mon { font-size: 3.6cqw; font-weight: 600; color: var(--t); }
.lpa-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.1cqw; margin-top: 2.9cqw; }
.lpa-cal i { aspect-ratio: 1; border-radius: 1.1cqw; background: var(--cell); display: grid; place-items: center; font-style: normal; font-size: max(8px, 2.5cqw); font-weight: 500; color: var(--mute); }
.lpa-cal i.td { box-shadow: inset 0 0 0 .42cqw #2F6FED; color: #0b0b0d; }
.lpa-cal i.h { color: #1c1400; font-weight: 600; animation: lpa-hl 8s infinite; }
@keyframes lpa-hl { 0%, 20% { background: var(--cell); } 30%, 80% { background: var(--hi); } 90%, 100% { background: var(--cell); } }
.lp-pcard[inert] .lpa-fill, .lp-pcard[inert] .lpa-cal i.h { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .lpa-fill { animation: none; transform: none; } .lpa-cal i.h { animation: none; background: var(--hi); } }