/* =========================================================
   Instytut Ekspertyz Toksykologicznych — nowy, більш сучасний стиль
   ========================================================= */

/* Inter — self-hosted variable font (400–700), subset to the ~190 glyphs this
   site actually uses (incl. Polish diacritics). One 22KB file replaces the two
   Google subsets (133KB) and, being preloaded, lands before first paint so the
   swap from the fallback font causes no layout shift. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-subset.woff2') format('woff2');
}

/* Fallback metrics tuned to Inter so text does not reflow if the swap is late. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ─────────────────────────────────────────────
   KOLORY WYŁĄCZNIE PRZEZ TOKENY.
   Nowy kolor → dodaj token do :root.
   Serwis ma wyłącznie motyw jasny — bez
   wariantu ciemnego.
   Wyjątek: @media print (własna paleta druku).
   Weryfikuje: npm run check:theme
   ───────────────────────────────────────────── */
:root {
  /* wymuszony motyw jasny: bez tego przy ciemnym systemie przeglądarka
     narysowałaby ciemne paski przewijania, kontrolki formularzy oraz
     domyślny ::backdrop w <dialog> */
  color-scheme: light;

  /* --- brand ink: every border, shadow and tint derives from these two,
         so the UI reads as one palette instead of four near-identical blues --- */
  --ink: 29, 50, 116;          /* #1d3274 — primary, as RGB channels */
  --accent-rgb: 64, 89, 196;   /* #4059c4 — AA-safe on white at small sizes */

  --c-primary: #1d3274;
  --c-primary-hover: #2f4ea8;
  --c-accent: rgb(var(--accent-rgb));
  --c-text: #1f2937;
  --c-muted: #555d78;          /* 5.9:1 on white */

  /* surfaces */
  --c-page: #f3f7ff;
  --c-surface: #ffffff;
  --c-surface-soft: #f7f9ff;
  --c-surface-tint: #eff4ff;
  --c-white: #ffffff;

  /* lines */
  --c-border: rgba(var(--ink), 0.12);
  --c-border-soft: rgba(var(--ink), 0.08);
  --c-border-accent: rgba(var(--accent-rgb), 0.18);

  /* scrim behind the modal dialog */
  --c-backdrop: rgba(var(--ink), 0.55);

  /* elevation */
  --shadow-sm: 0 6px 18px rgba(var(--ink), 0.06);
  --shadow-md: 0 18px 40px rgba(var(--ink), 0.08);
  --shadow-lg: 0 24px 55px rgba(var(--ink), 0.14);
  --shadow-xl: 0 30px 80px rgba(var(--ink), 0.18);

  /* spacing scale — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  --font-body: Inter, 'Inter Fallback', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --w-page: 1180px;
  --gap: 28px;
  --bar-h: 80px;
  --radius: 26px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 24px);
  font-family: var(--font-body);
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  min-height: 100vh;
  /* opaque base under the gradient: guarantees a defined page colour even if
     the gradient fails to paint, and terminates the background stack for
     anything drawn on a translucent tint */
  background-color: var(--c-page);
  background-image: radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.12), transparent 28%),
                    linear-gradient(180deg, var(--c-surface-soft) 0%, var(--c-surface-tint) 100%);
  color: var(--c-text);
  font-size: 16px;
  line-height: 1.75;
}

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

button, a { font: inherit; }

h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; padding: 0; }

address { font-style: normal; }

ul { list-style: none; }

a { color: inherit; text-decoration: none; }

a:hover, a:focus-visible { color: var(--c-primary); }

:focus-visible { outline: 3px solid rgba(var(--accent-rgb), 0.3); outline-offset: 2px; }

.wrap { width: min(100%, var(--w-page)); margin: 0 auto; padding: 0 var(--gap); }

/* legacy container used by the sub-pages — same constraint as .wrap, otherwise
   their content runs full-bleed to the viewport edge with no padding */
.layout { width: min(100%, var(--w-page)); margin: 0 auto; padding: 0 var(--gap); }

/* keeps hyphenated compounds ("naukowo-badawczymi") from splitting across lines */
.nowrap { white-space: nowrap; }

