/* The legal pages, the privacy policy and the terms of use (privacy.html, terms.html, fragments/legal.html), set out as documents
   (2026-10-30: asked for, "format the terms and privacy pages please, make the look professional and clean"). Until then each was a
   hero over a column of prose at the left of an empty page, its date a line of small text above the first heading; their rules in
   site.css (.prose, .meta) are the thank-you page's now.

   What a reader of a long document needs is where they are and where to go: a hero with the trail, the title and the two facts of a
   document (when it was last changed, what it applies to), the list of the sections of this page and the text, whose sections are
   numbered and ruled apart. Each page stands on its own, with no list of the other legal document (2026-10-31: asked for, "remove
   this nonsense ... and ensure the content is center in the page. Each page on its own"), and its words are in one column in the
   middle of the page, the hero's and the text's alike (.lgl-column). The list of sections is a card of links over the text, two and
   three to a row; from 90rem, where a centred column leaves room beside it, a plain column at its left that stays in view. Nothing
   needs a script. The text keeps typography.md's article role (18px, a line height of 1.6, at most 70ch): its words are the
   company's and are as they were.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else. The space
   between rows, columns and items is 20px at the most (--gap-max, site.css); a section has its rule over it and the room
   either side of it is the limit's, a painted band or card has the room it needs inside itself. Everything is scoped to .lgl, and
   its colours are the site's own tokens, which have their dark values already. */

.lgl {
    color: var(--md-on-surface);
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here,
   taking another level's style; the rest are listed by their roles. The title is the page's h1, which the base gives its role. */

/* H3: sans 500 (a section's heading) */
.lgl-section h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* H4 (card title): sans 500 (a section's subheading, the question that ends a page) */
.lgl-section h3,
.lgl-contact__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 (the line under the title, the words of the card that ends a page) */
.lgl-lead,
.lgl-contact__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 (the two facts, the sections in the list) */
.lgl-facts,
.lgl-toc__link {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (what is kept, in the list of how long) */
.lgl-keep dt {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 (the trail) */
.lgl-crumbs__list {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase (the labels, the numbers of the sections) */
.lgl-eyebrow,
.lgl-label,
.lgl-toc__link::before,
.lgl-section h2::before {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The hero                                                            */
/* ------------------------------------------------------------------ */

.lgl-hero {
    padding-block: 0.5rem 1.75rem;
    border-bottom: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-low);
}

/* the trail, Home and the page: the chevron between them is drawn, so that there is nothing for a screen reader to say */
.lgl-crumbs {
    margin: 0 0 0.5rem;
}

.lgl-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--md-on-surface-variant);
}

.lgl-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.lgl-crumbs__list li + li::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-top: 1.5px solid currentcolor;
    border-right: 1.5px solid currentcolor;
    opacity: 0.65;
    rotate: 45deg;
}

.lgl-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    color: inherit;
    text-decoration: none;
}

.lgl-crumbs__link:hover {
    color: var(--md-primary-ink);
    text-decoration: underline;
}

.lgl-crumbs__list [aria-current="page"] {
    color: var(--md-on-surface);
}

.lgl-eyebrow {
    margin: 0 0 0.5rem;
    color: var(--md-primary-ink);
}

.lgl-title {
    margin: 0 0 0.75rem;
    color: var(--md-on-surface);
}

.lgl-lead {
    margin: 0;
    color: var(--md-on-surface);
    text-wrap: pretty;
}

/* the two facts of a document, each with the drawing of what it is */
.lgl-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--gap-max);
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--md-on-surface-variant);
}

.lgl-facts__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.lgl-facts__item .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--md-primary-ink);
}

.lgl-facts__item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* The page: one column in the middle, the list of sections and the text */
/* ------------------------------------------------------------------ */

