.intro{--pw:min(320px, calc((100svh - 96px) * .455));overflow-x:clip}.intro-head{padding:24px 0 8px}.intro-head .wrap{flex-direction:column;gap:14px;display:flex}.intro-chips{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.intro-chips a{min-height:40px;color:var(--text);border-radius:999px;align-items:center;padding:4px 14px;font-size:15px;font-weight:500;display:inline-flex}.intro-chips a:hover{color:var(--accent-text);text-decoration:none}.intro-chips a.on{color:var(--accent-text);box-shadow:inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light);font-weight:700}.intro-tour{grid-template-columns:minmax(0, 1fr) calc(var(--pw) + 40px);grid-template-areas:"text phone";align-items:start;gap:32px;padding-top:16px;padding-bottom:24px;display:grid}.intro-stage{top:calc(50svh - var(--pw) * 1.08 - 20px);flex-direction:column;grid-area:phone;align-items:center;gap:10px;display:flex;position:sticky}.intro-steps{flex-direction:column;grid-area:text;padding-bottom:30svh;display:flex}.intro-phone{width:var(--pw);border-radius:calc(var(--pw) * .13);padding:calc(var(--pw) * .035)}.intro-screen{aspect-ratio:600/1290;border-radius:calc(var(--pw) * .1);background:var(--base);contain:layout paint;position:relative;overflow:hidden}.intro-shot{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity .25s;position:absolute;inset:0}.intro-shot.on{opacity:1}.intro-progress{font-variant-numeric:normal;min-height:1.6em}.intro-ring{border:3px solid var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);opacity:0;pointer-events:none;border-radius:12px;position:absolute;transform:scale(1.04)}.intro-ring.on{opacity:1;transition:opacity .2s,transform .2s;transform:none}.intro-ring.pulse{animation:.9s ease-in-out 2 intro-pulse}@keyframes intro-pulse{0%,to{opacity:1;transform:none}50%{opacity:.55;transform:scale(1.035)}}.intro-track{pointer-events:none;transition:transform .65s cubic-bezier(.45,0,.2,1);position:absolute;inset:0;transform:translate(50%,92%)}.intro-finger{width:calc(var(--pw) * .14);aspect-ratio:1;margin:calc(var(--pw) * -.07) 0 0 calc(var(--pw) * -.07);opacity:0;background:radial-gradient(circle at 40% 35%,#ffffffbf,#ffffff59 70%);border:1.5px solid #0000002e;border-radius:50%;transition:opacity .25s,transform .16s;position:absolute;top:0;left:0;box-shadow:0 4px 10px #00000038}.intro-finger.on{opacity:1}.intro-finger.press{transform:scale(.8)}.intro-ripple{border:2px solid var(--accent);opacity:0;border-radius:50%;position:absolute;inset:0;transform:scale(.6)}.intro-ripple.go{animation:.6s ease-out intro-ripple}@keyframes intro-ripple{0%{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(2.6)}}.intro-part{scroll-margin-top:24px}.intro-part h2{margin:28px 0 6px}.intro-part .lead{margin-bottom:8px;font-size:17px}.intro-step{padding:24svh 0}.intro-part .intro-step:first-of-type{padding-top:8svh}.intro-step>div{color:var(--muted);border-radius:22px;align-items:flex-start;gap:14px;padding:18px 20px;transition:box-shadow .25s,color .25s;display:flex}.intro-step .num{width:36px;height:36px;color:var(--muted);box-shadow:3px 3px 6px var(--sh-dark), -3px -3px 6px var(--sh-light);border-radius:12px;flex:none;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:inline-flex}.intro-step.on>div{color:var(--text);box-shadow:inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light)}.intro-step.on .num{color:var(--accent-text);box-shadow:inset 2px 2px 4px var(--sh-dark), inset -2px -2px 4px var(--sh-light)}.intro-step:focus-visible{outline:none}.intro-step:focus-visible>div{outline:2px solid var(--accent);outline-offset:3px}.intro-video{padding-top:0}.intro-video h2{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.intro-video-frame{width:100%;max-width:min(880px, calc((100svh - 360px) * var(--ar,1.7778)));aspect-ratio:16/9;border-radius:26px;margin:0 auto;padding:8px;position:relative}.intro-video-frame video{object-fit:contain;background:#000;border-radius:20px;width:100%;height:100%;display:block}.intro-sound{inset-inline-start:50%;white-space:nowrap;align-items:center;gap:8px;padding-inline:20px;display:inline-flex;position:absolute;bottom:22%;transform:translate(50%)}.intro-sound .ph{font-size:1.3em}.intro-sound[hidden]{display:none}@media (width<=899px){.intro-video-frame{border-radius:18px;padding:5px}.intro-video-frame video{border-radius:14px}.intro-sound{font-size:15px;bottom:18%}}.intro-end-card{align-items:flex-start;gap:14px}@media (width<=899px){.intro{--pw:calc(min(48svh, 520px) * .42)}.intro-tour{grid-template-columns:minmax(0,1fr);grid-template-areas:"phone""text";gap:0}.intro-stage{z-index:2;background:var(--base);height:48svh;box-shadow:0 10px 14px -10px var(--sh-dark);justify-content:center;margin:0 -16px;padding:8px 0 6px;top:0}.intro-progress{bottom:4px;min-height:0;font-size:13px;position:absolute;inset-inline-start:16px}.intro-part{scroll-margin-top:calc(48svh + 8px)}.intro-step{padding:16svh 0;scroll-margin-top:52svh}.intro-steps{padding-bottom:20svh}}@media (prefers-reduced-motion:reduce){.intro-shot,.intro-ring.on,.intro-track,.intro-finger,.intro-step>div{transition:none}.intro-ring.pulse,.intro-ripple.go{animation:none}.intro-finger{display:none}}