/* Poniżej ~420px najdłuższe złożenia („anaboliczno-androgenowych”) są szersze
   niż karta i wystawały poza jej krawędź. Na tych szerokościach pozwalamy im
   złamać się na istniejącym dywizie — to poprawna polska typografia i lepsza
   niż tekst uciekający poza kontener. */
@media (max-width: 420px) {
  .nowrap { white-space: normal; }
}

button { cursor: pointer; }

section[id] { scroll-margin-top: calc(var(--bar-h) + 24px); }

/* reveal animation */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.3,1); }
.reveal-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* =========================================================
   HEADER
   ========================================================= */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: var(--c-white);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border-soft);
  transition: box-shadow .25s ease;
}

/* shrinks once the page is scrolled — the height itself is animated on the
   inner row so the fixed bar never jumps the layout underneath it */
.topbar.is-stuck { box-shadow: 0 10px 30px rgba(var(--ink), 0.08); }
.topbar.is-stuck .topbar__inner { min-height: 60px; }
.topbar.is-stuck .topbar__logo img { height: 52px; }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--bar-h);
  transition: min-height .25s ease;
}

.topbar__logo img { transition: height .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .topbar, .topbar__inner, .topbar__logo img { transition: none; }
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 320px;
  min-width: 220px;
}

.topbar__logo img {
  width: auto;
  height: 72px;
  display: block;
  max-height: 84px;
}

.topbar__nav { display: none; }

.topbar__nav ul {
  display: flex;
  flex-wrap: nowrap;          /* zawijanie rozpychało pasek — patrz próg 1024px */
  gap: 16px;
}

@media (min-width: 1180px) {
  .topbar__nav ul { gap: 24px; }
}

.topbar__nav a {
  color: var(--c-muted);
  font-size: 0.95rem;
  padding: 10px 8px;
  border-radius: 18px;
  transition: color .2s ease, background-color .2s ease;
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible {
  color: var(--c-primary);
  background: rgba(var(--accent-rgb), 0.08);
}

/* section currently in view */
.topbar__nav a.is-current {
  color: var(--c-primary);
  font-weight: 600;
  background: rgba(var(--accent-rgb), 0.1);
}
.nav a.is-current { color: var(--c-accent); font-weight: 600; }

.burger {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  position: relative;
}

.burger span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--c-primary);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: transform .25s ease, opacity .25s ease;
}

.burger span:nth-child(1) { top: 10px; }
.burger span:nth-child(2) { top: 18px; }
.burger span:nth-child(3) { top: 26px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, -8px) rotate(-45deg); }

.page-head {
  padding-top: calc(var(--bar-h) + 24px);
  padding-bottom: 40px;
}

.page-head__inner {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-bottom: 4px;
}

.page-head__inner > * { min-width: 0; }

/* .page-head p also matches this element, so keep the specificity high enough
   that the eyebrow stays brand blue instead of falling back to muted grey. */
.page-head .eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--c-primary);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* Words are never split: the longest ("toksykologicznych") is 9.21em, and the
   sizes below keep it on one line in both the 1-col and the 2-col layout.
   text-wrap: balance evens out the lines so no line is left nearly empty. */
.page-head h1 {
  font-size: clamp(1.45rem, 7vw, 2.4rem);
  line-height: 1.12;
  max-width: 16em;
  margin-bottom: 18px;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.page-head p {
  max-width: 70ch;
  color: var(--c-muted);
  font-size: 1rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 22px;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
  min-height: 48px;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  color: inherit;
}

.button--primary {
  background: var(--c-primary);
  color: var(--c-white);
  box-shadow: 0 16px 30px rgba(var(--ink), 0.18);
}

.button--primary:hover,
.button--primary:focus-visible {
  background: var(--c-primary-hover);
  box-shadow: 0 22px 42px rgba(var(--ink), 0.26);
  color: var(--c-white);
}

.button--secondary {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--c-primary);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background: rgba(var(--accent-rgb), 0.22);
  color: var(--c-primary);
}

.button--ghost {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}

.hero-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 28px;
  padding: 34px 30px;
  box-shadow: 0 26px 80px rgba(var(--ink), 0.08);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-card__title {
  margin-bottom: 10px;
  color: var(--c-primary);
  font-size: 1.15rem;
  font-weight: 700;
}

.hero-card a {
  display: inline-flex;
  padding: 14px 22px;
  margin-top: 8px;
}

