/* Tirly legal pages. Built from Figma b2GLzUFAjHh093TRAZVY5p, page "09 Legal" (privacy 104:44091 / 117:12737, terms 104:43206 / 117:13437,
   ES 104:40034 / 104:40997 / 104:41699 / 104:42586). Fonts, colors, radii and spacing come from /tierly/css/tokens.css and base.css.
   Solid green only on clickable controls and markers; the contact card is the one violet block. */

/* Spanish uses the patched Press Start 2P that has real accents (the base subset squashes them). */
@font-face {
  font-family: "Press Start 2P ES";
  src: url("/tierly/assets/fonts/press-start-2p-es.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* The 09 Legal frames set body copy, lists and the contact buttons in Space Grotesk, while the base body is now Martian Mono
   (Foundations). The family stays here, in this one token, only for those nodes; labels, TOC numbers and legends remain mono. */
:root { --legal-font-text: "Space Grotesk", var(--font-body), system-ui, sans-serif; }

html[lang="es"] { --font-display: "Press Start 2P ES", "Press Start 2P", ui-monospace, monospace; }

html {
  overflow-x: clip;
}

body.legal {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--legal-font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

/* Long commands, emails and identifiers must never force a horizontal scroll. */
.legal p,
.legal li,
.legal td,
.legal th,
.legal h1,
.legal h2,
.legal h3,
.legal a { overflow-wrap: anywhere; }

.legal a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--color-text); }
.legal a:focus-visible,
.legal button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.skip {
  position: absolute;
  left: var(--space-4);
  top: -80px;
  z-index: 200;
  padding: var(--space-2) var(--space-4);
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
}
.legal .skip { color: var(--color-on-accent); }
.skip:focus { top: var(--space-2); }

/* ---- Header: clone of the landing bar (Figma 2:161 / 2:950) ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 3px solid var(--color-outline);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 1440px;
  margin-inline: auto;
  padding: 20px clamp(20px, 8.34vw, 120px);
}

.logo { display: flex; flex: none; align-items: center; gap: var(--space-3); min-height: 44px; text-decoration: none; }
.logo__cat { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.logo__word { display: block; width: 86.25px; height: 23px; }

.site-nav { display: flex; gap: clamp(16px, 2.2vw, 32px); }
.site-nav a,
.mobile-menu a.label { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text); text-decoration: none; white-space: nowrap; }
.legal .site-nav a:hover,
.legal .mobile-menu a.label:hover { color: var(--color-accent); }
.legal .site-nav a[aria-current="page"],
.legal .mobile-menu a[aria-current="page"] { color: var(--color-accent); }

.site-header__right { display: flex; align-items: center; gap: var(--space-5); }

.lang { display: flex; align-items: center; gap: 0.5em; color: var(--color-muted); }
.legal .lang a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.legal .lang a:hover { color: var(--color-text); }
.legal .lang a[aria-current="true"] { color: var(--color-text); }

.theme-switch { display: flex; align-items: center; gap: 0.5em; color: var(--color-muted); }
.theme-switch__colon { margin-left: -0.4em; }
.theme-switch__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.theme-switch__btn[aria-pressed="true"] { color: var(--color-text); }
.theme-switch__btn:hover { color: var(--color-text); }
.theme-switch__btn:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; }

.site-header__cta { white-space: nowrap; }
.legal .btn { text-decoration: none; }
.legal .btn--primary { color: var(--color-on-accent); }
.legal .btn--primary:hover { color: var(--color-on-accent); }
.legal .btn--surface { border-color: var(--color-outline); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-hard-sm); }
.legal .btn--surface:hover { color: var(--color-text); box-shadow: var(--shadow-hard); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
}
.menu-toggle:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: -4px; }
.menu-toggle__bar { display: block; width: 20px; height: 2px; background: var(--color-text); }

/* Without JS the panel is a plain block under the bar, so ES / EN and the links still work. */
.mobile-menu {
  display: flex;
}
html.js .mobile-menu { display: none; }
html.js .site-header.is-open .mobile-menu { display: flex; }
html.js .menu-toggle { display: flex; }

/* Header menu: one disclosure panel on every width (hamburger at the right of the bar).
   Language and theme live here; the bar keeps the logo, the inline nav and the CTA.
   Without JS (no html.js) the panel stays a static block in flow under the bar. */
.mobile-menu {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: var(--space-2) clamp(20px, 8.34vw, 120px) var(--space-5);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface);
}

