/* ==========================================================================
   BloodAI Analytics — design system
   --------------------------------------------------------------------------
   Loaded after style.css on every page. Holds the shared tokens, the typography
   scale, the article/blog chrome and the homepage section components that the
   per-language section fragments compose from.

   Everything here is token-driven so light and dark mode stay in step, and the
   whole file is plain CSS — no build step, no runtime.
   ========================================================================== */

/* --------------------------------------------------------------- 1. tokens */
:root {
  --ds-brand: #4f46e5;
  --ds-brand-strong: #3730a3;
  --ds-brand-soft: #eef2ff;
  --ds-brand-ring: rgba(79, 70, 229, 0.28);

  --ds-accent: #e11d48;
  --ds-accent-soft: #fff1f3;
  --ds-ok: #0f766e;
  --ds-ok-soft: #ecfdf5;
  --ds-warn: #b45309;
  --ds-warn-soft: #fffbeb;

  --ds-ink: #14161f;
  --ds-ink-muted: #565b73;
  --ds-ink-faint: #8b90a7;
  --ds-surface: #ffffff;
  --ds-surface-alt: #f7f8fc;
  --ds-surface-sunken: #eef0f7;
  --ds-line: #e3e6f0;

  --ds-radius: 14px;
  --ds-radius-lg: 22px;
  --ds-shadow-sm: 0 1px 2px rgba(20, 22, 31, 0.05), 0 1px 3px rgba(20, 22, 31, 0.06);
  --ds-shadow: 0 4px 12px rgba(20, 22, 31, 0.07), 0 12px 32px rgba(20, 22, 31, 0.06);
  --ds-shadow-lg: 0 18px 48px rgba(55, 48, 163, 0.14);

  --ds-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ds-display: 'Outfit', var(--ds-sans);
  --ds-measure: 72ch;
  --ds-gap: clamp(1rem, 2.5vw, 2rem);
  --ds-section-y: clamp(3rem, 7vw, 5.5rem);
}

html[lang='ar'],
html[dir='rtl'] {
  --ds-sans: 'Noto Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
  --ds-display: 'Noto Sans Arabic', 'Outfit', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ds-brand: #8b83f5;
    --ds-brand-strong: #a5a0ff;
    --ds-brand-soft: #1d1f3a;
    --ds-brand-ring: rgba(139, 131, 245, 0.35);

    --ds-accent: #fb7185;
    --ds-accent-soft: #2c1620;
    --ds-ok: #5eead4;
    --ds-ok-soft: #10251f;
    --ds-warn: #fbbf24;
    --ds-warn-soft: #2a2010;

    --ds-ink: #e9eaf2;
    --ds-ink-muted: #a4a8be;
    --ds-ink-faint: #7d8199;
    --ds-surface: #14161f;
    --ds-surface-alt: #1a1d29;
    --ds-surface-sunken: #222634;
    --ds-line: #2c3143;

    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ds-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --ds-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme='dark'] {
  --ds-brand: #8b83f5;
  --ds-brand-strong: #a5a0ff;
  --ds-brand-soft: #1d1f3a;
  --ds-ink: #e9eaf2;
  --ds-ink-muted: #a4a8be;
  --ds-ink-faint: #7d8199;
  --ds-surface: #14161f;
  --ds-surface-alt: #1a1d29;
  --ds-surface-sunken: #222634;
  --ds-line: #2c3143;
}

