:root { --ink:#211930; --cream:#fff9ef; --orange:#ff6a2a; --pink:#ff4c89; --purple:#7c4dff; --yellow:#ffd43b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial, Helvetica, sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1180px, calc(100% - 40px)); margin-inline:auto; }
.nav { height:86px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:10; }
.brand { display:flex; align-items:center; gap:11px; font-size:22px; font-weight:900; letter-spacing:-1px; }
.brand img { width:43px; height:43px; border-radius:11px; object-fit:cover; box-shadow:0 4px 0 var(--ink); }
.nav-links { display:flex; align-items:center; gap:30px; font-weight:800; font-size:14px; }
.nav-cta { background:var(--ink); color:white; border-radius:999px; padding:13px 20px; box-shadow:0 4px 0 var(--orange); }
.hero { min-height:650px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; padding:50px 0 80px; }
.eyebrow { font-size:12px; letter-spacing:2px; font-weight:900; color:var(--orange); display:flex; align-items:center; gap:9px; margin:0 0 20px; }
.eyebrow span { color:inherit; }
.eyebrow.dark { color:var(--ink); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(58px, 6.8vw, 98px); line-height:.86; letter-spacing:-6px; margin-bottom:28px; font-weight:950; }
h1 em { color:var(--orange); font-style:normal; position:relative; }
h1 em:after { content:""; position:absolute; left:0; right:-10px; bottom:-8px; height:11px; background:var(--yellow); transform:rotate(-2deg); z-index:-1; border-radius:50%; }
.hero-lead { max-width:570px; font-size:18px; line-height:1.65; color:#665f6b; }
.store-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.store-button { height:60px; display:block; border-radius:9px; transition:.2s transform,.2s filter; }
.store-button:hover { transform:translateY(-2px); filter:drop-shadow(0 5px 0 var(--orange)); }
.store-button img { display:block; width:auto; height:60px; }
.purchase-note { margin:18px 0 0; font-size:12px; font-weight:800; color:#6f6873; }
.purchase-note span { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%; color:white; background:var(--pink); margin-right:6px; }
.hero-art { min-height:500px; position:relative; display:grid; place-items:center; }
.sunburst { position:absolute; width:490px; height:490px; border-radius:50%; background:repeating-conic-gradient(from 0deg,var(--yellow) 0deg 8deg,transparent 8deg 17deg); opacity:.5; }
.hero-shot { position:absolute; width:min(400px, 75%); border-radius:25px; box-shadow:0 25px 55px #34234444; border:7px solid white; }
.hero-shot-back { transform:translate(70px,-65px) rotate(8deg); }
.hero-shot-front { transform:translate(-35px,40px) rotate(-5deg); }
.sticker { position:absolute; right:0; bottom:30px; width:115px; height:115px; border-radius:50%; display:grid; place-content:center; text-align:center; background:var(--pink); color:white; border:5px solid var(--ink); transform:rotate(8deg); font-size:13px; box-shadow:6px 7px 0 var(--ink); }
.sticker strong { font-size:20px; }
.spark { position:absolute; font-size:32px; color:var(--purple); }.s1{left:20px;top:40px}.s2{right:5px;top:110px;color:var(--orange)}
.ticker { overflow:hidden; background:var(--ink); color:white; border-block:5px solid var(--ink); transform:rotate(-1deg); margin:0 -10px; }
.ticker div { white-space:nowrap; padding:13px 0; font-size:20px; font-weight:950; letter-spacing:4px; color:var(--yellow); word-spacing:18px; }
.section { padding:120px 0 55px; }
.intro,.gallery-head { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:end; }
h2 { font-size:clamp(42px, 5vw, 68px); line-height:.98; letter-spacing:-4px; font-weight:950; margin-bottom:0; }
.section-lead,.gallery-head>p { font-size:18px; line-height:1.7; color:#6b6370; margin-bottom:5px; }
.lesson-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding-bottom:120px; }
.lesson-card { min-height:330px; padding:26px; border:4px solid var(--ink); border-radius:25px; box-shadow:7px 8px 0 var(--ink); position:relative; overflow:hidden; }
.lesson-card.orange{background:#ff8351}.lesson-card.pink{background:#ff78a6}.lesson-card.purple{background:#9c7bff}.lesson-card.yellow{background:#ffe16b}
.number { font-size:12px; font-weight:900; border:2px solid var(--ink); border-radius:999px; padding:5px 9px; }
.lesson-mark { font-size:74px; height:125px; display:grid; place-items:center; font-weight:900; }
.lesson-card h3 { font-size:24px; line-height:1.05; margin-bottom:14px; letter-spacing:-1px; }
.lesson-card p { font-size:14px; line-height:1.55; font-weight:600; opacity:.8; }
.steps-section { background:var(--purple); color:white; border-block:5px solid var(--ink); }
.steps-grid { padding:105px 0; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.steps-copy .eyebrow { color:var(--yellow); }.steps-copy p:last-child{font-size:18px;line-height:1.65;color:#e2dafc;margin-top:25px;max-width:500px}
.steps { list-style:none; padding:0; margin:0; }
.steps li { display:flex; gap:22px; padding:25px 0; border-bottom:1px solid #ffffff55; }
.steps li>span { flex:0 0 46px; height:46px; border:3px solid white; border-radius:50%; display:grid; place-items:center; font-weight:950; color:var(--yellow); }
.steps h3 { font-size:23px; margin:0 0 7px; }.steps p{margin:0;color:#e4ddf4;line-height:1.5}
.gallery-section { padding:120px 0 90px; overflow:hidden; }
.gallery-head { margin-bottom:45px; }
.gallery { display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px max(20px, calc((100vw - 1180px)/2)) 35px; scrollbar-width:thin; }
.gallery figure { flex:0 0 min(580px, 80vw); margin:0; scroll-snap-align:center; border:4px solid var(--ink); border-radius:22px; overflow:hidden; box-shadow:8px 9px 0 var(--ink); background:white; }
.gallery img { width:100%; display:block; }
.swipe-hint { text-align:center; font-size:12px; font-weight:900; letter-spacing:2px; margin-top:12px; }
.download { margin-bottom:80px; background:var(--orange); color:white; min-height:420px; border:5px solid var(--ink); border-radius:34px; box-shadow:11px 12px 0 var(--ink); display:flex; align-items:center; justify-content:space-between; padding:65px 75px; overflow:hidden; position:relative; }
.download-copy { max-width:720px; position:relative; z-index:2; }.download .eyebrow{color:var(--yellow)}.download h2{font-size:clamp(44px,5vw,70px)}.download-copy>p:not(.eyebrow):not(.purchase-note){font-size:18px;margin:22px 0 0}.purchase-note.light{color:white}.purchase-note.light span{background:var(--ink)}
.download-bubble { width:230px; height:230px; border-radius:50%; flex:0 0 auto; display:grid; place-content:center; text-align:center; background:var(--yellow); color:var(--ink); border:5px solid var(--ink); box-shadow:8px 9px 0 var(--ink); transform:rotate(7deg); font-weight:900; font-size:25px; line-height:.9; }
.download-bubble strong{font-size:40px}.download-bubble span{font-size:30px;margin-top:10px}
.footer { padding:25px 0 45px; border-top:2px solid #ddd3c9; display:grid; grid-template-columns:1fr 1fr auto; gap:25px; align-items:center; font-size:13px; }
.footer-brand img{width:35px;height:35px}.footer-brand{font-size:17px}.footer p{margin:0;color:#777}.footer>div{display:flex;gap:20px;font-weight:800}.footer small{grid-column:1/-1;color:#999}

@media (max-width:900px){.nav-links a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:35px}.hero-art{min-height:480px;margin-top:30px}.lesson-grid{grid-template-columns:1fr 1fr}.steps-grid{grid-template-columns:1fr;gap:50px}.intro,.gallery-head{grid-template-columns:1fr;gap:25px}.download-bubble{opacity:.22;position:absolute;right:-20px}.download{padding:55px 40px}.footer{grid-template-columns:1fr auto}.footer p{display:none}}
@media (max-width:600px){.wrap{width:min(100% - 28px,1180px)}.nav{height:72px}.brand{font-size:19px}.brand img{width:38px;height:38px}.nav-cta{padding:11px 15px}.hero{padding:35px 0 65px;min-height:auto}h1{font-size:58px;letter-spacing:-4px}.hero-lead{font-size:16px}.store-row{gap:10px}.store-button,.store-button img{height:48px}.hero-art{min-height:350px}.sunburst{width:340px;height:340px}.hero-shot{width:82%;border-width:4px;border-radius:16px}.hero-shot-back{transform:translate(35px,-40px) rotate(7deg)}.hero-shot-front{transform:translate(-25px,35px) rotate(-5deg)}.sticker{width:85px;height:85px;right:2px;bottom:8px;font-size:10px}.sticker strong{font-size:14px}.section{padding-top:85px}.lesson-grid{grid-template-columns:1fr;padding-bottom:85px}.lesson-card{min-height:260px}.lesson-mark{height:90px}.steps-grid{padding:80px 0}.gallery-section{padding:85px 0 70px}.gallery-head{width:min(100% - 28px,1180px)}.gallery figure{flex-basis:88vw}.download{margin-bottom:55px;padding:45px 25px}.download h2{font-size:45px}.download-bubble{display:none}.footer{grid-template-columns:1fr}.footer>div{justify-content:flex-start}.footer small{grid-column:auto}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.store-button{transition:none}}