html.js .mobile-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: calc(max(0px, (100% - 1440px) / 2) + clamp(20px, 8.34vw, 120px));
  z-index: 110;
  width: min(360px, calc(100% - 2 * var(--space-4)));
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  padding: var(--space-2) var(--space-5) var(--space-5);
  border: var(--outline);
  box-shadow: var(--shadow-hard);
}

.menu-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu-group + .menu-group {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.menu-group + .btn {
  margin-top: var(--space-4);
}

.mobile-menu a.label {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  white-space: normal;
}

.mobile-menu a.label[aria-current="page"] {
  color: var(--color-accent);
}

/* Language + theme: a muted label, then two segmented buttons (pressed / current = accent). */
.menu-group--prefs {
  align-items: stretch;
  gap: var(--space-3);
  padding-block: var(--space-2) var(--space-1);
}

.mobile-menu .lang,
.mobile-menu .theme-switch {
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mobile-menu .lang__label,
.mobile-menu .theme-switch__label {
  flex: 0 0 100%;
  margin: 0;
}

.mobile-menu .lang__colon,
.mobile-menu .lang__sep,
.mobile-menu .theme-switch__colon,
.mobile-menu .theme-switch__sep {
  display: none;
}

.mobile-menu .lang__btn,
.mobile-menu .lang a,
.mobile-menu .theme-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--space-3);
  border: var(--outline);
  background: var(--color-surface-2);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.mobile-menu .lang__btn:hover,
.mobile-menu .lang a:hover,
.mobile-menu .theme-switch__btn:hover {
  box-shadow: var(--shadow-hard-sm);
}

.mobile-menu .lang__btn[aria-pressed="true"],
.mobile-menu .lang a[aria-current="true"],
.mobile-menu .theme-switch__btn[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
}

.mobile-menu .lang__btn:focus-visible,
.mobile-menu .lang a:focus-visible,
.mobile-menu a.label:focus-visible,
.mobile-menu .theme-switch__btn:focus-visible {
  outline: 2px solid var(--color-accent-2);
  outline-offset: 3px;
}

.menu-scrim {
  display: none;
}

.menu-close {
  display: none;
}

/* The CTA already sits in the bar while the bar's nav is visible. */
.mobile-menu > .btn {
  display: none;
}

@media (max-width: 920px) {
  .site-nav,
  .site-header__cta { display: none; }
  .site-header__bar { padding-block: 16px; }
  .site-header__right { gap: var(--space-4); }
  .mobile-menu { padding-inline: clamp(20px, 5vw, 48px); }
  html.js .mobile-menu {
    left: 0;
    right: 0;
    width: auto;
    top: 100%;
    padding: var(--space-2) clamp(20px, 5vw, 48px) var(--space-5);
    border-width: 0 0 3px;
    box-shadow: none;
  }
  .mobile-menu > .btn { display: inline-flex; }

  /* Close: first focusable of the modal sheet, so touch and screen readers can leave it without Esc. */
  html.js .mobile-menu .menu-close {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    min-height: 44px;
    margin-top: var(--space-2);
    padding: 0 var(--space-3);
    border: var(--outline);
    background: var(--color-surface-2);
    color: var(--color-text);
    cursor: pointer;
  }

  html.js .mobile-menu .menu-close:focus-visible {
    outline: 2px solid var(--color-accent-2);
    outline-offset: 3px;
  }

  html.menu-open {
    overflow: hidden;
  }

  /* Phones: the sheet is modal. The scrim covers the page under the bar and a click on it closes the menu. */
  html.js .site-header.is-open .menu-scrim {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 105;
    display: block;
    height: 100vh;
    height: 100dvh;
    background: var(--color-scrim-menu);
  }
}

/* ---- Hero ---- */
.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 64px clamp(20px, 5.56vw, 80px);
}

.hero__inner > * { margin: 0; }

.eyebrow {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
}

.hero h1 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

.meta {
  color: var(--color-muted-2);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
}

/* A pending date is an empty <time> (only the TODO comment): its label stays out of sight until the date is typed in. */
.meta__item:has(time:empty) { display: none; }

