/* ==========================================================================
   Barlin Games — Legal Document Layout   ·   .lp  (legal policy)
   --------------------------------------------------------------------------
   Drives the CMS legal pages (privacy policy, terms, cookies, DMCA) rendered
   by <x-public.legal-policy />. Deliberately self-contained: layouts/public
   has no @stack('styles'), so this sheet is linked from the component itself
   and must not depend on game-ui.css being present on the page.

   Token names mirror game-ui.css's `.gd` namespace so the two read as one
   system, and so a future dark-mode pass has the same handles to pull.
   Light mode is the designed state; the dark blocks keep parity rather than
   claiming a finished dark design.
   ========================================================================== */

.lp {
    --lp-red:       #E51B23;
    --lp-red-dark:  #C2151C;
    --lp-red-soft:  rgba(229, 27, 35, .07);
    --lp-red-ring:  rgba(229, 27, 35, .18);

    --lp-ink:       #0F1115;
    --lp-body:      #3A4048;
    --lp-muted:     #6B7280;
    --lp-faint:     #9CA3AF;

    --lp-canvas:    #F6F7F9;
    --lp-surface:   #FFFFFF;
    --lp-line:      #E7EAF0;
    --lp-line-soft: #F0F2F6;

    --lp-r:         14px;
    --lp-r-lg:      22px;
    --lp-ease:      cubic-bezier(.22, .61, .36, 1);

    /* One reading measure for every long-form block on the page. Capped in ch
       so the line length stays right when the reader zooms the text, and so a
       4K display widens the margins instead of the sentences. */
    --lp-measure:   74ch;

    max-width: var(--bg-w-1120, 1120px);
    margin-inline: auto;
    color: var(--lp-body);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-align: left;
}

.lp, .lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
    /* `:not(.theme-light)` so a reader on a dark OS who has explicitly chosen
       light on this site still gets the light palette — same precedence rule
       game-ui.css uses. */
    body:not(.theme-light) .lp {
        --lp-ink: #F3F5F8; --lp-body: #C3C8D2; --lp-muted: #8B93A2; --lp-faint: #6B7280;
        --lp-canvas: #0D0F13; --lp-surface: #14171E;
        --lp-line: #242936; --lp-line-soft: #1C212B;
        --lp-red-soft: rgba(229, 27, 35, .14);
    }
}
body.theme-dark .lp {
    --lp-ink: #F3F5F8; --lp-body: #C3C8D2; --lp-muted: #8B93A2; --lp-faint: #6B7280;
    --lp-canvas: #0D0F13; --lp-surface: #14171E;
    --lp-line: #242936; --lp-line-soft: #1C212B;
    --lp-red-soft: rgba(229, 27, 35, .14);
}

/* Focus is never removed, only restyled — this page is read by people who
   navigate it with a keyboard. */
.lp :focus-visible:not(input):not(textarea):not(select) {
    outline: 2px solid var(--lp-red);
    outline-offset: 3px;
    border-radius: 6px;
}

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

.lp-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--lp-r-lg);
    border: 1px solid var(--lp-line);
    background:
        radial-gradient(120% 140% at 100% 0%, var(--lp-red-soft) 0%, transparent 55%),
        linear-gradient(180deg, #FFF 0%, var(--lp-canvas) 100%);
    padding: clamp(24px, 4.2vw, 52px);
    margin-bottom: clamp(24px, 3.4vw, 40px);
}
body.theme-dark .lp-hero {
    background:
        radial-gradient(120% 140% at 100% 0%, var(--lp-red-soft) 0%, transparent 55%),
        linear-gradient(180deg, #171B23 0%, #0F1218 100%);
}

.lp-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--lp-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.2;
}
.lp-eyebrow svg { flex: none; }

.lp-title {
    margin: 0 0 16px;
    color: var(--lp-ink);
    font-size: clamp(30px, 5.6vw, 54px);
    line-height: 1.06;
    letter-spacing: -.025em;
    font-weight: 800;
}
.lp-title__accent { color: var(--lp-red); }

.lp-lede {
    margin: 0;
    max-width: 56ch;
    color: var(--lp-body);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.66;
}

