/* Site layer of meydeey.com on the LE LABO IA design system (assets/ds/, see MANIFEST.json).
   Loaded after the design system by every public page. Rules:
   - only design system tokens (--labo-*) or site tokens (--mdy-*), never a colour literal;
   - only labo9-* classes from the design system, or mdy-* classes defined here or in a family layer;
   - family layers prefix their classes with mdy-<family>- and never restyle a labo9-* class;
   - dark only, print aside (handled by the design system).
   Contract and residue check: docs/architecture/design-system.md, .dev/qa/ds-residue-check.mjs. */

/* Base element rules use :where() so any component class, labo9-* included, wins over them. */

/* 1. Site tokens ------------------------------------------------------------------------ */
[data-labo] {
  --mdy-header-height: 64px;
  --mdy-glass: color-mix(in srgb, var(--labo-canvas) 82%, transparent);
  --mdy-panel-raised: color-mix(in srgb, var(--labo-surface) 70%, var(--labo-border-strong));
  --mdy-link: var(--labo-glow-start);
  --mdy-reading: 70ch;
  --mdy-gutter: max(var(--labo-gutter-sm), var(--labo-safe-area-left));
}
@media (min-width: 1000px) {
  [data-labo] { --mdy-gutter: max(var(--labo-gutter-lg), var(--labo-safe-area-left)); }
}

/* 2. Document --------------------------------------------------------------------------- */
html[data-labo] {
  color-scheme: dark;
  background: var(--labo-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--mdy-header-height) + var(--labo-space-4));
}
@media (prefers-reduced-motion: no-preference) {
  html[data-labo] { scroll-behavior: smooth; }
}
.mdy-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mdy-page[data-menu-open] { overflow: hidden; }
:where(.mdy-page) :where(img, video, svg) { max-width: 100%; }
:where(.mdy-page) :where(img, video) { height: auto; }
:where(.mdy-page) :where(h1, h2, h3, h4) {
  font-family: var(--labo-font-display);
  font-weight: var(--labo-font-weight-bold);
  line-height: var(--labo-line-height-snug);
  letter-spacing: var(--labo-letter-spacing-title);
  text-wrap: balance;
}
:where(.mdy-page) :where(a) { color: inherit; }
:where(.mdy-page) :where(a[class]) { text-decoration: none; }
:where(.mdy-page) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.mdy-page) :focus-visible {
  outline: var(--labo-focus-ring) solid var(--labo-focus);
  outline-offset: var(--labo-focus-offset);
}
:where(.mdy-page) ::selection { background: color-mix(in srgb, var(--labo-glow-start) 32%, transparent); }
:where(.mdy-page) :where(code, kbd, samp, pre) { font-family: var(--labo-font-mono); }

.mdy-skip {
  position: absolute;
  z-index: var(--labo-layer-overlay);
  inset-block-start: var(--labo-space-2);
  inset-inline-start: var(--labo-space-2);
  padding: var(--labo-space-2) var(--labo-space-4);
  border-radius: var(--labo-radius-pill);
  background: var(--labo-action);
  color: var(--labo-action-text);
  font-weight: var(--labo-font-weight-semibold);
  text-decoration: none;
  transform: translateY(-200%);
}
.mdy-skip:focus { transform: none; }

/* 3. Layout ----------------------------------------------------------------------------- */
.mdy-container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--labo-container-content) + 2 * var(--mdy-gutter));
  margin-inline: auto;
  padding-inline: var(--mdy-gutter);
}
.mdy-container--narrow { max-width: calc(var(--labo-container-narrow) + 2 * var(--mdy-gutter)); }
.mdy-container--wide { max-width: calc(var(--labo-container-wide) + 2 * var(--mdy-gutter)); }
.mdy-section { padding-block: var(--labo-space-8); }
.mdy-section--tight { padding-block: var(--labo-space-6); }
.mdy-stack { display: grid; gap: var(--labo-space-4); align-content: start; }
.mdy-stack--lg { gap: var(--labo-space-6); }
.mdy-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--labo-space-3); }
.mdy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--labo-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mdy-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.mdy-split > * { min-width: 0; }
.mdy-split {
  display: grid;
  gap: var(--labo-space-6);
  align-items: start;
}
@media (min-width: 1000px) {
  .mdy-split { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--labo-space-7); }
  .mdy-split--start { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}
