/* Responsive page proportions. Content remains scrollable when space is limited. */
body{min-height:100dvh;display:flex;flex-direction:column}
.header,body>main,body>footer{width:100%}
body>main{flex:1}
.inner-main{min-height:0}
.policy-pager{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px}
.policy-pager button{background:#172b40;border:1px solid #42627a;border-radius:5px;padding:6px 12px;font-size:12px}
.policy-pager button:disabled{opacity:.4;cursor:default}
.policy-page-status{font:12px var(--mono);color:#b5cee0}

@media(min-width:1101px){
 .header{height:68px;flex:none;gap:20px}
 .brand-logo{width:46px;height:46px}.header .brand{font-size:19px}
 .header nav{gap:20px}.header nav a{font-size:12px}
 body>footer{padding:12px 4.2%;min-height:46px;gap:18px;flex:none}
 footer .footer-name{font-size:11px}footer small{font-size:10px}
 body>main,body>main.inner-main{padding-top:22px;padding-bottom:20px}
 .page-intro{margin-bottom:20px}
 .page-intro .eyebrow{font-size:10px;margin-bottom:8px}
 .page-intro h1{font-size:clamp(28px,2.5vw,38px);margin:0 0 10px;line-height:1.3}
 .page-intro>p:last-child{font-size:13px;line-height:1.7}

 /* Homepage: reserve space for the supporting cards and policy link. */
 body[data-page=index]>main{display:grid;grid-template-rows:minmax(min-content,1fr) auto auto;padding-top:0;padding-bottom:0}
 .hero.topo-hero{grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr);align-items:start;gap:28px;min-height:0;padding:22px 0 18px}
 .topo-hero .hero-copy{display:block;align-self:start;padding:8px 0 0}
 .topo-hero .hero-copy>.eyebrow{font-size:10px;margin-bottom:14px}
 .topo-hero h1,html[lang=en] .topo-hero h1,html[lang=ja] .topo-hero h1,html[lang=th] .topo-hero h1{font-size:clamp(30px,2.8vw,46px);line-height:1.3}
 .topo-hero .hero-lead{font-size:clamp(17px,1.25vw,20px);line-height:1.6;margin:18px 0 12px}
 .topo-hero .hero-description{font-size:13px;line-height:1.8;max-width:460px;margin:0}
 .topo-hero .hero-actions{gap:8px;margin-top:18px}
 .hero-actions .button{min-height:40px;font-size:12px;padding:8px 13px}
 .topo-hero .hero-proof{margin-top:18px;font-size:10px;gap:8px}
 .topo-heading{padding:10px 14px}.topo-heading strong{font-size:13px}
 .topo-controls{padding:8px 12px 0;gap:7px}
 .topo-views button{padding:5px 7px;font-size:10px}
 .topo-question{padding:8px 14px 0;font-size:11px;line-height:1.6;min-height:0}
 .topo-canvas{padding:4px 10px 0;overflow:visible}
 .topo-canvas svg{width:100%;height:clamp(190px,27dvh,330px);min-height:0}
 .topo-detail{min-height:0;padding:10px 14px;gap:14px;grid-template-columns:.8fr 1.6fr 1fr}
 .topo-detail h3{font-size:14px;margin:2px 0 6px}.topo-detail p{line-height:1.7}
 .topo-foot{padding:7px 14px}.topo-foot>span{line-height:1.6}
 .value-strip{padding:12px 0}.value-strip>a{padding:0 18px}
 .value-strip h2{font-size:16px;margin:5px 0}.value-strip p{font-size:11px;line-height:1.6}
 .value-number{font-size:9px}.strip-arrow{font-size:16px;right:10px}
 .trend-ribbon{padding:10px 0;gap:18px;font-size:11px;line-height:1.6}

 /* Product: compact vertical navigation and a proportionate relation diagram. */
 .tab-layout{grid-template-columns:170px 1fr;gap:28px;padding-top:20px}
 .tab-list{gap:8px}.tab-list button{padding:12px;font-size:13px}
 .product-panel{min-height:0;gap:20px;grid-template-columns:1.4fr .8fr}
 .product-panel h2{font-size:25px;margin-bottom:12px}
 .product-panel p{font-size:13px;line-height:1.8;margin-bottom:14px}
 .check-list{margin:16px 0}.check-list li{padding-top:6px;padding-bottom:6px}
 .relation-stack{padding:4px 16px;max-width:310px}
 .relation-stack>div{padding:7px 12px;margin-bottom:16px;font-size:12px}
 .relation-stack i{bottom:-22px}.relation-stack span{top:11px}
 .scope-note{padding-top:12px;font-size:11px!important;line-height:1.7!important}

 /* Reports: two balanced panels without artificial minimum heights. */
 .reports-layout{gap:24px;grid-template-columns:1fr 1fr}
 .region-box{padding:18px 20px}.region-box [role=tabpanel]{min-height:0;padding-top:0}
 .horizontal-tabs{margin-bottom:18px;gap:24px}.horizontal-tabs button{padding:8px 3px;font-size:13px}
 .region-box .horizontal-tabs{gap:18px}.region-box .eyebrow{margin-bottom:10px}
 .region-box h2{font-size:24px;margin-bottom:12px}.region-box p{font-size:13px;line-height:1.7;margin-bottom:14px}
 .alignment-flow{gap:6px;margin:16px 0}.alignment-flow span{padding:3px 7px}
 .report-boundary{padding-top:12px;margin-top:14px!important;line-height:1.7}
 .report-language{margin-bottom:10px}
 .report-preview{padding:18px 22px;min-height:0}.report-paper-top{margin-bottom:14px}
 .report-preview h2{font-size:22px}.report-preview>p{margin-bottom:12px}
 .report-preview ol{margin:12px 0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.report-preview li{padding:8px 0;font-size:12px;line-height:1.6;display:grid;grid-template-columns:22px 1fr}.report-preview li:before{margin:0}
 .sample-finding{padding:10px 12px;margin:12px 0}.sample-finding p{line-height:1.7}
 .report-preview-wrap>.fine{margin:8px 0;font-size:10px;line-height:1.6}

 /* Policy cards keep their complete text; extra records use explicit paging. */
 .policy-grid{gap:20px}.policy-card{padding:20px 22px}
 .policy-card h2{font-size:22px;margin-bottom:12px}.policy-card p{font-size:13px;line-height:1.8}
 .policy-meta{margin-bottom:12px}.policy-boundary{margin-top:16px;font-size:11px;line-height:1.7}

 /* About: size the brand illustration relative to the available viewport. */
 .about-layout{min-height:0;gap:48px;grid-template-columns:1.3fr .7fr}
 .about-layout .page-intro{margin-bottom:18px}.about-layout h1{font-size:clamp(28px,2.6vw,40px);margin:0 0 14px}
 .about-layout p{font-size:13px;line-height:1.8}.about-layout>.page-intro p{font-size:14px}
 .about-art{height:clamp(240px,34dvh,380px);display:flex;flex-direction:column;justify-content:center;gap:12px}.about-logo{width:220px;height:220px}
 .about-art>p{position:static;font-size:9px;margin:0}
 .principles{gap:30px;margin-top:26px;padding-top:22px}
 .principles h2{font-size:19px;margin:8px 0}.principles p{font-size:12px;line-height:1.7}
}

/* Smaller laptops: tighten spacing, not the reading text. */
@media(min-width:1101px) and (max-height:800px){
 body>main,body>main.inner-main{padding-top:16px;padding-bottom:14px}
 .page-intro{margin-bottom:16px}.page-intro h1{font-size:28px}
 .hero.topo-hero{padding:16px 0 12px}.topo-hero .hero-copy{padding-top:4px}
 .topo-hero h1,html[lang=en] .topo-hero h1,html[lang=ja] .topo-hero h1,html[lang=th] .topo-hero h1{font-size:32px}
 .topo-hero .hero-copy>.eyebrow{margin-bottom:10px}.topo-hero .hero-lead{margin-top:14px;font-size:17px}
 .topo-hero .hero-actions,.topo-hero .hero-proof{margin-top:14px}
 .value-strip{padding:10px 0}.value-strip h2{font-size:15px}.value-strip p{font-size:11px}
 .tab-layout{padding-top:16px;gap:24px}.product-panel{gap:14px}.product-panel h2{font-size:23px}
 .region-box{padding:14px 18px}.report-preview{padding:14px 18px}
 .region-box .horizontal-tabs{margin-bottom:14px}.region-box h2{font-size:22px}
 .report-paper-top{margin-bottom:10px}.report-preview h2{font-size:20px}
 .about-art{height:250px}.about-logo{width:190px;height:190px}
 .about-layout h1{font-size:30px}.principles{margin-top:20px;padding-top:18px}
}
@media(min-width:1101px) and (max-height:740px){
 .header{height:62px}.brand-logo{width:42px;height:42px}
 body>footer{padding-top:9px;padding-bottom:9px;min-height:40px}
 .hero.topo-hero{padding-top:12px;padding-bottom:10px}
 .topo-hero .hero-copy>.eyebrow{margin-bottom:8px}
 .topo-hero .hero-lead{margin-top:12px;margin-bottom:10px}
 .topo-hero .hero-actions,.topo-hero .hero-proof{margin-top:12px}
 .topo-heading{padding-top:8px;padding-bottom:8px}
 .topo-detail{padding:7px 12px}.topo-foot{padding:5px 12px}
}

/* Give larger displays more breathing room without changing reading order. */
@media(min-width:1101px) and (min-height:900px){
 .header{height:80px}.brand-logo{width:54px;height:54px}
 .header .brand{font-size:21px}.header nav a{font-size:14px}
 body>footer{padding-top:16px;padding-bottom:16px}
 .hero.topo-hero{padding-top:30px;padding-bottom:24px}
 .topo-hero h1,html[lang=en] .topo-hero h1,html[lang=ja] .topo-hero h1,html[lang=th] .topo-hero h1{font-size:clamp(36px,2.8vw,54px)}
 .topo-hero .hero-lead{font-size:22px;margin-top:24px}
 .topo-hero .hero-description{font-size:14px}.topo-hero .hero-actions{margin-top:24px}
 .topo-heading{padding:14px 18px}.topo-heading strong{font-size:15px}
 .topo-views button{font-size:12px;padding:7px 9px}.topo-controls{padding-top:12px}
 .topo-question{font-size:13px;padding-top:12px}
 .topo-canvas svg{height:clamp(290px,33dvh,400px)}
 .topo-detail{padding:16px 18px}.topo-detail h3{font-size:16px}.topo-detail p{font-size:12px}
 .topo-foot{padding:10px 18px}
 .value-strip{padding:20px 0}.value-strip h2{font-size:18px}.value-strip p{font-size:12px}
 .trend-ribbon{padding:14px 0;font-size:12px}
}