.lp-updated {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 22px 0 0;
    padding: 8px 14px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: var(--lp-surface);
    color: var(--lp-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.lp-updated svg { flex: none; color: var(--lp-red); }

/*
 * Hero decoration. Geometry only — no controller, console, character or
 * product art, and nothing that reads as a marketing message: this is a legal
 * page. Drawn in CSS so it costs no request and cannot shift the layout, and
 * dropped entirely below 900px where the legal copy needs the whole width.
 */
.lp-hero__deco { display: none; }

@media (min-width: 900px) {
    /* The wordmark is four short words — a narrower rail leaves the trust
       strip enough room to stay on one line instead of wrapping its last
       item onto a row of its own. */
    .lp-hero__grid { grid-template-columns: minmax(0, 1fr) clamp(140px, 17%, 200px); }
    .lp-hero__deco {
        display: block;
        position: relative;
        align-self: stretch;
        min-height: 190px;
        pointer-events: none;
    }
    .lp-hero__deco::before,
    .lp-hero__deco::after {
        content: "";
        position: absolute;
        inset: -40% -30% -40% 0;
        background: repeating-linear-gradient(
            118deg,
            var(--lp-red) 0 10px,
            transparent 10px 30px
        );
        opacity: .16;
        -webkit-mask-image: linear-gradient(105deg, transparent 8%, #000 62%);
                mask-image: linear-gradient(105deg, transparent 8%, #000 62%);
    }
    .lp-hero__deco::after {
        background: repeating-linear-gradient(
            118deg,
            var(--lp-red) 0 3px,
            transparent 3px 22px
        );
        opacity: .3;
        inset: -40% -30% -40% 18%;
    }
}

/* ── Intro block (content the CMS places before the first <h2>) ──────────── */

.lp-intro {
    max-width: var(--lp-measure);
    margin: 0 0 clamp(22px, 3vw, 34px);
}

/* ── Section cards ──────────────────────────────────────────────────────── */

.lp-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-card {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    transition: border-color .22s var(--lp-ease), box-shadow .22s var(--lp-ease);
    scroll-margin-top: 96px;   /* clears the sticky site header on #anchor jumps */
}
.lp-card:hover { border-color: #D8DCE6; }
.lp-card.is-open {
    border-color: var(--lp-red-ring);
    box-shadow: 0 1px 2px rgba(15, 17, 21, .04), 0 10px 30px rgba(15, 17, 21, .06);
}
body.theme-dark .lp-card:hover { border-color: #303643; }
body.theme-dark .lp-card.is-open { box-shadow: 0 10px 30px rgba(0, 0, 0, .38); }

.lp-card__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    padding: clamp(16px, 1.9vw, 22px) clamp(14px, 1.9vw, 24px);
}
/* Enhancement only: JS turns the whole head into a hit area. Without JS the
   <button> is still the control, so the cursor must not lie about it. */
.lp--js .lp-card__head { cursor: pointer; }

.lp-card__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 12px;
    background: var(--lp-red-soft);
    color: var(--lp-red);
}
.lp-card__icon svg { display: block; }

.lp-card__main { min-width: 0; }

.lp-card__h {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/*
 * A real <button>, not a div wearing a click handler: it carries the
 * aria-expanded state and is in the tab order for free.
 */
.lp-card__btn {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lp-ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.lp-card__num {
    flex: none;
    color: var(--lp-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}

.lp-card__title {
    min-width: 0;
    color: var(--lp-ink);
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.lp-card__excerpt {
    margin: 7px 0 0;
    color: var(--lp-body);
    font-size: 14.5px;
    line-height: 1.62;
}
/*
 * Collapsed preview. The text stays in the DOM — clamping is presentation, so
 * nothing is withheld from search engines or assistive technology; opening the
 * section releases the clamp.
 */
.lp--js .lp-card:not(.is-open):not(.lp-card--plain) .lp-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lp-card__chev {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--lp-line);
    background: var(--lp-surface);
    color: var(--lp-muted);
    transition: transform .26s var(--lp-ease), color .2s var(--lp-ease),
                border-color .2s var(--lp-ease);
}
.lp-card.is-open .lp-card__chev {
    transform: rotate(180deg);
    color: var(--lp-red);
    border-color: var(--lp-red-ring);
}
.lp-card__btn:hover ~ .lp-card__chev,
.lp-card__head:hover .lp-card__chev { color: var(--lp-red); }

/*
 * Height animation via grid-template-rows: 0fr → 1fr. No JS height
 * measurement, no max-height guess that clips a long section, and no
 * display:none — which would take the content out of find-in-page and break
 * an #anchor that points inside a closed section.
 */
.lp-card__region {
    display: grid;
    grid-template-rows: 1fr;              /* no-JS default: open */
    transition: grid-template-rows .32s var(--lp-ease);
}
.lp--js .lp-card:not(.is-open) .lp-card__region { grid-template-rows: 0fr; }
.lp-card__region > * { overflow: hidden; min-height: 0; }

.lp-card__inner {
    padding: 4px clamp(14px, 1.9vw, 24px) clamp(18px, 2vw, 24px);
}
@media (min-width: 640px) {
    /* Line the body up under the title rather than under the icon tile. */
    .lp-card__inner { padding-left: calc(46px + clamp(12px, 1.6vw, 20px) + clamp(14px, 1.9vw, 24px)); }
}

/*
 * A section short enough to say everything in its preview: no control, no
 * empty region, no chevron pointing at nothing. Sections whose single
 * paragraph would be clipped by the preview still get a chevron — there the
 * control releases the clamp instead of opening a region, which is a real
 * reveal rather than a decorative one.
 */
.lp-card--plain .lp-card__head { cursor: default; }

/* ── Prose (the CMS rich text itself) ───────────────────────────────────── */

.lp-prose {
    max-width: var(--lp-measure);
    color: var(--lp-body);
    font-size: 15.5px;
    line-height: 1.72;
}
.lp-prose > :first-child { margin-top: 0; }
.lp-prose > :last-child  { margin-bottom: 0; }

.lp-prose p { margin: 0 0 1.05em; }
.lp-prose strong { color: var(--lp-ink); font-weight: 650; }

.lp-prose h3 {
    margin: 1.9em 0 .7em;
    color: var(--lp-ink);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
    scroll-margin-top: 96px;
}
.lp-prose h4 {
    margin: 1.6em 0 .6em;
    color: var(--lp-ink);
    font-size: 15px;
    font-weight: 700;
}

.lp-prose ul,
.lp-prose ol { margin: 0 0 1.05em; padding-left: 1.35em; }
.lp-prose li { margin: 0 0 .5em; }
.lp-prose li::marker { color: var(--lp-red); }

.lp-prose a {
    color: var(--lp-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.lp-prose a:hover { color: var(--lp-red-dark); }

.lp-prose code {
    padding: .12em .4em;
    border-radius: 5px;
    background: var(--lp-line-soft);
    color: var(--lp-ink);
    font-size: .92em;
}

.lp-prose blockquote {
    margin: 1.3em 0;
    padding: 2px 0 2px 16px;
    border-left: 3px solid var(--lp-red);
    color: var(--lp-muted);
}

/* Tables in a legal document are retention schedules — they must stay
   readable, and they must never be the reason the page scrolls sideways. */
.lp-tablewrap {
    margin: 0 0 1.2em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--lp-line);
    border-radius: 10px;
}
.lp-tablewrap > table { margin: 0; border: 0; }
.lp-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
}
.lp-prose th,
.lp-prose td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lp-line);
    text-align: left;
    vertical-align: top;
}
.lp-prose thead th {
    background: var(--lp-canvas);
    color: var(--lp-ink);
    font-weight: 700;
    white-space: nowrap;
}
.lp-prose tbody tr:last-child td { border-bottom: 0; }

.lp-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Editor callouts. The privacy policy uses `.callout-warning` for the notice
   about the missing legal entity; it has to survive outside premium-article's
   stylesheet, which this page no longer loads. */
.lp .callout-warning,
.lp .callout-info,
.lp .callout-note {
    margin: 0 0 1.2em;
    /* Uniform hairline. The 3px red left edge that used to sit here read as a
       stray bar beside the block rather than as an accent on it. */
    padding: 16px 18px;
    border: 1px solid var(--lp-red-ring);
    border-radius: 10px;
    background: var(--lp-red-soft);
}
.lp .callout-info,
.lp .callout-note { border-color: var(--lp-line); background: var(--lp-line-soft); }
.lp .callout-warning > :last-child,
.lp .callout-info > :last-child,
.lp .callout-note > :last-child { margin-bottom: 0; }
.lp .pa-callout-title {
    margin: 0 0 .4em;
    color: var(--lp-ink);
    font-weight: 700;
}
.lp .article-lead {
    color: var(--lp-ink);
    font-size: 16.5px;
    line-height: 1.66;
}

/* ── Contact strip ──────────────────────────────────────────────────────── */

.lp-contact {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 10px 16px;
    border: 1px solid var(--lp-line);
    border-radius: 999px;
    background: var(--lp-canvas);
    color: var(--lp-red);
    font-size: 14.5px;
    font-weight: 650;
    text-decoration: none;
}
.lp-contact:hover { border-color: var(--lp-red-ring); color: var(--lp-red-dark); }
.lp-contact svg { flex: none; }

/* ── Motion ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Hero trust strip ───────────────────────────────────────────────────── */

.lp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.lp-trust__i {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--lp-ink);
    font-size: .855rem;
    font-weight: 600;
    line-height: 1.35;
}
.lp-trust__ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--lp-red-soft);
    color: var(--lp-red);
}

/* ── Hero wordmark ──────────────────────────────────────────────────────── */
/* Typography only, and only where there is room for it. */

.lp-hero__mark { display: none; }

@media (min-width: 900px) {
    .lp-hero__mark {
        display: block;
        margin: 4px 0 0;
        text-align: right;
    }
    .lp-hero__markgroup { display: block; }
    .lp-hero__markgroup + .lp-hero__markgroup {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 2px solid var(--lp-red);
    }
    .lp-hero__mark span span,
    .lp-hero__markgroup > span {
        display: block;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .155em;
        line-height: 1.72;
        text-transform: uppercase;
    }
    .lp-hero__markgroup:first-child > span { color: var(--lp-ink); }
    .lp-hero__markgroup + .lp-hero__markgroup > span { color: var(--lp-faint); }
}

/* ── Document notice ────────────────────────────────────────────────────── */
/* The callout the editor put above the first heading, presented as a notice.
   No left bar: a uniform ring reads as one block, where an edge reads as a
   rule that has drifted away from its box. */

.lp-notice {
    display: flex;
    gap: 14px;
    margin: 0 0 26px;
    padding: 17px 19px;
    border: 1px solid var(--lp-red-ring);
    border-radius: var(--lp-r);
    background: var(--lp-red-soft);
}
.lp-notice--note {
    border-color: var(--lp-line);
    background: var(--lp-line-soft);
}
/* A caution the reader has to weigh differently from the page's own accent.
   Rendering it in the same red as every other panel would flatten it into the
   furniture; the reference draws it amber for that reason. */
.lp-notice--warning {
    --lp-warn:      #B45309;
    --lp-warn-line: rgba(180, 83, 9, .28);
    --lp-warn-soft: rgba(245, 158, 11, .09);
    border-color: var(--lp-warn-line);
    background: var(--lp-warn-soft);
}
.lp-notice--warning .lp-notice__ic { border-color: var(--lp-warn-line); color: var(--lp-warn); }
@media (prefers-color-scheme: dark) {
    body:not(.theme-light) .lp-notice--warning { --lp-warn: #FBBF24; --lp-warn-line: rgba(251,191,36,.30); --lp-warn-soft: rgba(245,158,11,.12); }
}
body.theme-dark .lp-notice--warning { --lp-warn: #FBBF24; --lp-warn-line: rgba(251,191,36,.30); --lp-warn-soft: rgba(245,158,11,.12); }
.lp-notice__ic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-red-ring);
    color: var(--lp-red);
}
.lp-notice--note .lp-notice__ic { border-color: var(--lp-line); color: var(--lp-muted); }
.lp-notice__text { min-width: 0; }
.lp-notice__title {
    margin: 3px 0 5px;
    color: var(--lp-ink);
    font-size: 1.01rem;
    font-weight: 700;
    line-height: 1.35;
}
.lp-notice__text p { margin: 0 0 8px; font-size: .915rem; line-height: 1.6; }
.lp-notice__text > :last-child > :last-child { margin-bottom: 0; }

/* ── Closing panel ──────────────────────────────────────────────────────── */

.lp-questions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 26px 0 0;
    padding: 17px 19px;
    border: 1px solid var(--lp-red-ring);
    border-radius: var(--lp-r);
    background: var(--lp-red-soft);
}
.lp-questions__ic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--lp-surface);
    border: 1px solid var(--lp-red-ring);
    color: var(--lp-red);
}
.lp-questions__text { flex: 1 1 260px; min-width: 0; }
.lp-questions__title {
    margin: 0 0 3px;
    color: var(--lp-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}
.lp-questions__body {
    margin: 0;
    color: var(--lp-muted);
    font-size: .885rem;
    line-height: 1.55;
}
.lp-questions__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: none;
    min-height: 42px;
    padding: 10px 17px;
    border-radius: 10px;
    background: var(--lp-red);
    color: #fff;
    font-size: .875rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .16s var(--lp-ease);
}
.lp-questions__btn:hover { background: var(--lp-red-dark); color: #fff; }
.lp-questions__btn svg { flex: none; transition: transform .16s var(--lp-ease); }
.lp-questions__btn:hover svg { transform: translateX(2px); }

@media (max-width: 575.98px) {
    .lp-trust { gap: 9px 18px; }
    .lp-trust__i { font-size: .82rem; }
    .lp-notice, .lp-questions { padding: 14px 15px; }
    .lp-questions__btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-questions__btn, .lp-questions__btn svg { transition-duration: .001ms !important; }
}

/* ── Cookie tools ───────────────────────────────────────────────────────── */
/* Everything below is driven by the consent platform's own tables; the styles
   only have to present it. Laid out to read as one panel plus two plain
   sections rather than a wall of cards. */

.lp-prefs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin: 0 0 30px;
    padding: 20px 22px;
    border: 1px solid var(--lp-red-ring);
    border-radius: var(--lp-r-lg);
    background: var(--lp-red-soft);
}
@media (min-width: 860px) {
    .lp-prefs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: start; }
}

