/* Keep the upper-left reading column; the guide occupies only its lower part. */
.d-hero-detail>.v-button{margin-top:26px}
@media(min-width:1101px){
 .page-system .d-hero{padding-top:12px;overflow:clip;align-items:start;column-gap:clamp(42px,5.2vw,88px);grid-template-columns:minmax(310px,.78fr) minmax(0,1.6fr)}
 .page-system .d-hero .s-hero-copy{padding:0 0 6px;align-self:start}
 .page-system .d-hero .s-breadcrumb{margin-bottom:16px}
 .page-system .d-hero .s-service-label{margin-bottom:16px}
 .page-system .d-hero h1{font-size:clamp(54px,4.5vw,72px)}
 .page-system .d-hero .d-workspace{min-width:0;padding-top:28px}
 .page-system .d-hero-detail{margin-top:34px;padding-bottom:20px}
 .page-system .d-hero-detail .s-lead{font-size:18px;line-height:1.95;margin:0}
 .page-system .s-hero-bottom{grid-column:2}
 .page-system .service-copy .d-capabilities-heading>p{font-size:17px;font-weight:650;line-height:1.95;margin:24px 0 0}
 .page-system .d-capabilities-layout{display:block;margin:0}
 .page-system .d-tech-stage{position:relative;top:auto;width:100%;aspect-ratio:1.6;max-height:480px;border-top-right-radius:42px}
 .page-system .d-tech-stage-top{top:22px;left:24px;right:24px}
 .page-system .d-tech-character{left:0;top:3%;width:55%;height:86%}
 .page-system .d-tech-orbit{top:8%;left:1%;width:57%}
 .page-system .d-tech-routes{display:none}
 .page-system .d-tech-node{right:7%;width:31%;min-height:0;padding:12px 17px}
 .page-system .d-tech-node-work{top:18%}
 .page-system .d-tech-node-ai{top:42%}
 .page-system .d-tech-node-app{top:66%}
 .page-system .d-tech-node strong{font-size:22px}
 .page-system .d-tech-node small{font-size:11px;margin-top:6px}
 .page-system .d-tech-stage figcaption{left:26px;bottom:18px;font-size:13px}
 .page-system .d-tech-stage figcaption strong{font-size:28px}
 .page-system .d-capability-list{padding:0;margin-top:48px;gap:46px}
 .page-system .d-capability{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:28px}
 .page-system .d-capability-label{grid-row:1/4;align-self:start;flex-wrap:wrap;margin-top:7px;gap:12px}
 .page-system .d-capability h3{font-size:30px}
 .page-system .d-capability>p,.page-system .d-capability>ul,.page-system .d-capability>a{grid-column:2}
 .page-system .d-tech-stack{margin-top:44px;padding:28px}
 .page-system .d-product-case{grid-template-columns:1fr;gap:32px}
 .page-system .d-product-visual{aspect-ratio:1.5;max-height:500px}
 .page-system .d-product-screens{height:80%;width:82%;left:14%;bottom:-18%}
 .page-system .d-product-copy{padding:0}
 .page-system .d-product-copy>p{max-width:40em}
 .page-system .s-related-list{grid-template-columns:1fr;gap:12px}
 .page-system .s-related-list>a{padding:18px 0}
 .page-system .s-related>.service-composition>.service-copy>h2{margin-top:20px}
 /* Only the footer's lower controls need the same local clearance as TOP. */
 .page-system .varista-finale .finale-upper,.page-system .varista-finale .finale-base,.page-system .varista-finale .finale-wordmark{margin-left:max(0px,calc(292px - var(--page)))}
 .page-system .finale-upper{grid-template-columns:1.05fr 1fr .9fr;gap:30px}
 .page-system .varista-finale h2{font-size:clamp(32px,3vw,48px)}
}
@media(min-width:1101px) and (max-height:820px){
 .page-system .service-copy .d-capabilities-heading>p{font-size:16px;line-height:1.9;margin-top:20px}
 .page-system .d-hero .s-service-label{display:inline-block;margin-left:20px}
 .page-system .d-hero{padding-top:0}
 .page-system .d-hero h1{font-size:58px;line-height:1.15}
}
@media(min-width:1101px) and (max-width:1300px){
 .page-system .d-hero{grid-template-columns:310px minmax(0,1fr);column-gap:40px}
 .page-system .d-tech-stage{aspect-ratio:1.3}
 .page-system .d-capability{grid-template-columns:1fr}
 .page-system .d-capability-label{grid-row:auto;margin-bottom:18px}
 .page-system .d-capability>p,.page-system .d-capability>ul,.page-system .d-capability>a{grid-column:1}
}
@media(max-width:1100px){
 .page-system .d-hero{display:flex;flex-direction:column}
 .page-system .d-hero .d-workspace{width:100%;max-width:680px;align-self:center}
 .page-system .d-hero-detail{margin-top:30px}
 .page-system .d-hero-detail .s-lead{font-size:16px}
 .page-system .d-hero .s-hero-bottom{width:100%}
 .page-system .d-capabilities-layout{margin-top:0}
 .page-system .d-system-work .service-copy>h2{margin-bottom:0}
 .page-system .s-related .service-copy h2{margin-top:18px}
}

@media(min-width:1101px) and (max-height:740px){
 .page-system .d-hero .s-breadcrumb,.page-system .d-hero .s-service-label{margin-bottom:8px}
 .page-system .d-hero h1{font-size:52px;line-height:1.1}
}