/* The shell every page that is not the landing page wears: nav, prose, footer.
   Loaded after nocturne.css, which carries the tokens. */

body {
  margin: 0;
  background:
    radial-gradient(700px 460px at 92% -180px, color-mix(in srgb, var(--color-accent-900) 55%, transparent), transparent 66%),
    var(--color-bg);
  background-repeat: no-repeat;
  text-wrap: pretty;
}
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); text-decoration: underline; }

.page { max-width: 1344px; margin: 0 auto; }
.nav { padding-left: 24px; padding-right: 24px; }
.nav .btn-ghost { padding: 12px var(--space-3); min-height: 44px; }
/* The app's own icon, wearing the platform's corner radius — iOS rounds a
   home-screen tile at about 22.5% of its size, which is 5px at 22. */
.nav-mark { border-radius: 5px; flex: none; }
.nav-brand a { color: inherit; }
.nav-brand a:hover { color: var(--color-accent); text-decoration: none; }

/* One column, capped at a comfortable reading measure. Legal text is long;
   the measure matters more here than anywhere else on the site. */
.legal { padding: 40px 24px 72px; max-width: 74ch; }
.legal h1 {
  font-size: 32px; line-height: 38px; letter-spacing: -0.015em;
  margin: 0 0 0 -0.03em;
}
/* The generator's own "Last updated: …" line, always the first paragraph. */
.legal h1 + p {
  margin: 14px 0 40px;
  font-size: 13px; line-height: 22px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-accent);
}
.legal h2 {
  font-size: 23px; line-height: 30px; letter-spacing: -0.012em;
  margin: 52px 0 0;
}
.legal h3 { font-size: 17px; line-height: 26px; margin: 34px 0 0; }
.legal h4 { font-size: 15.5px; line-height: 24px; margin: 26px 0 0; }
.legal p, .legal li {
  font-size: 15.5px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}
.legal p { margin: 16px 0 0; }
.legal ul { margin: 16px 0 0; padding-left: 22px; }
.legal li { margin-top: 10px; }
.legal li > ul { margin-top: 10px; }
.legal strong { color: var(--color-text); font-weight: var(--font-heading-weight); }

.foot-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 24px calc(100% - 24px), transparent);
}
.foot { padding: 32px 24px 48px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.foot p, .foot a { font-size: 13px; line-height: 24px; margin: 0; }
.foot p { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

@media (min-width: 600px) {
  .nav { padding-left: 32px; padding-right: 32px; }
  .legal { padding: 56px 32px 88px; }
  .foot { padding: 32px 32px 56px; }
}

@media (min-width: 1200px) {
  .nav { padding-left: 72px; padding-right: 72px; }
  .legal { padding: 88px 72px 112px; }
  .legal h1 { font-size: 44px; line-height: 52px; margin-left: -0.04em; }
  .legal h1 + p { margin-bottom: 56px; }
  .legal h2 { font-size: 26px; line-height: 34px; }
  .foot-rule {
    background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
  }
  .foot { padding: 32px 72px 56px; gap: 12px 32px; }
}

/* — support page — */
/* Contact sits above the FAQ: someone who opened this page from the app's
   Support row wants an address, not a search. */
.contact {
  margin: 32px 0 0;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.contact dl { margin: 0; display: grid; gap: 16px; }
.contact dt {
  font-size: 12px; line-height: 18px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent);
}
.contact dd { margin: 4px 0 0; font-size: 15.5px; line-height: 24px; }
.contact dd a { word-break: break-word; }

.legal h2 + .qa { margin-top: 0; }
.qa { margin-top: 8px; }

@media (min-width: 600px) {
  .contact dl { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}