.hero-card__logo {
  display: block;
  margin-top: 8px;
  width: 120px;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */
.nav {
  position: fixed;
  inset: var(--bar-h) 0 auto 0;
  z-index: 55;
  display: none;
  width: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border-soft);
}

.nav.is-open { display: block; }

.nav ul {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 10px 0;
}

/* Na tabletach lista rozciągnięta na całą szerokość wyglądała pusto —
   od 600px układamy ją w dwie kolumny wewnątrz zwykłego kontenera. */
@media (min-width: 600px) {
  .nav ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px var(--s-2);
    width: min(100%, var(--w-page));
    margin: 0 auto;
    padding: var(--s-3) var(--gap);
  }
  .nav a { border-radius: 12px; padding: 14px var(--s-4); }
}

.nav a {
  display: block;
  padding: 14px var(--gap);
  color: var(--c-primary);
  background: var(--c-surface);
}

.nav a:hover,
.nav a:focus-visible { background: var(--c-surface-soft); }

/* =========================================================
   CONTENT
   ========================================================= */
.main { padding-top: 0; }

/* pages without a .page-head need their own offset under the fixed topbar */
.main--standalone { padding-top: calc(var(--bar-h) + var(--s-6)); }

.content { padding-bottom: 56px; }

.content > * + * { margin-top: 40px; }

.section {
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: 32px;
  padding: 34px;
  box-shadow: 0 20px 60px rgba(var(--ink), 0.05);
}

@media (max-width: 479px) {
  .section { padding: 22px 20px; border-radius: 24px; }
}

.section--hero {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.section h2 {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  color: var(--c-primary);
  margin-bottom: var(--s-5);
  line-height: 1.15;
  text-wrap: balance;
  hyphens: none;
}

.section-intro {
  color: var(--c-muted);
  font-size: 1rem;
  margin-bottom: 28px;
  max-width: 84ch;
}

.section p {
  color: var(--c-muted);
  font-size: 1rem;
}

.section__grid {
  display: grid;
  gap: 28px;
}

/* Globalny reset zeruje marginesy akapitów i list, więc w treści sekcji
   kolejne bloki stykały się bez odstępu. Margines dokładamy tylko tam, gdzie
   dwa bloki faktycznie sąsiadują — dzięki temu nie dubluje się z odstępem
   pod nagłówkiem ani nie zostaje pusty margines na końcu sekcji.
   Strony prawne mają własny rytm (.legal p), więc są wyłączone. */
.content .section:not(.legal) :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--s-4);
}

.summary-card {
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 28px;
  padding: 24px;
}

.summary-card__label {
  margin-bottom: 18px;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--c-primary);
  font-weight: 700;
}

.summary-card ul {
  color: var(--c-text);
  margin: 0 0 18px;
  padding: 0;
}

.summary-card ul li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
}

.summary-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.92em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
  transform: translateY(-50%);
}

.summary-card p { color: var(--c-muted); }

.service-grid,
.publications {
  display: grid;
  gap: 24px;
}

