/* ============================================================
   dr. Irina Arechvo: System 7 Editorial
   Design tokens adapted from design-ref/System 7 Keynote.html
   Two families: Libre Caslon Text (display serif), IBM Plex Mono
   (everything else). Hard geometry: zero radius, offset shadows,
   thick ink borders, striped titlebars as the recurring frame.
   ============================================================ */

/* ---- Fonts, self-hosted -------------------------------------- */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0304, U+0328, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Text";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
}

/* ---- Design tokens --------------------------------------------- */
:root {
  /* Ink scale */
  --ink-900: #111110;
  --ink-800: #1c1b18;
  --ink-700: #2a2824;
  --ink-500: #6c6a63;
  --ink-300: #b9b6ac;
  --ink-200: #d8d5cb;

  /* Paper surfaces */
  --paper-ivory: #f4ecd8;
  --paper-white: #f3f1ea;
  --paper-pure: #fbfaf6;

  /* Accent "photo" colors, sparing use */
  --photo-red: #c0392b;
  --photo-blue: #2f6f9f;
  --photo-teal: #2e7d83;
  --photo-amber: #d99a3a;

  /* Semantic aliases */
  --surface-desktop: var(--paper-ivory);
  --surface-window: var(--paper-white);
  --surface-raised: var(--paper-pure);
  --text-display: var(--ink-900);
  --text-body: var(--ink-800);
  --text-heading: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-ink: var(--paper-white);
  --border-ink: var(--ink-900);
  --rule-line: var(--ink-900);
  --divider: var(--ink-200);

  /* Fonts */
  --font-serif-display: "Libre Caslon Text", "Times New Roman", Georgia, serif;
  --font-mono: "IBM Plex Mono", Menlo, Consolas, monospace;

  /* Display scale (serif) */
  --display-hero: 112px;
  --display-xl: 76px;
  --display-lg: 56px;
  --display-md: 40px;

  /* Mono scale, adapted: running text raised to 19px+ for readability */
  --mono-lead: 22px;
  --mono-body: 19px;
  --mono-caption: 15px;
  --mono-meta: 13px;
  --mono-heading: 14px;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  --lh-tight: 1.05;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --ls-display: -0.01em;
  --ls-label: 0.06em;
  --ls-label-wide: 0.16em;

  /* Spacing (8px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Borders. Radius is always zero. */
  --border-thin: 1px solid var(--border-ink);
  --border-frame: 3px solid var(--border-ink);
  --border-heavy: 4px solid var(--border-ink);
  --radius-none: 0px;

  /* Hard offset shadows, no blur */
  --shadow-press: 2px 2px 0 0 var(--ink-900);
  --shadow-window-sm: 5px 5px 0 0 var(--ink-900);
  --shadow-window: 8px 8px 0 0 var(--ink-900);
  --shadow-window-lg: 12px 12px 0 0 var(--ink-900);

  /* Titlebar stripes */
  --titlebar-stripe: repeating-linear-gradient(
    to bottom,
    var(--rule-line) 0,
    var(--rule-line) 1px,
    transparent 1px,
    transparent 3px
  );

  --content-max: 1440px;
}

/* ---- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-desktop);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-size: var(--mono-body);
  line-height: var(--lh-body);
}
img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ---- Focus states ------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--photo-blue);
  outline-offset: 2px;
}

/* ---- Type -------------------------------------------------------- */
.serif {
  font-family: var(--font-serif-display);
  color: var(--text-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 400;
}
.t-hero { font-size: var(--display-hero); }
.t-xl { font-size: var(--display-xl); }
.t-lg { font-size: var(--display-lg); }
.t-md { font-size: var(--display-md); }

.lead { font-size: var(--mono-lead); line-height: var(--lh-body); color: var(--text-body); }
.body-text { font-size: var(--mono-body); line-height: var(--lh-body); color: var(--text-body); }
.caption { font-size: var(--mono-caption); color: var(--text-muted); line-height: var(--lh-snug); }
.caption a { overflow-wrap: break-word; word-break: break-all; }
.heading {
  font-size: var(--mono-heading);
  font-weight: var(--w-semibold);
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  margin: 0;
}
.kicker {
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.meta {
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-heading);
}

h1, h2, h3, h4 { font-family: var(--font-mono); }

/* ---- Page shell --------------------------------------------------- */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---- Header / nav --------------------------------------------------- */
.site-header {
  background: var(--surface-window);
  border-bottom: var(--border-heavy);
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.site-header__name {
  font-family: var(--font-serif-display);
  font-size: 24px;
  color: var(--text-display);
  text-decoration: none;
  letter-spacing: var(--ls-display);
  white-space: nowrap;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--font-mono);
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  color: var(--text-heading);
  padding: var(--space-1) 0;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-bottom-color: var(--ink-900);
}
.nav-toggle {
  display: none;
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--mono-meta);
  background: var(--surface-raised);
  border: var(--border-frame);
  box-shadow: var(--shadow-press);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}
