/* =====================================================
   TheraLink — Blog (index, category, article)
   Loads after home.css, which owns the shared tokens, fonts (Manrope,
   Literata, IBM Plex Sans Arabic), .tl-btn, .tl-section, nav, footer
   and the global :focus-visible ring. See docs/najdi/audits/blog-ui-identity.md.

   Rules for this file:
   - Colours/fonts come from home.css variables. The few --tl-blog-* values
     below only mirror numbers that live as --hp-* in public-home.css, which the
     blog does not load.
   - Logical properties only (inline/block, inset-inline-*). No physical
     left/right properties, so RTL mirrors for free.
   ===================================================== */

.tl-blog-page {
    /* Mirrors --hp-radius-lg / --hp-shadow-* from public-home.css (same values). */
    --tl-blog-radius: 12px;
    --tl-blog-radius-lg: 1.5rem;
    --tl-blog-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
    --tl-blog-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .08), 0 4px 6px -4px rgba(0, 0, 0, .06);
    --tl-blog-gutter: max(clamp(20px, 5vw, 72px), env(safe-area-inset-left), env(safe-area-inset-right));
    --tl-blog-muted: color-mix(in srgb, var(--tl-text-secondary) 84%, var(--tl-text));
    --tl-blog-ring: var(--tl-blue);
    color: var(--tl-text);
    background: var(--tl-surface);
    overflow-wrap: break-word;
}

/* Sticky footer, same as the other public pages. */
body.tl-blog-page {
    position: relative;
    min-block-size: 100vh;
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;
}

.tl-blog-main {
    flex: 1 0 auto;
    min-inline-size: 0;
    overflow: clip;
    scroll-margin-block-start: var(--tl-nav-scroll-clearance);
}

.tl-blog-main:focus {
    outline: none;
}

.tl-blog-container {
    inline-size: min(100%, 1220px);
    margin-inline: auto;
    padding-inline: var(--tl-blog-gutter);
}

/* Focus: the site ring is a translucent green; blog controls use brand blue so the ring clears 3:1. */
.tl-blog-page :focus-visible {
    outline: 3px solid var(--tl-blog-ring);
    outline-offset: 3px;
}

.tl-blog-main img {
    max-inline-size: 100%;
    block-size: auto;
}

/* ─── Hero (same treatment as the About hero) ─────────────────────── */
.tl-blog-hero {
    padding-block: calc(var(--tl-nav-clearance) + 1.25rem) 2rem;
    background: linear-gradient(135deg, var(--tl-pale-green) 0%, color-mix(in srgb, var(--tl-green) 18%, var(--tl-surface)) 100%);
    overflow: hidden;
}

.tl-blog-hero__inner {
    min-inline-size: 0;
}

.tl-blog-eyebrow {
    margin: 0 0 1rem;
    color: var(--tl-text);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.5;
    text-transform: uppercase;
}

[dir="rtl"] .tl-blog-eyebrow {
    letter-spacing: 0;
}

.tl-blog-hero h1,
.tl-article-hero h1 {
    max-inline-size: 22ch;
    margin: 0;
    font-family: var(--tl-font);
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
    color: var(--tl-text);
    text-wrap: balance;
    overflow-wrap: anywhere;
}

[dir="rtl"] .tl-blog-hero h1,
[dir="rtl"] .tl-article-hero h1 {
    letter-spacing: 0;
    line-height: 1.3;
}

.tl-blog-hero__lead {
    max-inline-size: 52ch;
    margin: 1.25rem 0 0;
    color: color-mix(in srgb, var(--tl-text) 78%, var(--tl-green-dark));
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem);
    line-height: 1.75;
    text-wrap: pretty;
}

/* ─── Search ──────────────────────────────────────────────────────── */
.tl-blog-search {
    max-inline-size: 40rem;
    margin-block-start: 1.5rem;
}

.tl-blog-search label {
    display: block;
    margin-block-end: .5rem;
    font-size: .9375rem;
    font-weight: 700;
}

.tl-blog-search__row {
    display: flex;
    gap: .75rem;
}

.tl-blog-search input {
    min-inline-size: 0;
    min-block-size: 50px;
    flex: 1;
    padding-inline: 1rem;
    border: 1px solid var(--tl-input-border);
    border-radius: var(--tl-blog-radius);
    background: var(--tl-surface);
    color: var(--tl-text);
    font: inherit;
}

.tl-blog-search input::placeholder {
    color: var(--tl-blog-muted);
}

