/* Tapps "How It Works" scroll walkthrough (preview).
   Uses the site's own tokens: --cobalt, --indigo, --lavender, --font-display, --font-body.
   Without JavaScript (or with reduced motion) it renders as a normal, readable section. */

.wt{position:relative;background:#fff;border-top:1px solid var(--lavender,#E8EAF6);border-bottom:1px solid var(--lavender,#E8EAF6);overflow:hidden}
.wt-pin{padding:96px 0 40px}
.wt-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.wt-copy{min-width:0}
.wt-title{font-family:var(--font-display,'Plus Jakarta Sans',sans-serif);font-weight:800;font-size:clamp(30px,3.6vw,46px);line-height:1.08;letter-spacing:-.02em;color:var(--indigo,#1A237E);margin:10px 0 0;text-wrap:balance}
.wt-sub{font-family:var(--font-body,'DM Sans',sans-serif);font-size:18px;color:var(--text-muted,#5f6368);margin:12px 0 0}
.wt-steps{position:relative;margin-top:30px;display:grid;gap:26px;padding-left:28px}
.wt-rail{position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;background:var(--lavender,#E8EAF6)}
.wt-rail i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:3px;background:var(--cobalt,#3D5AFE);display:block;transform-origin:top}
.wt-step h3{font-family:var(--font-display,'Plus Jakarta Sans',sans-serif);font-weight:800;font-size:clamp(22px,2.4vw,30px);line-height:1.15;letter-spacing:-.015em;color:var(--text-dark,#1C1C1E);margin:6px 0 8px}
.wt-step p{font-family:var(--font-body,'DM Sans',sans-serif);font-size:16.5px;line-height:1.6;color:var(--text-muted,#5f6368);margin:0;max-width:480px}
.wt-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cobalt,#3D5AFE);color:#fff;font:700 14px/1 var(--font-display,'Plus Jakarta Sans',sans-serif)}
.wt-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding-bottom:72px}
.wt-foot .steps-inspiration{margin:0}

/* phone */
.wt-stage{position:relative;height:640px;display:grid;place-items:center}
.wt-phone{position:relative;z-index:2;width:300px;height:620px;border-radius:48px;background:#0a0a0a;padding:11px;box-shadow:0 40px 80px -20px rgba(26,35,126,.45),0 0 0 1px rgba(255,255,255,.08)}
.wt-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#fff}
.wt-notch{position:absolute;top:10px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#0a0a0a;z-index:9}
.wt-layer{position:absolute;inset:0;padding:52px 14px 14px;display:flex;flex-direction:column;gap:10px}
.wt-scr-build,.wt-scr-home{visibility:hidden}
.wt-apphead{border-radius:18px;padding:16px;color:#fff;font:800 18px/1.15 var(--font-display,'Plus Jakarta Sans',sans-serif)}
.wt-apphead small{display:block;font:500 11px/1 var(--font-body,'DM Sans',sans-serif);opacity:.8;margin-top:6px}
.wt-grad{background:linear-gradient(135deg,#1A237E 0%,#3D5AFE 55%,#1fbf6a 100%)}
.wt-tmplgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wt-tmpl{position:relative;height:118px;border-radius:16px;overflow:hidden;background:var(--lavender,#E8EAF6)}
.wt-tmpl img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.wt-tmpl span{position:absolute;left:6px;bottom:6px;background:rgba(255,255,255,.94);color:var(--indigo,#1A237E);border-radius:7px;padding:4px 7px;font:600 10px/1 var(--font-body,'DM Sans',sans-serif)}
.wt-blk{height:54px;border-radius:14px;background:#f5f6fb;display:flex;align-items:center;gap:10px;padding:0 12px;font:500 13px/1 var(--font-body,'DM Sans',sans-serif);color:#3c4043}
.wt-blk b{width:30px;height:30px;border-radius:9px;flex:none}
.wt-scr-home{background:linear-gradient(170deg,#C5CAE9,#E8EAF6 50%,#e3f7e6)}
.wt-icons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 10px;padding:10px 6px}
.wt-ic{display:grid;justify-items:center;gap:5px;font:500 9px/1 var(--font-body,'DM Sans',sans-serif);color:#2a3050}
.wt-ic i{width:48px;height:48px;border-radius:13px;display:block;background:rgba(255,255,255,.7)}
.wt-tapp i{background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(26,35,126,.18)}
.wt-tapp img{width:38px;height:38px}
.wt-notif{position:absolute;left:12px;right:12px;top:48px;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(26,35,126,.18);padding:12px;display:flex;gap:10px;font:400 12px/1.35 var(--font-body,'DM Sans',sans-serif);color:#1C1C1E;z-index:5}
.wt-notif i{width:34px;height:34px;border-radius:9px;flex:none;background:#fff;box-shadow:inset 0 0 0 1px var(--lavender,#E8EAF6);display:grid;place-items:center}
.wt-notif i img{width:26px;height:26px}
.wt-notif b{display:block;font-weight:600}

/* floating chips around the phone (shown only when animating) */
.wt-float{position:absolute;z-index:3;border-radius:14px;background:#fff;box-shadow:0 14px 34px -8px rgba(26,35,126,.28);display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;font:600 14px/1 var(--font-body,'DM Sans',sans-serif);color:#1C1C1E;white-space:nowrap;visibility:hidden}
.wt-float b{width:26px;height:26px;border-radius:8px}
.wt-qr{height:auto;padding:10px}
.wt-qr svg{width:96px;height:96px;display:block}
.wt-timer{position:absolute;z-index:3;left:50%;bottom:4px;transform:translateX(-50%);font:700 15px/1 var(--font-display,'Plus Jakarta Sans',sans-serif);background:var(--indigo,#1A237E);color:#fff;border-radius:99px;padding:10px 16px;font-variant-numeric:tabular-nums;white-space:nowrap;visibility:hidden}

/* animated mode: section pins under the fixed nav, steps cross-fade */
.wt.wt-on .wt-pin{height:calc(100vh - var(--wt-nav,70px));height:calc(100svh - var(--wt-nav,70px));min-height:600px;padding:0;display:flex;align-items:center}
.wt.wt-on .wt-pin > .wt-inner{width:100%}
.wt.wt-on .wt-steps{display:block;height:250px}
.wt.wt-on .wt-step{position:absolute;inset:0 0 auto 28px}

@media (max-width:860px){
  .wt-pin{padding:64px 0 24px}
  .wt-inner{grid-template-columns:1fr;gap:12px}
  .wt-stage{height:420px}
  .wt:not(.wt-on) .wt-phone{transform:scale(.64)}
  .wt-float{font-size:12px;height:40px}
  .wt-qr svg{width:70px;height:70px}
  .wt-url{right:0 !important}
  .wt.wt-on .wt-pin{min-height:0;align-items:flex-start;padding-top:18px}
  .wt.wt-on .wt-sub{display:none}
  .wt.wt-on .wt-steps{height:200px;margin-top:14px}
  .wt.wt-on .wt-step p{font-size:14.5px;line-height:1.5}
  .wt.wt-on .wt-pin{position:relative}
  .wt.wt-on .wt-stage{position:absolute;left:0;right:0;bottom:6px;height:var(--wt-stage,400px);margin:0}
  .wt.wt-on .wt-phone{position:absolute;left:50%;top:50%;margin:-310px 0 0 -150px}
  .wt-foot{padding-bottom:56px}
}