/* Selected direction C: open educational editorial rhythm, brand assets unchanged. */
:root{--editorial-serif:"Songti SC","SimSun","Noto Serif CJK SC",serif}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif}
.hero-copy h1,.detail-page h1,#main>.section h2,.section .wrap>h2{font-family:var(--editorial-serif);font-weight:600;letter-spacing:-.04em;line-height:1.35;text-wrap:balance}
.hero-copy h1{font-size:clamp(34px,3.8vw,54px)}
.detail-page h1,.detail-page #interfaces h1{font-size:44px;line-height:1.4;letter-spacing:-.035em}
.section h2{font-family:var(--editorial-serif);font-weight:600}
.header nav a{min-height:44px;display:flex;align-items:center}
.header{border-bottom:1px solid #dce5f2}
.button{border-radius:3px}
.button:active{transform:translateY(1px)}
.section-label{font-weight:500;font-size:13px;letter-spacing:.02em}
.features,.about-section,.ai-section{background:#fff}
.features>.wrap{border-top:1px solid #bccbdf;padding-top:42px}
.features{padding-top:25px}
.roles{margin-top:38px}
.roles article{border-right:0;border-top:0;padding-top:23px}
.roles article:first-child,.roles article:last-child{padding-top:23px}
.roles h3{font-size:22px}
.role-icon{display:block;width:35px;height:35px;margin-bottom:18px;fill:none;stroke:#0056ec;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.features-grid .feature-icon,.features-grid .feature-row svg{width:34px;height:34px;margin-bottom:16px}
.features-grid h3{font-size:21px}
.feature-structure{margin:0;padding:10px 0 26px;border-bottom:1px solid #cfdef0;display:flex;flex-direction:column;justify-content:center}
.structure-school{display:flex;align-items:center;justify-content:center;gap:12px;color:#0056ec;font-size:20px;margin-bottom:29px;position:relative}
.structure-school:after{content:"";position:absolute;top:100%;left:50%;height:18px;border-left:1px solid #89afe8}
.structure-branches{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;padding-top:16px}
.structure-branches:before{content:"";position:absolute;top:0;left:16.66%;right:16.66%;border-top:1px solid #89afe8}
.structure-branches span{position:relative;display:block;background:#f2f6fd;text-align:center;padding:13px 7px;color:#28466b;font-size:14px}
.structure-branches span:before{content:"";position:absolute;left:50%;top:-16px;height:16px;border-left:1px solid #89afe8}
.feature-structure figcaption{font-size:12px;line-height:1.8;color:#52647a;text-align:center;margin-top:15px}
.steps .number{background:transparent;border-radius:0;border-bottom:2px solid #0056ec;font-family:Georgia,serif;font-size:29px;width:42px;margin-bottom:20px}
.steps li:not(:last-child):after{color:#7498c8}
.start{border-top:0}
.contact.section{padding:28px 0}
@media(max-width:760px){.contact.section{padding:24px 0}}
.gallery-stage.mobile-shot>img,#gallery-zoom-image.mobile-zoom{aspect-ratio:390/844;height:auto;object-fit:cover;object-position:center top}
.gallery-stage.mobile-shot{display:flex;align-items:center;justify-content:center}
.gallery-stage.mobile-shot>img{height:100%;width:auto;max-width:100%;max-height:100%;flex-shrink:0}
.about-company{border-left:1px solid #bccbdf}
.about-intro h1{max-width:650px}
.about-intro>div>p{max-width:650px}
.name-equation{border:1px solid #d7e2f0;border-radius:0;background:white}
.name-equation strong{font-family:var(--editorial-serif);font-size:42px;font-weight:600}
.brand-origin h3,.logo-story h3,.brand-mission h3{font-family:var(--editorial-serif);font-weight:600}
.brand-origin h3{font-size:30px}
.logo-story>img{width:280px}
.logo-story h3{font-size:29px}
.logo-values .feature-icon{width:32px;height:32px}
.logo-values p{font-size:14px}
.brand-tagline{background:white;border:0;border-top:1px solid #bccbdf;border-bottom:1px solid #bccbdf;padding:28px 0}
.brand-tagline strong{font-family:var(--editorial-serif);font-size:29px;font-weight:600}
.ai-intro{grid-template-columns:1.2fr 1fr;align-items:end}
.ai-intro h1{max-width:700px}
.ai-visual{margin-top:42px}
.translation-preview{border-radius:3px;box-shadow:none}
.slide-preview{border-radius:3px;background:#edf3fc}
.lesson-slide{border-radius:0;min-height:245px}
.lesson-slide h4{font-family:var(--editorial-serif);font-size:31px;font-weight:600}
.ai-capabilities{margin-top:45px;gap:40px}
.ai-capabilities article{border-top:1px solid #8ba9d0;padding-top:24px}
.ai-capabilities h3{font-size:23px}
.ai-capabilities .feature-icon{width:32px;height:32px;margin-bottom:18px}
.ai-example{font-size:12px;margin-top:20px}
.ai-closing{font-size:15px;margin-top:22px}
.teaching-flow{display:flex;align-items:center;gap:20px;margin-top:38px;padding:26px 0;border-top:1px solid #cbd7e8;border-bottom:1px solid #cbd7e8}
.teaching-flow span,.teaching-flow strong{font-size:16px;line-height:1.7;white-space:nowrap}
.teaching-flow i{flex:1;height:1px;background:#8ba9d0;position:relative}
.teaching-flow i:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid #0056ec;border-right:1px solid #0056ec;transform:rotate(45deg)}
.teaching-flow strong{color:#0056ec}
.visual-caption,.preview-label,.preview-toolbar,.preview-bottom,.slide-outline,.gallery-example-note{font-size:12px}
.gallery-heading>div{max-width:850px}
.gallery-heading>p{max-width:300px}
.gallery-tabs button{min-height:46px;border-radius:3px}
#gallery-panel{border-radius:4px;box-shadow:none}
.gallery-footer{padding-top:26px}
.gallery-controls button{width:46px;height:46px}
.contact h2{font-family:var(--editorial-serif);font-weight:600;font-size:36px}
.menu-toggle{min-width:44px;min-height:44px}
@media(max-width:1050px){
.hero-copy h1{font-size:38px}.detail-page h1,.detail-page #interfaces h1{font-size:38px}
.ai-intro{gap:35px}.ai-capabilities{gap:25px}.teaching-flow{gap:12px}.teaching-flow span,.teaching-flow strong{font-size:14px}
.brand-tagline strong{font-size:26px}.features-grid{column-gap:40px}
}
@media(max-width:760px){
.header>.button{min-height:44px}.header{gap:8px}.header .brand img{width:118px}
.hero-copy h1{font-size:clamp(30px,6.7vw,42px);line-height:1.5}.hero-copy h1 span{white-space:normal}
.detail-page h1,.detail-page #interfaces h1{font-size:34px;line-height:1.4}
.section h2{font-size:28px;line-height:1.5}.section-label{font-size:12px}
.roles article,.roles article:first-child,.roles article:last-child{padding:24px 0;border-top:0;border-bottom:0}
.roles h3{font-size:21px}.roles p{margin-left:0;font-size:16px}.role-icon{width:31px;height:31px;margin-bottom:15px}
.features>.wrap{padding-top:32px}.features-grid{column-gap:0}.features-grid p{font-size:16px}.features-grid h3{font-size:21px}
.structure-branches{gap:10px}.structure-branches span{font-size:12px;padding:13px 5px}
.feature-structure{padding-top:10px;padding-bottom:24px}.structure-school{font-size:19px}
.steps h3{font-size:19px}.steps p{font-size:16px}.steps{gap:30px 22px}
.about-intro h1 br{display:none}.about-intro>div>p{font-size:16px}.about-company{border-left:0}.about-intro .about-company p{font-size:16px}
.brand-origin h3,.logo-story h3{font-size:26px}.brand-origin p:not(.section-label),.logo-story p{font-size:16px}
.logo-values{gap:30px 22px}.logo-values p{font-size:16px}.logo-values h4{font-size:19px}
.brand-mission h3{font-size:23px}.brand-mission>p:not(.section-label){font-size:16px}
.brand-tagline{padding:24px 0}.brand-tagline strong{font-size:25px}.brand-tagline>span{font-size:13px}
.name-equation strong{font-size:35px}.name-equation div>span{font-size:12px}
.ai-intro{grid-template-columns:1fr;gap:20px}.ai-intro>p{font-size:16px}
.ai-visual{margin-top:30px}.ai-capabilities{gap:30px;margin-top:32px}.ai-capabilities p{font-size:16px}
.ai-capabilities .feature-icon{float:none;margin:0 0 16px}.ai-capabilities h3{font-size:23px}
.preview-label,.preview-toolbar,.preview-tool-name,.preview-bottom,.slide-outline,.translation-columns p{font-size:12px}
.translation-columns p{font-size:16px}.translation-columns h4{font-size:20px}
.teaching-flow{flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0}.teaching-flow i{flex:none;width:1px;height:17px;margin-left:12px}.teaching-flow i:after{top:auto;right:-3px;bottom:0;transform:rotate(135deg)}
.teaching-flow span,.teaching-flow strong{font-size:16px}.ai-closing{font-size:16px}
.gallery-heading>p,.gallery-footer p{font-size:16px}.gallery-example-note{font-size:12px}
.gallery-tabs button{min-height:44px;font-size:12px}.gallery-controls button{width:44px;height:44px}
.contact h2{font-size:30px}.contact p:not(.section-label){font-size:16px}
}
@media(prefers-reduced-motion:reduce){.button:active{transform:none}}

.term{font-size:12px}.preview-label,.slide-preview .preview-label{color:#49617e}.lesson-slide>span,.lesson-slide>div{font-size:12px}.lesson-slide>div span{color:#2e705b}.logo-values article>span{font-size:12px;color:#52647a}.brand-tagline>span{font-size:14px}.gallery-example-note{color:#52647a}.gallery-browser-bar .screen-bar span{font-size:12px;color:#52647a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gallery-browser-bar>.screen-bar{min-width:0}.gallery-browser-bar>button{font-size:12px;min-height:44px}@media(max-width:760px){.brand-tagline>span{font-size:14px}.gallery-browser-bar .screen-bar span{max-width:120px}.preview-label,.lesson-slide>span,.lesson-slide>div{font-size:12px}}

/* Shared page navigation */
@media(min-width:901px){.header nav{gap:clamp(14px,2vw,30px)}.header nav a{position:relative;white-space:nowrap}.header nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue)}}

/* Brand value cards: long Indonesian/English labels must not force columns past the viewport */
.logo-values{grid-template-columns:repeat(2,minmax(0,1fr))}
.logo-values article{min-width:0}
.logo-values h4,.logo-values article>span,.logo-values p{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:400px){.logo-values{grid-template-columns:1fr}}

/* Language control stays available without opening the mobile menu. */
.language-switch{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:13px;font-weight:400}
.language-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.language-switch select{width:152px;min-height:42px;padding:8px 26px 8px 10px;font-size:13px;border-color:var(--line);border-radius:3px}
@media(min-width:901px){.header{display:grid;grid-template-columns:1fr auto auto;height:auto;padding-top:22px;padding-bottom:12px;gap:12px 20px}.header>.brand{grid-column:1;grid-row:1}.header>.language-switch{grid-column:2;grid-row:1}.header>.button{grid-column:3;grid-row:1}.header nav{grid-row:2;grid-column:1/-1;justify-content:center;flex-wrap:wrap;column-gap:28px}.header nav a{font-size:14px}}
html[lang=id] h1,html[lang=en] h1{text-wrap:balance;overflow-wrap:normal;word-break:normal;letter-spacing:-.035em}
html[lang=id] h1,html[lang=en] h1{font-family:Georgia,"Times New Roman",serif}
html[lang=id] h1 span,html[lang=en] h1 span{white-space:normal}
html[lang=id] .curriculum-editorial .hero h1,html[lang=en] .curriculum-editorial .hero h1{font-size:clamp(34px,4.5vw,64px)}
.header nav a,.gallery-tabs button{white-space:normal}
@media(max-width:900px){.header{height:auto;min-height:104px;flex-wrap:wrap;padding-top:16px;padding-bottom:12px;row-gap:10px}.header>.brand{order:0}.header>.menu-toggle{order:1}.header>.button{order:2}.header>.language-switch{order:3;flex-basis:100%;justify-content:flex-end}.language-switch select{min-height:36px;width:154px}.header nav{top:100%}.header.nav-open nav{z-index:20}.header nav a{min-height:44px}}
@media(max-width:760px){html[lang=id] .hero-copy h1,html[lang=en] .hero-copy h1{font-size:32px}html[lang=id] .detail-page h1,html[lang=en] .detail-page h1{font-size:32px}.feature-structure .structure-branches span{overflow-wrap:anywhere}}
.about-intro>*,.brand-origin>*,.logo-philosophy>*,.ai-intro>*{min-width:0}
@media(max-width:760px){html[lang=id] h1,html[lang=en] h1{overflow-wrap:anywhere}.about-company h3{overflow-wrap:anywhere}}

/* Latin typography: one native sans family for Indonesian and English. */
html:is([lang=id],[lang=en]){--latin-type:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--editorial-serif:var(--latin-type)}
html:is([lang=id],[lang=en]) body,html:is([lang=id],[lang=en]) .curriculum-editorial{font-family:var(--latin-type)}
html:is([lang=id],[lang=en]) body h1,html:is([lang=id],[lang=en]) body .curriculum-editorial h1,
html:is([lang=id],[lang=en]) body .curriculum-editorial .chapter h2,html:is([lang=id],[lang=en]) body .curriculum-editorial .versions h2,
html:is([lang=id],[lang=en]) body .curriculum-editorial .book strong{font-family:var(--latin-type);font-style:normal}
html:is([lang=id],[lang=en]) body h1{font-weight:650;line-height:1.2;letter-spacing:-.035em}
html:is([lang=id],[lang=en]) body .curriculum-editorial .hero h1{font-size:clamp(34px,4.3vw,60px);line-height:1.18;letter-spacing:-.035em}
html:is([lang=id],[lang=en]) body h2{font-weight:600;letter-spacing:-.025em}
html:is([lang=id],[lang=en]) body .curriculum-editorial .chapter h2,html:is([lang=id],[lang=en]) body .curriculum-editorial .versions h2{font-weight:600;line-height:1.25;letter-spacing:-.025em}
html:is([lang=id],[lang=en]) body h3,html:is([lang=id],[lang=en]) body h4{letter-spacing:-.015em;font-weight:600}
html:is([lang=id],[lang=en]) .curriculum-editorial .eyebrow,html:is([lang=id],[lang=en]) .section-label{letter-spacing:.025em;font-weight:500}
html:is([lang=id],[lang=en]) body .curriculum-editorial .book strong{font-weight:600;letter-spacing:-.015em;line-height:1.4}
html:is([lang=id],[lang=en]) .hero-copy>p,html:is([lang=id],[lang=en]) .curriculum-editorial .hero-intro{line-height:1.75}
@media(max-width:760px){html:is([lang=id],[lang=en]) body .hero-copy h1,html:is([lang=id],[lang=en]) body.detail-page h1,html:is([lang=id],[lang=en]) body .curriculum-editorial .hero h1{font-size:34px;line-height:1.22;letter-spacing:-.03em}html:is([lang=id],[lang=en]) body .curriculum-editorial .chapter h2,html:is([lang=id],[lang=en]) body .curriculum-editorial .versions h2{font-size:29px;line-height:1.3}}
@media(max-width:350px){html:is([lang=id],[lang=en]) body .hero-copy h1,html:is([lang=id],[lang=en]) body.detail-page h1,html:is([lang=id],[lang=en]) body .curriculum-editorial .hero h1{font-size:30px}}

.gallery-stage.mobile-shot>img,#gallery-zoom-image.mobile-zoom{aspect-ratio:390/844;height:auto;object-fit:cover;object-position:center top}


/* Tighten oversized gaps and remove duplicate separators after subtitle removal. */
.header{border-bottom:0}
.features>.wrap{border-top:0;padding-top:0}
.section{padding-block:56px}
.hero{min-height:500px;padding:56px 0 48px}
.scenes.section{padding-top:25px;padding-bottom:52px}
.features.section{padding-top:25px;padding-bottom:48px}
.start.section{padding-top:38px;padding-bottom:56px}
.detail-page #main>.section:first-child{border-top:0;padding-top:32px}
.detail-page .interface-gallery{padding-bottom:42px}
.brand-origin{margin-top:40px;padding-top:34px}
.logo-philosophy{margin-top:46px;padding-top:38px}
.brand-mission{margin-top:42px;padding-top:32px}
.brand-tagline{margin-top:26px;padding-top:22px;padding-bottom:22px}
.translation-columns>div{padding:20px 22px}
.translation-columns h4{margin:12px 0}
.translation-columns p{margin-bottom:14px}
.preview-bottom{padding:12px 22px}
@media(min-width:1500px){
 .section{padding-block:68px}
 .scenes.section{padding-top:30px;padding-bottom:56px}
 .features.section{padding-top:25px;padding-bottom:56px}
 .start.section{padding-top:42px;padding-bottom:64px}
 .detail-page #main>.section:first-child{padding-top:36px}
}
@media(max-width:1050px){.translation-columns>div{padding:18px 16px}}
@media(max-width:760px){
 .section{padding-block:42px}
 .hero{min-height:0;padding:36px 0 40px;gap:28px}
 .scenes.section{padding-top:8px;padding-bottom:38px}
 .features.section{padding-top:25px;padding-bottom:30px}
 .start.section{padding-top:28px;padding-bottom:40px}
 .detail-page #main>.section:first-child{padding-top:28px}
 .detail-page .interface-gallery{padding-bottom:32px}
 .brand-origin{margin-top:28px;padding-top:24px}
 .logo-philosophy{margin-top:28px;padding-top:24px}
 .brand-mission{margin-top:28px;padding-top:24px}
 .brand-tagline{margin-top:20px;padding:18px 0}
 .translation-columns>div{padding:18px}
 .preview-bottom{padding:12px 18px}
 .gallery-stage:not(.mobile-shot){height:240px}
}