/* auto-fit keeps the grid full at 2 / 3 / 4 columns without extra breakpoints */
.service-grid { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--s-4); }
.publications { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

.service-card,
.publication-card {
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 28px;
  padding: 28px 30px;
  box-shadow: 0 18px 40px rgba(var(--ink), 0.07);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* ---- service cards ---- */
.service-card {
  padding: var(--s-5);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
}
.service-card__tag {
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--c-border-accent);
  color: var(--c-accent);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.6;
}
.service-card h3 {
  margin-bottom: var(--s-2);
  font-size: 1.02rem;
  color: var(--c-primary);
  line-height: 1.35;
  text-wrap: balance;
}
.service-card p { font-size: .94rem; line-height: 1.6; margin: 0; }

/* ---- accreditation placeholders ---- */
.badge-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.badge-card {
  position: relative;
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
}
.badge-card.is-placeholder {
  background: repeating-linear-gradient(
    -45deg,
    var(--c-surface-soft) 0 12px,
    rgba(var(--accent-rgb), 0.04) 12px 24px
  );
  border-style: dashed;
  border-color: var(--c-border-accent);
}
.badge-card h3 { margin: 0 0 var(--s-2); color: var(--c-primary); font-size: 1rem; }
.badge-card p { margin: 0 0 var(--s-4); font-size: .92rem; line-height: 1.6; }
.badge-card__status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--s-2); }
.faq__item {
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  background: var(--c-surface-soft);
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease;
}
.faq__item[open] { background: var(--c-white); border-color: var(--c-border-accent); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  color: var(--c-primary);
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '';
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item summary:hover { color: var(--c-accent); }
.faq__answer { padding: 0 var(--s-5) var(--s-5); }
.faq__answer p { margin: 0; font-size: .96rem; line-height: 1.7; }

/* ---- contact ---- */
.contact { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.contact__card {
  padding: var(--s-5);
  border-radius: 20px;
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
}
.contact__title { margin: 0 0 var(--s-4); color: var(--c-primary); font-size: 1rem; }
.contact__list { margin: 0; }
.contact__list dt {
  color: var(--c-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact__list dd { margin: 2px 0 var(--s-3); color: var(--c-text); line-height: 1.5; }
.contact__list dd:last-child { margin-bottom: 0; }
.contact__list a { color: var(--c-primary); font-weight: 600; }
.contact__list a:hover { color: var(--c-accent); }
.contact__address { color: var(--c-text); line-height: 1.8; }
.contact__map { margin-top: var(--s-4); }
.contact__iban { font-variant-numeric: tabular-nums; }
.contact__iban span { color: var(--c-muted); font-size: .88rem; }

/* ---- stats strip under the hero ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.stats__item {
  padding: var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.stats__value {
  display: block;
  color: var(--c-primary);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}
.stats__label {
  display: block;
  margin-top: var(--s-1);
  color: var(--c-muted);
  font-size: .84rem;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
  .stats__item { padding: var(--s-5) var(--s-4); }
}

/* ---- legal pages (polityka prywatności) ---- */
.legal { max-width: 78ch; }
.legal__updated { color: var(--c-muted); font-size: .88rem; margin-bottom: var(--s-6); }
.legal h2 {
  margin: var(--s-7) 0 var(--s-4);
  color: var(--c-primary);
  font-size: 1.15rem;
  line-height: 1.35;
  scroll-margin-top: calc(var(--bar-h) + 24px);
}
.legal h2:first-of-type { margin-top: var(--s-5); }
.legal p { margin-bottom: var(--s-4); line-height: 1.75; }
.legal strong { color: var(--c-text); }

.legal__list { margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); }
.legal__list li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--c-muted);
  line-height: 1.7;
}
.legal__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-accent);
}

.legal__box {
  margin: 0 0 var(--s-4);
  padding: var(--s-5);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
}
.legal__box p { margin-bottom: var(--s-3); }
.legal__box p:last-child { margin-bottom: 0; }
.legal__box address { color: var(--c-muted); line-height: 1.7; margin-bottom: var(--s-3); }

/* facts the Institute still has to confirm — visually flagged, not hidden */
.legal__todo {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px dashed var(--c-border-accent);
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 12px;
}
.legal__todo p { margin: 0; font-size: .92rem; color: var(--c-muted); }
.legal__todo strong { color: var(--c-primary); }

.legal__table-wrap { overflow-x: auto; margin-bottom: var(--s-4); }
.legal__table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.legal__table th,
.legal__table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border-soft);
  line-height: 1.6;
}
.legal__table th {
  background: var(--c-surface-soft);
  color: var(--c-primary);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.legal__table td { color: var(--c-muted); }
.legal a { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.footer__legal-link { margin-left: var(--s-3); color: var(--c-primary); font-weight: 600; }
.footer__legal-link:hover { color: var(--c-accent); }

/* ---- footer link column + in-section CTAs ---- */
.footer__links { display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.footer__links a { color: var(--c-muted); font-size: .95rem; }
.footer__links a:hover { color: var(--c-primary); }

.section-cta { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }

.service-card__more {
  margin-top: var(--s-3);
  align-self: flex-start;
  color: var(--c-accent);
  font-size: .9rem;
  font-weight: 600;
}
.service-card__more::after { content: ' \2192'; }
.service-card__more:hover { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---- content lists, related links, CTA sections ---- */
/* the legacy sub-pages use plain <ul> inside sections; the global
   `ul { list-style: none }` reset leaves them looking like run-on lines */
.content .section > ul:not([class]),
.content .section > ul.spaced,
.content .section > *:not(.related) > ul:not([class]) {
  display: grid;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
  padding: 0;
}
.content .section > ul:not([class]) > li,
.content .section > ul.spaced > li,
.content .section > *:not(.related) > ul:not([class]) > li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--c-muted);
  line-height: 1.7;
}
.content .section > ul:not([class]) > li::before,
.content .section > ul.spaced > li::before,
.content .section > *:not(.related) > ul:not([class]) > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

.check-list { display: grid; gap: var(--s-3); margin: 0 0 var(--s-4); padding: 0; }
.check-list li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--c-muted);
  line-height: 1.7;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}