.lang-toggle {
  font-family: var(--font-mono) !important;
  font-weight: var(--w-semibold);
  font-size: var(--mono-meta) !important;
  border: var(--border-thin);
  padding: var(--space-1) var(--space-2) !important;
  margin-left: var(--space-2);
}
.lang-toggle:hover { background: var(--ink-900); color: var(--paper-white); border-color: var(--ink-900); }

/* ---- Window chrome, the recurring frame ---------------------------- */
.win {
  background: var(--surface-window);
  border: var(--border-frame);
  box-shadow: var(--shadow-window);
}
.win--sm { box-shadow: var(--shadow-window-sm); }
.win--lg { border-width: 4px; box-shadow: var(--shadow-window-lg); }
.win--flush { background: var(--ink-900); }

.bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-2);
  background: var(--surface-window);
  border-bottom: var(--border-frame);
}
.bar__sq { width: 16px; height: 16px; background: var(--ink-900); flex: none; }
.bar__stripes {
  flex: 1;
  height: 20px;
  background-image: var(--titlebar-stripe);
  background-size: 100% 3px;
}
.bar__label {
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  padding-left: var(--space-2);
}

.win__body { padding: var(--space-6); }

/* ---- Section rhythm -------------------------------------------------- */
.section {
  padding: var(--space-8) 0;
}
.section--ink {
  background: var(--ink-900);
  color: var(--text-on-ink);
}

/* ---- Hero -------------------------------------------------------------- */
.hero {
  padding: var(--space-8) 0 var(--space-7);
}
.hero__win {
  display: flex;
  flex-direction: column;
}
.hero__body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero__title {
  font-size: var(--display-xl);
}
.hero__subtitle {
  font-family: var(--font-mono);
  font-size: var(--mono-lead);
  font-weight: var(--w-medium);
  color: var(--text-heading);
  margin: 0;
}
.hero__lede {
  max-width: 780px;
  font-size: var(--mono-lead);
}
.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

/* ---- Hero split: text + framed portrait -------------------------------- */
.hero__split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}
.hero__split .hero__body { padding: var(--space-8) 0 var(--space-8) var(--space-8); flex: 1; }
.hero__photo {
  flex: none;
  width: 300px;
  margin: var(--space-8) var(--space-8) 0 0;
  display: flex;
  flex-direction: column;
}
.hero__photo picture,
.hero__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Smaller framed photo beside text, reused across Apie, Mokslinė veikla,
   Paslaugos, and the home endoscopy highlight. */
.intro-split {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}
.intro-split__text { flex: 1; min-width: 0; }
.intro-split__photo {
  flex: none;
  width: 240px;
  display: flex;
  flex-direction: column;
}
.intro-split--sm .intro-split__photo { width: 160px; }
.intro-split__photo picture,
.intro-split__photo img {
  display: block;
  width: 100%;
  height: auto;
}
.intro-split__photo figcaption {
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-thin);
  font-size: var(--mono-meta);
  color: var(--text-muted);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* ---- Retro loading bar --------------------------------------------------- */
