/* A brighter summer identity, keeping the lessons calm and readable. */
:root{--coral:#f47752;--yellow:#ffda58}
.announcement{background:var(--ink);color:#ffdf70;gap:15px;min-height:34px;font-size:10px;letter-spacing:.17em}
.announcement .icon{width:14px;height:14px}
.site-header{height:97px;border-bottom:0}
.site-header .nav-cta{border:1px solid #d1aa2f;box-shadow:2px 3px 0 #e7ca79;border-radius:100px}
.hero{position:relative;padding-block:45px 52px;grid-template-columns:1fr 1fr;gap:45px}
.hero:before{content:'';position:absolute;left:-7%;top:0;width:64%;height:100%;background:radial-gradient(ellipse at 35% 40%,#ffeb9f44,transparent 68%);pointer-events:none;z-index:-1}
.hero-copy>.eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:24px;display:flex;gap:9px;align-items:center}
.tiny-star{display:inline-block;color:#d55e39;font-size:27px;margin:0;line-height:1}
.hero h1{font-size:clamp(62px,6.75vw,94px);line-height:1.035;letter-spacing:-.065em;margin-bottom:36px}
.hero h1 .hero-title-line{display:block;color:var(--ink);white-space:nowrap}
.hero h1 .accent-title{color:var(--teal);position:relative;isolation:isolate;width:max-content}
.accent-title>svg{position:absolute;width:100%;height:22px;left:0;bottom:-15px;fill:none;stroke:var(--coral);stroke-width:6;stroke-linecap:round;z-index:-1}
.hero-description{max-width:405px;font-size:16px;line-height:1.85;margin-bottom:29px}
.hero-actions{gap:21px}
.hero-actions>.button{border-radius:100px;padding:16px 23px;box-shadow:4px 5px 0 #172d3812}
.hero-actions>.button:hover{background:var(--teal);box-shadow:4px 7px 0 #137e781a}
.hero-sunny-button{display:flex;align-items:center;gap:8px;background:none;border:0;padding:10px 0;font-size:13px;font-weight:800;border-bottom:1px solid #172d3860}
.hero-sunny-button:hover{color:var(--teal)}
.hero-sunny-button>span{margin-left:4px}
.hero-footnote{margin-top:29px;font-size:10px}
.mini-suns{background:#ffeaae;border:1px solid #e7c55e}
.hero-art{margin-right:8px;isolation:isolate}
.hero-art:before{content:'';position:absolute;inset:10% -4% -3% 3%;background:#f8d770;border-radius:42% 40% 27% 22%;transform:rotate(5deg);z-index:-1;box-shadow:inset 0 0 0 1px #c2933c30}
.hero-art>img{border-radius:42% 42% 24px 24px;border:1px solid #e8d5a944;box-shadow:0 18px 28px -20px #815e3177}
.hero-art-label{left:-5%;top:2%;background:#e2ece2;border:1px solid #b2cdbb;padding:14px 19px;transform:rotate(-9deg);font-size:8px;letter-spacing:.11em;box-shadow:3px 5px 0 #a5bdaa2e;border-radius:5px}
.hero-art-label:before{content:'';position:absolute;top:-7px;left:33%;width:42px;height:14px;background:#f7d88699;transform:rotate(3deg)}
.hero-art-label strong{font-size:24px;color:#254f42;letter-spacing:-.04em}
.art-sticker{bottom:5%;right:-5%;background:#f7946e;min-width:118px;min-height:118px;display:flex;flex-direction:column;justify-content:center;gap:3px;border:1px solid #d6724e;box-shadow:5px 7px 0 #c97b3730;transform:rotate(10deg);transition:transform .2s}
.art-sticker:hover{transform:rotate(0deg) scale(1.04)}
.art-sticker>span:first-child{font-size:8px;font-weight:800;letter-spacing:.07em}
.art-sticker strong{font-size:21px;line-height:1.08;letter-spacing:-.04em}
.art-sticker>span:last-child{font-size:19px;line-height:1}
.hero-doodle{position:absolute;z-index:3;color:var(--teal);font-size:47px;line-height:1;pointer-events:none;text-shadow:2px 3px #ffdc6444}
.doodle-one{top:0;right:-1%;transform:rotate(15deg)}
.doodle-two{left:-5%;bottom:14%;font-size:46px;color:#d6613b}
.quick-start{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding-top:8px;padding-bottom:35px}
.quick-start>a,.quick-start>button{display:flex;align-items:center;gap:16px;text-align:left;padding:20px 22px;border:1px solid #cadacf;border-radius:14px;background:#e7efe4;transition:transform .2s,box-shadow .2s}
.quick-start>a:nth-child(2){background:#f9e7b5;border-color:#e1d092}
.quick-start>button{background:#f7d6c3;border-color:#e5bda4}
.quick-start>a:hover,.quick-start>button:hover{transform:translateY(-4px);box-shadow:0 7px 0 -3px #172d3810}
.quick-start small{font-size:8px;letter-spacing:.09em;font-weight:700;display:block;margin-bottom:3px}
.quick-start strong{font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.3;letter-spacing:-.04em;display:block}
.quick-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fffaf080;flex-shrink:0}
.quick-icon>.icon{width:26px;height:26px}
.quick-arrow{font-size:23px;margin-left:auto}
.essentials{border-top:0;padding-block:9px 24px}
.essentials .essential-number{color:#bf5433}
.section-heading .eyebrow{display:flex;align-items:center;gap:9px}
.section-heading .eyebrow:before{content:'';height:7px;width:7px;background:var(--coral);border-radius:50%;flex-shrink:0}
.protection-section{background:#f4efdf}
.protection-card{border-radius:20px 20px 35px 20px;transition:transform .25s,box-shadow .25s}
.protection-card:hover{transform:translateY(-5px);box-shadow:0 14px 0 -6px #172d3812}
.protection-card .big-icon{filter:drop-shadow(3px 4px 0 #fffaf077)}
.protection-card .card-number{background:#fffaf088;border-color:#172d3820;font-weight:800}
.skin-lab{box-shadow:0 10px 0 -4px #e8e4d5}
.sunscreen-visual{background:radial-gradient(ellipse at 35% 35%,#fff0b8,#f5d78c)}
.fit-panel{background:#e7efe4;border-color:#cadacf}
.fit-panel .segmented{background:#dbe5d5}
.kit-game{background:#dfeee3}.quiz-game{background:#f8d3bc}
.habit-section{background:#f8efca;border-color:#e8d9a5}
.closing{background:#ffdb63;position:relative;overflow:hidden}
.closing:before,.closing:after{content:'✳';position:absolute;color:#e87c4940;font-size:180px;line-height:1;top:30%;left:-35px;transform:rotate(10deg);pointer-events:none}
.closing:after{left:auto;right:-20px;top:-13%;font-size:220px;color:#b39a3830}
.closing .wrap{position:relative;z-index:1}
.closing .button{border-radius:100px}
.sunny-launch{background:#ffdf76;border-color:#172d38;box-shadow:4px 5px 0 #172d38;border-radius:50px;padding:9px 19px 9px 10px}
.sunny-launch svg{transform:rotate(-8deg);filter:drop-shadow(2px 3px 0 #ac8e392b)}
.sunny-launch:hover svg{transform:rotate(6deg)}
.sunny-header{background:#ffdf76}
@media(min-width:801px){.hero-art-label{animation:label-hello .7s ease-out both}.hero-copy{animation:copy-hello .65s ease-out both}@keyframes label-hello{from{opacity:0;transform:translateY(10px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-9deg)}}@keyframes copy-hello{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}}
@media(max-width:1100px){.hero{gap:33px}.hero h1{font-size:70px}.hero-art-label{left:-3%;font-size:7px;padding:12px 13px}.hero-art-label strong{font-size:21px}.art-sticker{min-width:101px;min-height:101px}.art-sticker strong{font-size:18px}.quick-start>a,.quick-start>button{padding:18px 15px;gap:12px}.quick-start strong{font-size:14px}.quick-start small{font-size:7px}.quick-icon{width:35px;height:35px}.quick-arrow{font-size:20px}.hero-actions{gap:17px}.hero-actions>.button{padding-inline:18px;font-size:12px}}
@media(max-width:800px){.site-header{height:auto}.hero{gap:25px;padding-top:40px}.hero h1{font-size:55px}.hero-copy>.eyebrow{font-size:8px;gap:7px}.tiny-star{font-size:23px}.hero-description{font-size:14px}.hero-actions{gap:12px}.hero-actions>.button{padding:12px 16px}.hero-sunny-button{font-size:11px}.hero-sunny-button img{width:23px;height:23px}.hero-art-label{left:-4%;top:0;padding:10px}.hero-art-label strong{font-size:19px}.art-sticker{min-width:87px;min-height:87px;padding:10px;bottom:3%;right:-3%}.art-sticker strong{font-size:17px}.art-sticker>span:first-child{font-size:6px}.art-sticker>span:last-child{font-size:15px}.hero-doodle{font-size:35px}.doodle-two{font-size:32px}.quick-start{gap:10px}.quick-start>a,.quick-start>button{padding:17px 13px;gap:8px;flex-wrap:wrap;position:relative}.quick-start .quick-icon{margin-bottom:4px}.quick-start>a>span:nth-child(2),.quick-start>button>span:nth-child(2){width:100%}.quick-arrow{position:absolute;right:15px;top:16px}.quick-start strong{font-size:14px}.quick-start small{font-size:7px}.hero-footnote{font-size:8px;gap:10px}.mini-suns{font-size:24px}.section-heading .eyebrow:before{width:6px;height:6px}}
@media(max-width:560px){.announcement{min-height:31px;font-size:8px;letter-spacing:.13em;gap:12px}.announcement .icon{width:12px;height:12px}.site-header .nav-cta{padding:9px 12px;font-size:9px}.site-header{padding-block:20px}.hero{grid-template-columns:1fr;gap:0;padding-block:28px 39px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:.075em;gap:8px;margin-bottom:22px}.hero h1{font-size:clamp(53px,14.3vw,78px);line-height:1.04;margin-bottom:28px}.accent-title>svg{bottom:-12px;height:18px;stroke-width:5}.hero-description{font-size:13px;line-height:1.85;max-width:355px;margin-bottom:24px}.hero-actions{gap:19px;flex-wrap:wrap}.hero-actions>.button{font-size:11px;gap:14px;padding:13px 16px}.hero-actions>.button .icon{width:19px;height:19px}.hero-sunny-button{font-size:11px;gap:6px}.hero-sunny-button img{width:25px;height:25px}.hero-footnote{font-size:8px;margin-top:25px}.hero-art{width:calc(100% - 14px);max-width:395px;margin:44px auto 0}.hero-art>img{border-radius:37% 37% 18px 18px}.hero-art:before{inset:12% -3% -3% 3%;border-radius:40% 40% 24% 22%}.hero-art-label{left:-2%;top:0;padding:10px 12px;font-size:7px}.hero-art-label strong{font-size:19px}.art-sticker{right:-3%;bottom:5%;min-height:91px;min-width:91px}.art-sticker strong{font-size:18px}.art-sticker>span:first-child{font-size:7px}.doodle-one{right:0;top:1%;font-size:33px}.doodle-two{left:-3%;bottom:12%;font-size:31px}.quick-start{grid-template-columns:1fr;padding-block:17px 29px;gap:10px}.quick-start>a,.quick-start>button{padding:13px 17px;flex-wrap:nowrap;gap:13px;border-radius:12px}.quick-start>a>span:nth-child(2),.quick-start>button>span:nth-child(2){width:auto}.quick-start .quick-icon{width:38px;height:38px;margin:0}.quick-start .quick-arrow{position:static;font-size:22px;margin-left:auto}.quick-start strong{font-size:14px}.quick-start small{font-size:7px}.essentials{padding-top:0;padding-bottom:21px}.closing:before{font-size:120px;left:-40px;top:25%;opacity:.7}.closing:after{font-size:130px;right:-30px;top:-10%;opacity:.7}.sunny-launch{padding:7px 13px 7px 8px;border-radius:40px}}
@media(max-width:350px){.hero-actions{gap:12px}.hero-sunny-button img{display:none}.hero h1{font-size:50px}}
@media(prefers-reduced-motion:reduce){.hero-art-label,.hero-copy{animation:none}.quick-start>a,.quick-start>button,.protection-card,.art-sticker{transition:none}.quick-start>a:hover,.quick-start>button:hover,.protection-card:hover{transform:none}}
@media print{.quick-start,.hero-doodle,#sunny-widget{display:none!important}}