/* MoodPlanner — the legal pages.

   Most readers arrive from the app, on a phone, and often in the dark theme,
   so the narrow layout is the design and the wide one the variation. The pages
   load nothing from anywhere else: no web fonts, no scripts from a CDN, no
   counters. A font service would hand every reader's address to a third party
   on the one page promising that nobody is watching. */

/* ---------- tokens ---------- */

:root {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --bg: #f4f8fd;
    --surface: #ffffff;
    --surface-2: #edf3fb;
    --text: #1f2d3b;
    --text-2: #43546a;
    --muted: #5e6e7e;
    --rule: #dce5f0;
    --shadow: rgba(23, 32, 61, 0.08);

    --brand: #5b9bd5;
    --brand-ink: #2f6ea8;
    --brand-soft: #e3eefa;

    /* The five moods, in the order the app's ring draws them. */
    --m1: #e57373;
    --m2: #ffb74d;
    --m3: #ffd54f;
    --m4: #81c784;
    --m5: #ba68c8;
    --moods: linear-gradient(90deg, var(--m1), var(--m2), var(--m3), var(--m4), var(--m5));

    --care-bg: #fff5f2;
    --care-rule: #f3c6be;
    --care-badge: #fbe0db;
    --care-ink: #a33b33;

    --radius: 1rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0e141d;
        --surface: #161f2c;
        --surface-2: #1c2737;
        --text: #e6ecf2;
        --text-2: #c2ccd7;
        --muted: #97a4b3;
        --rule: #263245;
        --shadow: rgba(0, 0, 0, 0.35);

        --brand: #82b4dd;
        --brand-ink: #9ec8ec;
        --brand-soft: #1a2a40;

        --care-bg: #26191c;
        --care-rule: #4d2a2e;
        --care-badge: #41262a;
        --care-ink: #f3a9a3;
    }
}

/* ---------- base ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* At least the height of the window, so on a short page the footer sits on
   the bottom edge of the screen instead of hanging halfway up it. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;       /* the visible height, once a phone toolbar settles */
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1.0625rem/1.7 var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--brand-ink);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

svg.i {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The width of everything that lines up: the top bar, the hero, the footer.
   The number is not chosen by eye — it is exactly the reading column below it,
   the contents sidebar (16rem) plus the gutter (3.5rem) plus the text (46rem).
   Anything wider leaves dead space on the right that only the top bar fills,
   which is what pushed the language switch further out than the text it sits
   above. Change any of those three and this has to change with them. */
.wrap {
    width: min(65.5rem, 100% - 2.5rem);
    margin-inline: auto;
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10;
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
    background: var(--brand-ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.skip:focus { top: 1rem; }

/* The app's ring, unrolled: the one flourish the page allows itself. */
.mood-bar {
    height: 4px;
    background: var(--moods);
}

/* ---------- top bar ---------- */

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
}

.topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.brand-mark {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
}

.lang {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: 999px;
}

.lang a {
    padding: 0.28rem 0.8rem;
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current] {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 3px var(--shadow);
}

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

.hero { padding: 1.5rem 0 1.75rem; }

/* On a phone the three documents are an equal-thirds switch, icon over label,
   so all three are visible without scrolling sideways. */
.docnav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin: 0 0 1.75rem;
}

.docnav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 0.4rem;
    border: 1px solid var(--rule);
    border-radius: 0.85rem;
    background: var(--surface);
    color: var(--text-2);
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}
.docnav a svg { width: 1.25rem; height: 1.25rem; }
.docnav a:hover { border-color: var(--brand); color: var(--text); }
.docnav a[aria-current] {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand-ink);
}

.hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.lede {
    margin: 0 0 1.25rem;
    max-width: 38em;
    color: var(--text-2);
    font-size: 1.125rem;
    line-height: 1.55;
    text-wrap: pretty;
}

.version {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.3rem 0.8rem 0.3rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.8125rem;
}
.version svg { width: 1rem; height: 1rem; }

@media (min-width: 48rem) {
    .hero { padding: 2.75rem 0 2.25rem; }
    .docnav { display: flex; gap: 0.5rem; }
    .docnav a {
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.55rem 1rem;
        font-size: 0.9rem;
    }
    .docnav a svg { width: 1.1rem; height: 1.1rem; }
}

/* ---------- layout ---------- */

.layout {
    flex: 1 0 auto;
    padding-bottom: 4rem;
}

