/* Shared composition rules for the public page and the visual editor. */
.stand-page {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 100svh;
  background: var(--page-surface);
  color: var(--page-text);
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.stand-page[data-font="serif"] {
  font-family: Georgia, "Times New Roman", serif;
}

.stand-page[data-font="humanist"] {
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

.page-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body.stand-page>.page-backdrop {
  position: fixed;
}

.page-backdrop::before,
.page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
}

[data-background="gradient"]>.page-backdrop::before {
  background: linear-gradient(155deg, var(--page-surface), var(--page-secondary));
}

[data-background="image"]>.page-backdrop::before {
  inset: -24px;
  background-image: var(--page-image);
  background-position: center var(--page-image-position);
  background-size: cover;
  filter: blur(var(--page-blur));
}

[data-background="image"]>.page-backdrop::after {
  background: rgb(0 0 0 / var(--page-overlay));
}

.stand-page .page-sheet {
  box-sizing: border-box;
  max-width: 528px;
  margin: 0 auto;
  padding: 0;
  background: var(--page-surface);
  overflow: hidden;
}

.page-body {
  padding: 48px 24px;
}

.page-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  object-position: center var(--page-cover-position);
}

.page-cover[hidden] {
  display: none;
}

.page-identity {
  position: relative;
  text-align: center;
}

.page-identity h1,
.page-identity h3 {
  margin: 20px 0 12px;
  font-size: 2rem;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.page-identity p {
  white-space: pre-line;
  margin: 0 0 24px;
}

[data-has-cover="true"] .page-body {
  padding-top: 24px;
}

[data-has-cover="true"] .page-identity .logo {
  margin-top: -68px;
  box-shadow: 0 0 0 6px var(--page-surface);
  background: var(--page-surface);
}

.stand-page[data-layout="card"],
.stand-page[data-layout="editorial"],
.stand-page:not([data-background="solid"]) {
  padding: 24px 12px;
}

[data-layout="card"]>.page-sheet,
[data-layout="editorial"]>.page-sheet,
.stand-page:not([data-background="solid"])>.page-sheet {
  border-radius: 24px;
  box-shadow: 0 16px 64px rgb(16 32 48 / 12%);
}

[data-layout="editorial"] .page-identity {
  text-align: left;
}

[data-layout="editorial"] .page-identity h1,
[data-layout="editorial"] .page-identity h3 {
  font-size: 2.5rem;
  max-width: 14ch;
}

[data-layout="editorial"] .page-identity .logo {
  max-width: 88px;
  max-height: 88px;
}

.stand-page .content-section h2 {
  font-size: 1.125rem;
  font-weight: 650;
  margin: 0 0 16px;
}

@media (min-width: 600px) {

  body.stand-page[data-layout="card"],
  body.stand-page[data-layout="editorial"],
  body.stand-page:not([data-background="solid"]) {
    padding: 48px 24px;
  }
}

/* Typed public pages share the same identity and accessible form controls. */
[data-response-form] input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
[data-response-form] textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: .5rem;
  padding: .75rem;
  font: inherit;
  border: 1px solid currentColor;
  border-radius: .5rem;
  background: #fff;
  color: #172c3e;
}

[data-response-form] input[type="radio"],
[data-response-form] input[type="checkbox"] {
  margin: .75rem .5rem .75rem 0;
}

[data-response-form] label {
  display: inline-block;
}

[data-response-error] {
  font-weight: 600;
}

.information-content {
  text-align: start;
  overflow-wrap: anywhere;
}

/* Readable content rhythm across social, survey, review, and informative pages. */
.page-identity h1,
.page-identity h3 {
  text-wrap: balance;
}

.page-identity p {
  line-height: 1.7;
  text-wrap: pretty;
}

.information-content {
  line-height: 1.8;
}

.information-content :is(h2, h3) {
  line-height: 1.25;
  margin-top: 1.75em;
  margin-bottom: .75em;
  text-wrap: balance;
}

.information-content :is(p, ul, ol) {
  margin-bottom: 1.25em;
}

.information-content a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

[data-response-form] input:focus-visible,
[data-response-form] textarea:focus-visible {
  outline: 2px solid var(--page-text);
  outline-offset: 3px;
}

[data-response-form] button,
[data-response-form] label {
  font-family: inherit;
}