/* ==========================================================================
   Pace — document pages (services, legal, privacy, terms)
   A single readable measure. Legal wording is untouched; only the setting
   changes.
   ========================================================================== */

.doc-header {
    padding-block: var(--space-10) var(--space-7);
    border-bottom: 1px solid var(--rule);
}

.doc-header h1 {
    max-width: 24ch;
}

.doc-header__meta {
    margin-top: var(--space-4);
    font-size: var(--text-base);
    color: var(--ink-3);
}

.doc-header__lead {
    max-width: 42rem;
    margin-top: var(--space-5);
    font-size: var(--text-lg);
    color: var(--ink-2);
    line-height: var(--leading-body);
}

.doc {
    padding-block: var(--space-9) var(--space-11);
}

.doc__body {
    max-width: 42rem;
}

.doc__body h2 {
    font-size: var(--size-h3);
    margin-top: var(--space-9);
    margin-bottom: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.doc__body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.doc__body h3 {
    font-size: var(--text-lg);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.doc__body p {
    margin-bottom: var(--space-4);
    color: var(--ink-2);
    line-height: var(--leading-body);
}

.doc__body ul,
.doc__body ol {
    margin: 0 0 var(--space-5) var(--space-5);
    color: var(--ink-2);
    line-height: var(--leading-body);
}

.doc__body li {
    margin-bottom: var(--space-2);
    padding-left: var(--space-2);
}

.doc__body li::marker {
    color: var(--ink-3);
}

.doc__body a {
    color: var(--accent);
    text-decoration-color: var(--accent-rule);
}

.doc__body a:hover {
    text-decoration-color: var(--accent);
}

.doc__body strong {
    color: var(--ink);
}

.doc__body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
}

.doc__body th,
.doc__body td {
    padding: var(--space-3);
    text-align: left;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

.doc__body th {
    font-weight: var(--weight-semi);
    color: var(--ink);
    border-bottom-color: var(--rule-strong);
}

.doc__body td {
    color: var(--ink-2);
}

/* Callout used for contact blocks and notices */
.doc-note {
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

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

/* ==========================================================================
   Long-form legal documents
   The markup here is carried over unchanged from the original pages so the
   wording stays untouched; only the setting is new.
   ========================================================================== */

.shell {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-10);
    align-items: start;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-10) var(--gutter) var(--space-11);
}

/* --- Table of contents --- */

.toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    padding-right: var(--space-4);
}

.toc-title {
    margin-bottom: var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}

.toc ol {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
}

.toc li {
    counter-increment: toc;
    margin-bottom: var(--space-1);
}

.toc a {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: var(--space-1);
    padding: 0.3125rem 0;
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}

.toc a::before {
    content: counter(toc, decimal-leading-zero);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.toc a:hover {
    color: var(--ink);
}

/* --- The document itself --- */

.legal {
    max-width: 44rem;
}

.legal > header {
    padding-bottom: var(--space-7);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--rule);
}

.legal h1 {
    margin-bottom: var(--space-4);
}

.last-updated {
    font-size: var(--text-base);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.legal .lead {
    margin-top: var(--space-5);
    font-size: var(--text-lg);
    color: var(--ink-2);
}

.legal section {
    margin-bottom: var(--space-9);
    scroll-margin-top: 6rem;
}

.legal h2 {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
    font-size: var(--size-h3);
}

.legal h3 {
    margin: var(--space-6) 0 var(--space-3);
    font-size: var(--text-lg);
}

/* The section number set as a quiet marginal figure */
.num {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.legal p {
    margin-bottom: var(--space-4);
    color: var(--ink-2);
    line-height: var(--leading-body);
}

.legal ul,
.legal ol {
    margin: 0 0 var(--space-5) var(--space-5);
    color: var(--ink-2);
    line-height: var(--leading-body);
}

.legal li {
    margin-bottom: var(--space-2);
    padding-left: var(--space-2);
}

.legal li::marker {
    color: var(--ink-3);
}

.legal a {
    color: var(--accent);
    text-decoration-color: var(--accent-rule);
}

.legal a:hover {
    text-decoration-color: var(--accent);
}

.legal strong {
    color: var(--ink);
}

/* --- Key facts block --- */

/* Separate cards rather than a hairline grid: the number of facts varies per
   document, and a shared grid leaves an empty lit cell when it does not
   divide evenly. */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.fact {
    padding: var(--space-4);
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
}

.fact-label {
    margin-bottom: 0.125rem;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-3);
}

.fact-value {
    font-size: var(--text-base);
    color: var(--ink);
}

/* --- Callouts --- */

.callout {
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    background: var(--paper-sunken);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--ink-3);
    border-radius: var(--radius-sm);
}

.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child {
    margin-bottom: 0;
}

.callout.warn {
    border-left-color: var(--warn);
    background: color-mix(in srgb, var(--warn) 5%, var(--paper-raised));
}

.callout.legal-emphasis {
    border-left-color: var(--ink);
    background: var(--paper-raised);
}

/* Clauses that must legally remain in capitals keep their case, but they are
   set smaller and spaced so they read as emphasis rather than shouting. */
.all-caps-emphasis,
.legal-emphasis .all-caps-emphasis {
    display: block;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    line-height: 1.6;
    color: var(--ink-2);
}

/* --- Tables --- */

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-6);
    font-size: var(--text-base);
}

.legal-table th,
.legal-table td {
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
}

.legal-table th {
    font-weight: var(--weight-semi);
    color: var(--ink);
    border-bottom-color: var(--rule-strong);
}

.legal-table td {
    color: var(--ink-2);
}

/* Purpose / lawful basis / data categories reads best with the first two
   columns held narrow so the categories column can breathe. */
.legal-table--basis {
    table-layout: fixed;
}

.legal-table--basis th:nth-child(1) {
    width: 32%;
}

.legal-table--basis th:nth-child(2) {
    width: 30%;
}

@media (max-width: 900px) {
    .shell {
        grid-template-columns: 1fr;
        gap: var(--space-7);
        padding-top: var(--space-8);
    }

    .toc {
        position: static;
        max-height: none;
        padding: var(--space-5);
        border: 1px solid var(--rule);
        border-radius: var(--radius);
        background: var(--paper-sunken);
    }

    .toc ol {
        columns: 2;
        column-gap: var(--space-6);
    }
}

@media (max-width: 560px) {
    .toc ol {
        columns: 1;
    }

    .legal h2 {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

/* --------------------------------------------------------------------------
   Services page cards
   -------------------------------------------------------------------------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: var(--space-8);
}

.service {
    padding: var(--space-7) var(--space-6);
    background: var(--paper);
}

.service h3 {
    margin-bottom: var(--space-2);
}

.service p {
    font-size: var(--text-base);
    color: var(--ink-2);
}

@media (max-width: 640px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Company facts list
   -------------------------------------------------------------------------- */

.facts {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.facts dt {
    font-size: var(--text-base);
    color: var(--ink-3);
}

.facts dd {
    font-size: var(--text-base);
    color: var(--ink);
}

@media (max-width: 560px) {
    .facts {
        grid-template-columns: 1fr;
        gap: var(--space-1) 0;
    }

    .facts dd {
        margin-bottom: var(--space-4);
    }
}