/* The legal, support and reset pages. They load landing.css first (tokens, Inter, nav,
   buttons, footer), and this adds their hero and a prose column for the Markdown. */

/* MARK: Hero */

.page-hero { padding-bottom: 72px; }
.page-head { max-width: 900px; margin: 0 auto; padding-top: 64px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.page-title {
  display: block;
  font-size: 72px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -4px;
  color: var(--ink);
  animation: rise 1s var(--ease) both;
}
.updated { color: var(--muted); font-size: 15px; animation: rise 1s .1s var(--ease) both; }

.nav-menu a[aria-current="page"] { background: rgba(123, 92, 250, .12); }
.foot-links a[aria-current="page"] { color: var(--ink); }

/* MARK: Body */

.page-body { padding: 72px 0 40px; }
.page-body .container { max-width: calc(72ch + 64px); }

.doc { font-size: 17px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.doc > * + * { margin-top: 16px; }
.doc h2 { margin-top: 56px; font-size: 32px; line-height: 1.2; font-weight: 600; letter-spacing: -1.2px; }
.doc h3 { margin-top: 32px; font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.5px; }
.doc h2 + *, .doc h3 + * { margin-top: 12px; }
.doc > :first-child { margin-top: 0; }
.doc p, .doc li { color: var(--muted); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { display: grid; gap: 10px; }
.doc li { position: relative; padding-left: 26px; }
.doc li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-btn); }
.doc a { color: #c9b8ff; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.doc code { font: .88em ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 6px; border-radius: 6px; background: var(--f1); border: 1px solid var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); font-weight: 600; }
.doc td { color: var(--muted); }

.notice { padding: 24px; border-radius: 16px; background: var(--f1); border: 1px solid var(--line); font-size: 15px; line-height: 1.55; }
.notice p + p { margin-top: 12px; }
.doc > .notice + * { margin-top: 40px; }

/* Support: the contact card, and the ### questions as the home page's FAQ list. */
.contact { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; margin-bottom: 56px; padding: 28px; border-radius: 24px; border: 1px solid rgba(179, 155, 255, .4); background: var(--f1); box-shadow: var(--shadow); }
.contact h2 { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.8px; }
.contact p { margin-top: 6px; color: var(--muted); font-size: 15px; }
.contact .btn { height: 48px; }
.doc .faq { margin-top: 24px; padding: 4px 25px; }
.doc .faq summary { min-height: 68px; }
.doc .faq summary h3 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -.2px; }
.doc .faq .answer { padding: 0 36px 22px 0; }
.doc .faq .answer > * + * { margin-top: 12px; }
.doc .faq details p { padding: 0; }

/* Reset */
.reset-card { max-width: 560px; margin: 0 auto; padding: 40px; border-radius: 24px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); text-align: center; }
.reset-card .orb { margin-bottom: 24px; }
.reset-card > div > * + * { margin-top: 16px; }
.reset-card .lead { font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: -.4px; color: var(--ink); }
.dim { color: var(--muted); font-size: 15px; }

/* The footer on a text page: no need for the home page's tall wordmark block. */
.page .footer .container { min-height: 0; }

[hidden] { display: none !important; }

@media (max-width: 991px) {
  .page-title { font-size: 56px; letter-spacing: -3px; }
}

@media (max-width: 767px) {
  .page-hero { padding-bottom: 48px; }
  .page-head { padding-top: 32px; gap: 16px; }
  .page-title { font-size: 40px; letter-spacing: -2px; }
  .page-body { padding: 48px 0 24px; }
  .page-body .container { padding: 0 20px; }
  .doc { font-size: 16px; }
  .doc h2 { margin-top: 44px; font-size: 26px; letter-spacing: -.8px; }
  .notice { padding: 20px; }
  .contact { grid-template-columns: 1fr; justify-items: start; gap: 16px; padding: 24px; margin-bottom: 44px; }
  .contact .btn { width: 100%; }
  .doc .faq { padding: 4px 17px; }
  .doc .faq .answer { padding-right: 0; }
  .reset-card { padding: 32px 24px; }
  .reset-card .btn { width: 100%; }
}