.progress {
  border: 2px solid var(--ink-900);
  background: var(--surface-window);
  padding: 2px;
  width: 240px;
  height: 18px;
  box-sizing: border-box;
}
.progress__fill {
  height: 100%;
  background: var(--ink-900);
  width: 0%;
}
@media not all and (prefers-reduced-motion: reduce) {
  .progress__fill { animation: hero-progress-fill 1.1s ease-out forwards; }
}
@keyframes hero-progress-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ---- Blinking block cursor ------------------------------------------------ */
.cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.85em;
  background: var(--ink-900);
  margin-left: 0.12em;
  vertical-align: -0.08em;
}
@media not all and (prefers-reduced-motion: reduce) {
  .cursor { animation: cursor-blink 1s steps(2, start) infinite; }
}
@keyframes cursor-blink {
  to { visibility: hidden; }
}

/* ---- Scroll reveal, progressive enhancement ------------------------------- */
@media not all and (prefers-reduced-motion: reduce) {
  .reveal.js-enabled {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 300ms ease-out, transform 300ms ease-out;
  }
  .reveal.js-enabled.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Buttons / links -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--mono-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  color: var(--text-heading);
  background: var(--surface-raised);
  border: var(--border-frame);
  box-shadow: var(--shadow-window-sm);
  padding: var(--space-3) var(--space-5);
  transition: transform 0.05s ease;
}
.btn:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.btn:active { transform: translate(5px, 5px); box-shadow: 0 0 0 0 var(--ink-900); }
.btn--ink {
  background: var(--ink-900);
  color: var(--text-on-ink);
}

/* ---- Grid helpers, never a generic 3-card feature grid ----------------- */
.grid-2 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-6);
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ---- Lists --------------------------------------------------------- */
.ul-plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ul-plain li {
  position: relative;
  padding-left: var(--space-5);
}
.ul-plain li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--ink-900);
}

/* ---- Timeline (Apie) -------------------------------------------------- */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: 140px 24px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--border-thin);
}
.timeline__item:first-child { padding-top: 0; }
.timeline__item:last-child { border-bottom: 0; }
.timeline__year {
  font-family: var(--font-mono);
  font-weight: var(--w-semibold);
  font-size: var(--mono-heading);
  color: var(--text-heading);
  white-space: nowrap;
}
.timeline__dot {
  width: 12px;
  height: 12px;
  background: var(--ink-900);
  border-radius: 50%;
  margin-top: 6px;
}
.timeline__text { max-width: 780px; min-width: 0; overflow-wrap: break-word; }
.timeline__text p { margin: 0; }

/* ---- Services (Paslaugos) --------------------------------------------- */
.service-group {
  border-bottom: var(--border-thin);
  padding: var(--space-6) 0;
}
.service-group:first-child { padding-top: 0; }
.service-group:last-child { border-bottom: 0; padding-bottom: 0; }
.service-group__title {
  font-family: var(--font-serif-display);
  font-size: 30px;
  color: var(--text-display);
  margin: 0 0 var(--space-4);
}

/* ---- Facts strip (Pradžia) ---------------------------------------------- */
.facts-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.facts-strip__num {
  font-family: var(--font-serif-display);
  font-size: 40px;
  color: var(--text-on-ink);
  line-height: 1;
  margin: 0 0 var(--space-2);
}
.facts-strip__label {
  font-family: var(--font-mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0;
}

/* ---- Preview lists (Paslaugos / Pacientams / Naujienos on Pradžia) ------ */
.preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.preview-list li { border-bottom: var(--border-thin); }
.preview-list li:last-child { border-bottom: 0; }
.preview-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--text-heading);
  font-family: var(--font-mono);
  font-size: var(--mono-body);
}
.preview-list a:hover { text-decoration: underline; }
.preview-list .meta { flex: none; }

