/* Shared building blocks for every variant: wallet pass, iPhone frame,
   in-phone screens, dashboard panel. Variants restyle around these. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, svg { display: block; }
button { font: inherit; }

.m-ico { width: 1em; height: 1em; flex: none; }

/* ---------- Wallet pass ---------- */
.m-pass {
  container-type: inline-size;
  width: 100%;
  border-radius: 4.5% / 3.375%; /* cqw can't reference its own container */
  aspect-ratio: 300 / 400;
}
.m-pass-in {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: var(--pc, #111);
  color: var(--pf, #fff);
  font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 18px 40px -18px rgba(0,0,0,.45), 0 4px 12px -4px rgba(0,0,0,.25);
}
.m-pass-in::after { /* soft sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%);
}
.m-pass-top { display: flex; align-items: center; gap: 3cqw; padding: 5cqw 5.5cqw 3cqw; }
.m-pass-logo {
  width: 10cqw; height: 10cqw; border-radius: 50%;
  background: var(--pf, #fff); color: var(--pc, #111);
  display: grid; place-items: center; font-weight: 800; font-size: 4.6cqw; letter-spacing: -.02em;
}
.m-pass-name { font-weight: 650; font-size: 4.8cqw; letter-spacing: -.01em; flex: 1; line-height: 1.1; }
.m-pass-hf { text-align: right; }
.m-pass-k { font-size: 2.8cqw; letter-spacing: .06em; text-transform: uppercase; opacity: .72; font-weight: 600; }
.m-pass-v { font-size: 5.4cqw; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.m-pass-strip {
  margin: 1cqw 0 0; padding: 5cqw 5.5cqw;
  background: var(--ps, rgba(0,0,0,.18));
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 3.2cqw;
}
.m-stamp {
  aspect-ratio: 1; border-radius: 50%;
  border: .6cqw dashed color-mix(in srgb, var(--pf, #fff) 55%, transparent);
  display: grid; place-items: center; color: var(--pc, #111);
  font-size: 6cqw;
}
.m-stamp.is-on { background: var(--pf, #fff); border-style: solid; border-color: var(--pf, #fff); }
.m-stamp.is-new { animation: m-stamp-in 520ms cubic-bezier(.2, 1.4, .4, 1) both; }
.m-stamp.is-gift { border-style: solid; }
@keyframes m-stamp-in { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.m-pass-big { padding: 5cqw 5.5cqw; background: var(--ps, rgba(0,0,0,.18)); margin-top: 1cqw; }
.m-pass-big .m-pass-v { font-size: 13cqw; letter-spacing: -.03em; }
.m-pass-fields { display: flex; justify-content: space-between; gap: 3cqw; padding: 4cqw 5.5cqw 0; }
.m-pass-fields .m-pass-v { font-size: 4.2cqw; }
.m-pass-qr { margin: auto auto 5cqw; background: #fff; padding: 2.4cqw; border-radius: 2cqw; width: 30cqw; }
.m-pass-qr svg { width: 100%; height: auto; }

/* ---------- iPhone frame ---------- */
.m-phone {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.3;
  border-radius: 15.5% / 7.23%; /* % of own box: cqw can't reference itself */
  background: linear-gradient(145deg, #2b2b2e, #0d0d0f 40%, #1c1c1f);
  box-shadow: 0 0 0 2px #3a3a3e inset, 0 40px 80px -30px rgba(0,0,0,.55), 0 12px 30px -12px rgba(0,0,0,.35);
}
.m-phone.is-light { background: linear-gradient(145deg, #e9e7e3, #c9c6c0 45%, #efede9); box-shadow: 0 0 0 2px #d8d5cf inset, 0 40px 80px -30px rgba(0,0,0,.35), 0 12px 30px -12px rgba(0,0,0,.2); }
.m-screen {
  position: absolute; inset: 1.586% 3.4%; border-radius: 12.4cqw; overflow: hidden;
  background: #000; color: #fff;
  font-family: -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  font-size: 4.2cqw;
}
.m-island { position: absolute; top: 2.6cqw; left: 50%; transform: translateX(-50%); width: 30cqw; height: 8.6cqw; border-radius: 99px; background: #000; z-index: 5; }
.m-status { position: absolute; top: 3.6cqw; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 9cqw; font-weight: 600; font-size: 4cqw; z-index: 4; }
.m-scr { position: absolute; inset: 0; display: flex; flex-direction: column; }
.m-scr[hidden] { display: none; }
.m-scr.is-enter { animation: m-scr-in 420ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes m-scr-in { from { opacity: 0; transform: translateY(3%) scale(.985); } to { opacity: 1; transform: none; } }

/* camera / QR screen */
.m-cam { flex: 1; background: radial-gradient(120% 80% at 50% 40%, #5a4a3c, #241c16 70%); position: relative; display: grid; place-items: center; }
.m-poster { width: 58%; background: #f6f1ea; color: #1b1b1b; border-radius: 3cqw; padding: 6cqw 5cqw; text-align: center; transform: rotate(-3deg); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.m-poster b { display: block; font-size: 5cqw; letter-spacing: -.02em; margin-bottom: 3cqw; }
.m-poster small { display: block; font-size: 3.2cqw; opacity: .7; margin-top: 3cqw; }
.m-poster .m-qr { width: 70%; margin: 0 auto; }
.m-finder { position: absolute; inset: 22% 14%; border-radius: 6cqw; }
.m-finder::before, .m-finder::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.1cqw solid #ffd60a; clip-path: polygon(0 0, 22% 0, 22% 1.6%, 1.6% 1.6%, 1.6% 16%, 0 16%, 0 84%, 1.6% 84%, 1.6% 98.4%, 22% 98.4%, 22% 100%, 78% 100%, 78% 98.4%, 98.4% 98.4%, 98.4% 84%, 100% 84%, 100% 16%, 98.4% 16%, 98.4% 1.6%, 78% 1.6%, 78% 0, 100% 0, 100% 100%, 0 100%); }
.m-finder::after { display: none; }
.m-chip { position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%); background: #ffd60a; color: #111; font-weight: 650; font-size: 3.6cqw; padding: 2.2cqw 4cqw; border-radius: 99px; white-space: nowrap; display: flex; gap: 1.6cqw; align-items: center; }

/* sheet (add to wallet) */
.m-sheetbg { flex: 1; background: #1c1c1e; padding: 16cqw 6cqw 6cqw; display: flex; flex-direction: column; gap: 5cqw; }
.m-sheet-h { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.m-sheet-h span { color: #0a84ff; font-weight: 500; }
.m-sheet-pass { width: 82%; margin: 0 auto; }
.m-addbtn { margin-top: auto; background: #000; color: #fff; border: 1px solid #3a3a3c; border-radius: 3.2cqw; padding: 4cqw; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; font-weight: 600; font-size: 4.2cqw; }
.m-addbtn i { width: 7cqw; height: 5.2cqw; border-radius: 1cqw; background: linear-gradient(180deg, #ff3b30 0 25%, #ffcc00 25% 50%, #34c759 50% 75%, #0a84ff 75%); }
.m-gbtn { background: #fff; color: #1f1f1f; border-radius: 99px; padding: 3.6cqw; text-align: center; font-weight: 600; font-size: 4cqw; }

/* wallet screen */
.m-wallet { flex: 1; background: #000; padding: 15cqw 5cqw 5cqw; display: flex; flex-direction: column; gap: 4cqw; }
.m-wallet-h { font-size: 8.4cqw; font-weight: 700; letter-spacing: -.02em; }
.m-wallet-stack { position: relative; }
.m-wallet-ghost { height: 9cqw; border-radius: 4cqw 4cqw 0 0; margin: 0 2cqw -5cqw; }
.m-toast {
  position: absolute; top: 14cqw; left: 5cqw; right: 5cqw; z-index: 6;
  background: rgba(40,40,42,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 5cqw; padding: 3.4cqw 4cqw; display: flex; gap: 3cqw; align-items: center;
  font-size: 3.6cqw; line-height: 1.3;
  animation: m-toast 3.4s cubic-bezier(.23, 1, .32, 1) both;
}
.m-toast b { display: block; font-size: 3.8cqw; }
.m-toast-ico { width: 9cqw; height: 9cqw; border-radius: 2.4cqw; display: grid; place-items: center; flex: none; font-size: 5cqw; }
@keyframes m-toast { 0% { transform: translateY(-140%); } 12%, 88% { transform: none; } 100% { transform: translateY(-140%); } }

/* reward confetti */
.m-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
.m-confetti i { position: absolute; top: -4%; width: 1.8cqw; height: 3.2cqw; border-radius: .4cqw; animation: m-fall 1.8s cubic-bezier(.2, .6, .4, 1) both; }
@keyframes m-fall { to { transform: translateY(115cqh) rotate(540deg); opacity: .9; } }
.m-reward-badge { margin: 0 auto; display: flex; align-items: center; gap: 2cqw; background: #34c759; color: #04220d; font-weight: 700; padding: 2.6cqw 4.6cqw; border-radius: 99px; font-size: 4cqw; }

/* lock screen */
.m-lock { flex: 1; background: radial-gradient(90% 60% at 30% 20%, #3b5b7a, #10151d 70%); padding: 18cqw 5cqw 5cqw; display: flex; flex-direction: column; align-items: center; }
.m-lock-d { font-size: 4.4cqw; opacity: .85; font-weight: 500; }
.m-lock-t { font-size: 22cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 1cqw 0 10cqw; }
.m-notif { width: 100%; background: rgba(255,255,255,.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 5cqw; padding: 3.6cqw; display: flex; gap: 3cqw; font-size: 3.7cqw; line-height: 1.3; }
.m-notif b { display: block; font-size: 3.8cqw; }
.m-notif small { margin-left: auto; opacity: .7; font-size: 3.2cqw; white-space: nowrap; }

/* business scanner */
.m-scan { flex: 1; background: #0b0b0c; padding: 15cqw 5cqw 5cqw; display: flex; flex-direction: column; gap: 4cqw; }
.m-scan-cam { aspect-ratio: 1; border-radius: 6cqw; background: radial-gradient(80% 80% at 50% 50%, #2a2a2e, #121214); position: relative; display: grid; place-items: center; overflow: hidden; }
.m-scan-cam .m-qr { width: 46%; opacity: .9; }
.m-scan-line { position: absolute; left: 10%; right: 10%; height: .6cqw; background: #34c759; box-shadow: 0 0 12px #34c759; animation: m-scanline 1.8s ease-in-out infinite alternate; top: 18%; }
@keyframes m-scanline { to { top: 80%; } }
.m-scan-card { background: #1c1c1e; border-radius: 5cqw; padding: 4.4cqw; display: flex; flex-direction: column; gap: 3cqw; }
.m-scan-row { display: flex; justify-content: space-between; align-items: center; }
.m-scan-row b { font-size: 4.6cqw; }
.m-dots { display: flex; gap: 1.4cqw; }
.m-dots i { width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #3a3a3c; }
.m-dots i.on { background: #34c759; }
.m-cta { background: #34c759; color: #04220d; border-radius: 3.6cqw; padding: 4cqw; text-align: center; font-weight: 700; }

/* chat screens */
.m-chat { flex: 1; display: flex; flex-direction: column; }
.m-chat-h { padding: 14cqw 5cqw 3.4cqw; display: flex; align-items: center; gap: 3cqw; font-weight: 600; font-size: 4.2cqw; }
.m-chat-av { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 3.6cqw; }
.m-chat-b { flex: 1; padding: 4cqw; display: flex; flex-direction: column; gap: 2.6cqw; justify-content: flex-end; }
.m-bub { max-width: 82%; padding: 3cqw 3.8cqw; border-radius: 4.4cqw; font-size: 3.8cqw; line-height: 1.35; animation: m-bub 480ms cubic-bezier(.23, 1, .32, 1) both; }
.m-bub.in { align-self: flex-start; border-bottom-left-radius: 1.2cqw; }
.m-bub.out { align-self: flex-end; border-bottom-right-radius: 1.2cqw; }
.m-bub-card { width: 46cqw; margin-top: 2cqw; }
@keyframes m-bub { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.m-chat.wa { background: #0b141a; } .m-chat.wa .m-chat-h { background: #1f2c34; } .m-chat.wa .m-bub.in { background: #1f2c34; } .m-chat.wa .m-bub.out { background: #005c4b; }
.m-chat.ig { background: #000; } .m-chat.ig .m-bub.in { background: #262626; } .m-chat.ig .m-bub.out { background: linear-gradient(135deg, #7638fa, #d300c5); }
.m-chat.ms { background: #fff; color: #050505; } .m-chat.ms .m-bub.in { background: #f0f0f0; } .m-chat.ms .m-bub.out { background: #0866ff; color: #fff; }
.m-mail { flex: 1; background: #fff; color: #111; display: flex; flex-direction: column; }
.m-mail-h { padding: 14cqw 5cqw 3cqw; border-bottom: 1px solid #eee; font-size: 3.4cqw; color: #666; line-height: 1.5; }
.m-mail-h b { color: #111; font-size: 4.4cqw; display: block; }
.m-mail-hero { margin: 4cqw; border-radius: 3cqw; padding: 6cqw 5cqw; color: #fff; }
.m-mail-hero b { font-size: 6.4cqw; letter-spacing: -.02em; display: block; line-height: 1.1; }
.m-mail-p { padding: 0 5cqw; font-size: 3.6cqw; line-height: 1.45; color: #444; }
.m-mail-btn { margin: 4cqw 5cqw; padding: 3.4cqw; border-radius: 99px; text-align: center; color: #fff; font-weight: 650; font-size: 3.8cqw; }

/* ---------- Dashboard panel ---------- */
.m-dash { container-type: inline-size; font-family: Inter, -apple-system, system-ui, sans-serif; }
.m-dash-in { border-radius: 18px; padding: clamp(16px, 3.4cqw, 28px); background: var(--db, #fff); color: var(--dt, #111); }
.m-dash-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.m-dash-head b { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.m-dash-tag { font-size: 12px; color: var(--dm, #6b6b6b); }
.m-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
@container (max-width: 520px) { .m-kpis { grid-template-columns: 1fr; } }
.m-kpi { border-radius: 12px; padding: 14px; background: var(--dk, #f4f3f1); }
.m-kpi-k { font-size: 12.5px; color: var(--dm, #6b6b6b); }
.m-kpi-v { font-size: clamp(22px, 5cqw, 32px); font-weight: 650; letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.m-kpi-d { font-size: 12.5px; font-weight: 600; color: var(--dg, #12805c); }
.m-chart { width: 100%; height: auto; overflow: visible; }
.m-chart .m-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.23, 1, .32, 1); }
.m-chart .m-area { opacity: 0; transition: opacity .8s ease-out .6s; }
.is-in .m-chart .m-line, .m-chart.is-in .m-line { stroke-dashoffset: 0; }
.is-in .m-chart .m-area, .m-chart.is-in .m-area { opacity: 1; }
.m-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--dm, #6b6b6b); margin-top: 10px; flex-wrap: wrap; }
.m-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* ---------- Map (geo) ---------- */
.m-map { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: #e9e5dc; }
.m-map svg.m-map-base { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: var(--pin, #0a84ff); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 2; }
.m-ring { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: color-mix(in srgb, var(--pin, #0a84ff) 14%, transparent); border: 1.5px solid color-mix(in srgb, var(--pin, #0a84ff) 50%, transparent); }
.m-pulse { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.1); border-radius: 50%; border: 2px solid var(--pin, #0a84ff); animation: m-pulse 2.4s cubic-bezier(.2, .7, .3, 1) infinite; }
@keyframes m-pulse { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.m-walker { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #ff375f; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); z-index: 3; offset-path: path("M 10 300 C 120 260, 160 200, 230 165"); offset-rotate: 0deg; animation: m-walk 5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes m-walk { 0% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }

/* ---------- reveal helpers ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.23, 1, .32, 1), transform .8s cubic-bezier(.23, 1, .32, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .m-walker { offset-distance: 100%; }
}