.note,
.lang-notice {
  max-width: none;
  color: var(--color-muted-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.lang-notice { color: var(--color-text-soft); }

.hero-cards { display: flex; align-items: flex-start; gap: 24px; }

/* ---- Cards: the base .card with .card--shadow-ink (3px ink border, radius 20, 6px ink shadow); this file adds only layout and padding ---- */
.legal-section,
.keypoints,
.changed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  margin: 0;
  scroll-margin-top: 110px;
}

.legal-section { padding: 36px; }

.card > * { margin: 0; }
.card > :last-child { margin-bottom: 0; }

.card__head { display: flex; align-items: center; gap: 16px; }
.card__head > h2 { flex: 1; min-width: 0; }

.icon-tile {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-button);
  background: var(--color-bg);
  box-shadow: var(--shadow-hard-sm);
}
.icon-tile img { display: block; width: 24px; height: 24px; }

.card h2 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-transform: uppercase;
}

.card h2 .num {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 8px 10px;
  border: 2px solid var(--color-outline);
  border-radius: var(--radius-device);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 13px;
  line-height: 1.5;
}
.card h2 .num.num--plain { padding: 0; border: 0; background: none; color: inherit; font-size: inherit; }

.anchor {
  flex: none;
  opacity: 0;
  margin-left: auto;
  padding: 0 var(--space-2);
  color: var(--color-muted-2);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
}
.card h2:hover .anchor,
.anchor:focus-visible { opacity: 1; }
.legal .anchor:hover,
.legal .anchor:focus-visible { color: var(--color-text); }

.card p,
.card li { max-width: none; }

.card ul { display: flex; flex-direction: column; gap: 12px; padding: 0; list-style: none; }
.card li { position: relative; margin: 0; padding-left: 23px; }
.card li::before {
  content: "■";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 2.15;
}

.card strong { font-weight: 700; }