.mdy-muted { color: var(--labo-text-muted); }

/* 4. Page heading (hubs, articles, detail pages) ---------------------------------------- */
.mdy-heading {
  position: relative;
  isolation: isolate;
  padding-block: var(--labo-space-8) var(--labo-space-7);
}
.mdy-heading::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% 0 auto;
  height: 100%;
  background: radial-gradient(closest-side, var(--labo-glow-halo), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.mdy-heading__inner { display: grid; gap: var(--labo-space-4); max-width: var(--labo-container-narrow); }
.mdy-heading__title {
  margin: 0;
  font-size: clamp(var(--labo-font-size-title-2), 5vw, var(--labo-font-size-display));
  line-height: var(--labo-line-height-tight);
  letter-spacing: var(--labo-letter-spacing-display);
}
.mdy-heading__lead {
  margin: 0;
  max-width: 62ch;
  color: var(--labo-text-muted);
  font-size: var(--labo-font-size-lead);
  line-height: var(--labo-line-height-reading);
}
.mdy-heading__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--labo-space-2) var(--labo-space-4);
  margin: 0;
  color: var(--labo-text-muted);
  font-size: var(--labo-font-size-small);
}

/* 5. Reading ---------------------------------------------------------------------------- */
.mdy-prose {
  max-width: var(--mdy-reading);
  color: var(--labo-text);
  font-size: calc(var(--labo-font-size-body) + 1px);
  line-height: var(--labo-line-height-reading);
  overflow-wrap: break-word;
}
.mdy-prose > * + * { margin-block-start: var(--labo-space-4); }
.mdy-prose > :first-child { margin-block-start: 0; }
.mdy-prose p, .mdy-prose ul, .mdy-prose ol, .mdy-prose figure, .mdy-prose blockquote, .mdy-prose pre { margin-block-end: 0; }
.mdy-prose h2 {
  margin-block: var(--labo-space-7) 0;
  font-size: clamp(var(--labo-font-size-heading), 3vw, var(--labo-font-size-title-2));
}
.mdy-prose h3 { margin-block: var(--labo-space-6) 0; font-size: var(--labo-font-size-title-3); }
.mdy-prose h4 { margin-block: var(--labo-space-5) 0; font-size: var(--labo-font-size-lead); }
.mdy-prose a {
  color: var(--mdy-link);
  text-decoration: underline;
  text-decoration-thickness: var(--labo-border-width-hairline);
  text-underline-offset: 0.2em;
}
.mdy-prose a:hover { color: var(--labo-text); }
.mdy-prose strong { font-weight: var(--labo-font-weight-semibold); }
.mdy-prose ul, .mdy-prose ol { padding-inline-start: 1.3em; }
.mdy-prose li + li { margin-block-start: var(--labo-space-2); }
.mdy-prose li::marker { color: var(--labo-text-muted); }
.mdy-prose blockquote {
  margin-inline: 0;
  padding: var(--labo-space-4) var(--labo-space-5);
  border-inline-start: var(--labo-border-width-strong) solid var(--labo-glow-start);
  border-radius: 0 var(--labo-radius-md) var(--labo-radius-md) 0;
  background: var(--labo-surface);
  color: var(--labo-text);
}
.mdy-prose code {
  padding: 0.1em 0.35em;
  border-radius: var(--labo-radius-xs);
  background: var(--labo-hover);
  font-size: 0.9em;
}
.mdy-prose pre {
  overflow-x: auto;
  padding: var(--labo-space-4);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
  background: var(--labo-surface);
  font-size: var(--labo-font-size-small);
  line-height: var(--labo-line-height-body);
}
.mdy-prose pre code { padding: 0; background: none; }
.mdy-prose hr { border: 0; border-top: var(--labo-border-width-hairline) solid var(--labo-border); margin-block: var(--labo-space-7); }
.mdy-prose img, .mdy-prose video { border-radius: var(--labo-radius-md); }
.mdy-prose figcaption { margin-block-start: var(--labo-space-2); color: var(--labo-text-muted); font-size: var(--labo-font-size-small); }
.mdy-prose table { width: 100%; border-collapse: collapse; font-size: var(--labo-font-size-small); }
.mdy-prose th, .mdy-prose td {
  padding: var(--labo-space-2) var(--labo-space-3);
  border-top: var(--labo-border-width-hairline) solid var(--labo-border);
  text-align: start;
  vertical-align: top;
}
.mdy-prose thead th { color: var(--labo-text-muted); font-weight: var(--labo-font-weight-semibold); }
.mdy-table-scroll {
  overflow-x: auto;
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
}
.mdy-table-scroll > table { min-width: 560px; }

