@font-face{font-family:CloudSans;src:url('assets/NotoSansSC-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:CloudSans;src:url('assets/NotoSansSC-Bold.woff2') format('woff2');font-style:normal;font-weight:600 900;font-display:swap}
:root{--paper:#f4f6ef;--white:#fff;--ink:#17241b;--muted:#707b70;--green:#65c466;--green-dark:#317b33;--green-light:#e4f0dc;--line:#d9dfd3;--forest:#14291e;--pad:clamp(24px,5.5vw,104px);--header:90px;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--header)}body{margin:0;background:var(--paper);color:var(--ink);font-family:CloudSans,'Microsoft YaHei',sans-serif;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}::selection{background:var(--green);color:var(--forest)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:none}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green-dark);outline-offset:5px}input:focus,textarea:focus,select:focus{outline:2px solid var(--green-dark);outline-offset:2px}img{display:block;max-width:100%;height:auto}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:700;line-height:1.24}h2{font-size:clamp(35px,4vw,62px);letter-spacing:-.055em}ul{padding:0;list-style:none}button,a,summary{touch-action:manipulation}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.skip-link{position:fixed;top:-100px;left:20px;z-index:200;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:12px}.eyebrow{font-size:11px;letter-spacing:.15em;font-weight:600}.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:10px;box-shadow:0 0 0 4px #65c46613}.muted{color:#899284}.green-word{color:var(--green-dark);position:relative}.button{display:inline-flex;align-items:center;justify-content:center;gap:34px;padding:18px 24px;font-size:13px;border-radius:3px;min-height:58px;transition:background .25s,transform .3s;white-space:nowrap}.button svg{width:18px;height:18px}.button-dark{background:var(--ink);color:var(--paper)}.button-dark:hover{background:var(--green-dark);transform:translateY(-2px)}.text-link{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;font-size:12px}.text-link svg{width:17px;height:17px;transition:transform .3s}.text-link:hover svg{transform:translate(3px,-2px)}.section-kicker{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.13em;border-bottom:1px solid var(--line);padding-bottom:20px;gap:20px}.section-kicker>span:last-child{letter-spacing:.08em;color:var(--muted)}.section-kicker.light{border-color:#ffffff24;color:#bccdbb}.section-kicker.light>span:last-child{color:#bccdbb}
.site-header{height:var(--header);position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .3s,border-color .3s;background:#f4f6efeb;backdrop-filter:blur(18px);border-bottom:1px solid transparent}.site-header.scrolled{border-color:var(--line)}.brand{display:block;width:147px}.brand img{width:147px;mix-blend-mode:multiply}.desktop-nav{display:flex;gap:34px;margin-left:5vw}.desktop-nav a{font-size:12px;position:relative;padding:12px 0}.desktop-nav a:after{content:'';position:absolute;bottom:5px;left:0;width:0;height:1px;background:var(--ink);transition:width .3s}.desktop-nav a:hover:after{width:100%}.header-actions{display:flex;align-items:center;gap:20px}.header-cta{font-size:12px;display:flex;align-items:center;gap:26px;padding:12px 0}.header-cta svg{width:18px;height:18px}.menu-toggle{display:none;min-width:44px;min-height:44px}.menu-toggle span{display:block;width:20px;height:1px;background:var(--ink);margin:6px auto;transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.reading-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60}.reading-progress span{display:block;transform-origin:0 50%;transform:scaleX(0);background:var(--green);height:100%}.chapter-nav{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:6px;mix-blend-mode:difference}.chapter-nav a{position:relative;padding:8px;display:block}.chapter-nav a:after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:#afc3a2;transition:transform .3s}.chapter-nav a.active:after{transform:scale(1.8);background:#c8f4b2}.chapter-nav span{position:absolute;right:23px;top:0;font-size:10px;color:#d3eac7;opacity:0;white-space:nowrap;transition:opacity .2s}.chapter-nav a:hover span{opacity:1}
.hero{min-height:760px;height:100svh;max-height:1200px;position:relative;display:flex;align-items:center;padding:calc(var(--header) + 35px) var(--pad) 135px;overflow:hidden;isolation:isolate}.hero-grid{position:absolute;inset:var(--header) 0 0;background-image:linear-gradient(90deg,#7884710b 1px,transparent 1px);background-size:25% 100%;z-index:-2}.hero:before{content:'';position:absolute;width:620px;height:620px;right:3%;top:8%;background:radial-gradient(ellipse,#d1e6c7a8,transparent 69%);z-index:-2}.hero-copy{width:51%;position:relative;z-index:2;pointer-events:none}.hero-copy button,.hero-copy a{pointer-events:auto}.hero .eyebrow{margin:6px 0 30px}.hero h1{font-size:clamp(60px,6.25vw,104px);line-height:1.25;letter-spacing:-.07em;font-weight:700;white-space:nowrap}.hero .green-word{color:var(--green-dark)}.word-line{position:absolute;left:0;right:-5px;height:8px;bottom:0;transform:rotate(-3deg);background:var(--green);opacity:.55;clip-path:polygon(0 60%,100% 0,97% 70%,2% 100%)}.hero-description{margin-top:28px;font-size:14px;line-height:1.95;color:var(--muted)}.hero-links{display:flex;align-items:center;gap:28px;margin-top:34px}.hero-signature{display:flex;align-items:center;gap:10px;margin-top:44px;font-size:10px;color:#818a7d;letter-spacing:.03em}.signature-line{width:25px;height:1px;background:#9aa795}.hero-art{position:absolute;inset:95px 0 90px 46%;z-index:1}.hero-art canvas{width:100%;height:100%;position:relative;z-index:1;display:block}.art-orbit{position:absolute;top:50%;left:50%;width:84%;height:54%;border:1px solid #81977429;border-radius:50%;transform:translate(-50%,-50%) rotate(-33deg)}.orbit-two{width:90%;height:35%;transform:translate(-50%,-50%) rotate(33deg);border-style:dashed;border-color:#81977419}.art-caption{position:absolute;font-size:9px;color:#6b7e63;letter-spacing:.12em;z-index:2}.caption-top{top:15%;left:15%;display:flex;align-items:center;gap:9px}.caption-top i{width:5px;height:5px;border-radius:50%;background:var(--green)}.caption-bottom{right:15%;bottom:20%;display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:10px;letter-spacing:.16em}.cross-mark{font-size:22px}.art-handwriting{font-family:Georgia,'Times New Roman',serif;font-size:clamp(30px,4vw,66px);font-style:italic;position:absolute;bottom:5%;left:15%;letter-spacing:-.04em;color:var(--green-dark);z-index:2;transform:rotate(-7deg)}.motion-toggle{display:flex;align-items:center;gap:8px;position:absolute;bottom:6%;right:14%;z-index:3;color:#6f7d67;font-size:9px;padding:12px}.pause-mark{width:7px;height:9px;border-left:2px solid currentColor;border-right:2px solid currentColor}.motion-toggle[aria-pressed=true] .pause-mark{border:0;border-left:7px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;height:8px}.hero-bottom{position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:95px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);gap:20px}.scroll-cue{display:flex;align-items:center;gap:13px;font-size:10px}.scroll-cue small{display:block;font-size:7px;letter-spacing:.12em;margin-top:3px;color:var(--muted)}.scroll-icon{width:32px;height:42px;border:1px solid #b9c4b0;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:16px}.hero-bottom>p{font-size:10px;color:var(--muted);letter-spacing:.06em}.hero-bottom>p span{margin:0 12px;color:#b4beae}.edition{font:10px Georgia,serif;color:var(--muted)}.hero-enter{animation:rise-in 1s var(--ease) both}.hero h1{animation-delay:.08s}.hero-description{animation-delay:.16s}.hero-links{animation-delay:.24s}.hero-signature{animation-delay:.32s}@keyframes rise-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
.manifesto{height:180svh;background:var(--forest);color:var(--paper);position:relative}.manifesto-sticky{position:sticky;top:0;height:100svh;min-height:670px;padding:calc(var(--header) + 20px) var(--pad) 56px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}.manifesto-words{font-size:clamp(36px,4.8vw,75px);letter-spacing:-.035em;line-height:1.55;margin:38px 0;position:relative;z-index:1}.manifesto-words>span{display:block;color:#415648;transition:color .5s}.manifesto-words>span.lit{color:#f0f4e9}.manifesto-words em{font-style:normal}.manifesto-words>span.lit em{color:#91d985}.manifesto-bottom{display:flex;justify-content:space-between;gap:30px;align-items:end;z-index:1}.manifesto-bottom>p{font-size:12px;line-height:2;color:#a5b5a4}.manifesto-facts{display:flex;gap:clamp(24px,5vw,80px)}.manifesto-facts div{display:flex;flex-direction:column}.manifesto-facts b{font:45px Georgia,serif;letter-spacing:-.05em;color:#c3e4ae}.manifesto-facts span{font-size:10px;color:#a5b5a4;margin-top:14px}.manifesto-watermark{position:absolute;right:-40px;top:48%;font:italic clamp(70px,10vw,160px) Georgia,serif;transform:rotate(-14deg);color:#ffffff03;white-space:nowrap;pointer-events:none}
.product-section{height:420svh;background:#f8faf5;position:relative;scroll-margin-top:0}.product-sticky{height:100svh;min-height:730px;position:sticky;top:0;padding:calc(var(--header) + 12px) var(--pad) 20px;display:flex;flex-direction:column}.product-sticky>.section-kicker{padding-bottom:14px}.product-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:27px 0 30px}.product-heading h2{font-size:clamp(32px,3.4vw,50px);line-height:1.3}.product-layout{display:grid;grid-template-columns:28% 1fr;gap:6%;flex:1;min-height:0}.product-controls{display:flex;flex-direction:column;min-width:0}.product-tabs{display:flex;flex-direction:column}.product-tabs>button{display:flex;align-items:center;gap:16px;text-align:left;padding:17px 5px;border-bottom:1px solid var(--line);transition:color .3s;position:relative;color:#879080;min-height:71px}.product-tabs>button:before{content:'';position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--green);transition:width .5s}.product-tabs>button[aria-selected=true]:before{width:100%}.product-tabs>button[aria-selected=true]{color:var(--ink)}.tab-index{font:11px Georgia,serif;align-self:flex-start;padding-top:5px;color:#929a8b}.product-tabs>button>span:nth-child(2){font-weight:700;font-size:16px;flex:1}.product-tabs small{font-size:10px;font-weight:400;margin-top:5px;display:none;color:var(--muted)}.product-tabs>button[aria-selected=true] small{display:block}.product-tabs svg{width:17px;height:17px;opacity:0;transition:opacity .3s}.product-tabs>button[aria-selected=true] svg{opacity:1}.product-scroll-note{font-size:9px;color:#8a9481;letter-spacing:.05em;padding:15px 0;margin-top:auto}.product-scroll-note>span{margin-right:10px}.product-panel{display:flex;flex-direction:column;min-height:0;min-width:0}.product-demo{flex:1;min-height:290px;background:#eaf0e3;position:relative;overflow:hidden;border-radius:4px;container-type:size}.product-demo>*{animation:demo-in .65s var(--ease) both}@keyframes demo-in{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.product-description{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0 4px}.product-en{font-size:9px;letter-spacing:.17em;color:var(--green-dark);margin-bottom:7px}.product-description>div>p:last-child{font-size:11px;color:var(--muted);max-width:510px}.circle-button{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border:1px solid #c3ceba;border-radius:50%;transition:background .25s}.circle-button:hover{background:var(--green-light)}.product-footer{display:flex;align-items:center;gap:20px;font-size:8px;color:#84907d;margin-top:14px}.product-footer>span:first-child{margin-right:auto}.product-footer>span:nth-child(2){font:11px Georgia,serif}.product-progress{height:2px;width:120px;background:#dce4d6}.product-progress>i{display:block;background:var(--green-dark);height:2px;width:20%;transition:width .6s}
.demo-ai{position:absolute;inset:25px 43px;background:#fcfdf9;border:1px solid #d9e1d1;border-radius:8px;display:flex;flex-direction:column;padding:20px 24px}.ai-title{display:flex;gap:10px;align-items:center;border-bottom:1px solid #e2e8dc;padding-bottom:14px}.ai-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green-light);font:italic 22px Georgia,serif;color:var(--green-dark)}.ai-title h3{font-size:12px}.ai-title p{font-size:8px;color:var(--muted)}.ai-title>small{margin-left:auto;font-size:8px;color:var(--green-dark)}.ai-messages{flex:1;overflow:auto;padding:16px 0;display:flex;flex-direction:column;gap:9px;font-size:10px}.ai-message{background:#edf3e6;max-width:90%;border-radius:0 7px 7px 7px;padding:10px 13px;line-height:1.8}.ai-message.question{align-self:flex-end;background:#253d2c;color:#fff;border-radius:7px 0 7px 7px}.ai-message.answer{animation:rise-in .4s var(--ease)}.ai-questions{display:flex;gap:6px;flex-wrap:wrap;padding-top:7px}.ai-questions button{font-size:8px;border:1px solid #d1dfc6;border-radius:20px;padding:7px 10px;color:var(--green-dark)}.ai-questions button:hover{background:var(--green-light)}.ai-disclaimer{font-size:7px;color:var(--muted);text-align:center;margin-top:9px}
.role-section{padding:80px var(--pad) 65px;background:#eaf0e3;min-height:100svh}.role-heading{display:flex;justify-content:space-between;align-items:end;margin:52px 0 48px;gap:30px}.role-heading p{font-size:12px;color:var(--muted);line-height:2}.role-workspace{display:grid;grid-template-columns:25% 1fr;gap:8%;min-height:340px}.role-selector{display:flex;flex-direction:column;align-items:start;gap:13px;padding-top:6px}.role-selector button{border-bottom:1px solid transparent;padding:12px 0;width:80%;font-size:21px;text-align:left;display:flex;align-items:center;justify-content:space-between;color:#849279}.role-selector button span{font:10px Georgia,serif}.role-selector button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}.role-panel{background:#f6f8f0;border:1px solid #dae2d1;display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:38px 36px;position:relative;overflow:hidden;align-items:center}.role-panel>*{animation:rise-in .5s var(--ease) both}.role-number{font:italic 24px Georgia,serif;color:var(--green-dark);display:block;margin-bottom:18px}.role-text h3{font-size:28px;margin-bottom:16px;letter-spacing:-.04em}.role-text>p{font-size:11px;color:var(--muted);line-height:1.9}.role-points{margin-top:20px}.role-points li{font-size:10px;margin-top:11px;display:flex;gap:8px;align-items:center}.role-points svg{width:13px;height:13px;color:var(--green-dark)}.role-graphic{display:flex;flex-direction:column;gap:12px;border-left:1px solid #dce4d4;padding-left:28px}.role-graphic-label{font-size:8px;color:var(--muted);letter-spacing:.1em}.role-graphic-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;gap:12px;border-bottom:1px solid #e0e6d9;padding:12px 0}.role-graphic-row strong{font:25px Georgia,serif;color:var(--green-dark)}.role-graphic-row strong small{font:9px CloudSans,sans-serif;margin-left:4px}.role-graphic-footnote{font-size:7px;color:var(--muted);margin-top:6px}.role-note{font-size:9px;color:var(--muted);text-align:right;margin-top:18px}
.plans-section{padding:90px var(--pad) 70px;background:var(--paper)}.plans-heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin:45px 0}.plans-heading h2{font-size:clamp(48px,5.3vw,80px)}.plans-heading>div{min-width:280px;max-width:340px}.plans-heading p{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:20px}.plans-heading label{font-size:10px;display:block;margin-bottom:9px}.plans-heading select{width:100%;padding:12px 30px 12px 12px;background:transparent;border:1px solid #b8c7ad;border-radius:2px;font-size:11px;color:var(--ink)}.plan-recommendation{font-size:10px;color:var(--green-dark);margin-bottom:20px;min-height:21px}.plans-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #bac8b0;border-bottom:1px solid #bac8b0}.plan{padding:27px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;position:relative;transition:background .3s,box-shadow .3s}.plan:first-child{border-left:0}.plan:last-child{border-right:1px solid var(--line)}.plan.featured{background:#e4eddb}.plan.recommended{box-shadow:inset 0 0 0 2px var(--green-dark);background:#d7eacb}.plan-top{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.1em;margin-bottom:20px}.plan-number{color:#86937b;font-family:Georgia,serif}.plan-badge{font-size:8px;color:var(--green-dark);letter-spacing:0}.plan h3{font-size:26px;letter-spacing:-.05em}.plan-fit{font-size:9px;color:var(--muted);margin-top:10px;min-height:33px}.plan-architecture{display:flex;align-items:center;gap:12px;padding:24px 0 22px;border-bottom:1px solid #cdd8c3}.plan-architecture strong{font:60px Georgia,serif;line-height:1}.plan-architecture span{font-size:9px;line-height:1.9;color:var(--muted)}.plan ul{margin:22px 0;flex:1}.plan li{font-size:10px;position:relative;padding-left:16px;margin:11px 0;line-height:1.6}.plan li:before{content:'✓';position:absolute;left:0;color:var(--green-dark);font-size:9px}.plan-button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid #c6d2bc;font-size:10px;margin-top:15px}.plan-button svg{width:16px;height:16px;transition:transform .3s}.plan-button:hover svg{transform:translate(3px,-3px)}.plans-footnote{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-top:16px;font-size:9px;color:var(--muted)}.plans-footnote .text-link{font-size:10px;color:var(--ink)}.comparison-wrap{overflow:auto;margin-top:25px;border:1px solid var(--line)}.comparison-wrap table{width:100%;border-collapse:collapse;min-width:620px;font-size:11px;text-align:center}.comparison-wrap th,.comparison-wrap td{padding:15px;border-bottom:1px solid var(--line)}.comparison-wrap thead{background:var(--green-light)}.comparison-wrap caption{text-align:left;padding:18px;font-size:14px;font-weight:700}.comparison-wrap tbody th{text-align:left;font-weight:400}
.about-section{padding:70px var(--pad) 0;background:var(--forest);color:var(--paper)}.about-main{display:grid;grid-template-columns:1fr 1fr;gap:9%;padding:60px 0;align-items:center}.about-visual{position:relative;min-height:430px;display:flex;flex-direction:column;justify-content:center;border:1px solid #ffffff19;overflow:hidden;background:radial-gradient(ellipse at 80% 20%,#39573a,transparent 70%)}.growth-lines{position:absolute;inset:-20%;background:repeating-radial-gradient(ellipse at 50% 90%,transparent 0 15px,#98b98924 16px 17px,transparent 18px 29px);transform:rotate(-24deg);mask-image:linear-gradient(black,transparent 95%)}.about-visual-word{font:italic clamp(42px,5.6vw,84px)/1.07 Georgia,serif;color:#c1ddac;letter-spacing:-.04em;padding:40px;position:relative;transform:rotate(-7deg)}.about-visual-label{position:absolute;left:32px;bottom:27px;font-size:9px;letter-spacing:.2em;color:#9db492}.about-copy .eyebrow{color:#aac49d;font-size:10px;margin-bottom:22px}.about-copy h2{font-size:clamp(28px,3vw,43px);line-height:1.5}.about-copy h2 span{color:#91cc80}.about-copy>p:not(.eyebrow){font-size:11px;line-height:2;color:#a6b9a4;margin-top:23px;max-width:390px}.about-principles{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px}.about-principles>div>span{font:11px Georgia,serif;color:#789a6d}.about-principles h3{font-size:12px;margin-top:10px}.about-principles p{font-size:10px;color:#a6b9a4;line-height:1.9;margin-top:9px}.light-link{color:#c4e7b3;margin-top:25px;font-size:10px}.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #ffffff25;padding:32px 0;gap:30px}.trust-strip>div{display:flex;gap:15px;align-items:center}.trust-strip svg{color:#a5ce91;width:25px;height:25px}.trust-strip b{font-size:11px;display:block;font-weight:400}.trust-strip small{display:block;font-size:9px;color:#9fb09a;margin-top:6px}
.onboarding-section{padding:85px var(--pad)}.onboarding-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:45px 0 52px}.onboarding-heading p{font-size:12px;color:var(--muted);line-height:2}.onboarding-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:35px}.onboarding-steps article{border-top:1px solid #c9d4bf;padding-top:22px}.onboarding-steps article>span{font:30px Georgia,serif;color:#769367}.onboarding-steps h3{font-size:16px;margin:25px 0 14px}.onboarding-steps p{font-size:11px;color:var(--muted);line-height:1.9;max-width:245px}.js-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.js-ready .reveal.visible{opacity:1;transform:none}.onboarding-steps article:nth-child(2){transition-delay:.1s}.onboarding-steps article:nth-child(3){transition-delay:.2s}.onboarding-steps article:nth-child(4){transition-delay:.3s}.faq-section{padding:75px var(--pad) 100px;background:#edf1e7;display:grid;grid-template-columns:1fr 1.5fr;gap:10%}.faq-intro .eyebrow{font-size:9px;color:var(--green-dark);margin-bottom:28px}.faq-intro h2{font-size:clamp(30px,3.4vw,47px);line-height:1.4}.faq-intro>p:last-child{font-size:11px;color:var(--muted);margin-top:32px;line-height:2}.faq-intro a{display:inline-flex;gap:13px;align-items:center;color:var(--ink);margin-top:7px}.faq-intro svg{width:13px;height:13px}.faq-list details{border-bottom:1px solid #ced8c5}.faq-list details:first-child{border-top:1px solid #ced8c5}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:25px;cursor:pointer;list-style:none;padding:22px 0;font-size:13px}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span{font-size:21px;font-weight:400;line-height:1;color:var(--green-dark);transition:transform .3s}.faq-list details[open] summary>span{transform:rotate(45deg)}.faq-list details>p{font-size:11px;line-height:2;color:var(--muted);padding:0 35px 22px 0;animation:rise-in .3s var(--ease)}
.contact-section{padding:38px var(--pad) 24px;background:#baddaa;position:relative;overflow:hidden}.contact-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid #72956355;gap:20px;font-size:9px;letter-spacing:.1em}.contact-top>span:last-child{font-size:10px;letter-spacing:.04em}.contact-top .live-dot{background:#4d853e;box-shadow:none;width:5px;height:5px;margin-right:7px}.contact-main{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:65px 0 60px}.contact-main h2{font-size:clamp(56px,7.3vw,112px);line-height:1.18;letter-spacing:-.06em}.contact-main h2 span{color:#417235}.contact-main p{font-size:12px;margin-top:24px;color:#536e47}.contact-orb{width:185px;height:185px;border:1px solid #597c4890;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;margin-right:5%;transition:background .4s,transform .5s var(--ease)}.contact-orb:hover{background:var(--ink);color:#cbe9bd;transform:rotate(-6deg)}.contact-orb>svg{width:38px;height:38px;stroke-width:1;margin-bottom:13px}.contact-orb>span{font-size:13px}.contact-orb>small{font:8px Georgia,serif;letter-spacing:.2em}.contact-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #72956355;padding-top:20px;font-size:9px;color:#4d6743}.contact-bottom a{display:flex;align-items:center;gap:20px;font:15px Georgia,serif}.contact-bottom svg{width:15px;height:15px}.site-footer{padding:55px var(--pad) 24px}.footer-top{display:grid;grid-template-columns:1.2fr 1fr .7fr .7fr;gap:40px;margin-bottom:50px}.footer-brand{width:190px;align-self:start}.footer-top>p{font-size:13px;line-height:2;color:var(--muted)}.footer-top>div{display:flex;flex-direction:column;align-items:start;gap:10px}.footer-top>div>span{font-size:10px;margin-bottom:8px;color:#87917e}.footer-top>div>a{font-size:10px}.footer-top a:hover{color:var(--green-dark)}.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:22px;gap:20px;font-size:8px;color:var(--muted)}.footer-bottom>span:first-child{font-family:Georgia,CloudSans,serif;letter-spacing:.03em}
.mobile-nav{position:fixed;inset:var(--header) 0 0;background:var(--paper);padding:30px var(--pad);z-index:45;overflow:auto}.mobile-nav>a{display:flex;align-items:center;font-size:28px;padding:20px 0;border-bottom:1px solid var(--line);gap:16px}.mobile-nav small{font:11px Georgia,serif;color:var(--muted)}.mobile-nav svg{margin-left:auto}.mobile-nav>p{margin:35px 0;color:var(--muted);font-size:12px}.contact-dialog,.detail-dialog{padding:42px;width:min(550px,calc(100% - 32px));max-height:calc(100dvh - 40px);background:var(--paper);border:1px solid #d5dfcb;color:var(--ink);border-radius:8px;box-shadow:0 30px 150px #0005;overflow:auto}.contact-dialog::backdrop,.detail-dialog::backdrop{background:#14291ea6;backdrop-filter:blur(7px)}dialog[open]{animation:rise-in .35s var(--ease)}.dialog-close{position:absolute;right:12px;top:9px;width:44px;height:44px;font:28px Georgia,serif}.contact-dialog .eyebrow,.detail-dialog .eyebrow{color:var(--green-dark);font-size:8px;margin-bottom:20px}.contact-dialog h2,.detail-dialog h2{font-size:32px}.dialog-description{font-size:11px;color:var(--muted);line-height:1.9;margin-top:16px;margin-bottom:22px}#contact-form>label,.form-grid label{display:flex;flex-direction:column;font-size:11px;gap:7px;margin-bottom:14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}#contact-form input:not([type=checkbox]),#contact-form select,#contact-form textarea{width:100%;border:1px solid #cbd7c2;background:#fff9;color:var(--ink);padding:10px 12px;font-size:12px;border-radius:3px;resize:vertical}#contact-form label>small{display:inline;color:var(--muted);font-size:9px}#contact-form .consent{flex-direction:row;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin:17px 0}input[type=checkbox]{accent-color:var(--green-dark);width:15px;height:15px;flex-shrink:0}#contact-form .button{width:100%;min-height:50px;padding:12px 20px}.form-help{font-size:9px;color:var(--muted);text-align:center;margin-top:13px}.form-help a{color:var(--green-dark)}.email-result{text-align:center;padding-top:20px}.email-result>svg{width:44px;height:44px;color:var(--green-dark);margin-bottom:15px}.email-result h3{font-size:23px}.email-result>p{font-size:11px;color:var(--muted);margin:18px 0}.email-result .button{width:100%;margin-top:8px}.copy-button{font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:17px}#inquiry-text{display:block;width:100%;height:130px;border:1px solid var(--line);padding:12px;background:#fff8;font-size:10px;resize:vertical;text-align:left;color:var(--muted)}.detail-dialog>p:not(.eyebrow){font-size:12px;line-height:2;color:var(--muted);margin-top:20px}.detail-dialog ul{margin:25px 0}.detail-dialog li{display:flex;align-items:start;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:12px}.detail-dialog li>svg{width:16px;height:16px;color:var(--green-dark);margin-top:2px}.detail-dialog .button{width:100%;font-size:12px}.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--forest);color:var(--paper);border:1px solid #a8ba9c;padding:14px 24px;font-size:12px;border-radius:4px;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;max-width:calc(100% - 40px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.noscript-notice{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:white;text-align:center;padding:12px;z-index:60}
@container (max-width:550px){.demo-ai{inset:22px 20px;padding:16px 18px}}
@media(min-width:1600px){.hero-art{right:3%;left:47%}.hero h1{font-size:110px}.hero-description{font-size:16px}.product-heading{margin-bottom:32px}.product-tabs>button{padding:clamp(12px,2svh,23px) 8px;min-height:clamp(57px,8.3svh,83px)}.demo-ai{inset:35px 65px;padding:30px 36px}}
@media(max-width:1150px){:root{--pad:40px;--header:80px}.desktop-nav{gap:23px;margin-left:0}.hero{min-height:700px}.hero h1{font-size:clamp(57px,7vw,78px)}.hero-links{gap:20px}.hero-links .button{padding:17px 18px;gap:20px;font-size:11px}.hero-description{font-size:12px}.hero-art{left:43%;right:-6%}.hero-bottom>p{font-size:9px}.hero-bottom>p span{margin:0 7px}.product-layout{gap:4%;grid-template-columns:28% 1fr}.product-tabs>button{gap:12px}.product-tabs>button>span:nth-child(2){font-size:14px}.product-tabs small{font-size:9px}.product-sticky{min-height:710px}.role-workspace{gap:5%;grid-template-columns:23% 1fr}.role-panel{padding:28px;gap:22px}.role-text h3{font-size:24px}.plan{padding:23px 17px}.plan-fit{font-size:9px;min-height:38px}.plan li{font-size:9px}.plan-badge{font-size:7px}.about-main{gap:6%}.about-visual{min-height:390px}.about-principles{gap:18px}.chapter-nav{right:9px}.footer-top{gap:25px}}
@media(max-width:900px){.desktop-nav{display:none}.menu-toggle{display:block}.header-actions{gap:24px}.hero{min-height:850px;height:100svh;max-height:1050px;align-items:start;padding-top:calc(var(--header) + 50px)}.hero-copy{width:65%}.hero h1{font-size:70px}.hero-art{inset:240px -7% 70px 30%}.hero-art canvas{opacity:.9}.caption-top{display:none}.caption-bottom{right:16%;bottom:27%}.art-handwriting{bottom:14%;left:23%;font-size:43px}.motion-toggle{bottom:12%;right:14%}.hero-signature{margin-top:27px}.hero-bottom>p{max-width:250px;line-height:2.2}.hero-bottom>p span{margin:0 7px}.manifesto-sticky{min-height:650px}.manifesto-words{font-size:clamp(34px,5.7vw,54px)}.manifesto-bottom{align-items:start;gap:30px}.manifesto-facts{gap:27px}.manifesto-facts b{font-size:36px}.manifesto-facts span{font-size:8px}.manifesto-bottom>p{font-size:10px;max-width:235px}.product-section{height:auto}.product-sticky{position:relative;min-height:auto;height:auto;padding-top:70px;padding-bottom:40px}.product-heading{margin-top:35px;margin-bottom:35px}.product-heading h2{font-size:38px}.product-layout{display:flex;flex-direction:column;gap:26px;margin-top:0}.product-controls{display:block}.product-tabs{flex-direction:row;gap:13px;justify-content:space-between;border-bottom:1px solid var(--line)}.product-tabs>button{flex:1;display:block;padding:12px 2px;min-height:60px;border:0}.product-tabs>button>span:nth-child(2){font-size:12px}.tab-index{display:block;font-size:8px;margin-bottom:5px}.product-tabs>button[aria-selected=true] small{display:none}.product-tabs svg{display:none}.product-scroll-note{display:none}.product-demo{height:360px;flex:none;min-height:0}.product-panel{display:flex}.product-footer{margin-top:15px}.role-section{min-height:auto;padding-top:65px}.role-heading{margin-top:35px}.role-workspace{grid-template-columns:22% 1fr;gap:5%}.role-panel{grid-template-columns:1fr;gap:26px}.role-graphic{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:13px;gap:0}.role-graphic-row{padding:8px 0}.role-selector button{font-size:17px;width:100%}.role-text h3{font-size:27px}.role-heading h2{font-size:38px}.role-heading p{font-size:11px}.plans-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.plan{padding:26px 28px}.plan:nth-child(2){border-right:1px solid var(--line)}.plan:nth-child(n+3){border-top:1px solid var(--line)}.plan:nth-child(3){border-left:0}.plan-fit{min-height:0}.plan li{font-size:11px}.plan-top{font-size:10px}.plan-badge{font-size:9px}.plan-architecture{padding-top:25px}.plan-button{font-size:12px}.plans-footnote{align-items:start}.plans-footnote>span{max-width:55%;line-height:1.8}.about-main{grid-template-columns:.85fr 1fr;gap:6%}.about-copy h2{font-size:29px}.about-visual{min-height:420px}.about-visual-word{font-size:46px;padding:28px}.about-principles{grid-template-columns:1fr;gap:18px}.about-principles>div>span{float:left;margin-top:3px}.about-principles h3,.about-principles p{margin-left:25px;margin-top:0}.about-principles p{margin-top:5px}.trust-strip{gap:22px}.trust-strip>div{align-items:start;gap:10px}.trust-strip b{font-size:10px}.trust-strip small{font-size:8px}.trust-strip svg{width:19px;height:19px}.onboarding-steps{gap:22px}.onboarding-steps h3{font-size:14px}.onboarding-steps p{font-size:10px}.faq-section{grid-template-columns:1fr 1.3fr;gap:7%}.faq-intro h2{font-size:32px}.faq-list summary{font-size:11px;padding:20px 0}.contact-orb{width:145px;height:145px;flex-shrink:0;margin-right:0}.contact-orb>span{font-size:11px}.contact-orb>svg{width:30px;height:30px;margin-bottom:5px}.footer-top{grid-template-columns:1fr 1fr .7fr .7fr;gap:20px}.footer-brand{width:140px}.footer-top>p{font-size:11px}.footer-bottom{font-size:7px}.chapter-nav{display:none}}
@media(max-width:600px){:root{--pad:24px;--header:74px}.site-header{background:#f4f6eff2}.brand,.brand img{width:124px}.header-actions{gap:13px}.header-cta{font-size:10px;gap:12px}.header-cta svg{width:15px;height:15px}.menu-toggle{min-width:36px}.hero{height:auto;min-height:900px;max-height:none;padding:calc(var(--header) + 40px) var(--pad) 490px;display:block}.hero-copy{width:100%}.hero .eyebrow{font-size:9px;margin-bottom:23px}.hero h1{font-size:clamp(55px,13vw,77px);letter-spacing:-.07em;line-height:1.23}.word-line{height:6px;bottom:2px}.hero-description{font-size:11px;margin-top:24px;line-height:1.9}.hero-links{margin-top:27px;gap:21px}.hero-links .button{font-size:10px;gap:18px;padding:14px 15px;min-height:47px}.hero-links .text-link{font-size:10px;gap:9px}.hero-signature{font-size:8px;margin-top:25px}.hero-art{inset:auto -15% 90px -7%;height:395px;z-index:0}.hero-art canvas{opacity:1}.art-handwriting{font-size:35px;left:14%;bottom:5%}.caption-bottom{bottom:19%;right:18%;font-size:7px;gap:5px}.cross-mark{font-size:18px}.motion-toggle{bottom:3%;right:18%;font-size:8px}.hero-bottom{height:85px;gap:15px}.hero-bottom>p{font-size:8px;max-width:180px;text-align:right}.hero-bottom>p span{margin:0 5px}.scroll-cue{font-size:9px;gap:9px}.scroll-cue small{font-size:6px}.scroll-icon{width:25px;height:35px}.edition{display:none}.hero:before{width:440px;height:500px;top:auto;bottom:60px;right:-90px}.section-kicker{font-size:8px;padding-bottom:16px;gap:15px}.section-kicker>span:last-child{font-size:8px;letter-spacing:0}.manifesto{height:auto;min-height:730px}.manifesto-sticky{position:relative;height:auto;min-height:730px;padding:60px var(--pad) 46px;justify-content:space-between}.manifesto-words{font-size:clamp(27px,6.7vw,39px);line-height:1.75;margin:65px 0;letter-spacing:-.045em}.manifesto-words>span{color:#edf3e6}.manifesto-words>span em{color:#91d985}.manifesto-bottom{flex-direction:column;gap:39px;align-items:stretch}.manifesto-bottom>p{font-size:10px;max-width:none}.manifesto-facts{justify-content:space-between;gap:20px}.manifesto-facts b{font-size:36px}.manifesto-facts span{font-size:8px;margin-top:10px}.manifesto-watermark{top:45%;right:-50px;font-size:75px}.product-sticky{padding-top:52px}.product-heading{display:block;margin:30px 0 25px}.product-heading h2{font-size:35px}.product-tabs{gap:9px}.product-tabs>button{padding-bottom:12px}.product-tabs>button>span:nth-child(2){font-size:10px;white-space:nowrap}.tab-index{font-size:8px;margin-bottom:3px}.product-layout{gap:20px}.product-demo{height:325px}.product-description{padding:16px 0 7px;gap:15px;align-items:start}.product-description>div>p:last-child{font-size:10px;line-height:1.9}.product-en{font-size:8px}.circle-button{width:35px;height:35px;margin-top:9px}.circle-button svg{width:17px;height:17px}.product-footer{font-size:7px;gap:10px;margin-top:20px}.product-progress{width:60px}.product-footer>span:nth-child(2){font-size:9px}.demo-ai{inset:17px 13px;padding:17px 14px}.ai-title{gap:8px;padding-bottom:12px}.ai-title h3{font-size:10px}.ai-title p,.ai-title>small{font-size:7px}.ai-message{font-size:9px;padding:8px 10px}.ai-questions{gap:5px}.ai-questions button{font-size:7px;padding:8px 9px;min-height:32px}.ai-disclaimer{font-size:6px}.role-section{padding-top:50px;padding-bottom:45px}.role-heading{display:block;margin:32px 0}.role-heading h2{font-size:35px}.role-heading p{font-size:10px;margin-top:20px}.role-workspace{display:flex;flex-direction:column;gap:24px;min-height:0}.role-selector{flex-direction:row;gap:16px;padding:0;justify-content:space-between}.role-selector button{font-size:12px;padding:9px 0;width:auto;gap:8px;flex:1;white-space:nowrap}.role-selector button span{font-size:8px}.role-panel{padding:25px;grid-template-columns:1fr;gap:25px;min-height:440px}.role-number{font-size:21px;margin-bottom:15px}.role-text h3{font-size:27px}.role-text>p{font-size:10px}.role-points{margin-top:16px}.role-points li{font-size:10px;margin:8px 0}.role-graphic-row strong{font-size:23px}.role-note{text-align:left;font-size:8px}.plans-section{padding-top:55px;padding-bottom:45px}.plans-heading{display:block;margin:32px 0 24px}.plans-heading h2{font-size:48px}.plans-heading>div{max-width:none;min-width:0;margin-top:24px}.plans-heading p{font-size:11px}.plans-heading label{font-size:10px}.plans-heading select{font-size:11px;min-height:44px}.plan-recommendation{font-size:9px;line-height:1.9;margin-bottom:19px}.plans-grid{grid-template-columns:1fr 1fr}.plan{padding:22px 13px}.plan-top{font-size:8px;letter-spacing:.08em;margin-bottom:20px}.plan-number{font-size:8px}.plan-badge{font-size:7px}.plan h3{font-size:23px}.plan-fit{font-size:8px;line-height:1.8;min-height:30px}.plan-architecture{gap:8px;padding:22px 0 20px}.plan-architecture strong{font-size:45px}.plan-architecture span{font-size:8px}.plan ul{margin:15px 0}.plan li{font-size:8px;padding-left:12px;line-height:1.9;margin:8px 0}.plan li:before{font-size:8px}.plan-button{font-size:9px;margin-top:10px;padding:11px 0;gap:10px}.plan-button svg{width:13px;height:13px}.plans-footnote{display:block;margin-top:20px}.plans-footnote>span{display:block;max-width:none;font-size:8px}.plans-footnote .text-link{font-size:10px;margin-top:5px}.about-section{padding-top:48px}.about-main{display:flex;flex-direction:column;gap:35px;padding:35px 0}.about-visual{width:100%;min-height:300px}.about-visual-word{font-size:61px;padding:30px}.about-visual-label{font-size:8px;bottom:22px;left:25px}.about-copy{width:100%}.about-copy .eyebrow{font-size:9px;margin-bottom:20px}.about-copy h2{font-size:33px}.about-copy>p:not(.eyebrow){font-size:11px;margin-top:20px;max-width:none}.about-principles{grid-template-columns:1fr 1fr;gap:19px}.about-principles>div>span{float:none;display:block;margin-bottom:10px}.about-principles h3,.about-principles p{margin-left:0}.about-principles h3{font-size:11px}.about-principles p{font-size:9px;line-height:1.9;margin-top:8px}.light-link{margin-top:20px;font-size:10px}.trust-strip{grid-template-columns:1fr;gap:25px;padding:29px 0 35px}.trust-strip>div{gap:15px;align-items:center}.trust-strip svg{width:25px;height:25px}.trust-strip b{font-size:11px}.trust-strip small{font-size:9px;margin-top:4px}.onboarding-section{padding-top:55px;padding-bottom:55px}.onboarding-heading{display:block;margin:30px 0}.onboarding-heading h2{font-size:35px}.onboarding-heading p{font-size:10px;margin-top:20px}.onboarding-steps{grid-template-columns:1fr 1fr;gap:32px 23px}.onboarding-steps article{padding-top:17px}.onboarding-steps article>span{font-size:26px}.onboarding-steps h3{font-size:14px;margin:19px 0 12px}.onboarding-steps p{font-size:9px;line-height:1.9}.faq-section{display:block;padding-top:50px;padding-bottom:55px}.faq-intro .eyebrow{font-size:8px;margin-bottom:22px}.faq-intro h2{font-size:35px}.faq-intro>p:last-child{font-size:10px;margin-top:21px}.faq-list{margin-top:30px}.faq-list summary{font-size:11px;padding:19px 0}.faq-list details>p{font-size:10px;padding-right:20px}.contact-section{padding-top:27px;padding-bottom:23px}.contact-top{font-size:7px;padding-bottom:17px;gap:12px}.contact-top>span:last-child{font-size:8px}.contact-main{display:block;padding:38px 0 30px;position:relative}.contact-main h2{font-size:clamp(50px,13.5vw,77px)}.contact-main p{font-size:10px;margin-top:22px;max-width:75%;line-height:1.9}.contact-orb{height:110px;width:110px;margin:29px 0 0 auto;gap:5px}.contact-orb>svg{width:25px;height:25px;margin-bottom:4px}.contact-orb>span{font-size:9px}.contact-orb>small{font-size:7px}.contact-bottom{display:block;padding-top:17px;font-size:8px}.contact-bottom a{font-size:13px;justify-content:space-between;margin-top:13px}.site-footer{padding-top:35px}.footer-top{grid-template-columns:1fr 1fr;gap:34px 28px;margin-bottom:33px}.footer-brand{width:155px}.footer-top>p{font-size:11px;justify-self:end}.footer-top>div{gap:11px}.footer-top>div>span{font-size:9px}.footer-top>div>a{font-size:10px}.footer-bottom{flex-wrap:wrap;gap:12px;font-size:7px}.footer-bottom>span:first-child{flex-basis:100%}.footer-bottom>a{margin-left:auto}.mobile-nav>a{font-size:25px;padding:20px 0}.contact-dialog,.detail-dialog{padding:34px 24px 26px;max-height:calc(100dvh - 24px)}.contact-dialog h2,.detail-dialog h2{font-size:28px}.dialog-description{font-size:10px}.form-grid{gap:12px}#contact-form>label,.form-grid label{font-size:10px}#contact-form input:not([type=checkbox]),#contact-form select,#contact-form textarea{font-size:16px;padding:9px 10px}#contact-form .consent{font-size:9px}.contact-dialog .button{font-size:11px}.detail-dialog>p:not(.eyebrow),.detail-dialog li{font-size:11px}.toast{font-size:10px;padding:12px 18px;bottom:20px}}
@media(max-width:370px){:root{--pad:19px}.hero h1{font-size:53px}.hero-links{gap:14px}.hero-links .button{font-size:9px;padding:13px;gap:13px}.hero-links .text-link{font-size:9px}.hero-description{font-size:10px}.hero{min-height:865px}.hero-art{height:360px}.brand,.brand img{width:113px}.header-actions{gap:7px}.header-cta{gap:8px}.section-kicker{font-size:7px}.section-kicker>span:last-child{font-size:7px}.product-tabs{gap:6px}.product-tabs>button>span:nth-child(2){font-size:9px}.product-demo{height:315px}.role-selector{gap:9px}.role-selector button{font-size:11px}.role-panel{padding:22px}.plan{padding:21px 10px}.plan li{font-size:7px}.plan-badge{font-size:6px}.plan-architecture span{font-size:7px}}
@media(min-width:901px) and (max-height:780px){.product-sticky{padding-top:calc(var(--header) + 10px);min-height:680px}.product-heading{margin:18px 0}.product-heading h2{font-size:34px}.product-tabs>button{padding:12px 5px;min-height:57px}.product-tabs small{margin-top:3px}.product-demo{min-height:280px}.product-description{padding:13px 0 3px}.product-footer{margin-top:10px}.product-scroll-note{padding:9px 0}.manifesto-sticky{min-height:650px}.manifesto-words{margin:25px 0;font-size:clamp(36px,4.6vw,65px)}}
@media(min-width:901px) and (max-height:679px){.product-section{height:auto}.product-sticky{position:relative;height:auto;min-height:780px}.product-demo{height:620px;flex:none}.product-scroll-note{visibility:hidden}.manifesto{height:auto}.manifesto-sticky{position:relative;height:auto;min-height:650px}}
@media(min-width:901px){.role-heading p,.plans-heading p,.onboarding-heading p{font-size:13px}.product-description>div>p:last-child,.role-text>p,.about-copy>p:not(.eyebrow),.onboarding-steps p,.faq-list details>p{font-size:13px}.plan-fit,.plan li,.plan-button,.role-points li,.role-graphic-row,.about-principles p,.trust-strip small{font-size:11px}.plan-architecture span,.plan-top,.plans-footnote,.role-note{font-size:10px}.faq-list summary{font-size:14px}.footer-top>div>a{font-size:12px}.footer-top>div>span,.footer-bottom{font-size:10px}}
@media(min-width:1100px) and (min-height:850px){.ai-title h3{font-size:16px}.ai-title p,.ai-title>small{font-size:10px}.ai-messages{font-size:13px;padding:25px 0}.ai-questions button{font-size:10px;padding:9px 13px}.ai-disclaimer{font-size:9px}}
@media(max-width:600px){.hero-description{font-size:12px}.hero-signature{font-size:9px}.role-heading p,.plans-heading p,.onboarding-heading p{font-size:12px}.product-description>div>p:last-child,.role-text>p,.about-copy>p:not(.eyebrow),.onboarding-steps p,.faq-list details>p{font-size:12px}.role-points li,.role-graphic-row{font-size:11px}.role-selector button{min-height:44px}.role-note,.plan-recommendation{font-size:10px}.plan-fit,.plan li{font-size:10px}.plan-button{font-size:11px;min-height:44px}.plan-architecture span{font-size:9px}.plans-footnote>span{font-size:10px}.about-principles p,.trust-strip small{font-size:11px}.about-principles h3,.trust-strip b,.faq-list summary{font-size:12px}.faq-intro>p:last-child,.contact-main p,.contact-bottom{font-size:11px}.footer-top>div>a{font-size:12px;min-height:30px}.footer-top>div>span{font-size:10px}.footer-bottom{font-size:8px}.product-demo{height:350px}.ai-message{font-size:11px}.ai-questions button{font-size:9px;min-height:38px}.ai-disclaimer{font-size:8px}.dialog-description{font-size:12px}.contact-dialog .eyebrow,.detail-dialog .eyebrow{font-size:9px}#contact-form>label,.form-grid label{font-size:12px}#contact-form .consent,.form-help{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-enter,.js-ready .reveal{opacity:1;transform:none}.manifesto{height:auto}.manifesto-sticky{position:relative;min-height:700px}.manifesto-words>span{color:#f0f4e9}.manifesto-words>span em{color:#91d985}.product-section{height:auto}.product-sticky{position:relative;min-height:780px;height:auto}.product-demo{height:620px;flex:none}.product-scroll-note{visibility:hidden}}

.system-preview,
.system-dialog {
  font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: normal;
  color: #1d1d1f;
  text-align: left;
  color-scheme: light;
  --preview-focus: #23833d;
}
.system-preview {
  position: absolute;
  inset: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #dedee3;
  border-radius: 16px;
  background: #f5f5f7;
  box-shadow: 0 8px 28px #1d1d1f0a;
}
.system-preview :is(h3,h4,h5),
.system-dialog :is(h3,h4,h5) {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}
.system-preview h3 { font-size: 28px; }
.system-preview h4,
.system-dialog h4 { font-size: 17px; }
.system-preview h5,
.system-dialog h5 { font-size: 14px; }
.system-preview small,
.system-dialog small { font-size: 12px; }
.system-preview button,
.system-dialog button {
  min-height: 40px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: background-color .18s, border-color .18s, color .18s;
}
.system-preview :is(button,input):focus-visible,
.system-dialog :is(button,input):focus-visible {
  outline: 2px solid var(--preview-focus);
  outline-offset: 2px;
}
.system-preview .preview-scroll:focus-visible {
  outline: 2px solid var(--preview-focus);
  outline-offset: -3px;
}
.system-preview svg,
.system-dialog svg { width: 20px; height: 20px; }
.preview-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px 12px;
  min-height: 40px;
  padding: 9px 14px;
  border-bottom: 1px solid #1d1d1f0c;
  background: #fff;
  color: #55585a;
  font-size: 12px;
}
.preview-bar > span { font-weight: 600; }
.preview-bar > small { color: #787b7d; }
.preview-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scroll-padding: 12px;
}
.preview-scroll,
.system-dialog #system-dialog-content,
.system-dialog .bk-modal-body {
  scrollbar-width: thin;
  scrollbar-color: #929993 #00000006;
}
.preview-scroll::-webkit-scrollbar,
.system-dialog #system-dialog-content::-webkit-scrollbar,
.system-dialog .bk-modal-body::-webkit-scrollbar { width: 7px; height: 7px; }
.preview-scroll::-webkit-scrollbar-track,
.system-dialog #system-dialog-content::-webkit-scrollbar-track,
.system-dialog .bk-modal-body::-webkit-scrollbar-track { background: #00000006; }
.preview-scroll::-webkit-scrollbar-thumb,
.system-dialog #system-dialog-content::-webkit-scrollbar-thumb,
.system-dialog .bk-modal-body::-webkit-scrollbar-thumb {
  border: 1px solid #f5f5f7;
  border-radius: 8px;
  background: #929993;
}
.system-preview .preview-note,
.system-dialog .preview-note {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.8;
  color: #76767d;
  overflow-wrap: anywhere;
}

.sc-page { padding: 24px; background: #f5f5f7; }
.sc-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}
.sc-heading h3 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.sc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 210px;
  max-width: 100%;
  padding: 0 13px;
  border: 1px solid #d2d2d7;
  border-radius: 14px;
  background: #fff;
  color: #97979e;
  box-shadow: 0 2px 5px #1d1d1f03;
}
.sc-search svg { width: 17px; height: 17px; }
.sc-search input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 0;
  border: 0;
  background: transparent;
  color: #1d1d1f;
  font-size: 14px;
}
.sc-search input::placeholder { color: #98989f; }
.sc-search:focus-within { outline: 2px solid var(--preview-focus); outline-offset: 2px; }
.sc-search input:focus { outline: none; }
.sc-card {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 24px #1d1d1f06;
}
.sc-students,
.sc-subjects,
.sc-knowledge-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-students { margin-bottom: 24px; }
.sc-subjects { gap: 8px; margin-bottom: 24px; }
.sc-students button,
.sc-subjects button {
  padding: 9px 17px;
  border-radius: 14px;
  background: #f5f5f7;
  color: #1d1d1f;
}
.sc-students button { min-width: 66px; min-height: 44px; font-size: 15px; border-radius: 17px; }
.sc-students button[aria-pressed="true"],
.sc-subjects button[aria-pressed="true"],
.sc-knowledge-grid button[aria-pressed="true"] { background: #65c466; color: #fff; }
.sc-students button[aria-pressed="true"],
.sc-knowledge-grid button[aria-pressed="true"] { box-shadow: 0 5px 14px #65c46626; }
.sc-knowledge-title { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.sc-knowledge-title svg { color: #65c466; }
.sc-page .sc-level {
  margin: 24px 0 12px 7px;
  padding-left: 10px;
  border-left: 3px solid #65c466;
  font-size: 16px;
  font-weight: 500;
}
.sc-knowledge-grid { gap: 9px; }
.sc-knowledge-grid button {
  max-width: 100%;
  padding: 9px 15px;
  border-radius: 99px;
  background: #f5f5f7;
  color: #77777e;
}

.dp-preview { background: #e9e6e1; border-color: #dcd9d3; color: #161a18; --preview-focus: #166b3a; }
.dp-top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #161a180d;
  background: #e9e6e1;
}
.dp-top > strong { flex: 1; margin-left: 42px; text-align: center; font-size: 15px; line-height: 1.5; }
.dp-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0e2a19;
  color: #b6e7bc;
  font-size: 17px;
  font-weight: 700;
}
.dp-page { padding: 22px; }
.dp-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.dp-heading > div:first-child { min-width: 0; }
.dp-heading h3 { font-size: 28px; font-weight: 800; }
.dp-heading p { margin-top: 7px; font-size: 14px; color: #858c86; }
.dp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.dp-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 99px;
  background: #fff;
  font-weight: 600;
  box-shadow: 0 2px 3px #161a1806;
}
.dp-actions svg { color: #166b3a; width: 18px; height: 18px; }
.dp-card { padding: 22px; margin-bottom: 18px; border-radius: 24px; background: #fff; box-shadow: 0 2px 2px #161a1807, 0 10px 24px #161a1804; }
.dp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dp-card-head h4 { display: flex; align-items: center; gap: 9px; }
.dp-card-head h4 svg { color: #166b3a; }
.dp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 99px;
  background: #0e2a19;
  color: #fff;
  font-size: 14px;
}
.dp-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.dp-stat { padding: 17px; border-radius: 20px; background: #f6f4f1; }
.dp-stat > span { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; color: #858c86; }
.dp-stat svg { width: 17px; height: 17px; color: #166b3a; }
.dp-stat strong { display: block; margin-top: 8px; font-size: 28px; line-height: 1.25; font-weight: 700; }
.dp-stat strong small { margin-left: 4px; font-size: 13px; color: #858c86; font-weight: 500; }
.dp-progress { display: block; height: 6px; overflow: hidden; border-radius: 99px; background: #f0efec; }
.dp-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#166b3a,#65c466); }
.dp-card > .dp-progress { margin-top: 18px; }
.dp-book-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px;
  border: 1px solid transparent;
  border-radius: 30px;
  background: #fff;
  text-align: left;
  box-shadow: 0 2px 2px #161a1807;
}
.dp-book-thumb { display: grid; place-items: center; flex-shrink: 0; width: 64px; height: 82px; border-radius: 15px; background: #e5efd8; color: #166b3a; }
.dp-book-thumb svg { width: 32px; height: 32px; }
.dp-book-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.dp-book-body > small { color: #166b3a; font-weight: 600; }
.dp-book-body > strong { font-size: 17px; line-height: 1.5; }
.dp-book-body > span:not(.dp-progress) { font-size: 13px; color: #858c86; }
.dp-book-body .dp-progress { margin-top: 4px; }
.dp-book-row > svg,
.dp-piece > svg,
.dp-history > svg:last-child { width: 17px; height: 17px; color: #858c86; }
.dp-back { display: inline-flex; align-items: center; margin: -6px 0 12px; padding: 6px 0; color: #777f79; }
.dp-pieces { display: grid; gap: 12px; margin-top: 20px; }
.dp-piece {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 19px 22px;
  border: 1px solid #deebe0;
  border-radius: 26px;
  background: #fff;
  text-align: left;
  box-shadow: 0 2px 3px #161a1807;
}
.dp-piece > b { flex-shrink: 0; min-width: 15px; font-size: 15px; color: #65c466; }
.dp-piece > span { flex: 1; min-width: 0; }
.dp-piece strong { display: block; font-size: 16px; }
.dp-piece small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 8px; color: #166b3a; font-weight: 600; }
.dp-piece small svg { width: 15px; height: 15px; margin-left: 5px; }
.dp-piece small svg:first-child { margin-left: 0; }
.dp-nav {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid #161a1808;
  background: #fff;
}
.dp-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 58px; padding: 3px; color: #858c86; }
.dp-nav button > svg { width: 46px; height: 29px; padding: 4px 12px; border-radius: 99px; }
.dp-nav button > span { font-size: 12px; font-weight: 600; }
.dp-nav button[aria-current="page"] { color: #166b3a; }
.dp-nav button[aria-current="page"] > svg { background: #eaf5eb; }
.dp-primary { display: inline-flex; align-items: center; justify-content: center; padding: 11px 22px; min-height: 44px; border-radius: 99px; background: #166b3a; color: #fff; font-weight: 600; }
.dp-activation { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dp-activation label { font-size: 14px; font-weight: 600; }
.dp-activation input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #dcded7; border-radius: 12px; background: #f6f4f1; color: #777e77; font-size: 14px; opacity: 1; }
.dp-activation .preview-note { margin: 0; }
.dp-continue { display: flex; position: relative; flex-direction: column; gap: 10px; width: 100%; margin-bottom: 18px; padding: 24px 48px 24px 24px; border-radius: 24px; background: #0e2a19; color: #fff; text-align: left; }
.dp-continue small { display: flex; align-items: center; gap: 7px; color: #b6e7bc; }
.dp-continue strong { font-size: 19px; }
.dp-continue > span { color: #c2d0c5; font-size: 13px; }
.dp-continue > svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.dp-history { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 0; border-top: 1px solid #efeeeb; text-align: left; }
.dp-history > svg:first-child { color: #166b3a; }
.dp-history > span { flex: 1; min-width: 0; }
.dp-history small { display: block; margin-top: 4px; color: #858c86; }
.dp-profile { position: relative; display: flex; align-items: center; gap: 16px; margin: 2px 0 22px; padding: 28px 24px; overflow: hidden; border-radius: 30px; background: #0e2a19; color: #fff; box-shadow: 0 12px 28px #0e2a1926; }
.dp-profile::after { content: ''; position: absolute; width: 180px; height: 180px; right: -35px; bottom: -90px; border-radius: 50%; background: #ffffff0c; pointer-events: none; }
.dp-profile > * { position: relative; z-index: 1; }
.dp-profile .dp-avatar { width: 62px; height: 62px; border-radius: 20px; background: #ffffff20; font-size: 25px; }
.dp-profile h3 { font-size: 24px; }
.dp-profile p { margin-top: 5px; color: #b8c6bc; }
.dp-profile-stats { margin-bottom: 22px; }
.dp-profile-stats .dp-stat { background: #fff; border-radius: 24px; box-shadow: 0 2px 2px #161a1807; }
.dp-profile-line { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.dp-profile-line > span { color: #454c48; font-weight: 600; }
.dp-profile-line > strong { padding: 12px 16px; border-radius: 16px; background: #f6f4f1; font-weight: 400; }

/* Course booking — native course cards and booking step components. */
.bk-preview { background: #f5f5f7; }
.bk-topbar { flex: 0 0 auto; padding: 15px 20px; border-bottom: 1px solid #0000000f; background: #fff; text-align: center; }
.bk-topbar h3 { font-size: 24px; }
.bk-categories { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #0000000d; background: #fff; }
.bk-categories button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px; background: #f2f2f4; color: #3a3a3c; font-size: 13px; }
.bk-categories svg { width: 16px; height: 16px; color: #34c759; }
.bk-categories button[aria-pressed="true"] { background: #34c759; color: #fff; }
.bk-categories button[aria-pressed="true"] svg { color: inherit; }
.bk-page { padding: 16px; }
.bk-category { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 12px 16px; border: 1px solid #d4f0da; border-radius: 14px; background: linear-gradient(135deg,#eafaf0,#f0fdf4); color: #1a7a3a; font-size: 15px; font-weight: 700; }
.bk-category svg { color: #34c759; width: 18px; height: 18px; }
.bk-course-card { margin-bottom: 12px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 1px 4px #0000000a; }
.bk-course-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.bk-course-top h4 { font-size: 16px; }
.bk-course-badge { flex-shrink: 0; padding: 3px 10px; border-radius: 10px; background: #e8f8ec; color: #1a7a3a; font-size: 12px; font-weight: 600; }
.bk-course-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 10px; color: #86868b; font-size: 13px; }
.bk-course-meta > span { display: inline-flex; align-items: center; gap: 5px; margin-left: 9px; }
.bk-course-meta svg { width: 15px; height: 15px; }
.bk-course-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.bk-price { font-size: 16px; font-weight: 700; color: #1a7a3a; }
.bk-price small { display: block; margin-top: 3px; color: #86868b; font-weight: 400; }
.bk-primary,
.bk-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; border: 1px solid transparent; border-radius: 99px; font-weight: 600; }
.bk-primary { background: #34c759; color: #fff; }
.bk-primary:disabled { background: #d1d1d6; color: #fff; cursor: not-allowed; }
.bk-secondary { border-color: #d1d1d6; background: #fff; color: #636366; }
.bk-steps { display: flex; flex: 0 0 auto; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f2f2f7; background: #fafafa; }
.bk-steps > span { display: flex; flex: 1; align-items: center; gap: 6px; color: #9999a0; font-size: 12px; white-space: nowrap; }
.bk-steps > span:last-child { flex: 0 0 auto; }
.bk-steps > span:not(:last-child)::after { content: ''; flex: 1; height: 2px; margin: 0 8px 0 2px; border-radius: 1px; background: #e5e5ea; }
.bk-steps b { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; border: 2px solid #d1d1d6; border-radius: 50%; font-size: 12px; line-height: 1; }
.bk-steps > .active { color: #34c759; font-weight: 700; }
.bk-steps > .active b { border-color: #34c759; }
.bk-modal-body { flex: 1 1 auto; min-height: 0; padding: 20px; overflow: auto; }
.bk-modal-body > h4 { margin-bottom: 14px; font-size: 15px; }
.bk-modal-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 20px; padding-bottom: max(14px,env(safe-area-inset-bottom)); border-top: 1px solid #f2f2f7; background: #fff; }
.bk-modal-footer .bk-primary { min-width: 108px; }
.bk-pick-teacher { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 10px; padding: 12px 14px; border: 2px solid #f0f0f5; border-radius: 14px; background: #fff; text-align: left; }
.bk-pick-teacher > span:nth-child(2) { min-width: 0; }
.bk-pick-teacher strong { display: block; font-size: 15px; }
.bk-pick-teacher small { display: block; margin-top: 3px; color: #86868b; }
.bk-teacher-avatar { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: #e8f8ec; color: #34c759; }
.bk-pick-radio { display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; border: 2px solid #d1d1d6; border-radius: 50%; }
.bk-pick-teacher[aria-pressed="true"] { border-color: #34c759; background: #f6fef8; }
.bk-pick-teacher[aria-pressed="true"] .bk-pick-radio { border-color: #34c759; }
.bk-pick-teacher[aria-pressed="true"] .bk-pick-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #34c759; }
.bk-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bk-cal-nav h4 { font-size: 16px; }
.bk-cal-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #f5f5f7; color: #636366; font-size: 25px; }
.bk-cal-nav button:disabled { color: #c7c7cc; }
.bk-cal-week,
.bk-cal-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; text-align: center; }
.bk-cal-week { margin-bottom: 6px; color: #86868b; font-size: 12px; }
.system-dialog .bk-cal-grid button {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
}
.system-dialog .bk-cal-grid .past { color: #c7c7cc; }
.system-dialog .bk-cal-grid .available { background: #e8f8ec; color: #1a7a3a; }
.system-dialog .bk-cal-grid .full { background: #fdeaea; color: #c9706b; }
.system-dialog .bk-cal-grid [aria-pressed="true"] { background: #34c759; color: #fff; font-weight: 700; }
.bk-cal-legend { margin-top: 10px; color: #86868b; font-size: 12px; line-height: 1.8; }
.system-dialog .bk-slots-title { margin: 18px 0 10px; font-size: 14px; }
.bk-slots { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.bk-slots button { min-height: 46px; padding: 10px 6px; border: 1px solid #d4f0da; border-radius: 10px; background: #f6fef8; color: #1a7a3a; font-size: 13px; font-weight: 600; }
.bk-slots button small { display: block; margin-top: 2px; font-weight: 400; }
.bk-slots button[aria-pressed="true"] { border-color: #34c759; background: #34c759; color: #fff; }
.bk-slots button:disabled { border-color: #e5e5ea; background: #f5f5f7; color: #96969c; }
.bk-summary { margin: 0; }
.bk-summary > div { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid #f2f2f7; }
.bk-summary dt { color: #86868b; }
.bk-summary dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Micro site — a readable, centered phone-sized page. */
.ms-preview { background: #e8e8ed; }
.ms-scroll { background: #e8e8ed; }
.ms-page { width: 100%; max-width: 390px; min-height: 100%; margin: 0 auto; background: #f5f5f7; box-shadow: 0 0 24px #1d1d1f08; }
.ms-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #00000014; background: #fffffff0; backdrop-filter: saturate(180%) blur(20px); }
.ms-topbar > strong { min-width: 0; font-size: 16px; line-height: 1.4; }
.ms-topbar > button { flex-shrink: 0; min-height: 44px; padding: 8px 16px; border-radius: 99px; background: #34c759; color: #fff; font-size: 13px; font-weight: 600; }
.ms-banner { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #e8e8ed; }
.ms-banner-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 16px 46px; color: #86868b; text-align: center; }
.ms-banner-placeholder > svg { width: 42px; height: 42px; margin-bottom: 6px; color: #aaaab1; }
.ms-banner-placeholder > strong { color: #636366; font-size: 17px; font-weight: 500; }
.ms-banner-placeholder > span { font-size: 12px; }
.ms-banner-dots { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 0; }
.ms-banner-dots button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
.ms-banner-dots button::after { content: ''; width: 7px; height: 7px; border-radius: 99px; background: #b1b1b8; }
.ms-banner-dots button[aria-pressed="true"]::after { width: 20px; background: #fff; }
.ms-info { padding: 24px 20px 20px; text-align: center; }
.ms-info h3 { margin-bottom: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.3px; }
.ms-info p { margin: 6px 0; font-size: 14px; color: #86868b; }
.ms-book { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 11px 28px; border-radius: 99px; background: #34c759; color: #fff; font-weight: 600; box-shadow: 0 4px 14px #34c75930; }
.ms-info .ms-book { margin-top: 14px; }
.ms-book svg { width: 17px; height: 17px; }
.ms-block { padding: 24px 20px; background: #fff; }
.ms-block h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 18px; }
.ms-block h4 > svg { width: 18px; height: 18px; color: #34c759; }
.ms-block h4::after { content: ''; flex: 1; height: 2px; margin-left: 8px; border-radius: 1px; background: linear-gradient(90deg,#34c759,transparent); }
.ms-teachers { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 16px; }
.ms-teacher { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 2px 8px; border-radius: 14px; text-align: center; }
.ms-teacher-photo { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; margin: 0 auto 8px; border: 3px solid #f0f0f5; border-radius: 50%; background: linear-gradient(135deg,#34c759,#30d158); color: #fff; font-size: 24px; font-weight: 700; box-shadow: 0 2px 8px #0000000f; }
.ms-teacher > strong { margin-bottom: 3px; font-size: 14px; font-weight: 600; }
.ms-teacher > small { color: #278a42; }
.ms-teacher > span:last-child { margin-top: 8px; color: #636366; font-size: 12px; line-height: 1.6; }
.ms-activities { background: #f5f5f7; }
.ms-activity { padding: 18px; border-radius: 16px; background: #fff; }
.ms-activity > span { display: block; margin-bottom: 10px; color: #86868b; font-size: 12px; }
.ms-activity > strong { font-size: 16px; }
.ms-activity p { margin-top: 8px; color: #86868b; font-size: 13px; line-height: 1.8; }
.ms-footer { padding: 20px 16px 26px; color: #86868b; font-size: 12px; line-height: 1.9; text-align: center; }

/* Native system dialog: header and booking actions stay outside body scrolling. */
.system-dialog {
  width: min(520px,calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid #e5e5ea;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 24px 90px #00000030;
}
.system-dialog[open] { display: flex; flex-direction: column; }
.system-dialog::backdrop { background: #00000073; backdrop-filter: blur(4px); }
.system-dialog > header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid #f2f2f7; background: #fff; }
.system-dialog > header h3 { min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.system-dialog .dialog-close { display: grid; place-items: center; position: static; flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: #f5f5f7; color: #86868b; font-family: inherit; font-size: 26px; line-height: 1; }
.system-dialog #system-dialog-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; }
.dp-resource-preview,
.ms-booking-preview { padding: 28px 24px; text-align: center; }
.dp-resource-preview > svg,
.ms-booking-preview > svg { width: 42px; height: 42px; margin-bottom: 18px; color: #166b3a; }
.dp-resource-preview > p,
.ms-booking-preview > p { margin-top: 14px; color: #76767d; font-size: 14px; line-height: 1.9; }
.dp-resource-preview > button,
.ms-booking-preview > button { margin-top: 24px; }
.ms-booking-preview > svg { color: #34c759; }
.ms-teacher-detail { padding: 28px 24px; text-align: center; }
.ms-teacher-detail > h4 { margin-top: 12px; font-size: 20px; }
.ms-teacher-detail > p { margin-top: 8px; color: #278a42; }
.ms-teacher-detail > section { margin-top: 24px; padding: 20px; border-radius: 16px; background: #f5f5f7; text-align: left; }
.ms-teacher-detail > section p { margin-top: 10px; color: #636366; font-size: 14px; line-height: 1.9; }

@media (hover:hover) {
  .sc-students button[aria-pressed="false"]:hover,
  .sc-subjects button[aria-pressed="false"]:hover,
  .sc-knowledge-grid button[aria-pressed="false"]:hover { background: #eaf6e9; }
  .dp-book-row:hover,
  .dp-piece:hover { border-color: #acd2b4; background: #fcfefb; }
  .dp-actions button:hover,
  .dp-nav button:hover { background: #f0f6ef; }
  .dp-primary:hover { background: #0e512a; }
  .bk-primary:not(:disabled):hover,
  .ms-book:hover,
  .ms-topbar > button:hover { background: #2db84e; }
  .bk-pick-teacher:hover { border-color: #34c759; }
  .system-dialog .bk-cal-grid .available:not([aria-pressed="true"]):hover { background: #d4f0da; }
  .bk-slots button:not(:disabled):hover { border-color: #34c759; }
  .system-dialog .dialog-close:hover { background: #e8e8ed; }
}
@container (max-width:550px) {
  .sc-page,.dp-page { padding: 18px; }
  .sc-card { padding: 20px; }
  .dp-top > strong { margin-left: 0; font-size: 14px; }
  .dp-heading { gap: 15px; }
  .dp-heading h3 { font-size: 26px; }
  .dp-actions { width: 100%; }
  .dp-actions button { flex: 1; }
  .dp-stats { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .dp-stat { padding: 15px 18px; }
}
@container (max-width:380px) {
  .system-preview { inset: 12px; }
  .preview-bar { padding: 8px 12px; }
  .sc-page,.dp-page { padding: 16px 12px; }
  .sc-heading { gap: 14px; margin-bottom: 18px; }
  .sc-heading h3 { font-size: 26px; }
  .sc-search { width: 100%; }
  .sc-card { padding: 18px 14px; }
  .sc-students { margin-bottom: 20px; }
  .sc-subjects { gap: 8px; margin-bottom: 22px; }
  .sc-subjects button { padding: 9px 12px; }
  .sc-knowledge-grid { gap: 8px; }
  .sc-knowledge-grid button { padding: 9px 13px; }
  .dp-top { gap: 8px; padding: 12px; }
  .dp-top > strong { text-align: left; font-size: 14px; }
  .dp-avatar { width: 34px; height: 34px; font-size: 15px; }
  .dp-heading h3 { font-size: 24px; }
  .dp-heading p { font-size: 13px; }
  .dp-actions { gap: 8px; }
  .dp-actions button { gap: 5px; padding: 10px 9px; font-size: 13px; }
  .dp-card { padding: 18px; }
  .dp-book-row { gap: 12px; padding: 18px 14px; border-radius: 24px; }
  .dp-book-thumb { width: 48px; height: 68px; border-radius: 12px; }
  .dp-book-body > strong { font-size: 15px; }
  .dp-book-body > span:not(.dp-progress) { font-size: 12px; }
  .dp-piece { gap: 10px; padding: 17px 14px; border-radius: 24px; }
  .dp-piece strong { font-size: 15px; }
  .dp-piece small { gap: 3px; }
  .dp-piece small svg { margin-left: 2px; }
  .dp-nav { padding: 6px 8px; }
  .bk-page { padding: 14px 12px; }
  .bk-course-card { padding: 16px 14px; }
  .bk-course-meta > span { margin-left: 4px; }
  .bk-course-bottom { gap: 10px; }
  .bk-course-bottom .bk-primary { padding: 10px 16px; }
  .bk-price { font-size: 14px; }
  .ms-topbar { padding: 10px 12px; gap: 8px; }
  .ms-topbar > strong { font-size: 14px; }
  .ms-topbar > button { padding: 8px 13px; }
  .ms-info,.ms-block { padding-right: 16px; padding-left: 16px; }
  .ms-teachers { gap: 12px; }
}
@media (max-width:900px) {
  .product-demo:is([data-preview="0"],[data-preview="1"],[data-preview="2"],[data-preview="3"],[data-preview="4"]) { height: clamp(620px,80svh,720px); }
  .system-preview button,
  .system-dialog button { min-width: 44px; min-height: 44px; }
}
@media (max-width:600px) {
  .system-preview input { font-size: 16px; }
  .system-dialog > header { padding: 12px 14px; }
  .system-dialog .bk-steps { padding: 14px 12px; }
  .system-dialog .bk-modal-body { padding: 16px 12px; }
  /* Use the body inset to allow for a non-overlay scrollbar without shrinking dates. */
  .system-dialog .bk-cal-week,
  .system-dialog .bk-cal-grid { gap: 1px; margin-inline: -5px; }
  .system-dialog .bk-cal-grid button:focus-visible { outline-offset: -2px; }
  .system-dialog .bk-modal-footer { padding-right: 14px; padding-left: 14px; }
  .dp-resource-preview,.ms-booking-preview,.ms-teacher-detail { padding: 24px 18px; }
}
@media (max-width:374px) {
  .system-dialog .bk-modal-body { padding-right: 6px; padding-left: 6px; }
  .system-dialog .bk-cal-week,
  .system-dialog .bk-cal-grid { gap: 0; }
  .system-dialog .bk-cal-grid button { min-height: 39px; border-radius: 8px; }
  .system-dialog .bk-steps { padding-right: 10px; padding-left: 10px; }
  .bk-steps > span { gap: 4px; }
  .bk-steps > span:not(:last-child)::after { margin-right: 4px; }
  .bk-pick-teacher { gap: 9px; padding: 12px 10px; }
}

/* Compact demo screens: keep the full interactive surface inside the product frame. */
@media (min-width: 901px) {
  .product-demo .preview-bar { min-height: 34px; padding: 6px 14px; }
  .product-demo .preview-scroll { overflow: hidden; }

  /* Student center */
  .product-demo .sc-page { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; }
  .product-demo .sc-heading { flex-wrap: nowrap; gap: 12px; margin-bottom: 0; }
  .product-demo .sc-heading h3 { font-size: 22px; }
  .product-demo .sc-search { width: 200px; padding: 0 10px; border-radius: 10px; }
  .product-demo .sc-search input { min-height: 34px; padding: 4px 0; font-size: 12px; }
  .product-demo .sc-search svg { width: 15px; height: 15px; }
  .product-demo .sc-card { display: grid; flex: 1; grid-template-columns: 118px minmax(0,1fr); gap: 0 16px; min-height: 0; padding: 10px 14px; border-radius: 14px; }
  .product-demo .sc-students { flex-direction: column; align-content: start; gap: 6px; margin: 0; padding-right: 14px; border-right: 1px solid #ececf0; }
  .product-demo .sc-students button { min-width: 0; min-height: 34px; padding: 5px 12px; border-radius: 11px; font-size: 13px; }
  .product-demo #student-empty { grid-column: 2; margin: 0; }
  .product-demo #student-content { min-width: 0; }
  .product-demo .sc-subjects { gap: 6px; margin-bottom: 8px; }
  .product-demo .sc-subjects button { min-height: 28px; padding: 4px 10px; border-radius: 10px; font-size: 11px; }
  .product-demo #student-knowledge { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 4px 10px; }
  .product-demo .sc-knowledge-title { grid-column: 1; gap: 6px; font-size: 13px; }
  .product-demo .sc-knowledge-title svg { width: 16px; height: 16px; }
  .product-demo .sc-page .sc-level { grid-column: 2; margin: 0; padding-left: 8px; font-size: 12px; }
  .product-demo .sc-knowledge-grid { grid-column: 1 / -1; gap: 5px; margin-top: 2px; }
  .product-demo .sc-knowledge-grid button { min-height: 27px; padding: 4px 11px; font-size: 11px; white-space: nowrap; }
  .product-demo #knowledge-status { margin-top: 0; font-size: 9px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Demonstration platform */
  .product-demo .dp-top { padding: 5px 14px; }
  .product-demo .dp-top > strong { margin-left: 0; text-align: left; font-size: 12px; }
  .product-demo .dp-top .dp-avatar { width: 28px; height: 28px; font-size: 13px; }
  .product-demo .dp-page { padding: 6px 14px; }
  .product-demo .dp-nav { padding: 3px 10px; }
  .product-demo .dp-nav button { flex-direction: row; gap: 6px; min-height: 34px; }
  .product-demo .dp-nav button > svg { width: 24px; height: 24px; padding: 3px 7px; }
  .product-demo .dp-nav button > span { font-size: 10px; }
  .product-demo .dp-heading { align-items: center; gap: 8px; margin-bottom: 6px; }
  .product-demo .dp-heading h3 { font-size: 17px; }
  .product-demo .dp-heading p { margin-top: 2px; font-size: 10px; }
  .product-demo .dp-actions { gap: 6px; }
  .product-demo .dp-actions button { gap: 4px; min-height: 26px; padding: 4px 10px; font-size: 10px; }
  .product-demo .dp-actions svg { width: 14px; height: 14px; }
  .product-demo .dp-card { margin-bottom: 4px; padding: 6px 12px; border-radius: 12px; }
  .product-demo .dp-card-head { margin-bottom: 4px; }
  .product-demo .dp-card-head h4 { font-size: 12px; }
  .product-demo .dp-badge { min-height: 22px; padding: 2px 10px; font-size: 10px; }
  .product-demo .dp-stats { gap: 6px; }
  .product-demo .dp-stat { display: flex; align-items: center; justify-content: space-between; padding: 4px 9px; border-radius: 10px; }
  .product-demo .dp-stat > span { gap: 4px; font-size: 10px; }
  .product-demo .dp-stat svg { width: 13px; height: 13px; }
  .product-demo .dp-stat strong { margin-top: 0; font-size: 16px; }
  .product-demo .dp-stat strong small { font-size: 9px; }
  .product-demo .dp-progress { height: 4px; }
  .product-demo .dp-card > .dp-progress { margin-top: 4px; }
  .product-demo .dp-book-row { gap: 10px; padding: 4px 12px; border-radius: 14px; }
  .product-demo .dp-book-thumb { width: 34px; height: 40px; border-radius: 9px; }
  .product-demo .dp-book-thumb svg { width: 20px; height: 20px; }
  .product-demo .dp-book-body { gap: 2px; }
  .product-demo .dp-book-body > small { font-size: 9px; }
  .product-demo .dp-book-body > strong { font-size: 13px; }
  .product-demo .dp-book-body > span:not(.dp-progress) { font-size: 10px; }
  .product-demo .dp-book-body .dp-progress { margin-top: 2px; }
  .product-demo .dp-back { min-height: 22px; margin: 0 0 3px; padding: 2px 0; font-size: 11px; }
  .product-demo .dp-pieces { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 8px; }
  .product-demo .dp-piece { gap: 8px; padding: 5px 9px; border-radius: 12px; }
  .product-demo .dp-piece > b { min-width: 10px; font-size: 11px; }
  .product-demo .dp-piece strong { font-size: 12px; }
  .product-demo .dp-piece small { gap: 2px; margin-top: 2px; font-size: 9px; }
  .product-demo .dp-piece small svg { width: 11px; height: 11px; margin-left: 2px; }
  .product-demo .dp-piece > svg { width: 13px; height: 13px; }
  .product-demo .dp-pieces + .preview-note { display: none; }
  .product-demo .dp-activation { gap: 8px; }
  .product-demo .dp-activation label { font-size: 11px; }
  .product-demo .dp-activation input { min-height: 30px; padding: 5px 9px; font-size: 11px; }
  .product-demo .dp-primary { min-height: 30px; padding: 5px 14px; font-size: 11px; }
  .product-demo .dp-continue { margin-bottom: 8px; padding: 10px 16px; border-radius: 12px; gap: 4px; }
  .product-demo .dp-continue strong { font-size: 14px; }
  .product-demo .dp-continue > span { font-size: 10px; }
  .product-demo .dp-history { margin-top: 6px; padding: 6px 0; }
  .product-demo .dp-profile { margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; gap: 10px; }
  .product-demo .dp-profile .dp-avatar { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
  .product-demo .dp-profile h3 { font-size: 16px; }
  .product-demo .dp-profile p { margin-top: 1px; font-size: 10px; }
  .product-demo .dp-profile-stats { margin-bottom: 8px; }
  .product-demo .dp-profile-line { gap: 4px; margin-top: 6px; }
  .product-demo .dp-profile-line > span { font-size: 10px; }
  .product-demo .dp-profile-line > strong { padding: 5px 9px; border-radius: 9px; font-size: 11px; }
  .product-demo .dp-page:has(.dp-continue) { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px; }
  .product-demo .dp-page:has(.dp-continue) .dp-heading { grid-column: 1 / -1; margin-bottom: 0; }
  .product-demo .dp-page:has(.dp-continue) .dp-continue { margin-bottom: 0; }
  .product-demo .dp-page:has(.dp-continue) .dp-card { height: 100%; margin-bottom: 0; }
  .product-demo .dp-page:has(.dp-profile) { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px; }
  .product-demo .dp-page:has(.dp-profile) .dp-profile { grid-column: 1 / -1; margin: 0; }
  .product-demo .dp-page:has(.dp-profile) .dp-profile-stats { grid-template-columns: 1fr; gap: 6px; margin: 0; }
  .product-demo .dp-page:has(.dp-profile) .dp-card { margin: 0; }

  /* Smart academics */
  .product-demo .bk-topbar { padding: 5px 14px; }
  .product-demo .bk-topbar h3 { font-size: 17px; }
  .product-demo .bk-categories { gap: 6px; padding: 5px 14px; }
  .product-demo .bk-categories button { gap: 4px; min-height: 26px; padding: 3px 10px; font-size: 11px; }
  .product-demo .bk-categories svg { width: 13px; height: 13px; }
  .product-demo .bk-page { padding: 8px 14px; }
  .product-demo #booking-courses { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .product-demo .bk-category { grid-column: 1 / -1; margin-bottom: 0; padding: 5px 10px; border-radius: 9px; font-size: 11px; }
  .product-demo .bk-category svg { width: 14px; height: 14px; }
  .product-demo .bk-course-card { margin-bottom: 0; padding: 9px 11px; border-radius: 11px; }
  .product-demo .bk-course-top h4 { font-size: 12px; }
  .product-demo .bk-course-badge { padding: 2px 7px; border-radius: 7px; font-size: 9px; }
  .product-demo .bk-course-meta { gap: 3px; margin-top: 4px; font-size: 9px; }
  .product-demo .bk-course-meta svg { width: 11px; height: 11px; }
  .product-demo .bk-course-meta > span { gap: 3px; margin-left: 4px; }
  .product-demo .bk-course-bottom { gap: 6px; margin-top: 6px; }
  .product-demo .bk-price { font-size: 11px; }
  .product-demo .bk-price small { display: none; }
  .product-demo .bk-page .bk-primary { min-height: 26px; padding: 3px 12px; font-size: 10px; }
  .product-demo .bk-page > .preview-note { margin-top: 6px; font-size: 9px; line-height: 1.5; }

  /* Micro site */
  .product-demo .ms-scroll { background: #eceef0; }
  .product-demo .ms-page { display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-template-rows: auto 1fr 1.2fr auto; grid-template-areas: "top top top" "banner info activities" "banner teachers teachers" "footer footer footer"; gap: 6px; width: 100%; max-width: none; height: 100%; min-height: 0; padding: 6px; background: #eceef0; box-shadow: none; }
  .product-demo .ms-topbar { position: static; grid-area: top; padding: 4px 10px; border: 0; border-radius: 8px; background: #fff; }
  .product-demo .ms-topbar > strong { font-size: 12px; }
  .product-demo .ms-topbar > button { min-height: 26px; padding: 3px 10px; font-size: 10px; }
  .product-demo .ms-banner { grid-area: banner; aspect-ratio: auto; height: auto; min-height: 0; overflow: hidden; border-radius: 10px; }
  .product-demo .ms-banner-placeholder { gap: 3px; padding: 8px; }
  .product-demo .ms-banner-placeholder > svg { width: 22px; height: 22px; margin-bottom: 2px; }
  .product-demo .ms-banner-placeholder > strong { font-size: 11px; }
  .product-demo .ms-banner-placeholder > span { font-size: 8px; }
  .product-demo .ms-banner-dots { bottom: 2px; }
  .product-demo .ms-banner-dots button { width: 28px; height: 22px; }
  .product-demo .ms-banner-dots button::after { width: 5px; height: 5px; }
  .product-demo .ms-banner-dots button[aria-pressed="true"]::after { width: 12px; }
  .product-demo .ms-info { grid-area: info; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 10px; background: #fff; text-align: center; }
  .product-demo .ms-info h3 { margin-bottom: 1px; font-size: 14px; letter-spacing: 0; }
  .product-demo .ms-info p { margin: 1px 0; font-size: 9px; }
  .product-demo .ms-info .ms-book { width: max-content; margin-top: 5px; padding: 4px 12px; min-height: 26px; font-size: 10px; box-shadow: none; }
  .product-demo .ms-book svg { width: 13px; height: 13px; }
  .product-demo .ms-block { padding: 7px 10px; border-radius: 10px; background: #fff; }
  .product-demo .ms-block:not(.ms-activities) { grid-area: teachers; }
  .product-demo .ms-activities { grid-area: activities; background: #fff; }
  .product-demo .ms-block h4 { gap: 4px; margin-bottom: 5px; font-size: 11px; }
  .product-demo .ms-block h4 > svg { width: 13px; height: 13px; }
  .product-demo .ms-teachers { gap: 12px; }
  .product-demo .ms-teacher { flex-direction: column; align-items: center; gap: 0; padding: 0; text-align: center; }
  .product-demo .ms-teacher-photo { width: 30px; height: 30px; margin: 0 0 2px; border-width: 2px; font-size: 11px; }
  .product-demo .ms-teacher > strong { margin: 0; font-size: 10px; }
  .product-demo .ms-teacher > small { font-size: 8px; }
  .product-demo .ms-teacher > span:last-child { display: block; margin-top: 2px; font-size: 8px; line-height: 1.4; }
  .product-demo .ms-activity { padding: 5px 8px; border-radius: 8px; background: #f5f5f7; }
  .product-demo .ms-activity > span { margin-bottom: 1px; font-size: 8px; }
  .product-demo .ms-activity > strong { font-size: 10px; }
  .product-demo .ms-activity p { margin-top: 2px; font-size: 8px; line-height: 1.5; }
  .product-demo .ms-footer { grid-area: footer; padding: 2px 4px 0; font-size: 7px; line-height: 1.5; text-align: left; }
}

/* Restored product note */
.product-heading > p { max-width: 360px; padding-bottom: 7px; color: var(--muted); font-size: 11px; line-height: 2; }

/* Award knowledge demo */
.sa-page { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 22px; background: #f6f6f4; }
.sa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sa-head h3 { color: #1c1c1e; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.sa-head p { margin-top: 4px; color: #8a8a8f; font-size: 13px; line-height: 1.6; }
.sa-hint { display: inline-flex; align-items: center; flex-shrink: 0; gap: 6px; padding: 8px 12px; border-radius: 99px; background: #fff; color: #66676b; font-size: 12px; box-shadow: 0 2px 6px #1d1d1f08; }
.sa-hint svg { width: 14px; height: 14px; color: #3a8f53; }
.sa-filterbar { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 3px 14px #1d1d1f06; }
.sa-search { display: flex; align-items: center; flex: 1; gap: 7px; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; background: #f5f5f3; color: #97979c; }
.sa-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.sa-search input { flex: 1; width: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #1d1d1f; font: inherit; font-size: 13px; }
.sa-filter { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 5px; height: 38px; padding: 0 12px; border-radius: 10px; background: #f5f5f3; color: #343437; font-size: 12px; }
.sa-filter svg { width: 14px; height: 14px; color: #6b6b70; }
.sa-filter select { min-height: 0; padding: 0 15px 0 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; appearance: none; -webkit-appearance: none; }
.sa-caret { position: absolute; right: 9px; top: 50%; color: #86868b; font-size: 12px; pointer-events: none; transform: translateY(-52%); }
.sa-table { display: flex; flex-direction: column; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 5px 24px #1d1d1f06; }
.sa-table-head,
.sa-row { display: grid; grid-template-columns: minmax(78px,.9fr) minmax(110px,1.1fr) minmax(110px,1.15fr) 88px; align-items: center; gap: 12px; padding: 0 18px; }
.sa-table-head { min-height: 32px; border-bottom: 1px solid #f2f2ef; color: #8e8e93; font-size: 11px; }
.sa-group[hidden] { display: none; }
.sa-group-head { display: flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 18px; background: #f4f4f1; color: #3d3d40; font-size: 12px; font-weight: 600; }
.sa-group-head svg { width: 15px; height: 15px; color: #57575b; }
.sa-group-head b { margin-left: 1px; padding: 1px 7px; border-radius: 7px; background: #dcf3e0; color: #368e50; font-size: 10px; font-weight: 600; }
.sa-row { min-height: 42px; border-bottom: 1px solid #f6f6f2; color: #3a3a3d; font-size: 12px; }
.sa-row:last-child { border-bottom: 0; }
.sa-name { color: #222; font-weight: 600; }
.sa-phone { color: #4d4d50; letter-spacing: .02em; }
.sa-course { color: #2b9152; font-weight: 600; }
.sa-award { display: inline-flex; align-items: center; justify-self: end; justify-content: center; gap: 4px; min-height: 30px; padding: 4px 11px; border-radius: 99px; background: #f3f3f0; color: #262628; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sa-award svg { width: 13px; height: 13px; color: #3e8e55; }
.sa-empty { display: flex; flex: 1; align-items: center; justify-content: center; padding: 20px; color: #8a8a8f; font-size: 12px; }
.sa-empty[hidden] { display: none; }

/* Demonstration platform library */
.ml-page { display: flex; flex-direction: column; gap: 14px; min-height: 100%; padding: 22px; background: #efeeeb; color: #141715; }
.ml-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ml-head h3 { color: #171917; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.ml-head p { margin-top: 4px; color: #8b8b86; font-size: 13px; line-height: 1.7; }
.ml-actions { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 8px; }
.ml-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 99px; background: #fff; color: #232624; font-size: 12px; box-shadow: 0 2px 8px #1d1d1f0a; }
.ml-actions svg { width: 15px; height: 15px; color: #1c7a45; }
.ml-card { border-radius: 18px; background: #fff; box-shadow: 0 2px 2px #161a1807, 0 10px 24px #161a1804; }
.ml-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ml-card-head h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ml-card-head h4 svg { width: 16px; height: 16px; color: #1c7a45; }
.ml-badge { display: inline-grid; place-items: center; min-height: 26px; padding: 4px 12px; border-radius: 99px; background: #0f2a1b; color: #fff; font-size: 11px; font-weight: 700; }
.ml-progress { padding: 16px 18px; }
.ml-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.ml-stat { padding: 12px 14px; border-radius: 13px; background: #f5f4f1; }
.ml-stat > span { display: flex; align-items: center; gap: 5px; color: #8b8b86; font-size: 11px; }
.ml-stat svg { width: 14px; height: 14px; color: #1c7a45; }
.ml-stat strong { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; line-height: 1.2; }
.ml-stat small { margin-left: 3px; color: #8b8b86; font-size: 10px; font-weight: 500; }
.ml-bar { display: block; height: 5px; border-radius: 99px; background: #efeeea; overflow: hidden; }
.ml-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#1f8b4c,#38b56a); }
.ml-progress > .ml-bar { margin-top: 12px; }
.ml-books { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ml-book { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 2px 2px #161a1807, 0 10px 24px #161a1804; text-align: left; }
.ml-book-thumb { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 64px; border-radius: 10px; background: #e6f0d9; color: #1c6b38; }
.ml-book-thumb svg { width: 26px; height: 26px; }
.ml-book-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ml-book-body > small { color: #1c7a45; font-size: 10px; font-weight: 600; }
.ml-book-body > strong { color: #1b1d1b; font-size: 15px; line-height: 1.45; }
.ml-book-body > span:not(.ml-bar) { color: #8b8b86; font-size: 11px; }
.ml-book-body .ml-bar { margin-top: 3px; }
.ml-book > svg { width: 16px; height: 16px; flex-shrink: 0; color: #85857f; }
.ml-crumb { display: flex; align-items: center; gap: 6px; color: #8b8b86; font-size: 12px; }
.ml-crumb button { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 0; color: #6f6f6a; font-size: 12px; }
.ml-crumb span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ml-detail-head { align-items: center; }
.ml-detail-bar { margin-top: 2px; }
.ml-pieces { display: flex; flex-direction: column; gap: 8px; }
.ml-piece { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 2px 2px #161a1807; text-align: left; }
.ml-piece > b { flex: 0 0 auto; min-width: 14px; color: #39a95f; font-size: 13px; }
.ml-piece-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.ml-piece-body > strong { font-size: 14px; }
.ml-piece-body > small { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #2b8d50; font-size: 10px; font-weight: 600; }
.ml-piece-body > small span { display: inline-flex; align-items: center; gap: 3px; }
.ml-piece-body > small svg { width: 12px; height: 12px; }
.ml-piece > svg { width: 15px; height: 15px; flex-shrink: 0; color: #8b8b86; }
.ml-note { color: #9a9a94; font-size: 10px; }
.ml-activate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ml-activate,
.ml-activated { padding: 16px 18px; }
.ml-activate h4,
.ml-activated h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ml-activate h4 svg,
.ml-activated h4 svg { width: 16px; height: 16px; color: #1c7a45; }
.ml-muted { margin-top: 4px; color: #8b8b86; font-size: 11px; line-height: 1.7; }
.ml-activate label { display: block; margin-top: 12px; color: #444; font-size: 11px; font-weight: 600; }
.ml-input { display: flex; align-items: center; gap: 6px; margin-top: 5px; padding: 0 12px; border-radius: 10px; background: #f5f4f1; color: #a0a09a; }
.ml-input svg { width: 15px; height: 15px; flex-shrink: 0; }
.ml-input input { flex: 1; min-width: 0; min-height: 40px; border: 0; outline: 0; background: transparent; color: #1d1d1f; font: inherit; font-size: 13px; }
.ml-primary { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 40px; margin-top: 10px; border-radius: 99px; background: #0f2a1b; color: #fff; font-size: 12px; font-weight: 600; }
.ml-primary svg { width: 15px; height: 15px; color: #8de0a2; }
.ml-status { margin-top: 8px; color: #b26b2a; font-size: 10px; }
.ml-status:empty { display: none; }
.ml-info { display: flex; align-items: flex-start; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f7f6f3; color: #777770; font-size: 10px; line-height: 1.7; }
.ml-info svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; color: #9a9a92; }
.ml-activated { display: flex; flex-direction: column; }
.ml-activated-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid #f0efeb; }
.ml-activated-row:first-of-type { margin-top: 12px; }
.ml-activated-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ml-activated-row strong { font-size: 13px; line-height: 1.5; }
.ml-activated-row small { overflow: hidden; color: #8b8b86; font-size: 10px; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.ml-activated-row button { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; min-height: 30px; padding: 4px 12px; border-radius: 99px; background: #f5f4f1; color: #1b1d1b; font-size: 11px; font-weight: 600; }
.ml-activated-row button svg { width: 12px; height: 12px; color: #1c7a45; }
.ml-continue { position: relative; display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 16px 54px 16px 18px; border-radius: 18px; background: #0f2a1b; color: #fff; text-align: left; overflow: hidden; }
.ml-continue::after { content: ''; position: absolute; right: -30px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: #ffffff0a; }
.ml-continue-label { display: flex; align-items: center; gap: 5px; color: #8de0a2; font-size: 11px; font-weight: 600; }
.ml-continue-label svg { width: 12px; height: 12px; }
.ml-continue strong { position: relative; z-index: 1; font-size: 20px; }
.ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { position: relative; z-index: 1; color: #b9c8bc; font-size: 11px; }
.ml-continue-arrow { position: absolute; right: 18px; top: 50%; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffffff12; transform: translateY(-50%); }
.ml-continue-arrow svg { width: 15px; height: 15px; color: #d9ead9; }
.ml-recent { padding: 14px 18px; }
.ml-recent h4 { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.ml-recent h4 svg { width: 16px; height: 16px; color: #1c7a45; }
.ml-recent-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; border-top: 1px solid #f0efeb; text-align: left; }
.ml-recent-row:first-of-type { margin-top: 8px; }
.ml-recent-icon { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; background: #f1f5e9; color: #1c7a45; }
.ml-recent-icon svg { width: 16px; height: 16px; }
.ml-recent-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ml-recent-body strong { font-size: 12px; }
.ml-recent-body small { overflow: hidden; color: #8b8b86; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.ml-date { padding: 3px 8px; border-radius: 99px; background: #f5f4f1; color: #6f6f6a; font-size: 9px; white-space: nowrap; }
.ml-recent-row > svg { width: 14px; height: 14px; flex-shrink: 0; color: #8b8b86; }

/* Knowledge dialog */
.system-dialog.knowledge-dialog { width: min(760px,calc(100% - 32px)); }
.knowledge-dialog > header h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
.knowledge-dialog > header h3 svg { width: 22px; height: 22px; color: #1b6d3b; }
.kd-body { padding: 20px 24px 24px; }
.kd-subject { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #f0efeb; color: #6e6e6a; font-size: 14px; font-weight: 600; }
.kd-subject svg { width: 18px; height: 18px; color: #8b8b86; }
.kd-section { margin-top: 18px; }
.kd-section h4 { display: flex; align-items: center; gap: 8px; color: #262624; font-size: 16px; font-weight: 700; }
.kd-bar { width: 3px; height: 16px; border-radius: 99px; background: #38b56a; }
.kd-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kd-chip { min-height: 36px; padding: 7px 16px; border-radius: 99px; background: #f3f2ee; color: #6f6f6a; font-size: 13px; white-space: nowrap; }
.kd-chip[aria-pressed="true"] { background: #16281d; color: #fff; box-shadow: 0 4px 10px #16281d1f; }
.kd-note { margin-top: 18px; color: #9a9a94; font-size: 11px; line-height: 1.7; }

@media (hover:hover) {
  .sa-award:hover,
  .ml-actions button:hover,
  .ml-book:hover,
  .ml-piece:hover,
  .ml-recent-row:hover,
  .ml-activated-row button:hover { background: #eef6ee; }
  .kd-chip[aria-pressed="false"]:hover { background: #eaf6e9; }
  .ml-primary:hover { background: #173d27; }
}

@media (max-width:900px) {
  .product-heading > p { max-width: 330px; margin-top: 18px; padding-bottom: 0; }
  .sa-head { flex-wrap: wrap; }
  .sa-filterbar { flex-wrap: wrap; }
  .sa-search { flex-basis: 100%; }
  .ml-head { flex-wrap: wrap; }
  .ml-books,
  .ml-activate-grid { grid-template-columns: 1fr; }
  .ml-book { padding: 12px 14px; }
  .ml-activated-row:first-of-type { margin-top: 0; }
}

@media (max-width:600px) {
  .sa-page { padding: 16px 12px; gap: 10px; }
  .sa-head h3 { font-size: 24px; }
  .sa-hint { display: none; }
  .sa-search,
  .sa-filter { height: 36px; }
  .sa-filter { flex: 1; }
  .sa-table-head { display: none; }
  .sa-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name award" "phone course"; gap: 3px 8px; padding: 7px 12px; }
  .sa-name { grid-area: name; }
  .sa-phone { grid-area: phone; font-size: 10px; }
  .sa-course { grid-area: course; justify-self: end; font-size: 10px; }
  .sa-award { grid-area: award; }
  .sa-group-head { padding: 0 12px; }
  .system-dialog.knowledge-dialog { width: calc(100% - 20px); }
  .kd-body { padding: 16px; }
  .kd-chip { min-height: 34px; padding: 6px 13px; font-size: 12px; }
  .kd-section h4 { font-size: 15px; }
  .kd-chips { gap: 7px; }
  .ml-page { padding: 16px 12px; gap: 8px; }
  .ml-head h3 { font-size: 24px; }
  .ml-actions button { min-height: 34px; padding: 5px 12px; }
  .ml-progress { padding: 14px; }
  .ml-activate-grid { gap: 8px; }
  .ml-activate,
  .ml-activated { padding: 12px 14px; }
  .ml-stat { padding: 9px 8px; }
  .ml-stat > span { gap: 3px; font-size: 10px; white-space: nowrap; }
  .ml-stat svg { width: 12px; height: 12px; }
  .ml-book-body > strong { font-size: 14px; }
  .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ml-piece { min-height: 48px; padding: 7px 12px; }
  .ml-date { display: none; }
}

/* Compact in-frame layouts for the redesigned demos */
@media (min-width: 901px) {
  .product-heading > p { max-width: 430px; padding-bottom: 4px; font-size: 11px; line-height: 1.8; }

  /* Student center */
  .product-demo .sa-page { height: 100%; min-height: 0; gap: 6px; padding: 9px 12px; overflow: hidden; }
  .product-demo .sa-head { align-items: center; }
  .product-demo .sa-head h3 { font-size: 18px; }
  .product-demo .sa-head p { margin-top: 1px; font-size: 9px; line-height: 1.5; }
  .product-demo .sa-hint { gap: 4px; padding: 3px 8px; font-size: 8px; }
  .product-demo .sa-hint svg { width: 10px; height: 10px; }
  .product-demo .sa-filterbar { gap: 6px; padding: 4px; border-radius: 10px; }
  .product-demo .sa-search { height: 28px; padding: 0 9px; border-radius: 7px; gap: 5px; }
  .product-demo .sa-search svg { width: 12px; height: 12px; }
  .product-demo .sa-search input { font-size: 10px; }
  .product-demo .sa-filter { height: 28px; padding: 0 9px; border-radius: 7px; gap: 4px; font-size: 9px; }
  .product-demo .sa-filter svg { width: 11px; height: 11px; }
  .product-demo .sa-filter select { padding-right: 12px; font-size: 9px; }
  .product-demo .sa-caret { right: 7px; font-size: 9px; }
  .product-demo .sa-table { flex: 1; min-height: 0; border-radius: 10px; }
  .product-demo .sa-table-head { min-height: 20px; grid-template-columns: minmax(56px,.8fr) minmax(86px,1.1fr) minmax(90px,1.1fr) 72px; gap: 8px; padding: 0 12px; font-size: 8px; }
  .product-demo .sa-group-head { min-height: 21px; gap: 5px; padding: 0 12px; font-size: 9px; }
  .product-demo .sa-group-head svg { width: 11px; height: 11px; }
  .product-demo .sa-group-head b { padding: 0 5px; border-radius: 5px; font-size: 8px; }
  .product-demo .sa-row { min-height: 27px; gap: 8px; padding: 0 12px; font-size: 9px; }
  .product-demo .sa-award { min-height: 20px; gap: 3px; padding: 2px 7px; font-size: 8px; }
  .product-demo .sa-award svg { width: 10px; height: 10px; }
  .product-demo .sa-empty { padding: 10px; font-size: 9px; }

  /* Demonstration platform */
  .product-demo .ml-page { height: 100%; min-height: 0; gap: 5px; padding: 7px 12px; overflow: hidden; }
  .product-demo .ml-head { align-items: center; gap: 8px; }
  .product-demo .ml-head h3 { font-size: 17px; }
  .product-demo .ml-head p { margin-top: 1px; font-size: 9px; line-height: 1.5; }
  .product-demo .ml-actions { gap: 5px; }
  .product-demo .ml-actions button { min-height: 24px; gap: 4px; padding: 3px 9px; font-size: 9px; }
  .product-demo .ml-actions svg { width: 11px; height: 11px; }
  .product-demo .ml-card { border-radius: 11px; }
  .product-demo .ml-progress { padding: 7px 11px; }
  .product-demo .ml-card-head h4 { gap: 4px; font-size: 10px; }
  .product-demo .ml-card-head h4 svg { width: 12px; height: 12px; }
  .product-demo .ml-badge { min-height: 20px; padding: 2px 8px; font-size: 9px; }
  .product-demo .ml-stats { gap: 6px; margin-top: 5px; }
  .product-demo .ml-stat { display: flex; align-items: center; justify-content: space-between; padding: 3px 8px; border-radius: 8px; }
  .product-demo .ml-stat > span { gap: 3px; font-size: 8px; }
  .product-demo .ml-stat svg { width: 10px; height: 10px; }
  .product-demo .ml-stat strong { margin-top: 0; font-size: 13px; }
  .product-demo .ml-stat small { font-size: 8px; }
  .product-demo .ml-bar { height: 4px; }
  .product-demo .ml-progress > .ml-bar { margin-top: 5px; }
  .product-demo .ml-books { flex: 1; min-height: 0; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; gap: 6px; }
  .product-demo .ml-book { gap: 8px; padding: 6px 10px; border-radius: 11px; }
  .product-demo .ml-book-thumb { width: 32px; height: 40px; border-radius: 8px; }
  .product-demo .ml-book-thumb svg { width: 20px; height: 20px; }
  .product-demo .ml-book-body { gap: 1px; }
  .product-demo .ml-book-body > small { font-size: 8px; }
  .product-demo .ml-book-body > strong { overflow: hidden; font-size: 11px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
  .product-demo .ml-book-body > span:not(.ml-bar) { overflow: hidden; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
  .product-demo .ml-book-body .ml-bar { margin-top: 2px; }
  .product-demo .ml-book > svg { width: 12px; height: 12px; }
  .product-demo .ml-crumb { gap: 4px; font-size: 9px; }
  .product-demo .ml-crumb button { min-height: 16px; padding: 0; font-size: 9px; }
  .product-demo .ml-detail-head h3 { font-size: 16px; }
  .product-demo .ml-detail-bar { margin-top: 0; }
  .product-demo .ml-pieces { gap: 5px; margin-top: 1px; }
  .product-demo .ml-piece { min-height: 31px; gap: 8px; padding: 4px 9px; border-radius: 9px; }
  .product-demo .ml-piece > b { min-width: 9px; font-size: 10px; }
  .product-demo .ml-piece-body { gap: 0; }
  .product-demo .ml-piece-body > strong { font-size: 10px; }
  .product-demo .ml-piece-body > small { gap: 6px; font-size: 8px; }
  .product-demo .ml-piece-body > small svg { width: 9px; height: 9px; }
  .product-demo .ml-piece > svg { width: 11px; height: 11px; }
  .product-demo .ml-note { font-size: 8px; line-height: 1.3; }
  .product-demo .ml-activate-grid { flex: 1; min-height: 0; grid-template-columns: 1fr 1fr; gap: 8px; }
  .product-demo .ml-activate,
  .product-demo .ml-activated { padding: 8px 10px; }
  .product-demo .ml-activate h4,
  .product-demo .ml-activated h4 { gap: 4px; font-size: 10px; }
  .product-demo .ml-activate h4 svg,
  .product-demo .ml-activated h4 svg { width: 12px; height: 12px; }
  .product-demo .ml-muted { margin-top: 2px; font-size: 8px; line-height: 1.5; }
  .product-demo .ml-activate label { margin-top: 4px; font-size: 8px; }
  .product-demo .ml-input { margin-top: 2px; padding: 0 8px; border-radius: 7px; }
  .product-demo .ml-input svg { width: 11px; height: 11px; }
  .product-demo .ml-input input { min-height: 26px; font-size: 10px; }
  .product-demo .ml-primary { min-height: 27px; gap: 4px; margin-top: 5px; font-size: 10px; }
  .product-demo .ml-primary svg { width: 11px; height: 11px; }
  .product-demo .ml-status { margin-top: 4px; font-size: 8px; }
  .product-demo .ml-info { gap: 4px; margin-top: 5px; padding: 5px 7px; border-radius: 7px; font-size: 8px; line-height: 1.45; }
  .product-demo .ml-info svg { width: 10px; height: 10px; margin-top: 1px; }
  .product-demo .ml-activated-row { flex: 1; gap: 6px; padding: 6px 0; }
  .product-demo .ml-activated-row:first-of-type { margin-top: 4px; }
  .product-demo .ml-activated-row strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
  .product-demo .ml-activated-row small { font-size: 8px; }
  .product-demo .ml-activated-row button { min-height: 22px; gap: 3px; padding: 2px 8px; font-size: 8px; }
  .product-demo .ml-activated-row button svg { width: 9px; height: 9px; }
  .product-demo .ml-continue { gap: 2px; padding: 8px 44px 8px 12px; border-radius: 11px; }
  .product-demo .ml-continue strong { font-size: 14px; }
  .product-demo .ml-continue-label { gap: 3px; font-size: 8px; }
  .product-demo .ml-continue-label svg { width: 9px; height: 9px; }
  .product-demo .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { font-size: 8px; }
  .product-demo .ml-continue-arrow { right: 12px; width: 24px; height: 24px; }
  .product-demo .ml-continue-arrow svg { width: 11px; height: 11px; }
  .product-demo .ml-recent { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 6px 10px; }
  .product-demo .ml-recent h4 { flex-shrink: 0; gap: 4px; font-size: 10px; }
  .product-demo .ml-recent h4 svg { width: 12px; height: 12px; }
  .product-demo .ml-recent-row { flex: 1; gap: 7px; min-height: 26px; padding: 2px 0; }
  .product-demo .ml-recent-row:first-of-type { margin-top: 3px; }
  .product-demo .ml-recent-icon { width: 22px; height: 22px; border-radius: 6px; }
  .product-demo .ml-recent-icon svg { width: 12px; height: 12px; }
  .product-demo .ml-recent-body strong { font-size: 9px; }
  .product-demo .ml-recent-body small { font-size: 8px; }
  .product-demo .ml-date { padding: 1px 6px; font-size: 7px; }
  .product-demo .ml-recent-row > svg { width: 10px; height: 10px; }
}


/* Taller desktop frames: scale the redesigned demos so they fill the shell instead of floating in it.
   Density is chosen from the demo frame's own height, so browser zoom and minimum font-size settings
   cannot squeeze a tall layout into a short frame. */
@media (min-width: 901px) {
  @container (min-height: 440px) {
  .product-demo .sa-page { gap: 8px; padding: 12px 16px; }
  .product-demo .sa-head h3 { font-size: 22px; }
  .product-demo .sa-head p { margin-top: 2px; font-size: 11px; }
  .product-demo .sa-hint { gap: 5px; padding: 4px 10px; font-size: 10px; }
  .product-demo .sa-hint svg { width: 11px; height: 11px; }
  .product-demo .sa-filterbar { gap: 7px; padding: 5px; border-radius: 11px; }
  .product-demo .sa-search { height: 32px; padding: 0 11px; border-radius: 8px; gap: 6px; }
  .product-demo .sa-search svg { width: 14px; height: 14px; }
  .product-demo .sa-search input { font-size: 11px; }
  .product-demo .sa-filter { height: 32px; padding: 0 11px; border-radius: 8px; gap: 5px; font-size: 10px; }
  .product-demo .sa-filter svg { width: 13px; height: 13px; }
  .product-demo .sa-filter select { font-size: 10px; }
  .product-demo .sa-caret { font-size: 10px; }
  .product-demo .sa-table { border-radius: 12px; }
  .product-demo .sa-table-head { min-height: 26px; font-size: 9.5px; }
  .product-demo .sa-group-head { min-height: 28px; gap: 6px; font-size: 10.5px; }
  .product-demo .sa-group-head svg { width: 13px; height: 13px; }
  .product-demo .sa-group-head b { padding: 1px 6px; font-size: 9px; }
  .product-demo .sa-row { flex: 1; min-height: 38px; gap: 10px; font-size: 11px; }
  .product-demo .sa-table:has(.sa-row[hidden], .sa-group[hidden]) .sa-row { flex: 0 0 auto; }
  .product-demo .sa-award { min-height: 22px; gap: 4px; padding: 3px 8px; font-size: 9.5px; }
  .product-demo .sa-award svg { width: 11px; height: 11px; }
  .product-demo .sa-empty { font-size: 11px; }

  .product-demo .ml-page { gap: 8px; padding: 12px 16px; }
  .product-demo .ml-head h3 { font-size: 22px; }
  .product-demo .ml-head p { margin-top: 2px; font-size: 11px; }
  .product-demo .ml-actions button { min-height: 29px; gap: 5px; padding: 4px 11px; font-size: 10px; }
  .product-demo .ml-actions svg { width: 13px; height: 13px; }
  .product-demo .ml-card { border-radius: 13px; }
  .product-demo .ml-progress { padding: 9px 13px; }
  .product-demo .ml-card-head h4 { gap: 5px; font-size: 12px; }
  .product-demo .ml-card-head h4 svg { width: 14px; height: 14px; }
  .product-demo .ml-badge { min-height: 22px; padding: 3px 10px; font-size: 10px; }
  .product-demo .ml-stats { gap: 7px; margin-top: 7px; }
  .product-demo .ml-stat { padding: 5px 9px; border-radius: 9px; }
  .product-demo .ml-stat > span { gap: 4px; font-size: 9.5px; }
  .product-demo .ml-stat svg { width: 12px; height: 12px; }
  .product-demo .ml-stat strong { margin-top: 1px; font-size: 16px; }
  .product-demo .ml-stat small { font-size: 9px; }
  .product-demo .ml-progress > .ml-bar { margin-top: 7px; }
  .product-demo .ml-books { gap: 8px; }
  .product-demo .ml-book { gap: 12px; padding: 10px 13px; border-radius: 13px; }
  .product-demo .ml-book-thumb { width: 48px; height: 60px; border-radius: 9px; }
  .product-demo .ml-book-thumb svg { width: 28px; height: 28px; }
  .product-demo .ml-book-body > small { font-size: 9.5px; }
  .product-demo .ml-book-body > strong { font-size: 14px; }
  .product-demo .ml-book-body > span:not(.ml-bar) { font-size: 10px; }
  .product-demo .ml-book-body .ml-bar { margin-top: 4px; }
  .product-demo .ml-book > svg { width: 14px; height: 14px; }
  .product-demo .ml-crumb { gap: 5px; font-size: 10px; }
  .product-demo .ml-crumb button { min-height: 20px; font-size: 10px; }
  .product-demo .ml-detail-head h3 { font-size: 20px; }
  .product-demo .ml-pieces { flex: 1; gap: 6px; margin-top: 2px; }
  .product-demo .ml-piece { flex: 1; max-height: 68px; min-height: 40px; gap: 10px; padding: 6px 11px; border-radius: 10px; }
  .product-demo .ml-piece > b { font-size: 12px; }
  .product-demo .ml-piece-body > strong { font-size: 12px; }
  .product-demo .ml-piece-body > small { gap: 7px; font-size: 9.5px; }
  .product-demo .ml-piece > svg { width: 13px; height: 13px; }
  .product-demo .ml-note { font-size: 9.5px; }
  .product-demo .ml-activate-grid { gap: 10px; }
  .product-demo .ml-activate,
  .product-demo .ml-activated { padding: 12px 14px; }
  .product-demo .ml-activate h4,
  .product-demo .ml-activated h4 { gap: 5px; font-size: 12px; }
  .product-demo .ml-activate h4 svg,
  .product-demo .ml-activated h4 svg { width: 14px; height: 14px; }
  .product-demo .ml-muted { margin-top: 3px; font-size: 10px; }
  .product-demo .ml-activate label { margin-top: 6px; font-size: 10px; }
  .product-demo .ml-input { margin-top: 3px; padding: 0 10px; border-radius: 8px; }
  .product-demo .ml-input svg { width: 13px; height: 13px; }
  .product-demo .ml-input input { min-height: 32px; font-size: 11px; }
  .product-demo .ml-primary { min-height: 34px; gap: 5px; margin-top: 7px; font-size: 11px; }
  .product-demo .ml-primary svg { width: 13px; height: 13px; }
  .product-demo .ml-status { margin-top: 5px; font-size: 10px; }
  .product-demo .ml-info { gap: 5px; margin-top: 7px; padding: 7px 9px; border-radius: 8px; font-size: 9.5px; line-height: 1.55; }
  .product-demo .ml-info svg { width: 12px; height: 12px; }
  .product-demo .ml-activated-row { gap: 8px; padding: 9px 0; }
  .product-demo .ml-activated-row:first-of-type { margin-top: 8px; }
  .product-demo .ml-activated-row strong { font-size: 12px; }
  .product-demo .ml-activated-row small { font-size: 9.5px; }
  .product-demo .ml-activated-row button { min-height: 26px; gap: 3px; padding: 3px 9px; font-size: 9.5px; }
  .product-demo .ml-activated-row button svg { width: 11px; height: 11px; }
  .product-demo .ml-continue { gap: 4px; padding: 11px 50px 11px 15px; border-radius: 14px; }
  .product-demo .ml-continue strong { font-size: 17px; }
  .product-demo .ml-continue-label { gap: 4px; font-size: 9.5px; }
  .product-demo .ml-continue-label svg { width: 11px; height: 11px; }
  .product-demo .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { font-size: 9.5px; }
  .product-demo .ml-continue-arrow { right: 14px; width: 28px; height: 28px; }
  .product-demo .ml-continue-arrow svg { width: 13px; height: 13px; }
  .product-demo .ml-recent { padding: 9px 13px; }
  .product-demo .ml-recent h4 { gap: 5px; font-size: 12px; }
  .product-demo .ml-recent h4 svg { width: 14px; height: 14px; }
  .product-demo .ml-recent-row { gap: 9px; min-height: 38px; padding: 4px 0; }
  .product-demo .ml-recent-row:first-of-type { margin-top: 5px; }
  .product-demo .ml-recent-icon { width: 28px; height: 28px; border-radius: 8px; }
  .product-demo .ml-recent-icon svg { width: 15px; height: 15px; }
  .product-demo .ml-recent-body strong { font-size: 11px; }
  .product-demo .ml-recent-body small { font-size: 9.5px; }
  .product-demo .ml-date { padding: 2px 7px; font-size: 8.5px; }
  .product-demo .ml-recent-row > svg { width: 12px; height: 12px; }
}

  @container (min-height: 560px) {
  .product-demo .sa-page { gap: 10px; padding: 16px 20px; }
  .product-demo .sa-head h3 { font-size: 28px; }
  .product-demo .sa-head p { margin-top: 3px; font-size: 13px; }
  .product-demo .sa-hint { gap: 6px; padding: 5px 12px; font-size: 11px; }
  .product-demo .sa-hint svg { width: 13px; height: 13px; }
  .product-demo .sa-filterbar { gap: 8px; padding: 6px; border-radius: 12px; }
  .product-demo .sa-search { height: 38px; padding: 0 13px; border-radius: 9px; gap: 7px; }
  .product-demo .sa-search svg { width: 16px; height: 16px; }
  .product-demo .sa-search input { font-size: 13px; }
  .product-demo .sa-filter { height: 38px; padding: 0 13px; border-radius: 9px; gap: 6px; font-size: 12px; }
  .product-demo .sa-filter svg { width: 15px; height: 15px; }
  .product-demo .sa-filter select { font-size: 12px; }
  .product-demo .sa-caret { font-size: 12px; }
  .product-demo .sa-table { max-height: 372px; border-radius: 14px; }
  .product-demo .sa-table-head { min-height: 32px; font-size: 11px; }
  .product-demo .sa-group-head { min-height: 36px; gap: 7px; font-size: 12px; }
  .product-demo .sa-group-head svg { width: 15px; height: 15px; }
  .product-demo .sa-group-head b { padding: 1px 7px; font-size: 10px; }
  .product-demo .sa-row { flex: 1; min-height: 48px; gap: 12px; font-size: 13px; }
  .product-demo .sa-award { min-height: 26px; gap: 5px; padding: 4px 10px; font-size: 11px; }
  .product-demo .sa-award svg { width: 13px; height: 13px; }
  .product-demo .sa-empty { font-size: 13px; }

  .product-demo .ml-page { gap: 10px; padding: 18px 22px; }
  .product-demo .ml-head h3 { font-size: 30px; }
  .product-demo .ml-head p { margin-top: 3px; font-size: 13px; }
  .product-demo .ml-actions button { min-height: 34px; gap: 6px; padding: 5px 13px; font-size: 12px; }
  .product-demo .ml-actions svg { width: 15px; height: 15px; }
  .product-demo .ml-card { border-radius: 16px; }
  .product-demo .ml-progress { padding: 14px 18px; }
  .product-demo .ml-card-head h4 { gap: 6px; font-size: 14px; }
  .product-demo .ml-card-head h4 svg { width: 16px; height: 16px; }
  .product-demo .ml-badge { min-height: 28px; padding: 4px 12px; font-size: 11px; }
  .product-demo .ml-stats { gap: 10px; margin-top: 10px; }
  .product-demo .ml-stat { padding: 9px 13px; border-radius: 11px; }
  .product-demo .ml-stat > span { gap: 5px; font-size: 11px; }
  .product-demo .ml-stat svg { width: 14px; height: 14px; }
  .product-demo .ml-stat strong { margin-top: 2px; font-size: 20px; }
  .product-demo .ml-stat small { font-size: 10px; }
  .product-demo .ml-bar { height: 6px; }
  .product-demo .ml-progress > .ml-bar { margin-top: 10px; }
  .product-demo .ml-books { gap: 12px; }
  .product-demo .ml-book { gap: 18px; padding: 16px 18px; border-radius: 16px; }
  .product-demo .ml-book-thumb { width: 68px; height: 86px; border-radius: 13px; }
  .product-demo .ml-book-thumb svg { width: 38px; height: 38px; }
  .product-demo .ml-book-body { gap: 2px; }
  .product-demo .ml-book-body > small { font-size: 12px; }
  .product-demo .ml-book-body > strong { font-size: 20px; }
  .product-demo .ml-book-body > span:not(.ml-bar) { font-size: 12px; }
  .product-demo .ml-book-body .ml-bar { margin-top: 6px; }
  .product-demo .ml-book > svg { width: 20px; height: 20px; }
  .product-demo .ml-crumb { gap: 7px; font-size: 13px; }
  .product-demo .ml-crumb button { min-height: 26px; font-size: 13px; }
  .product-demo .ml-detail-head h3 { font-size: 26px; }
  .product-demo .ml-pieces { flex: 0 1 auto; gap: 8px; margin-top: 4px; }
  .product-demo .ml-piece { flex: 0 0 76px; max-height: 76px; min-height: 54px; gap: 14px; padding: 9px 15px; border-radius: 13px; }
  .product-demo .ml-piece > b { min-width: 12px; font-size: 15px; }
  .product-demo .ml-piece-body { gap: 2px; }
  .product-demo .ml-piece-body > strong { font-size: 15px; }
  .product-demo .ml-piece-body > small { gap: 10px; font-size: 11px; }
  .product-demo .ml-piece-body > small svg { width: 12px; height: 12px; }
  .product-demo .ml-piece > svg { width: 16px; height: 16px; }
  .product-demo .ml-note { font-size: 11px; }
  .product-demo .ml-activate-grid { flex: 0 1 auto; gap: 14px; }
  .product-demo .ml-activate,
  .product-demo .ml-activated { min-height: 300px; padding: 18px 20px; }
  .product-demo .ml-activate h4,
  .product-demo .ml-activated h4 { gap: 6px; font-size: 14px; }
  .product-demo .ml-activate h4 svg,
  .product-demo .ml-activated h4 svg { width: 16px; height: 16px; }
  .product-demo .ml-muted { margin-top: 5px; font-size: 12px; }
  .product-demo .ml-activate label { margin-top: 12px; font-size: 12px; }
  .product-demo .ml-input { margin-top: 4px; padding: 0 13px; border-radius: 10px; }
  .product-demo .ml-input svg { width: 16px; height: 16px; }
  .product-demo .ml-input input { min-height: 40px; font-size: 13px; }
  .product-demo .ml-primary { min-height: 42px; gap: 6px; margin-top: 10px; font-size: 13px; }
  .product-demo .ml-primary svg { width: 16px; height: 16px; }
  .product-demo .ml-status { margin-top: 7px; font-size: 12px; }
  .product-demo .ml-info { gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 11px; line-height: 1.65; }
  .product-demo .ml-info svg { width: 14px; height: 14px; margin-top: 2px; }
  .product-demo .ml-activated-row { gap: 12px; padding: 13px 0; }
  .product-demo .ml-activated-row:first-of-type { margin-top: 12px; }
  .product-demo .ml-activated-row strong { font-size: 14px; }
  .product-demo .ml-activated-row small { font-size: 11px; }
  .product-demo .ml-activated-row button { min-height: 32px; gap: 4px; padding: 4px 12px; font-size: 11px; }
  .product-demo .ml-activated-row button svg { width: 13px; height: 13px; }
  .product-demo .ml-continue { gap: 6px; padding: 15px 60px 15px 20px; border-radius: 16px; }
  .product-demo .ml-continue strong { font-size: 22px; }
  .product-demo .ml-continue-label { gap: 5px; font-size: 11px; }
  .product-demo .ml-continue-label svg { width: 13px; height: 13px; }
  .product-demo .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { font-size: 11px; }
  .product-demo .ml-continue-arrow { right: 18px; width: 34px; height: 34px; }
  .product-demo .ml-continue-arrow svg { width: 16px; height: 16px; }
  .product-demo .ml-recent { padding: 13px 18px; }
  .product-demo .ml-recent h4 { gap: 6px; font-size: 14px; }
  .product-demo .ml-recent h4 svg { width: 16px; height: 16px; }
  .product-demo .ml-recent-row { flex: 1; gap: 12px; min-height: 48px; padding: 6px 0; }
  .product-demo .ml-recent-row:first-of-type { margin-top: 8px; }
  .product-demo .ml-recent-icon { width: 38px; height: 38px; border-radius: 10px; }
  .product-demo .ml-recent-icon svg { width: 19px; height: 19px; }
  .product-demo .ml-recent-body strong { font-size: 14px; }
  .product-demo .ml-recent-body small { font-size: 11px; }
  .product-demo .ml-date { padding: 3px 9px; font-size: 10px; }
  .product-demo .ml-recent-row > svg { width: 15px; height: 15px; }
}

  /* Short desktop frames: the piece list switches to two columns so all four
     rows stay readable once the browser's minimum font size inflates them. */
  @container (max-height: 370px) {
    .product-demo .ml-page { gap: 4px; padding: 5px 12px; }
    .product-demo .ml-pieces { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 4px; }
    .product-demo .ml-piece { min-height: 0; padding: 2px 8px; }
    .product-demo .ml-note { line-height: 1.2; }
  }

  /* Slightly taller but still short frames: one line per record keeps the rows
     from overlapping once the minimum font size inflates the two-line text. */
  @container (max-height: 400px) {
    .product-demo .ml-recent-row { gap: 6px; }
    .product-demo .ml-recent-body { flex-direction: row; align-items: baseline; gap: 6px; }
    .product-demo .ml-recent-body strong { flex: 0 0 auto; }
    .product-demo .ml-recent-body small { flex: 1 1 auto; }
  }

}

#product-demo .preview-bar { min-height: 32px; padding: 6px 14px; font-size: 11px; }
#product-demo .preview-bar small { font-size: 10px; }
#product-demo .concept-preview { --accent: #246451; --soft: #e9f1ec; background: #fcfdfb; font-family: CloudSans, 'Microsoft YaHei', sans-serif; font-size: 12px; }
#product-demo .concept-preview h3 { font-size: clamp(18px,2.8cqi,28px); line-height: 1.4; }
#product-demo .concept-preview h4 { font-size: clamp(13px,1.9cqi,18px); }
#product-demo .concept-preview small { font-size: 10px; }
#product-demo .concept-preview button { min-height: 32px; font-size: 12px; }
#product-demo .concept-preview svg { width: 16px; height: 16px; }
#product-demo .px-primary, #product-demo .px-secondary { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 7px; white-space: nowrap; }
#product-demo .px-primary { background: var(--accent); color: #fff; }
#product-demo .px-secondary { background: #fff; border: 1px solid #d7e1d9; color: var(--accent); }
#product-demo .px-primary:hover { background: #194d3d; }
.px-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.px-eyebrow { display: block; margin-bottom: 6px; font: 9px/1.5 CloudSans,sans-serif; letter-spacing: .13em; color: #7c9185; }
.px-status { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 5px; background: #e8f1ea; color: #36705a; font-size: 10px; white-space: nowrap; }
.px-status::before { content: ''; width: 5px; height: 5px; background: #4e9b6f; border-radius: 50%; }
.px-footnote { flex: 0 0 auto; padding: 6px 14px; border-top: 1px solid #e6ebe6; color: #7b8980; font-size: 10px; background: #fff; }
.ac-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 132px minmax(0,1fr); }
.ac-sidebar { display: flex; flex-direction: column; gap: 22px; padding: 20px 10px 12px; background: #f0f4ef; border-right: 1px solid #e1e8df; }
.ac-brand { display: flex; align-items: center; gap: 7px; padding: 0 6px; color: #285b46; }
.ac-sidebar nav { display: grid; gap: 7px; }
#product-demo .ac-sidebar nav button { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 7px; text-align: left; color: #778277; }
#product-demo .ac-sidebar nav [aria-pressed="true"] { color: #24593e; background: #dfe9dd; font-weight: 700; }
.ac-account { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 12px 5px 0; border-top: 1px solid #dae4d8; }
.ac-account > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #d5e0ce; color: #4b6740; }
.ac-account strong, .ac-account small { display: block; }
.ac-account small { color: #83907c; }
.ac-main { display: flex; flex-direction: column; gap: clamp(8px,2.6cqh,20px); min-height: 0; padding: clamp(12px,3.5cqh,26px) clamp(14px,3cqi,30px); overflow: auto; }
.ac-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ac-toolbar > span { font-size: 10px; color: #7e8a81; }
.px-segment { display: flex; gap: 3px; padding: 3px; border: 1px solid #e1e7de; border-radius: 7px; background: #f5f7f3; }
#product-demo .px-segment button { padding: 3px 16px; min-height: 26px; border-radius: 5px; color: #7d877b; }
#product-demo .px-segment [aria-pressed="true"] { background: #fff; color: #245d44; box-shadow: 0 1px 4px #123c1812; }
#product-demo #booking-courses { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: min-content; }
.ac-course { display: flex; align-items: center; gap: 14px; flex: 1; max-height: 150px; min-height: 80px; padding: clamp(10px,2.2cqh,18px); border: 1px solid #e0e7de; border-radius: 10px; background: #fff; }
.ac-course-icon { display: grid; place-items: center; flex: 0 0 44px; height: 50px; border-radius: 8px; color: #407959; background: #edf2e8; }
#product-demo .ac-course-icon svg { width: 24px; height: 24px; }
.ac-course:nth-child(2) .ac-course-icon { background: #f7efdf; color: #ac8546; }
.ac-course-copy { flex: 1; min-width: 0; }
.ac-tag { display: inline-block; color: #5b8267; font-size: 10px; }
.ac-course-copy h4 { margin-top: 3px; }
.ac-course-copy p { color: #889084; font-size: 11px; margin-top: 5px; }
.ac-rule { display: flex; align-items: center; flex-shrink: 0; gap: 9px; color: #7a897d; font-size: 10px; }
.ac-rule p { flex: 1; }
#product-demo .ac-rule button { display: flex; align-items: center; gap: 5px; margin-left: auto; min-height: 24px; font-size: 10px; color: #346f4e; white-space: nowrap; }
.ac-schedule { display: flex; flex: 1; align-items: center; gap: 18px; padding: 20px; background: #f1f5ed; border: 1px solid #dce7d7; border-radius: 10px; }
.ac-date-tile { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 7px; padding: 15px; background: #fff; border-radius: 8px; color: #57734a; }
.ac-date-tile strong { font: 25px Georgia,serif; }
.ac-date-tile span { font-size: 10px; }
.ac-schedule h4 { margin: 6px 0; }
.ac-schedule p { margin-top: 7px; font-size: 11px; color: #70816a; }
.ac-lesson-actions { display: grid; gap: 8px; margin-left: auto; flex-shrink: 0; }
.ac-notice { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 20px; border: 1px dashed #d6e1d2; border-radius: 10px; }
#product-demo .ac-notice > svg { width: 32px; height: 32px; color: #6f9760; }
.ac-notice p { color: #7b8875; max-width: 330px; line-height: 1.8; }

#product-demo .studio-preview { --accent: #8f4b35; background: #fbf8f0; color: #35382d; }
.studio-nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-shrink: 0; padding: 12px 22px; border-bottom: 1px solid #e8e3d8; }
.studio-brand { display: flex; align-items: center; gap: 8px; }
#product-demo .studio-brand > svg { width: 24px; height: 24px; color: #8f4b35; }
.studio-brand strong { font-size: 13px; }
#product-demo .studio-brand small { display: block; font: 7px/1.5 Georgia,serif; letter-spacing: .08em; color: #8d8b7e; margin-top: 3px; }
.studio-nav nav { display: flex; gap: 16px; }
#product-demo .studio-nav nav button { min-height: 28px; padding: 0; color: #969688; font-size: 11px; border-bottom: 1px solid transparent; }
#product-demo .studio-nav nav [aria-pressed="true"] { color: #8f4b35; border-color: #8f4b35; }
#product-demo .studio-login { display: flex; gap: 5px; align-items: center; font-size: 10px; }
.studio-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: clamp(12px,3cqh,26px) 22px; overflow: auto; }
.studio-hero { display: grid; grid-template-columns: 1fr .9fr; gap: 26px; flex: 1; min-height: 0; }
.studio-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: clamp(10px,3cqh,23px); }
.studio-kicker, .studio-section-head > span { color: #9a8168; font: 9px/1.5 Georgia,serif; letter-spacing: .12em; }
#product-demo .studio-copy h3 { font-size: clamp(20px,3.2cqi,36px); line-height: 1.6; letter-spacing: -.03em; font-weight: 400; }
.studio-copy p { color: #969384; font-size: 11px; line-height: 1.9; }
#product-demo .studio-cta { display: inline-flex; gap: 18px; align-items: center; border-radius: 3px; background: #8f4b35; color: #fff7e9; padding: 9px 16px; }
#product-demo .studio-cta:hover { background: #713722; }
.studio-art { position: relative; overflow: hidden; min-height: 175px; border-radius: 65px 4px 4px 4px; background: #dfdfcc; isolation: isolate; }
.studio-art::before { content: ''; position: absolute; width: 140%; height: 150%; top: -40%; left: -70%; background: repeating-linear-gradient(100deg,transparent 0 30px,#fdf6de80 30px 54px); transform: rotate(-16deg); z-index: -1; }
.studio-art[data-scene="1"] { background: #ddd0ba; }
.studio-art-caption { position: absolute; top: 14px; right: 16px; font-size: 9px; color: #7d806d; }
.studio-art-word { position: absolute; right: 8%; top: 18%; font: italic clamp(25px,4.8cqi,58px)/.93 Georgia,serif; letter-spacing: -.05em; color: #526147; }
.studio-piano { position: absolute; left: 7%; bottom: 17%; width: 72%; height: 44%; padding: 15px 9px 10px; border-radius: 8px; background: #383c32; box-shadow: 12px 16px 0 #373b3220; transform: rotate(-12deg); }
.studio-piano > span { display: block; text-align: center; font: 7px Georgia,serif; color: #c8b69c; letter-spacing: .18em; margin-bottom: 10px; }
.studio-piano > div { display: flex; height: calc(100% - 20px); gap: 2px; }
.studio-piano i { position: relative; flex: 1; background: #f9f5e7; border-radius: 0 0 2px 2px; }
.studio-piano .has-black::after { content: ''; position: absolute; z-index: 1; width: 65%; height: 62%; right: -38%; top: 0; background: #292e27; border-bottom: 3px solid #171c16; border-radius: 0 0 2px 2px; }
.studio-scenes { position: absolute; bottom: 8px; left: 12px; right: 12px; display: flex; justify-content: flex-end; gap: 10px; }
#product-demo .studio-scenes button { font-size: 9px; padding: 3px 6px; min-height: 26px; color: #848672; }
#product-demo .studio-scenes [aria-pressed="true"] { color: #3d5039; border-bottom: 1px solid currentColor; }
.studio-footer { display: flex; align-items: center; gap: 15px; justify-content: space-between; flex-shrink: 0; border-top: 1px solid #e8e3d8; padding: 5px 22px; color: #999583; font-size: 9px; }
#product-demo .studio-footer button { display: flex; gap: 6px; align-items: center; min-height: 28px; font-size: 10px; color: #737460; padding: 0; }
#product-demo .studio-footer small { font-size: 8px; }
.studio-section-head { margin-bottom: clamp(12px,3cqh,24px); }
.studio-section-head h3 { margin: 8px 0 !important; }
.studio-section-head p { color: #969384; font-size: 11px; }
.studio-course-list { display: flex; flex-direction: column; justify-content: center; flex: 1; }
#product-demo .studio-course-list button { display: flex; gap: 18px; align-items: center; flex: 1; min-height: 50px; max-height: 90px; padding: 10px 0; border-top: 1px solid #e6dfd1; text-align: left; }
.studio-course-number { font: italic 23px Georgia,serif; color: #b3916d; }
.studio-course-list strong, .studio-course-list small { display: block; }
.studio-course-list small { margin-top: 4px; color: #a49b89; }
.studio-course-list svg { margin-left: auto; color: #8f4b35; }
.studio-teachers { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex: 1; min-height: 0; }
#product-demo .studio-teachers button { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e5dfcf; border-radius: 4px; text-align: left; }
.studio-portrait { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; align-self: stretch; flex: 0 0 34%; background: #e5e2d1; color: #747d60; border-radius: 40px 40px 0 0; min-height: 60px; }
#product-demo .studio-portrait svg { width: 28px; height: 28px; }
.studio-teachers strong, .studio-teachers small { display: block; }
.studio-teachers small { margin-top: 5px; color: #a39882; }
.studio-teachers button > svg { margin-left: auto; }
.studio-event { display: grid; grid-template-columns: .8fr 1fr; gap: 30px; align-items: center; flex: 1; min-height: 0; }
.studio-event-art { position: relative; display: flex; align-items: center; align-self: stretch; padding: 25px; background: #9c5038; color: #efdfb8; overflow: hidden; }
.studio-event-art > span { font: clamp(30px,5cqi,64px)/1 Georgia,serif; letter-spacing: -.04em; }
#product-demo .studio-event-art > svg { position: absolute; bottom: 10px; right: 10px; height: 100px; width: 100px; opacity: .2; transform: rotate(-15deg); }
.studio-event h3 { margin: 10px 0 12px !important; }
.studio-event p { color: #928777; font-size: 11px; margin: 8px 0 16px; line-height: 1.8; }

#product-demo .agent-preview { --accent: #345b50; background: #fff; }
.agent-workspace { display: grid; grid-template-columns: 164px minmax(0,1fr); grid-template-rows: minmax(0,1fr); flex: 1; min-height: 0; }
.agent-sidebar { display: flex; flex-direction: column; min-height: 0; gap: 6px; padding: 10px 12px 8px; border-right: 1px solid #e0e6e0; background: #f2f5f0; }
.agent-brand { display: flex; gap: 8px; align-items: center; }
.agent-brand > span { display: grid; place-items: center; width: 30px; height: 32px; background: #334f42; color: #e1eabc; border-radius: 8px; font: italic 25px Georgia,serif; }
.agent-brand strong { font-size: 12px; }
.agent-brand small { display: block; margin-top: 3px; color: #96a08e; font-weight: 400; }
.agent-section-label { display: block; padding-left: 5px; font-size: 9px; color: #959f90; }
.agent-sidebar > .agent-section-label { display: none; }
.agent-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
#product-demo .agent-sidebar nav button { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; text-align: left; color: #85917b; }
#product-demo .agent-sidebar nav [aria-pressed="true"] { background: #e1e9da; color: #38563d; }
.agent-sidebar nav i { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: #a4b09b; }
.agent-sidebar nav [aria-pressed="true"] i { background: #577d48; }
.agent-knowledge { border-top: 1px solid #e0e5d9; padding-top: 12px; margin-top: auto; }
#product-demo .agent-knowledge button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px; min-height: 28px; color: #76856b; font-size: 10px; text-align: left; }
#product-demo .agent-handoff { display: flex; align-items: center; gap: 6px; padding: 8px 5px; border-top: 1px solid #dfe5d7; color: #6e7f63; font-size: 11px; }
.agent-handoff svg:last-child { margin-left: auto; }
.agent-chat { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; padding: 0 clamp(14px,1.8vw,30px) 10px; }
.agent-chat-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ecf0e8; }
.agent-chat-head > div { display: flex; gap: 7px; align-items: center; }
.agent-chat-head small { color: #9ba491; }
.agent-online { width: 5px; height: 5px; background: #6f9662; border-radius: 50%; }
#product-demo .agent-chat-head button { display: flex; gap: 5px; align-items: center; min-height: 26px; padding: 2px 0; font-size: 10px; color: #88957b; }
.agent-messages { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 0; }
.agent-welcome { margin: auto 0; padding: 10px 0; }
#product-demo .agent-welcome h3 { font-size: clamp(17px,1.7vw,25px); font-weight: 400; }
.agent-welcome p { font-size: 11px; color: #839079; margin-top: 10px; }
.agent-welcome > span:last-child { display: block; margin-top: 15px; font-size: 10px; color: #a4ae9b; }
.agent-questions { display: flex; flex-wrap: wrap; gap: 6px; flex-shrink: 0; }
#product-demo .agent-questions button { min-height: 26px; padding: 5px 8px; border-radius: 5px; border: 1px solid #e1e7da; font-size: 10px; color: #77876a; }
#product-demo .agent-questions button:hover { background: #eef3e8; }
.agent-composer { display: flex; gap: 10px; flex-shrink: 0; border: 1px solid #ccd8c3; border-radius: 8px; padding: 5px; background: #fafcf7; }
.agent-composer:focus-within { border-color: #4d7855; box-shadow: 0 0 0 2px #4d785514; }
.agent-composer input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 5px 8px; font-size: 12px; color: #38523a; }
#product-demo .agent-composer input:focus { outline: 0; }
#product-demo .agent-composer button { display: grid; place-items: center; width: 32px; min-height: 32px; border-radius: 5px; background: #385943; color: #fff; }
.agent-disclaimer { flex-shrink: 0; color: #a3ab9a; font-size: 9px; text-align: center; }
.agent-message { flex-shrink: 0; max-width: 96%; padding: 12px 14px; border-radius: 9px; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.agent-message.is-user { align-self: flex-end; background: #345443; color: #fff; border-bottom-right-radius: 2px; }
.agent-message.is-assistant { align-self: flex-start; background: #f2f5ec; color: #5d6e53; border-top-left-radius: 2px; }
#product-demo .agent-source { display: block; margin-top: 10px; padding: 3px 7px; min-height: 24px; font-size: 10px; border: 1px solid #d8e3ce; border-radius: 4px; color: #7f8c6f; }
#product-demo .agent-next { display: block; margin-top: 8px; padding: 4px 0; min-height: 26px; color: #3e6538; font-size: 11px; }
.concept-dialog { border-radius: 12px; --preview-focus: #246451; }
.concept-dialog .bk-primary, .concept-dialog .ms-book { background: #246451; border-radius: 7px; box-shadow: none; }
.concept-dialog .bk-primary:disabled { background: #cbd6ce; }
.concept-dialog .bk-secondary { border-radius: 7px; }
.concept-dialog .bk-steps > .active { color: #246451; }
.concept-dialog .bk-steps > .active b, .concept-dialog .bk-pick-teacher[aria-pressed="true"] { border-color: #246451; }
.concept-dialog .bk-cal-grid button { min-height: 32px; aspect-ratio: auto; }
.concept-dialog .bk-cal-grid [aria-pressed="true"], .concept-dialog .bk-slots button[aria-pressed="true"] { background: #246451; border-color: #246451; }

@media (min-width:901px) {
  #product-demo .sa-page, #product-demo .ml-page { height: 100%; min-height: 0; padding: clamp(8px,2.4cqh,20px) clamp(12px,2.5cqi,24px); gap: clamp(6px,1.8cqh,14px); overflow: auto; }
  #product-demo .sa-head h3, #product-demo .ml-head h3 { font-size: clamp(20px,4.5cqh,28px); }
  #product-demo .sa-head p, #product-demo .ml-head p { font-size: 11px; line-height: 1.5; margin-top: 3px; }
  #product-demo .sa-hint { font-size: 10px; padding: 5px 9px; }
  #product-demo .sa-filterbar { padding: 4px; gap: 8px; flex-shrink: 0; }
  #product-demo .sa-search, #product-demo .sa-filter { height: clamp(28px,7cqh,38px); }
  #product-demo .sa-search input, #product-demo .sa-filter select { font-size: 12px; }
  #product-demo .sa-table { flex: 1; min-height: min-content; max-height: none; }
  #product-demo .sa-table-head, #product-demo .sa-row { grid-template-columns: minmax(62px,.8fr) minmax(98px,1.1fr) minmax(100px,1.1fr) 92px; gap: 8px; padding-inline: 14px; }
  #product-demo .sa-table-head { min-height: 24px; flex-shrink: 0; font-size: 11px; }
  #product-demo .sa-group { display: flex; flex-direction: column; flex: 1; }
  #product-demo .sa-group:last-of-type { flex: 2.5; }
  #product-demo .sa-group-head { min-height: clamp(22px,5.5cqh,32px); flex-shrink: 0; font-size: 11px; padding-inline: 14px; }
  #product-demo .sa-group-head b { font-size: 10px; }
  #product-demo .sa-row { flex: 1; min-height: clamp(28px,7cqh,48px); font-size: 12px; }
  #product-demo .sa-award { min-height: 25px; font-size: 11px; padding: 4px 8px; }
  #product-demo .sa-table:has(.sa-group[hidden],.sa-row[hidden]) .sa-group { flex: 0; }
  #product-demo .sa-empty { font-size: 12px; }
  #product-demo .ml-actions button { min-height: 30px; font-size: 11px; padding: 5px 10px; }
  #product-demo .ml-progress { flex-shrink: 0; padding: clamp(8px,2cqh,16px) 14px; }
  #product-demo .ml-card-head h4, #product-demo .ml-recent h4, #product-demo .ml-activate h4, #product-demo .ml-activated h4 { font-size: 12px; }
  #product-demo .ml-stats { margin-top: 6px; }
  #product-demo .ml-stat { padding: clamp(4px,1.2cqh,10px) 10px; }
  #product-demo .ml-stat > span, #product-demo .ml-stat small { font-size: 11px; }
  #product-demo .ml-stat strong { font-size: clamp(16px,3.5cqh,23px); }
  #product-demo .ml-books { flex: 1; grid-template-rows: repeat(2,minmax(62px,1fr)); gap: 8px; }
  #product-demo .ml-book { padding: 8px 14px; gap: 12px; }
  #product-demo .ml-book-thumb { width: clamp(36px,7cqh,56px); height: clamp(42px,9cqh,72px); }
  #product-demo .ml-book-body > strong { font-size: clamp(13px,3cqh,18px); }
  #product-demo .ml-book-body > small, #product-demo .ml-book-body > span:not(.ml-bar) { font-size: 11px; }
  #product-demo .ml-bar { flex-shrink: 0; height: 4px; }
  #product-demo .ml-crumb, #product-demo .ml-crumb button { font-size: 11px; }
  #product-demo .ml-pieces { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 6px; }
  #product-demo .ml-piece { flex: 1; min-height: 39px; max-height: 86px; padding: 5px 12px; }
  #product-demo .ml-piece-body > strong { font-size: 13px; }
  #product-demo .ml-piece-body > small { font-size: 10px; }
  #product-demo .ml-note { font-size: 10px; }
  #product-demo .ml-activate-grid { flex: 1; min-height: 0; }
  #product-demo .ml-activate, #product-demo .ml-activated { min-height: 0; padding: clamp(10px,2.6cqh,20px); }
  #product-demo .ml-muted, #product-demo .ml-activate label, #product-demo .ml-info, #product-demo .ml-activated-row small, #product-demo .ml-status { font-size: 11px; line-height: 1.5; }
  #product-demo .ml-input input { min-height: 32px; font-size: 12px; }
  #product-demo .ml-primary { min-height: 32px; font-size: 12px; }
  #product-demo .ml-activated-row strong { font-size: 12px; }
  #product-demo .ml-activated-row button { font-size: 11px; min-height: 28px; }
  #product-demo .ml-continue { flex-shrink: 0; padding: 10px 45px 10px 14px; gap: 3px; }
  #product-demo .ml-continue strong { font-size: clamp(15px,3.5cqh,22px); }
  #product-demo .ml-continue-label, #product-demo .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { font-size: 10px; }
  #product-demo .ml-recent { flex: 1; min-height: 0; padding: 8px 14px; }
  #product-demo .ml-recent-row { flex: 1; min-height: 38px; padding: 4px 0; gap: 9px; }
  #product-demo .ml-recent-body { flex-direction: column; gap: 1px; }
  #product-demo .ml-recent-body strong { font-size: 12px; line-height: 1.5; }
  #product-demo .ml-recent-body small { font-size: 10px; line-height: 1.5; }
  #product-demo .ml-date { font-size: 10px; }
  @container (max-height:400px) {
    #product-demo .sa-head p, #product-demo .sa-hint { display: none; }
    #product-demo .sa-table-head { min-height: 20px; }
    #product-demo .sa-group-head { min-height: 22px; }
    #product-demo .sa-row { min-height: 28px; }
    #product-demo .ml-head h3 { font-size: 18px; }
    #product-demo .ml-head p { font-size: 10px; }
    #product-demo .ml-book-body > small { display: none; }
    #product-demo .ml-books { grid-template-rows: repeat(2,minmax(54px,1fr)); }
    #product-demo .ml-book { padding: 5px 12px; }
    #product-demo .ml-pieces { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
    #product-demo .ml-piece { min-height: 43px; }
    #product-demo .ml-continue { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; padding: 7px 42px 7px 12px; }
    #product-demo .ml-continue > span:not(.ml-continue-label):not(.ml-continue-arrow) { grid-column: 1 / -1; }
    #product-demo .ml-recent-row { min-height: 29px; padding: 3px 0; }
    #product-demo .ml-recent-body { flex-direction: row; align-items: baseline; gap: 8px; }
    #product-demo .ml-recent-body small { font-size: 10px; }
    #product-demo .ml-activate .ml-info { margin-top: 6px; padding: 5px; font-size: 10px; }
    #product-demo .ml-activate-grid .ml-muted { font-size: 10px; }
    #product-demo .ml-head:has(+ .ml-activate-grid) p { max-width: 320px; }
  }
}
@container (max-height:480px) and (min-width:551px) {
  .ac-sidebar { padding-top: 14px; gap: 16px; }
  .ac-main { gap: 8px; padding: 12px 16px; }
  .ac-course { min-height: 67px; padding: 9px 12px; }
  .ac-course .ac-tag { display: none; }
  .ac-course-icon { height: 40px; flex-basis: 36px; }
  .ac-course-copy p { margin-top: 2px; }
  .px-eyebrow { margin-bottom: 2px; font-size: 8px; }
  .ac-rule { font-size: 9px; }
  .ac-schedule { padding: 12px; gap: 12px; }
  .studio-nav { padding: 8px 18px; }
  .studio-body { padding: 12px 18px; }
  .studio-copy { gap: 10px; }
  #product-demo .studio-copy h3 { font-size: 24px; line-height: 1.5; }
  .studio-copy p { font-size: 10px; }
  .studio-section-head { margin-bottom: 8px; }
  .studio-section-head h3 { margin: 4px 0 !important; }
  .studio-body:has(.studio-course-list) .studio-section-head p { display: none; }
  #product-demo .studio-course-list button { padding-block: 6px; }
  .agent-sidebar { gap: 8px; padding-top: 12px; }
  .agent-sidebar > .agent-section-label { display: none; }
  .agent-brand { margin-bottom: 0; }
  .agent-knowledge { padding-top: 6px; }
  .agent-chat { gap: 6px; padding-bottom: 6px; }
  .agent-chat-head { padding: 7px 0; }
  .agent-welcome > span:last-child { margin-top: 8px; }
  .agent-message { padding: 8px 12px; font-size: 11px; }
}
@container (max-height:370px) and (min-width:551px) {
  .ac-main { gap: 6px; padding-block: 8px; }
  .ac-main .px-eyebrow, .ac-course .ac-tag { display: none; }
  #product-demo .ac-main h3 { font-size: 18px; }
  #product-demo #booking-courses { gap: 8px; }
  .ac-course { min-height: 56px; padding: 6px 10px; }
  .ac-course-copy h4 { margin-top: 0; }
  .ac-course-copy p { margin-top: 2px; }
  .ac-notice { gap: 8px; padding: 10px; }
  .ac-notice p { line-height: 1.6; }
  #product-demo .ac-notice > svg { width: 22px; height: 22px; }
  .studio-body { padding-block: 8px; }
  .studio-kicker { display: none; }
  .studio-copy { gap: 8px; }
  #product-demo .studio-copy h3 { font-size: 22px; line-height: 1.4; }
  .studio-art { min-height: 130px; }
  .studio-section-head { margin-bottom: 6px; }
  .studio-section-head > span { display: none; }
  #product-demo .studio-section-head h3 { font-size: 20px; }
  .studio-course-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; min-height: 0; }
  #product-demo .studio-course-list button { position: relative; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 0; max-height: none; padding: 8px 10px; border: 1px solid #e6dfd1; }
  .studio-course-list svg { position: absolute; top: 12px; right: 10px; }
  #product-demo .studio-course-list strong { font-size: 11px; }
  #product-demo .studio-event h3 { font-size: 20px; line-height: 1.4; margin: 0 0 8px !important; }
  .studio-event p { display: none; }
  .studio-event .studio-cta { margin-top: 12px; }
}
@media (min-width:901px) {
  @container (max-height:370px) {
    #product-demo .sa-row { min-height: 26px; }
    #product-demo .ml-book-body { gap: 2px; }
    #product-demo .ml-progress { padding-block: 6px; }
    #product-demo .ml-page:has(.ml-recent) { gap: 4px; }
    #product-demo .ml-recent { padding-block: 5px; }
    #product-demo .ml-recent-row { padding-block: 2px; }
    #product-demo .ml-recent-icon { width: 26px; height: 26px; }
    #product-demo .ml-activated-row { padding-block: 6px; }
    #product-demo .ml-activate .ml-info { padding: 3px; }
  }
}
@container (max-width:650px) {
  .ac-workspace { grid-template-columns: 108px minmax(0,1fr); }
  .ac-sidebar { padding-inline: 6px; }
  .ac-brand { font-size: 11px; }
  #product-demo .ac-sidebar nav button { padding-inline: 8px; font-size: 11px; }
  .ac-course-icon { display: none; }
  .ac-toolbar > span { font-size: 9px; }
  .ac-rule > svg { display: none; }
  .ac-date-tile { padding: 10px; }
  .ac-schedule { flex-wrap: wrap; }
  .ac-lesson-actions { display: flex; }
  .studio-nav { gap: 10px; padding-inline: 14px; }
  .studio-nav nav { gap: 10px; }
  .studio-body { padding-inline: 14px; }
  .studio-hero { gap: 16px; }
  .studio-footer { padding-inline: 14px; }
  .studio-footer small { display: none; }
  .studio-teachers { gap: 10px; }
  #product-demo .studio-teachers button { padding: 10px; gap: 9px; }
  .agent-workspace { grid-template-columns: 136px minmax(0,1fr); }
  .agent-sidebar { padding-inline: 9px; }
  .agent-brand > span { width: 26px; flex-shrink: 0; }
  .agent-brand strong { font-size: 11px; }
  #product-demo .agent-brand small { font-size: 9px; }
}
@media (max-width:900px) {
  #product-demo .sa-page, #product-demo .ml-page { min-height: 0; }
  #product-demo .ml-activate-grid { grid-template-columns: minmax(0,1fr); }
  #product-demo .ml-activate, #product-demo .ml-activated { min-width: 0; padding: 12px; }
  #product-demo .ml-head:has(+ .ml-activate-grid) { gap: 8px; }
  #product-demo .ml-head:has(+ .ml-activate-grid) p { display: none; }
  #product-demo .ml-page:has(.ml-activate-grid) { padding-block: 12px; }
  #product-demo .ml-activate .ml-info { margin-top: 8px; padding: 8px; }
  #product-demo .ml-activated-row { padding: 8px 0; }
  #product-demo .concept-preview button { min-height: 44px; }
  #product-demo .agent-questions button { min-height: 34px; }
}
@container (max-width:550px) {
  .ac-workspace { display: flex; flex-direction: column; }
  .ac-sidebar { flex-direction: row; align-items: center; gap: 6px; padding: 6px 10px; border-right: 0; border-bottom: 1px solid #e1e8df; }
  .ac-brand, .ac-account { display: none; }
  .ac-sidebar nav { display: flex; width: 100%; gap: 5px; }
  #product-demo .ac-sidebar nav button { flex: 1; justify-content: center; padding: 7px 4px; }
  .ac-main { flex: 1; gap: 16px; padding: 18px 14px; }
  .ac-toolbar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .ac-courses { gap: 12px; }
  .ac-course { min-height: 98px; padding: 14px 12px; }
  .ac-course-copy p { max-width: 150px; }
  .ac-rule { align-items: flex-start; }
  .ac-rule button { flex-shrink: 0; }
  .ac-schedule { flex: 0 1 auto; padding: 15px; }
  .studio-nav { flex-wrap: wrap; padding: 10px 14px 4px; gap: 4px 12px; }
  .studio-nav nav { order: 3; justify-content: space-between; width: 100%; }
  #product-demo .studio-nav nav button { min-height: 36px; flex: 1; }
  .studio-login { margin-left: auto; }
  .studio-body { padding: 16px; }
  .studio-hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(150px,1fr); gap: 16px; }
  .studio-copy { gap: 10px; }
  #product-demo .studio-copy h3 { font-size: 23px; line-height: 1.45; }
  .studio-copy p { font-size: 11px; }
  .studio-art { min-height: 150px; border-top-left-radius: 45px; }
  .studio-art-word { font-size: 38px; top: 20%; }
  .studio-piano { width: 57%; height: 58%; left: 9%; bottom: 13%; }
  .studio-footer { flex-wrap: wrap; gap: 2px 10px; padding: 4px 14px; }
  .studio-footer > span { font-size: 8px; }
  #product-demo .studio-footer button { min-height: 30px; }
  .studio-teachers { grid-template-columns: 1fr; }
  #product-demo .studio-teachers button { min-height: 110px; }
  .studio-portrait { flex-basis: 65px; }
  .studio-event { grid-template-columns: 1fr; grid-template-rows: minmax(100px,1fr) auto; gap: 16px; }
  .studio-event-art { padding: 20px; }
  .studio-event-art > span { font-size: 35px; }
  .studio-event-art > span br { display: none; }
}
@media (max-width:900px), (min-width:901px) and (min-height:680px) and (max-height:800px) {
  .agent-workspace { display: flex; flex-direction: column; }
  .agent-sidebar { flex-direction: row; flex-wrap: wrap; flex-shrink: 0; align-items: center; gap: 4px 8px; padding: 5px 10px; border-right: 0; border-bottom: 1px solid #e0e6e0; }
  .agent-brand, .agent-sidebar > .agent-section-label { display: none; }
  .agent-knowledge { display: flex; gap: 6px; order: 1; width: 100%; padding-top: 4px; margin-top: 0; }
  .agent-knowledge > .agent-section-label { display: none; }
  #product-demo .agent-knowledge button { justify-content: center; flex: 1; width: auto; min-height: 26px; padding: 3px 0; }
  .agent-sidebar nav { flex-direction: row; flex: 1; margin: 0; gap: 3px; }
  #product-demo .agent-sidebar nav button { flex: 1; justify-content: center; gap: 0; font-size: 10px; padding: 4px 6px; min-height: 30px; }
  .agent-sidebar nav svg, .agent-sidebar nav i { display: none; }
  #product-demo .agent-handoff { padding: 3px; font-size: 10px; min-height: 30px; border: 0; }
  .agent-handoff svg { display: none; }
  .agent-chat { flex: 1; padding-inline: 12px; gap: 7px; }
  .agent-chat-head { padding: 5px 0; }
  #product-demo .agent-chat-head button { min-height: 28px; }
  #product-demo .agent-welcome h3 { font-size: 17px; }
  .agent-welcome p, .agent-welcome > span:last-child { display: none; }
  .agent-welcome { padding: 2px 0; }
  .agent-chat:has(.agent-message) .agent-questions { display: none; }
  #product-demo .agent-questions button { font-size: 9px; min-height: 26px; padding: 3px 5px; }
  .agent-composer input { font-size: 16px; padding-inline: 4px; }
  #product-demo .agent-composer button { min-height: 32px; }
  .agent-disclaimer { font-size: 8px; }
  .agent-message { padding: 8px 10px; font-size: 11px; }
}
@media (min-width:901px) and (min-height:680px) and (max-height:800px) {
  .agent-messages, .agent-welcome { padding-block: 0; }
  .agent-chat { gap: 4px; }
  .agent-chat-head { padding-block: 0; }
}
@media (max-width:900px) {
  .agent-chat { gap: 12px; padding-inline: 14px; padding-bottom: 12px; }
  #product-demo .agent-welcome h3 { font-size: 21px; }
  .agent-welcome p, .agent-welcome > span:last-child { display: block; font-size: 12px; line-height: 1.7; }
  .agent-questions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #product-demo .agent-questions button { min-height: 44px; font-size: 11px; }
  #product-demo .agent-sidebar nav button, #product-demo .agent-handoff, #product-demo .agent-knowledge button { min-height: 40px; font-size: 11px; }
  .agent-disclaimer { font-size: 10px; }
}