@media (min-width: 64rem) {
    .layout.has-toc {
        display: grid;
        grid-template-columns: 16rem minmax(0, 1fr);
        gap: 3.5rem;
        align-items: start;
    }
}

/* ---------- contents ---------- */

/* Folded on a phone, where eighteen entries before the text would bury it; a
   standing sidebar on a wide screen, where there is room to keep it in view. */
.toc-box {
    margin: 0 0 2rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
}

.toc-box > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.15rem;
    cursor: pointer;
    list-style: none;
    font-weight: 650;
}
.toc-box > summary::-webkit-details-marker { display: none; }
.toc-box > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.2rem;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
}
.toc-box[open] > summary::after { transform: translateY(25%) rotate(-135deg); }

.toc-box nav { padding: 0 0.6rem 0.75rem; }
.toc-box ul { margin: 0; padding: 0; list-style: none; }

.toc-box a {
    display: flex;
    gap: 0.6rem;
    padding: 0.42rem 0.55rem;
    border-radius: 0.55rem;
    color: var(--text-2);
    font-size: 0.9rem;
    line-height: 1.35;
    text-decoration: none;
}
.toc-box a:hover { background: var(--surface-2); color: var(--text); }

/* Where the reader is now. Marked from the scroll rather than from the last
   click, because on a wide screen this list stands in view the whole way down
   the document: an entry lit only where someone last clicked would still be
   pointing at section three while they are reading section seven.
   Same pair of tokens the document switch above the title uses, so "you are
   here" looks the same wherever it appears. */
.toc-box a[aria-current] {
    background: var(--brand-soft);
    color: var(--brand-ink);
}
.toc-box a[aria-current] .num { color: var(--brand-ink); }

.toc-box .num {
    flex: none;
    min-width: 1.4rem;
    color: var(--muted);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 64rem) {
    .toc {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
        overflow: auto;
    }
    .toc-box { margin: 0; }
    .toc-box > summary {
        padding-bottom: 0.5rem;
        cursor: default;
        pointer-events: none;
        color: var(--muted);
        font-size: 0.75rem;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }
    .toc-box > summary::after { display: none; }
}

/* On a narrow screen the contents open *over* the text rather than pushing it
   down: eighteen entries wedged between the title and the first paragraph are
   a wall, and someone who opened the list meant to leave it, not to scroll
   through it. Capped in height so it always ends on the screen it opened on. */