/* Table of contents for long reads. */
.mdy-toc {
  display: grid;
  gap: var(--labo-space-2);
  padding: var(--labo-space-5);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
  background: var(--labo-surface);
  font-size: var(--labo-font-size-small);
}
.mdy-toc__title { margin: 0; font-family: var(--labo-font-mono); font-size: var(--labo-font-size-caption); letter-spacing: var(--labo-letter-spacing-label); text-transform: uppercase; color: var(--labo-text-muted); }
.mdy-toc ol, .mdy-toc ul { display: grid; gap: var(--labo-space-2); margin: 0; padding: 0; list-style: none; }
.mdy-toc a { color: var(--labo-text-muted); text-decoration: none; }
.mdy-toc a:hover, .mdy-toc a[aria-current] { color: var(--labo-text); }
@media (min-width: 1000px) {
  .mdy-toc--sticky { position: sticky; top: calc(var(--mdy-header-height) + var(--labo-space-5)); }
}

/* 6. Cards ------------------------------------------------------------------------------ */
.mdy-card {
  position: relative;
  display: grid;
  gap: var(--labo-space-3);
  align-content: start;
  min-width: 0;
  padding: var(--labo-space-5);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
  color: var(--labo-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color var(--labo-motion-fast), transform var(--labo-motion-fast), background var(--labo-motion-fast);
}
a.mdy-card:hover, .mdy-card:has(.mdy-card__link:hover) {
  border-color: var(--labo-border-strong);
  background: var(--mdy-panel-raised);
  transform: translateY(calc(-1 * var(--labo-space-1)));
}
.mdy-card__link { color: inherit; text-decoration: none; }
.mdy-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mdy-card__eyebrow {
  margin: 0;
  color: var(--labo-glow-start);
  font-family: var(--labo-font-mono);
  font-size: var(--labo-font-size-caption);
  letter-spacing: var(--labo-letter-spacing-label);
  text-transform: uppercase;
}
.mdy-card__title { margin: 0; font-size: var(--labo-font-size-title-3); line-height: var(--labo-line-height-snug); }
.mdy-card__text { margin: 0; color: var(--labo-text-muted); font-size: var(--labo-font-size-small); line-height: var(--labo-line-height-reading); }
.mdy-card__meta { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); margin: 0; color: var(--labo-text-muted); font-size: var(--labo-font-size-caption); }
.mdy-card__media { margin: calc(-1 * var(--labo-space-5)) calc(-1 * var(--labo-space-5)) 0; overflow: hidden; border-radius: var(--labo-radius-lg) var(--labo-radius-lg) 0 0; }
.mdy-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.mdy-card__more { display: inline-flex; align-items: center; gap: var(--labo-space-2); margin-top: auto; color: var(--labo-text); font-size: var(--labo-font-size-small); font-weight: var(--labo-font-weight-semibold); }
@media (prefers-reduced-motion: reduce) {
  .mdy-card { transition: none; }
  a.mdy-card:hover, .mdy-card:has(.mdy-card__link:hover) { transform: none; }
}

/* Inline link with an icon, used for "see all" and back links. */
.mdy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--labo-space-2);
  color: var(--labo-text);
  font-weight: var(--labo-font-weight-semibold);
  text-decoration: none;
}
.mdy-link:hover { color: var(--mdy-link); }

