*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;background-color:#faf7f0;background-image:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(180,195,215,.1) 27px,rgba(180,195,215,.1) 28px);color:#1a2840;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:relative;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body::before{content:'';position:fixed;left:16px;top:0;bottom:0;width:1px;background:rgba(200,150,150,.18);z-index:0;pointer-events:none}@media(min-width:500px){body::before{left:calc((100vw - 440px)/2+28px)}}main{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.2vh,20px);position:relative;z-index:1;padding:clamp(16px,3vh,28px) 0}.logo-wrap{display:flex;align-items:center;justify-content:center;width:100%}.logo-wrap img{height:clamp(28px,5vh,40px);width:auto;max-width:200px;object-fit:contain}.hero{text-align:center;width:100%}.hero h1{font-size:clamp(2rem,6.5vw,3rem);font-weight:700;color:#1a2840;letter-spacing:-.02em;line-height:1.15;margin-bottom:4px}.hero h1 .hl{background:linear-gradient(180deg,transparent 58%,#d5e8b5 58%);padding:0 4px;display:inline}.hero .sub{font-size:clamp(.9rem,2.6vw,1.05rem);color:#4a5568;font-weight:400;letter-spacing:-.01em}.chips-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:20px;font-size:clamp(.75rem,2.2vw,.85rem);font-weight:400;color:#1a2840;background:#fff;border:1px solid rgba(180,195,215,.35);opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease,box-shadow .35s ease;white-space:nowrap;letter-spacing:-.01em}.chip.visible{opacity:1;transform:translateY(0)}.chip:nth-child(1){transition-delay:.05s}.chip:nth-child(2){transition-delay:.15s}.chip:nth-child(3){transition-delay:.25s}.chip:nth-child(4){transition-delay:.35s}.chip .chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.chip .chip-dot.green{background:#8ab84a}.chip .chip-dot.blue{background:#2c5f8a}.chip .chip-dot.amber{background:#d4a030}.chip .chip-dot.teal{background:#3a8a7a}.howto-card{width:100%;background:#fff;border-radius:16px;padding:clamp(14px,2.5vh,20px) clamp(12px,3vw,18px);box-shadow:0 1px 4px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.03);border:1px solid rgba(180,195,215,.25);display:flex;gap:10px;justify-content:space-between;align-items:stretch}.howto-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:6px 4px;border-radius:10px;transition:background .4s ease,box-shadow .4s ease;position:relative}.howto-step.highlighted{background:rgba(213,232,181,.45);box-shadow:0 0 0 4px rgba(213,232,181,.3)}.howto-step .step-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eef3e4;color:#5a7a3a;flex-shrink:0;transition:background .4s ease,color .4s ease,transform .3s ease}.howto-step.highlighted .step-icon{background:#c8daa8;color:#3d5a22;transform:scale(1.1)}.howto-step .step-label{font-size:clamp(.65rem,1.9vw,.75rem);font-weight:400;color:#4a5568;letter-spacing:-.01em;line-height:1.2;transition:color .4s ease}.howto-step.highlighted .step-label{color:#1a2840;font-weight:700}.step-icon svg{width:15px;height:15px}.compat-banner{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:18px;background:rgba(213,232,181,.35);font-size:clamp(.68rem,1.9vw,.78rem);color:#3d5a22;font-weight:400;letter-spacing:-.01em;white-space:nowrap}.compat-banner .banner-dot{width:6px;height:6px;border-radius:50%;background:#6a9e3a;flex-shrink:0;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.6)}}.cta-section{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px}.cta-btn{display:block;width:100%;padding:clamp(14px,2.5vh,18px) clamp(20px,5vw,32px);background:#1a2840;color:#fff;border:none;border-radius:28px;font-size:clamp(1rem,3.2vw,1.2rem);font-weight:700;font-family:inherit;cursor:pointer;text-align:center;text-decoration:none;letter-spacing:-.01em;transition:transform .12s ease,box-shadow .12s ease,background .2s ease;box-shadow:0 4px 14px rgba(26,40,64,.25);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;position:relative;outline-offset:3px}.cta-btn:focus-visible{outline:3px solid #2c5f8a;outline-offset:3px}.cta-btn:active{transform:scale(.96);box-shadow:0 1px 4px rgba(26,40,64,.3);background:#152338;transition:transform .08s ease,box-shadow .08s ease,background .08s ease}.cta-btn:hover{background:#1f3050;box-shadow:0 6px 20px rgba(26,40,64,.3)}.cta-sub{font-size:clamp(.72rem,2vw,.82rem);color:#4a5568;font-weight:400;letter-spacing:-.01em;text-align:center}.apercu{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.7);font-size:clamp(.7rem,2vw,.8rem);color:#4a5568;letter-spacing:-.01em}.apercu .arrow-bounce{display:inline-flex;animation:bounce-down 1.6s ease-in-out infinite}@keyframes bounce-down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}.apercu svg{width:16px;height:16px;flex-shrink:0}footer{width:100%;max-width:440px;text-align:center;font-size:clamp(.62rem,1.7vw,.7rem);color:#89a;letter-spacing:-.01em;padding:4px 0;position:relative;z-index:1}@media(min-width:500px){body{padding:0 24px}main{gap:clamp(14px,2.5vh,24px)}.howto-card{gap:14px}}@media(max-height:640px){main{gap:8px;padding:8px 0}.hero h1{font-size:clamp(1.5rem,5vw,2rem)}.chip{padding:5px 10px;font-size:.7rem}.howto-card{padding:10px 12px}.cta-btn{padding:12px 20px;font-size:.9rem}}