.check-list strong { color: var(--c-text); }

.related { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-border-soft); }
.section--links .related { margin-top: 0; padding-top: 0; border-top: none; }
.related__title {
  margin: 0 0 var(--s-3);
  color: var(--c-primary);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.related ul { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; }
.related a {
  display: inline-flex;
  padding: 8px var(--s-4);
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 999px;
  color: var(--c-primary);
  font-size: .92rem;
  font-weight: 500;
  transition: border-color .2s ease, transform .2s ease;
}
.related a:hover { border-color: var(--c-border-accent); transform: translateY(-1px); }

/* ---- breadcrumbs ---- */
.crumbs { padding-top: calc(var(--bar-h) + var(--s-5)); }
.crumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
  font-size: .88rem;
}
.crumbs__inner li { display: inline-flex; align-items: center; }
/* the separator is decoration: drawn in CSS so it is never read aloud */
.crumbs__inner li + li::before {
  content: '›';
  margin-right: var(--s-2);
  color: var(--c-border);
}
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--c-primary); font-weight: 600; }

/* the breadcrumb bar already clears the fixed header on these pages */
.crumbs + .page-head { padding-top: var(--s-5); }

/* ---- 404 ---- */
.error-page { text-align: center; }
.error-page__code {
  margin: 0 0 var(--s-2);
  font-size: clamp(4rem, 16vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(var(--accent-rgb), 0.18);
}
.error-page h1 {
  margin: 0 0 var(--s-4);
  color: var(--c-primary);
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.2;
  text-wrap: balance;
}
.error-page__lead { max-width: 56ch; margin: 0 auto var(--s-6); color: var(--c-muted); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-bottom: var(--s-6); }
.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
}
.error-page__links a {
  display: inline-flex;
  padding: 8px var(--s-4);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: 999px;
  color: var(--c-primary);
  font-size: .92rem;
  font-weight: 500;
  transition: background-color .2s ease, border-color .2s ease;
}
.error-page__links a:hover { background: var(--c-white); border-color: var(--c-border-accent); }
.error-page .section-note { text-align: center; }

/* ---- skip link ---- */
.skip-link {
  /* fixed, not absolute: an absolutely positioned link sits at the top of the
     document, so it stays off-screen when the page is already scrolled */
  position: fixed;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--c-primary);
  color: var(--c-white);
  border-radius: 0 0 14px 14px;
  font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus-visible { top: 0; color: var(--c-white); }

/* Carousel / Coverflow */
.carousel {
  position: relative;
  padding: 0;
  max-width: 100%;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 376px;
}

/* Each slide carries its own perspective() so the cards stay clickable —
   a shared preserve-3d context makes Chromium hit-test only the front card. */
.carousel__track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
}

.carousel__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(140px, 46vw, 200px);
  height: 336px;
  margin: 0;
  cursor: pointer;
  will-change: transform, opacity;
  transition: transform .65s cubic-bezier(.22, .9, .3, 1), opacity .5s ease;
}

.carousel__slide.is-active { cursor: default; }

/* Spacing is set per-element rather than one flat gap, so the name+role read
   as a pair and the photo / body / action stay visually separated. */
.person-card {
  height: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-border-soft);
  border-radius: 16px;
  padding: var(--s-4);
  box-shadow: 0 20px 45px rgba(var(--ink), 0.14);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

/* <picture> is only a format switch — keep the <img> as the flex/grid item */
.person-card picture,
.overlay__photo picture { display: contents; }

