/* ===== Full-screen panels + snap ===== */
.page{
  min-height: calc(var(--vh, 1vh) * 100);
}

.snap-page{
  scroll-snap-type: y mandatory;
  height: calc(var(--vh, 1vh) * 100);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.snap-page::-webkit-scrollbar{ width:0; height:0; }

.panel{
  min-height: calc(var(--vh, 1vh) * 100);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position:relative;
  overflow:hidden;
  display:grid;
}

.panel .container{
  position:relative;
  z-index:2;
  min-height: calc(var(--vh, 1vh) * 100);
  display:grid;
  align-content:center;
  padding: 110px 0 80px; /* header space */
}

.panel-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background-image: url(var(--panel-bg));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  transform: translateZ(0);
}

.panel-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.68));
}

/* White panel */
.panel.white{
  background:#f7f7f6;
  color:#0b0b0b;
}
.panel.white .panel-bg{ background:none; }
.panel.white .panel-veil{ display:none; }
.panel.white .muted{ color: rgba(10,10,10,.72); }
.panel.white .pill{
  border-color: rgba(10,10,10,.14);
  background: rgba(255,255,255,.78);
  color: rgba(10,10,10,.78);
}
.panel.white a{ color:#0b0b0b; }
.panel.white .btn{
  border-color: rgba(10,10,10,.18);
  background: rgba(255,255,255,.85);
  color:#0b0b0b;
}
.panel.white .btn:hover{ border-color: rgba(0,229,255,.55); }

/* Headline system */
.h1{
  font-size: clamp(2.25rem, 6.2vw, 4.7rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin:0;
  font-weight:850;
}
.h2{
  font-size: clamp(1.8rem, 4.6vw, 3.25rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:0;
  font-weight:850;
}
.lead{
  margin:.8rem 0 0;
  color: var(--muted);
  max-width: 92ch;
  font-size: 1.02rem;
}
.muted{ color: var(--muted); }