/* =====================================================================
   N3CA product preview (assets/revamp/n3ca-preview.js) · QRIS and Corp
   Boxed like the rest of the site: a hairline band between the frame lines,
   screens on the left (70%), the switch + tour on the right (30%).
   ===================================================================== */
/* the "How it helps" section above stops at its cards instead of filling a screen */
.n3x .n3dOrg:has(+ .qxs) { min-height: 0 !important; padding-bottom: 0 !important; }

.qxs { --qx-line: #e3e4ea; position: relative; isolation: isolate; background: #fff; padding: 88px var(--pad-x) 96px; overflow: hidden; }
.qxs::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pad-x); right: var(--pad-x); z-index: -1; pointer-events: none; border-left: 1px solid var(--n3-frame, rgba(17, 19, 31, .07)); border-right: 1px solid var(--n3-frame, rgba(17, 19, 31, .07)); }
.qxs__inner { padding: 0; }

.qxs__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: end; padding: 0 24px 56px; }
.qxs__title { margin: 0; font: 500 clamp(36px, 3.6vw, 56px)/1.08 "Geologica", sans-serif; letter-spacing: -.03em; color: #11131f; text-wrap: balance; }
.qxs__g { color: #9a9fb0; }
.qxs__lead { margin: 0; max-width: 460px; font: 400 17px/1.6 Inter, sans-serif; color: #555a6b; }

/* the band: hairlines top and bottom, a divider between the two cells */
.qxs__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-template-areas: "stage side"; border-top: 1px solid var(--qx-line); border-bottom: 1px solid var(--qx-line); }
.qxs__stage { grid-area: stage; position: relative; padding: 56px 15% 64px 48px; border-right: 1px solid var(--qx-line); background: #fafafc; perspective: 1600px; }
.qxs__side { grid-area: side; display: flex; flex-direction: column; }

/* switch: two square cells, like the site's tab boxes */
.qxs__seg { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--qx-line); }
.qxs__seg button { position: relative; display: flex; align-items: center; gap: 10px; padding: 22px 18px; border: 0; background: #fafafc; text-align: left; cursor: pointer; color: #a2a7b5; transition: color .3s, background .3s; }
.qxs__seg button + button { border-left: 1px solid var(--qx-line); }
.qxs__seg button::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #4a3dcc; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.65, 0, .25, 1); }
.qxs__seg button.is-on { color: #11131f; background: #fff; }
.qxs__seg button.is-on::after { transform: none; }
.qxs__seg button:hover { color: #11131f; }
.qxs__seg b { display: block; font: 600 15px/1.2 "Geologica", sans-serif; letter-spacing: -.01em; }
.qxs__seg small { display: block; margin-top: 3px; font: 500 11.5px/1.2 Inter, sans-serif; color: #a2a7b5; }

/* the tour list */
.qxs__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.qxs__item { position: relative; display: block; padding: 22px 24px; border-bottom: 1px solid var(--qx-line); cursor: pointer; outline: none; transition: background .3s; }
.qxs__item.is-on { background: #fafafc; }
.qxs__item:focus-visible { box-shadow: inset 0 0 0 2px #29ccb2; }


.qxs__txt b { display: block; font: 600 17px/1.35 "Geologica", sans-serif; letter-spacing: -.01em; color: #a2a7b5; transition: color .3s; }
.qxs__txt small { display: grid; grid-template-rows: 0fr; overflow: hidden; font: 400 14px/1.6 Inter, sans-serif; color: #555a6b; opacity: 0; transition: grid-template-rows .5s cubic-bezier(.65, 0, .25, 1), opacity .35s, margin .5s; }
.qxs__txt small > span { min-height: 0; }
.qxs__item.is-on .qxs__txt b, .qxs__item:hover .qxs__txt b { color: #11131f; }
.qxs__item.is-on .qxs__txt small { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
.qxs__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.qxs__prog i { display: block; height: 100%; width: 100%; background: #4a3dcc; transform: scaleX(0); transform-origin: left; }
.qxs__item.is-on .qxs__prog i { transform: scaleX(1); }
.qxs.is-run .qxs__item.is-on .qxs__prog i { animation: qxsProg 5.2s linear both; }
@keyframes qxsProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* devices */
.qxs__web { position: relative; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(17, 19, 31, .08), 0 40px 80px -40px rgba(26, 22, 75, .32), 0 12px 28px -18px rgba(26, 22, 75, .16); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s, filter .6s; cursor: pointer; }
.qxs__bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f6f6f9; border-bottom: 1px solid #ececf2; }
.qxs__bar i { width: 8px; height: 8px; border-radius: 50%; background: #dcdde5; }
.qxs__scr, .qxs__pscr { position: relative; overflow: hidden; }
.qxs__scr img, .qxs__pscr img { display: block; width: 100%; height: auto; }
/* thin bezel: a slim dark edge, not a slab */
.qxs__phone { position: absolute; right: 40px; bottom: 36px; width: 24%; min-width: 170px; padding: 4px; box-sizing: border-box; border-radius: 30px; background: #1d1f2e; box-shadow: 0 36px 60px -28px rgba(14, 16, 32, .5), 0 0 0 1px rgba(17, 19, 31, .15); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .8, .2, 1), filter .6s, opacity .6s .15s; cursor: pointer; z-index: 2; }
.qxs__pscr { border-radius: 26px; }

.qxs[data-v="bank"] .qxs__phone { transform: translate(4%, 6%) scale(.92); filter: saturate(.8) brightness(.97); }
.qxs[data-v="app"] .qxs__web { transform: scale(.96) translateX(-2%); opacity: .6; filter: saturate(.6); }
.qxs[data-v="app"] .qxs__phone { transform: translateY(-2%) scale(1.06); }

/* spotlight */
.qxs__spot { position: absolute; left: var(--l, 0); top: var(--t, 0); width: var(--w, 0); height: var(--h, 0); border-radius: 10px; box-shadow: 0 0 0 2px #4a3dcc, 0 0 0 200vmax rgba(14, 16, 32, .3); opacity: 0; pointer-events: none; transition: left .7s cubic-bezier(.65, 0, .25, 1), top .7s cubic-bezier(.65, 0, .25, 1), width .7s cubic-bezier(.65, 0, .25, 1), height .7s cubic-bezier(.65, 0, .25, 1), opacity .4s; }
.qxs__pscr .qxs__spot { border-radius: 12px; }
.qxs__spot b { position: absolute; left: -2px; bottom: calc(100% + 6px); padding: 4px 8px; border-radius: 4px; background: #4a3dcc; color: #fff; font: 600 11px/1 ui-monospace, "SFMono-Regular", Menlo, monospace; }
.qxs__stage .is-front .qxs__spot { opacity: 1; }

/* entrance */
.qxs:not(.is-in) .qxs__web { transform: translateY(60px) rotateX(14deg); opacity: 0; }
.qxs:not(.is-in) .qxs__phone { transform: translate(20%, 30%) scale(.9); opacity: 0; }

@media (max-width: 1100px) {
  .qxs__head { grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
  .qxs__body { grid-template-columns: 1fr; grid-template-areas: none; }
  .qxs__stage, .qxs__side { grid-area: auto; }
  .qxs__side { display: contents; }
  .qxs__seg { order: 1; }
  .qxs__stage { order: 2; border-right: 0; border-bottom: 1px solid var(--qx-line); padding: 40px 14% 96px 32px; }
  .qxs__list { order: 3; }
}
@media (max-width: 640px) {
  .qxs { padding: 56px var(--pad-x) 56px; }
  .qxs__head { padding: 0 16px 32px; }
  .qxs__title { font-size: 32px; }
  .qxs__lead { font-size: 16px; }
  .qxs__seg button { padding: 16px 12px; gap: 8px; }
  .qxs__seg b { font-size: 13.5px; }
  .qxs__seg small { font-size: 10.5px; }
  .qxs__stage { padding: 28px 16px; display: grid; }
  .qxs__web, .qxs__phone { grid-area: 1 / 1; position: relative; right: auto; bottom: auto; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
  .qxs__web { align-self: center; }
  .qxs__phone { width: 62%; min-width: 0; justify-self: center; border-radius: 28px; }
  .qxs__pscr { border-radius: 24px; }
  .qxs[data-v="bank"] .qxs__phone { position: absolute; top: 28px; left: 19%; opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
  .qxs[data-v="app"] .qxs__web { position: absolute; top: 30%; left: 16px; right: 16px; opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
  .qxs[data-v="app"] .qxs__phone { transform: none; }
  .qxs__bar { height: 20px; padding: 0 8px; gap: 4px; }
  .qxs__bar i { width: 5px; height: 5px; }
  .qxs__spot b { font-size: 9px; padding: 3px 6px; }
  .qxs__list { padding: 0; }
  .qxs__item { padding: 16px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qxs__web, .qxs__phone, .qxs__spot { transition: none !important; }
  .qxs:not(.is-in) .qxs__web, .qxs:not(.is-in) .qxs__phone { opacity: 1; transform: none; }
}

.qxs__spot { z-index: 2; }
.qxs__spot b { font-family: Inter, sans-serif; font-size: 11px; letter-spacing: 0; white-space: nowrap; }
/* CTA closes the panel */
.qxs__cta { padding: 24px; border-top: 1px solid var(--qx-line); margin-top: -1px; }
.qxs__cta .btn { width: 100%; }
@media (max-width: 1100px) { .qxs__cta { order: 4; } }
@media (max-width: 640px) { .qxs__item { padding: 18px 16px; } .qxs__cta { padding: 20px 16px; } .qxs__spot b { font-size: 9.5px; } }

/* Corp: two browser windows stacked like cards. The active one sits in front,
   the other peeks out behind it, up and to the right. */
.qxs--desk .qxs__stage { display: grid; align-items: end; padding: 88px 12% 56px 48px; }
.qxs--desk .qxs__web { grid-area: 1 / 1; z-index: 1; }
.qxs--desk .qxs__web:not(.is-front) { z-index: 0; transform: translate(9%, -11%) scale(.86); transform-origin: 100% 0; opacity: .7; filter: saturate(.55) brightness(.98); }
.qxs--desk .qxs__web:not(.is-front):hover { opacity: .9; filter: none; }
.qxs--desk.qxs:not(.is-in) .qxs__web:not(.is-front) { transform: translate(14%, 0) scale(.86); opacity: 0; }
@media (max-width: 1100px) { .qxs--desk .qxs__stage { padding: 72px 12% 48px 32px; } }
@media (max-width: 640px) {
  .qxs--desk .qxs__stage { padding: 40px 16px 24px; }
  .qxs--desk .qxs__web:not(.is-front) { transform: translate(4%, -14%) scale(.9); }
}

/* QRIS, three screens (review 27 Oct 2026): bank portal and merchant portal are two browser windows stacked
   like cards (the one not in use peeks out behind, up and to the right), the merchant app phone stays in front */
/* --- QRIS review 27 Oct 2026 (later): a real iPhone, a lens instead of an outlined spot, phone behind the portals --- */
.qxs__island { display: none; }
.qxs--tri .qxs__phone {
  container-type: inline-size; padding: 0; background: #0b0b0e; border-radius: 15.5% / 7.2%;
  box-shadow: inset 0 0 0 1.5px #74777f, inset 0 0 0 3.5px #24252b, 0 0 0 1px rgba(14, 16, 32, .28), 0 40px 70px -30px rgba(14, 16, 32, .55), 0 14px 26px -18px rgba(14, 16, 32, .35);
}
.qxs--tri .qxs__phone::before, .qxs--tri .qxs__phone::after { content: ""; position: absolute; width: 1.3%; background: linear-gradient(90deg, #4b4d55, #8a8d95 60%, #4b4d55); }
.qxs--tri .qxs__phone::before { right: -1.1%; top: 25%; height: 11%; border-radius: 0 3px 3px 0; }                     /* side button */
.qxs--tri .qxs__phone::after { left: -1.1%; top: 19%; height: 6.5%; border-radius: 3px 0 0 3px; } /* volume */
.qxs--tri .qxs__pscr { margin: 4.4cqw; border-radius: 11.8cqw; }
.qxs--tri .qxs__island { display: block; position: absolute; z-index: 3; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.8cqw; transform: translateX(-50%); border-radius: 99px; background: #000; }
/* the old spot only dims the rest of the screen now: no outline, no label (the lens carries the label) */
.qxs--tri .qxs__spot { box-shadow: 0 0 0 200vmax rgba(14, 16, 32, .16); border-radius: 8px; }
.qxs--tri .qxs__spot b { display: none; }
.qxs__lens {
  position: absolute; z-index: 6; left: 0; top: 0; width: 0; height: 0; border-radius: 8px; pointer-events: none;
  background-repeat: no-repeat; background-color: #fff; opacity: 0; transform: scale(1); transform-origin: 50% 50%;
  box-shadow: 0 22px 44px -16px rgba(26, 22, 75, .38), 0 6px 14px -6px rgba(26, 22, 75, .18), 0 0 0 1px rgba(17, 19, 31, .05);
  transition: left .7s cubic-bezier(.65, 0, .25, 1), top .7s cubic-bezier(.65, 0, .25, 1), width .7s cubic-bezier(.65, 0, .25, 1), height .7s cubic-bezier(.65, 0, .25, 1),
              background-position .7s cubic-bezier(.65, 0, .25, 1), background-size .7s cubic-bezier(.65, 0, .25, 1), transform .5s cubic-bezier(.2, .8, .2, 1), opacity .35s;
}
.qxs__lens.is-on { opacity: 1; transform: scale(var(--k, 1.08)); }
.qxs:not(.is-in) .qxs__lens { opacity: 0 !important; }
/* review (later): the whole device zooms toward the point instead of a lens (n3ca-preview.js lensTo); the stage clips
   so a zoomed window never runs over the side panel; the point keeps its purple label, still no outline */
.qxs--tri .qxs__stage { overflow: clip; }
.qxs--tri .qxs__web, .qxs--tri .qxs__phone { transition: transform .8s cubic-bezier(.2, .8, .2, 1), scale .9s cubic-bezier(.45, 0, .2, 1), transform-origin .9s cubic-bezier(.45, 0, .2, 1), opacity .6s, filter .6s; }
.qxs--tri .qxs__spot b { display: block; transform: scale(calc(1 / var(--zk, 1))); transform-origin: 0 100%; border-radius: 999px; padding: 5px 9px; }
.qxs--tri .qxs__lens { display: none; }
/* app first in the DOM now (merchant app, merchant portal, bank portal): keep the phone above the bank window in the
   merchant view, where the phone is the merchant portal's partner */
.qxs--tri[data-v="merchant"] .qxs__phone { z-index: 1; }
@media (max-width: 640px) { .qxs--tri .qxs__spot b { font-size: 9px; padding: 3px 7px; bottom: calc(100% + 4px); } .qxs--tri[data-v] .qxs__stage { padding-top: 44px; padding-bottom: 44px; } }
.qxs__lens.is-phone { border-radius: 10px; }
.qxs__lens b { position: absolute; left: 0; bottom: calc(100% + 8px); padding: 5px 9px; border-radius: 999px; background: #4a3dcc; color: #fff; font: 600 11px/1 Inter, sans-serif; white-space: nowrap; transform: scale(calc(1 / var(--k, 1.08))); transform-origin: 0 100%; box-shadow: 0 6px 14px -6px rgba(74, 61, 204, .6); }
/* the phone steps back behind the portals; with the merchant portal it stays close (the merchant pair),
   with the bank portal it sits further back */
.qxs--tri[data-v="bank"] .qxs__phone { z-index: 0; transform: translate(16%, -10%) scale(.84); opacity: .4; filter: saturate(.5) brightness(.98); }
.qxs--tri[data-v="merchant"] .qxs__phone { z-index: 0; transform: translate(14%, -6%) scale(.88); opacity: .75; filter: saturate(.7); }
.qxs--tri .qxs__web.is-front { z-index: 2; }
/* with the app in front, its partner (the merchant portal) stays right behind it and the bank portal goes furthest back */
.qxs--tri[data-v="app"] .qxs__phone { z-index: 3; transform: translateY(-2%) scale(1.04); }
.qxs--tri[data-v="app"] .qxs__web[data-v="merchant"] { z-index: 1; transform: scale(.96) translateX(-2%); opacity: .75; filter: saturate(.7); }
.qxs--tri[data-v="app"] .qxs__web[data-v="bank"] { z-index: 0; transform: translate(9%, -11%) scale(.86); transform-origin: 100% 0; opacity: .45; filter: saturate(.5) brightness(.98); }
@media (max-width: 640px) {
  .qxs__lens b { font-size: 9.5px; padding: 4px 7px; bottom: calc(100% + 6px); }
  .qxs--tri[data-v="app"] .qxs__phone { transform: none; }
  .qxs--tri[data-v="bank"] .qxs__phone, .qxs--tri[data-v="merchant"] .qxs__phone { position: absolute; top: 28px; left: 19%; opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
}
.qxs--tri .qxs__seg { grid-template-columns: repeat(3, 1fr); }
/* review: a wider side panel so each tab label sits on one line; the iPhone moves in from the right edge */
@media (min-width: 1101px) {
  .qxs--tri .qxs__body { grid-template-columns: minmax(0, 1fr) clamp(440px, 36%, 500px); }
  .qxs--tri .qxs__seg b, .qxs--tri .qxs__seg small { white-space: nowrap; }
  .qxs--tri .qxs__phone { right: 12%; bottom: 56px; }
}
.qxs--tri .qxs__seg button { padding: 20px 12px; align-items: flex-start; min-width: 0; }
.qxs--tri .qxs__seg b { font-size: 13.5px; }
.qxs--tri .qxs__seg small { font-size: 11px; }
.qxs--tri .qxs__stage { display: grid; align-items: end; padding-top: 88px; }
.qxs--tri .qxs__web { grid-area: 1 / 1; z-index: 1; }
.qxs--tri[data-v="bank"] .qxs__web[data-v="merchant"],
.qxs--tri[data-v="merchant"] .qxs__web[data-v="bank"] { z-index: 0; transform: translate(9%, -11%) scale(.86); transform-origin: 100% 0; opacity: .7; filter: saturate(.55) brightness(.98); }
.qxs--tri:not(.is-in) .qxs__stage .qxs__web { transform: translateY(60px) rotateX(14deg); opacity: 0; }
@media (max-width: 1100px) { .qxs--tri .qxs__stage { padding-top: 72px; } }
@media (max-width: 640px) {
  .qxs--tri .qxs__stage { padding: 28px 16px; }
  .qxs--tri .qxs__seg button { padding: 14px 10px; }
  .qxs--tri .qxs__seg b { font-size: 12.5px; }
  .qxs--tri .qxs__seg small { font-size: 10px; }
  .qxs--tri[data-v] .qxs__stage > .qxs__web:not(.is-front) { position: absolute; top: 30%; left: 16px; right: 16px; z-index: 0; opacity: 0; transform: translateY(24px) scale(.96); filter: none; pointer-events: none; }
  .qxs--tri[data-v] .qxs__stage > .qxs__web.is-front { transform: none; opacity: 1; filter: none; }
  .qxs--tri[data-v="merchant"] .qxs__phone { position: absolute; top: 28px; left: 19%; opacity: 0; transform: translateY(24px) scale(.96); pointer-events: none; }
}