@media (max-width: 63.99rem) {
    .toc { position: relative; z-index: 20; }
    /* While the fold is open its own bottom corners go square, so the list
       hanging beneath it reads as one shape with the fold rather than a card
       under a card. The list is also let out by the width of the border on
       each side, so its edges land exactly on the edges of the fold instead
       of a pixel inside them. */
    .toc-box[open] {
        position: relative;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .toc-box[open] nav {
        position: absolute;
        top: 100%;
        left: -1px;
        right: -1px;
        max-height: min(60vh, 24rem);
        overflow-y: auto;
        padding: 0.35rem 0.6rem 0.75rem;
        background: var(--surface);
        border: 1px solid var(--rule);
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: 0 18px 34px -18px var(--shadow);
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- article ---------- */

.article {
    min-width: 0;
    max-width: 46rem;          /* about seventy characters: the measure that reads */
}

/* Deleting an account is the one document with no contents beside it. On the
   others the reading measure is 46rem because a sidebar holds the rest of the
   column; here nothing does, and a 46rem text left the page looking wrong in
   every direction it was pushed — short of the language switch on the left,
   hanging in a hole where a sidebar was not on the right, and shrunken when
   the whole page was narrowed to match it. So on this page the text takes the
   whole column: it starts under the title and ends under the switch, the same
   span the other pages fill. The lines run longer than the measure elsewhere,
   but this page is two cards and a list, not paragraphs, and it wears it. */
.layout:not(.has-toc) .article { max-width: none; }

.article > p:first-child {
    color: var(--text-2);
    font-size: 1.0625rem;
}

.article section.level2 {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 1.25rem;
}
.article > section.level2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.article h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.article h2 .num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--brand-soft);
    color: var(--brand-ink);
    font-size: 0.9375rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

/* Arriving from the contents, the section you asked for says so. */
.article section:target > h2 .num {
    background: var(--brand-ink);
    color: var(--surface);
}

.article h3 {
    margin: 1.75rem 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
}

.article p { margin: 0 0 1rem; }

.article ul,
.article ol {
    margin: 0 0 1.25rem;
    padding-left: 1.3rem;
}
.article li {
    margin: 0.35rem 0;
    padding-left: 0.3rem;
}
.article li::marker { color: var(--brand); }

.article strong { font-weight: 650; }

.article code {
    padding: 0.12em 0.42em;
    border: 1px solid var(--rule);
    border-radius: 0.4rem;
    background: var(--surface-2);
    font-family: var(--mono);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

.article hr {
    margin: 2rem 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.article blockquote {
    margin: 1.25rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 4px solid var(--brand);
    border-radius: 0 0.8rem 0.8rem 0;
    background: var(--surface-2);
    color: var(--text-2);
}

/* Tables scroll inside their own card on a narrow screen, not the whole page. */
.table-wrap {
    margin: 1.25rem 0 1.5rem;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
}

.table-wrap table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* On a phone the two-column tables — the permissions, the retention periods —
   fit as they are once the minimum that forces a sideways scroll comes off.
   The three-column ones in the privacy policy carry a sentence in every
   column; squeezed onto a phone they turn into a ladder of one word per line,
   which is worse than a scroll, so those keep theirs. */
@media (max-width: 40rem) {
    .table-wrap table { min-width: 0; font-size: 0.875rem; }
    .table-wrap th,
    .table-wrap td { padding: 0.6rem 0.7rem; }
    .table-wrap thead th { white-space: normal; }
    .table-wrap table:has(thead th:nth-child(3)) { min-width: 30rem; }
}

.table-wrap th,
.table-wrap td {
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}

.table-wrap thead th {
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-wrap tbody tr + tr td { border-top: 1px solid var(--rule); }
.table-wrap tbody td:first-child {
    color: var(--text);
    font-weight: 600;
}

/* ---------- sections that carry more weight than the rest ---------- */

/* Terms, section 13. A mood diary can be opened on a bad day, and the help
   numbers should not be the hardest thing on the page to find. */
.doc-terms section[id^="13-"] {
    margin-top: 2.25rem;
    padding: 1.5rem 1.5rem 0.5rem;
    border: 1px solid var(--care-rule);
    border-left: 4px solid var(--m1);
    border-radius: var(--radius);
    background: var(--care-bg);
}
.doc-terms section[id^="13-"] h2 .num {
    background: var(--care-badge);
    color: var(--care-ink);
}
.doc-terms section[id^="13-"] + section.level2 { border-top: 0; }

/* Privacy, section 2: the three-sentence version, for everyone who stops there. */
.doc-privacy section[id^="2-"] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 0.5rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--brand-soft);
}
.doc-privacy section[id^="2-"]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--moods);
}
/* On the tinted panel the badge is drawn in reverse: a white tile with a brand
   numeral. The colour has to be stated rather than left to the rule above,
   which paints a targeted numeral white — the two selectors weigh exactly the
   same, so with only the background named here the number turned white on
   white and vanished the moment the section was opened from the contents. */
.doc-privacy section[id^="2-"] h2 .num {
    background: var(--surface);
    color: var(--brand-ink);
}
.doc-privacy section[id^="2-"]:target > h2 .num {
    background: var(--brand-ink);
    color: var(--surface);
}
.doc-privacy section[id^="2-"] + section.level2 { border-top: 0; }

/* Privacy, section 6: who can see your data. The policy itself calls it the
   most important thing to understand, so the page agrees. */
.doc-privacy section[id^="6-"] {
    padding: 1.5rem 1.5rem 0.5rem;
    border: 1px solid var(--rule);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    background: var(--surface);
}
.doc-privacy section[id^="6-"] + section.level2 { border-top: 0; }

/* Deleting an account: the two routes are the whole point of the page, so
   they are drawn as numbered steps, the quicker one first and outlined. */
.doc-delete-account .article { counter-reset: route; }

.doc-delete-account section.level2:nth-of-type(-n+2) {
    counter-increment: route;
    margin-top: 1rem;
    padding: 1.4rem 1.5rem 0.4rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px var(--shadow);
}
.doc-delete-account section.level2:nth-of-type(-n+2) h2::before {
    content: counter(route);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--surface);
    font-size: 0.95rem;
    font-weight: 750;
}
.doc-delete-account section.level2:nth-of-type(3) {
    margin-top: 2.5rem;
    padding-top: 0.25rem;
    border-top: 0;
}
.doc-delete-account section.level2:nth-of-type(3) li::marker {
    content: "✕  ";
    color: var(--m1);
    font-weight: 700;
}

