/* ============================================================
   LAYOUT · native page scroll (mobile-safe)
   ============================================================ */

html{
  height:100%;
  scroll-behavior:smooth;
}

body{
  min-height:100%;
  margin:0;
  padding:0;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* App is a plain block — no height limit, no overflow trickery */
.app{
  position:relative;
  z-index:2;
  width:100%;
  min-height:100vh;      /* ← was min-height:100% (which depends on parent height) */
  min-height:100svh;     /* modern mobile-safe unit */
}

/* Views stack vertically. Only the active one is displayed. */
.view{
  /* REMOVED: position: absolute; inset: 0;  ← this was collapsing .app */
  position:relative;     /* ← normal flow, can grow with content */
  width:100%;
  display:none;
}
.view.is-active{
  display:block;
}

/* Scrollers become transparent wrappers — no scroll of their own */
.scroller{
  position:relative;
  height:auto;
  overflow:visible;
}

/* Panels become natural-height sections */
.panel{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(5rem,10vh,8rem) clamp(1.25rem,5vw,4rem);
  overflow:hidden;
}

@media (max-width: 900px){
  .view{
    position:relative;    /* ← removed absolute + inset:0 */
    display:none;
  }
  .view.is-active{
    display:block;
  }
}