/* ==========================================================================
   Legal pages — Terms & Conditions, Privacy Policy.

   These two documents share every rule here; nothing below is specific to
   either one. They are ordinary site pages (inside _Layout, under the nav and
   above the footer) rather than the standalone light-only HTML files they used
   to be, so everything is expressed in the theme tokens from site.css and the
   pages follow the reader's light/dark choice and font-size setting like the
   rest of the site.

   Two deliberate omissions:

   - No scroll-reveal (.animate-on-scroll). A legal page is read by people
     looking for one clause, and half of them arrive with Ctrl+F already open.
     Text that fades in on scroll is text the browser's find bar can land on
     while it is still invisible.
   - No collapsed sections. Same reason: everything is in the DOM, expanded,
     findable and printable. The table of contents is how the page gets
     navigable, not an accordion.
   ========================================================================== */

/* ── Page shell ─────────────────────────────────────────────────────────── */

.legal-page {
    /* The reading measure. Legal text is long and unillustrated, so the column
       is narrower than the site's usual container — anything wider and the eye
       loses its place between lines. */
    --legal-measure: 46rem;
    padding-bottom: 3rem;
}

/* ── Header band ────────────────────────────────────────────────────────── */

.legal-hero {
    background-color: var(--dark-1);
    border-bottom: 1px solid var(--dark-5);
    padding: 2.75rem 0 2.25rem;
    margin-bottom: 2.5rem;
}

.legal-hero-inner {
    max-width: var(--legal-measure);
}

.legal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green-ink);
    background: var(--green-glow);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.9rem;
}

.legal-eyebrow i {
    width: unset;
    height: unset;
}

.legal-title {
    font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.legal-lead {
    color: var(--text-secondary);
    font-size: 1.03rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

/* Effective / last-updated dates and the link across to the sibling document. */
.legal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legal-meta i {
    width: unset;
    height: unset;
    margin-right: 0.3rem;
}

.legal-meta a {
    color: var(--blue-ink);
    text-decoration: none;
    font-weight: 600;
}

.legal-meta a:hover {
    text-decoration: underline;
}

/* ── Two-column layout: sticky contents + document ──────────────────────── */

/* Used three times on the page — around the header band, around the document,
   and around the end matter — so that all three sit on the same two columns
   and the title, the first paragraph and the copyright line share an edge.
   The header and the end matter have nothing to put in the first column, so
   they open with an empty .legal-rail-spacer. */
.legal-layout {
    display: grid;
    /* minmax(0, 1fr) rather than 1fr. A grid track sized 1fr will not shrink
       below its content's min-content width, and this column contains tables
       with a min-width — so a plain 1fr let the track grow past the viewport
       and scrolled the whole page sideways on a phone instead of scrolling the
       table inside its own box. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

/* Same reason, one level down: a grid item's default min-width is auto. */
.legal-layout > * {
    min-width: 0;
}

.legal-rail-spacer {
    display: none;
}

@media (min-width: 992px) {
    .legal-layout {
        /* Both tracks are bounded: the rail is fixed and the document column
           stops at the reading measure, so the pair centres as a unit instead
           of the document drifting to the left of a column that grew with the
           viewport. */
        grid-template-columns: 15.5rem minmax(0, var(--legal-measure));
        gap: 3rem;
        justify-content: center;
    }

    .legal-rail-spacer {
        display: block;
    }
}

.legal-toc {
    align-self: start;
}

@media (min-width: 992px) {
    .legal-toc {
        position: sticky;
        /* Clears the fixed navbar (body has 4.5rem of padding for it). */
        top: 5.5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        /* The rail scrolls independently of the page; its own scrollbar is
           noise next to a document that already has one. */
        scrollbar-width: thin;
    }
}

.legal-toc-head {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.legal-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--dark-5);
}

.legal-toc-list a {
    display: block;
    padding: 0.34rem 0 0.34rem 0.85rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-size: 0.86rem;
    line-height: 1.35;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.legal-toc-list a:hover {
    color: var(--text-primary);
    border-left-color: var(--dark-5);
}

/* Bootstrap's scrollspy marks the section currently under the reader. */
.legal-toc-list a.active {
    color: var(--green-ink);
    border-left-color: var(--green);
    font-weight: 600;
}

/* On narrow screens the rail becomes a plain card above the document. */
@media (max-width: 991.98px) {
    .legal-toc {
        background: var(--dark-3);
        border: 1px solid var(--dark-5);
        border-radius: 12px;
        padding: 1.1rem 1.25rem;
    }

    .legal-toc-list {
        columns: 2;
        column-gap: 1.25rem;
    }

    .legal-toc-list li {
        break-inside: avoid;
    }
}

@media (max-width: 575.98px) {
    .legal-toc-list {
        columns: 1;
    }
}

/* ── Document body ──────────────────────────────────────────────────────── */

.legal-body {
    max-width: var(--legal-measure);
    color: var(--text-secondary);
    font-size: 0.97rem;
    line-height: 1.7;
}

.legal-body section {
    /* Anchor targets have to clear the fixed navbar, exactly as the home
       page's sections do. */
    scroll-margin-top: 5.5rem;
    padding-bottom: 0.5rem;
}

.legal-body section + section {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--dark-5);
}

.legal-body h2 {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 0.9rem;
}

/* The section number, set apart from the heading it belongs to. */
.legal-num {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--green);
    font-variant-numeric: tabular-nums;
    padding-top: 0.2rem;
}

.legal-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.5rem 0 0.6rem;
}

