/*
 * The legal pages (legal/*): a black hero with a tab per document, then on
 * white the numbered contents (sticky) beside the reading column, ending in
 * the "questions about this document?" block. .lg is a grid: the hero spans
 * it, the contents and the text share the second row (legal/_layout.html.twig).
 */
@layer marketing {
    .mk {
        & .lg {
            display: grid;
            grid-template-columns: minmax(var(--gl), 1fr) 260px 72px minmax(0, 836px) minmax(var(--gr), 1fr);
            align-items: start;
            background: #fff;
        }
        & .lg > .lg-hero {
            grid-column: 1 / -1;
        }

        /* hero */
        & .lg-hero {
            padding: 168px 0 72px;
            background: radial-gradient(60% 80% at 30% 0%, #262626 0%, #0b0b0b 60%, #000 100%);
        }
        & .lg-hero .kicker {
            color: rgb(255 255 255 / 0.75);
        }
        & .lg-hero h1 {
            margin-top: 56px;
            font-size: clamp(44px, 6vw, 84px);
            font-weight: 600;
            letter-spacing: -0.05em;
            line-height: 1;
            display: inline-block;
        }
        & .lg-hero h1 em {
            font-style: normal;
            color: rgb(255 255 255 / 0.45);
        }
        & .lg-hero p {
            margin-top: 22px;
            color: rgb(255 255 255 / 0.6);
            font-size: 15px;
        }
        & .lg-docs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 34px;
        }
        & .lg-docs a {
            padding: 9px 16px;
            border-radius: 999px;
            font-size: 14px;
            color: rgb(255 255 255 / 0.75);
            text-decoration: none;
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
        }
        & .lg-docs a:hover {
            color: #fff;
            box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.5);
        }
        & .lg-docs a.on {
            background: #fff;
            color: #0a0a0a;
            box-shadow: none;
        }

        /* contents */
        & .lg-side {
            grid-column: 2;
            grid-row: 2;
            position: sticky;
            top: 110px;
            margin-top: 72px;
        }
        & .lg-side > p {
            font: 500 12px / 1 var(--f-mono);
            color: var(--faint);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 14px;
        }
        & .lg-toc {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 2px;
            counter-reset: toc;
            max-height: calc(100vh - 170px);
            overflow: auto;
        }
        & .lg-toc li {
            counter-increment: toc;
        }
        & .lg-toc a {
            display: flex;
            gap: 10px;
            padding: 7px 10px;
            border-radius: 8px;
            font-size: 14px;
            line-height: 1.6;
            color: var(--muted);
            text-decoration: none;
        }
        & .lg-toc a::before {
            content: counter(toc, decimal-leading-zero);
            font: 500 12px / 1.6 var(--f-mono);
            color: var(--faint);
        }
        & .lg-toc a:hover {
            background: #f4f4f4;
            color: #0a0a0a;
        }
        & .lg-toc a.on {
            background: #0a0a0a;
            color: #fff;
        }
        & .lg-toc a.on::before {
            color: rgb(255 255 255 / 0.6);
        }

        /* the text */
        & .lg-text {
            grid-column: 4;
            grid-row: 2;
            max-width: 720px;
            padding: 72px 0 120px;
            font-size: 17px;
            line-height: 1.7;
            color: #2a2a2a;
        }
        & .lg-text section {
            padding: 6px 0 34px;
            scroll-margin-top: 110px;
        }
        & .lg-text section + section {
            border-top: 1px solid var(--line);
            padding-top: 34px;
        }
        & .lg-text h2 {
            font-size: 26px;
            font-weight: 600;
            letter-spacing: -0.035em;
            line-height: 1.2;
            color: #0a0a0a;
            margin: 0 0 14px;
        }
        & .lg-text h3 {
            font-size: 18px;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: #0a0a0a;
            margin: 24px 0 8px;
        }
        & .lg-text p {
            margin: 0 0 14px;
        }
        & .lg-text ul,
        & .lg-text ol {
            margin: 0 0 14px;
            padding-left: 22px;
        }
        & .lg-text li {
            margin-bottom: 6px;
        }
        & .lg-text a {
            color: #0a0a0a;
            text-underline-offset: 3px;
        }
        & .lg-text code {
            font: 500 0.86em var(--f-mono);
            padding: 1px 5px;
            border-radius: 5px;
            background: #f2f2f2;
        }
        & .lg-text table {
            width: 100%;
            border-collapse: collapse;
            font-size: 15px;
            margin: 8px 0 18px;
        }
        & .lg-text th,
        & .lg-text td {
            text-align: left;
            padding: 10px 12px;
            border-bottom: 1px solid var(--line);
            vertical-align: top;
        }
        & .lg-text th {
            font-weight: 600;
            color: #0a0a0a;
            background: #f6f6f6;
        }
        /* the agreement's opening paragraph, and a remark set apart */
        & .lg-intro {
            padding-bottom: 20px;
            font-size: 18px;
            color: #0a0a0a;
        }
        & .lg-text .lg-note {
            padding: 14px 18px;
            border-radius: 12px;
            background: #f6f6f6;
            font-size: 15px;
        }

        & .lg-help {
            margin-top: 20px;
            padding: 28px;
            border-radius: 18px;
            background: #0a0a0a;
            color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }
        & .lg-help b {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: -0.03em;
        }
        & .lg-help span {
            display: block;
            color: rgb(255 255 255 / 0.6);
            font-size: 15px;
            margin-top: 4px;
        }
    }

    @media (max-width: 900px) {
        .mk .lg {
            grid-template-columns: minmax(var(--gl), 1fr) minmax(0, 868px) minmax(var(--gr), 1fr);
        }
        .mk .lg-side {
            grid-column: 2;
            position: static;
        }
        .mk .lg-text {
            grid-column: 2;
            grid-row: 3;
            padding-top: 32px;
        }
        .mk .lg-toc {
            max-height: none;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .mk .lg-help {
            flex-direction: column;
            align-items: start;
        }
    }
    @media (max-width: 600px) {
        /* a wide table scrolls on its own instead of the page */
        .mk .lg-text table {
            display: block;
            overflow-x: auto;
        }
    }
}