/* Layouts use the existing toolbox grids, type and spacing. */
.guide-intro-media{align-items: start;}
.guide-intro-media > figure:first-child{aspect-ratio: 8/9; overflow: hidden; border-radius: var(--border-radius);}
.guide-intro-media > figure:first-child img{display: block; width: 100%; height: 100%; object-fit: cover;}
.guide-demo-video{aspect-ratio: 16/9; overflow: hidden; border-radius: var(--border-radius); background-color: #111;}
.guide-demo-video video{display: block; width: 100%; height: 100%; object-fit: contain;}
.guide-routes-layout{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: var(--lg-space);}
.guide-route-content{min-width: 0;}
.guide-route-content .section-header:not(:last-child){margin-bottom: var(--md-space);}
.guide-route-modes{min-width: 0; padding: var(--md-space); border-radius: var(--border-radius); background-color: #242424;}
.guide-route-mode{display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: var(--gutter-half);}
.guide-route-mode + .guide-route-mode{margin-top: var(--md-space); padding-top: var(--md-space); border-top: .1rem solid rgb(248 248 248 / 16%);}
.guide-route-number{font-size: var(--fs-sm); line-height: 1.7; font-variant-numeric: tabular-nums; color: #ef343b;}
.guide-route-mode h3{font-size: var(--fs-xl); line-height: 1.2; margin-bottom: .8rem;}
.guide-route-mode p{color: var(--grey-color);}
.guide-route-editing{margin-top: var(--md-space); padding: var(--md-space); border-radius: var(--border-radius); background-color: #242424;}
.guide-route-editing-header, .guide-route-update{display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gutter-half); align-items: start;}
.guide-route-editing-header{margin-bottom: var(--md-space);}
.guide-route-editing-header h3{font-size: var(--h5); line-height: 1.25;}
.guide-route-editing-label, .guide-route-update h4{font-size: var(--fs-md); font-family: var(--font-medium); line-height: 1.5;}
.guide-route-editing-label{margin-bottom: var(--gutter-half);}
.guide-route-steps{display: grid; grid-template-columns: minmax(0, 1fr); border-block: .1rem solid rgb(248 248 248 / 16%);}
.guide-route-steps > li{display: flex; gap: var(--gutter-half); min-width: 0; padding: var(--gutter-half) 0; color: var(--grey-color);}
.guide-route-steps > li + li{border-top: .1rem solid rgb(248 248 248 / 16%);}
.guide-route-steps .guide-route-number{flex: 0 0 2.4rem;}
.guide-route-update{padding-top: var(--md-space);}
.guide-routes-screen{border-radius: var(--border-radius); overflow: hidden;}
.guide-routes-screen img{display: block; width: 100%; height: auto;}
.guide-video-cards{margin-top: var(--lg-space);}
.service-item.guide-video-card{position: relative; isolation: isolate; overflow: hidden;}
.guide-card-video{position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none;}
.guide-video-card::before{content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 30%) 50%, rgb(0 0 0 / 30%) 100%);}
.guide-video-card .feature-icon{filter: brightness(0) invert(1);}
.guide-connectivity-gallery{align-items: stretch;}
.guide-screen-frame{display: flex; align-items: center; justify-content: center; aspect-ratio: 1200/1470; overflow: hidden; border-radius: var(--border-radius); background-color: #111;}
.guide-screen-frame:last-child{aspect-ratio: 2400/1470;}
.guide-screen-frame-app{background-color: #fff;}
.guide-screen-frame img{display: block; width: 100%; height: 100%; object-fit: contain;}
.guide-screen-frame:not(.guide-screen-frame-app) img{object-fit: cover;}
@media(width < 992px){
  .guide-intro-media > figure:first-child{aspect-ratio: 4/5;}
  .guide-routes-layout{grid-template-columns: minmax(0, 1fr); gap: var(--md-space);}
}