/* ------------------------------------------------------------ 2. baseline */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--ds-sans);
  color: var(--ds-ink);
  background: var(--ds-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .ds-title, .navbar-brand {
  font-family: var(--ds-display);
  letter-spacing: -0.015em;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible,
:where([tabindex]):focus-visible {
  outline: 3px solid var(--ds-brand-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

img { max-width: 100%; height: auto; }

/* Bootstrap's negative row gutters leave a few pixels of horizontal scroll on
   narrow screens, which Search Console reports as "content wider than screen".
   Clipping the inline axis removes it without affecting sticky positioning the
   way `overflow: hidden` would. */
html, body { overflow-x: clip; max-width: 100%; }

/* Hidden with clipping rather than an off-screen offset: a negative `left`
   adds its distance to the document's scroll width, and under `dir="rtl"` that
   overflow sits on the leading edge — the page then opens scrolled into empty
   space with the content off-screen. Clipping takes the element out of the
   layout entirely. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--ds-brand);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--ds-radius) 0;
}

/* ------------------------------------------------- 3. homepage components */
.ds-section {
  padding-block: var(--ds-section-y);
  background: var(--ds-surface);
  color: var(--ds-ink);
}
.ds-section--tint { background: var(--ds-surface-alt); }

.ds-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-brand);
  margin-bottom: 0.5rem;
}

.ds-title {
  font-size: clamp(1.7rem, 3.4vw, 2.55rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  max-width: 22ch;
}

.ds-lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ds-ink-muted);
  max-width: 62ch;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.ds-grid {
  display: grid;
  gap: var(--ds-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* auto-fit leaves a six-card set as 4 + 2 on a wide screen. Pin the modifiers
   to their column count above the breakpoint so the rows stay even. */
@media (min-width: 992px) {
  .ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ds-card {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--ds-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ds-section--tint .ds-card { background: var(--ds-surface); }
.ds-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-shadow);
  border-color: var(--ds-brand-ring);
}

.ds-card__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: var(--ds-brand-soft);
  color: var(--ds-brand);
  font-size: 1.2rem;
}

.ds-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--ds-ink);
}

.ds-card__text {
  color: var(--ds-ink-muted);
  font-size: 0.97rem;
  line-height: 1.65;
  margin-bottom: 0;
}

.ds-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ds-ink-faint);
  margin: 1.75rem 0 0.75rem;
}
.ds-group-title:first-child { margin-top: 0; }

.ds-chip-grid { display: block; }

.ds-chip {
  display: inline-block;
  margin: 0 0.4rem 0.5rem 0;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink-muted);
  font-size: 0.87rem;
  font-weight: 500;
  white-space: nowrap;
}
.ds-chip:hover { border-color: var(--ds-brand-ring); color: var(--ds-brand); }

.ds-compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  overflow: hidden;
}
.ds-compare th,
.ds-compare td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ds-line);
  text-align: start;
  vertical-align: top;
  color: var(--ds-ink);
}
.ds-compare thead th {
  background: var(--ds-surface-sunken);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ds-compare thead th:last-child { background: var(--ds-brand-soft); color: var(--ds-brand-strong); }
.ds-compare tbody th { font-weight: 600; color: var(--ds-ink-muted); width: 22%; }
.ds-compare tbody tr:last-child th,
.ds-compare tbody tr:last-child td { border-bottom: 0; }
.ds-compare td:last-child { background: color-mix(in srgb, var(--ds-brand-soft) 45%, transparent); font-weight: 500; }

.ds-fineprint {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--ds-ink-faint);
  max-width: var(--ds-measure);
}

/* Latest-from-the-blog band, generated by build.mjs. */
.ds-posts { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.ds-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-surface);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--ds-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ds-post:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow); color: inherit; }
.ds-post img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ds-surface-sunken); }
.ds-post__body { padding: 1.1rem 1.25rem 1.35rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ds-post__kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-brand); }
.ds-post__title { font-size: 1.03rem; font-weight: 700; line-height: 1.35; margin: 0; }
.ds-post__meta { font-size: 0.82rem; color: var(--ds-ink-faint); margin-top: auto; }

/* ----------------------------------------------------- 4. blog index page */
.blog-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem);
  background: linear-gradient(140deg, var(--ds-brand-soft) 0%, var(--ds-surface) 78%);
  border-bottom: 1px solid var(--ds-line);
}
.blog-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; margin-bottom: 0.6rem; }
.blog-hero__lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--ds-ink-muted); max-width: 62ch; margin: 0; }

.post-grid {
  display: grid;
  gap: var(--ds-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-block: clamp(2rem, 5vw, 3rem);
}

.post-card {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow); }
.post-card--lead { grid-column: 1 / -1; }
.post-card--lead .post-card__link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.post-card--lead .post-card__title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
@media (max-width: 767.98px) {
  .post-card--lead .post-card__link { grid-template-columns: 1fr; }
}

