/* ==========================================================================
   css/layout.css
   Structural layout primitives shared across every page.
   Depends on: variables.css, base.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page shell — outermost wrapper for stacking context / isolation
   -------------------------------------------------------------------------- */
.page-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Container — centred, max-width content column
   -------------------------------------------------------------------------- */
.container {
  width: min(var(--max-width), calc(100% - 40px));
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Section — standard vertical rhythm for full-width sections
   -------------------------------------------------------------------------- */
.section {
  padding: 112px 0;
}

/* --------------------------------------------------------------------------
   Page content area — used on signup and thankyou pages
   -------------------------------------------------------------------------- */
.page {
  padding: 36px 0 100px;
}

/* --------------------------------------------------------------------------
   Ambient blobs — decorative radial blurs in the background
   -------------------------------------------------------------------------- */
.ambient-blob {
  position: absolute;
  border-radius: 999px;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
  animation: float 18s ease-in-out infinite alternate;
}

/* --------------------------------------------------------------------------
   Responsive overrides
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .container {
    width: min(var(--max-width), calc(100% - 24px));
  }
}