.lp-prefs__head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.lp-prefs__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 38px; height: 38px; border-radius: 11px;
    background: var(--lp-surface); border: 1px solid var(--lp-red-ring); color: var(--lp-red);
}
.lp-prefs__h {
    margin: 0; color: var(--lp-ink);
    font-size: 1.12rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.lp-prefs__p { margin: 0 0 15px; color: var(--lp-body); font-size: .9rem; line-height: 1.6; }
.lp-prefs__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.lp-prefs__list {
    margin: 0; padding: 0; list-style: none;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    overflow: hidden;
}
.lp-prefs__row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 13px;
    min-width: 0;
}
.lp-prefs__row + .lp-prefs__row { border-top: 1px solid var(--lp-line-soft); }
.lp-prefs__rowic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-prefs__rowtext { min-width: 0; flex: 1 1 auto; }
.lp-prefs__rowname { display: block; color: var(--lp-ink); font-size: .875rem; font-weight: 650; line-height: 1.3; }
.lp-prefs__rowsub  { display: block; color: var(--lp-faint); font-size: .77rem; line-height: 1.4; margin-top: 1px; }

/* State never rides on colour alone — each pill carries a mark and a word. */
.lp-state {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 4px 9px; border-radius: 999px;
    border: 1px solid var(--lp-line);
    background: var(--lp-line-soft); color: var(--lp-muted);
    font-size: .715rem; font-weight: 700; line-height: 1.2;
    white-space: nowrap;
}
.lp-state--on  { border-color: var(--lp-red-ring); background: var(--lp-red-soft); color: var(--lp-red); }
.lp-state--req { border-color: var(--lp-line); background: var(--lp-line-soft); color: var(--lp-body); }

