*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

html,
body,
wa-page::part(base),
wa-page::part(body),
wa-page::part(main-content) {
  color: var(--wa-color-text-normal);
  background: var(--wa-color-surface-default);
}

img {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

wa-page::part(main-content),
wa-page::part(header),
wa-page::part(footer) {
  padding: 0;
}

.shell {
  inline-size: 100%;
  max-inline-size: calc(var(--wa-space-5xl) * 15);
  margin-inline: auto;
}

.site-header,
.site-footer {
  padding: var(--wa-space-s) var(--wa-space-xl);
}

.site-header {
  background: var(--wa-color-surface-raised);
  border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.site-footer {
  background: var(--wa-color-surface-lowered);
  border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
}

.site-header a,
.site-footer a {
  text-decoration: none;
}

.site-footer a {
  color: var(--wa-color-text-quiet);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--wa-color-text-normal);
}

.legal-main {
  padding: var(--wa-space-4xl) var(--wa-space-xl);
}

.legal-card {
  --spacing: var(--wa-space-xl);
  inline-size: 100%;
  max-inline-size: 72ch;
  margin-inline: auto;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  .site-header,
  .site-footer {
    padding-inline: var(--wa-space-m);
  }

  .legal-main {
    padding: var(--wa-space-2xl) var(--wa-space-m);
  }

  .legal-card {
    --spacing: var(--wa-space-m);
  }
}