/* ---------- footer ---------- */

.footer {
    flex: none;
    padding: 1.25rem 0 1.4rem;
    border-top: 1px solid var(--rule);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.875rem;
}

.footer-in {
    display: grid;
    gap: 0.9rem;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text);
    font-weight: 700;
}
.footer-brand svg {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.45rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}

.footer a { color: var(--text-2); }
.footer p { margin: 0; }
.footer-note { font-size: 0.8125rem; }

/* The index footer holds nothing but the note, so it centres under the cards
   rather than starting at the left edge of a wider column. */
.home .footer-in {
    justify-items: center;
    text-align: center;
}

@media (min-width: 48rem) {
    .footer-in {
        grid-template-columns: auto 1fr;
        column-gap: 2.5rem;
        align-items: center;
    }
    .footer-links { justify-content: flex-end; }
    .footer-contact,
    .footer-note { grid-column: 1 / -1; }
}

/* ---------- the index ---------- */

/* The index is meant to be taken in at a glance rather than scrolled, so where
   it fits, the page stops scrolling altogether.
   Both halves of the guard are measured, because the height of this page
   depends on its width: the cards wrap more as they narrow. It settles at
   747px from 64rem upwards, then climbs — 765 at 900px, 824 at 800, 845 at the
   two-column threshold, and past 1200 once the cards stack into one column on
   a phone. A guard set on width alone, or on the threshold where two columns
   begin, quietly cuts the bottom off the cards.
   So the overflow is hidden only where the content is known to fit: 64rem wide
   and 48rem tall, against those 747px. Anywhere narrower or shorter the page
   scrolls as it always did — hiding it there would put the second card
   permanently out of reach, which is a far worse fault than a scrollbar. */
@media (min-width: 64rem) and (min-height: 48rem) {
    body.home { overflow: hidden; }
}

.home-main {
    flex: 1 0 auto;
    width: min(58rem, 100% - 2.5rem);
    margin: 0 auto;
    padding: 2rem 0 2.25rem;
}

.home-hero {
    margin: 0 0 1.75rem;
    text-align: center;
}

.home-mark {
    display: block;
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 0.9rem;
    border-radius: 1.15rem;
    box-shadow: 0 14px 34px -14px rgba(23, 32, 61, 0.55);
}

.home-hero h1 {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.home-hero .lede {
    margin: 0 auto 0.35rem;
    max-width: 34em;
    text-wrap: balance;
}
.home-hero .lede + .lede {
    color: var(--muted);
    font-size: 1rem;
}

.home-grid {
    display: grid;
    gap: 1.25rem;
}
@media (min-width: 46rem) {
    .home-grid { grid-template-columns: 1fr 1fr; }
}

.lang-card {
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 1.25rem;
    box-shadow: 0 1px 2px var(--shadow);
}

.lang-card h2 {
    margin: 0.35rem 0.6rem 0.75rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.doc-card {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 0.7rem;
    border-radius: 0.9rem;
    color: var(--text);
    text-decoration: none;
}
.doc-card:hover { background: var(--surface-2); }

.doc-card .ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    background: var(--brand-soft);
    color: var(--brand-ink);
}
.doc-card .ic svg { width: 1.3rem; height: 1.3rem; }

.doc-card .txt { min-width: 0; }
.doc-card strong {
    display: block;
    font-weight: 650;
    line-height: 1.3;
}
.doc-card small {
    display: block;
    margin-top: 0.1rem;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
}
.doc-card .go {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: auto;
    color: var(--muted);
}

.home-contact {
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    text-align: center;
}

/* ---------- motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* A policy gets printed and saved as PDF more than most pages do. */
@media print {
    .skip, .mood-bar, .topbar, .docnav, .toc, .footer-links { display: none !important; }
    body { display: block; min-height: 0; background: #fff; color: #000; font-size: 11pt; }
    .hero { padding: 0 0 1rem; }
    .layout { display: block !important; padding: 0; }
    .article { max-width: none; }
    .article a { color: #000; }
    .article h2 { break-after: avoid; }
    .table-wrap { overflow: visible; border-color: #999; }
    .table-wrap table { min-width: 0; }
    .footer { padding: 1rem 0 0; border: 0; }
}