.person-card__photo {
  width: 100%;
  height: 100px;
  object-fit: cover;
  /* portraits are taller than the box: bias the crop upwards so the face
     stays framed instead of being cut at the chin */
  object-position: 50% 22%;
  border-radius: 10px;
  background: var(--c-surface-soft);
  flex: 0 0 auto;
  margin-bottom: var(--s-4);
}
.person-card__name,
.person-card__role { margin: 0; line-height: 1.3; overflow: hidden; }
.person-card__name {
  color: var(--c-primary);
  font-size: .92rem;
  margin-bottom: var(--s-1);
  /* always reserve two lines so long titles ("dr hab. n. med. …") do not
     push the rest of the card out of its fixed height */
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.person-card__role {
  color: var(--c-accent);
  font-weight: 600;
  font-size: .78rem;
  margin-bottom: var(--s-3);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.person-card__excerpt {
  margin: 0 0 var(--s-4);
  color: var(--c-muted);
  line-height: 1.5;
  font-size: .78rem;
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.person-card .button {
  margin-top: auto;
  align-self: flex-start;
  padding: 9px 18px;
  font-size: .8rem;
  min-height: 0;
  border-radius: 999px;
}

.carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 14px 30px rgba(var(--ink), 0.14);
  font-size: 18px;
  line-height: 1;
  color: var(--c-primary);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.carousel__nav:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 18px 36px rgba(var(--ink), 0.2); }
.carousel__nav:active { transform: translateY(-50%) scale(.96); }
.carousel__nav--prev { left: 0; }
.carousel__nav--next { right: 0; }

.carousel__dots { position: static; margin-top: 18px; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(var(--ink), 0.16); cursor: pointer; transition: width .25s ease, border-radius .25s ease, background .25s ease; }
.carousel__dot.is-active { background: var(--c-primary); width: 24px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
  .carousel__nav { transition: none; }
}

@media (min-width: 480px) {
  .carousel { padding: 0 34px; }
  .carousel__viewport { height: 464px; }
  .carousel__slide { width: clamp(190px, 40vw, 220px); height: 424px; }
  .person-card { padding: 16px; gap: 10px; }
  .person-card__photo { height: 130px; }
  .person-card__name { font-size: .98rem; }
  .person-card__role { font-size: .84rem; }
  .person-card__excerpt { font-size: .84rem; -webkit-line-clamp: 3; line-clamp: 3; }
  .carousel__nav { width: 40px; height: 40px; font-size: 20px; }
}

@media (min-width: 640px) {
  .carousel { padding: 0 60px; }
  .carousel__viewport { height: 526px; }
  .carousel__slide { width: 250px; height: 486px; }
  .person-card { padding: 20px; gap: 12px; }
  .person-card__photo { height: 170px; }
  .person-card__name { font-size: 1.02rem; }
  .person-card__role { font-size: .88rem; }
  .person-card__excerpt { font-size: .88rem; }
  .person-card .button { padding: 11px 22px; font-size: .9rem; border-radius: 20px; }
  .carousel__nav { width: 48px; height: 48px; font-size: 24px; }
}

/* =========================================================
   Employee details dialog
   ========================================================= */
/* native <dialog>: the top layer puts it above everything, so no z-index
   juggling — and ::backdrop replaces the old backdrop element */
.overlay {
  width: min(920px, 100%);
  max-width: min(920px, 100%);
  max-height: calc(100dvh - var(--s-7));
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.overlay::backdrop {
  background: var(--c-backdrop);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .26s ease;
}

.overlay__panel {
  position: relative;
  width: 100%;
  max-height: calc(100dvh - var(--s-7));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition: opacity .26s ease, transform .3s cubic-bezier(.22, .9, .3, 1);
}

/* .is-open is added one frame after showModal(), so both states animate */
.overlay.is-open::backdrop { opacity: 1; }
.overlay.is-open .overlay__panel { opacity: 1; transform: translateY(0) scale(1); }

.overlay__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--c-surface-soft);
  font-size: 26px;
  line-height: 1;
  color: var(--c-muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.overlay__close:hover { background: rgba(var(--accent-rgb), 0.12); color: var(--c-primary); }

.overlay__grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s-6);
  align-items: start;
}

.overlay__aside { position: sticky; top: 0; }
.overlay__photo img {
  width: 100%;
  height: auto;
  border-radius: var(--s-4);
  background: var(--c-surface-soft);
}

.overlay__facts {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--s-3);
  font-size: .88rem;
}
.overlay__facts:empty { display: none; }
.overlay__facts dt {
  color: var(--c-muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.overlay__facts dd {
  margin: 2px 0 var(--s-3);
  color: var(--c-text);
  line-height: 1.4;
}
.overlay__facts dd:last-child { margin-bottom: 0; }

.overlay__eyebrow {
  margin: 0 0 var(--s-2);
  color: var(--c-accent);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.overlay__content h3 {
  margin: 0 0 var(--s-1);
  color: var(--c-primary);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  text-wrap: balance;
}
.overlay__role {
  margin: 0 0 var(--s-4);
  color: var(--c-accent);
  font-weight: 600;
}
.overlay__bio {
  margin: 0;
  color: var(--c-text);
  line-height: 1.7;
}

.overlay__block { margin-top: var(--s-6); }
.overlay__block[hidden] { display: none; }
.overlay__block-title {
  margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-primary);
  font-size: 1rem;
}

.overlay__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
}
.overlay__tags li {
  padding: 6px var(--s-3);
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--c-border-accent);
  border-radius: 999px;
  color: var(--c-primary);
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.4;
}