/* 7. Free account invitation, shared by every editorial page ------------------------------ */
.mdy-signup {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--labo-space-4);
  justify-items: start;
  padding: var(--labo-space-7) var(--labo-space-6);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
}
.mdy-signup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -20% -60% 20%;
  height: 140%;
  background: radial-gradient(closest-side, var(--labo-glow-halo), transparent);
  pointer-events: none;
}
.mdy-signup__title { margin: 0; font-size: clamp(var(--labo-font-size-heading), 3.4vw, var(--labo-font-size-title-1)); }
.mdy-signup__text { margin: 0; max-width: 58ch; color: var(--labo-text-muted); font-size: var(--labo-font-size-lead); }
.mdy-signup__note { margin: 0; color: var(--labo-text-muted); font-size: var(--labo-font-size-small); }

/* 8. Header and navigation -------------------------------------------------------------- */
[data-site-header][data-header-context="conversion"],
[data-site-header][data-header-context="confirmation"],
.mdy-drawer[data-header-context="conversion"],
.mdy-drawer[data-header-context="confirmation"] { display: none; }

.mdy-header {
  position: sticky;
  z-index: var(--labo-layer-sticky);
  top: 0;
  padding-top: var(--labo-safe-area-top);
  border-bottom: var(--labo-border-width-hairline) solid var(--labo-border);
  background: var(--mdy-glass);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
}
.mdy-header__inner {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--labo-space-5);
  width: 100%;
  max-width: calc(var(--labo-container-wide) + 2 * var(--mdy-gutter));
  min-height: var(--mdy-header-height);
  margin-inline: auto;
  padding-inline: var(--mdy-gutter);
}
.mdy-header__brand { flex-shrink: 0; font-size: var(--labo-font-size-lead); }
.mdy-header__nav { display: none; align-items: center; gap: var(--labo-space-1); margin-inline-start: var(--labo-space-4); }
.mdy-header__link, .mdy-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--labo-space-1);
  min-height: var(--labo-control-md);
  padding-inline: var(--labo-space-3);
  border: 0;
  border-radius: var(--labo-radius-pill);
  background: transparent;
  color: var(--labo-text-muted);
  font: var(--labo-font-weight-medium) var(--labo-font-size-body) / 1 var(--labo-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--labo-motion-fast), background var(--labo-motion-fast);
}
.mdy-header__link:hover, .mdy-menu__toggle:hover, .mdy-menu[data-open] .mdy-menu__toggle { color: var(--labo-text); background: var(--labo-hover); }
.mdy-header__link[aria-current="page"] { color: var(--labo-text); }
.mdy-header__actions { display: flex; align-items: center; gap: var(--labo-space-2); margin-inline-start: auto; }
.mdy-header__cta { display: none; }
.mdy-header__burger {
  display: inline-grid;
  place-items: center;
  width: var(--labo-control-md);
  height: var(--labo-control-md);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  background: transparent;
  color: var(--labo-text);
  cursor: pointer;
}
.mdy-header__burger:hover { background: var(--labo-hover); }
@media (min-width: 1024px) {
  .mdy-header__nav { display: flex; }
  .mdy-header__cta { display: inline-flex; }
  .mdy-header__burger { display: none; }
}
@media (min-width: 560px) {
  .mdy-header__cta { display: inline-flex; }
}