/* ─── Content area ────────────────────────────────────────────────── */
.tl-blog-content {
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
}

.tl-blog-results-title {
    margin: 0 0 1.5rem;
    color: var(--tl-blue);
    font-size: clamp(1.25rem, 2.4vw, 1.625rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ─── Category links ──────────────────────────────────────────────── */
.tl-blog-categories {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.tl-blog-categories a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 1rem;
    border: 1px solid color-mix(in srgb, var(--tl-blue) 28%, var(--tl-surface));
    border-radius: 999px;
    background: var(--tl-surface);
    color: var(--tl-text);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    scroll-snap-align: center;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.tl-blog-categories a:hover {
    border-color: var(--tl-blue);
    background: var(--tl-section-tint-blue);
}

.tl-blog-categories a[aria-current="page"] {
    border-color: var(--tl-blue);
    background: var(--tl-blue);
    color: var(--tl-surface);
}

@media (max-width: 639px) {
    /* Single scrollable row, snapping, with a fade on the trailing edge. */
    .tl-blog-categories {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        padding-block: 4px;
        padding-inline-end: 2rem;
        margin-inline: calc(var(--tl-blog-gutter) * -1);
        padding-inline-start: var(--tl-blog-gutter);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    }

    [dir="rtl"] .tl-blog-categories {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
        mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
    }

    .tl-blog-categories::-webkit-scrollbar {
        display: none;
    }
}

/* ─── Cards (feature-card treatment from home) ────────────────────── */
.tl-blog-featured,
.tl-blog-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-blog-radius-lg);
    background: var(--tl-surface);
    box-shadow: var(--tl-blog-shadow-sm);
}

.tl-blog-card:has(.tl-blog-card__link:focus-visible),
.tl-blog-featured:has(.tl-blog-featured__link:focus-visible) {
    outline: 3px solid var(--tl-blog-ring);
    outline-offset: 3px;
}

.tl-blog-card__link:focus-visible,
.tl-blog-featured__link:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    .tl-blog-card,
    .tl-blog-featured {
        transition: box-shadow .22s ease, transform .22s ease;
    }

    .tl-blog-card:hover,
    .tl-blog-featured:hover {
        box-shadow: var(--tl-blog-shadow-md);
        transform: translateY(-3px);
    }
}

.tl-blog-card__link {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    color: inherit;
    text-decoration: none;
}

.tl-blog-card__image,
.tl-blog-featured__media img,
.tl-article__cover-image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--tl-pale-blue);
}

.tl-blog-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.375rem 1.5rem;
}

