/* ==========================================================================
   Mustek section stack, v1
   Each section holds still while the next one slides up over it.
   Only the incoming section's top lip is rounded. The hero and footer are flat.
   Source of truth: design/mustek-refresh/mustek-home.html
   ========================================================================== */

:root{
  --mk-blue:#0352E2;   /* Mustek Blue, the primary. Always this value. */
  --mk-char:#24262B;   /* charcoal panel surface */
  --mk-page:#E9EAF0;   /* ground behind the stack (seen only during overscroll) */
  --mk-lip:28px;       /* top-lip radius */
  --mk-lip-shadow:0 -24px 60px -20px rgba(20,24,40,.28);
}
@media (max-width:620px){ :root{ --mk-lip:20px } }

body{background:var(--mk-page)}

/* All panels must share ONE containing block, or sticky stops at the parent's
   edge. <main> gives up its box so the <footer> after it joins the stack. */
main{display:contents}

/* Panel: full width, no outer margin, only the top corners rounded */
.panel{
  position:sticky;          /* the JS sets `top` per panel */
  top:0;
  margin:0;
  border-radius:var(--mk-lip) var(--mk-lip) 0 0;
  overflow:clip;            /* clip, NOT hidden: hidden would break sticky children */
}
.panel~.panel{box-shadow:var(--mk-lip-shadow)}   /* lifts the incoming lip off the panel below */

/* Surfaces: alternate them, never two of the same in a row */
.panel--white{background:#fff;color:#2A2C30}
.panel--blue {background:var(--mk-blue);color:#fff}
.panel--char {background:var(--mk-char);color:#fff}

/* Bookends are flat: nothing above the hero, and the footer closes the page */
.panel--hero{border-radius:0;box-shadow:none}
.panel--foot{border-radius:0}