.mdy-menu { position: relative; }
.mdy-menu__chevron { transition: transform var(--labo-motion-fast); }
.mdy-menu[data-open] .mdy-menu__chevron { transform: rotate(180deg); }
.mdy-menu__panel {
  position: absolute;
  z-index: var(--labo-layer-popover);
  top: calc(100% + var(--labo-space-2));
  left: 50%;
  display: none;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: var(--labo-space-5);
  width: max-content;
  max-width: min(640px, calc(100vw - 2 * var(--mdy-gutter)));
  padding: var(--labo-space-5);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
  box-shadow: var(--labo-shadow-dialog);
  transform: translateX(-50%);
}
.mdy-menu[data-open] .mdy-menu__panel { display: grid; }
.mdy-menu__group { display: grid; gap: var(--labo-space-1); align-content: start; }
.mdy-menu__heading, .mdy-drawer__heading, .mdy-drawer__section, .mdy-drawer__eyebrow, .mdy-footer__heading, .mdy-footer__label {
  margin: 0 0 var(--labo-space-2);
  color: var(--labo-text-muted);
  font-family: var(--labo-font-mono);
  font-size: var(--labo-font-size-caption);
  font-weight: var(--labo-font-weight-medium);
  letter-spacing: var(--labo-letter-spacing-label);
  text-transform: uppercase;
}
.mdy-menu__link {
  display: flex;
  align-items: center;
  min-height: var(--labo-control-sm);
  padding: var(--labo-space-1) var(--labo-space-2);
  margin-inline: calc(-1 * var(--labo-space-2));
  border: 0;
  border-radius: var(--labo-radius-sm);
  background: transparent;
  color: var(--labo-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.mdy-menu__link:hover, .mdy-menu__link[aria-current="page"] { background: var(--labo-hover); }
.mdy-menu__newsletter { color: var(--mdy-link); }
@media (prefers-reduced-motion: reduce) {
  .mdy-menu__chevron, .mdy-header__link, .mdy-menu__toggle { transition: none; }
}

/* Mobile drawer. */
.mdy-drawer { position: fixed; z-index: var(--labo-layer-overlay); inset: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.mdy-drawer[data-open] { visibility: visible; pointer-events: auto; }
.mdy-drawer__overlay { position: absolute; inset: 0; background: var(--labo-scrim); opacity: 0; transition: opacity var(--labo-motion-base); }
.mdy-drawer[data-open] .mdy-drawer__overlay { opacity: 1; }
.mdy-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  padding: calc(var(--labo-space-5) + var(--labo-safe-area-top)) var(--labo-space-5) calc(var(--labo-space-5) + var(--labo-safe-area-bottom));
  border-inline-start: var(--labo-border-width-hairline) solid var(--labo-border);
  background: var(--labo-canvas);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--labo-motion-base) var(--labo-easing-standard);
}
.mdy-drawer[data-open] .mdy-drawer__panel { transform: none; }
.mdy-drawer__close {
  align-self: flex-end;
  display: inline-grid;
  place-items: center;
  width: var(--labo-control-md);
  height: var(--labo-control-md);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  background: transparent;
  color: var(--labo-text);
  cursor: pointer;
}
.mdy-drawer__body { display: grid; gap: var(--labo-space-3); padding-block: var(--labo-space-4); }
.mdy-drawer__section { margin-block-start: var(--labo-space-3); }
.mdy-drawer__paths { display: grid; gap: var(--labo-space-2); }
.mdy-drawer__paths a {
  display: grid;
  gap: var(--labo-space-1);
  padding: var(--labo-space-3) var(--labo-space-4);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-md);
  background: var(--labo-surface);
  color: var(--labo-text);
  text-decoration: none;
}
.mdy-drawer__paths a span { font-family: var(--labo-font-display); font-weight: var(--labo-font-weight-bold); }
.mdy-drawer__paths small { color: var(--labo-text-muted); font-size: var(--labo-font-size-small); }
.mdy-drawer__paths a[aria-current="page"] { border-color: var(--labo-glow-start); }
.mdy-drawer__resources { display: grid; gap: var(--labo-space-4); }
.mdy-drawer__group { display: grid; gap: var(--labo-space-1); }
.mdy-drawer__heading { margin: 0; }
.mdy-drawer__links { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); }
.mdy-drawer__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--labo-control-sm);
  padding-inline: var(--labo-space-3);
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-pill);
  color: var(--labo-text);
  text-decoration: none;
}
.mdy-drawer__links a[aria-current="page"] { border-color: var(--labo-glow-start); }
.mdy-drawer__actions { display: grid; gap: var(--labo-space-2); margin-top: auto; padding-top: var(--labo-space-5); }
@media (prefers-reduced-motion: reduce) {
  .mdy-drawer__overlay, .mdy-drawer__panel { transition: none; }
}

