.marketing-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--pgsx-space-8) var(--pgsx-shell-gutter);
}

/* Wider variant for content pages (docs-width legal/blog pages, auth register).
   Lives here, with its base class, so it is picked up by every stylesheet
   consumer — the Astro site links _marketing-shell.css but not _auth-layout.css. */
.marketing-shell--wide {
  max-width: var(--pgsx-measure-wide);
}

.marketing-shell__brand {
  text-align: center;
  margin-bottom: var(--pgsx-space-12);
}

.marketing-shell__brand .brand {
  font-size: var(--pgsx-text-2xl);
}

.marketing-shell__card {
  background: var(--pgsx-surface);
  border: 1px solid var(--pgsx-rule);
  border-radius: var(--pgsx-radius-md);
  padding: var(--pgsx-space-8);
}

.marketing-shell__title {
  font-family: var(--pgsx-font-display);
  font-variation-settings:
    "opsz" 72,
    "SOFT" 30,
    "wght" 380;
  font-size: var(--pgsx-text-2xl);
  line-height: var(--pgsx-leading-heading);
  margin: 0 0 var(--pgsx-space-2);
  color: var(--pgsx-text-primary);
}

.marketing-shell__lede {
  color: var(--pgsx-text-secondary);
  font-size: var(--pgsx-text-sm);
  margin: 0 0 var(--pgsx-space-6);
}

.marketing-shell__cta {
  width: 100%;
  justify-content: center;
  margin-top: var(--pgsx-space-4);
}

.marketing-shell__alt {
  font-size: var(--pgsx-text-sm);
  color: var(--pgsx-text-muted);
  text-align: center;
  margin-top: var(--pgsx-space-8);
}

.marketing-shell__alt a {
  color: var(--pgsx-accent);
}

.divider {
  max-width: var(--pgsx-shell-max-width);
  margin: var(--pgsx-space-24) auto var(--pgsx-space-8);
  padding: 0 var(--pgsx-shell-gutter);
}