/* =========================================================
   Landing / welcome edge air — last word on horizontal insets
   ========================================================= */

:root {
  --shell-pad-x: 2.75rem;
  --shell-pad-bottom: 3.5rem;
}

@media (min-width: 720px) {
  :root {
    --shell-pad-x: clamp(2.75rem, 6vw, 4.5rem);
    --shell-pad-bottom: clamp(3.5rem, 6vh, 4.5rem);
  }
}

@media (max-width: 420px) {
  :root {
    --shell-pad-x: 2.25rem;
    --shell-pad-bottom: 3rem;
  }
}

.welcome-wrap {
  padding-left: var(--shell-pad-x) !important;
  padding-right: var(--shell-pad-x) !important;
  padding-bottom: var(--shell-pad-bottom) !important;
  box-sizing: border-box !important;
}

/* Pad the whole landing view — top + hero inherit the inset */
#view-landing.is-active {
  padding-left: var(--shell-pad-x) !important;
  padding-right: var(--shell-pad-x) !important;
  padding-bottom: var(--shell-pad-bottom) !important;
  box-sizing: border-box !important;
  /* keep full-screen shell from cinema, insets eat into it */
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

#view-landing.is-active .top {
  padding-left: 0 !important;
  padding-right: max(9.5rem, calc(env(safe-area-inset-right) + 8.5rem)) !important;
  box-sizing: border-box !important;
}

#view-landing.is-active .hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

#view-landing.is-active .hero-copy {
  width: 100% !important;
  max-width: min(40rem, 100%) !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#view-landing.is-active .relation-actions,
#view-landing.is-active .btn-probe {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#view-landing.is-active .relation-continue {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 1.15rem !important;
  margin-bottom: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

#view-landing.is-active .relation-continue .btn-wide {
  width: 100% !important;
  margin-top: 0 !important;
}