.overlay__articles { display: grid; gap: var(--s-2); margin: 0; padding: 0; }
.overlay__article {
  display: block;
  padding: var(--s-3) var(--s-4);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--s-3);
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.overlay__article:hover,
.overlay__article:focus-visible {
  background: var(--c-white);
  border-color: var(--c-border-accent);
  transform: translateX(3px);
}
.overlay__article-title {
  display: block;
  color: var(--c-primary);
  font-weight: 600;
  line-height: 1.45;
  font-size: .95rem;
}
.overlay__article-meta {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
  font-size: .82rem;
}

@media (max-width: 720px) {
  .overlay { width: calc(100% - var(--s-5)); max-height: calc(100dvh - var(--s-5)); }
  .overlay__panel { padding: var(--s-5) var(--s-4); border-radius: var(--s-5); max-height: calc(100dvh - var(--s-5)); }
  .overlay__grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .overlay__aside { position: static; }
  .overlay__photo img { max-width: 160px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .overlay::backdrop,
  .overlay__panel { transition: none; }
  .overlay__panel { transform: none; }
}

.service-card:hover,
.publication-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.16);
}

.service-card h3,
.publication-card h3 {
  margin-bottom: 16px;
  font-size: 1.08rem;
}

.publication-card {
  display: flex;
  flex-direction: column;
  padding: var(--s-5);
  border-radius: 20px;
}

.publication-card__meta {
  margin: 0 0 var(--s-2);
  color: var(--c-accent);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.publication-card h3 {
  margin: 0 0 var(--s-3);
  font-size: 1rem;
  line-height: 1.45;
  text-wrap: balance;
}

.publication-card h3 a {
  color: var(--c-primary);
  /* the whole card is the hit area, the heading link carries the target */
}
.publication-card h3 a::after { content: ''; position: absolute; inset: 0; }
.publication-card { position: relative; }

.publication-card p { margin: 0; font-size: .92rem; line-height: 1.6; }

.publication-card:hover,
.publication-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--c-border-accent);
  box-shadow: 0 22px 46px rgba(var(--ink), 0.12);
}
.publication-card:hover h3 a { color: var(--c-accent); }

.section-note { margin-top: var(--s-5); color: var(--c-muted); font-size: .94rem; }
.section-note a { color: var(--c-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.section--highlight { background: linear-gradient(180deg, var(--c-white) 0%, var(--c-surface-soft) 100%); }

.section--info { background: var(--c-surface); }

.section--project {
  display: grid;
  gap: 24px;
  background: var(--c-surface-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.14);
  border-radius: 28px;
  padding: 28px;
}

.funds {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px var(--gap) 0;
}

.funds img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.footer {
  padding: 48px 0 24px;
  background: var(--c-surface-tint);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-border-soft);
}

.footer__brand {
  max-width: 460px;
}

.footer__logo {
  width: 110px;
  height: auto;
  margin-bottom: 18px;
}

.footer__text {
  color: var(--c-muted);
  line-height: 1.8;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 480px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(min(190px, 100%), 1fr)); }
}

@media (min-width: 900px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.footer__col {
  display: grid;
  gap: 10px;
}

.footer__heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: 6px;
}