.tl-blog-card__category {
    color: var(--tl-blue-dark);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

[dir="rtl"] .tl-blog-card__category {
    letter-spacing: 0;
}

.tl-blog-card h3 {
    margin: 0;
    color: var(--tl-text);
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

[dir="rtl"] .tl-blog-card h3 {
    letter-spacing: 0;
    line-height: 1.5;
}

.tl-blog-card p {
    margin: 0;
    color: var(--tl-blog-muted);
    font-size: .9375rem;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tl-blog-card__meta,
.tl-article__byline {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    margin-block-start: auto;
    color: var(--tl-blog-muted);
    font-size: .875rem;
}

/* Featured post: image on top below 900px, inline-start beside text from 900px. */
.tl-blog-featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block-end: 2rem;
}

.tl-blog-featured__link {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.tl-blog-featured__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .75rem;
    min-inline-size: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.tl-blog-featured h2 {
    margin: 0;
    color: var(--tl-blue);
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

[dir="rtl"] .tl-blog-featured h2 {
    letter-spacing: 0;
    line-height: 1.4;
}

.tl-blog-featured p {
    margin: 0;
    color: var(--tl-blog-muted);
    line-height: 1.7;
}

.tl-blog-featured .tl-blog-eyebrow {
    margin: 0;
}

@media (min-width: 900px) {
    .tl-blog-featured {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    }

    .tl-blog-featured__media {
        display: flex;
    }

    .tl-blog-featured__media img {
        block-size: 100%;
        aspect-ratio: auto;
        min-block-size: 100%;
    }
}

/* Grid: 1 column under 640px, 2 from 640px, 3 from 1024px. */
.tl-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .tl-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tl-blog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tl-blog-empty {
    padding-block: 3rem;
    text-align: center;
}

.tl-blog-empty h2 {
    margin: 0 0 .75rem;
    color: var(--tl-blue);
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
}

.tl-blog-empty p {
    max-inline-size: 36rem;
    margin: 0 auto 1.25rem;
    color: var(--tl-blog-muted);
    line-height: 1.7;
}

/* ─── Pagination: one row, never wider than the screen ────────────── */
.tl-blog-pagination {
    margin-block-start: 2.5rem;
}

.tl-pagination__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-pagination__link,
.tl-pagination__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: .75rem;
    border: 1px solid transparent;
    border-radius: var(--tl-blog-radius);
    color: var(--tl-text);
    font-size: .9375rem;
    font-weight: 700;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

a.tl-pagination__link {
    border-color: color-mix(in srgb, var(--tl-blue) 28%, var(--tl-surface));
    background: var(--tl-surface);
}

a.tl-pagination__link:hover {
    border-color: var(--tl-blue);
    background: var(--tl-section-tint-blue);
}

.tl-pagination__link.is-current {
    border-color: var(--tl-blue);
    background: var(--tl-blue);
    color: var(--tl-surface);
}

.tl-pagination__link.is-disabled {
    color: var(--tl-blog-muted);
    opacity: .6;
}

.tl-pagination__gap {
    min-inline-size: 28px;
    padding-inline: 0;
}

.tl-pagination__item--status {
    display: none;
    color: var(--tl-blog-muted);
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
}

[dir="rtl"] .tl-pagination__arrow {
    display: inline-block;
    transform: scaleX(-1);
}

@media (max-width: 479px) {
    /* Phones: previous · "Page 2 of 5" · next. Numbers return from 480px. */
    .tl-pagination__item--num {
        display: none;
    }

    .tl-pagination__item--status {
        display: block;
    }

    .tl-pagination__label {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .tl-pagination__link {
        padding-inline: 0;
    }
}

/* ─── Closing CTA (mirrors .tl-close on the home page) ────────────── */
.tl-blog-page .tl-section--close {
    padding-block: clamp(3rem, 7vw, 5rem);
    padding-inline: var(--tl-blog-gutter);
}

.tl-blog-page .tl-close {
    max-inline-size: 36rem;
    margin-inline: auto;
    text-align: center;
}

.tl-blog-page .tl-close h2 {
    margin: 0;
    font-family: var(--tl-font);
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.025em;
    color: var(--tl-blue);
    text-wrap: balance;
}

.tl-blog-page .tl-close p {
    margin: .875rem auto 0;
    max-inline-size: 32rem;
    font-size: 1.025rem;
    line-height: 1.7;
    color: var(--tl-text-secondary);
}

.tl-blog-page .tl-close__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-block-start: 1.5rem;
}

.tl-blog-page .tl-close__secondary {
    color: var(--tl-blue);
    background: transparent;
    border-color: color-mix(in srgb, var(--tl-blue) 38%, transparent);
    box-shadow: none;
}

.tl-blog-page .tl-close__secondary:hover {
    color: var(--tl-blue-dark);
    background: var(--tl-section-tint-blue);
    border-color: var(--tl-blue);
    box-shadow: none;
}

@media (max-width: 640px) {
    .tl-blog-page .tl-close__actions {
        flex-direction: column;
        align-items: stretch;
        inline-size: min(100%, 20rem);
        margin-inline: auto;
    }
}

@media (max-width: 479px) {
    .tl-blog-search__row {
        flex-direction: column;
    }

    .tl-blog-search .tl-btn {
        inline-size: 100%;
    }
}

/* ─── Article ─────────────────────────────────────────────────────── */
.tl-article-hero {
    padding-block: calc(var(--tl-nav-clearance) + 1.25rem) 2.5rem;
    background: linear-gradient(135deg, var(--tl-pale-green) 0%, color-mix(in srgb, var(--tl-green) 18%, var(--tl-surface)) 100%);
}

.tl-article-hero h1 {
    max-inline-size: 26ch;
    margin-block-start: .75rem;
}

.tl-article__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin-block-end: .75rem;
    font-size: .9375rem;
}

.tl-article__breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--tl-blue-dark);
}

.tl-article__category {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    color: var(--tl-blue-dark);
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}

[dir="rtl"] .tl-article__category {
    letter-spacing: 0;
}

.tl-article__byline {
    margin-block-start: 1.25rem;
    color: var(--tl-text);
}

.tl-article__preview-notice {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--tl-blue);
    border-radius: var(--tl-blog-radius);
    background: var(--tl-surface);
    color: var(--tl-text);
    font-weight: 600;
}

.tl-article__cover {
    margin-block-start: -1.25rem;
    position: relative;
}

