/* /privacy and /support. Loaded after landing.css, whose fonts, tokens, masthead and links these pages share. */

.page { padding-block: clamp(24px, 5vw, 56px) clamp(72px, 9vw, 128px); }
.page-head { max-width: 46rem; }
.page-head h1 { font-size: clamp(2.5rem, 5.6vw, 4.25rem); line-height: 1; letter-spacing: -0.01em; }
.page-head .lede { margin-top: 24px; }
.page-head .status { margin-top: 28px; }

/* Long-form text: one readable column. */
.doc { max-width: 42rem; margin-top: clamp(48px, 6vw, 80px); }
.doc h2 { margin-top: 56px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.15; letter-spacing: -0.005em; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 28px 0 0; font: 500 1.0625rem/1.4 var(--text); color: var(--ink); }
.doc p, .doc ul { margin: 16px 0 0; color: var(--second); }
.doc p strong, .doc li strong { color: var(--ink); font-weight: 500; }
.doc ul { padding-left: 1.1em; }
.doc li { margin-top: 10px; padding-left: 4px; }
.doc li::marker { color: var(--violet-ink); }
.doc a { color: var(--ink); }

/* The quick facts on /support, set like the families menu. */
.facts { list-style: none; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; max-width: 42rem; }
.facts li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--hair); }
.facts li:first-child { border-top: 1px solid var(--hair); }
.facts .k { font: 400 0.8125rem/1.5 var(--mono); color: var(--second); }
.facts .v { color: var(--ink); }

/* FAQ: native <details>, no script. */
.faq { max-width: 42rem; margin-top: clamp(56px, 7vw, 96px); }
.faq > h2 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.08; }
.faq-group { margin: 40px 0 0; font: 400 0.8125rem/1.5 var(--mono); color: var(--second); letter-spacing: 0.01em; }
.faq details { border-bottom: 1px solid var(--hair); }
.faq .faq-group + details { margin-top: 12px; border-top: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; min-height: 44px; padding-block: 18px; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 500; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.25rem/1 var(--mono); color: var(--violet-ink); transition: transform 300ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; color: var(--second); max-width: 38rem; }
.faq details p + p { margin-top: -8px; }
.faq details a { color: var(--ink); }

.closing-line { max-width: 42rem; margin-top: 56px; color: var(--second); }
.closing-line a { color: var(--ink); }

/* The small footer these pages share. */
.footer--page { justify-content: flex-start; gap: 8px; }
.footer--page .sep { color: var(--second); }
.footer--page [aria-current="page"] { text-decoration-color: var(--violet); }

@media (max-width: 860px) {
  .facts li { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
}

/* Too narrow for one line: the credit takes its own, without a dot left hanging. */
@media (max-width: 480px) {
  .footer--page .sep--credit { display: none; }
  .footer--page > span:last-child { flex-basis: 100%; }
}