/* the hero's words and the page's are in one column, as wide as the text (46rem) and in the middle of the page */
.lgl-column {
    width: 100%;
    max-width: calc(46rem + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.lgl-layout {
    display: grid;
    gap: var(--gap-max);
    padding-block: var(--gap-max);
}

.lgl-label {
    margin: 0 0 0.5rem;
    color: var(--md-on-surface-variant);
}

/* the sections of the page: a card of links two to a row (three from 40rem), the numbers of the sections before their names;
   from 90rem a plain column at the left of the text that stays in view */
.lgl-toc {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
}

.lgl-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: lgl-toc;
}

.lgl-toc__list li {
    min-width: 0;
    counter-increment: lgl-toc;
}

.lgl-toc__link {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.lgl-toc__link::before {
    content: counter(lgl-toc, decimal-leading-zero);
    flex: none;
    color: var(--md-primary-ink);
}

.lgl-toc__link:hover {
    background: var(--md-surface-container);
    color: var(--md-on-surface);
}

.lgl-toc__link:focus-visible {
    border-radius: var(--radius-sm);
}

.lgl-toc__link:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

/* ------------------------------------------------------------------ */
/* The text                                                            */
/* ------------------------------------------------------------------ */

/* the sections are numbered by a counter, the number a tag before the heading; one has a line over it where another comes before it,
   and the room either side of the line is the limit's */
/* the article fills the column, so that the rules between sections, the frame of what is kept and the card that ends the page end
   where the card of sections does; its paragraphs are still at most 70ch (site.css's base), which is the measure of the text */
.lgl-article {
    min-width: 0;
    max-width: none;
    counter-reset: lgl-section;
}

.lgl-section {
    padding-bottom: var(--gap-max);
    counter-increment: lgl-section;
}

.lgl-section + .lgl-section {
    padding-top: var(--gap-max);
    border-top: 1px solid var(--md-outline-variant);
}

.lgl-section:last-of-type {
    padding-bottom: 0;
}

.lgl-section > :last-child {
    margin-bottom: 0;
}

.lgl-section h2 {
    margin: 0 0 0.75rem;
    color: var(--md-on-surface);
}

.lgl-section h2::before {
    content: counter(lgl-section, decimal-leading-zero);
    display: block;
    margin-bottom: 0.25rem;
    color: var(--md-primary-ink);
}

.lgl-section h3 {
    margin: var(--gap-max) 0 0.5rem;
    color: var(--md-on-surface);
}

.lgl-section h2 + h3 {
    margin-top: 0;
}

.lgl-article ul,
.lgl-article ol {
    margin: 0 0 1em;
    padding-left: 1.5rem;
}

.lgl-article li + li {
    margin-top: 0.35em;
}

/* what is kept and for how long: a term and what holds for it, in a frame, a line between two rows; side by side from 40rem */
.lgl-keep {
    margin: 0;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.lgl-keep__row {
    display: grid;
    gap: 0.25rem 1.25rem;
    padding: 0.875rem 1rem;
}

.lgl-keep__row + .lgl-keep__row {
    border-top: 1px solid var(--md-outline-variant);
}

.lgl-keep dt {
    color: var(--md-on-surface);
}

.lgl-keep dd {
    margin: 0;
    color: var(--md-on-surface);
}

/* the card that ends a page: how to write to the company */
.lgl-contact {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--gap-max);
    padding: 1.25rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
}

.lgl-contact__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.lgl-contact__words {
    min-width: 0;
}

.lgl-contact__title {
    margin: 0;
    color: var(--md-on-surface);
}

.lgl-contact__text {
    margin: 0.25rem 0 0;
    color: var(--md-on-surface);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* Contrast and print                                                  */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .lgl-hero,
    .lgl-toc,
    .lgl-keep,
    .lgl-keep__row + .lgl-keep__row,
    .lgl-section + .lgl-section,
    .lgl-contact {
        border-color: var(--md-outline);
    }
}

/* on paper the page is the text: no list of sections, no trail, the hero without its band */
@media print {
    .lgl-toc,
    .lgl-crumbs {
        display: none;
    }

    .lgl-hero {
        background: none;
    }

    .lgl-layout {
        display: block;
    }

    .lgl-section h2,
    .lgl-section h3 {
        break-after: avoid;
    }

    .lgl-keep,
    .lgl-contact {
        break-inside: avoid;
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .lgl-hero {
        padding-bottom: 2rem;
    }

    .lgl-toc__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lgl-keep__row {
        grid-template-columns: 14rem minmax(0, 1fr);
        align-items: baseline;
    }
}

/* ------------------------------------------------------------------ */
/* From 90rem                                                          */
/* ------------------------------------------------------------------ */

/* Beside a text that is in the middle of the page there is room for the list of sections from 90rem: each side of the text is then
   at least 14rem and the gap (the column of the site is 1233px wide at 1440, and 736px of it is the text). The three tracks are
   one width on each side, so that the text is in the middle whatever the window; the list is in the first, against the text, and
   stays in view while the text goes by, under the top bar, scrolling inside itself where the window is too short for it. Below
   90rem there is no room beside the text, and the list is the card over it. */
@media (min-width: 90rem) {
    .lgl-layout {
        max-width: calc(var(--container) + 2 * var(--gutter));
        grid-template-columns: minmax(0, 1fr) minmax(0, 46rem) minmax(0, 1fr);
        align-items: start;
    }

    .lgl-toc {
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        width: 100%;
        max-width: 14rem;
        /* a list that scrolls inside itself clips at its edge: room at the sides and the foot keeps the first letter of the label
           and the ring of a link that has the focus (3px wide, 2px off the link) from being cut off */
        padding: 0 0.375rem 0.375rem;
        border: 0;
        background: none;
        position: sticky;
        top: calc(var(--top-bar-h) + 1.25rem);
        max-height: calc(100dvh - var(--top-bar-h) - 2.5rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .lgl-article {
        grid-column: 2;
        grid-row: 1;
    }

    .lgl-toc__list {
        display: block;
    }

    .lgl-toc__link {
        min-height: 2.25rem;
        padding-block: 0.375rem;
    }
}