/* Full-screen sections on the Sponsorship page (?snap=1|0): each of the four blocks fills the screen under the header, and scrolling
   settles on the start of the next one. Native CSS scroll snap, so the browser and the trackpad keep their own smooth feel.
   Desktop only (a block taller than a phone screen can't be one screen). A block that grows past the screen (How we work with its detail
   open) can still be scrolled within. */
@media (min-width:1024px) and (min-height:700px){
  html.snap{scroll-snap-type:y mandatory;scroll-padding-top:var(--snap-top,100px)}
  html.snap :is(#scan,#why,#process,.snapsec){scroll-snap-align:start;scroll-snap-stop:always}
  html.snap section.end{scroll-snap-align:start}
  /* every block is at least one screen tall and sits in its middle */
  html.snap :is(#why,#process,.snapsec){min-height:calc(100svh - var(--snap-top,100px));box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}
  html.snap #why>*,html.snap #process>*,html.snap .snapsec>*{flex:none}
  /* the last screen: "Let's talk" and the footer together, the footer at the foot of the screen */
  html.snap section.end{min-height:calc(100svh - var(--snap-top,100px) - var(--foot-h,0px));box-sizing:border-box;align-content:center}
}
.vs.vss{left:16px;right:auto;transform:none;bottom:66px}
.vs.vss button.on{background:#C21F2E}

/* every screen must fit whole in the window, whatever its height (a MacBook browser shows ~780px, not 900): on snap the middle blocks
   settle in the middle of the screen, and Benefits and How we work size their heading, gaps and cards from the window height */
@media (min-width:1024px) and (min-height:700px){
  html.snap :is(#why,#process,.snapsec){scroll-snap-align:center;margin-top:0!important;padding-top:clamp(24px,4vh,48px)!important;padding-bottom:clamp(24px,4vh,48px)}
  html.snap :is(#why,#process,.snapsec) h2{font-size:clamp(28px,min(4vw,6.2vh),58px)}
  html.snap :is(#why,#process) .lead{margin-top:clamp(8px,1.4vh,16px)}
  html.snap #why .gl{margin-top:clamp(14px,2.6vh,32px)}
  html.snap #why .gl .scene{padding:4px 0 8px}
  html.snap #why .gl .grid{gap:clamp(10px,1.6vh,16px)}
  html.snap #why .gl .face.card{min-height:clamp(150px,21vh,196px)}
  html.snap #why .gl .card{padding:clamp(12px,1.8vh,18px) 20px clamp(10px,1.6vh,16px)}
  html.snap #why .gl .front .emblem{width:clamp(40px,5.4vh,50px);height:clamp(40px,5.4vh,50px);margin-top:clamp(2px,.8vh,8px)}
  html.snap #why .gl .front h3{margin-top:clamp(6px,1.2vh,12px)}
  html.snap #process .hw{margin-top:clamp(16px,3vh,40px)}
}