.post-card__link { display: block; text-decoration: none; color: inherit; height: 100%; }
.post-card__media { background: var(--ds-surface-sunken); }
.post-card__media img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.post-card--lead .post-card__media img { aspect-ratio: auto; min-height: 100%; }
.post-card__body { padding: 1.25rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.55rem; height: 100%; }
.post-card__kicker { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-brand); }
.post-card__title { font-size: 1.12rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--ds-ink); }
.post-card__excerpt { color: var(--ds-ink-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }
.post-card__meta { font-size: 0.82rem; color: var(--ds-ink-faint); }
.post-card__cta { font-weight: 600; color: var(--ds-brand); font-size: 0.92rem; margin-top: auto; }

.chip-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface);
  color: var(--ds-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.chip:hover { border-color: var(--ds-brand); color: var(--ds-brand); }
.chip--lg { padding: 0.7rem 1.3rem; font-size: 1rem; }

.lang-switch { margin-block: clamp(2rem, 5vw, 3rem); }

/* Footer language list — a wrapping flex row, so eight labels never push past
   the viewport edge (they overflowed the leading edge in RTL). */
.footer-langs { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.footer-langs a { white-space: nowrap; }

/* --------------------------------------------------------- 5. article page */
.article-hero {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(150deg, var(--ds-brand-soft) 0%, var(--ds-surface) 72%);
  border-bottom: 1px solid var(--ds-line);
}
.article-hero h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.85rem);
  font-weight: 700;
  line-height: 1.16;
  margin: 0.5rem 0 0.75rem;
  max-width: 24ch;
}
.article-hero__lead {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ds-ink-muted);
  max-width: 62ch;
  margin-bottom: 1.25rem;
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  color: var(--ds-ink-faint);
}
.article-breadcrumb li + li::before { content: '/'; margin-inline-end: 0.5rem; color: var(--ds-ink-faint); }
.article-breadcrumb a { color: var(--ds-ink-muted); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--ds-brand); text-decoration: underline; }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-size: 0.88rem;
  color: var(--ds-ink-muted);
}

.article-body { max-width: 52rem; padding-block: clamp(1.75rem, 4vw, 2.75rem); }

.article-toc {
  border: 1px solid var(--ds-line);
  border-inline-start: 4px solid var(--ds-brand);
  border-radius: var(--ds-radius);
  background: var(--ds-surface-alt);
  padding: 1.15rem 1.4rem;
  margin-bottom: 2rem;
}
.article-toc__title { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ds-ink-muted); margin-bottom: 0.6rem; }
.article-toc ol { margin: 0; padding-inline-start: 1.2rem; columns: 2; column-gap: 2rem; }
.article-toc li { margin-bottom: 0.35rem; break-inside: avoid; }
.article-toc a { color: var(--ds-ink); text-decoration: none; font-size: 0.93rem; }
.article-toc a:hover { color: var(--ds-brand); text-decoration: underline; }
@media (max-width: 575.98px) { .article-toc ol { columns: 1; } }

.article-prose { font-size: 1.06rem; line-height: 1.78; color: var(--ds-ink); max-width: var(--ds-measure); }
.article-prose > * + * { margin-top: 1.15rem; }
.article-prose h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  padding-top: 0.5rem;
}
.article-prose h3 { font-size: clamp(1.1rem, 2vw, 1.28rem); font-weight: 700; margin-top: 1.9rem; margin-bottom: 0.6rem; }
.article-prose p { margin-bottom: 0; }
.article-prose ul, .article-prose ol { padding-inline-start: 1.4rem; }
.article-prose li { margin-bottom: 0.5rem; }
.article-prose strong { font-weight: 700; color: var(--ds-ink); }
.article-prose a { color: var(--ds-brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-prose a:hover { color: var(--ds-brand-strong); }
.article-prose blockquote {
  border-inline-start: 4px solid var(--ds-brand);
  padding: 0.35rem 0 0.35rem 1.15rem;
  margin-inline-start: 0;
  color: var(--ds-ink-muted);
  font-style: italic;
}

.table-wrap {
  overflow-x: auto;
  margin-block: 1.75rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  -webkit-overflow-scrolling: touch;
}
.table-ref {
  width: 100%;
  min-width: 32rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.94rem;
  background: var(--ds-surface);
  margin: 0;
}
.table-ref caption { caption-side: top; padding: 0.85rem 1rem 0.25rem; text-align: start; font-size: 0.85rem; color: var(--ds-ink-faint); }
.table-ref th, .table-ref td { padding: 0.72rem 1rem; border-bottom: 1px solid var(--ds-line); text-align: start; vertical-align: top; }
.table-ref thead th { background: var(--ds-surface-sunken); font-weight: 700; font-size: 0.85rem; white-space: nowrap; position: sticky; top: 0; }
.table-ref tbody tr:last-child td, .table-ref tbody tr:last-child th { border-bottom: 0; }
.table-ref tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ds-surface-alt) 60%, transparent); }