.footer__col p,
.footer__col address {
  color: var(--c-muted);
  line-height: 1.7;
}

.footer a {
  color: var(--c-primary);
  transition: color .2s ease;
}

.footer a:hover { color: var(--c-accent); }

.footer__bottom {
  margin-top: 24px;
  padding-top: 16px;
  color: var(--c-muted);
  font-size: 0.95rem;
  text-align: center;
}

@media (min-width: 768px) {
  .page-head__inner { grid-template-columns: 1.6fr 1fr; }
  /* two columns: the h1 now only gets ~61.5% of the row, so it needs its own
     ramp — 2.75rem is the largest size that still fits the longest line. */
  .page-head h1 { font-size: clamp(1.7rem, 3.6vw, 2.75rem); }
  .page-head { padding-top: calc(var(--bar-h) + 44px); padding-bottom: 56px; }
  .hero-card { padding: 32px; }
  .hero-card {
    width: 100%;
    max-width: 520px;
    margin-inline-start: auto;
  }

  .section__grid { grid-template-columns: 1.7fr 1fr; }
  /* .service-grid / .publications stay on their auto-fit tracks so they fill
     out to 3–4 columns on wide screens instead of being pinned at 2 */
}

/* Menu poziome zamiast hamburgera dopiero od 1024px.
   Siedem pozycji zajmuje ~685px, logo kolejne 220–240px — poniżej tej
   szerokości lista łamała się na dwa wiersze i rozpychała pasek. Na
   tabletach zostaje więc rozwijane menu spod hamburgera. */
@media (min-width: 1024px) {
  .topbar__nav { display: block; }
  .burger { display: none; }
  .nav { display: none !important; }

  .page-head { padding-top: calc(var(--bar-h) + 56px); }
  .content { padding-bottom: 72px; }
  .section { padding: 40px; }
  .hero-card { padding: 32px; }
  .button { padding: 16px 28px; }
}

/* =========================================================
   Print
   Contact details, registry data and the publication list get printed in a
   forensic practice, so the printed page drops navigation and chrome and
   spells out link targets.
   ========================================================= */
@media print {
  @page { margin: 16mm 14mm; }

  *, *::before, *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
    filter: none !important;
    text-shadow: none !important;
  }

  html { font-size: 11pt; }
  body { background: #fff !important; line-height: 1.5; }

  /* interactive chrome has no meaning on paper */
  .topbar,
  .nav,
  .burger,
  .skip-link,
  .carousel__nav,
  .carousel__dots,
  .hero-actions,
  .section-cta,
  .contact__map,
  .overlay,
  .footer__logo-link { display: none !important; }

  .page-head { padding-top: 0 !important; }
  .crumbs { padding-top: 0 !important; }
  .main--standalone { padding-top: 0 !important; }

  /* animated-in content must not print blank */
  .reveal { opacity: 1 !important; transform: none !important; }

  .section {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 8mm;
  }
  .content > * + * { margin-top: 8mm; }

  /* the carousel becomes a plain list of people */
  .carousel__viewport { height: auto !important; overflow: visible !important; perspective: none !important; }
  .carousel__track { display: block !important; height: auto !important; }
  .carousel__slide {
    position: static !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
    page-break-inside: avoid;
    margin-bottom: 4mm;
  }
  .person-card { border: 1px solid #999 !important; page-break-inside: avoid; }
  .person-card__photo { max-width: 30mm; }

  /* answers are worth printing, so every accordion opens */
  .faq__item[open] .faq__answer,
  .faq__answer { display: block !important; }
  .faq__item { border: 1px solid #999 !important; page-break-inside: avoid; }
  .faq__item summary::after { display: none; }

  .service-card,
  .publication-card,
  .badge-card,
  .contact__card,
  .legal__box { border: 1px solid #999 !important; page-break-inside: avoid; }

  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }

  /* a printed link is useless without its address */
  a[href^="http"]::after,
  a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  a[href^="#"]::after,
  a[href^="tel:"]::after { content: ""; }
  a { text-decoration: underline; }

  .legal__table { font-size: 9pt; }
  .legal__table th, .legal__table td { border: 1px solid #999 !important; }
  .legal__todo { border: 1px dashed #666 !important; }
}