:root {
  --layout-max: 112.5rem;
  --layout-fluid: 96vw;
  --radius: 1.125rem;
  --page-padding: clamp(1rem, 3vw, 2.5rem);
  --page-padding-mobile: clamp(1rem, 2vh, 4rem);

  --page-card-margin: clamp(1rem, 3vw, 2.5rem);
  --page-card-margin-mobile: clamp(1rem, 2vh, 4rem);
  --page-card-padding-mobile: clamp(0.25rem, 1vw, 1rem);
  --page-card-radius:  var(--radius);

  --mobile-padding: clamp(1.25rem, 4vw, 2rem);
}

.page {
  height: 100vh;
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  box-sizing: border-box;
  flex: 1;
}

.page-content {
  width: 100%;
  padding-block: var(--page-padding);
}

.is-mobile .page-content {
  padding-block: var(--page-padding-mobile);
}

.mobile-flow {
  display: none;
  margin-block: var(--text-section-gap);
  padding-inline: var(--zsection-mobile-padding);
}

.mobile-flow__link {
  width: 100%;
  justify-content: center;
  box-shadow: var(--shadow-cta);
}

.is-mobile .mobile-flow {
  display: block;
}

.page-card {
  background: var(--color-accent-blue);
  border-radius: var(--page-card-radius);
  box-shadow: var(--shadow-cta);
  margin: var(--page-card-margin);
}

.is-mobile .page-card {
  width: 100%;
  margin: var(--page-card-margin-mobile) 0;
  padding: var(--page-card-padding-mobile);
}