@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Sinhala:wght@400;500;600;700&family=Noto+Sans+Tamil:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{color-scheme:light;--paper:#f8f7f3;--ink:#18383a;--body:#526363;--purple:#5542a0;--line:#dedfd8;--green:#24685e;--white:#fff;--font:'Plus Jakarta Sans','Noto Sans Sinhala','Noto Sans Tamil',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}html:lang(si){--font:'Noto Sans Sinhala','Plus Jakarta Sans',sans-serif}html:lang(ta){--font:'Noto Sans Tamil','Plus Jakarta Sans',sans-serif}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,summary:focus-visible{outline:3px solid #6552b3;outline-offset:5px}svg{width:24px;height:24px;flex:none}p,h1,h2,h3{margin:0}h1,h2,h3{font-weight:700}h1{font-size:clamp(38px,4.7vw,62px);line-height:1.14;letter-spacing:-2.4px;text-wrap:balance}h2{font-size:clamp(28px,3vw,38px);line-height:1.28;letter-spacing:-1.3px;text-wrap:balance}h3{font-size:18px;line-height:1.5;letter-spacing:-.35px}html:lang(si) h1,html:lang(ta) h1{font-size:clamp(31px,3.45vw,46px);line-height:1.5;letter-spacing:-.7px}html:lang(si) h2,html:lang(ta) h2{font-size:clamp(25px,2.5vw,33px);line-height:1.6;letter-spacing:-.4px}html:lang(si) h3,html:lang(ta) h3{line-height:1.75;letter-spacing:0}html:lang(si) body,html:lang(ta) body{line-height:1.95}.wrap{width:min(1160px,calc(100% - 80px));margin-inline:auto}.skip-link{position:absolute;top:-120px;left:16px;padding:10px 20px;background:var(--white);z-index:20}.skip-link:focus{top:12px}.site-header{border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;gap:30px;min-height:98px;padding-block:20px}.brand{display:flex;align-items:center;gap:12px;flex:none}.brand img{border-radius:12px;object-fit:contain;background:white}.brand>span{font-size:13px;font-weight:800;line-height:1.45;letter-spacing:2px}.brand strong{display:block;font-size:15px;letter-spacing:-.3px;max-width:180px}.main-nav{display:flex;gap:24px;margin-left:auto;font-size:12px;font-weight:600}.main-nav a:hover,.footer-links a:hover{color:var(--purple);text-decoration:underline;text-underline-offset:5px}.header-actions{display:flex;align-items:center;gap:24px}.languages{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:100px}.languages a{min-height:36px;display:flex;align-items:center;justify-content:center;padding:4px 10px;font-size:11px;font-weight:600;border-radius:100px}.languages a[aria-pressed=true]{color:#fff;background:var(--ink)}.languages a[aria-pressed=false]:hover{background:#e8e9e1}.header-login{font-weight:700;font-size:12px;display:flex;align-items:center;gap:8px}.header-login svg{width:16px;height:16px}.hero{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:70px;padding-block:88px 92px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--green);font-size:11px;letter-spacing:1.4px;font-weight:800;text-transform:uppercase;margin-bottom:20px}.status-dot{width:7px;height:7px;flex:none;background:#498777;border-radius:50%}.hero-description{font-size:16px;color:var(--body);margin-block:24px 29px;max-width:485px;line-height:1.9}.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.button{display:inline-flex;justify-content:center;align-items:center;gap:15px;border-radius:10px;min-height:52px;padding:14px 19px;font-weight:700;font-size:12px;text-align:center;line-height:1.6;transition:background .15s,transform .15s}.button svg{width:18px;height:18px}.button:hover{transform:translateY(-2px)}.primary{background:var(--purple);color:white;border:1px solid var(--purple);box-shadow:0 5px 12px #5542a01a}.primary:hover{background:#453584}.secondary{border:1px solid #c9d1c8;background:transparent}.secondary:hover{background:#eaece4}.price-caption{margin-top:23px;font-size:11px}.price-caption strong{font-weight:700}.price-caption p{font-size:10px;color:var(--body);margin-top:4px}.hero-visual{position:relative;padding-block:35px 27px;min-width:0}.orbit{position:absolute;border:1px solid #d2dcd0;border-radius:50%;z-index:-1}.orbit-one{width:115%;height:92%;inset:0 -8%;transform:rotate(-20deg);background:#e9eee3}.orbit-two{width:106%;height:100%;inset:-2% -3%;transform:rotate(30deg)}.overview{background:#fff;border-radius:22px;border:1px solid #e1e4dc;box-shadow:0 22px 65px #233a2510;padding:26px;position:relative;transform:rotate(-2deg)}.overview-top{display:flex;align-items:center;gap:12px;padding-bottom:27px}.tiny-logo{background:var(--ink);color:white;font-weight:800;font-size:10px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;letter-spacing:1px}.small-label{font-size:10px;font-weight:600;color:var(--body);text-transform:uppercase;letter-spacing:1px}.overview-dots{margin-left:auto;font-size:13px;letter-spacing:2px;color:#828c82}.overview h2{font-size:26px;letter-spacing:-1px}.overview-caption{color:#6a7774;font-size:10px;margin-top:8px}.overview-items{margin-block:22px 18px;display:grid;gap:10px}.overview-item{display:flex;align-items:center;gap:13px;border:1px solid #e9ece5;padding:14px 12px;border-radius:12px}.icon-box{width:45px;height:45px;border-radius:12px;display:grid;place-items:center;flex:none}.mint{background:#e3efe6;color:#2e6850}.lilac{background:#eee9f9;color:#62469d}.peach{background:#faf0df;color:#9d6a2b}.overview-item h3{font-size:12px;line-height:1.6;letter-spacing:0}.overview-item p{font-size:10px;line-height:1.6;color:var(--body);margin-top:3px}.row-arrow{margin-left:auto;color:#7e8e85;font-size:15px}.family-strip{border-radius:10px;background:#f0f3eb;color:#416044;display:flex;align-items:center;gap:9px;padding:12px;font-size:10px;font-weight:600}.family-strip svg{width:18px;height:18px}.trial-sticker{position:absolute;bottom:2px;right:-18px;border-radius:12px;background:#efdd91;border:4px solid var(--paper);box-shadow:0 8px 20px #5e612512;padding:13px 21px;display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;transform:rotate(4deg)}.trial-sticker>span:first-child{font-size:23px;line-height:1}.section{padding-block:72px}.features{border-top:1px solid var(--line)}.section-heading{max-width:710px}.section-heading .eyebrow{margin-bottom:14px}.section-intro{color:var(--body);font-size:14px;margin-top:18px;max-width:620px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}.feature-card{background:#fff;border:1px solid #e5e5dc;border-radius:16px;padding:28px}.feature-card h3{margin-block:21px 12px}.feature-card p{color:var(--body);font-size:13px}.steps-section{background:#edf0e7;border-block:1px solid #dfe4d7}.steps{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.steps li{display:flex;gap:18px}.step-number{font-size:12px;font-weight:700;color:var(--green);width:32px;height:32px;border:1px solid #c9d4c1;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:2px}.steps h3{font-size:15px;margin-bottom:10px}.steps p{font-size:12px;color:var(--body)}.pricing{display:grid;grid-template-columns:1fr .82fr;gap:110px;align-items:center;padding-block:88px}.plan-copy .section-intro{font-size:15px}.included{list-style:none;padding:0;margin:26px 0 20px;display:grid;gap:13px}.included li{display:flex;align-items:flex-start;gap:12px;font-size:13px;font-weight:500}.included svg{width:20px;height:20px;background:#e5ece0;color:#386746;border-radius:50%;padding:3px;margin-top:3px}.fine-print{font-size:11px;color:var(--body);max-width:400px}.price-card{border:1px solid #d8d5e6;background:#fff;border-radius:20px;text-align:center;padding:33px;box-shadow:0 16px 40px #42367608}.trial-badge{display:inline-block;border-radius:30px;background:#e6ecd9;color:#3d6126;padding:6px 18px;font-size:12px;font-weight:700}.after-trial{font-size:12px;color:var(--body);margin-top:24px}.price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:4px 0 0}.price strong{font-size:80px;line-height:1.2;letter-spacing:-5px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700}.price>span:first-child{font-size:22px;font-weight:700}.price>span:last-child{font-size:12px;color:var(--body)}.family-included{font-size:13px;font-weight:700;margin-top:8px}.billing-note{font-size:12px;color:var(--body);margin:20px auto;max-width:295px}.price-card .button{width:100%}.trial-note{font-size:10px;color:var(--body);margin-top:16px}.faq-section{background:#f0f0ea;border-block:1px solid var(--line)}.faq{display:grid;grid-template-columns:.7fr 1fr;gap:90px}.questions{border-top:1px solid #d3d8ce}.questions details{border-bottom:1px solid #d3d8ce}.questions summary{display:flex;align-items:center;gap:24px;cursor:pointer;list-style:none;padding:20px 0;font-size:13px;font-weight:700;line-height:1.8}.questions summary::-webkit-details-marker{display:none}.questions summary>span:last-child{margin-left:auto;font-size:21px;font-weight:400;flex:none;transition:transform .15s}.questions details[open] summary>span:last-child{transform:rotate(45deg)}.questions details p{font-size:12px;line-height:1.9;color:var(--body);padding-bottom:22px}.site-footer{padding-block:42px 25px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:25px}.footer-brand{font-size:17px;font-weight:800;letter-spacing:-.5px}.site-footer p{font-size:11px;color:var(--body);margin-top:8px}.footer-links{display:flex;gap:24px;font-size:11px;font-weight:600}.site-footer small{grid-column:1/-1;padding-top:23px;border-top:1px solid var(--line);font-size:10px;color:var(--body)}
@media(min-width:901px){html:lang(si) .header-inner,html:lang(ta) .header-inner{gap:16px}html:lang(si) .main-nav,html:lang(ta) .main-nav{gap:14px}html:lang(si) .header-actions,html:lang(ta) .header-actions{gap:15px}}
@media(max-width:1100px){.main-nav{display:none}.header-actions{margin-left:auto}.hero{gap:45px}.wrap{width:calc(100% - 64px)}.hero{padding-block:64px}.pricing{gap:60px}.overview{padding:20px}.overview h2{font-size:23px}html:lang(si) .overview h2,html:lang(ta) .overview h2{font-size:22px}.trial-sticker{right:-12px}.faq{gap:50px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:24px;text-align:center}.hero-copy{max-width:660px;margin:auto}.hero .eyebrow{justify-content:center}.hero-description{max-width:580px;margin-inline:auto}.hero-actions{justify-content:center}.hero-visual{max-width:470px;width:100%;margin:10px auto 0}.feature-grid{gap:15px}.feature-card{padding:23px}.steps{gap:25px}.steps li{display:block}.step-number{margin-bottom:16px}.pricing{grid-template-columns:1fr 1fr;gap:35px}.price-card{padding:28px 22px}.faq{grid-template-columns:1fr;gap:30px}.footer-links{gap:16px}.site-footer{grid-template-columns:1fr}.site-footer small{grid-column:1}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header-inner{gap:14px;min-height:0;padding-block:16px;flex-wrap:wrap;justify-content:space-between}.brand{gap:9px}.brand img{width:38px;height:38px;border-radius:9px}.brand strong{font-size:12px;max-width:170px}.brand>span{font-size:10px}.header-actions{display:contents}.languages{order:3;width:100%;max-width:320px;justify-content:center;margin:0 auto}.languages a{flex:1;min-height:38px;font-size:12px}.header-login{font-size:11px;margin-left:auto;max-width:120px}.hero{padding-block:42px 45px;gap:24px}.eyebrow{font-size:10px;letter-spacing:.8px;margin-bottom:18px}h1{font-size:39px;letter-spacing:-1.6px}.hero-description{font-size:14px;margin-block:22px 25px}.hero-actions{gap:10px;flex-direction:column}.hero-actions .button{width:100%}.button{font-size:12px;padding:14px 16px;min-height:52px}.price-caption{font-size:11px;margin-top:19px}.price-caption p{font-size:10px}.hero-visual{max-width:390px;padding:25px 8px}.orbit-one{width:100%;inset:3% 0}.orbit-two{width:98%;inset:0 1%}.overview{padding:20px 17px;transform:rotate(-1deg);border-radius:18px;text-align:left}.overview-top{padding-bottom:20px}.overview h2{font-size:23px}.overview-item{gap:11px;padding:12px 10px}.overview-item .icon-box{width:38px;height:38px}.overview-item h3{font-size:12px}.overview-item p{font-size:10px}.trial-sticker{right:0;bottom:0;padding:10px 15px;font-size:11px}.family-strip{font-size:10px}.section{padding-block:46px}.section-heading .eyebrow{margin-bottom:12px}h2{font-size:28px;letter-spacing:-.8px}.section-intro{font-size:13px}.feature-grid{grid-template-columns:1fr;gap:14px;margin-top:26px}.feature-card{padding:24px}.feature-card h3{font-size:17px;margin-block:15px 10px}.feature-card p{font-size:13px}.steps{grid-template-columns:1fr;gap:25px;margin-top:26px}.steps li{display:flex;gap:15px}.step-number{margin:2px 0 0}.steps p{font-size:12px}.pricing{grid-template-columns:1fr;gap:30px}.plan-copy .section-intro{font-size:14px}.price-card{padding:30px 22px}.price strong{font-size:76px}.fine-print{font-size:11px}.faq{gap:26px}.questions summary{font-size:12px;gap:15px}.questions details p{font-size:12px}.site-footer{padding-top:30px;gap:20px}.footer-links{flex-wrap:wrap;gap:15px 23px}html:lang(si) h1,html:lang(ta) h1{font-size:32px;line-height:1.6;letter-spacing:-.6px}html:lang(si) .hero-description,html:lang(ta) .hero-description{font-size:14px}html:lang(si) .overview h2,html:lang(ta) .overview h2{font-size:22px}.overview-item>div{min-width:0}}
.hero-visual{isolation:isolate;overflow:clip;padding-inline:18px}.trial-sticker{right:0}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:3px solid #8c74d6;outline-offset:4px}
button:disabled{opacity:.5;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.watch-link{display:inline-flex;gap:9px;align-items:center;font-size:12px;font-weight:700;color:var(--purple);margin-top:20px}
.watch-link:hover{text-decoration:underline;text-underline-offset:5px}
.watch-link>span:first-child{width:28px;height:28px;display:grid;place-items:center;background:#eee9f9;border-radius:50%;font-size:10px}
.family-visual{padding-bottom:48px}
.family-photo{margin:0;background:#fff;border:9px solid #fff;border-radius:24px;box-shadow:0 16px 48px #233a2512;transform:rotate(-1.5deg);overflow:hidden}
.family-photo img{display:block;width:100%;height:auto;border-radius:15px;aspect-ratio:4/3;object-fit:cover}
.family-photo figcaption{display:flex;gap:10px;align-items:center;padding:18px 8px 12px;text-align:left;font-size:12px;line-height:1.7;color:var(--green);font-weight:600}
.family-photo figcaption svg{width:24px;height:24px}
.family-visual .trial-sticker{right:10px;bottom:5px}
.steps-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.learning-photo{margin:0;background:#fff;border:9px solid #fff;border-radius:20px;overflow:hidden;box-shadow:0 12px 35px #234a3010;transform:rotate(1deg)}
.learning-photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
.learning-photo figcaption{text-align:center;padding:17px 8px 10px;font-size:13px;font-weight:600;color:var(--green)}
.steps-layout .steps{grid-template-columns:1fr;gap:23px;margin-top:27px}
.steps-layout .steps li{display:flex}
.tour-section{background:#ece9f4;border-top:1px solid #e0d9ed}
.tour-player{margin-top:32px;border:1px solid #d2c9e3;border-radius:22px;overflow:hidden;background:white;box-shadow:0 15px 35px #3023500a}
.tour-screen{padding:35px;background:radial-gradient(ellipse at 8% 100%,#396c63,transparent 70%),#193a3b;color:white}
.tour-scene{display:grid;grid-template-columns:1.07fr 1fr;gap:42px;align-items:center;min-height:380px}
.tour-scene:not([hidden]){animation:scene-enter .4s ease both}
/* Screenshots of the original login panel; no embedded credential form. */
.actual-login-preview{margin:0 auto;width:min(100%,335px);background:#fff;border:1px solid #dcd7e7;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px #001a1b30}
.actual-login-brand{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--ink);font-size:12px;font-weight:700}
.actual-login-brand img{width:34px;height:34px;object-fit:contain;border-radius:8px}
.actual-login-image{display:block;width:100%;height:auto}
.login-step-number{display:block;color:#b9d8d0;font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:12px}
.login-preview-scene .scene-caption h3{font-size:clamp(22px,2.1vw,31px);line-height:1.5;margin-bottom:14px}
.login-preview-scene .tour-login-link{margin-top:18px;background:#fff;color:#34236e}
.login-preview-scene .scene-caption .login-preview-hint{font-size:12px;font-weight:400;line-height:1.7;color:#d9e8e3;margin-top:12px}
.demo-window{border:1px solid #dce3db;border-radius:17px;background:#fcfdfa;color:var(--ink);overflow:hidden;box-shadow:0 8px 22px #001a1b30;min-width:0}
.demo-window-bar{display:flex;align-items:center;gap:12px;padding:15px 20px;border-bottom:1px solid #e4e9e0;font-size:12px;font-weight:700;background:white}
.demo-window-bar>span:last-child{margin-left:auto;letter-spacing:3px;color:#7a8c80}
.demo-window .tiny-logo{height:28px;width:28px;font-size:8px;border-radius:8px}
.demo-content{padding:19px 23px 22px;min-height:326px}
.demo-step-count{font-size:10px;color:var(--green);font-weight:700;letter-spacing:2px}
.demo-content h3{font-size:20px;line-height:1.5;letter-spacing:-.5px;margin:7px 0 17px}
.demo-form{display:grid;gap:7px}
.demo-field-label{font-size:10px;color:var(--body)}
.demo-field{background:white;border:1px solid #d8ded3;border-radius:7px;padding:8px 13px;font-size:13px;letter-spacing:1px;margin-bottom:5px}
.demo-submit{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px;background:var(--purple);color:white;font-size:12px;border-radius:7px;margin-top:4px}
.demo-submit svg{width:16px;height:16px}
.demo-row{display:flex;gap:12px;align-items:center;padding:15px 12px;border:1px solid #e0e7dc;background:white;border-radius:10px;margin:10px 0}
.demo-row strong{font-size:12px;line-height:1.6;display:block}
.demo-row p{font-size:10px;line-height:1.6;color:var(--body);margin-top:5px}
.demo-row .icon-box{width:38px;height:38px}
.demo-row .icon-box svg{width:22px;height:22px}
.demo-tick{margin-left:auto;font-weight:700;color:var(--green);font-size:12px}
.demo-note{text-align:center;font-size:11px;font-weight:600;color:var(--green);padding:12px;background:#e5efd8;border-radius:10px;margin-top:13px}
.demo-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:18px 0}
.demo-calendar span{display:grid;place-items:center;min-height:32px;border:1px solid #e1e6dc;border-radius:6px;font-size:11px;background:white}
.demo-calendar .is-present{background:#d8ead8;color:#205b36;font-weight:700;border-color:#a9cba8}
.scene-caption p{font-size:19px;line-height:1.9;font-weight:500;text-wrap:pretty}
.tour-controls{display:flex;gap:24px;align-items:center;padding:23px 27px 12px}
.tour-play{min-width:145px;border:0;flex:none}
.tour-progress-wrap{flex:1;display:flex;gap:14px;align-items:center;min-width:0}
.tour-progress-wrap progress{width:100%;min-width:40px;accent-color:var(--purple);height:6px;border:0;border-radius:100px;overflow:hidden}
.tour-progress-wrap progress::-webkit-progress-bar{background:#e8e3ef;border-radius:100px}
.tour-progress-wrap progress::-webkit-progress-value{background:var(--purple);border-radius:100px}
.tour-time{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tour-arrows{display:flex;gap:10px}
.tour-arrows button{background:#f5f3f8;border:1px solid #e1dce9;border-radius:8px;padding:9px 12px;font-size:10px;min-height:40px}
.tour-chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:13px 27px 18px}
.tour-chapters button{display:flex;align-items:center;gap:9px;background:transparent;border:1px solid #e0dce7;border-radius:8px;padding:11px;font-size:11px;text-align:left;line-height:1.6}
.tour-chapters button>span:first-child{font-size:9px;font-weight:700;color:#6f5f88}
.tour-chapters button[aria-pressed=true]{background:#efebf7;border-color:#8f7ab4;color:#483077;font-weight:700}
.tour-demo-note{font-size:10px;line-height:1.8;color:var(--body);padding:0 27px 22px;text-align:center}
html:lang(si) .demo-content h3,html:lang(ta) .demo-content h3{font-size:18px;line-height:1.65}
html:lang(si) .scene-caption p,html:lang(ta) .scene-caption p{font-size:17px;line-height:2}
@keyframes scene-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(max-width:1100px){.steps-layout{gap:40px}.tour-scene{gap:28px}.tour-controls{gap:15px}.tour-arrows{gap:6px}.tour-chapters{gap:6px}.tour-chapters button{font-size:10px;padding:10px 8px}}
@media(max-width:900px){.family-visual{max-width:560px}.steps-layout{grid-template-columns:1fr;gap:35px}.learning-photo{width:min(560px,100%);margin:auto}.tour-controls{flex-wrap:wrap}.tour-progress-wrap{min-width:40%}.tour-arrows{margin-left:auto}.tour-scene{gap:25px;grid-template-columns:1.2fr 1fr}.tour-screen{padding:26px}.scene-caption p{font-size:16px}.demo-content{padding:18px}.tour-chapters button{display:block}.tour-chapters button>span:first-child{display:block;margin-bottom:5px}}
@media(max-width:650px){.tour-scene{grid-template-columns:1fr;gap:22px;min-height:0}.tour-screen{padding:20px}.scene-caption{min-height:130px}.scene-caption p,html:lang(si) .scene-caption p,html:lang(ta) .scene-caption p{font-size:13px;line-height:1.9}.demo-content{min-height:345px;padding:18px 15px}.demo-content h3{font-size:18px}.demo-row{padding:12px 9px;gap:9px}.demo-row strong{font-size:11px}.demo-row p{font-size:10px}.demo-window-bar{padding:12px 15px;font-size:11px}.tour-controls{padding:19px 17px 10px;gap:14px}.tour-play{width:100%;min-height:46px}.tour-progress-wrap{flex-basis:100%}.tour-arrows{width:100%;justify-content:space-between}.tour-arrows button{font-size:10px;max-width:48%}.tour-chapters{padding:8px 17px 17px;grid-template-columns:repeat(3,1fr);gap:7px}.tour-chapters button{font-size:10px;padding:9px}.tour-demo-note{padding:0 17px 20px;font-size:9px}.family-photo{border-width:7px;border-radius:17px}.family-photo img{border-radius:10px}.family-photo figcaption{font-size:10px;padding:14px 6px 10px}.family-visual{padding-inline:9px;padding-bottom:40px}.family-visual .trial-sticker{font-size:10px;bottom:0;right:0}.watch-link{font-size:12px;margin-top:17px}.learning-photo{border-width:7px}.learning-photo figcaption{font-size:12px}.steps-layout .steps li{display:flex}.tour-player{border-radius:16px}.tour-section .section-heading h2{font-size:27px}}
@media(prefers-reduced-motion:reduce){.tour-scene:not([hidden]){animation:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.button:hover{transform:none}}
/* Compact spacing also applies to narrow laptop windows and full-HD screens. */
.section{padding-block:30px}
.hero{padding-block:26px;gap:24px}
.hero .eyebrow{margin-bottom:12px}
.hero-description{margin-block:16px 18px}
.watch-link,.price-caption{margin-top:14px}
.section-intro{margin-top:10px}
.section-heading .eyebrow{margin-bottom:10px}
.feature-grid{gap:16px;margin-top:22px}
.feature-card{padding:20px}
.feature-card h3{margin-block:14px 9px}
.family-visual{padding:0 8px 34px;margin:0 auto;width:100%;max-width:480px}
.family-visual .orbit{display:none}
.family-photo,.learning-photo{transform:none}
.family-photo figcaption{padding:12px 6px 8px}
.family-visual .trial-sticker{right:0;bottom:0;padding:10px 16px}
.steps-layout{gap:28px}
.steps-layout .steps{gap:16px;margin-top:20px}
.steps h3{margin-bottom:6px}
.learning-photo figcaption{padding:12px 8px 8px}
.pricing{gap:32px}
.price-card{padding:24px}
.after-trial{margin-top:14px}
.billing-note{margin-block:14px}
.trial-note{margin-top:12px}
.included{margin-block:20px 16px;gap:10px}
.faq{gap:28px}
.site-footer{padding-block:26px 20px;gap:18px}
.site-footer small{padding-top:16px}
.tour-section .section-heading{max-width:none}
.tour-section .section-intro{max-width:none}
.tour-player{margin-top:18px}
.tour-screen{padding:20px}
.tour-scene{gap:24px;min-height:0}
.demo-window-bar{padding-block:10px}
.demo-content{min-height:280px;padding:14px 18px 16px}
.demo-content h3{margin-bottom:12px}
.demo-form{gap:4px}
.demo-row{padding-block:12px}
.tour-controls{padding:14px 18px 8px;gap:14px}
.tour-chapters{padding:8px 18px 12px}
.tour-demo-note{padding:0 18px 14px}
@media(min-width:601px){
  .wrap{width:min(1440px,calc(100% - 48px))}
  .header-inner{min-height:74px;padding-block:12px}
}
@media(min-width:700px) and (max-width:1000px){
  .hero{grid-template-columns:1fr 1fr;gap:14px 24px;text-align:left;align-items:start}
  .hero-copy{display:contents}
  .hero .eyebrow{grid-column:1/-1;grid-row:1;justify-content:center;margin:0}
  .hero h1{grid-column:1/-1;grid-row:2;text-align:center}
  .hero-description{grid-column:1;grid-row:3;margin:4px 0 0;max-width:none}
  .hero-actions{grid-column:1;grid-row:4;flex-direction:column;align-items:stretch;gap:8px}
  .hero-actions .button{width:100%}
  .hero .watch-link{grid-column:1;grid-row:5;margin:0}
  .hero .price-caption{grid-column:1;grid-row:6;margin:0}
  .family-visual{grid-column:2;grid-row:3/7;align-self:center;margin:0;max-width:none}
  .family-photo{border-width:7px;border-radius:18px}
  .family-photo figcaption{font-size:11px}
  .family-visual .trial-sticker{font-size:11px;padding:8px 12px}
}
@media(min-width:700px){
  .steps-layout{grid-template-columns:.9fr 1.1fr}
  .steps-layout .learning-photo{width:100%}
}
@media(min-width:1001px){
  .hero{grid-template-columns:1.1fr 1fr}
  .hero-description{max-width:590px}
  .family-visual{justify-self:center}
}
@media(min-width:1101px){
  .features{display:grid;grid-template-columns:.8fr 2.2fr;gap:28px;align-items:center}
  .feature-grid{margin:0;gap:14px}
  .feature-card{padding:20px 18px}
  .faq{grid-template-columns:.8fr 2.2fr}
  .questions{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:0;align-items:start}
  .questions details{border-top:1px solid #d3d8ce;border-bottom:0}
  .questions summary{padding-block:16px}
}
@media(max-width:699px){
  .family-visual{max-width:420px}
  .steps-layout{gap:22px}
}
@media(max-width:650px){
  .demo-content{min-height:300px;padding-inline:15px}
  .scene-caption{min-height:0}
  .tour-screen{padding:18px}
  .tour-chapters{padding-inline:16px}
}
/* Keep the family plan together instead of stretching a separate price card. */
.pricing{display:block;padding-block:24px}
.plan-heading{margin-bottom:14px}
.plan-heading .eyebrow{margin-bottom:6px}
.plan-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr);gap:24px;align-items:center;padding:22px;background:#fff;border:1px solid #d8d5e6;border-radius:16px}
.plan-panel .section-intro{margin-top:0}
.plan-panel .included{margin-block:14px 10px;gap:7px}
.plan-panel .fine-print{max-width:none}
.price-card{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:22px;padding:0 0 0 24px;background:transparent;border:0;border-left:1px solid #e3dfec;border-radius:0;box-shadow:none}
.plan-rate,.plan-checkout{min-width:0}
.price-card .trial-badge{padding:5px 12px}
.price-card .after-trial{margin-top:8px}
.price-card .price{margin-top:2px;gap:6px}
.price-card .price strong{font-size:64px;letter-spacing:-3px}
.price-card .family-included{margin-top:4px}
.price-card .billing-note{margin:0 0 12px;max-width:none}
.price-card .trial-note{margin-top:10px;text-align:left}
.faq{padding-block:24px;gap:24px;align-items:start}
.faq .section-heading .eyebrow{margin-bottom:6px}
.faq .section-heading h2{font-size:24px;line-height:1.5;letter-spacing:-.3px}
.questions summary{padding-block:12px}
.questions summary>span:last-child{font-size:20px;line-height:1}
@media(min-width:1101px){
  .faq{grid-template-columns:minmax(190px,.6fr) minmax(0,2.4fr)}
}
@media(min-width:701px) and (max-width:1100px){
  .plan-panel{grid-template-columns:1fr;gap:18px;padding:20px}
  .price-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-left:0;border-top:1px solid #e3dfec;padding:18px 0 0}
  .plan-panel .included{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
}
@media(max-width:700px){
  .plan-panel{grid-template-columns:1fr;padding:20px;gap:20px}
  .price-card{grid-template-columns:1fr;border-left:0;border-top:1px solid #e3dfec;padding:18px 0 0;gap:16px}
  .price-card .trial-note{text-align:center}
  .faq{gap:18px}
}

/* 2026-10-13: 2x/20s Parent Portal guide and separate compact app screenshots */
.tour-speed-pill{display:inline-flex;margin:14px 0 0;padding:5px 13px;background:#ebe5f5;border:1px solid #d8c9ed;border-radius:999px;color:#4d2c7e;font-size:12px;font-weight:800;letter-spacing:.01em}
.tour-guide-shot{width:min(100%,480px);margin:0 auto;border-radius:14px;overflow:hidden;background:#fff;border:1px solid #d8d3df;box-shadow:0 7px 20px #071d2027}
.guide-shot-browser-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:7px;background:#fff;border-bottom:1px solid #ded8e8;color:#3f3351;padding:10px 13px;font-size:12px;font-weight:700}
.tour-guide-shot img{display:block;width:100%;max-height:355px;height:auto;object-fit:contain;object-position:top center;background:#f7f4fb}
.guide-preview-scene .scene-caption h3{font-size:clamp(21px,2vw,29px);line-height:1.45;margin:0 0 12px}
.guide-gallery{background:#fff;border-top:1px solid #e9e4f2}
.guide-gallery .section-heading{max-width:760px}
.guide-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:25px}
.guide-gallery-card{margin:0;padding:18px;border:1px solid #e0d9e9;background:#fbfaff;border-radius:20px;min-width:0;display:flex;align-items:stretch;flex-direction:column}
.guide-gallery-card h3{color:#312242;font-size:19px;line-height:1.45;margin:0 0 13px}
.guide-gallery-card img{display:block;width:min(100%,430px);height:auto;max-height:500px;object-fit:contain;object-position:top center;align-self:center;background:#fff;border-radius:12px;border:1px solid #e5dfeb;box-shadow:0 3px 12px #251a3c10}
.guide-gallery-card figcaption{font-size:14px;line-height:1.55;color:#544964;padding-top:13px}
.guide-gallery-note{color:#675c73;text-align:center;font-size:12px;margin:18px 0 0}
.site-footer small{line-height:1.8;overflow-wrap:anywhere}
.site-footer small a{color:inherit;text-decoration:underline;font-weight:700}
.footer-credit{display:block;opacity:.75;font-size:11px;margin-top:3px}
@media(max-width:750px){.guide-gallery-grid{gap:14px}.guide-gallery-card{padding:12px}.guide-gallery-card h3{font-size:15px}.tour-guide-shot img{max-height:340px}}
@media(max-width:580px){.guide-gallery-grid{grid-template-columns:minmax(0,1fr)}.guide-gallery-card{max-width:440px;width:100%;justify-self:center}.tour-guide-shot img{max-height:320px}.guide-preview-scene .scene-caption h3{font-size:20px}.tour-speed-pill{margin-top:10px}}

/* 2026-10-13: Show the real WST Hub brandmark in all demonstration scenes.
   The source JPEG is square and has white margins; object-fit: cover gives
   a centered horizontal crop, preserving the original approved artwork. */
.demo-window-bar .demo-wsthub-logo{
  display:block;
  width:clamp(105px,12vw,154px);
  height:42px;
  object-fit:cover;
  object-position:center;
  background:#fff;
  border-radius:6px;
  flex:0 0 auto;
}
.demo-window-bar [data-copy="brand"]{
  min-width:0;
  overflow-wrap:anywhere;
  line-height:1.35;
}
@media(max-width:650px){
  .demo-window-bar{gap:8px;padding:9px 11px;}
  .demo-window-bar .demo-wsthub-logo{width:clamp(105px,33vw,120px);height:36px;}
  .demo-window-bar [data-copy="brand"]{font-size:11px;}
}
@media(max-width:359px){
  .demo-window-bar{gap:6px;padding:8px;}
  .demo-window-bar .demo-wsthub-logo{width:104px;height:34px;}
}