/* ============================================================
   White page frame (GTE-style) — thin white border around the
   whole site, rounded outer corners.
   ============================================================ */
body { background: #fff; }

.shell {
  margin: var(--frame);
  border-radius: var(--frame-radius);
}

/* Round only the outer corners of the rounded-rectangle */
.hero {
  border-top-left-radius: var(--frame-radius);
  border-top-right-radius: var(--frame-radius);
}
.foot {
  border-bottom-left-radius: var(--frame-radius);
  border-bottom-right-radius: var(--frame-radius);
  overflow: hidden;
}

/* Keep the hero exactly one viewport tall inside the frame */
.hero { min-height: calc(100svh - var(--frame) * 2); }

/* Inset the fixed nav so it sits inside the frame */
.nav {
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
}
.nav.is-solid {
  border-radius: 0 0 14px 14px;
}

/* Floating fixed buttons already sit inside the frame */
@media (max-width: 520px) {
  :root { --frame: 6px; --frame-radius: 16px; }
}