.callout {
  border-radius: var(--ds-radius);
  padding: 1.05rem 1.25rem;
  margin-block: 1.75rem;
  border: 1px solid var(--ds-line);
  border-inline-start-width: 4px;
  background: var(--ds-surface-alt);
  font-size: 0.98rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout--note { border-inline-start-color: var(--ds-brand); background: var(--ds-brand-soft); }
.callout--warn { border-inline-start-color: var(--ds-accent); background: var(--ds-accent-soft); }
.callout--tip { border-inline-start-color: var(--ds-ok); background: var(--ds-ok-soft); }

.stat-row { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin-block: 1.75rem; }
.stat { border: 1px solid var(--ds-line); border-radius: var(--ds-radius); padding: 1rem; background: var(--ds-surface); text-align: center; }
.stat__value { display: block; font-family: var(--ds-display); font-size: 1.5rem; font-weight: 700; color: var(--ds-brand); line-height: 1.1; }
.stat__label { display: block; font-size: 0.82rem; color: var(--ds-ink-muted); margin-top: 0.25rem; }

.fig { margin-block: 2rem; }
.fig img { width: 100%; border: 1px solid var(--ds-line); border-radius: var(--ds-radius); background: var(--ds-surface); display: block; }
.fig figcaption { font-size: 0.86rem; color: var(--ds-ink-faint); margin-top: 0.6rem; text-align: center; }

.article-faq { margin-block: 3rem; }
.article-faq h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; margin-bottom: 1.25rem; }
.article-faq .accordion-item { border: 1px solid var(--ds-line); border-radius: var(--ds-radius) !important; margin-bottom: 0.7rem; overflow: hidden; background: var(--ds-surface); }
.article-faq .accordion-button { font-weight: 600; background: var(--ds-surface); color: var(--ds-ink); font-size: 1rem; }
.article-faq .accordion-button:not(.collapsed) { background: var(--ds-brand-soft); color: var(--ds-brand-strong); box-shadow: none; }
.article-faq .accordion-button:focus { box-shadow: 0 0 0 3px var(--ds-brand-ring); }
.article-faq .accordion-body { color: var(--ds-ink-muted); line-height: 1.7; }

.article-sources { margin-block: 3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface-alt); }
.article-sources h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.9rem; }
.article-sources ul { margin: 0; padding-inline-start: 1.2rem; }
.article-sources li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.article-sources a { color: var(--ds-brand); }

.article-cta {
  margin-block: 3rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(135deg, var(--ds-brand-strong) 0%, var(--ds-brand) 100%);
  color: #fff;
  text-align: center;
  box-shadow: var(--ds-shadow-lg);
}
.article-cta h2 { font-size: clamp(1.3rem, 2.8vw, 1.8rem); font-weight: 700; margin-bottom: 0.6rem; color: #fff; }
.article-cta p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; margin: 0 auto 1.5rem; }

.article-author { margin-block: 2.5rem; padding: 1.4rem 1.6rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.article-author__avatar {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ds-brand-soft);
  color: var(--ds-brand-strong);
  font-family: var(--ds-display);
  font-weight: 700;
  font-size: 1.35rem;
}

.article-related { margin-block: 3rem; }
.article-related h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; }
.related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius);
  background: var(--ds-surface);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-card:hover { border-color: var(--ds-brand); transform: translateY(-2px); }
.related-card__kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ds-brand); }
.related-card__title { font-weight: 600; color: var(--ds-ink); line-height: 1.4; }

.article-disclaimer {
  margin-block: 2.5rem 0;
  padding: 0.9rem 1.15rem;
  border-radius: var(--ds-radius);
  background: var(--ds-surface-sunken);
  color: var(--ds-ink-muted);
  font-size: 0.88rem;
}

/* ------------------------------------------------------- 6. rtl behaviour */
html[dir='rtl'] .article-toc { border-inline-start: 4px solid var(--ds-brand); }
html[dir='rtl'] .ds-compare th,
html[dir='rtl'] .ds-compare td,
html[dir='rtl'] .table-ref th,
html[dir='rtl'] .table-ref td { text-align: right; }
html[dir='rtl'] .fa-arrow-right { transform: scaleX(-1); }