.tl-article__cover-image {
    border-radius: var(--tl-blog-radius-lg);
    box-shadow: var(--tl-blog-shadow-md);
}

.tl-article__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    gap: 2rem;
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3rem);
}

.tl-article__column {
    min-inline-size: 0;
    max-inline-size: 46rem;
    inline-size: 100%;
    margin-inline: auto;
}

.tl-article__toc-col {
    display: none;
}

@media (min-width: 1024px) {
    .tl-article__layout {
        grid-template-columns: minmax(0, 46rem) 17rem;
        gap: clamp(2rem, 4vw, 4rem);
    }

    .tl-article__column {
        margin-inline: 0;
    }

    .tl-article__toc-col {
        display: block;
    }

    .tl-article__toc-col .tl-article__toc {
        position: sticky;
        inset-block-start: calc(var(--tl-nav-clearance) + 1rem);
        max-block-size: calc(100vh - var(--tl-nav-clearance) - 2rem);
        max-block-size: calc(100svh - var(--tl-nav-clearance) - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .tl-article__toc--mobile {
        display: none;
    }
}

/* Callout boxes: quick answer, TOC, author. */
.tl-article__quick-answer,
.tl-article__toc,
.tl-article__author {
    margin-block: 0 1.75rem;
    padding: 1.125rem 1.375rem;
    border: 1px solid var(--tl-border);
    border-inline-start: 4px solid var(--tl-green);
    border-radius: var(--tl-blog-radius);
    background: var(--tl-pale-green);
}

.tl-article__toc {
    border-inline-start-color: var(--tl-blue);
    background: var(--tl-pale-blue);
}

.tl-article__quick-answer h2,
.tl-article__toc h2,
.tl-article__toc summary,
.tl-article__author h2 {
    margin: 0 0 .5rem;
    color: var(--tl-blue-dark);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.tl-article__quick-answer p,
.tl-article__author p {
    margin: 0;
    color: var(--tl-text);
    line-height: 1.7;
}

.tl-article__author p + p {
    margin-block-start: .5rem;
    color: var(--tl-blog-muted);
}

.tl-article__toc ol {
    margin: 0;
    padding-inline-start: 1.25rem;
    font-size: .9375rem;
    line-height: 1.5;
}

.tl-article__toc li + li {
    margin-block-start: .25rem;
}

.tl-article__toc a {
    display: inline-block;
    padding-block: .375rem;
    color: var(--tl-blue-dark);
    overflow-wrap: anywhere;
}

.tl-article__toc--mobile summary {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    margin: 0;
    cursor: pointer;
}

.tl-article__toc--mobile[open] summary {
    margin-block-end: .5rem;
}

/* Body copy */
.tl-article__body {
    font-family: "Literata", Georgia, serif;
    font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
    line-height: 1.7;
    color: var(--tl-text);
    overflow-wrap: anywhere;
}

[dir="rtl"] .tl-article__body {
    font-family: var(--tl-font-ar);
    line-height: 1.9;
}

.tl-article__body > * {
    max-inline-size: 100%;
}

.tl-article__body p {
    margin-block: 0 1.25em;
}

.tl-article__body h2,
.tl-article__body h3,
.tl-article__body h4 {
    font-family: var(--tl-font);
    color: var(--tl-blue);
    font-weight: 600;
    letter-spacing: -.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

[dir="rtl"] .tl-article__body :is(h2, h3, h4) {
    letter-spacing: 0;
    line-height: 1.5;
}

.tl-article__body h2 {
    margin-block: 2.25em .6em;
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    line-height: 1.2;
    scroll-margin-block-start: var(--tl-nav-scroll-clearance);
}

.tl-article__body h3 {
    margin-block: 1.75em .5em;
    color: var(--tl-text);
    font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
    line-height: 1.3;
}

.tl-article__body h4 {
    margin-block: 1.5em .4em;
    color: var(--tl-text);
    font-size: 1.125rem;
}

.tl-article__body a {
    color: var(--tl-blue);
    text-decoration: underline;
    text-underline-offset: .18em;
}

.tl-article__body a:hover {
    color: var(--tl-blue-dark);
}

.tl-article__body ul,
.tl-article__body ol {
    margin-block: 0 1.25em;
    padding-inline-start: 1.5em;
}

.tl-article__body li + li {
    margin-block-start: .4em;
}

.tl-article__body blockquote {
    margin-block: 1.5em;
    margin-inline: 0;
    padding: .75em 1.25em;
    border-inline-start: 4px solid var(--tl-blue);
    border-radius: var(--tl-blog-radius);
    background: var(--tl-pale-blue);
    color: var(--tl-text);
    font-style: italic;
}

.tl-article__body blockquote > :last-child {
    margin-block-end: 0;
}

.tl-article__body code {
    padding: .1em .35em;
    border-radius: 6px;
    background: var(--tl-pale-blue);
    color: var(--tl-blue-deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    overflow-wrap: anywhere;
}

.tl-article__body pre {
    margin-block: 1.5em;
    padding: 1rem 1.25rem;
    overflow-x: auto;
    border-radius: var(--tl-blog-radius);
    background: var(--tl-footer-bg);
    color: var(--hero-cream);
    font-size: .9rem;
    line-height: 1.6;
    tab-size: 4;
    direction: ltr;
    text-align: start;
}

.tl-article__body pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    overflow-wrap: normal;
}

.tl-article__body img {
    display: block;
    margin-block: 1.5em;
    border-radius: var(--tl-blog-radius);
}

.tl-article__body hr {
    margin-block: 2em;
    border: 0;
    border-block-start: 1px solid var(--tl-border);
}

/* Tables sit in a scroll region; a hint shows on small screens. */
.tl-article__table-scroll {
    position: relative;
    margin-block: 1.5em;
    overflow-x: auto;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-blog-radius);
    -webkit-overflow-scrolling: touch;
}

.tl-article__table-scroll table {
    inline-size: 100%;
    min-inline-size: 30rem;
    border-collapse: collapse;
    font-family: var(--tl-font);
    font-size: .9375rem;
    line-height: 1.5;
}

.tl-article__table-scroll th,
.tl-article__table-scroll td {
    padding: .625rem .875rem;
    border-block-end: 1px solid var(--tl-border);
    text-align: start;
    vertical-align: top;
    overflow-wrap: normal;
}

.tl-article__table-scroll th {
    background: var(--tl-pale-blue);
    color: var(--tl-blue-dark);
    font-weight: 700;
}

.tl-article__table {
    margin-block: 1.5em;
}

.tl-article__table .tl-article__table-scroll {
    margin-block: 0;
}

.tl-article__table-hint {
    display: none;
    margin: 0 0 .375rem;
    color: var(--tl-blog-muted);
    font-family: var(--tl-font);
    font-size: .8125rem;
    line-height: 1.4;
}

@media (max-width: 639px) {
    .tl-article__table-hint {
        display: block;
    }
}

/* FAQ */
.tl-article__faq {
    margin-block: 2.5rem;
}

.tl-article__faq h2 {
    margin: 0 0 1rem;
    color: var(--tl-blue);
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
}

[dir="rtl"] .tl-article__faq h2 {
    letter-spacing: 0;
    line-height: 1.4;
}

.tl-article__faq details {
    border-block-start: 1px solid var(--tl-border);
}

.tl-article__faq details:last-child {
    border-block-end: 1px solid var(--tl-border);
}

.tl-article__faq summary {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-block: .5rem;
    cursor: pointer;
    color: var(--tl-text);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.tl-article__faq details[open] summary {
    color: var(--tl-blue-dark);
}

.tl-article__faq details p {
    margin: 0 0 1rem;
    color: var(--tl-blog-muted);
    line-height: 1.7;
}

.tl-article__cta {
    margin-block: 2.5rem 0;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid color-mix(in srgb, var(--tl-blue) 16%, var(--tl-surface));
    border-radius: var(--tl-blog-radius-lg);
    background: linear-gradient(135deg, var(--tl-pale-blue), var(--tl-pale-green));
    text-align: center;
}

.tl-article__cta h2 {
    margin: 0;
    color: var(--tl-blue);
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-wrap: balance;
}

[dir="rtl"] .tl-article__cta h2 {
    letter-spacing: 0;
    line-height: 1.5;
}

.tl-article__cta p {
    max-inline-size: 36rem;
    margin: .75rem auto 1.25rem;
    color: var(--tl-blog-muted);
    line-height: 1.7;
}

.tl-article-related {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 6vw, 4.5rem);
}

.tl-article-related > h2 {
    margin: 0 0 1.5rem;
    color: var(--tl-blue);
    font-size: clamp(1.625rem, 3.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.2;
}

[dir="rtl"] .tl-article-related > h2 {
    letter-spacing: 0;
    line-height: 1.4;
}

/* Visually hidden text (headings that only give structure). */
.tl-blog-page .tl-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .tl-blog-page *,
    .tl-blog-page *::before,
    .tl-blog-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}