/* ---- Key points (accent card) ---- */
.keypoints {
  flex: 1 1 0;
  gap: 14px;
  padding: 28px;
  border-color: var(--color-outline);
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.keypoints h2 { color: var(--color-on-accent); }
.keypoints .card__head { gap: 14px; }
.keypoints li { padding-left: calc(1em + 10px); font-weight: 500; }
.keypoints li::before { color: var(--color-on-accent); font-size: 1em; line-height: inherit; }
.keypoints a { color: var(--color-on-accent); }
.keypoints .kp-note {
  order: 3;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
}

/* ---- What changed (surface card) ---- */
.changed { flex: none; width: 420px; max-width: 100%; gap: 12px; padding: 28px; }
.changed h2 {
  color: var(--color-accent-2-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
}
.changed h3 {
  margin: 0;
  color: var(--color-accent-2-light);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}
.changed ul { gap: 12px; }
/* The first list is the current version (NEW tag); the list after the h3 is the older one (+). */
.changed li { padding-left: 20px; font-size: 0.9375rem; line-height: 1.6; }
.changed li::before { content: "+"; color: var(--color-accent); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; line-height: 1.6; }
.changed ul:first-of-type li { padding-left: 32px; }
.changed ul:first-of-type li::before { content: var(--tag-new, "NEW"); font-size: 0.625rem; }
html[lang="es"] .changed { --tag-new: "NUEVO"; }
html[lang="es"] .changed ul:first-of-type li { padding-left: 52px; }

/* ---- Layout: TOC + sections ---- */
.layout {
  display: block;
  max-width: 1440px;
  margin-inline: auto;
  padding: 32px clamp(20px, 5.56vw, 80px) 64px;
}

.doc { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.toc-wrap { margin: 0 0 24px; }

.toc {
  padding: 14px 16px;
  border: 3px solid var(--color-outline);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  box-shadow: var(--shadow-hard-sm);
}

.toc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: "▾"; color: var(--color-accent); font-size: 22px; font-weight: 700; line-height: 1; }
.toc[open] summary::after { content: "▴"; }

.toc__title { display: block; color: var(--color-text); font-family: var(--font-display); font-size: 12px; line-height: 1.5; text-transform: uppercase; }
.toc__count { display: block; margin-top: 4px; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; line-height: normal; text-transform: uppercase; }
.toc__lead { display: block; flex: 1; min-width: 0; }

.toc ol { margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.legal .toc a {
  display: flex;
  gap: 10px;
  padding: 7px 0;
  min-height: 44px;
  align-items: flex-start;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}
.legal .toc a:hover { color: var(--color-accent); }
.toc__num { flex: none; min-width: 17px; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; white-space: nowrap; }
.toc__label { flex: 1; min-width: 0; }
.legal .toc a[aria-current="true"] { color: var(--color-accent); font-weight: 700; }
.toc a[aria-current="true"] .toc__num { color: var(--color-accent); }
.toc__legend { display: none; margin: var(--space-2) 0 0; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.04em; }

@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: 300px minmax(0, 860px); gap: 48px; align-items: start; }
  .toc-wrap { position: sticky; top: 110px; margin: 0; max-height: calc(100vh - 130px); overflow: auto; padding: 0 8px 8px 0; margin-right: -8px; }
  .legal .toc a { min-height: 0; }
  .toc { padding: 24px; border-radius: var(--radius-card); box-shadow: var(--shadow-hard); }
  .toc summary { min-height: 0; pointer-events: none; cursor: default; }
  .toc summary::after,
  .toc__count { display: none; }
  .toc__title { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.04em; line-height: normal; }
  .toc ol { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
  .toc__legend { display: block; margin-top: 4px; line-height: normal; }
  .doc { gap: 28px; }
}

/* ---- Data tables become row cards at every width (Figma §3, §4, §6) ---- */
.card table,
.card tbody,
.card tr,
.card td { display: block; width: 100%; }
.card table { margin: 0; border-collapse: collapse; }
.card tbody { display: flex; flex-direction: column; gap: 16px; }
.card thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.card tr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-surface-2);
}
.card td { padding: 0; border: 0; font-size: 1rem; line-height: 1.6; }
.card td:first-child { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; }
.card td[data-label]:not(:first-child)::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 6px;
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: normal;
  text-transform: uppercase;
}
.rows--pair td:nth-child(2),
.rows--desc td:nth-child(2) { color: var(--color-muted-2); }
/* The label is not drawn (Figma has none here) but stays in the accessibility tree. */
.card .rows--pair td:nth-child(2)::before,
.card .rows--desc td:nth-child(2)::before { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Contact (violet card) ---- */
.card--contact { gap: 14px; background: var(--color-accent-2); color: var(--color-white); }
.card--contact h2 { color: var(--color-white); }
.card--contact .anchor { color: var(--color-white); }
.contact { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contact p { margin: 0; max-width: none; }
.contact p:has(> .contact__mail) { line-height: normal; }
.contact__org a { color: inherit; }
.legal .contact__mail { color: var(--color-accent); font-family: var(--font-mono); font-size: 1.125rem; font-weight: 500; }
.legal .contact__mail:hover { color: var(--color-white); }
.contact__links { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.contact__links .btn { font-family: var(--legal-font-text); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0; line-height: normal; text-transform: none; padding: 12px 16px; }

/* ---- Footer: the landing footer (Figma 10:917 / 10:1350) ---- */

.site-footer { background: var(--color-bg); }

.dither {
  height: 48px;
  background:
    linear-gradient(90deg, var(--color-bg) 48px, transparent 48px, transparent 60px, var(--color-bg) 60px) 0 36px / 96px 12px repeat-x,
    linear-gradient(90deg, var(--color-bg) 24px, transparent 24px, transparent 36px, var(--color-bg) 36px) 0 24px / 48px 12px repeat-x,
    linear-gradient(90deg, var(--color-bg) 12px, transparent 12px) 0 12px / 24px 12px repeat-x,
    linear-gradient(90deg, var(--color-bg) 12px, transparent 12px) 0 0 / 48px 12px repeat-x,
    var(--color-accent-2);
}

.site-footer__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
  max-width: calc(1200px + 2 * clamp(24px, 4vw, 48px));
  margin-inline: auto;
  padding: 80px clamp(24px, 4vw, 48px) 40px;
}

.site-footer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); width: 100%; max-width: 1200px; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); width: 384px; max-width: 100%; }
.site-footer__brand p { margin: 0; font-family: var(--font-mono); font-size: 1rem; line-height: 26px; }
.site-footer__brand .logo { min-height: 32px; }
.site-footer__cols { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); }

.fcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  flex: 0 0 auto;
  min-width: 150px;
  padding: var(--space-4);
  border: 3px solid var(--color-outline);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-accent-2);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 22px;
  white-space: nowrap;
}
.fcol h2 { margin: 0; color: var(--color-accent-text); font-size: 0.75rem; line-height: 16px; }
.legal .fcol a { color: var(--color-text); text-decoration: none; }
.legal .fcol a:hover { color: var(--color-accent); }
.fcol__soon { color: var(--color-muted); }

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
}
.site-footer__legal p { margin: 0; }

.site-footer__word { width: min(870px, 100%); height: auto; aspect-ratio: 870 / 232; }

/* ---- Tablet and phone ---- */
@media (max-width: 1023px) {
  .hero__inner { padding-block: 48px; }
  .hero-cards { flex-direction: column; align-items: stretch; }
  .changed { width: 100%; }
}

@media (max-width: 720px) {
  body.legal { font-size: 1rem; }
  .site-header__bar { padding: 10px 20px; }
  .site-header__right { gap: 4px; }
  .menu-toggle { margin-right: -12px; }
  .hero__inner { gap: 16px; padding-block: 32px; padding-inline: 20px; }
  .hero h1 { font-size: 20px; }
  .meta { font-size: 0.6875rem; }
  .note,
  .lang-notice { font-size: 0.875rem; }
  .hero-cards { gap: 24px; }
  .legal-section { gap: 12px; padding: 20px; box-shadow: var(--shadow-hard-sm); }
  .card h2 { font-size: 13px; }
  .card h2 .num { padding: 8px 10px; font-size: 11px; }
  .keypoints,
  .changed { gap: 14px; padding: 20px; box-shadow: var(--shadow-hard); }
  .changed { gap: 12px; }
  .keypoints h2 { font-size: 14px; }
  .changed h2 { font-size: 0.75rem; }
  .keypoints li { font-size: 1rem; }
  .changed li { font-size: 0.875rem; }
  .card--contact { gap: 14px; }
  .card--contact .contact__mail { font-size: 1rem; }
  .doc { gap: 20px; }
  .layout { padding-top: 8px; padding-inline: 20px; }
  .toc-wrap { margin-bottom: 20px; }

  .site-footer__body { align-items: flex-start; gap: var(--space-6); padding: 48px 20px 32px; }
  .site-footer__top { flex-direction: column; gap: var(--space-6); }
  .site-footer__brand { gap: 32px; width: 100%; }
  .site-footer__brand .logo { align-self: center; }
  .site-footer__brand p { font-size: 0.875rem; line-height: 22px; }
  .site-footer__brand .btn { width: 100%; padding: 20px 28px; font-size: 14px; letter-spacing: 0.12em; }
  .site-footer__cols { gap: 20px; width: 100%; }
  .fcol { flex: 0 1 auto; width: calc(50% - 10px); min-width: 0; white-space: normal; }
  .site-footer__legal { padding: 0; border-top: 0; }
  .only-desktop { display: none; }
  .site-footer__word { align-self: center; width: 255px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Light theme (Figma «11 Light mode») ────────────────────────────────────── */
[data-theme="light"] .legal .contact__mail { color: var(--color-white); }
[data-theme="light"] .logo__word { filter: invert(1); }

/* Menu: the Dark / Light buttons carry a moon / sun icon beside the word.
   The mask sits on ::before so the button itself stays unmasked and its focus ring is visible. */
.theme-switch__btn::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: var(--space-2);
  background: currentColor;
  -webkit-mask: center / 16px 16px no-repeat;
  mask: center / 16px 16px no-repeat;
}
.theme-switch__btn[data-set-theme="dark"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a6.5 6.5 0 1 0 4.5 11A5.5 5.5 0 0 1 10 1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10 1.5a6.5 6.5 0 1 0 4.5 11A5.5 5.5 0 0 1 10 1.5z'/%3E%3C/svg%3E"); }
.theme-switch__btn[data-set-theme="light"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 .5v2.5M8 13v2.5M.5 8H3M13 8h2.5M2.7 2.7l1.8 1.8M11.5 11.5l1.8 1.8M2.7 13.3l1.8-1.8M11.5 4.5l1.8-1.8' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Cpath d='M8 .5v2.5M8 13v2.5M.5 8H3M13 8h2.5M2.7 2.7l1.8 1.8M11.5 11.5l1.8 1.8M2.7 13.3l1.8-1.8M11.5 4.5l1.8-1.8' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }