/* ============================================================================
   FINNECT CAPITAL — SCROLL-DRIVEN CARD DECK

   A stack of cards driven by scroll position: the active card sits in front,
   the next one waits behind it, and the one you have just left slides off to
   the LEFT and recedes back into the stack. Scroll up and it all runs in
   reverse, frame for frame.

   Used in two places:
     • index.html    — the four lender categories
     • products.html — every product row from Home Loan down

   Progress comes from scroll POSITION, never accumulated events, so it is
   stateless and exactly reversible.

   PROGRESSIVE ENHANCEMENT
   Nothing here is hidden by default. The deck layout only applies once
   finnect-deck.js adds `.fd-live` to the stage, so no JS (or any thrown error)
   leaves the original grid/rows exactly as they are today.
   ========================================================================== */

.fd-track { position: relative; }
.fd-pin {
  position: -webkit-sticky;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Fill the viewport and centre the deck in it. Without this the pinned block
     is only as tall as one card, leaving a large empty pane beneath it for the
     whole length of the track. */
  min-height: min(620px, calc(100vh - 130px));
}

/* REQUIRED ON EVERY SCREEN SIZE, phones included.
   finone.css sets `overflow-x: hidden` on html/body, which makes body a scroll
   container and silently kills `position: sticky`. Without this override the
   pin does not stick: it scrolls away immediately while the tall scroll track
   remains, so the visitor scrolls through screens of blank white.
   `overflow-x: clip` blocks horizontal scrolling identically but does NOT
   create a scroll container. Do not scope this to desktop. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* ---- the stage ---------------------------------------------------------- */
/* NO 3D CONTEXT HERE — deliberately.
   This used to set `perspective` with `preserve-3d` + translateZ/rotateY on the
   cards. Inside a 3D rendering context the browser paints by real 3D geometry
   and `z-index` stops being authoritative, so the cards fought their own
   z-indexes and flipped paint order as they crossed — visible as flicker, and
   worst when something forced a restack (opening the Products dropdown).
   Plain 2D translate + scale keeps z-index in charge, is stable, and is
   cheaper to composite. */
.fd-stage { position: relative; width: 100%; }

/* Measuring pass. The promoted card styles (bigger padding, larger type) only
   exist under `.fd-live`, so measuring with the deck switched off returned the
   OLD small tile height and the stage came out far too short. This lets the JS
   measure cards at their real, promoted size while still in normal flow. */
.fd-stage.fd-measuring { height: auto !important; }
.fd-stage.fd-measuring > .fd-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}

/* Cards only become absolutely stacked once the deck is live. Until then they
   sit in their original grid/flow and look exactly as they do today. */
.fd-live > .fd-card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  width: var(--fd-w, min(420px, 86%));
  will-change: transform, opacity;
  /* No transition — every frame is positioned directly from scroll position.
     A transition here would make the deck lag behind the page. The white
     ::after veil that used to dim back cards was removed: it was a solid white
     sheet at up to 0.82 opacity, and it flashed as cards moved. Card opacity
     does the same job with no white flash and one less composited layer. */
}

/* Only the front card is interactive — you can't click what's behind. */
.fd-live > .fd-card { pointer-events: none; }
.fd-live > .fd-card.fd-front { pointer-events: auto; }

/* (The lender grid is no longer decked — its deck-card styling was removed. The
   home-page .lender-grid renders as the plain responsive grid from finone.css.) */

/* ---- product rows ------------------------------------------------------- */
/* A deck card is ~940px wide, which is under finone.css's 980px breakpoint, so
   .frow was stacking to ONE column inside the card and ballooning to ~950px
   tall — far taller than a short viewport can pin. Keep two columns inside the
   deck and tighten the typography so the card fits without being scaled down. */
.fd-live > .fd-card.frow {
  background: #fff;
  border-radius: 22px;
  padding: 32px;
  margin-bottom: 0;
  box-shadow: 0 30px 70px -24px rgba(18, 24, 26, .26), var(--sh-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
}
.fd-live > .fd-card.frow .ftext h2 { font-size: clamp(19px, 2.1vw, 26px); margin-top: 8px; margin-bottom: 10px; }
.fd-live > .fd-card.frow .ftext > p { font-size: 13.5px; line-height: 1.65; }
.fd-live > .fd-card.frow .flist { margin-top: 12px; }
.fd-live > .fd-card.frow .flist li { padding: 6px 0; font-size: 13px; }
.fd-live > .fd-card.frow .fcard { padding: 24px; box-shadow: none; }
.fd-live > .fd-card.frow .big-rate { font-size: 34px; margin: 10px 0 4px; }
.fd-live > .fd-card.frow .big-rate span { font-size: 15px; }
.fd-live > .fd-card.frow .btn { margin-top: 16px !important; }

/* Genuinely narrow screens: one column. Top-align the content so the extra
   room from the UNIFORM card height falls as breathing space at the bottom
   rather than as a gap in the middle of the card. */
@media (max-width: 680px) {
  .fd-live > .fd-card.frow {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 22px;
    align-items: start;
    align-content: start;
  }
}

/* ---- step counter, so you know where you are in the stack --------------- */
.fd-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}
.fd-steps i {
  display: block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(18, 24, 26, .16);
  transition: background .3s var(--ease), transform .3s var(--spring);
}
.fd-steps i.on { background: var(--gold); transform: scale(1.45); }

@media (max-width: 900px) {
  .fd-pin { top: 76px; }
  .fd-live > .fd-card.frow { padding: 26px 20px; }
}

/* Scrubbing IS motion. Opt out: the deck never initialises, so the original
   grid and rows render exactly as they do today. */
@media (prefers-reduced-motion: reduce) {
  .fd-track { height: auto !important; }
  .fd-pin { position: static; }
  .fd-steps { display: none; }
}