@font-face{font-family:Mitr;src:url('public/assets/fonts/mitr-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Mitr;src:url('public/assets/fonts/mitr-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('public/assets/fonts/noto-thai-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans Thai';src:url('public/assets/fonts/noto-thai-semibold.ttf') format('truetype');font-weight:600 900;font-display:swap}
:root{--violet:#7131ff;--violet-light:#eee3ff;--violet-soft:#f7f3ff;--ink:#28124d;--body:#49445e;--muted:#77718b;--orange:#ff9b34;--blue:#3e5ce9;--line:#e9e2f3;--white:#fff;--page-gutter:clamp(24px,4.1vw,84px);--content-width:1440px;--display:Mitr,'Thonburi',sans-serif;--sans:'Noto Sans Thai','Thonburi',sans-serif;--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:115px}body{margin:0;background:var(--white);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button,summary,a{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--violet);outline-offset:6px}button{border:0}h1,h2,h3,p{margin:0}.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--white);padding:12px 20px}.skip-link:focus{top:12px}.sr-only{position:absolute;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;padding:0;border:0}
.site-header{position:fixed;inset:0 0 auto;z-index:10;transition:background .22s,box-shadow .22s,backdrop-filter .22s}.site-header.is-scrolled{background:#fffffff2;box-shadow:0 4px 24px #2b14550d;backdrop-filter:blur(16px)}.header-inner{height:126px;padding:0 var(--page-gutter);display:flex;align-items:center;gap:clamp(24px,3vw,58px);max-width:1920px;margin:auto}.brand{display:inline-flex;flex-shrink:0;align-items:center}.brand img{width:clamp(118px,10vw,166px);height:auto;mix-blend-mode:multiply}.desktop-nav{display:flex;flex:1;align-items:center;justify-content:center;gap:clamp(22px,2.8vw,52px)}.nav-link{font-size:clamp(14px,1.3vw,21px);font-weight:600;position:relative;white-space:nowrap;padding:20px 0}.nav-link::after{content:'';height:4px;border-radius:5px;position:absolute;bottom:6px;left:0;right:0;background:var(--violet);transform:scaleX(0);transition:transform .2s}.nav-link:hover,.nav-link.is-active{color:#6220ef}.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;padding:16px 29px;line-height:1.5;font-weight:600;transition:transform .18s,box-shadow .18s,background .18s}.button-primary{color:var(--white);background:linear-gradient(120deg,#8d48ff,#6924f4);box-shadow:0 5px 20px #7131ff17,inset 0 0 0 1px #ffffff3d}.button-primary:hover{transform:translateY(-2px);box-shadow:0 7px 25px #7131ff32}.button-primary:active{transform:translateY(0)}.header-download{font-size:clamp(15px,1.4vw,22px);border:2px solid #ffffffd6;white-space:nowrap;padding:15px 28px}.header-download .icon{width:24px;height:24px}.menu-toggle,.mobile-nav{display:none}
.hero{position:relative;isolation:isolate;min-height:760px;height:max(56.25vw,100svh);max-height:1120px;overflow:hidden;background:#f9f8ff}.hero-media{position:absolute;inset:0 -15% 0 18%;z-index:-3;background:#c9b5fa}.hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}.hero-wash{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#fff 0%,#fffffffd 23%,#ffffffed 29%,#ffffffbd 36%,#ffffff3d 45%,#ffffff00 56%),linear-gradient(180deg,#ffffff6b 0%,#fff0 18%,#fff0 89%,#ffffff5c 100%)}.hero-content{padding:clamp(150px,10vw,196px) 0 65px var(--page-gutter);width:48%;max-width:850px}.eyebrow{display:inline-flex;align-items:center;gap:14px;padding:10px 23px;line-height:1.4;font-size:clamp(15px,1.45vw,24px);font-weight:600;color:#5d1bdf;background:#eaddff;border-radius:999px;white-space:nowrap}.eyebrow .icon{width:24px;height:24px}h1{font-family:var(--display);font-size:clamp(52px,5.45vw,102px);line-height:1.27;letter-spacing:-.035em;font-weight:700;margin-top:24px;position:relative;z-index:1}.headline-first{position:relative;display:block;width:max-content;color:#241044}.crown{position:absolute;width:.6em;height:.45em;right:16%;top:-.2em;fill:#ffba32;transform:rotate(7deg)}.headline-rays{position:absolute;right:-.37em;top:.16em;transform:rotate(24deg);width:.08em;height:.32em;background:var(--orange);border-radius:99px}.headline-rays::after{content:'';position:absolute;width:.08em;height:.32em;left:.22em;top:.16em;background:var(--orange);border-radius:99px;transform:rotate(36deg)}.headline-accent{display:block;position:relative;white-space:nowrap;color:#8237f2}.headline-accent>svg{position:absolute;width:49%;height:.22em;right:7%;bottom:-.1em;fill:none;stroke:#c8adff;stroke-width:7;stroke-linecap:round;z-index:-1}.hero-description{font-size:clamp(19px,1.85vw,32px);color:var(--body);line-height:1.5;margin-top:31px;font-weight:400;white-space:nowrap;letter-spacing:-.04em}.store-buttons{display:flex;gap:12px;margin-top:38px}.store-button{display:flex;align-items:center;justify-content:center;gap:13px;color:#fff;background:linear-gradient(#1e1e21,#070708);border:1px solid #55505e;border-radius:10px;min-width:0;width:clamp(174px,13.6vw,235px);height:clamp(62px,4.5vw,78px);padding:8px 15px;box-shadow:0 2px 5px #1510200d;transition:transform .18s,box-shadow .18s}.store-button:hover{transform:translateY(-3px);box-shadow:0 8px 18px #28124d20}.store-mark{width:33px;height:39px;flex-shrink:0}.apple-mark{width:32px}.store-button>span{text-align:left;display:block;white-space:nowrap;line-height:1.15}.store-button small{font-size:clamp(10px,.9vw,15px);font-weight:400;display:block;margin-bottom:1px}.store-button strong{font-family:Arial,sans-serif;font-weight:500;font-size:clamp(23px,1.65vw,30px);letter-spacing:-.8px}.hero-benefits{display:flex;justify-content:space-between;gap:20px;max-width:475px;width:93%;margin-top:clamp(50px,5.6vw,98px)}.hero-benefit{text-align:center;font-size:clamp(13px,1vw,18px);line-height:1.55;color:#43345e;display:flex;align-items:center;flex-direction:column;gap:10px;white-space:nowrap}.hero-benefit strong{font-weight:600;color:var(--ink)}.benefit-icon{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;transition:transform .2s}.hero-benefit:hover .benefit-icon{transform:translateY(-5px)}.purple{color:#7934ed;background:#ece0ff}.blue{color:#3e56df;background:#dfe7ff}.orange{color:#ff8c2d;background:#fff0db}.video-toggle{position:absolute;right:26px;bottom:25px;display:flex;align-items:center;justify-content:center;border:1px solid #ffffffc9;border-radius:12px;width:38px;height:38px;color:#51367a;background:#ffffffb5;backdrop-filter:blur(12px);transition:background .2s}.video-toggle:hover{background:white}.video-toggle .icon{width:18px;height:18px}
.section{padding:100px var(--page-gutter);max-width:var(--content-width);margin:0 auto;scroll-margin-top:20px}.section-kicker{display:block;color:var(--violet);font-weight:600;font-size:16px;margin-bottom:16px}.section-heading h2,.download-section h2{font-family:var(--display);font-weight:500;line-height:1.45;letter-spacing:-.025em;font-size:clamp(32px,3vw,48px)}.section-heading h2 span,.download-section h2 span{color:var(--violet)}.section-heading p{font-size:18px;color:var(--body);line-height:1.9;margin-top:22px}.centered{text-align:center}.features-section{position:relative;max-width:none;background:#faf8ff}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1272px;gap:24px;margin:46px auto 0}.feature-panel{position:relative;overflow:hidden;padding:34px;border-radius:var(--radius);min-height:365px}.feature-library{background:#eee4ff}.feature-progress{background:#eaf0ff}.feature-game{background:#fff0df}.feature-label{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;margin-bottom:22px}.feature-library .feature-label{color:#7331da}.feature-progress .feature-label{color:#3e5ce9}.feature-game .feature-label{color:#cb7224}.feature-panel h3{font-family:var(--display);font-size:clamp(24px,2.2vw,32px);line-height:1.5;font-weight:500}.feature-panel p{font-size:16px;color:var(--body);line-height:1.9;margin-top:15px}.subject-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}.subject-tags span{font-size:12px;background:#ffffffb3;padding:7px 12px;border-radius:9px}.sample-chart{display:flex;height:83px;gap:12px;align-items:end;margin-top:24px;padding:0 12px;border-bottom:1px solid #c6d3f9}.sample-chart span{height:var(--bar);flex:1;border-radius:7px 7px 0 0;background:#96aaf4}.sample-chart span:last-child{background:#536fe8}.illustration-label{display:block;text-align:right;font-size:10px;color:#6678a5;margin-top:7px}.text-link{display:inline-flex;align-items:center;gap:14px;font-weight:600;margin-top:32px;color:#9b521b}.text-link:hover{gap:22px}.practice-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-top:120px;padding-bottom:120px}.practice-note{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;line-height:1.8;margin-top:32px}.quiz{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:0 20px 70px #3c1d6909}.quiz-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px}.quiz-topline>span:first-child{color:var(--violet);background:var(--violet-soft);padding:7px 12px;border-radius:8px}.quiz-progress{height:4px;background:var(--violet-light);border-radius:4px;margin:20px 0 25px;overflow:hidden}.quiz-progress>span{display:block;height:100%;width:33.333%;border-radius:4px;background:var(--violet);transition:width .3s}.quiz h3{font-size:21px;font-weight:600;line-height:1.75;margin-bottom:22px}.quiz fieldset{padding:0;margin:0;border:0;display:grid;gap:10px}.quiz-option{position:relative;display:flex;align-items:center;gap:13px;border:1px solid var(--line);padding:12px 14px;border-radius:12px;cursor:pointer;line-height:1.5;transition:border-color .15s,background .15s}.quiz-option:has(input:checked){border-color:var(--violet);background:#f7f2ff}.quiz-option:has(input:focus-visible){outline:3px solid #b79aff;outline-offset:3px}.quiz-option input{position:absolute;opacity:0;width:1px;height:1px}.option-letter{display:flex;align-items:center;justify-content:center;background:#f5f2fa;width:30px;height:30px;border-radius:8px;font-size:13px;flex-shrink:0}.quiz-option:has(input:checked) .option-letter{color:#fff;background:var(--violet)}.quiz-option.correct{border-color:#329a65;background:#f0fbf4}.quiz-option.incorrect{border-color:#d25b5b;background:#fff4f4}.quiz .button{width:100%;margin-top:22px;border-radius:13px;font-size:15px}.quiz .button:disabled{background:#eee9f5;color:#9e94b0;box-shadow:none;transform:none}.quiz-feedback{font-size:14px;line-height:1.8;margin-top:18px;padding:14px 16px;border-radius:12px;background:#f4f0fc}.quiz-feedback strong{display:block;margin-bottom:4px}.reviews-section{max-width:none;text-align:center;background:#fcfaff;padding-top:72px;padding-bottom:72px}.review-star{color:#ffb13d;width:32px;height:32px;margin-bottom:16px}.coming-soon-label{display:inline-block;font-size:13px;padding:10px 16px;border:1px solid #e7def5;border-radius:999px;color:#82708f;margin-top:24px}.faq-section{display:grid;grid-template-columns:1fr 1.4fr;gap:70px;padding-top:110px;padding-bottom:110px}.faq-list{border-top:1px solid var(--line)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;cursor:pointer;font-weight:600;font-size:17px}.faq-list summary::-webkit-details-marker{display:none}.faq-plus{position:relative;flex-shrink:0;width:18px;height:18px}.faq-plus::before,.faq-plus::after{content:'';position:absolute;inset:8px 1px auto;height:2px;background:var(--violet)}.faq-plus::after{transform:rotate(90deg);transition:transform .2s}details[open] .faq-plus::after{transform:rotate(0)}.faq-list details p{color:var(--body);line-height:1.9;padding:0 30px 24px 0;font-size:15px}.download-section{display:grid;grid-template-columns:1fr 1fr;max-width:1272px;margin:0 auto 70px;background:#f0e6ff;border-radius:32px;overflow:hidden;position:relative}.download-section>div:first-child{padding:55px;position:relative;z-index:1}.download-section h2{font-size:clamp(28px,2.6vw,42px)}.download-section .button{margin-top:25px}.download-art{min-height:360px;position:relative}.download-art img{width:100%;height:100%;object-fit:cover;object-position:60% center;position:absolute}.download-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f0e6ff,transparent 35%)}.site-footer{display:flex;align-items:center;gap:28px;padding:25px var(--page-gutter);border-top:1px solid var(--line);color:var(--muted);font-size:13px;max-width:1600px;margin:auto}.site-footer .brand img{width:95px}.site-footer>a:not(.brand){margin-left:auto}.site-footer>a:hover{color:var(--violet)}.site-footer small{white-space:nowrap}.download-sheet{position:fixed;inset:0;margin:auto;width:min(calc(100% - 32px),560px);max-height:85svh;overflow:auto;border:0;border-radius:28px;padding:34px 30px 30px;text-align:center;color:var(--ink);box-shadow:0 -10px 70px #29114d22}.download-sheet::backdrop{background:#2213336b;backdrop-filter:blur(5px)}.sheet-close{display:flex;align-items:center;justify-content:center;position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:12px;background:#f4f0fa;color:var(--ink)}.download-sheet h2{font-family:var(--display);font-weight:500;font-size:30px;margin:20px 0 12px}.download-sheet p{font-size:15px;line-height:1.9;color:var(--body)}.sheet-done{width:100%;margin-top:24px}
[hidden]{display:none!important}
.headline-accent{width:max-content}
@media(min-width:1021px){.hero-media{inset:10% -8% 0 24%;mask-image:linear-gradient(180deg,transparent,#000 12%)}h1{font-size:clamp(52px,5.15vw,98px);line-height:1.17;letter-spacing:-.05em;margin-top:18px}.headline-accent{font-size:.9em}.hero-description{margin-top:22px}}
@media(min-width:1800px){.hero-content{width:46%}.hero-benefits{max-width:510px}}
@media(max-width:1250px){.header-inner{gap:22px;height:108px}.desktop-nav{gap:21px}.nav-link{font-size:13px}.header-download{font-size:15px;padding:13px 20px}.brand img{width:118px}.hero-content{padding-top:155px}.eyebrow{font-size:17px}h1{font-size:5.5vw}.hero-description{font-size:22px}.hero{min-height:760px}.hero-benefits{margin-top:65px}.feature-panel{padding:27px}.practice-section{gap:55px}}
@media(max-width:1020px){.desktop-nav{gap:17px}.nav-link{font-size:12px}.header-download{padding:12px 16px;font-size:13px;gap:8px}.header-inner{gap:15px}.brand img{width:102px}.hero{height:780px;min-height:0}.hero-content{padding-top:155px;width:54%}h1{font-size:6vw}.hero-description{font-size:21px}.eyebrow{font-size:15px;padding:10px 17px}.hero-wash{background:linear-gradient(90deg,#fff 0%,#fffffffc 26%,#ffffffde 35%,#ffffff80 46%,#fff0 65%)}.hero-media{left:14%;right:-29%}.hero-benefits{max-width:400px}.hero-benefit{font-size:13px}.feature-panel h3{font-size:24px}.feature-panel p{font-size:14px}.feature-grid{gap:15px}.feature-panel{padding:25px 22px}.subject-tags span{font-size:10px;padding:7px}.practice-section{gap:35px}.quiz{padding:27px}.faq-section{gap:35px}.download-section{margin-left:24px;margin-right:24px}.download-section>div:first-child{padding:42px}}
@media(max-width:800px){html{scroll-padding-top:86px}.header-inner{height:88px;gap:14px;padding:0 24px}.brand img{width:105px}.desktop-nav{display:none}.header-download{margin-left:auto;font-size:13px;padding:10px 17px;gap:8px}.header-download .icon{width:19px;height:19px}.menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#ffffffd9;width:40px;height:40px;border-radius:12px;color:var(--ink)}.menu-toggle>span{height:2px;background:currentColor;width:19px;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true]>span:first-child{transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true]>span:last-child{transform:translateY(-7px) rotate(-45deg)}.mobile-nav:not([hidden]){display:flex;flex-direction:column;margin:0 20px;padding:10px 20px;background:#fffffff5;backdrop-filter:blur(16px);box-shadow:0 12px 35px #35156315;border:1px solid #eee5f8;border-radius:18px}.mobile-nav a{padding:12px 5px;font-size:15px}.mobile-nav a:hover{color:var(--violet)}.hero{height:auto;min-height:970px;padding-bottom:380px;background:white;max-height:none}.hero-content{width:100%;max-width:620px;margin:auto;padding:120px 24px 34px;text-align:center}.eyebrow{font-size:15px;gap:10px;padding:9px 16px}.eyebrow .icon{width:21px;height:21px}h1{font-size:clamp(44px,8.7vw,67px);margin-top:24px;line-height:1.3}.headline-first{margin:0 auto}.headline-accent{width:max-content;margin:auto}.headline-accent>svg{right:7%}.hero-description{font-size:clamp(17px,3vw,22px);margin-top:25px;line-height:1.7;letter-spacing:-.025em}.store-buttons{justify-content:center;margin-top:25px;gap:12px}.store-button{width:185px;height:63px;padding:8px 12px;gap:11px}.store-button strong{font-size:24px}.store-button small{font-size:11px}.store-mark{width:28px;height:34px}.hero-benefits{margin:34px auto 0;max-width:400px;width:100%;gap:16px}.benefit-icon{width:48px;height:48px}.hero-benefit{gap:7px;font-size:12px}.hero-media{inset:auto 0 0;height:440px;z-index:-3}.hero-media video{object-fit:cover;object-position:center center}.hero-wash{z-index:-2;background:linear-gradient(180deg,white 0%,white calc(100% - 440px),#ffffff00 calc(100% - 350px),#ffffff00 100%)}.video-toggle{bottom:15px;right:15px}.section{padding-top:70px;padding-bottom:70px}.section-heading h2{font-size:34px}.section-heading p{font-size:16px}.feature-grid{grid-template-columns:1fr;gap:18px;max-width:560px;margin-top:32px}.feature-panel{min-height:0;padding:30px}.feature-panel h3{font-size:28px}.feature-panel p{font-size:16px}.feature-panel h3 br,.feature-panel p br{display:none}.feature-label{margin-bottom:17px}.sample-chart{height:92px;max-width:300px}.subject-tags span{font-size:12px}.feature-panel .text-link{margin-top:24px}.practice-section{grid-template-columns:1fr;gap:35px}.practice-section .section-heading{text-align:center}.practice-section .section-heading h2 br{display:none}.practice-note{justify-content:center;margin-top:22px}.quiz{width:100%;max-width:560px;margin:auto;padding:28px}.faq-section{grid-template-columns:1fr;gap:30px}.faq-section .section-heading h2 br{display:none}.faq-list summary{font-size:16px}.download-section{grid-template-columns:1fr;text-align:center;border-radius:24px;margin-bottom:35px}.download-section>div:first-child{padding:38px 22px 15px}.download-section h2{font-size:32px}.download-art{min-height:260px}.download-art img{object-position:50% 66%}.download-art::after{background:linear-gradient(180deg,#f0e6ff,transparent 30%)}.site-footer{flex-wrap:wrap;justify-content:space-between;gap:12px 20px;padding:20px 24px}.site-footer .brand img{width:86px}.site-footer>span{font-size:12px}.site-footer>a:not(.brand){margin-left:0}.site-footer small{font-size:11px}}
@media(max-width:400px){.header-inner{padding:0 17px;gap:9px}.header-download{font-size:12px;padding:10px 13px}.brand img{width:95px}.hero-content{padding-left:18px;padding-right:18px}.eyebrow{font-size:13px}.hero-description{font-size:16px}h1{font-size:10vw}.store-button{width:161px;gap:9px}.store-button strong{font-size:21px}.store-button small{font-size:10px}.store-mark{width:25px;height:30px}.hero-benefits{gap:7px}.hero-benefit{font-size:11px}.hero{min-height:920px;padding-bottom:355px}.hero-media{height:400px}.hero-wash{background:linear-gradient(180deg,white 0%,white calc(100% - 400px),#fff0 calc(100% - 320px),#fff0 100%)}.section-heading h2{font-size:29px}.quiz{padding:22px}.quiz h3{font-size:18px}.download-sheet{padding-left:20px;padding-right:20px}}
@media(max-width:800px){.hero{min-height:0;padding-bottom:310px}.hero-media{height:clamp(285px,78vw,360px)}.hero-media video{object-position:65% center}.hero-wash{background:linear-gradient(180deg,white 0%,white calc(100% - clamp(285px,78vw,360px)),#fff0 calc(100% - clamp(210px,62vw,290px)),#fff0 100%)}}
@media(min-width:801px){.hero-content{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;justify-content:center;padding:0 0 0 var(--page-gutter)}}
/* Motion — all gated by no-preference so reduced-motion visitors see the static page */
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#a56bff,var(--violet),var(--orange));transform:scaleX(var(--scroll,0));transform-origin:left;opacity:0;transition:opacity .2s}.site-header.is-scrolled::after{opacity:1}
.button-primary{position:relative;overflow:hidden}.button-primary::after{content:'';position:absolute;inset:0 auto 0 -60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-20deg);pointer-events:none}
@media(prefers-reduced-motion:no-preference){
.button-primary:not(:disabled):hover::after{animation:sheen .8s ease}
.header-inner{animation:fade-down .8s cubic-bezier(.2,.7,.2,1) both}
.hero-media{animation:media-in 1.6s cubic-bezier(.2,.7,.2,1) both}
.headline-first,.headline-accent,.hero-description,.store-buttons{animation:rise-in .9s cubic-bezier(.2,.7,.2,1) both}
.headline-first{animation-delay:.15s}.headline-accent{animation-delay:.3s}.hero-description{animation-delay:.5s}.store-buttons{animation-delay:.65s}
.crown{animation:crown-pop .7s cubic-bezier(.34,1.56,.64,1) .85s both,crown-wobble 4.5s ease-in-out 1.7s infinite}
.headline-rays{animation:rays-in .5s ease-out 1.1s both,rays-pulse 2.6s ease-in-out 1.7s infinite}
.headline-accent>svg path{stroke-dasharray:320;stroke-dashoffset:0;animation:draw-line .9s ease-out .95s backwards}
.js .reveal{opacity:0}
.js .reveal.is-in{opacity:1;animation:rise-in .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:var(--rd,0ms)}

.feature-panel{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.feature-panel:hover{transform:translateY(-6px);box-shadow:0 22px 50px #3c1d6914}

.js .sample-chart span{transform:scaleY(0);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.js .sample-chart.is-in span{transform:none}
.sample-chart span:nth-child(2){transition-delay:.08s}.sample-chart span:nth-child(3){transition-delay:.16s}.sample-chart span:nth-child(4){transition-delay:.24s}.sample-chart span:nth-child(5){transition-delay:.32s}.sample-chart span:nth-child(6){transition-delay:.4s}
.js .subject-tags span{opacity:0}.js .subject-tags.is-in span{opacity:1;animation:pop-in .5s cubic-bezier(.34,1.56,.64,1) backwards}
.js .subject-tags.is-in span:nth-child(1){animation-delay:.25s}.js .subject-tags.is-in span:nth-child(2){animation-delay:.35s}.js .subject-tags.is-in span:nth-child(3){animation-delay:.45s}
.review-star{animation:float 3.6s ease-in-out infinite}
.js .download-art.is-in img{animation:ken-burns 14s ease-in-out infinite alternate}
.quiz h3.swap{animation:rise-in .45s cubic-bezier(.2,.7,.2,1) backwards}
.quiz-option{animation:option-in .45s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--n,0)*70ms + 80ms);transition:border-color .15s,background .15s,transform .15s}
.quiz-option:hover{transform:translateX(4px)}
.quiz-option:has(input:checked) .option-letter{animation:pop-in .3s cubic-bezier(.34,1.56,.64,1)}
.quiz-option.correct{animation:correct-pop .5s cubic-bezier(.34,1.56,.64,1)}
.quiz-option.incorrect{animation:shake .45s ease}
.quiz-feedback:not([hidden]){animation:rise-in .4s cubic-bezier(.2,.7,.2,1)}
.faq-list details[open] p{animation:faq-in .4s cubic-bezier(.2,.7,.2,1)}
.download-sheet[open]{animation:sheet-up .9s cubic-bezier(.2,.9,.3,1)}
.download-sheet[open]::backdrop{animation:fade-in .7s ease}
.confetti{position:absolute;left:50%;top:40%;width:9px;height:14px;border-radius:3px;pointer-events:none;z-index:2;animation:confetti 1.4s cubic-bezier(.15,.7,.3,1) forwards}
.quiz{position:relative}
}
@keyframes rise-in{from{opacity:0;transform:translateY(28px)}}
@keyframes fade-down{from{opacity:0;transform:translateY(-24px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes media-in{from{opacity:0;transform:scale(1.05)}}
@keyframes pop-in{from{opacity:0;transform:scale(.5)}}
@keyframes crown-pop{from{opacity:0;transform:translateY(14px) scale(.2) rotate(-25deg)}to{opacity:1;transform:rotate(7deg)}}
@keyframes crown-wobble{0%,100%{transform:rotate(7deg)}50%{transform:translateY(-4px) rotate(1deg)}}
@keyframes rays-in{from{opacity:0;transform:rotate(24deg) scale(.3)}}
@keyframes rays-pulse{0%,100%{opacity:1;transform:rotate(24deg) scale(1)}50%{opacity:.55;transform:rotate(24deg) scale(1.18)}}
@keyframes draw-line{from{stroke-dashoffset:320}}
@keyframes sheen{to{left:130%}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes ken-burns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes option-in{from{opacity:0;transform:translateX(-16px)}}
@keyframes correct-pop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}}
@keyframes sheet-up{from{opacity:0;transform:translateY(20px)}}
@keyframes confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:800px){}
@media(max-width:400px){}
.why-section{padding-top:110px;padding-bottom:110px}
.why-section .section-heading{margin-bottom:56px}
.why-points article{display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:24px;padding:34px 0;border-top:1px solid var(--line);transition:padding .35s cubic-bezier(.16,1,.3,1)}
.why-points article:last-child{border-bottom:1px solid var(--line)}
.why-points article:hover{padding-left:14px}
.why-points article:hover h3{color:var(--violet)}
.why-no{font-size:15px;font-weight:600;color:var(--violet)}
.why-points h3{font-family:var(--display);font-weight:500;font-size:30px;line-height:1.4;transition:color .2s}
.why-points p{font-size:16px;line-height:1.8;color:#5f5978}
@media(max-width:1020px){.why-points h3{font-size:24px}.why-points p{font-size:15px}}
@media(max-width:800px){.why-section .section-heading{margin-bottom:36px}.why-points article{grid-template-columns:1fr;gap:6px;padding:26px 0}.why-points article:hover{padding-left:0}.why-points h3{font-size:22px}.why-points p br{display:none}}
.why-section .section-heading{text-align:center}
/* Desktop hero: same stacked layout as mobile (centred copy, video below) */
@media(min-width:801px){
.hero{--hero-media:clamp(420px,40vw,700px);height:auto;min-height:0;max-height:none;padding-bottom:calc(var(--hero-media) - 70px);background:var(--white)}
.hero-content{position:static;display:block;width:100%;max-width:1000px;margin:0 auto;padding:clamp(150px,11vw,200px) var(--page-gutter) 40px;text-align:center}
h1{font-size:clamp(52px,5.6vw,92px)}
.headline-first{margin:0 auto}.headline-accent{width:max-content;margin:0 auto}
.hero-description{font-size:clamp(19px,1.7vw,28px);line-height:1.7;letter-spacing:-.025em}
.store-buttons{justify-content:center}
.hero-media{inset:auto 0 0;height:var(--hero-media);z-index:-3}
.hero-media video{object-position:center center}
.hero-wash{background:linear-gradient(180deg,#fff 0%,#fff calc(100% - var(--hero-media)),#fff0 calc(100% - var(--hero-media) + 110px),#fff0 100%)}
}
.quiz .quiz-download{margin-top:22px}.quiz .quiz-download+#quiz-submit{margin-top:10px}
#quiz-submit.is-secondary{background:var(--violet-soft);color:var(--violet);box-shadow:none}
.practice-section{grid-template-columns:1fr;justify-items:center;gap:48px}.practice-section .section-heading{text-align:center}.practice-section .quiz{width:100%;max-width:640px;margin:0 auto}
/* Final download block: giant type on a night glow */
.dl-final{position:relative;overflow:hidden;isolation:isolate;display:grid;justify-items:center;gap:30px;text-align:center;padding:clamp(80px,9vw,140px) var(--page-gutter);background:#1b0f33;color:#fff}
.dl-final::before{content:'';position:absolute;z-index:-1;left:50%;top:42%;width:min(820px,110%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#8d48ff55,#7131ff1a 45%,transparent 70%)}
.dl-final .section-kicker{margin:0;color:#c7a8ff}
.dl-final h2{font-family:var(--display);font-weight:700;font-size:clamp(44px,7.4vw,112px);line-height:1.2;letter-spacing:-.04em;text-wrap:balance}
.dl-final h2 span{color:#ffc061}
.dl-final .dl-stores{margin-top:6px;justify-content:center}
.dl-final .store-button{border-color:#ffffff40}
@media(max-width:800px){.dl-final h2{font-size:clamp(40px,12vw,64px)}}
.practice-section .section-heading,.faq-section .section-heading{text-align:center;align-self:center}
.practice-section{max-width:none;background:#faf7ff;padding-left:max(var(--page-gutter),calc((100% - 1272px)/2));padding-right:max(var(--page-gutter),calc((100% - 1272px)/2))}
.practice-section .quiz{border-color:#eee6fc;box-shadow:0 24px 60px #3c1d691a}
/* Section titles share one row: centred above the content, same as why + practice */
.faq-section{grid-template-columns:1fr;justify-items:center;gap:56px}
.faq-section .section-heading{text-align:center}
.faq-list{width:min(100%,820px)}
@media(max-width:800px){.faq-section{gap:30px}}
/* Desktop: practice title used 120px top padding, why + faq use 110px, so its title sat 10px lower */
@media(min-width:801px){.practice-section{padding-top:110px}.why-section .section-heading h2,.practice-section .section-heading h2,.faq-section .section-heading h2{white-space:nowrap}.why-section .section-heading h2 br,.practice-section .section-heading h2 br,.faq-section .section-heading h2 br{display:none}}
/* Mobile: why kept 110px top padding (its rule sits after the mobile .section rule), so its title sat 40px lower */
@media(max-width:800px){.why-section{padding-top:70px}}
.social-links{display:flex;gap:12px;margin-top:28px}
.social-links a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#ffffffe6;border:1px solid var(--line);color:var(--violet);box-shadow:0 2px 5px #1510200d;transition:transform .18s,box-shadow .18s}
.social-links a:hover{transform:translateY(-2px);box-shadow:0 6px 16px #2b14552e}
.social-links .icon{width:22px;height:22px}
.header-inner .social-links{margin:0;gap:8px}
.header-inner .social-links a{width:40px;height:40px;box-shadow:none}
.header-inner .social-links .icon{width:20px;height:20px}
@media(max-width:800px){.header-inner .social-links{display:none}}
.mobile-nav .social-links{margin:8px 0 4px;padding:12px 5px 4px;border-top:1px solid var(--line);gap:12px}
.mobile-nav .social-links a{width:40px;height:40px;box-shadow:none}
.mobile-nav .social-links .icon{width:20px;height:20px}
.site-footer small{margin-left:auto}
.quiz-complete-celebration{display:flex;justify-content:center;margin:-4px 0 10px}.quiz-complete-celebration video{display:block;width:148px;height:148px;object-fit:contain;filter:drop-shadow(0 12px 10px #7131ff26)}

.download-illustration{display:block;width:180px;height:100px;margin:0 auto;overflow:hidden}.download-illustration img{display:block;width:100%;height:auto;margin-top:-40px}