/* ---------------------------------------------- 7. print (saved lab notes) */
@media print {
  .navbar, .article-cta, .ds-post, .chip-row, footer, .skip-link { display: none !important; }
  .article-hero { background: none; border: 0; }
  .article-prose { font-size: 11pt; }
  .article-prose a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .table-wrap { overflow: visible; }
}

/* ------------------------------------------- 8. reading progress indicator */
.reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-brand) 0%, var(--ds-accent) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1080;
  pointer-events: none;
}
html[dir='rtl'] .reading-progress { transform-origin: right center; }

.article-toc a[aria-current='true'] {
  color: var(--ds-brand);
  font-weight: 600;
}

/* ------------------------------------- 9. generated homepage (new locales) */
.home-hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: linear-gradient(150deg, var(--ds-brand-soft) 0%, var(--ds-surface) 70%);
  border-bottom: 1px solid var(--ds-line);
}
.home-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
}
@media (max-width: 900px) { .home-hero__grid { grid-template-columns: 1fr; } .home-hero__art { order: -1; } }

.home-hero__title {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.12;
  margin: 0.4rem 0 0.9rem;
  max-width: 18ch;
}
.home-hero__lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--ds-ink-muted); max-width: 54ch; }
.home-hero__points { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; display: grid; gap: 0.6rem; }
.home-hero__points li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ds-ink); }
.home-hero__points i { color: var(--ds-ok); margin-top: 0.28rem; flex: 0 0 auto; }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.home-hero__art img { width: 100%; max-width: 30rem; margin-inline: auto; display: block; }

.home-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  margin-top: clamp(2rem, 5vw, 3rem);
}
.home-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 1.1rem 1.25rem;
  text-align: center;
  box-shadow: var(--ds-shadow-sm);
}
.home-stat__value { display: block; font-family: var(--ds-display); font-size: 1.65rem; font-weight: 700; color: var(--ds-brand); }
.home-stat__label { display: block; font-size: 0.86rem; color: var(--ds-ink-muted); margin-top: 0.2rem; }

.home-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; }
.home-step { position: relative; padding: 1.5rem 1.4rem 1.4rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
.home-step__n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--ds-brand-soft); color: var(--ds-brand-strong); font-family: var(--ds-display); font-weight: 700; margin-bottom: 0.85rem; }
.home-step__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.home-step__text { color: var(--ds-ink-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

.home-plans { align-items: stretch; }
.home-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-sm);
}
.home-plan--featured { border-color: var(--ds-brand); box-shadow: var(--ds-shadow-lg); }
.home-plan__badge {
  position: absolute;
  inset-block-start: -0.75rem;
  inset-inline-start: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--ds-brand);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.home-plan__name { font-size: 1.15rem; font-weight: 700; margin: 0; }
.home-plan__price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.home-plan__price strong { font-family: var(--ds-display); font-size: 2.2rem; font-weight: 700; color: var(--ds-brand); line-height: 1; }
.home-plan__price span { color: var(--ds-ink-faint); font-size: 0.9rem; }
.home-plan__features { list-style: none; padding: 0; margin: 0.35rem 0 1.1rem; display: grid; gap: 0.5rem; }
.home-plan__features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; color: var(--ds-ink-muted); }
.home-plan__features i { color: var(--ds-ok); margin-top: 0.3rem; flex: 0 0 auto; }
.home-plan a { margin-top: auto; }

.home-sources { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.65rem; }
.home-sources a { color: var(--ds-brand); font-weight: 500; }

.home-faq .accordion-item { border: 1px solid var(--ds-line); border-radius: var(--ds-radius) !important; margin-bottom: 0.7rem; overflow: hidden; background: var(--ds-surface); }
.home-faq .accordion-button { font-weight: 600; background: var(--ds-surface); color: var(--ds-ink); }
.home-faq .accordion-button:not(.collapsed) { background: var(--ds-brand-soft); color: var(--ds-brand-strong); box-shadow: none; }
.home-faq .accordion-button:focus { box-shadow: 0 0 0 3px var(--ds-brand-ring); }
.home-faq .accordion-body { color: var(--ds-ink-muted); line-height: 1.7; }

/* Scripts without a self-hosted face fall back to the reader's system font,
   which is both faster and more legible than shipping megabytes of CJK. */