/* ---- Testimonials (Pradžia) ---------------------------------------------- */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.testimonial {
  display: flex;
  flex-direction: column;
}
.testimonial__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
}
.testimonial__quote {
  font-family: var(--font-serif-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-display);
  margin: 0;
}
.testimonial__source {
  font-family: var(--font-mono);
  font-size: var(--mono-meta);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ---- Table (Kontaktai) -------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.clinics {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 17px;
}
table.clinics caption { text-align: left; margin-bottom: var(--space-3); }
table.clinics th, table.clinics td {
  border: var(--border-thin);
  padding: var(--space-4);
  text-align: left;
  vertical-align: top;
}
table.clinics thead th {
  background: var(--ink-900);
  color: var(--text-on-ink);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
}
table.clinics a {
  display: inline-block;
  text-decoration: underline;
  word-break: break-all;
  border: 1px solid transparent;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: transform 0.05s ease;
}
table.clinics a:hover,
table.clinics a:focus-visible {
  border-color: var(--ink-900);
  box-shadow: var(--shadow-press);
  transform: translate(2px, 2px);
  text-decoration: none;
}

/* ---- Note / disclaimer block -------------------------------------------- */
.note {
  border-left: var(--border-heavy);
  padding: var(--space-4) var(--space-5);
  background: var(--surface-raised);
  font-size: var(--mono-caption);
  color: var(--text-muted);
}

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--ink-900);
  color: var(--text-on-ink);
  border-top: var(--border-heavy);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.site-footer a {
  color: var(--text-on-ink);
  font-size: var(--mono-meta);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  text-decoration: underline;
}
.site-footer__meta {
  font-size: var(--mono-meta);
  color: var(--ink-300);
  letter-spacing: var(--ls-label);
}

/* ---- Legal page ------------------------------------------------------------ */
.legal { max-width: 860px; }
.legal h2 {
  font-family: var(--font-serif-display);
  font-size: 28px;
  color: var(--text-display);
  margin: var(--space-7) 0 var(--space-3);
}
.legal p, .legal li { font-size: 17px; }
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin-top: var(--space-3);
}
.legal table th, .legal table td {
  border: var(--border-thin);
  padding: var(--space-3);
  text-align: left;
}
.todo-block {
  border: var(--border-frame);
  background: var(--surface-raised);
  box-shadow: var(--shadow-window-sm);
  padding: var(--space-5);
  margin: var(--space-5) 0;
}
.todo-block .meta { color: var(--photo-red); }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page { padding: 0 var(--space-4); }
  .grid-2 { grid-template-columns: 1fr; }
  .facts-strip { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .preview-list a { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .hero__title { font-size: var(--display-lg); }
  .hero__body { padding: var(--space-5); }
  :root {
    --display-xl: 44px;
    --display-lg: 34px;
  }
  .timeline__item { grid-template-columns: 90px 20px 1fr; }
  .hero__split, .intro-split { flex-direction: column; }
  .hero__split .hero__body { padding: var(--space-5); }
  .hero__photo, .intro-split__photo {
    width: 100%;
    max-width: 260px;
    margin: 0 var(--space-5) var(--space-5);
  }
  .intro-split__photo { margin: 0 0 var(--space-5); }
  .site-header__inner { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-thin);
  }
  .site-nav.is-open { display: flex; }
}

/* ---- Version switcher, top right of the header ---------------------- */
/* Two options, current one marked. Plain links, no JavaScript. */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}
.site-nav { margin-left: auto; }

.verswitch {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: var(--border-frame);
  box-shadow: var(--shadow-press);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--mono-meta);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  white-space: nowrap;
  line-height: 1.2;
}
.verswitch > * {
  padding: var(--space-1) var(--space-3);
  text-decoration: none;
  color: var(--text-heading);
  border-right: var(--border-thin);
}
.verswitch > *:last-child { border-right: 0; }
.verswitch a:hover { background: var(--ink-900); color: var(--paper-white); }
.verswitch .is-current { background: var(--ink-900); color: var(--paper-white); }

@media (max-width: 860px) {
  .site-header__inner { align-items: flex-start; }
  .site-header__name { order: 1; }
  .header-right { order: 2; margin-left: auto; }
  .site-nav { order: 3; margin-left: 0; }
}

@media (max-width: 440px) {
  .verswitch { font-size: 11px; letter-spacing: 0.06em; }
  .verswitch > * { padding: 2px var(--space-2); }
}