/* ==========================================================================
   page.css — static pages (privacy & terms) and the error pages.
   ========================================================================== */

.page-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 26px max(16px, env(safe-area-inset-left)) 0;
}

.page-head h1 {
    font-size: clamp(1.75rem, 6vw, 2.25rem);
    letter-spacing: -.035em;
    margin: 0 0 12px;
}

/* Only the legal and error pages carry an intro paragraph; the tool pages go
   straight from the eyebrow into the instrument. */
.page-head .lede {
    font-size: 1.0625rem;
    color: var(--on-surface-variant);
    text-wrap: pretty;
}

.updated {
    margin-top: 12px;
    font-size: .8125rem;
    color: var(--outline);
}

/* Table of contents ------------------------------------------------------- */
.toc {
    margin: 28px 0 8px;
    padding: 18px 20px;
    border-radius: 22px;
    background: var(--sc-low);
    border: 1px solid var(--outline-variant);
}

.toc h2 {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin: 0 0 10px;
}

.toc ol {
    margin: 0;
    padding-inline-start: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toc li {
    color: var(--on-surface-variant);
}

.toc a {
    font-size: .9375rem;
}

/* Prose ------------------------------------------------------------------- */
.prose section {
    margin-top: 34px;
    scroll-margin-top: 74px;
}

.prose h2 {
    font-size: 1.25rem;
    margin: 0 0 10px;
}

.prose p {
    margin: 0 0 14px;
    color: var(--on-surface-variant);
    text-wrap: pretty;
}

.prose p:last-child {
    margin-bottom: 0;
}

/* Error pages ------------------------------------------------------------- */
.error-actions {
    margin-top: 24px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.error-actions .btn {
    flex: 0 1 auto;
}

.page-wrap .related {
    margin-top: 44px;
}