/* PageContainer — shared wrapper for ds-v2 pages.

   Reads the container spec tokens:
     --pb-container-max-width   (1200px desktop)
     --pb-container-padding-x   (20px desktop, 14px mobile)

   Any ds-v2 page or composite that wants to align with the page grid
   should either use <PageContainer> directly or consume these tokens
   on its own wrapper (see Footer.__container for the latter pattern). */

.PageContainer-module__container___YyBjM {
    max-width: var(--pb-container-max-width);
    padding-inline: var(--pb-container-padding-x);
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

/* LegalPage — long-form policy / T&C layout for ds-v2.
   Used by: /privacy-policy, /terms-of-use, /acceptable-use-policy,
            /caution-notice, /g/affiliate/terms-and-conditions

   Tokens-only: every spacing, color, typography value comes from
   `tokens.css` (--pb-*), matching SecurityPage.module.css. No hardcoded
   colors or rems here. PageContainer applies horizontal page padding;
   we set vertical rhythm and inner type only.

   DSProvider resets `p`, `h1..h6`, `ul/ol/li`, `a` at (0,1,1). Chained
   selectors below (e.g. `.legalContent p`) land at (0,2,0) and beat
   the resets. */

/* ── Page rhythm ──────────────────────────────────────────────────── */

.LegalPage-module__page___N9GQU {
    padding-block: var(--pb-space-64) var(--pb-space-80);
    color: var(--pb-text-default);
    font-family: var(--pb-font-sans);
}

@media (max-width: 767px) {
    .LegalPage-module__page___N9GQU {
        padding-block: var(--pb-space-40) var(--pb-space-48);
    }
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.LegalPage-module__hero___qsTg8 {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pb-space-16);
    padding-block: var(--pb-space-64) var(--pb-space-40);
}

.LegalPage-module__lastUpdated___nSMYd {
    /* live `.policy_last_updated_label` uses #9770FF literal — keep it
       literal here because the Novus-aligned --pb-color-primary-40 is
       now #B888FF, which is too pale against white. */
    color: #9770FF;
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-semibold);
    line-height: var(--pb-lh-l);
    margin: 0;
}

.LegalPage-module__title___gycnm {
    /* live `.policy_name_title.u-text-style-displayl` = 56px / 1.2 / 500.
       --pb-display-l-lh is 62px (1.107) which sits ~5px tighter than the
       Webflow ratio. Keeping the token wins clean tokens-only discipline
       at the cost of a minor leading drift the eye barely notices. */
    font-family: var(--pb-font-display);
    font-size: var(--pb-display-l-size);
    line-height: var(--pb-display-l-lh);
    letter-spacing: var(--pb-display-l-tracking);
    font-weight: var(--pb-weight-medium);
    color: var(--pb-text-heading);
    margin: 0;
    max-width: 880px;
    text-wrap: balance;
}

@media (max-width: 767px) {
    .LegalPage-module__hero___qsTg8 {
        padding-block: var(--pb-space-40) var(--pb-space-24);
    }
    .LegalPage-module__lastUpdated___nSMYd {
        font-size: var(--pb-font-size-m);
    }
    .LegalPage-module__title___gycnm {
        font-size: var(--pb-display-s-size);
        line-height: var(--pb-display-s-lh);
        letter-spacing: var(--pb-display-s-tracking);
    }
}

/* ── Two-column layout (TOC sidebar + content) ────────────────────── */

.LegalPage-module__contentWrap___SnAbF {
    display: grid;
    grid-template-columns: 256px 1fr;
    gap: var(--pb-space-40);
    align-items: start;
    max-width: 60.38rem;
    margin: 0 auto;
    padding-top: var(--pb-space-24);
}

@media (max-width: 991px) {
    .LegalPage-module__contentWrap___SnAbF {
        grid-template-columns: 1fr;
        gap: var(--pb-space-20);
    }
}

/* ── TOC sidebar ──────────────────────────────────────────────────── */

.LegalPage-module__tocWrap___snHzZ {
    position: sticky;
    top: 7.5em;
    align-self: start;
}

@media (max-width: 991px) {
    .LegalPage-module__tocWrap___snHzZ {
        position: relative;
        top: auto;
    }
}

.LegalPage-module__tocInner___TBrmO {
    padding: var(--pb-space-32) var(--pb-space-24) 0 var(--pb-space-16);
    border-top: 1px solid var(--pb-color-grey-40);
    border-bottom: 1px solid var(--pb-color-grey-40);
    max-height: 79svh;
    overflow: hidden;
}

@media (max-width: 991px) {
    .LegalPage-module__tocInner___TBrmO {
        padding: var(--pb-space-12);
        border: 1px solid var(--pb-color-grey-40);
        border-radius: var(--pb-radius-16);
        max-height: none;
        background: var(--pb-surface-0);
    }
}

.LegalPage-module__tocTitle___e25Ke {
    color: var(--pb-text-heading);
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-semibold);
    line-height: var(--pb-lh-m);
    margin: 0;
}

@media (max-width: 991px) {
    .LegalPage-module__tocTitle___e25Ke {
        font-size: var(--pb-font-size-m);
    }
}

.LegalPage-module__tocLinks___EoKaq {
    display: flex;
    flex-direction: column;
    margin-top: var(--pb-space-12);
    border-left: 1px solid var(--pb-color-grey-40);
    padding-right: var(--pb-space-8);
    max-height: 66svh;
    overflow-y: auto;
}

@media (max-width: 991px) {
    .LegalPage-module__tocLinks___EoKaq {
        max-height: 16.63rem;
        padding: var(--pb-space-8);
        border-left: none;
        border-radius: var(--pb-radius-16);
    }
}

.LegalPage-module__tocLink___NXK7L:where(a) {
    margin-bottom: var(--pb-space-8);
    padding: var(--pb-space-4) var(--pb-space-16);
    color: var(--pb-text-subdued-1);
    font-size: var(--pb-font-size-m);
    font-weight: var(--pb-weight-regular);
    line-height: var(--pb-lh-m);
    border-left: 1px solid transparent;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

.LegalPage-module__tocLink___NXK7L:where(a):hover {
    color: var(--pb-text-default);
    border-left-color: var(--pb-text-default);
}

/* Active TOC entry — mirrors live `.toc_link.w--current`:
   solid 1px left border in heading color, switch text to heading color
   and bump weight to medium. */
.LegalPage-module__tocLinkActive___poP8m:where(a),
.LegalPage-module__tocLinkActive___poP8m:where(a):hover {
    color: var(--pb-text-default);
    border-left-color: var(--pb-text-default);
    font-weight: var(--pb-weight-medium);
}

@media (max-width: 991px) {
    .LegalPage-module__tocLink___NXK7L:where(a) {
        padding: var(--pb-space-8);
        border-left: none;
        border-radius: var(--pb-radius-8);
    }
    .LegalPage-module__tocLink___NXK7L:where(a):hover {
        background-color: var(--pb-surface-20);
        border-left: none;
    }
    .LegalPage-module__tocLinkActive___poP8m:where(a),
    .LegalPage-module__tocLinkActive___poP8m:where(a):hover {
        background-color: var(--pb-surface-20);
        border-left: none;
        border-radius: var(--pb-radius-8);
    }
}

/* ── Section list ─────────────────────────────────────────────────── */

.LegalPage-module__sectionList___D3EWy {
    display: flex;
    flex-direction: column;
    gap: var(--pb-space-48);
}

/* Each policy section is large and mostly off-screen on first paint.
   `content-visibility: auto` lets the browser skip layout/paint for
   off-screen articles, shaving TBT/LCP on long legal pages. The
   `contain-intrinsic-size` keeps the scrollbar stable while sections
   are virtually hidden — a generous height estimate is fine because
   the IntersectionObserver in LegalPage.tsx still works. */
.LegalPage-module__section___QVhyw {
    position: relative;
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

.LegalPage-module__anchor___ISGiI {
    position: absolute;
    top: -7.5em;
    left: 0;
    right: 0;
    pointer-events: none;
    height: 0;
    display: block;
}

@media (max-width: 991px) {
    .LegalPage-module__anchor___ISGiI {
        top: -11em;
    }
}

.LegalPage-module__sectionTitle___DvRdo {
    /* live `.policy_accordion_label` = 24/600/Inter Display, lh 1.4 (33.6px),
       margin-bottom 24 (gap from heading to first paragraph).
       --pb-lh-xl (32px) is the closest token; ~1.6px tighter than live
       and stays inside the token system. */
    color: var(--pb-text-heading);
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-2xl);
    line-height: var(--pb-lh-xl);
    font-weight: var(--pb-weight-semibold);
    margin: 0 0 var(--pb-space-24);
}

@media (max-width: 991px) {
    .LegalPage-module__sectionTitle___DvRdo {
        font-size: var(--pb-font-size-xl);
    }
}

/* ── Single-prose mode (caution-notice) ───────────────────────────── */

.LegalPage-module__proseWrap___QiB5M {
    max-width: 60.38rem;
    margin: 0 auto;
    padding-top: var(--pb-space-24);
}

/* ── Shared legal-content typography ──────────────────────────────── */

/* Live `.policy_para` body type uses Inter Display, NOT Inter sans —
   the marketing-page typography ramp keeps the display family across
   body too. Switching to `--pb-font-display` aligns weights and metrics
   with the H1/H2 above. */
.LegalPage-module__legalContent___Xt04x {
    color: var(--pb-text-subdued-1);
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-l);
    line-height: var(--pb-lh-l);
}

@media (max-width: 767px) {
    .LegalPage-module__legalContent___Xt04x {
        font-size: var(--pb-font-size-m);
    }
}

/* Inherit the family from `.legalContent` so chained `<p>` content keeps
   Inter Display. Margin spaces consecutive paragraphs by 16px — matches
   the rhythm Webflow gets from the parent flex `gap: 16px` on its
   accordion body. */
.LegalPage-module__legalContent___Xt04x p {
    margin: 0 0 var(--pb-space-16);
    font-family: inherit;
    color: var(--pb-text-subdued-1);
    line-height: var(--pb-lh-l);
}

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

/* Live `.policy_para strong` is the SAME color as the body text —
   the only thing that changes is weight. Earlier we promoted strong to
   the heading color; that read too loud against the muted body. */
.LegalPage-module__legalContent___Xt04x strong,
.LegalPage-module__legalContent___Xt04x b {
    color: inherit;
    font-weight: var(--pb-weight-medium);
}

/* Live `.policy_para a` keeps the body color and adds a 1px underline
   to mark it as a link. We previously coloured links in primary purple,
   which clashed with the heading style. */
.LegalPage-module__legalContent___Xt04x a {
    color: inherit;
    font-weight: var(--pb-weight-medium);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    word-break: break-word;
}

.LegalPage-module__legalContent___Xt04x a:hover {
    color: var(--pb-color-primary);
}

.LegalPage-module__legalContent___Xt04x ol,
.LegalPage-module__legalContent___Xt04x ul {
    margin: 0 0 var(--pb-space-16) var(--pb-space-24);
    padding-left: 0;
    list-style: revert;
}

.LegalPage-module__legalContent___Xt04x li {
    margin-bottom: var(--pb-space-8);
    line-height: var(--pb-lh-l);
}

.LegalPage-module__legalContent___Xt04x h3 {
    color: var(--pb-text-heading);
    font-family: var(--pb-font-display);
    font-size: var(--pb-font-size-xl);
    font-weight: var(--pb-weight-semibold);
    margin: var(--pb-space-24) 0 var(--pb-space-12);
    line-height: var(--pb-lh-l);
}

.LegalPage-module__legalContent___Xt04x h4 {
    color: var(--pb-text-heading);
    font-size: var(--pb-font-size-l);
    font-weight: var(--pb-weight-semibold);
    margin: var(--pb-space-20) 0 var(--pb-space-8);
    line-height: var(--pb-lh-l);
}

.LegalPage-module__legalContent___Xt04x table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--pb-space-16) 0;
    font-size: var(--pb-font-size-m);
    background-color: var(--pb-surface-10);
    border-radius: var(--pb-radius-8);
    overflow: hidden;
}

.LegalPage-module__legalContent___Xt04x th,
.LegalPage-module__legalContent___Xt04x td {
    border: 1px solid var(--pb-color-grey-40);
    padding: var(--pb-space-8) var(--pb-space-12);
    text-align: left;
    vertical-align: top;
}

.LegalPage-module__legalContent___Xt04x th {
    background-color: var(--pb-color-primary-10);
    color: var(--pb-text-heading);
    font-weight: var(--pb-weight-semibold);
}

.LegalPage-module__legalContent___Xt04x sup {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 1;
}