/* ============================================
   FLOW — Rocket "Application" walkthrough: the screens. Positions come
   from the Figma frames (Animation 3, 393x852). The script sets data-* on
   .fd-stage (pg, acc, kb, n, sb, gt, eo, sy) and these rules do the animating.
   Everything is scoped to .ap-root so it can sit next to the other flows.
   ============================================ */
.ap-root {
  position: absolute; inset: 0; overflow: hidden; background: #111;
  --fd-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  font-family: var(--fd-font); color: #111;
}
:where(.ap-root > section, .ap-root > div) { position: absolute; left: 0; top: 0; width: 393px; height: 852px; }
.ap-root img { filter: none; }

/* ---------- shared bits ---------- */
.ap-t { position: absolute; margin: 0; white-space: nowrap; font-size: 16px; line-height: 21px; font-weight: 400; color: #111; }
.ap-t.ap-wr { white-space: normal; }
.ap-t.m16 { font-size: 16px; line-height: 21px; font-weight: 500; }
.ap-t.r16 { font-size: 16px; line-height: 21px; font-weight: 400; }
.ap-t.m14 { font-size: 14px; line-height: 18px; font-weight: 500; }
.ap-t.r14 { font-size: 14px; line-height: 18px; font-weight: 400; color: #545454; }
.ap-t.m12 { font-size: 12px; line-height: 16px; font-weight: 500; }
.ap-t.r12 { font-size: 12px; line-height: 16px; font-weight: 400; }
.ap-t.m24 { font-size: 24px; line-height: 31px; font-weight: 500; }
.ap-t.m32 { font-size: 32px; line-height: 40px; font-weight: 500; }
.ap-t.ap-white { color: #fff; }
.ap-t.ap-gray { color: #545454; }
.ap-t.ap-n { color: #21273d; }
.ap-t.ap-c { text-align: center; }
.ap-i { position: absolute; display: block; max-width: none; pointer-events: none; }

.ap-pills i { position: absolute; top: var(--pt, 24px); height: 16px; border-radius: 8px; background: var(--pc, #2e2e2e); }
.ap-pills i:nth-child(1) { left: 45px; width: 56px; }
.ap-pills i:nth-child(2) { left: 279px; width: 24px; }
.ap-pills i:nth-child(3) { left: 308px; top: calc(var(--pt, 24px) - 2px); width: 20px; height: 20px; border-radius: 50%; }
.ap-pills i:nth-child(4) { left: 333px; width: 28px; }
.ap-pills.is-light { --pc: #eaeaea; }
.ap-pills.is-ssn { --pc: #282828; }
.ap-hi { position: absolute; top: 839px; height: 5px; border-radius: 100px; background: #111; }
.ap-hi.is-light { background: #fff; }
.ap-qsheet .ap-hi { top: 775px; }

.ap-btn { position: absolute; background: #111; border-radius: 100px; display: flex; align-items: center; justify-content: center;
  transition: transform calc(0.18s * var(--t, 1)) ease, background calc(0.25s * var(--t, 1)) ease; }
.ap-btn .ap-t { position: static; }
.ap-btn.is-pressed { transform: scale(0.97); }
.ap-ghost { position: absolute; border-radius: 100px; box-shadow: inset 0 0 0 2px #111; }
.ap-fade { transition: opacity calc(0.5s * var(--t, 1)) ease; }

/* ---------- application accordion ---------- */
.ap-dark { background: #111; }
.ap-app { background: #111; }
.ap-ah { position: absolute; inset: 0; transition: opacity calc(0.4s * var(--t, 1)) ease; }
.fd-stage:not([data-pg="app"]) .ap-ah { opacity: 0; }
.ap-pillhead { position: absolute; background: #222; border-radius: 100px; transition: transform calc(0.18s * var(--t, 1)) ease, background calc(0.18s * var(--t, 1)) ease; }
.ap-pillhead.is-pressed { transform: scale(0.95); background: #2c2c2c; }
.ap-pic { position: absolute; left: 16px; top: 12px; width: 18px; height: 18px; }
.ap-sheet {
  position: absolute; left: 0; top: 144px; width: 393px; height: 766px; background: #fff; border-radius: 28px 28px 0 0;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
  transition: height calc(0.8s * var(--t, 1)) var(--ease);
}
.fd-stage[data-acc="1"] .ap-sheet { height: 888px; }
.ap-ac {
  position: absolute; width: 345px; background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 0 0 1px #e9e9e9;
  transition: top calc(0.8s * var(--t, 1)) var(--ease), height calc(0.8s * var(--t, 1)) var(--ease), box-shadow calc(0.5s * var(--t, 1)) ease;
}
.ap-c3 { left: 24px; top: 192px; height: 196px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.ap-c4 { left: 24px; top: 400px; height: 72px; }
.fd-stage[data-acc="1"] .ap-c3 { height: 72px; box-shadow: inset 0 0 0 1px #e9e9e9; }
.fd-stage[data-acc="1"] .ap-c4 { top: 276px; height: 326px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.ap-live { position: absolute; left: 24px; top: 504px; width: 345px; height: 188px; background: #f7f7f7; border-radius: 24px; transition: top calc(0.8s * var(--t, 1)) var(--ease); }
.fd-stage[data-acc="1"] .ap-live { top: 634px; }
.ap-chv { transform-origin: 50% 50%; transition: transform calc(0.5s * var(--t, 1)) var(--ease); }
.ap-chv.is-flip { transform: rotate(180deg); }
.fd-stage[data-acc="1"] .ap-chv3 { transform: rotate(180deg); }
.fd-stage[data-acc="1"] .ap-chv4 { transform: none; }
.ap-body { transition: opacity calc(0.35s * var(--t, 1)) ease; }
.ap-b3 { opacity: 1; }
.fd-stage[data-acc="1"] .ap-b3 { opacity: 0; }
.ap-b4 { opacity: 0; }
.fd-stage[data-acc="1"] .ap-b4 { opacity: 1; transition-delay: calc(0.35s * var(--t, 1)); }
.ap-ck3 { opacity: 0; transform: scale(0.4); transition: opacity calc(0.3s * var(--t, 1)) ease calc(0.5s * var(--t, 1)), transform calc(0.45s * var(--t, 1)) cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.5s * var(--t, 1)); }
.fd-stage[data-acc="1"] .ap-ck3 { opacity: 1; transform: none; }
.ap-ring { transition: opacity calc(0.3s * var(--t, 1)) ease calc(0.5s * var(--t, 1)); }
.fd-stage[data-acc="1"] .ap-c3 .ap-ring { opacity: 0; }
/* the credit-check bullets tick in once the card has opened */
.ap-tk { opacity: 0; transform: scale(0.6); transition: opacity calc(0.3s * var(--t, 1)) ease, transform calc(0.4s * var(--t, 1)) cubic-bezier(0.2, 1.4, 0.4, 1); }
.fd-stage[data-acc="1"] .ap-tk { opacity: 1; transform: none; transition-delay: calc((0.9s + var(--i, 0) * 0.14s) * var(--t, 1)); }

/* ---------- Mortgage info questions ---------- */
.ap-q { pointer-events: none; }
/* iOS-style presentation: the application page shifts up and shrinks back behind the rising question sheet */
.ap-app { transform-origin: 50% 0; transition: transform calc(0.8s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="q1"] .ap-app, .fd-stage[data-pg="q2"] .ap-app, .fd-stage[data-pg="q3"] .ap-app { transform: translateY(-78.2px) scale(0.918); }
.ap-appdim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity calc(0.8s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="q1"] .ap-appdim, .fd-stage[data-pg="q2"] .ap-appdim, .fd-stage[data-pg="q3"] .ap-appdim { opacity: 0.086; }
.ap-qsheet {
  position: absolute; left: 0; top: 64px; width: 393px; height: 788px; background: #fff; border-radius: 28px 28px 0 0;
  transform: translateY(800px);
  transition: transform calc(0.8s * var(--t, 1)) var(--ease);
}
.fd-stage[data-pg="q1"] .ap-qsheet, .fd-stage[data-pg="q2"] .ap-qsheet, .fd-stage[data-pg="q3"] .ap-qsheet { transform: none; }
.ap-qhead { position: absolute; left: 0; top: 0; width: 393px; height: 80px; background: #fff; border-radius: 28px 28px 0 0; }
.ap-prog { position: absolute; width: 345px; height: 3px; border-radius: 100px; background: #f2f2f2; overflow: hidden; }
.ap-prog i { display: block; width: 122px; height: 100%; border-radius: 100px; background: #de3341; transition: width calc(0.9s * var(--t, 1)) var(--ease); }
.fd-stage[data-pr="2"] .ap-prog i { width: 213px; }
.fd-stage[data-pr="3"] .ap-prog i { width: 300px; }
.fd-stage[data-pr="4"] .ap-prog i { width: 345px; }
.ap-qstep { position: absolute; left: 0; top: 0; width: 393px; height: 788px; opacity: 0; transform: translateX(48px); pointer-events: none;
  transition: opacity calc(0.4s * var(--t, 1)) ease, transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="q1"] .ap-qstep[data-i="1"], .fd-stage[data-pg="q2"] .ap-qstep[data-i="2"], .fd-stage[data-pg="q3"] .ap-qstep[data-i="3"] { opacity: 1; transform: none; }
.fd-stage[data-pg="q2"] .ap-qstep[data-i="1"], .fd-stage[data-pg="q3"] .ap-qstep[data-i="1"], .fd-stage[data-pg="q3"] .ap-qstep[data-i="2"] { transform: translateX(-48px); }
.fd-stage[data-pg="app"] .ap-qstep { transition-duration: calc(0.2s * var(--t, 1)); }
.ap-opt {
  position: absolute; left: 24px; width: 345px; height: 64px; border-radius: 12px; box-sizing: border-box;
  --bw: 1px; background: #f7f7f7; border: var(--bw) solid rgba(0, 0, 0, 0.04); padding-left: 20px;
  display: flex; align-items: center;
  transition: background calc(0.25s * var(--t, 1)) ease, border-color calc(0.25s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease;
}
.ap-opt .ap-t { position: static; }
.ap-opt.is-pressed { transform: scale(0.98); }
.ap-opt.is-sel { --bw: 2px; background: #eff7f3; border-color: #0a9142; }
.ap-fld { position: absolute; left: 24px; width: 345px; height: 68px; border-radius: 16px; background: #f7f7f7; }
.ap-fv { position: absolute; left: 20px; top: 33.5px; display: flex; gap: 4px; line-height: 21px; font-size: 16px; }
.ap-cur { font-weight: 500; color: #545454; }
.ap-val { font-weight: 400; color: #111; position: relative; }
.ap-val.is-ph { color: #7b7b7b; }
.ap-val.is-typing::after { content: ""; position: absolute; left: 100%; margin-left: 3px; top: 2px; width: 2px; height: 16px; background: #de3341; animation: ap-blink 1s steps(1) infinite; }
@keyframes ap-blink { 50% { opacity: 0; } }
.ap-qf { position: absolute; left: 0; top: 670px; width: 393px; height: 118px; background: #fff; opacity: 0; transition: opacity calc(0.4s * var(--t, 1)) ease; }
.fd-stage[data-pg="q2"] .ap-qf, .fd-stage[data-pg="q3"] .ap-qf { opacity: 1; }
.ap-next { left: 24px; top: 686px; width: 345px; height: 56px; background: rgba(0, 0, 0, 0.04); opacity: 0;
  transition: top calc(0.5s * var(--t, 1)) var(--ease), opacity calc(0.4s * var(--t, 1)) ease, background calc(0.25s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease; }
.ap-next .ap-t { color: #949494; transition: color calc(0.25s * var(--t, 1)) ease; }
.fd-stage[data-pg="q2"] .ap-next, .fd-stage[data-pg="q3"] .ap-next { opacity: 1; }
.fd-stage[data-kb="1"] .ap-next { top: 417px; }
.ap-next.is-on { background: #111; }
.ap-next.is-on .ap-t { color: #fff; }
.ap-kb { position: absolute; left: 0; top: 560px; width: 393px; height: 292px; background: #d0d4dc; transform: translateY(100%); transition: transform calc(0.5s * var(--t, 1)) var(--ease); }
.fd-stage[data-kb="1"] .ap-kb { transform: none; }
.ap-kbi { position: absolute; left: 0; top: 0; width: 393px; height: 262px; max-width: none; }
.ap-kk { position: absolute; width: 123px; height: 46px; border-radius: 5px; background: #adb3bc; mix-blend-mode: multiply; opacity: 0; transition: opacity calc(0.12s * var(--t, 1)) ease; }
.ap-kk.is-down { opacity: 1; transition-duration: calc(0.04s * var(--t, 1)); }

/* ---------- SSN keypad ---------- */
.ap-ssn, .ap-gather { background: #111; pointer-events: none; }
/* the SSN page slides up over the application (opaque, no ghosting) and then stays underneath the pages that follow */
.ap-ssn { transform: translateY(100%); transition: transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="ssn"] .ap-ssn, .fd-stage[data-pg="gather"] .ap-ssn, .fd-stage[data-pg="res"] .ap-ssn, .fd-stage[data-pg="cmp"] .ap-ssn { transform: none; }
.ap-pk { position: absolute; width: 88px; height: 64px; border-radius: 4.6px; display: flex; align-items: center; justify-content: center; transition: background calc(0.15s * var(--t, 1)) ease; }
.ap-pk .ap-t { position: static; color: #fff; padding-left: 2px; transition: opacity calc(0.15s * var(--t, 1)) ease; }
.ap-pk.is-down .ap-t { opacity: 0.55; }
.ap-sdp { position: absolute; top: 283px; width: 6px; height: 32px; }
.ap-sdp i { position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0.2; transition: opacity calc(0.2s * var(--t, 1)) ease, transform calc(0.2s * var(--t, 1)) ease; }
.ap-sdp b { left: 3px; top: 0; width: 40px; margin-left: -20px; text-align: center; font-size: 24px; line-height: 32px; font-weight: 500; opacity: 0; transition: opacity calc(0.15s * var(--t, 1)) ease; }
.ap-sdp.is-mask i { opacity: 0.55; }
.ap-sdp.is-digit i { opacity: 0; transform: scale(0.4); }
.ap-sdp.is-digit b { opacity: 1; }
.ap-submit { position: absolute; left: 32px; top: 386px; width: 329px; height: 56px; border-radius: 100px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center;
  transition: background calc(0.3s * var(--t, 1)) ease, transform calc(0.18s * var(--t, 1)) ease; }
.ap-submit .ap-t { position: static; line-height: 24px; color: #111; }
.fd-stage[data-sb="1"] .ap-submit { background: #fff; }
.ap-submit.is-pressed { transform: scale(0.97); }

/* ---------- "Gathering employment" loader ---------- */
.ap-gather { opacity: 0; transition: opacity calc(0.5s * var(--t, 1)) ease; }
.fd-stage[data-pg="gather"] .ap-gather, .fd-stage[data-pg="res"] .ap-gather, .fd-stage[data-pg="cmp"] .ap-gather { opacity: 1; }
.ap-gl { opacity: 1; }
.ap-mark { position: absolute; overflow: visible; }
.ap-pc { transform-box: fill-box; transform-origin: 50% 50%; transform: translate(var(--ox), var(--oy)) scale(0.6);
  transition: transform calc(1.4s * var(--t, 1)) cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--k) * 0.06s * var(--t, 1)); }
.fd-stage[data-gt="1"] .ap-pc, .fd-stage[data-gt="2"] .ap-pc, .fd-stage[data-gt="d"] .ap-pc { transform: none; }
.ap-solid { opacity: 0; transition: opacity calc(0.6s * var(--t, 1)) ease calc(0.5s * var(--t, 1)); }
.fd-stage[data-gt="2"] .ap-solid { opacity: 1; }
.fd-stage[data-gt="d"] .ap-solid { opacity: 0; }
.ap-dot { position: absolute; display: block; background: #fff; border-radius: 50%; opacity: 0; transform: translate(var(--sx), var(--sy));
  transition: transform calc(1.4s * var(--t, 1)) cubic-bezier(0.2, 0.8, 0.25, 1) calc(var(--k) * 0.09s * var(--t, 1)), opacity calc(0.5s * var(--t, 1)) ease calc(var(--k) * 0.09s * var(--t, 1)); }
.fd-stage[data-gt="1"] .ap-dot, .fd-stage[data-gt="d"] .ap-dot { opacity: 1; transform: none; }
.fd-stage[data-gt="2"] .ap-dot { opacity: 0; transform: translate(var(--gx), var(--gy)) scale(0.2);
  transition: transform calc(0.9s * var(--t, 1)) cubic-bezier(0.55, 0, 0.8, 0.4) calc(var(--k) * 0.05s * var(--t, 1)), opacity calc(0.3s * var(--t, 1)) ease calc((0.6s + var(--k) * 0.05s) * var(--t, 1)); }
.fd-stage[data-gt="1"] .ap-dot { animation: ap-drift 3.2s ease-in-out 1.8s infinite alternate; }
@keyframes ap-drift { from { translate: 0 0; } to { translate: 0 -5px; } }

/* ---------- results + envelope ---------- */
.ap-res { background: #fff; opacity: 0; pointer-events: none; transition: opacity calc(0.6s * var(--t, 1)) ease; }
.fd-stage[data-pg="res"] .ap-res, .fd-stage[data-pg="cmp"] .ap-res { opacity: 1; }
.ap-rs { position: absolute; left: 0; top: 144px; width: 393px; height: 708px; background: #fff; border-radius: 20px 20px 0 0; filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); }
.ap-rh { position: absolute; left: 0; top: 0; width: 393px; height: 144px; background: #fff; }
.ap-res .ap-qf { top: 734px; opacity: 1; }
.ap-see { left: 24px; top: 750px; width: 345px; height: 56px; }
.ap-cmp { pointer-events: none; transform: translateX(100%); background: #fff; transition: transform calc(0.7s * var(--t, 1)) var(--ease); }
.fd-stage[data-pg="cmp"] .ap-cmp { transform: none; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.08); }

/* the envelope: authored at the carousel scene's size, scaled to the frame */
.ap-env { position: absolute !important; left: 71.89px; top: 387px; width: 192.876px; height: 171.188px; transform: scale(1.29221); transform-origin: 0 0; }
.ap-env .e-back { opacity: 0; transition: opacity calc(0.35s * var(--t, 1)) ease calc(0.25s * var(--t, 1)); }
.fd-stage[data-eo="1"] .ap-env .e-back { opacity: 1; }
.e-front { position: absolute; left: 0; top: 51.12px; width: 192.876px; height: 120.064px;
  filter: drop-shadow(0 3.098px 1.549px rgba(0, 0, 0, .05)) drop-shadow(6.197px 15.492px 5.81px rgba(0, 0, 0, .05)) drop-shadow(7.746px 7.746px 7.746px rgba(0, 0, 0, .05)); }
.e-fin { position: absolute; left: 18.59px; top: 37.96px; width: 155.695px; height: 85.981px; }
.e-fold { transform-origin: 50% 0; transition: transform calc(0.55s * var(--t, 1)) cubic-bezier(0.4, 0, 0.2, 1), opacity calc(0.25s * var(--t, 1)) ease calc(0.35s * var(--t, 1)); }
.e-shd { mix-blend-mode: multiply; transition: opacity calc(0.3s * var(--t, 1)) ease; }
.fd-stage[data-eo="1"] .e-fold { transform: scaleY(-1); opacity: 0; }
.fd-stage[data-eo="1"] .e-shd { opacity: 0; }
.e-cards { position: absolute; inset: 0; clip-path: inset(-60px -24px 0 -24px); }
.e-a, .e-b { position: absolute; transition: transform calc(0.85s * var(--t, 1)) cubic-bezier(0.2, 1.25, 0.35, 1) calc(0.6s * var(--t, 1)); }
.e-a { left: 25.61px; top: 17.1px; width: 141.669px; height: 101.601px; transform: translateY(104px); }
.e-b { left: 19.37px; top: 24.92px; width: 154.146px; height: 104.973px; transform: translateY(112px); background: #edf1ff; border-radius: 10.723px;
  filter: drop-shadow(0 3.098px 4.648px rgba(0, 0, 0, .25)); transition-delay: calc(0.8s * var(--t, 1)); }
.fd-stage[data-eo="1"] .e-a, .fd-stage[data-eo="1"] .e-b { transform: none; }
.e-acard { position: absolute; left: 50%; top: 50%; width: 135.556px; transform: translate(-50%, -50%) rotate(-4deg);
  background: #d2d9f4; border-radius: 9.43px; padding: 9.43px; filter: drop-shadow(0 2.82px 2.044px rgba(0, 0, 0, .25)); font-size: 5.501px; color: #111; }
.e-bin { position: absolute; left: 10.72px; top: 10.72px; width: 132.7px; font-size: 6.255px; color: #111; }
.e-top { display: flex; gap: 9.43px; align-items: flex-start; width: 116.696px; }
.e-bin .e-top { width: 132.7px; gap: 10.723px; }
.e-tc { flex: 1 0 0; display: flex; flex-direction: column; gap: 1.572px; min-width: 1px; }
.e-lab { font-size: 1em; font-weight: 400; line-height: normal; white-space: nowrap; }
.e-amtrow { display: flex; align-items: flex-end; gap: 1.572px; }
.e-amt { font-size: 12.573px; font-weight: 500; line-height: 15.717px; white-space: nowrap; }
.e-mo { font-size: 1em; font-weight: 400; line-height: normal; padding-bottom: 2.138px; white-space: nowrap; }
.e-blank { display: block; width: 44.153px; height: 18.591px; }
.e-mo-b { padding-bottom: 2.431px; }
.e-rows { display: flex; flex-direction: column; gap: 1.572px; width: 116.696px; margin-top: 6.287px; }
.e-rows-b { width: 132.7px; gap: 1.787px; margin-top: 7.149px; }
.e-row { display: flex; align-items: center; justify-content: space-between; height: 9.43px; font-size: 1em; font-weight: 400; line-height: normal; white-space: nowrap; }
.e-rows-b .e-row { height: 10.723px; }
.e-strong { font-weight: 500; }
.e-rl { display: flex; align-items: center; gap: 1.572px; width: 63.652px; }
.e-rows-b .e-rl { width: 72.382px; gap: 1.787px; }
.ap-env .e-ti, .ap-env .e-st { position: static; width: 6.287px; }
.ap-env .e-st { width: 9.322px; }
.e-digits { position: absolute; left: 13.94px; top: 23.88px; width: 39.505px; height: 11.619px; }
.fd-stage[data-eo="1"] .e-dg { animation: ap-shim 1.7s ease-in-out 1.6s infinite; }
.e-dg:nth-child(2) { animation-delay: 1.74s !important; } .e-dg:nth-child(3) { animation-delay: 1.88s !important; } .e-dg:nth-child(4) { animation-delay: 2.02s !important; }
@keyframes ap-shim { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.e-spark { opacity: 0; transform: scale(0.3) rotate(-30deg); transform-origin: 50% 50%; }
.fd-stage[data-eo="1"] .e-spark { animation: ap-spark 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) calc(1.5s * var(--t, 1)) 1 forwards; }
@keyframes ap-spark { 0% { opacity: 0; transform: scale(0.3) rotate(-30deg); } 40% { opacity: 1; transform: scale(1.35) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(0); } }

/* ---------- loan comparison ---------- */
.ap-scroll { position: absolute; left: 0; top: 0; width: 393px; height: 1334px; transition: transform calc(2.4s * var(--t, 1)) cubic-bezier(0.45, 0, 0.2, 1); }
.fd-stage[data-sy="1"] .ap-scroll { transform: translateY(-482px); }
.ap-cbg { position: absolute; left: 0; top: 144px; width: 393px; height: 1190px; background: #fff; }
.ap-ch { position: absolute; left: 0; top: 0; width: 393px; height: 144px; background: #fff; }
.ap-est { position: absolute; left: 24px; width: 345px; height: 350px; }
.ap-ed { position: absolute; left: 0; top: 0; width: 345px; height: 278px; background: #edf1ff; border-radius: 24px; z-index: 2; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.02)); }
.ap-ec { position: absolute; left: 0; top: 254px; width: 345px; height: 96px; background: #d2d9f4; border-radius: 0 0 24px 24px; box-shadow: inset 0 0 0 1.5px #d2d9f4; }
.ap-ep { position: absolute; inset: 0; z-index: 3; }
.ap-bd { background: #21273d; }
.ap-eb { position: absolute; left: -1.5px; top: -1.5px; width: 348px; height: 353px; box-sizing: border-box; border: 1.5px solid #d2d9f4; border-radius: 25.5px; }
.ap-cust { position: absolute; width: 202px; height: 24px; }
.ap-live2 { position: absolute; left: 24px; top: 1080px; width: 345px; height: 188px; background: #f7f7f7; border-radius: 24px; }