:root{--purple:#8425eb;--yellow:#ffe51a;--mint:#19c6ae;--pink:#ef349e;--cream:#fff1d2;--ink:#0c0910}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--purple);font-family:ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;font-weight:650}a{color:inherit}button,a.btn{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:4px solid white;outline-offset:5px}header{display:flex;justify-content:space-between;align-items:center;padding:18px 5%;border-bottom:3px solid var(--ink);background:var(--cream)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:950;font-size:23px}nav{display:flex;gap:24px;align-items:center}nav a{font-weight:850;text-decoration:none}nav button,.choices button{border:3px solid var(--ink);background:var(--yellow);border-radius:12px;padding:8px 16px;box-shadow:3px 4px var(--ink);font-weight:900}.hero{min-height:710px;display:grid;grid-template-columns:1.1fr .9fr;gap:3vw;padding:80px 6% 100px;align-items:center;overflow:hidden}.tag{display:inline-block;background:var(--cream);border:2px solid var(--ink);border-radius:100px;padding:9px 17px;font-size:14px;font-weight:900;letter-spacing:.07em;box-shadow:3px 4px var(--ink)}h1,h2,h3{font-weight:1000;letter-spacing:-.045em;line-height:.98;margin:25px 0}h1{font-size:clamp(54px,6.4vw,108px);max-width:850px}h2{font-size:clamp(44px,6vw,90px)}h3{font-size:clamp(25px,3vw,42px)}p{font-size:clamp(17px,1.7vw,23px);line-height:1.45;max-width:650px}.hero-copy p,.hero-copy small{color:var(--cream)}.hero-copy small{display:block;margin-top:20px}.btn{display:inline-flex;justify-content:center;align-items:center;text-decoration:none;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:40px;box-shadow:6px 7px var(--ink);padding:17px 25px;font-weight:950;transition:transform .15s,box-shadow .15s}.yellow{background:var(--yellow)}.btn:active,button:active{transform:translate(4px,4px);box-shadow:1px 1px var(--ink)}.hero-art{position:relative;display:flex;justify-content:center;isolation:isolate}.phone{width:min(310px,74%);border:10px solid var(--ink);border-radius:42px;overflow:hidden;box-shadow:14px 16px var(--ink);transform:rotate(5deg);background:var(--purple);animation:float 5s ease-in-out infinite}.phone img{width:100%;display:block}.sticker{position:absolute;z-index:2;border:4px solid var(--ink);box-shadow:5px 6px var(--ink);font-weight:1000;display:grid;place-items:center}.sun{background:var(--yellow);width:100px;height:100px;border-radius:50%;font-size:73px;left:0;top:6%;transform:rotate(-13deg)}.time{background:var(--mint);padding:12px 20px;border-radius:20px;right:0;top:18%;transform:rotate(12deg);font-size:25px}.go{background:var(--pink);padding:15px 23px;border-radius:30px;left:0;bottom:10%;transform:rotate(-10deg);font-size:23px}@keyframes float{50%{transform:translateY(-12px) rotate(3deg)}}.ticker{overflow:hidden;background:var(--yellow);border-block:3px solid var(--ink);padding:15px 0;font-size:24px;font-weight:1000;white-space:nowrap}.ticker span{display:inline-block;animation:marquee 18s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}.section{padding:85px 6%;border-bottom:3px solid var(--ink)}.demo{background:var(--mint);display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center}.demo-app{background:var(--purple);padding:25px;border:4px solid var(--ink);border-radius:32px;box-shadow:10px 12px var(--ink);max-width:530px;width:100%;justify-self:center}.plan,.weather-card,.check-card{border:3px solid var(--ink);border-radius:22px;box-shadow:4px 5px var(--ink);padding:17px;background:var(--cream);margin-bottom:18px}.plan{background:var(--mint);text-align:center;font-weight:950}.weather-card{background:var(--yellow);display:flex;justify-content:space-between;align-items:center}.weather-card strong{display:block;font-size:64px;line-height:1.1}.weather-card small,.weather-card span{display:block}.weather-card #symbol{font-size:60px}.demo-app h3{font-size:32px}.check-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px}.check-card label{display:flex;align-items:center;gap:12px;padding:10px 0;font-weight:800}.check-card input{appearance:none;width:24px;height:24px;border:3px solid var(--ink);border-radius:5px;flex:none;margin:0}.check-card input:checked{background:var(--mint)}.check-card input:checked:after{content:'✓';display:block;text-align:center;font-weight:1000}.demo-app .btn{width:100%}.choices{display:flex;flex-wrap:wrap;gap:12px;margin:25px 0}.choices button[aria-pressed=true]{background:var(--pink)}#feedback{color:var(--cream);font-size:16px;margin-bottom:0;min-height:24px}.features{background:var(--cream)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}.cards article{background:var(--yellow);border:3px solid var(--ink);border-radius:27px;box-shadow:7px 8px var(--ink);padding:24px;overflow:hidden}.cards article:nth-child(2){background:var(--pink)}.cards article:nth-child(3){background:var(--mint)}.cards h3{font-size:32px}.cards p{font-size:17px;min-height:75px}.cards img{width:100%;max-height:450px;object-fit:cover;object-position:top;border:3px solid var(--ink);border-radius:20px;display:block}.num{font-size:40px;font-weight:1000}.closing{background:var(--yellow);text-align:center}.closing h2{max-width:900px;margin:25px auto}.closing p{margin:20px auto 30px}.closing img{border-radius:25px}footer{background:var(--ink);color:var(--cream);padding:24px 6%;display:flex;justify-content:space-between;gap:15px;font-size:14px}@media(max-width:800px){header{padding:14px 5%}nav a{display:none}.hero,.demo{grid-template-columns:1fr}.hero{padding:45px 6% 65px;gap:50px}.hero-art{padding:12px 0}.phone{width:min(300px,70%)}.section{padding:55px 6%}.cards{grid-template-columns:1fr}.cards article img{max-height:480px;object-fit:contain;background:var(--purple)}.cards p{min-height:0}.sun{width:75px;height:75px;font-size:55px}.time,.go{font-size:17px;padding:10px}.demo-app{padding:17px}.brand{font-size:19px}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