.lp-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 42px; padding: 10px 16px;
    border: 1px solid var(--lp-line); border-radius: 10px;
    background: var(--lp-surface); color: var(--lp-ink);
    font-size: .875rem; font-weight: 650; line-height: 1.2; text-decoration: none;
    transition: border-color .16s var(--lp-ease), color .16s var(--lp-ease);
}
.lp-btn-ghost:hover { border-color: var(--lp-red-ring); color: var(--lp-red); }

/* ── Plain section heading ──────────────────────────────────────────────── */

.lp-block { margin: 0 0 30px; }
.lp-block__h {
    margin: 0 0 14px; padding-bottom: 9px;
    color: var(--lp-ink);
    font-size: 1.16rem; font-weight: 700; letter-spacing: -.012em; line-height: 1.3;
    position: relative;
}
/* A short rule under the first few characters and nothing else. A full-width
   hairline as well reads as two separators for one heading. */
.lp-block__h::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 46px; height: 2px; border-radius: 2px; background: var(--lp-red);
}
.lp-block__empty {
    margin: 0; padding: 16px 18px;
    border: 1px dashed var(--lp-line); border-radius: var(--lp-r);
    color: var(--lp-muted); font-size: .9rem;
}

/* ── Category cards ─────────────────────────────────────────────────────── */