/* 9. Footer ----------------------------------------------------------------------------- */
.mdy-footer {
  margin-top: var(--labo-space-8);
  padding-bottom: var(--labo-safe-area-bottom);
  border-top: var(--labo-border-width-hairline) solid var(--labo-border);
  background: var(--labo-surface);
}
.mdy-footer__inner {
  box-sizing: border-box;
  display: grid;
  gap: var(--labo-space-7);
  width: 100%;
  max-width: calc(var(--labo-container-content) + 2 * var(--mdy-gutter));
  margin-inline: auto;
  padding: var(--labo-space-8) var(--mdy-gutter) var(--labo-space-5);
}
.mdy-footer__invite {
  display: grid;
  gap: var(--labo-space-5);
  align-items: end;
  padding-bottom: var(--labo-space-7);
  border-bottom: var(--labo-border-width-hairline) solid var(--labo-border);
}
@media (min-width: 1000px) {
  .mdy-footer__invite { grid-template-columns: minmax(0, 1fr) auto; }
}
.mdy-footer__invite-text { display: grid; gap: var(--labo-space-3); }
.mdy-footer__label { margin: 0; }
.mdy-footer__headline {
  margin: 0;
  font-family: var(--labo-font-display);
  font-size: clamp(var(--labo-font-size-title-2), 4vw, var(--labo-font-size-display));
  font-weight: var(--labo-font-weight-bold);
  line-height: var(--labo-line-height-tight);
  letter-spacing: var(--labo-letter-spacing-display);
  text-wrap: balance;
}
.mdy-footer__intro { margin: 0; max-width: 56ch; color: var(--labo-text-muted); font-size: var(--labo-font-size-lead); }
.mdy-footer__grid { display: grid; gap: var(--labo-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
@media (min-width: 1000px) {
  .mdy-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.mdy-footer__brand-block { display: grid; gap: var(--labo-space-3); align-content: start; }
.mdy-footer__brand-block > p { margin: 0; max-width: 36ch; color: var(--labo-text-muted); font-size: var(--labo-font-size-small); }
.mdy-footer__socials { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); }
.mdy-footer__socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--labo-space-2);
  min-height: var(--labo-control-sm);
  padding-inline: var(--labo-space-3);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  color: var(--labo-text);
  font-size: var(--labo-font-size-small);
  text-decoration: none;
}
.mdy-footer__socials a:hover { background: var(--labo-hover); }
.mdy-footer__column { display: grid; gap: var(--labo-space-2); align-content: start; }
.mdy-footer__column a, .mdy-footer__legal {
  color: var(--labo-text-muted);
  font-size: var(--labo-font-size-small);
  text-decoration: none;
}
.mdy-footer__column a:hover, .mdy-footer__legal:hover { color: var(--labo-text); }
@media (pointer: coarse) {
  .mdy-footer__column a { display: inline-flex; align-items: center; min-height: var(--labo-target-min); }
}
.mdy-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--labo-space-3);
  padding-top: var(--labo-space-5);
  border-top: var(--labo-border-width-hairline) solid var(--labo-border);
  color: var(--labo-text-muted);
  font-size: var(--labo-font-size-caption);
}
.mdy-footer__bottom p { margin: 0; }

