@layer layout {
/* Device variants (BUILD_SPEC §4): phone boards below 744px, Main from 744px. Same pattern as the
   mockup's zt-hide-sm / zt-only-sm helpers, so the hidden variant leaves the accessibility tree. */
@media (width < 744px){.zt-v-wide{display:none !important}}
@media (width >= 744px){.zt-v-phone{display:none !important}}
/* The phone boards' root font size (Main's is 17px). */
.zt-v-phone{font-size:16px}
/* Sub-pixel alignment (DECISIONS.md): each phone group starts at the same sub-pixel offset as its board
   (whole pixels), so Chrome rasterises it exactly like the reference. Under 0.1px, invisible. */
#story > .zt-v-phone{margin-top:-.03125px}
#how > .zt-v-phone{margin-top:.078125px;margin-bottom:.09375px}
#outcomes > .zt-v-phone{margin-top:.109375px;margin-bottom:.171875px}
#contact > .zt-v-phone{margin-top:-.1875px;margin-bottom:-.046875px}

/* Main.dc.html */
.zt-sticky{position:sticky;top:120px}
.zt-ord-first{order:-1}
@media (max-width:860px){
.zt-hero-stage{height:520px !important}
.zt-hero-box{transform:scale(.74);transform-origin:50% 0}
.zt-sticky{position:static}
.zt-ord-first{order:0}
}
@media (max-width:420px){
.zt-hero-stage{height:460px !important}
.zt-hero-box{transform:scale(.64)}
}
.zt-only-sm{display:none !important}
@media (max-width:860px){
.zt-hide-sm{display:none !important}
.zt-only-sm{display:flex !important}
.zt-pad-bottom{padding-bottom:96px !important}
}
}