.landing-page{background:#fbfcf8;color:#172d33}
.landing-page a{text-decoration:none}
.landing-page a:focus-visible{outline:3px solid #14816b;outline-offset:5px}
.landing-skip{position:absolute;top:-100px;left:20px;padding:12px;background:white;z-index:10}.landing-skip:focus{top:12px}
.landing-nav{max-width:1200px;margin:auto;min-height:100px;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #e3e8df}
.landing-brand{display:flex;gap:16px;align-items:center;color:#172d33;font-weight:700;font-size:16px}.brand-symbol{font-size:35px;letter-spacing:-3px;font-weight:800}.brand-symbol span,.footer-brand span{color:#14816b;font-size:24px;vertical-align:top;letter-spacing:0}.landing-brand small{display:block;font-size:9px;letter-spacing:1.8px;color:#687b7b;margin-top:3px}
.landing-nav nav{display:flex;gap:30px;align-items:center;font-size:14px}.landing-nav nav a{color:#536563}.landing-nav nav a:hover{color:#08745d}.landing-nav .teacher-link{border:1px solid #ced8cf;border-radius:9px;padding:10px 15px;color:#243f39}
.landing-hero{max-width:1200px;margin:auto;padding:76px 32px 80px;display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:40px}.hero-eyebrow{display:inline-flex;gap:9px;align-items:center;color:#346559;font-size:13px;font-weight:600;background:#eaf2e8;border:1px solid #d9e5d5;border-radius:30px;padding:7px 13px}.hero-eyebrow i{width:6px;height:6px;background:#338267;border-radius:50%}
.hero-copy h1{font-family:Prompt,Sarabun,sans-serif;font-size:clamp(32px,3.5vw,48px);font-weight:600;line-height:1.55;letter-spacing:-1.3px;margin:22px 0}.hero-highlight{position:relative;display:inline-block;color:#14816b}.hero-highlight svg{position:absolute;left:0;bottom:-4px;width:100%;height:14px;fill:none;stroke:#b4d78c;stroke-width:6;stroke-linecap:round}.hero-copy>p{color:#647570;font-size:17px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:24px;margin:30px 0 22px}.landing-primary{background:#173e35;color:#fff;border-radius:10px;padding:14px 23px;font-weight:700;display:inline-flex;gap:34px;align-items:center;box-shadow:0 6px 12px #173e3512;transition:background .2s,transform .2s}.landing-primary:hover{background:#246451;transform:translateY(-2px)}.landing-secondary{font-size:14px;color:#3f5850;display:inline-flex;gap:14px}.hero-note{font-size:12px;color:#67776e}.hero-note>span:first-child{color:#14816b;margin-right:5px}.note-divider{margin:0 7px}
.thinking-art{height:420px;position:relative;background:#eaf0e5;border-radius:48% 48% 22% 22%;isolation:isolate;overflow:hidden}.art-grid{position:absolute;inset:0;background-image:radial-gradient(#73968255 1px,transparent 1px);background-size:19px 19px;mask-image:linear-gradient(transparent,#000,transparent)}.art-orbit{position:absolute;border:1px solid #9bb49a66;border-radius:50%;width:365px;height:365px;left:50%;top:25px;transform:translateX(-50%)}.orbit-two{width:280px;height:280px;top:68px}.art-label{position:absolute;top:37px;width:100%;text-align:center;font-size:8px;letter-spacing:1.8px;color:#577064}.thought{position:absolute;display:flex;align-items:center;gap:17px;width:260px;border:1px solid #fff;background:#fffdf7;border-radius:15px;padding:20px;box-shadow:0 12px 25px #244a3212}.thought-one{left:28px;top:82px;transform:rotate(-7deg)}.thought-two{right:22px;top:174px;transform:rotate(5deg);background:#214c41;color:#fff;z-index:2;border-color:#214c41}.thought-three{left:47px;top:268px;transform:rotate(-4deg);background:#e1ecb8}.thought-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:13px;background:#eaf0e2;font-size:30px;color:#456741}.thought-two .thought-icon{background:#456b5e;color:#dceab6}.thought-three .thought-icon{background:#f3f6db}.thought small{display:block;font-size:8px;letter-spacing:1.5px;opacity:.65}.thought strong{display:block;font-family:Prompt,sans-serif;font-size:18px;margin:3px 0}.thought-line{display:block;background:currentColor;opacity:.12;height:4px;width:90px;border-radius:10px}.art-spark{position:absolute;color:#547c44;font-size:42px}.spark-one{right:31px;top:74px}.spark-two{left:20px;bottom:70px;font-size:30px}.art-caption{position:absolute;bottom:20px;width:100%;text-align:center;font-size:12px;color:#527050}.art-caption span{margin-right:7px}
.landing-about{max-width:1136px;margin:auto;padding:40px 0 65px;border-top:1px solid #e1e7dc;scroll-margin-top:25px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:30px}.section-kicker{font-size:10px;letter-spacing:2px;font-weight:700;color:#66815e}.section-heading h2{font-family:Prompt,sans-serif;font-size:25px;margin-top:10px}.section-heading>p{font-size:14px;color:#718074;line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-grid article{padding:25px;border:1px solid #e3e8df;border-radius:15px;background:#fff}.feature-icon{display:flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;font-size:27px;margin-bottom:20px}.mint{background:#edf3e6;color:#597340}.lavender{background:#eeedf9;color:#7b71a6}.peach{background:#fcf0df;color:#a87835}.feature-grid h3{font-family:Prompt,sans-serif;font-size:18px;margin-bottom:8px}.feature-grid p{font-size:15px;color:#718074;line-height:1.8}
.landing-start{padding:60px max(32px,calc((100% - 1050px)/2)) 70px;background:#eef3e9;display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;scroll-margin-top:20px}.start-copy h2{font-family:Prompt,sans-serif;font-size:37px;line-height:1.55;margin:12px 0 15px}.start-copy h2>span{color:#789152}.start-copy>p{color:#687c6f;font-size:15px;line-height:1.8}.how-list{margin:30px 0;display:grid;gap:20px;list-style:none}.how-list li{display:flex;gap:15px;align-items:start}.how-list li>span{font-size:11px;color:#69825b;border:1px solid #cbd9bf;padding:5px 8px;border-radius:50%;margin-top:2px}.how-list strong{font-size:15px}.how-list p{font-size:13px;color:#788774;margin-top:3px}.start-tip{font-size:12px;color:#63795e;line-height:1.8;display:flex;align-items:center;gap:10px}.start-tip>span{font-size:27px}
.entry-panel{align-self:start;min-width:0;scroll-margin-top:24px}.entry-panel>.card{padding:28px;border-color:#e2e9dd;box-shadow:0 10px 35px #23381d06}.entry-panel>.steps{margin-bottom:14px;border:1px solid #e2e9dd;box-shadow:none;padding:15px 12px}.entry-panel #resume{margin-bottom:15px}.entry-panel .btn-primary{background:#214c41;border-color:#214c41;box-shadow:0 4px 10px #214c4115}.entry-panel .btn-primary:hover{background:#326753}.entry-panel #step1>p{font-size:14px;margin-top:10px;line-height:1.8}.entry-panel #code{margin-top:24px;margin-bottom:12px;background:#fafcf8}.entry-panel .steps li{font-size:12px}.entry-panel .steps li.on{color:#214c41}.entry-panel .steps li.on .step-dot{background:#214c41;border-color:#214c41}.entry-panel .steps li.done .step-dot{background:#e4eddf;color:#214c41;border-color:#b7c9ac}
.landing-footer{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 32px}.footer-brand{font-size:30px;font-weight:800;letter-spacing:-2px}.landing-footer p{font-size:11px;color:#7c867c;line-height:1.8;flex:1}.landing-footer>a{font-size:12px;color:#4c6254}
@media(min-width:1500px){.landing-hero{padding-top:95px;padding-bottom:95px}}
@media(max-width:1000px){.landing-nav nav{gap:18px}.landing-about{margin:0 32px}.landing-hero{gap:20px}.thought{width:230px}.thought-one{left:15px}.thought-two{right:12px}.thought-three{left:20px}.landing-start{gap:30px}.hero-actions{gap:15px}.hero-note{font-size:11px}.hero-copy h1{font-size:35px}}
@media(max-width:760px){.landing-nav{min-height:80px;padding:17px 22px}.landing-brand>span:last-child{display:none}.landing-nav nav{gap:16px;font-size:12px}.landing-nav .teacher-link{padding:8px 10px}.landing-hero{grid-template-columns:1fr;padding:42px 24px 45px;gap:35px}.hero-copy h1{font-size:clamp(31px,6.6vw,46px)}.hero-copy>p{font-size:16px}.thinking-art{width:100%;max-width:450px;margin:auto;height:390px}.thought{width:255px}.thought-one{left:28px;top:65px}.thought-two{top:157px;right:25px}.thought-three{top:249px;left:40px}.art-caption{bottom:12px}.art-label{top:28px}.section-heading{display:block}.section-heading>p{margin-top:15px}.section-heading h2{font-size:23px}.landing-about{margin:0 24px;padding-top:30px;padding-bottom:40px}.feature-grid{grid-template-columns:1fr;gap:12px}.feature-grid article{padding:22px 22px 22px 83px;position:relative}.feature-icon{position:absolute;top:24px;left:23px}.feature-grid h3{font-size:17px}.feature-grid p{font-size:14px}.landing-start{grid-template-columns:1fr;padding:38px 24px 45px;gap:30px}.start-copy h2{font-size:30px}.start-copy h2 br{display:none}.how-list{gap:16px;margin:24px 0}.entry-panel>.card{padding:22px}.landing-footer{padding:24px;flex-wrap:wrap;gap:15px}.landing-footer p{min-width:200px}.landing-footer>a{margin-left:0}.hero-note{font-size:12px}}
@media(max-width:380px){.landing-nav nav{gap:10px}.landing-nav nav>a:first-child{display:none}.hero-actions{gap:15px;flex-wrap:wrap}.landing-primary{padding:13px 18px}.hero-note{line-height:1.8}.desktop-break{display:none}.thought{width:235px}.thought-one{left:12px}.thought-two{right:10px}.thought-three{left:20px}.entry-panel>.card{padding:17px}.entry-panel .steps li{font-size:10px}}
@media(prefers-reduced-motion:reduce){.landing-page *{scroll-behavior:auto!important;transition:none!important}}

/* Motion and interaction */
.landing-page{scroll-behavior:smooth}
.landing-page .landing-nav{animation:nav-in .65s cubic-bezier(.2,.75,.25,1) both}
.motion-ready .hero-copy>*{animation:hero-in .7s cubic-bezier(.2,.8,.25,1) both}
.motion-ready .hero-copy>*:nth-child(2){animation-delay:.08s}.motion-ready .hero-copy>*:nth-child(3){animation-delay:.16s}.motion-ready .hero-copy>*:nth-child(4){animation-delay:.24s}.motion-ready .hero-copy>*:nth-child(5){animation-delay:.32s}
.motion-ready .thinking-art{animation:art-in .85s .12s cubic-bezier(.2,.8,.25,1) both}
.thinking-art .art-grid{transform:translate(calc(var(--mx,0) * -10px),calc(var(--my,0) * -10px)) scale(1.04);transition:transform .25s ease-out}
.thinking-art .thought{translate:calc(var(--mx,0) * 10px) calc(var(--my,0) * 8px);transition:translate .25s ease-out,box-shadow .25s ease}
.thinking-art:hover .thought{box-shadow:0 18px 34px #244a3220}
.thinking-art .thought-two{translate:calc(var(--mx,0) * -13px) calc(var(--my,0) * -9px)}
.art-orbit{animation:orbit-breathe 5s ease-in-out infinite}.orbit-two{animation-delay:-2.5s}
.art-spark{animation:sparkle 2.8s ease-in-out infinite}.spark-two{animation-delay:-1.4s}
.landing-primary span,.teacher-link span,.landing-secondary span{transition:transform .22s ease}.landing-primary:hover span,.teacher-link:hover span{transform:translate(3px,-3px)}.landing-secondary:hover span{transform:translateY(3px)}
.feature-grid article{transition:transform .3s cubic-bezier(.2,.75,.25,1),box-shadow .3s ease,border-color .3s ease}.feature-grid article:hover{transform:translateY(-7px);border-color:#cbd9c8;box-shadow:0 16px 34px #29452d12}.feature-grid article:hover .feature-icon{transform:rotate(-5deg) scale(1.08)}.feature-icon{transition:transform .3s cubic-bezier(.2,.8,.25,1)}
.how-list li{transition:transform .22s ease}.how-list li:hover{transform:translateX(6px)}
.entry-panel .pill,.entry-panel .btn{transition:transform .16s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.entry-panel .pill:active,.entry-panel .btn:active{transform:scale(.97)}
.entry-panel .pill.on{animation:choice-pop .28s cubic-bezier(.2,.85,.3,1.3)}
.step-enter{animation:step-in .42s cubic-bezier(.2,.8,.25,1) both}
.motion-ready .reveal-item{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.25,1)}
.motion-ready .reveal-item.is-visible{opacity:1;transform:none}
.motion-ready .feature-grid article:nth-child(2){transition-delay:.08s}.motion-ready .feature-grid article:nth-child(3){transition-delay:.16s}
@keyframes nav-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes hero-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes art-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes orbit-breathe{50%{transform:translateX(-50%) scale(1.035);opacity:.65}}
@keyframes sparkle{0%,100%{transform:scale(.85) rotate(-7deg);opacity:.5}50%{transform:scale(1.15) rotate(7deg);opacity:1}}
@keyframes choice-pop{50%{transform:scale(1.035)}}
@keyframes step-in{from{opacity:0;transform:translateY(15px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.landing-page *{animation:none!important;transition:none!important}.motion-ready .reveal-item{opacity:1;transform:none}}