.legal-body p {
    margin-bottom: 0.9rem;
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 1rem;
    padding-left: 1.3rem;
}

.legal-body li {
    margin-bottom: 0.45rem;
}

.legal-body li::marker {
    color: var(--text-muted);
}

.legal-body strong {
    color: var(--text-primary);
    font-weight: 650;
}

.legal-body a {
    color: var(--blue-ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-body a:hover {
    color: var(--blue);
}

/* Defined terms — "the Service", "the Company" — on first use. */
.legal-term {
    color: var(--text-primary);
    font-weight: 650;
}

/* ── Callouts ───────────────────────────────────────────────────────────── */

.legal-callout {
    border-radius: 12px;
    border: 1px solid var(--dark-5);
    background: var(--dark-3);
    padding: 1.1rem 1.25rem;
    margin: 1.25rem 0;
}

.legal-callout > :last-child {
    margin-bottom: 0;
}

.legal-callout-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.legal-callout-title i {
    width: unset;
    height: unset;
    font-size: 1.05rem;
}

/* Reassurance — the things the reader hoped would be true. */
.legal-callout--good {
    background: var(--green-glow);
    border-color: transparent;
}

.legal-callout--good .legal-callout-title {
    color: var(--green-ink);
}

/* Neutral emphasis — worth noticing, nothing at stake. */
.legal-callout--info {
    background: var(--blue-glow);
    border-color: transparent;
}

.legal-callout--info .legal-callout-title {
    color: var(--blue-ink);
}

/* The clauses a reader would be annoyed to discover later: safety, refunds,
   liability. Highlighted rather than buried, on purpose. */
.legal-callout--warn {
    background: var(--yellow-glow);
    border-color: transparent;
}

.legal-callout--warn .legal-callout-title {
    color: var(--yellow-dim);
}

[data-bs-theme="dark"] .legal-callout--warn .legal-callout-title {
    color: var(--yellow);
}

/* ── "The short version" summary at the top of each document ────────────── */

.legal-summary {
    background: var(--dark-3);
    border: 1px solid var(--dark-5);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    margin-bottom: 2.25rem;
}

.legal-summary-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.legal-summary-head i {
    color: var(--green);
    width: unset;
    height: unset;
}

.legal-summary-note {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.legal-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.legal-summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    line-height: 1.55;
}

.legal-summary-list i {
    color: var(--green);
    flex-shrink: 0;
    width: unset;
    height: unset;
    margin-top: 0.28rem;
}

/* ── Tables (sub-processors, retention, allowances, pricing) ────────────── */

.legal-table-wrap {
    /* A table wider than the column scrolls inside itself; the page never
       scrolls sideways. */
    overflow-x: auto;
    margin: 1.1rem 0 1.25rem;
    border: 1px solid var(--dark-5);
    border-radius: 12px;
}

.legal-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid var(--dark-5);
}

.legal-table thead th {
    background: var(--dark-4);
    color: var(--text-primary);
    font-weight: 650;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: 0;
}

.legal-table tbody th {
    color: var(--text-primary);
    font-weight: 650;
    white-space: nowrap;
}

/* ── Price cards, built from Pricing.json ───────────────────────────────── */

.legal-plans {
    display: grid;
    gap: 1rem;
    margin: 1.25rem 0;
}

@media (min-width: 576px) {
    .legal-plans {
        grid-template-columns: 1fr 1fr;
    }
}

.legal-plan {
    border: 1px solid var(--dark-5);
    border-radius: 14px;
    background: var(--dark-3);
    padding: 1.1rem 1.2rem;
}

.legal-plan-name {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.legal-plan-name i {
    width: unset;
    height: unset;
}

.legal-plan-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.legal-plan-period {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-left: 0.25rem;
    font-weight: 500;
}

.legal-plan-billing {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ── Footer of the document ─────────────────────────────────────────────── */

.legal-end {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dark-5);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.legal-end-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.legal-end-links a {
    color: var(--blue-ink);
    text-decoration: none;
    font-weight: 600;
}

.legal-end-links a:hover {
    text-decoration: underline;
}

/* ── Print ──────────────────────────────────────────────────────────────── */

/* People print and file these. Printed, the contents rail and the site chrome
   are dead weight, and coloured tints turn to grey mud. */
@media print {
    /* The header band stays: on paper the title, the effective date and the
       "last updated" date are the first things anyone checks, and a printed
       policy with no version on it is not worth filing. Only the chrome and
       the navigation go. */
    .legal-toc,
    .legal-end-links,
    #footer,
    .navbar,
    .scroll-top {
        display: none !important;
    }

    .legal-hero {
        background: transparent;
        border-bottom: 1px solid #999;
        padding-top: 0;
        margin-bottom: 1.5rem;
    }

    .legal-title,
    .legal-lead,
    .legal-meta {
        color: #000;
    }

    .legal-eyebrow {
        background: transparent;
        color: #000;
        padding-left: 0;
    }

    .legal-layout {
        display: block;
    }

    .legal-body,
    .legal-body p,
    .legal-body li,
    .legal-body h2,
    .legal-body h3 {
        color: #000;
        max-width: none;
    }

    .legal-callout,
    .legal-summary {
        background: transparent;
        border: 1px solid #999;
    }

    .legal-body section {
        break-inside: avoid-page;
    }
}