/* ─────────────────────────────────────────────────────────────────────────────
   legal.css — the public document world: Privacy, Cookies, Data Processing,
   Terms, SMS Policy.

   Loaded on top of marketing.css inside _MarketingLayout, so every --tr-* token
   is already in scope; nothing here redefines the palette.

   These pages are read the way an agency reads an SOP — skimmed for the one
   clause that matters, cited by number, and printed for the binder. So they are
   set like a controlled document rather than a marketing page: a navy control
   plate carrying the effective date and document reference, sections numbered
   in the margin so "§7" means something, a contents rail that tracks where the
   reader is, and a print stylesheet that drops the chrome.
   ───────────────────────────────────────────────────────────────────────────── */

.tr-legal {
    --lg-measure: 68ch;
    --lg-paper: #fff;
    background: var(--tr-light);
}

/* ── Control plate ──────────────────────────────────────────────────────────
   The quiet sibling of .tr-hero: same navy, no photograph. A document cover
   sheet does not need a picture on it. */
.lg-plate {
    background: var(--tr-navy-ink);
    color: #fff;
    padding: 9rem 0 3rem;
    border-bottom: 3px solid var(--tr-orange);
}

.lg-eyebrow {
    font-family: var(--tr-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.95rem;
    color: var(--tr-orange-bright);
    margin-bottom: 0.35rem;
}

/* marketing.css paints every heading navy-ink at (0,2,0); on the navy plate and the
   navy contact block that is invisible, so these two carry the extra class. */
.tr-legal .lg-plate h1 {
    color: #fff;
    font-family: var(--tr-font-display);
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    line-height: 1.02;
    margin-bottom: 0.75rem;
}

.lg-lede {
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.08rem;
    max-width: 62ch;
    margin-bottom: 0;
}

/* Metadata strip — the cover-sheet fields, hairline-divided. */
.lg-control {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.25rem;
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.lg-control > div {
    padding: 0.35rem 0;
}

.lg-control dt {
    font-family: var(--tr-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.1rem;
}

.lg-control dd {
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

/* ── Shell: contents rail + paper ───────────────────────────────────────── */
.lg-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 2.75rem;
    padding-bottom: 4.5rem;
}

@media (min-width: 992px) {
    .lg-shell {
        grid-template-columns: 224px minmax(0, 1fr);
        gap: 3.25rem;
    }

    /* Documents with no numbered sections of our own (the Terms, whose body is
       author-managed content) run full width — there is nothing to index. */
    .lg-shell--solo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Sticky lives on the <details> wrapper, not on the nav inside it: Chrome's
   ::details-content establishes containment, and a sticky descendant of it simply
   scrolls away. The wrapper is the grid item, so it also needs align-self:start —
   a stretched grid item is as tall as the document and never has anywhere to stick. */
@media (min-width: 992px) {
    .lg-index-wrap {
        position: sticky;
        top: 6.25rem;
        align-self: start;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}

.lg-index-head {
    font-family: var(--tr-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: var(--tr-gray);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--tr-navy);
    margin-bottom: 0.75rem;
}

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

.lg-index li {
    counter-increment: lg-toc;
}

.lg-index a {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    padding: 0.34rem 0 0.34rem 0.5rem;
    border-left: 2px solid var(--tr-line);
    color: var(--tr-slate);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1.3;
}

.lg-index a::before {
    content: counter(lg-toc);
    font-family: var(--tr-font-display);
    font-weight: 600;
    color: var(--tr-gray);
}

.lg-index a:hover {
    color: var(--tr-navy-ink);
    border-left-color: var(--tr-gray);
}

.lg-index a.is-current {
    color: var(--tr-navy-ink);
    font-weight: 600;
    border-left-color: var(--tr-orange);
}

.lg-index a.is-current::before {
    color: var(--tr-orange-text);
}

/* On phones the rail becomes a disclosure so it never pushes the document down. */
.lg-index-toggle {
    display: block;
    background: var(--lg-paper);
    border: 1px solid var(--tr-line);
    border-left: 3px solid var(--tr-navy);
    padding: 0.7rem 1rem;
    font-family: var(--tr-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: var(--tr-navy-ink);
    cursor: pointer;
}

/* display:block strips the default disclosure triangle, so draw the affordance. */
.lg-index-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    list-style: none;
}

.lg-index-toggle::-webkit-details-marker {
    display: none;
}

.lg-index-toggle::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.25rem;
    border-right: 2px solid var(--tr-orange-text);
    border-bottom: 2px solid var(--tr-orange-text);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
}

.lg-index-wrap[open] > .lg-index-toggle::after {
    margin-top: 0.15rem;
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
    .lg-index-toggle::after {
        transition: none;
    }
}

.lg-index-body {
    padding-top: 1rem;
}

@media (min-width: 992px) {
    .lg-index-toggle {
        display: none;
    }

    .lg-index-body {
        padding-top: 0;
    }
}

/* ── Paper ──────────────────────────────────────────────────────────────── */
.lg-doc {
    background: var(--lg-paper);
    border: 1px solid var(--tr-line);
    border-top: 3px solid var(--tr-navy);
    padding: 2rem 1.35rem 2.5rem;
    max-width: 100%;
}

@media (min-width: 768px) {
    .lg-doc {
        padding: 3rem 3.25rem 3.5rem;
    }
}

/* Prose is clamped to a readable measure; tables are not, because a four-column
   disclosure table squeezed into 68ch is unreadable in a different way. Clamp the
   text elements individually rather than every child of the paper — the sections
   themselves have to stay full width for the tables inside them to breathe. */
.lg-sec > p,
.lg-sec > ul,
.lg-sec > ol,
.lg-sec > h2,
.lg-sec > h3,
.lg-plain,
.lg-defs,
.lg-contact,
.lg-terms-body {
    max-width: var(--lg-measure);
}

.lg-wide {
    max-width: 100%;
}

.lg-doc p,
.lg-doc li {
    color: var(--tr-slate);
    font-size: 1.02rem;
    line-height: 1.68;
}

.lg-doc strong {
    color: var(--tr-navy-ink);
}

.lg-doc a {
    color: var(--tr-orange-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lg-doc a:hover {
    color: var(--tr-navy);
}

/* Section heads: the § number lives in the margin on wide screens, inline on
   narrow ones. It is a real reference — clauses below cite each other by it. */
.lg-sec {
    scroll-margin-top: 6.5rem;
}

.lg-sec + .lg-sec {
    margin-top: 2.75rem;
}

.lg-sec > h2 {
    position: relative;
    font-family: var(--tr-font-display);
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.15;
    color: var(--tr-navy-ink);
    padding-bottom: 0.6rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tr-line);
}

.lg-num {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tr-orange-text);
    margin-right: 0.55rem;
    vertical-align: 0.28em;
}

@media (min-width: 1200px) {
    .lg-num {
        position: absolute;
        left: -3.1rem;
        top: 0.15rem;
        width: 2.5rem;
        margin-right: 0;
        text-align: right;
        vertical-align: baseline;
    }
}

.lg-sec h3 {
    font-family: var(--tr-font-display);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--tr-navy);
    margin: 1.75rem 0 0.6rem;
}

/* Author-managed plain text (the Terms body) — preserve its own line breaks and
   give it the same measure and rhythm as authored sections. */
.lg-terms-body {
    white-space: pre-wrap;
    max-width: var(--lg-measure);
    color: var(--tr-slate);
    font-size: 1.02rem;
    line-height: 1.68;
}

/* ── Plain-terms callout ────────────────────────────────────────────────── */
.lg-plain {
    background: var(--tr-light);
    border-left: 3px solid var(--tr-orange);
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 1.5rem;
}

.lg-plain-label {
    display: block;
    font-family: var(--tr-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    color: var(--tr-orange-text);
    margin-bottom: 0.3rem;
}

.lg-plain p {
    font-size: 0.98rem;
}

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

/* ── Tables ─────────────────────────────────────────────────────────────── */
.lg-tablewrap {
    overflow-x: auto;
    margin: 1.25rem 0 1.5rem;
    border: 1px solid var(--tr-line);
}

.lg-table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: 0.94rem;
}

.lg-table th {
    font-family: var(--tr-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    color: #fff;
    background: var(--tr-navy);
    text-align: left;
    padding: 0.65rem 0.85rem;
    vertical-align: bottom;
}

.lg-table td {
    padding: 0.7rem 0.85rem;
    border-top: 1px solid var(--tr-line);
    color: var(--tr-slate);
    vertical-align: top;
    line-height: 1.5;
}

.lg-table tbody tr:nth-child(even) {
    background: #fafcfe;
}

.lg-table td:first-child {
    color: var(--tr-navy-ink);
    font-weight: 600;
}

.lg-table code {
    font-size: 0.86rem;
    color: var(--tr-navy-ink);
    background: var(--tr-light);
    padding: 0.1rem 0.3rem;
    border: 1px solid var(--tr-line);
}

/* ── Definition rows (subprocessors, rights) ────────────────────────────── */
.lg-defs {
    margin: 1.1rem 0 1.4rem;
}

.lg-defs > div {
    padding: 0.85rem 0;
    border-top: 1px solid var(--tr-line);
}

.lg-defs > div:last-child {
    border-bottom: 1px solid var(--tr-line);
}

.lg-defs dt {
    font-family: var(--tr-font-display);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--tr-navy-ink);
    margin-bottom: 0.15rem;
}

.lg-defs dd {
    margin-bottom: 0;
    color: var(--tr-slate);
    font-size: 0.98rem;
    line-height: 1.6;
}

/* ── Contact block that closes every document ───────────────────────────── */
.lg-contact {
    margin-top: 2.75rem;
    background: var(--tr-navy-ink);
    color: rgba(255, 255, 255, 0.9);
    padding: 1.5rem 1.75rem;
    border-left: 3px solid var(--tr-orange);
}

.tr-legal .lg-contact h2 {
    font-family: var(--tr-font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
    padding: 0;
    border: 0;
}

.lg-contact p {
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0.5rem;
}

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

.lg-contact a {
    color: var(--tr-orange-bright);
}

.lg-contact a:hover {
    color: #fff;
}

/* Cross-links between the documents. */
.lg-related {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.75rem;
}

.lg-related a {
    font-family: var(--tr-font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.85rem;
    color: var(--tr-navy);
    background: #fff;
    border: 1px solid var(--tr-line);
    padding: 0.5rem 0.9rem;
    text-decoration: none;
}

.lg-related a:hover {
    border-color: var(--tr-navy);
    color: var(--tr-navy-ink);
}

/* ── Print: these get filed. Drop everything that is not the document. ──── */
@media print {
    .tr-nav,
    .tr-footer,
    .lg-index-wrap,
    .lg-related {
        display: none !important;
    }

    .tr-legal {
        background: #fff;
    }

    .lg-plate {
        padding: 0 0 1rem;
        background: #fff;
        color: #000;
        border-bottom: 2px solid #000;
    }

    .lg-plate h1,
    .lg-control dd {
        color: #000;
    }

    .lg-eyebrow,
    .lg-control dt {
        color: #444;
    }

    .lg-lede {
        color: #222;
    }

    .lg-control {
        border-top-color: #999;
    }

    .lg-shell {
        display: block;
        padding: 0;
    }

    .lg-doc {
        max-width: none;
        padding: 0;
        border: 0;
    }

    .lg-sec {
        page-break-inside: avoid;
    }

    .lg-contact {
        background: #fff;
        color: #000;
        border-left: 2px solid #000;
    }

    .lg-contact h2,
    .lg-contact p,
    .lg-contact a {
        color: #000;
    }

    .lg-table th {
        background: #fff;
        color: #000;
        border-bottom: 2px solid #000;
    }
}