/* 10. Dialogs: newsletter and free account invitation ------------------------------------ */
.mdy-modal {
  position: fixed;
  z-index: var(--labo-layer-overlay);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--labo-space-5);
  background: var(--labo-scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--labo-motion-base);
}
.mdy-modal[data-visible] { opacity: 1; }
.mdy-modal__card {
  position: relative;
  box-sizing: border-box;
  display: grid;
  gap: var(--labo-space-4);
  width: min(100%, var(--labo-panel-dialog));
  max-height: calc(100dvh - 2 * var(--labo-space-5));
  overflow-y: auto;
  padding: var(--labo-space-7) var(--labo-space-6) var(--labo-space-6);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
  box-shadow: var(--labo-shadow-dialog);
  transform: translateY(var(--labo-space-3));
  transition: transform var(--labo-motion-base) var(--labo-easing-standard);
}
.mdy-modal[data-visible] .mdy-modal__card { transform: none; }
.mdy-modal__body { display: grid; gap: var(--labo-space-4); justify-items: start; }
.mdy-modal__close {
  position: absolute;
  top: var(--labo-space-3);
  right: var(--labo-space-3);
  display: inline-grid;
  place-items: center;
  width: var(--labo-control-md);
  height: var(--labo-control-md);
  border: 0;
  border-radius: var(--labo-radius-pill);
  background: transparent;
  color: var(--labo-text-muted);
  cursor: pointer;
}
.mdy-modal__close:hover { color: var(--labo-text); background: var(--labo-hover); }
.mdy-modal__title { margin: 0; padding-inline-end: var(--labo-space-6); font-size: clamp(var(--labo-font-size-heading), 5vw, var(--labo-font-size-title-2)); line-height: var(--labo-line-height-tight); }
.mdy-modal__desc, .mdy-modal__note { margin: 0; color: var(--labo-text-muted); }
.mdy-modal__note { font-size: var(--labo-font-size-small); }
.mdy-modal__form { display: grid; gap: var(--labo-space-4); }
.mdy-modal__form .labo9-button { width: 100%; }
.mdy-modal__form #np-email-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mdy-modal__consent { display: flex; align-items: flex-start; gap: var(--labo-space-3); color: var(--labo-text-muted); font-size: var(--labo-font-size-small); }
.mdy-modal__consent input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--labo-action); }
.mdy-modal__error { margin: 0; color: var(--labo-danger); font-size: var(--labo-font-size-small); font-weight: var(--labo-font-weight-semibold); }
.mdy-modal [type="submit"]:disabled { cursor: wait; }
@media (max-width: 600px) {
  .mdy-modal { align-items: flex-end; padding: var(--labo-space-3); }
  .mdy-modal__card { padding: var(--labo-space-6) var(--labo-space-5) var(--labo-space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .mdy-modal, .mdy-modal__card { transition: none; }
}

/* 11. Cookie consent -------------------------------------------------------------------- */
.mdy-consent {
  position: fixed;
  z-index: var(--labo-layer-toast);
  inset-inline: 0;
  bottom: 0;
  padding: var(--labo-space-5) var(--mdy-gutter) calc(var(--labo-space-5) + var(--labo-safe-area-bottom));
  border-top: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  background: var(--labo-surface);
  color: var(--labo-text);
  box-shadow: var(--labo-shadow-dialog);
}
.mdy-consent__inner {
  display: flex;
  flex-direction: column;
  gap: var(--labo-space-4);
  max-width: var(--labo-container-content);
  margin-inline: auto;
}
.mdy-consent__text { margin: 0; color: var(--labo-text-muted); font-size: var(--labo-font-size-small); line-height: var(--labo-line-height-reading); }
.mdy-consent__text strong { color: var(--labo-text); }
.mdy-consent__text a { color: var(--mdy-link); }
.mdy-consent__actions { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); }
.mdy-consent__prefs { display: none; gap: var(--labo-space-1); padding: var(--labo-space-4); border: var(--labo-border-width-hairline) solid var(--labo-border); border-radius: var(--labo-radius-md); background: var(--labo-canvas); }
.mdy-consent[data-expanded] .mdy-consent__prefs { display: grid; }
.mdy-consent__pref { display: flex; align-items: flex-start; gap: var(--labo-space-3); padding-block: var(--labo-space-3); border-bottom: var(--labo-border-width-hairline) solid var(--labo-border); cursor: pointer; }
.mdy-consent__pref input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--labo-action); }
.mdy-consent__pref-label { display: block; color: var(--labo-text); font-weight: var(--labo-font-weight-semibold); font-size: var(--labo-font-size-small); }
.mdy-consent__pref-desc { display: block; color: var(--labo-text-muted); font-size: var(--labo-font-size-caption); line-height: var(--labo-line-height-body); }
.mdy-consent__actions--save { margin-top: var(--labo-space-3); }
@media (min-width: 900px) {
  .mdy-consent__inner { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .mdy-consent__text { flex: 1; min-width: 0; }
  .mdy-consent[data-expanded] .mdy-consent__inner { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: no-preference) {
  .mdy-consent { animation: mdy-rise var(--labo-motion-slow) var(--labo-easing-standard) both; }
}
@keyframes mdy-rise { from { transform: translateY(100%); } }
.mdy-consent-reopen {
  position: fixed;
  z-index: var(--labo-layer-sticky);
  left: var(--labo-space-3);
  bottom: calc(var(--labo-space-3) + var(--labo-safe-area-bottom));
  padding: var(--labo-space-1) var(--labo-space-3);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  background: var(--mdy-glass);
  color: var(--labo-text-muted);
  font-size: var(--labo-font-size-caption);
  text-decoration: none;
}
.mdy-consent-reopen:hover { color: var(--labo-text); }

/* 12. YouTube facade --------------------------------------------------------------------- */
.mdy-video {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: var(--labo-border-width-hairline) solid var(--labo-border);
  border-radius: var(--labo-radius-lg);
  background: var(--labo-surface);
}
.mdy-video__thumb, .mdy-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.mdy-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.mdy-video__play::before {
  content: "";
  width: 72px;
  height: 72px;
  border-radius: var(--labo-radius-pill);
  background: var(--labo-action);
  box-shadow: var(--labo-shadow-dialog);
  transition: transform var(--labo-motion-fast);
}
.mdy-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-block: 12px solid transparent;
  border-inline-start: 19px solid var(--labo-action-text);
  transform: translate(-35%, -50%);
}
.mdy-video__play:hover::before { transform: scale(1.06); }
/* The play button covers the whole frame, so its focus ring is drawn inside it. */
.mdy-video__play:focus-visible { outline-offset: calc(-1 * var(--labo-focus-offset-wide) - var(--labo-focus-ring)); border-radius: inherit; }
.mdy-video__fallback {
  position: absolute;
  inset-inline: var(--labo-space-3);
  bottom: var(--labo-space-3);
  padding: var(--labo-space-2) var(--labo-space-3);
  border-radius: var(--labo-radius-pill);
  background: var(--mdy-glass);
  color: var(--labo-text);
  font-size: var(--labo-font-size-small);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) { .mdy-video__play::before { transition: none; } }

/* 13. Discovery search on hubs ----------------------------------------------------------- */
.mdy-discovery { display: grid; gap: var(--labo-space-4); }
.mdy-discovery__search { position: relative; max-width: 560px; }
.mdy-discovery__search .labo9-icon { position: absolute; top: 50%; left: var(--labo-space-4); color: var(--labo-text-muted); transform: translateY(-50%); pointer-events: none; }
.mdy-discovery__search .labo9-input { width: 100%; padding-inline-start: calc(var(--labo-space-4) * 2 + var(--labo-icon-md)); }
.mdy-discovery__filters { display: flex; flex-wrap: wrap; gap: var(--labo-space-2); }
.mdy-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--labo-space-2);
  min-height: var(--labo-control-sm);
  padding-inline: var(--labo-space-3);
  border: var(--labo-border-width-hairline) solid var(--labo-border-strong);
  border-radius: var(--labo-radius-pill);
  background: transparent;
  color: var(--labo-text-muted);
  font: var(--labo-font-weight-medium) var(--labo-font-size-small) / 1 var(--labo-font-body);
  text-decoration: none;
  cursor: pointer;
}
.mdy-chip:hover { color: var(--labo-text); background: var(--labo-hover); }
.mdy-chip[aria-pressed="true"], .mdy-chip[aria-current] { border-color: var(--labo-text); color: var(--labo-text); background: var(--labo-hover); }
@media (pointer: coarse) { .mdy-chip { min-height: var(--labo-target-min); } }
[data-discovery-item][hidden],
[data-discovery-group][hidden],
[data-discovery-section][hidden],
[data-discovery-subsection][hidden] { display: none !important; }