/* =========================================================
   LEGAL / POLICY DOCUMENT LAYER — .lg-*
   Privacy Policy, Terms of Service, Cookie Policy,
   Do Not Sell or Share, Warranty.

   The five pages used to render the legacy `.header-title`
   lockup over a photo, then dump their whole document into a
   single `.s-basic` slab styled by m051622.css / m072224.css:
   centred uppercase 1.2rem h3s, 1.1rem/2rem grey paragraphs,
   `list-style-position: inside` lists, and no measure of its
   own. This is one dark, left-aligned document layer for all
   five, on the SAME measure as the footer and the headers
   above them.

   Markup comes from ONE partial: includes/legal-doc.php.
   `.s-basic` is left exactly as it is — build-price and
   vans-for-sale still render through it.

   The band padding is .pg-section's (page-sections.css), so a
   legal page shares its left edge with About, Careers and the
   footer. Everything restates its type because the sitewide
   reset in m072224.css sets `* { font-weight: 300; margin: 0;
   list-style: none; color: var(--c3) }`, `p { font-size:
   1.1rem; line-height: 2rem }` and `h2, h3 { uppercase;
   1.2rem }` — inheriting from a wrapper never survives.
   ========================================================= */

/* ---- Hero plates --------------------------------------------------------
   The five background classes for includes/page-hero.php. They live here
   rather than in m072224.css for the same reason page-hero.css carries
   .header.page-hero.team-header-img: these pages are the only callers, and
   the sheet that draws them should own them.

   `.header` (m072224.css) already supplies `background-size: cover` and
   `background-position: center`, so only the image is set. Doubled
   `.header.page-hero` to sit at the same (0,2,0) the shared hero uses. */
.header.page-hero.lg-hero--privacy {
    background-image: url(/assets/images/models-bg-12.jpg);
}

.header.page-hero.lg-hero--terms {
    background-image: url(/assets/images/models-bg-8.jpg);
}

.header.page-hero.lg-hero--cookies {
    background-image: url(/assets/images/models-bg-11.jpg);
}

.header.page-hero.lg-hero--rights {
    background-image: url(/assets/images/models-bg-10.jpg);
}

.header.page-hero.lg-hero--warranty {
    background-image: url(/assets/images/models-bg-14.jpg);
}

/* ---- Document shell ----------------------------------------------------- */

/* Prose column left, contents rail right — so the document's first character
   still lands on the footer's left edge. (A left-hand rail would push every
   line of the page inward and break the site's one shared left edge.)

   The rail is FIRST in the DOM — it is a navigation aid, and a reader on a
   screen reader or a phone should meet it before 8,000 words of policy — and
   is placed into the second column here. Nothing about the visual order is
   left to source order. */
.lg-doc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
    gap: clamp(2rem, 4vw, 4.5rem);
}

.lg-doc__rail {
    grid-column: 2;
    grid-row: 1;
}

.lg-doc__grid > .lg-body {
    grid-column: 1;
    grid-row: 1;
}

@media only screen and (max-width: 1100px) {
    .lg-doc__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lg-doc__rail,
    .lg-doc__grid > .lg-body {
        grid-column: 1;
        grid-row: auto;
    }
}

/* Effective / revised date. A chip rather than a heading: it qualifies the
   document, it is not a section of it. */
.lg-stamp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    padding: 0.42rem 0.85rem;

    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--theme-radius-pill, 999px);
    background: var(--theme-surface-white-04, rgba(255, 255, 255, 0.04));

    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lg-stamp i {
    color: var(--theme-accent, #aa0000);
    font-size: 0.82rem;
}

/* ---- Contents rail ------------------------------------------------------
   Same material as the navbar dropdown and the section-nav capsule: overlay
   body, the shared hairline rim, panel radius, blur on the plate itself.

   It is a <details> so the list can be folded away on a phone, where 20-odd
   links would otherwise stand between the reader and the document. On desktop
   it sits in its own sticky column and the summary is hidden — the inline
   script in includes/legal-doc.php is what closes it below the breakpoint,
   during parse, so it never opens and snaps shut. With JS off it simply stays
   open at every width, which is the harmless failure.

   `position: sticky` goes on the <details>, never on the grid item that holds
   it: a sticky box can only travel inside its containing block, and a grid
   item is exactly as tall as the rail itself. .lg-doc__rail is that item —
   it stretches to the row's height (the document's), which is the room the
   rail then slides through. */
.lg-toc {
    position: sticky;
    top: calc(var(--nav-h, 3.3rem) + 1.25rem);

    max-height: calc(100vh - var(--nav-h, 3.3rem) - 4rem);
    overflow: hidden auto;

    padding: 1.1rem 1.15rem;

    border: 1px solid var(--nav-dropdown-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--theme-radius-md, 1rem);
    background: var(--theme-overlay-surface-88, rgba(26, 27, 30, 0.88));
    box-shadow: var(--theme-shadow-card, 0 14px 34px rgba(0, 0, 0, 0.34));

    backdrop-filter: var(--theme-blur-md, blur(14px));
    -webkit-backdrop-filter: var(--theme-blur-md, blur(14px));

    /* The rail scrolls itself when a document outruns the viewport; hide the
       bar the way html/body do sitewide (m072224.css). */
    scrollbar-width: none;
}

.lg-toc::-webkit-scrollbar {
    display: none;
}

.lg-toc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    color: var(--theme-text-soft, #989ba3);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    cursor: pointer;
    list-style: none;
}

/* Safari draws its own disclosure triangle through this pseudo-element. */
.lg-toc__summary::-webkit-details-marker {
    display: none;
}

.lg-toc__summary i {
    color: inherit;
    font-size: 0.8rem;
    transition: transform 180ms ease;
}

.lg-toc[open] .lg-toc__summary i {
    transform: rotate(180deg);
}

/* Numbered to match the document's own section numbers, so a reader can carry
   "9" from the rail to the heading. */
.lg-toc__list {
    counter-reset: lg-toc;
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.lg-toc__list li {
    list-style: none;
}

/* A .dropdown a item, on the menu's own 180ms timing. */
.lg-toc__link {
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.15rem;
    align-items: baseline;

    padding: 0.36rem 0.5rem;

    border-radius: 0.55rem;

    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.88rem;
    font-weight: 300;
    line-height: 1.35;
    letter-spacing: 0.005em;
    text-decoration: none;

    transition: background 180ms ease, color 180ms ease;
}

/* The label is a <span> so the counter can be its own grid cell — and a bare
   <span> is matched DIRECTLY by m072224.css's `* { color: var(--c3) }`, so it
   renders #b6b6b6 instead of inheriting the link's colour (and never lights on
   hover). Same trap page-hero.css documents on .page-hero__word-in. */
.lg-toc__link span {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.lg-toc__link::before {
    counter-increment: lg-toc;
    content: counter(lg-toc);

    color: var(--theme-text-soft, #989ba3);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.lg-toc__link:hover,
.lg-toc__link:focus-visible {
    background: var(--theme-surface-white-08, rgba(255, 255, 255, 0.08));
    color: var(--theme-text-strong, #ffffff);
    text-decoration: none;
}

.lg-toc__link:hover::before,
.lg-toc__link:focus-visible::before {
    color: var(--theme-accent, #aa0000);
}

/* Below the two-column breakpoint the rail is a plain fold above the
   document — nothing to stick to, and a capped height would trap the list in
   a scroller inside the page's own scroller. */
@media only screen and (max-width: 1100px) {
    .lg-toc {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    }
}

/* On desktop the fold has nothing to fold: the column exists for the list. */
@media only screen and (min-width: 1101px) {
    .lg-toc__summary {
        display: none;
    }

    .lg-toc__list {
        margin-top: 0;
    }
}

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

.lg-body {
    counter-reset: lg-sec;
    /* Wider than .pg-prose's 68ch: a legal document is skimmed as much as it
       is read, and the extra measure keeps a 25-section page from running to
       twice the height. Still well inside the band. */
    max-width: 74ch;
}

.lg-intro {
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Only the FIRST paragraph of the preamble is set as a lead. Several of these
   documents open with five or six paragraphs before their first heading; at
   lead size the whole block reads as one long shout, and the sentence that
   actually matters stops standing out. */
.lg-intro > p:first-child {
    color: var(--theme-text-main, #ececef);
    font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem);
    line-height: 1.62;
    letter-spacing: 0.005em;
}

.lg-intro > * + * {
    margin-top: 1rem;
}

.lg-sec {
    /* Where a rail link or a shared #anchor lands: the navbar is fixed, so
       without this the heading tucks under it. Same recipe as
       .page-hero__target. */
    scroll-margin-top: calc(var(--nav-h, 3.3rem) + 1.5rem);
}

.lg-sec + .lg-sec {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
    padding-top: clamp(2rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--theme-border-soft, rgba(255, 255, 255, 0.08));
}

/* Number in the gutter, title beside it. The number is what ties a heading to
   its rail entry; hanging it outside the text column keeps the copy's left
   edge true to the footer's. */
.lg-sec__title {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: baseline;

    margin: 0 0 0.9rem;
    margin-left: -2.6rem;

    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.75rem);
    font-weight: 300;
    line-height: 1.16;
    letter-spacing: -0.02em;
    text-transform: none;
    text-wrap: balance;
}

/* Same reason as .lg-toc__link span above: the heading text is wrapped so the
   number can hang in its own column, and `* { color: var(--c3) }` matches that
   <span> directly — without this the titles render grey, not white. */
.lg-sec__title span {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.lg-sec__title::before {
    counter-increment: lg-sec;
    content: counter(lg-sec);

    color: var(--theme-accent, #aa0000);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

/* The number can only hang if there is gutter to hang into. .pg-section's
   padding steps from 6rem down to 2rem at 1200px, which is narrower than the
   -2.6rem pull — below that the digit would sit outside the viewport, so it
   moves onto the title's own line. Keep this breakpoint tied to
   page-sections.css's, not to a width that merely looks about right. */
@media only screen and (max-width: 1200px) {
    .lg-sec__title {
        grid-template-columns: 1.9rem minmax(0, 1fr);
        margin-left: 0;
    }
}

/* ---- Body copy ----------------------------------------------------------
   Deliberately descendant selectors, as .pg-prose does: the document body is
   authored as prose in includes/legal-doc.php's `body` strings, and tagging
   every paragraph would put the styling back in the pages.

   Scoped to .lg-body, not .lg-sec, so the un-headed preamble several of these
   documents open with is styled by the same rules. The contents rail sits
   outside .lg-body, so none of this reaches it. */
.lg-body p,
.lg-body li {
    color: var(--theme-text-muted, #c4c6cc);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);
    font-weight: 300;
    line-height: 1.72;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.lg-sec > * + * {
    margin-top: 1rem;
}

.lg-body strong {
    color: var(--theme-text-strong, #ffffff);
    font-weight: 600;
}

.lg-body a {
    color: var(--theme-text-strong, #ffffff);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--theme-accent, #aa0000);
    text-decoration-thickness: 2px;
}

.lg-body a:hover {
    color: var(--theme-text-strong, #ffffff);
    text-decoration-color: var(--theme-text-strong, #ffffff);
}

/* Lists. The global reset kills every marker (`* { list-style: none }`) and
   what survives it — `ol li { list-style: decimal; list-style-position:
   inside }` — indents the marker into the text block, so a wrapped item's
   second line runs back under its own number. Both are redrawn here as
   hanging markers. */
.lg-body ul,
.lg-body ol {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.lg-body ul > li,
.lg-body ol > li {
    position: relative;
    padding-left: 1.6rem;
    list-style: none;
}

.lg-body ul > li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 0.15rem;

    width: 0.34rem;
    height: 0.34rem;

    border-radius: 50%;
    background: var(--theme-accent, #aa0000);
}

.lg-body ol {
    counter-reset: lg-item;
}

.lg-body ol > li::before {
    counter-increment: lg-item;
    content: counter(lg-item) ".";

    position: absolute;
    left: 0;

    color: var(--theme-accent, #aa0000);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.9;
    font-variant-numeric: tabular-nums;
}

/* ---- Contact card ------------------------------------------------------
   The address / phone / email block every one of these documents ends on.
   A card rather than four <br>-separated lines, so it reads as the thing you
   act on rather than the last paragraph of the policy. */
.lg-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);

    margin-top: 1.25rem;
    padding: clamp(1.25rem, 2.4vw, 1.75rem);

    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--theme-radius-md, 1rem);
    background: linear-gradient(160deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.02) 60%);
}

.lg-contact__label {
    display: block;
    margin: 0 0 0.4rem;

    color: var(--theme-text-soft, #989ba3);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lg-contact__value {
    display: block;

    color: var(--theme-text-strong, #ffffff);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

.lg-contact a.lg-contact__value {
    text-decoration: none;
    transition: color 180ms ease;
}

.lg-contact a.lg-contact__value:hover {
    color: var(--theme-accent-hover, #ac1111);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: var(--theme-accent, #aa0000);
}

/* ---- Figure row (Warranty's coverage at a glance) ----------------------- */
.lg-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(0.85rem, 1.6vw, 1.35rem);
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.lg-stat {
    padding: clamp(1.15rem, 2vw, 1.5rem);

    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--theme-radius-md, 1rem);
    background: var(--theme-surface-white-04, rgba(255, 255, 255, 0.04));

    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.lg-stat:hover {
    transform: translateY(-3px);
    border-color: var(--theme-border-strong, rgba(255, 255, 255, 0.16));
    box-shadow: var(--theme-shadow-card, 0 14px 34px rgba(0, 0, 0, 0.34));
}

.lg-stat__label {
    display: block;
    margin: 0 0 0.55rem;

    color: var(--theme-text-soft, #989ba3);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lg-stat__figure {
    display: block;
    margin: 0 0 0.4rem;

    color: var(--theme-text-strong, #ffffff);
    font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
}

.lg-stat__note {
    display: block;
    margin: 0;

    color: var(--theme-text-muted, #c4c6cc);
    font-size: 0.94rem;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.01em;
}

/* ---- Related-policy row ------------------------------------------------
   The other four documents, as ghost CTAs. These pages are each other's most
   likely next click and the footer's legal column is the only route between
   them today. */
.lg-related {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: clamp(1.35rem, 2.5vw, 1.9rem);
}