html[lang='zh-Hans'], html[lang='zh'] { --ds-sans: system-ui, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; --ds-display: var(--ds-sans); }
html[lang='ja'] { --ds-sans: system-ui, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif; --ds-display: var(--ds-sans); }
html[lang='ko'] { --ds-sans: system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif; --ds-display: var(--ds-sans); }
html[lang='hi'] { --ds-sans: system-ui, 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif; --ds-display: var(--ds-sans); }
html[lang='ru'], html[lang='vi'] { --ds-sans: 'Plus Jakarta Sans', system-ui, sans-serif; }

/* CJK line breaking.
   `ch` is the width of a "0" glyph, so a 22ch title box fits only about eleven
   Han or Kana characters and the heading orphans its last character on a line
   of its own. These scripts need a wider measure, and Korean reads far better
   when lines are not broken inside a word. */
html[lang='ja'] .ds-title,
html[lang='ko'] .ds-title,
html[lang^='zh'] .ds-title { max-width: 36ch; line-break: strict; }

html[lang='ja'] .home-hero__title,
html[lang='ko'] .home-hero__title,
html[lang^='zh'] .home-hero__title { max-width: 30ch; line-break: strict; }

html[lang='ja'] .ds-lead,
html[lang='ko'] .ds-lead,
html[lang^='zh'] .ds-lead,
html[lang='ja'] .home-hero__lead,
html[lang='ko'] .home-hero__lead,
html[lang^='zh'] .home-hero__lead { max-width: 46em; }

html[lang='ko'] .ds-title,
html[lang='ko'] .home-hero__title,
html[lang='ko'] .ds-card__title,
html[lang='ko'] .home-step__title { word-break: keep-all; }

html[lang='ja'] .article-hero h1,
html[lang='ko'] .article-hero h1,
html[lang^='zh'] .article-hero h1,
html[lang='ja'] .blog-hero h1,
html[lang='ko'] .blog-hero h1,
html[lang^='zh'] .blog-hero h1 { max-width: 38ch; line-break: strict; }

html[lang='ja'] .article-prose,
html[lang='ko'] .article-prose,
html[lang^='zh'] .article-prose,
html[lang='hi'] .article-prose { max-width: 44em; }

/* Devanagari sits taller than Latin; give it a little more leading. */
html[lang='hi'] { line-height: 1.75; }
html[lang='hi'] .ds-title, html[lang='hi'] .home-hero__title { line-height: 1.3; max-width: 26ch; }

/* ------------------------------------------- 10. biomarker / condition hub */
.hub-hero {
  padding-block: clamp(2.25rem, 5vw, 3.75rem) clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(150deg, var(--ds-brand-soft) 0%, var(--ds-surface) 72%);
  border-bottom: 1px solid var(--ds-line);
}
.hub-hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); font-weight: 700; line-height: 1.14; margin: 0.35rem 0 0.75rem; max-width: 24ch; }
.hub-hero__lead { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--ds-ink-muted); max-width: 64ch; margin-bottom: 0.75rem; }

.hub-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

.hub-group { margin-bottom: clamp(2rem, 4vw, 2.75rem); scroll-margin-top: 6rem; }
.hub-group__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ds-ink);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--ds-brand-soft);
}

.hub-markers { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin: 0; }
.hub-marker {
  border: 1px solid var(--ds-line);
  border-inline-start: 3px solid var(--ds-brand);
  border-radius: var(--ds-radius);
  padding: 0.9rem 1.1rem;
  background: var(--ds-surface);
}
.hub-marker dt { font-weight: 700; color: var(--ds-ink); margin-bottom: 0.25rem; font-size: 0.98rem; }
.hub-marker dd { margin: 0; color: var(--ds-ink-muted); font-size: 0.91rem; line-height: 1.55; }
.hub-marker__abbr { font-weight: 500; color: var(--ds-brand); font-size: 0.86rem; }
.hub-marker__more { display: inline-block; margin-top: 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--ds-brand); }

.hub-conditions { display: grid; gap: var(--ds-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.hub-condition {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-lg);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--ds-shadow-sm);
  scroll-margin-top: 6rem;
}
.hub-condition__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.45rem; }
.hub-condition__text { color: var(--ds-ink-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.75rem; }
.hub-condition__markers { margin: 0; }

.hub-trial__note { color: rgba(255, 255, 255, 0.78); font-size: 0.84rem; margin: 1rem 0 0; }