.lp-cats {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 12px; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 620px)  { .lp-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .lp-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-cat {
    display: flex; flex-direction: column; min-width: 0;
    padding: 15px 16px 14px;
    border: 1px solid var(--lp-line); border-radius: var(--lp-r);
    background: var(--lp-surface);
}
.lp-cat__head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.lp-cat__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-cat__h { margin: 0; color: var(--lp-ink); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.lp-cat__p { margin: 0 0 12px; color: var(--lp-muted); font-size: .83rem; line-height: 1.55; flex: 1 1 auto; }
.lp-cat__tag { display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; }
.lp-cat__count { color: var(--lp-faint); font-size: .74rem; font-weight: 600; }

.lp-tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    background: var(--lp-red-soft); color: var(--lp-red);
    font-size: .715rem; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.lp-tag--req   { background: var(--lp-line-soft); color: var(--lp-body); }
.lp-tag--third { background: var(--lp-line-soft); color: var(--lp-muted); margin-left: 6px; }

/* ── Inventory table ────────────────────────────────────────────────────── */

.lp-inv { width: 100%; border-collapse: collapse; font-size: .855rem; }
.lp-inv th, .lp-inv td {
    padding: 10px 12px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--lp-line-soft);
}
.lp-inv thead th {
    background: var(--lp-canvas);
    color: var(--lp-muted);
    font-size: .735rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-bottom: 1px solid var(--lp-line);
    white-space: nowrap;
}
.lp-inv tbody tr:last-child td { border-bottom: 0; }
.lp-inv tbody tr:hover { background: var(--lp-line-soft); }
.lp-inv code {
    padding: 2px 6px; border-radius: 5px;
    background: var(--lp-line-soft); border: 1px solid var(--lp-line);
    color: var(--lp-ink); font-size: .85em; overflow-wrap: anywhere;
}
.lp-inv td:nth-child(3) { color: var(--lp-body); min-width: 200px; }
.lp-inv a { color: var(--lp-red); text-underline-offset: 3px; }

/* Below 780px the table becomes one card per cookie: a six-column grid at
   phone width is unreadable however it scrolls. */
@media (max-width: 779.98px) {
    .lp-inv, .lp-inv tbody, .lp-inv tr, .lp-inv td { display: block; width: 100%; }
    .lp-inv thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .lp-inv tr {
        margin-bottom: 10px; padding: 6px 2px;
        border: 1px solid var(--lp-line); border-radius: var(--lp-r);
        background: var(--lp-surface);
    }
    .lp-inv td {
        display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 10px;
        padding: 7px 12px; border-bottom: 0;
    }
    .lp-inv td::before {
        content: attr(data-label);
        color: var(--lp-faint); font-size: .74rem; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase;
    }
    .lp-inv td:nth-child(3) { min-width: 0; }
    .lp-inv tbody tr:hover { background: var(--lp-surface); }
}

@media (max-width: 575.98px) {
    .lp-prefs { padding: 15px 15px 16px; }
    .lp-prefs__actions .lp-questions__btn,
    .lp-prefs__actions .lp-btn-ghost { flex: 1 1 100%; }
}

/* ── Contents ───────────────────────────────────────────────────────────── */
/* <details>, so it collapses on a phone and reports its own state with no
   script attached to it. */

.lp-toc { margin: 0 0 30px; }
.lp-toc__d {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    overflow: hidden;
}
.lp-toc__s {
    display: flex; align-items: center; gap: 11px;
    padding: 13px 15px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.lp-toc__s::-webkit-details-marker { display: none; }
.lp-toc__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-toc__t { flex: 1 1 auto; min-width: 0; }
.lp-toc__h { display: block; color: var(--lp-ink); font-size: .95rem; font-weight: 700; line-height: 1.3; }
.lp-toc__c { display: block; color: var(--lp-faint); font-size: .765rem; font-weight: 600; margin-top: 1px; }
.lp-toc__chev { display: inline-flex; flex: none; color: var(--lp-muted); transition: transform .2s var(--lp-ease); }
.lp-toc__d[open] .lp-toc__chev { transform: rotate(180deg); }

.lp-toc__list {
    margin: 0; padding: 4px 15px 13px;
    list-style: none;
    border-top: 1px solid var(--lp-line-soft);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px;
}
@media (min-width: 700px)  { .lp-toc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; } }
@media (min-width: 1050px) { .lp-toc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-toc__list a {
    display: flex; align-items: baseline; gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    color: var(--lp-body); text-decoration: none;
    font-size: .875rem; line-height: 1.4;
    transition: color .15s var(--lp-ease), background-color .15s var(--lp-ease);
}
.lp-toc__list a:hover { color: var(--lp-red); background: var(--lp-red-soft); }
.lp-toc__n { flex: none; color: var(--lp-faint); font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-toc__x { min-width: 0; overflow-wrap: anywhere; }

/* ── Open sections ──────────────────────────────────────────────────────── */

.lp-open { display: flex; flex-direction: column; gap: 34px; }
.lp-sec { scroll-margin-top: 96px; }
.lp-sec .lp-block__h { margin-bottom: 15px; }
.lp-sec__lede { margin-bottom: 14px; }
.lp-sec > .lp-prose { max-width: var(--lp-measure); }

/* ── Requirement cards ──────────────────────────────────────────────────── */
/* A section that opens on a flat ordered list is a list of requirements; the
   cards are that list, not an addition to it. */

.lp-reqs {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: 12px; margin: 0 0 16px; padding: 0; list-style: none;
    counter-reset: none;
}
@media (min-width: 640px)  { .lp-reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .lp-reqs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-req {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 15px 16px 16px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    transition: border-color .18s var(--lp-ease);
}
.lp-req:hover { border-color: var(--lp-red-ring); }
.lp-req__n {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: flex-start;
    min-width: 30px; height: 26px; padding: 0 8px;
    border-radius: 8px;
    background: var(--lp-red-soft); color: var(--lp-red);
    font-size: .76rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-req__b {
    min-width: 0; color: var(--lp-body);
    font-size: .89rem; line-height: 1.6; overflow-wrap: anywhere;
}
.lp-req__b strong { color: var(--lp-ink); font-weight: 650; }
.lp-req__b code {
    padding: 1px 5px; border-radius: 5px;
    background: var(--lp-line-soft); border: 1px solid var(--lp-line);
    font-size: .88em;
}

@media (max-width: 575.98px) {
    .lp-open { gap: 26px; }
    .lp-req { padding: 13px 14px 14px; }
    .lp-toc__s { padding: 12px 13px; }
    .lp-toc__list { padding: 4px 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .lp-toc__chev, .lp-req { transition-duration: .001ms !important; }
}

/* ── Editorial rail ─────────────────────────────────────────────────────── */
/* Two columns on desktop: the document, and a rail carrying the date, the
   contents and a closing note. minmax(0, …) on the reading column so a long
   URL in the prose cannot widen the grid. */

.lp-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
@media (min-width: 992px) {
    .lp-rail { grid-template-columns: minmax(0, 1fr) 296px; gap: 40px; }
}
@media (min-width: 1280px) {
    .lp-rail { grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; }
}

.lp-rail__main { min-width: 0; }

.lp-rail__side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 991.98px) {
    /* On a phone the contents belong above the document it indexes. The rail
       is an <aside> with its own label, so it stays reachable as a landmark
       wherever it sits in the order. */
    .lp-rail__side { order: -1; }
}
@media (min-width: 992px) {
    .lp-rail__side {
        position: sticky; top: 84px;
        max-height: calc(100vh - 104px);
        overflow-y: auto; overscroll-behavior: contain;
        padding-right: 4px;
        scrollbar-width: thin; scrollbar-color: transparent transparent;
    }
    .lp-rail__side:hover, .lp-rail__side:focus-within { scrollbar-color: var(--lp-line) transparent; }
    .lp-rail__side::-webkit-scrollbar { width: 6px; }
    .lp-rail__side::-webkit-scrollbar-track { background: transparent; }
    .lp-rail__side::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
    .lp-rail__side:hover::-webkit-scrollbar-thumb { background: var(--lp-line); }
}

/* ── Promoted opening paragraph ─────────────────────────────────────────── */

.lp-lead {
    display: flex; gap: 14px;
    margin: 0 0 26px; padding: 17px 19px;
    border: 1px solid var(--lp-red-ring);
    border-radius: var(--lp-r);
    background: var(--lp-red-soft);
}
.lp-lead__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--lp-surface); border: 1px solid var(--lp-red-ring); color: var(--lp-red);
}
.lp-lead__t { min-width: 0; }
.lp-lead__h {
    margin: 3px 0 5px; color: var(--lp-red);
    font-size: 1rem; font-weight: 700; line-height: 1.35;
}
.lp-lead .lp-prose { max-width: none; }
.lp-lead .lp-prose p { margin: 0 0 8px; font-size: .915rem; }
.lp-lead .lp-prose > :last-child { margin-bottom: 0; }

/* ── Editorial sections ─────────────────────────────────────────────────── */
/* A document, not a stack of cards: an icon, a heading, the text, a hairline. */

.lp-esecs { display: flex; flex-direction: column; }
.lp-esec {
    display: flex; gap: 16px;
    padding: 24px 0;
    scroll-margin-top: 96px;
}
.lp-esec + .lp-esec { border-top: 1px solid var(--lp-line-soft); }
.lp-esec:first-child { padding-top: 4px; }

.lp-esec__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-esec__b { min-width: 0; }
.lp-esec__h {
    margin: 6px 0 8px;
    color: var(--lp-ink);
    font-size: 1.12rem; font-weight: 700; line-height: 1.32; letter-spacing: -.012em;
}
.lp-esec .lp-prose { font-size: .935rem; }

@media (max-width: 575.98px) {
    .lp-esec { gap: 12px; padding: 20px 0; }
    .lp-esec__ic { width: 36px; height: 36px; border-radius: 10px; }
    .lp-esec__h { font-size: 1.04rem; margin-top: 3px; }
    .lp-lead { padding: 14px 15px; gap: 11px; }
}

/* ── Rail cards ─────────────────────────────────────────────────────────── */

.lp-side-card {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 14px 15px;
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
}
.lp-side-card__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-side-card__t { min-width: 0; display: block; }
.lp-side-card__l { display: block; color: var(--lp-faint); font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.lp-side-card__v { display: block; color: var(--lp-ink); font-size: .92rem; font-weight: 650; margin-top: 2px; }
.lp-side-card__h { margin: 1px 0 4px; color: var(--lp-ink); font-size: .92rem; font-weight: 700; line-height: 1.3; }
.lp-side-card__p { margin: 0; color: var(--lp-muted); font-size: .845rem; line-height: 1.55; }

/* ── On this page ───────────────────────────────────────────────────────── */

.lp-onpage__d {
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-r);
    background: var(--lp-surface);
    overflow: hidden;
}
.lp-onpage__s {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 15px; cursor: pointer; list-style: none; user-select: none;
}
.lp-onpage__s::-webkit-details-marker { display: none; }
.lp-onpage__ic {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--lp-red-soft); color: var(--lp-red);
}
.lp-onpage__h { flex: 1 1 auto; min-width: 0; color: var(--lp-ink); font-size: .93rem; font-weight: 700; line-height: 1.3; }
.lp-onpage__chev { display: inline-flex; flex: none; color: var(--lp-muted); transition: transform .2s var(--lp-ease); }
.lp-onpage__d[open] .lp-onpage__chev { transform: rotate(180deg); }

.lp-onpage__list {
    margin: 0; padding: 2px 9px 11px; list-style: none;
    border-top: 1px solid var(--lp-line-soft);
    counter-reset: none;
}
.lp-onpage__list a {
    display: flex; align-items: baseline; gap: 8px;
    padding: 7px 7px; border-radius: 8px;
    color: var(--lp-body); text-decoration: none;
    font-size: .855rem; line-height: 1.4;
    transition: color .15s var(--lp-ease), background-color .15s var(--lp-ease);
}
.lp-onpage__list a:hover { color: var(--lp-red); background: var(--lp-red-soft); }
.lp-onpage__n { flex: none; color: var(--lp-faint); font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) { .lp-onpage__chev { transition-duration: .001ms !important; } }

/* ── Host page reset ────────────────────────────────────────────────────── */
/*
 * layouts/public wraps every CMS page body in .card > .card-body. A legal
 * document draws its own surfaces, so the wrapper's panel is flattened here
 * rather than by editing the shared layout markup — every other page keeps
 * the card it was designed inside.
 */
body.legal-doc-page #content-box > .card {
    border: 0;
    background: none;
    box-shadow: none;
}
body.legal-doc-page #content-box > .card > .card-body { padding: 0; }
body.legal-doc-page #content-box { margin-bottom: 0 !important; }

/*
 * The header's Buy Me a Coffee call to action is switched off on the legal
 * documents. It is a donation prompt sitting beside binding terms, and the
 * approved design for these pages does not carry it. Scoped to the body class
 * so the button is untouched on every other page, and display:none keeps it
 * out of the tab order rather than leaving an invisible focus stop.
 */
body.legal-doc-page .ezhd-cta-coffee { display: none !important; }